@pega/angular-sdk-components 0.23.1 → 0.23.2

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

@@ -1428,11 +1428,11 @@ class CancelAlertComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelAlertComponent, deps: [{ token: ProgressSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CancelAlertComponent, isStandalone: true, selector: "app-cancel-alert", inputs: { pConn$: "pConn$", bShowAlert$: "bShowAlert$" }, outputs: { onAlertState$: "onAlertState$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"bShowAlert$\" class=\"psdk-cancel-alert-background\">\n  <div class=\"psdk-cancel-alert-top\">\n    <h3 *ngIf=\"heading$ != ''\">{{ heading$ }}</h3>\n    <div>\n      <p>{{ body1$ }}</p>\n      <p>{{ body2$ }}</p>\n    </div>\n    <mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('save')\">{{ localizedVal('Save for later', localeCategory) }}</button>\n      </mat-grid-tile>\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('continue')\">{{ localizedVal('Continue Working', localeCategory) }}</button>\n        <button mat-raised-button color=\"primary\" (click)=\"buttonClick('delete')\">{{ localizedVal('Delete', localeCategory) }}</button>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </div>\n</div>\n", styles: [".psdk-cancel-alert-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:9999;top:0;left:0}.psdk-cancel-alert-top{display:table;margin:auto;min-width:550px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i3$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CancelAlertComponent, isStandalone: true, selector: "app-cancel-alert", inputs: { pConn$: "pConn$", bShowAlert$: "bShowAlert$" }, outputs: { onAlertState$: "onAlertState$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"bShowAlert$\" class=\"psdk-cancel-alert-background\">\n  <div class=\"psdk-cancel-alert-top\">\n    <h3 *ngIf=\"heading$ != ''\">{{ heading$ }}</h3>\n    <div>\n      <p>{{ body1$ }}</p>\n      <p>{{ body2$ }}</p>\n    </div>\n    <mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('save')\">{{ localizedVal('Save for later', localeCategory) }}</button>\n      </mat-grid-tile>\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('continue')\">{{ localizedVal('Continue Working', localeCategory) }}</button>\n        <button mat-raised-button color=\"primary\" (click)=\"buttonClick('delete')\">{{ localizedVal('Delete', localeCategory) }}</button>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </div>\n</div>\n", styles: [".psdk-cancel-alert-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:9999;top:0;left:0}.psdk-cancel-alert-top{display:table;margin:auto;min-width:550px;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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i3$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cancel-alert', standalone: true, imports: [CommonModule, MatGridListModule, MatButtonModule], template: "<div *ngIf=\"bShowAlert$\" class=\"psdk-cancel-alert-background\">\n  <div class=\"psdk-cancel-alert-top\">\n    <h3 *ngIf=\"heading$ != ''\">{{ heading$ }}</h3>\n    <div>\n      <p>{{ body1$ }}</p>\n      <p>{{ body2$ }}</p>\n    </div>\n    <mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('save')\">{{ localizedVal('Save for later', localeCategory) }}</button>\n      </mat-grid-tile>\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('continue')\">{{ localizedVal('Continue Working', localeCategory) }}</button>\n        <button mat-raised-button color=\"primary\" (click)=\"buttonClick('delete')\">{{ localizedVal('Delete', localeCategory) }}</button>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </div>\n</div>\n", styles: [".psdk-cancel-alert-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:9999;top:0;left:0}.psdk-cancel-alert-top{display:table;margin:auto;min-width:550px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}\n"] }]
+            args: [{ selector: 'app-cancel-alert', standalone: true, imports: [CommonModule, MatGridListModule, MatButtonModule], template: "<div *ngIf=\"bShowAlert$\" class=\"psdk-cancel-alert-background\">\n  <div class=\"psdk-cancel-alert-top\">\n    <h3 *ngIf=\"heading$ != ''\">{{ heading$ }}</h3>\n    <div>\n      <p>{{ body1$ }}</p>\n      <p>{{ body2$ }}</p>\n    </div>\n    <mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('save')\">{{ localizedVal('Save for later', localeCategory) }}</button>\n      </mat-grid-tile>\n      <mat-grid-tile>\n        <button mat-raised-button color=\"secondary\" (click)=\"buttonClick('continue')\">{{ localizedVal('Continue Working', localeCategory) }}</button>\n        <button mat-raised-button color=\"primary\" (click)=\"buttonClick('delete')\">{{ localizedVal('Delete', localeCategory) }}</button>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </div>\n</div>\n", styles: [".psdk-cancel-alert-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:9999;top:0;left:0}.psdk-cancel-alert-top{display:table;margin:auto;min-width:550px;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)}\n"] }]
         }], ctorParameters: function () { return [{ type: ProgressSpinnerService }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], bShowAlert$: [{
@@ -2935,6 +2935,8 @@ class DateTimeComponent {
         this.displayMode$ = this.configProps$.displayMode;
         this.testId = this.configProps$.testId;
         this.helperText = this.configProps$.helperText;
+        this.value$ = this.configProps$?.value;
+        this.fieldControl.setValue(this.value$);
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -3486,7 +3488,7 @@ class DropdownComponent {
         }
         this.componentReference = this.pConn$.getStateProps().value;
         // @ts-ignore - parameter “contextName” for getDataObject method should be optional
-        const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
+        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$) {
@@ -4347,11 +4349,11 @@ class SemanticLinkComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SemanticLinkComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SemanticLinkComponent, isStandalone: true, selector: "app-semantic-link", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n\n<ng-template #noDisplayMode>\n  <div *ngIf=\"label$ !== undefined && bVisible$ !== false\" class=\"psdk-grid-filter\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-value\">{{ value$ || '---' }}</div>\n  </div>\n</ng-template>\n", styles: [".psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-label{color:#0000008a;margin:8px 0}.psdk-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SemanticLinkComponent, isStandalone: true, selector: "app-semantic-link", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n\n<ng-template #noDisplayMode>\n  <div *ngIf=\"label$ !== undefined && bVisible$ !== false\" class=\"psdk-grid-filter\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-value\">{{ value$ || '---' }}</div>\n  </div>\n</ng-template>\n", styles: [".psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-label{color:var(--app-label-color);margin:8px 0}.psdk-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SemanticLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-semantic-link', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n\n<ng-template #noDisplayMode>\n  <div *ngIf=\"label$ !== undefined && bVisible$ !== false\" class=\"psdk-grid-filter\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-value\">{{ value$ || '---' }}</div>\n  </div>\n</ng-template>\n", styles: [".psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-label{color:#0000008a;margin:8px 0}.psdk-value{margin:8px 0}\n"] }]
+            args: [{ selector: 'app-semantic-link', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n\n<ng-template #noDisplayMode>\n  <div *ngIf=\"label$ !== undefined && bVisible$ !== false\" class=\"psdk-grid-filter\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-value\">{{ value$ || '---' }}</div>\n  </div>\n</ng-template>\n", styles: [".psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-label{color:var(--app-label-color);margin:8px 0}.psdk-value{margin:8px 0}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -5147,7 +5149,7 @@ class UserReferenceComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserReferenceComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:gray}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserReferenceComponent, decorators: [{
             type: Component,
@@ -5160,7 +5162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatInputModule,
                         MatAutocompleteModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:gray}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"] }]
+                    ], template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -5834,11 +5836,11 @@ class FlowContainerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: ["h2{font-size:1.1rem}h5{font-size:.8rem}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-flow-container-top{background-color:#fff;padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-message-card{margin:10px}.psdk-icon{width:1.6rem;display:inline-block;padding:0rem .6rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCardModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatCard; }), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCardModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatCard; }), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flow-container', providers: [Utils], standalone: true, imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: ["h2{font-size:1.1rem}h5{font-size:.8rem}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-flow-container-top{background-color:#fff;padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-message-card{margin:10px}.psdk-icon{width:1.6rem;display:inline-block;padding:0rem .6rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}\n"] }]
+            args: [{ selector: 'app-flow-container', providers: [Utils], standalone: true, imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -6204,11 +6206,11 @@ class ModalViewContainerComponent {
         return `${this.localizedVal('Create', this.localeCategory)} ${this.localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalViewContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.NgZone }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-view-container-top{display:block;margin:auto;min-width:650px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;overflow-y:auto}.psdk-dialog-float{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalViewContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-view-container-top{display:block;margin:auto;min-width:650px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;overflow-y:auto}.psdk-dialog-float{position:absolute}\n"] }]
+            args: [{ selector: 'app-modal-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.NgZone }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], displayOnlyFA$: [{
@@ -6415,11 +6417,11 @@ class ViewContainerComponent {
         return `${sContext.toUpperCase()}/${sName.toUpperCase()}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewContainerComponent, deps: [{ token: AngularPConnectService }, { token: ProgressSpinnerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewContainerComponent, isStandalone: true, selector: "app-view-container", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, ngImport: i0, template: "<div class=\"psdk-view-container-top\" id=\"{{ buildName$ }}\">\n  <div *ngIf=\"isViewContainer$; else isReference\">\n    <h3 *ngIf=\"title$ !== ''\">{{ title$ }}</h3>\n    <div *ngIf=\"templateName$; else showChildren\">\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{\n          pConn$: createdViewPConn$,\n          formGroup$: formGroup$,\n          displayOnlyFA$: displayOnlyFA$\n        }\"\n        errorMsg=\"View Container missing Template {{ templateName$ }}\"\n      ></component-mapper>\n    </div>\n    <ng-template #showChildren>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.getPConnect(),\n            displayOnlyFA$: displayOnlyFA$\n          }\"\n          errorMsg=\"ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </div>\n  <ng-template #isReference>\n    <component-mapper name=\"View\" [props]=\"{ pConn$: viewPConn$, displayOnlyFA$ }\"></component-mapper>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.psdk-view-container-top{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewContainerComponent, isStandalone: true, selector: "app-view-container", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, ngImport: i0, template: "<div class=\"psdk-view-container-top\" id=\"{{ buildName$ }}\">\n  <div *ngIf=\"isViewContainer$; else isReference\">\n    <h3 *ngIf=\"title$ !== ''\">{{ title$ }}</h3>\n    <div *ngIf=\"templateName$; else showChildren\">\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{\n          pConn$: createdViewPConn$,\n          formGroup$: formGroup$,\n          displayOnlyFA$: displayOnlyFA$\n        }\"\n        errorMsg=\"View Container missing Template {{ templateName$ }}\"\n      ></component-mapper>\n    </div>\n    <ng-template #showChildren>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.getPConnect(),\n            displayOnlyFA$: displayOnlyFA$\n          }\"\n          errorMsg=\"ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </div>\n  <ng-template #isReference>\n    <component-mapper name=\"View\" [props]=\"{ pConn$: viewPConn$, displayOnlyFA$ }\"></component-mapper>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-view-container-top\" id=\"{{ buildName$ }}\">\n  <div *ngIf=\"isViewContainer$; else isReference\">\n    <h3 *ngIf=\"title$ !== ''\">{{ title$ }}</h3>\n    <div *ngIf=\"templateName$; else showChildren\">\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{\n          pConn$: createdViewPConn$,\n          formGroup$: formGroup$,\n          displayOnlyFA$: displayOnlyFA$\n        }\"\n        errorMsg=\"View Container missing Template {{ templateName$ }}\"\n      ></component-mapper>\n    </div>\n    <ng-template #showChildren>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.getPConnect(),\n            displayOnlyFA$: displayOnlyFA$\n          }\"\n          errorMsg=\"ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </div>\n  <ng-template #isReference>\n    <component-mapper name=\"View\" [props]=\"{ pConn$: viewPConn$, displayOnlyFA$ }\"></component-mapper>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.psdk-view-container-top{padding:0}\n"] }]
+            args: [{ selector: 'app-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-view-container-top\" id=\"{{ buildName$ }}\">\n  <div *ngIf=\"isViewContainer$; else isReference\">\n    <h3 *ngIf=\"title$ !== ''\">{{ title$ }}</h3>\n    <div *ngIf=\"templateName$; else showChildren\">\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{\n          pConn$: createdViewPConn$,\n          formGroup$: formGroup$,\n          displayOnlyFA$: displayOnlyFA$\n        }\"\n        errorMsg=\"View Container missing Template {{ templateName$ }}\"\n      ></component-mapper>\n    </div>\n    <ng-template #showChildren>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.getPConnect(),\n            displayOnlyFA$: displayOnlyFA$\n          }\"\n          errorMsg=\"ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </div>\n  <ng-template #isReference>\n    <component-mapper name=\"View\" [props]=\"{ pConn$: viewPConn$, displayOnlyFA$ }\"></component-mapper>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: ProgressSpinnerService }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -6469,11 +6471,11 @@ class AssignmentCardComponent {
         this.actionButtonClick.emit(oData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentCardComponent, isStandalone: true, selector: "app-assignment-card", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", updateToken$: "updateToken$" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-flow-container{padding:0rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentCardComponent, isStandalone: true, selector: "app-assignment-card", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", updateToken$: "updateToken$" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-assignment-card', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-flow-container{padding:0rem 1rem}\n"] }]
+            args: [{ selector: 'app-assignment-card', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -7051,11 +7053,11 @@ class MultiStepComponent {
         return index < this.arNavigationSteps$.length - 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiStepComponent, isStandalone: true, selector: "app-multi-step", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", bIsVertical$: "bIsVertical$", arCurrentStepIndicies$: "arCurrentStepIndicies$", arNavigationSteps$: "arNavigationSteps$" }, outputs: { actionButtonClick: "actionButtonClick" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:#673ab7}.psdk-icon-not-current{color:gray}.psdk-current-svg-icon{width:1rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-not-current-svg-icon{width:1rem;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:#000000de}.psdk-sub-step-not-current{padding-left:.625rem;color:#0000008a}.psdk-flow-container-top{background-color:#fff;padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:gray;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:#673ab7;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:#0000008a;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:#000000de;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:#0000001f}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:gray;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:#673ab7;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:#0000008a;display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:#000000de;display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:#0000001f;border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiStepComponent, isStandalone: true, selector: "app-multi-step", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", bIsVertical$: "bIsVertical$", arCurrentStepIndicies$: "arCurrentStepIndicies$", arNavigationSteps$: "arNavigationSteps$" }, outputs: { actionButtonClick: "actionButtonClick" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multi-step', providers: [Utils], standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:#673ab7}.psdk-icon-not-current{color:gray}.psdk-current-svg-icon{width:1rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-not-current-svg-icon{width:1rem;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:#000000de}.psdk-sub-step-not-current{padding-left:.625rem;color:#0000008a}.psdk-flow-container-top{background-color:#fff;padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:gray;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:#673ab7;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:#0000008a;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:#000000de;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:#0000001f}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:gray;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:#673ab7;color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:#0000008a;display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:#000000de;display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:#0000001f;border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
+            args: [{ selector: 'app-multi-step', providers: [Utils], standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -7180,11 +7182,11 @@ class NavbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid #414141;width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:100%;color:#d9d9d9;overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:15.625rem}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:15%;color:#d9d9d9;overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:#262626;width:5rem;height:50%;color:#d9d9d9;overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:#d9d9d9}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:grey;color:#fff;font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:#00000080}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-navbar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule], template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid #414141;width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:100%;color:#d9d9d9;overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:15.625rem}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:15%;color:#d9d9d9;overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:#262626;width:5rem;height:50%;color:#d9d9d9;overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:#d9d9d9}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:grey;color:#fff;font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:#00000080}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"] }]
+            args: [{ selector: 'app-navbar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule], template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], appName$: [{
@@ -7467,7 +7469,7 @@ class RootContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootContainerComponent, deps: [{ token: AngularPConnectService }, { token: ProgressSpinnerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#f5f5f5;position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return HybridViewContainerComponent; }), selector: "app-hybrid-view-container", inputs: ["pConn$", "formGroup$", "displayOnlyFA$"] }, { kind: "component", type: i0.forwardRef(function () { return ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$", "displayOnlyFA$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return HybridViewContainerComponent; }), selector: "app-hybrid-view-container", inputs: ["pConn$", "formGroup$", "displayOnlyFA$"] }, { kind: "component", type: i0.forwardRef(function () { return ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$", "displayOnlyFA$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootContainerComponent, decorators: [{
             type: Component,
@@ -7478,7 +7480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ModalViewContainerComponent,
                         PreviewViewContainerComponent,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#f5f5f5;position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
+                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: ProgressSpinnerService }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], displayOnlyFA$: [{
@@ -7533,11 +7535,11 @@ class StagesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StagesComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:gray}.psdk-stages-past{color:#673ab7;padding-right:.3125rem}.psdk-stages-present{color:#ffc400;padding-right:.3125rem}.psdk-stages-future{color:gray;padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid lightgrey}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:#fff;border-radius:.5rem;border:.0625rem solid lightgrey;overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:#000;font-size:1rem}.psdk-stages-inner-present{color:#673ab7;font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:gray;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stages', standalone: true, imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:gray}.psdk-stages-past{color:#673ab7;padding-right:.3125rem}.psdk-stages-present{color:#ffc400;padding-right:.3125rem}.psdk-stages-future{color:gray;padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid lightgrey}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:#fff;border-radius:.5rem;border:.0625rem solid lightgrey;overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:#000;font-size:1rem}.psdk-stages-inner-present{color:#673ab7;font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:gray;font-size:1rem}\n"] }]
+            args: [{ selector: 'app-stages', standalone: true, imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -7967,11 +7969,11 @@ class AppShellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellComponent, deps: [{ token: AngularPConnectService }, { token: ErrorMessagesService }, { token: i4$2.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppShellComponent, isStandalone: true, selector: "app-app-shell", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"appshell-top\">\n  <div *ngIf=\"bShowAppShell$ && portalTemplate !== 'wss'\">\n    <component-mapper name=\"NavBar\" [props]=\"{ pConn$, appName$, pages$, caseTypes$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"bShowAppShell$ && portalTemplate === 'wss'\">\n    <component-mapper name=\"WssNavBar\" [props]=\"{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }\"></component-mapper>\n  </div>\n  <div [ngClass]=\"{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }\">\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getComponentName() == 'ViewContainer'\">\n        <component-mapper name=\"ViewContainer\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".appshell-top,.appshell-top-wss{background-color:#f5f5f5}.appshell-main{position:relative;margin-left:5rem;min-height:100vh;display:block}.appshell-main-wss{position:relative;min-height:100vh;display:block;width:100%}.psdk-icon{padding:0rem .125rem;min-width:unset}.progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#f5f5f5;position:fixed;z-index:999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}::ng-deep snack-bar-container.snackbar-newline{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSnackBarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppShellComponent, isStandalone: true, selector: "app-app-shell", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"appshell-top\">\n  <div *ngIf=\"bShowAppShell$ && portalTemplate !== 'wss'\">\n    <component-mapper name=\"NavBar\" [props]=\"{ pConn$, appName$, pages$, caseTypes$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"bShowAppShell$ && portalTemplate === 'wss'\">\n    <component-mapper name=\"WssNavBar\" [props]=\"{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }\"></component-mapper>\n  </div>\n  <div [ngClass]=\"{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }\">\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getComponentName() == 'ViewContainer'\">\n        <component-mapper name=\"ViewContainer\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".appshell-top,.appshell-top-wss{background-color:var(--app-background-color)}.appshell-main{position:relative;margin-left:var(--app-nav-width);min-height:100vh;display:block}.appshell-main-wss{position:relative;min-height:100vh;display:block;width:100%}.psdk-icon{padding:0rem .125rem;min-width:unset}.progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}::ng-deep snack-bar-container.snackbar-newline{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSnackBarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-app-shell', standalone: true, imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"appshell-top\">\n  <div *ngIf=\"bShowAppShell$ && portalTemplate !== 'wss'\">\n    <component-mapper name=\"NavBar\" [props]=\"{ pConn$, appName$, pages$, caseTypes$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"bShowAppShell$ && portalTemplate === 'wss'\">\n    <component-mapper name=\"WssNavBar\" [props]=\"{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }\"></component-mapper>\n  </div>\n  <div [ngClass]=\"{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }\">\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getComponentName() == 'ViewContainer'\">\n        <component-mapper name=\"ViewContainer\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".appshell-top,.appshell-top-wss{background-color:#f5f5f5}.appshell-main{position:relative;margin-left:5rem;min-height:100vh;display:block}.appshell-main-wss{position:relative;min-height:100vh;display:block;width:100%}.psdk-icon{padding:0rem .125rem;min-width:unset}.progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#f5f5f5;position:fixed;z-index:999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}::ng-deep snack-bar-container.snackbar-newline{white-space:pre-line}\n"] }]
+            args: [{ selector: 'app-app-shell', standalone: true, imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"appshell-top\">\n  <div *ngIf=\"bShowAppShell$ && portalTemplate !== 'wss'\">\n    <component-mapper name=\"NavBar\" [props]=\"{ pConn$, appName$, pages$, caseTypes$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"bShowAppShell$ && portalTemplate === 'wss'\">\n    <component-mapper name=\"WssNavBar\" [props]=\"{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }\"></component-mapper>\n  </div>\n  <div [ngClass]=\"{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }\">\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getComponentName() == 'ViewContainer'\">\n        <component-mapper name=\"ViewContainer\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".appshell-top,.appshell-top-wss{background-color:var(--app-background-color)}.appshell-main{position:relative;margin-left:var(--app-nav-width);min-height:100vh;display:block}.appshell-main-wss{position:relative;min-height:100vh;display:block;width:100%}.psdk-icon{padding:0rem .125rem;min-width:unset}.progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}::ng-deep snack-bar-container.snackbar-newline{white-space:pre-line}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: ErrorMessagesService }, { type: i4$2.MatSnackBar }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -8032,11 +8034,11 @@ class CaseSummaryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseSummaryComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseSummaryComponent, isStandalone: true, selector: "app-case-summary", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<component-mapper name=\"CaseSummaryFields\" [props]=\"{ status$, bShowStatus$, primaryFields$, secondaryFields$ }\"></component-mapper>\n", styles: [".psdk-case-summary-info-box{display:flex;flex-direction:row;justify-content:space-evenly}.psdk-case-summary-data{flex:1}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%}.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-status{background-color:#673ab7;color:#fff;padding:0;margin-top:.625rem;width:-moz-fit-content;width:fit-content}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseSummaryComponent, isStandalone: true, selector: "app-case-summary", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<component-mapper name=\"CaseSummaryFields\" [props]=\"{ status$, bShowStatus$, primaryFields$, secondaryFields$ }\"></component-mapper>\n", styles: [".psdk-case-summary-info-box{display:flex;flex-direction:row;justify-content:space-evenly}.psdk-case-summary-data{flex:1}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%}.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-status{background-color:var(--app-primary-color);color:var(--app-form-color);padding:0;margin-top:.625rem;width:-moz-fit-content;width:fit-content}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-case-summary', standalone: true, imports: [forwardRef(() => ComponentMapperComponent)], template: "<component-mapper name=\"CaseSummaryFields\" [props]=\"{ status$, bShowStatus$, primaryFields$, secondaryFields$ }\"></component-mapper>\n", styles: [".psdk-case-summary-info-box{display:flex;flex-direction:row;justify-content:space-evenly}.psdk-case-summary-data{flex:1}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%}.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-status{background-color:#673ab7;color:#fff;padding:0;margin-top:.625rem;width:-moz-fit-content;width:fit-content}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
+            args: [{ selector: 'app-case-summary', standalone: true, imports: [forwardRef(() => ComponentMapperComponent)], template: "<component-mapper name=\"CaseSummaryFields\" [props]=\"{ status$, bShowStatus$, primaryFields$, secondaryFields$ }\"></component-mapper>\n", styles: [".psdk-case-summary-info-box{display:flex;flex-direction:row;justify-content:space-evenly}.psdk-case-summary-data{flex:1}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%}.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-status{background-color:var(--app-primary-color);color:var(--app-form-color);padding:0;margin-top:.625rem;width:-moz-fit-content;width:fit-content}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -8211,11 +8213,11 @@ class CaseViewComponent {
         openProcessAction(data.ID, { ...data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1>{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:#4527a0;border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:#fff}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-status{padding:.3125rem;background-color:#673ab7;color:#fff;width:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatToolbarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$4.MatToolbar; }), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$4.MatToolbarRow; }), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1>{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatToolbarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$4.MatToolbar; }), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$4.MatToolbarRow; }), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-case-view', providers: [Utils], standalone: true, imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1>{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:#4527a0;border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:#fff}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-status{padding:.3125rem;background-color:#673ab7;color:#fff;width:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"] }]
+            args: [{ selector: 'app-case-view', providers: [Utils], standalone: true, imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1>{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -11099,7 +11101,7 @@ class ListViewComponent {
         return select;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:#fff;padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;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:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid lightgray;border-top:none}.psdk-table-field-link{color:#673ab7;padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i11.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i11.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -11122,7 +11124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:#fff;padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;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:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid lightgray;border-top:none}.psdk-table-field-link{color:#673ab7;padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
+                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: Utils }]; }, propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -11229,11 +11231,11 @@ class OneColumnTabComponent {
         this.arChildren$ = this.pConn$.getChildren();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OneColumnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OneColumnTabComponent, isStandalone: true, selector: "app-one-column-tab", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-one-column-tab\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-one-column-tab{background-color:#fff;margin-top:.5rem;margin-bottom:.5rem;border-radius:.3125rem;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OneColumnTabComponent, isStandalone: true, selector: "app-one-column-tab", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-one-column-tab\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-one-column-tab{background-color:var(--app-form-color);margin-top:.5rem;margin-bottom:.5rem;border-radius:.3125rem;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OneColumnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-one-column-tab', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-one-column-tab\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-one-column-tab{background-color:#fff;margin-top:.5rem;margin-bottom:.5rem;border-radius:.3125rem;padding:10px}\n"] }]
+            args: [{ selector: 'app-one-column-tab', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-one-column-tab\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-one-column-tab{background-color:var(--app-form-color);margin-top:.5rem;margin-bottom:.5rem;border-radius:.3125rem;padding:10px}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -12425,7 +12427,7 @@ class SimpleTableManualComponent {
         this.elementsData = eleData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid lightgray;padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;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:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:#f5f5f5}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid lightgray;border-top:none;background:white}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
             type: Component,
@@ -12441,7 +12443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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 lightgray;padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;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:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:#f5f5f5}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid lightgray;border-top:none;background:white}.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}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: DatapageService }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -12854,11 +12856,11 @@ class AppAnnouncementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppAnnouncementComponent, isStandalone: true, selector: "app-app-announcement", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<article class=\"psdk-announcement\">\n  <h2>{{ configProps$.header }}</h2>\n  <div>\n    <p>{{ configProps$.description }}</p>\n    <div>\n      <h3>{{ configProps$.label }}</h3>\n      <ul>\n        <li *ngFor=\"let detail of details$\">{{ detail }}</li>\n      </ul>\n    </div>\n  </div>\n  <a *ngIf=\"configProps$.whatsnewlink != ''\" mat-raised-button color=\"primary\" [href]=\"configProps$.whatsnewlink\">See what's new</a>\n</article>\n", styles: ["h2{font-size:1.2rem;margin-block-start:0rem}h3{font-size:1.1rem}ul{padding-inline-start:20px}.psdk-announcement{background-color:#fff;padding:1rem;margin:1rem 0;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppAnnouncementComponent, isStandalone: true, selector: "app-app-announcement", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<article class=\"psdk-announcement\">\n  <h2>{{ configProps$.header }}</h2>\n  <div>\n    <p>{{ configProps$.description }}</p>\n    <div>\n      <h3>{{ configProps$.label }}</h3>\n      <ul>\n        <li *ngFor=\"let detail of details$\">{{ detail }}</li>\n      </ul>\n    </div>\n  </div>\n  <a *ngIf=\"configProps$.whatsnewlink != ''\" mat-raised-button color=\"primary\" [href]=\"configProps$.whatsnewlink\">See what's new</a>\n</article>\n", styles: ["h2{font-size:1.2rem;margin-block-start:0rem}h3{font-size:1.1rem}ul{padding-inline-start:20px}.psdk-announcement{background-color:var(--app-form-color);padding:1rem;margin:1rem 0;border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppAnnouncementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-app-announcement', standalone: true, imports: [CommonModule, MatButtonModule], template: "<article class=\"psdk-announcement\">\n  <h2>{{ configProps$.header }}</h2>\n  <div>\n    <p>{{ configProps$.description }}</p>\n    <div>\n      <h3>{{ configProps$.label }}</h3>\n      <ul>\n        <li *ngFor=\"let detail of details$\">{{ detail }}</li>\n      </ul>\n    </div>\n  </div>\n  <a *ngIf=\"configProps$.whatsnewlink != ''\" mat-raised-button color=\"primary\" [href]=\"configProps$.whatsnewlink\">See what's new</a>\n</article>\n", styles: ["h2{font-size:1.2rem;margin-block-start:0rem}h3{font-size:1.1rem}ul{padding-inline-start:20px}.psdk-announcement{background-color:#fff;padding:1rem;margin:1rem 0;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb}\n"] }]
+            args: [{ selector: 'app-app-announcement', standalone: true, imports: [CommonModule, MatButtonModule], template: "<article class=\"psdk-announcement\">\n  <h2>{{ configProps$.header }}</h2>\n  <div>\n    <p>{{ configProps$.description }}</p>\n    <div>\n      <h3>{{ configProps$.label }}</h3>\n      <ul>\n        <li *ngFor=\"let detail of details$\">{{ detail }}</li>\n      </ul>\n    </div>\n  </div>\n  <a *ngIf=\"configProps$.whatsnewlink != ''\" mat-raised-button color=\"primary\" [href]=\"configProps$.whatsnewlink\">See what's new</a>\n</article>\n", styles: ["h2{font-size:1.2rem;margin-block-start:0rem}h3{font-size:1.1rem}ul{padding-inline-start:20px}.psdk-announcement{background-color:var(--app-form-color);padding:1rem;margin:1rem 0;border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -13428,11 +13430,11 @@ class AttachmentComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed #262626;width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:#262626}.file-error{color:#e57373}.psdk-modal-file-selector-error{border:1px dashed #e57373;width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid grey}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed #262626;width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:#262626}.file-error{color:#e57373}.psdk-modal-file-selector-error{border:1px dashed #e57373;width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid grey}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
+            args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -14067,8 +14069,15 @@ class FileUtilityComponent {
         const caseID = this.getCaseID();
         if (caseID) {
             this.lu_bLoading$ = true;
-            this.fetchCaseAttachments(caseID).then(resp => {
+            this.fetchCaseAttachments(caseID)
+                .then(resp => {
                 this.handleAttachmentsResponse(resp);
+            })
+                .catch(err => {
+                console.log(err);
+            })
+                .finally(() => {
+                this.lu_bLoading$ = false;
             });
         }
     }
@@ -14121,11 +14130,11 @@ class FileUtilityComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUtilityComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}.psdk-modal-file-selector{border:1px dashed #262626;width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUtilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-utility', standalone: true, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#64646466;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777}.psdk-modal-file-selector{border:1px dashed #262626;width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"] }]
+            args: [{ selector: 'app-file-utility', standalone: true, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -14306,11 +14315,11 @@ class TodoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TodoComponent, deps: [{ token: ProgressSpinnerService }, { token: ErrorMessagesService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TodoComponent, isStandalone: true, selector: "app-todo", inputs: { pConn$: "pConn$", caseInfoID$: "caseInfoID$", datasource$: "datasource$", headerText$: "headerText$", showTodoList$: "showTodoList$", target$: "target$", type$: "type$", context$: "context$", myWorkList$: "myWorkList$", isConfirm: "isConfirm" }, providers: [Utils], usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid lightgrey}.psdk-todo{padding:1rem;background-color:#fff;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:#b499fc;margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:#673ab7;padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:#d3d3d3;border-radius:.125rem;color:#2f4f4f;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:gray}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TodoComponent, isStandalone: true, selector: "app-todo", inputs: { pConn$: "pConn$", caseInfoID$: "caseInfoID$", datasource$: "datasource$", headerText$: "headerText$", showTodoList$: "showTodoList$", target$: "target$", type$: "type$", context$: "context$", myWorkList$: "myWorkList$", isConfirm: "isConfirm" }, providers: [Utils], usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TodoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-todo', providers: [Utils], standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid lightgrey}.psdk-todo{padding:1rem;background-color:#fff;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:#b499fc;margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:#673ab7;padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:#d3d3d3;border-radius:.125rem;color:#2f4f4f;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:gray}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"] }]
+            args: [{ selector: 'app-todo', providers: [Utils], standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: ErrorMessagesService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], caseInfoID$: [{
@@ -14347,11 +14356,11 @@ class MaterialSummaryItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialSummaryItemComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:#b499fc;border-radius:.5625rem;color:#000;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:#673ab7}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialSummaryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-summary-item', standalone: true, imports: [CommonModule, MatButtonModule, MatMenuModule], template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:#b499fc;border-radius:.5625rem;color:#000;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:#673ab7}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
+            args: [{ selector: 'app-material-summary-item', standalone: true, imports: [CommonModule, MatButtonModule, MatMenuModule], template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { item$: [{
                 type: Input
             }], menuIconOverride$: [{
@@ -14403,11 +14412,11 @@ class MaterialVerticalTabsComponent {
         this.tabClick.emit(tab);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialVerticalTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialVerticalTabsComponent, isStandalone: true, selector: "app-material-vertical-tabs", inputs: { tabConfig$: "tabConfig$" }, outputs: { tabClick: "tabClick" }, ngImport: i0, template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid #673ab7}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialVerticalTabsComponent, isStandalone: true, selector: "app-material-vertical-tabs", inputs: { tabConfig$: "tabConfig$" }, outputs: { tabClick: "tabClick" }, ngImport: i0, template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid var(--app-primary-color)}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialVerticalTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-vertical-tabs', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatBadgeModule], template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid #673ab7}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"] }]
+            args: [{ selector: 'app-material-vertical-tabs', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatBadgeModule], template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid var(--app-primary-color)}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"] }]
         }], propDecorators: { tabConfig$: [{
                 type: Input
             }], tabClick: [{
@@ -14534,11 +14543,11 @@ class OperatorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OperatorComponent, isStandalone: true, selector: "app-operator", inputs: { pConn$: "pConn$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-operator psdk-double\">\n  <div class=\"psdk-label\">\n    {{ label$ }}\n  </div>\n  <div class=\"psdk-double\">\n    <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n  </div>\n  <div>{{ date$ }}</div>\n</div>\n\n<div>\n  <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n    <dl>\n      <div *ngFor=\"let field of fields$; let i = index\">\n        <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n        <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n      </div>\n    </dl>\n  </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:gray;align-items:center}.psdk-operator-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;position:absolute;z-index:99}.psdk-operator-name{color:gray}.psdk-operator-value{padding-left:5px;color:#262626;margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:#000c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OperatorComponent, isStandalone: true, selector: "app-operator", inputs: { pConn$: "pConn$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-operator psdk-double\">\n  <div class=\"psdk-label\">\n    {{ label$ }}\n  </div>\n  <div class=\"psdk-double\">\n    <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n  </div>\n  <div>{{ date$ }}</div>\n</div>\n\n<div>\n  <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n    <dl>\n      <div *ngFor=\"let field of fields$; let i = index\">\n        <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n        <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n      </div>\n    </dl>\n  </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:var(--app-neutral-color);align-items:center}.psdk-operator-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-operator-name{color:var(--app-neutral-color)}.psdk-operator-value{padding-left:5px;color:var(--app-neutral-dark-color);margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:var(--app-field-header-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-operator', standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-operator psdk-double\">\n  <div class=\"psdk-label\">\n    {{ label$ }}\n  </div>\n  <div class=\"psdk-double\">\n    <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n  </div>\n  <div>{{ date$ }}</div>\n</div>\n\n<div>\n  <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n    <dl>\n      <div *ngFor=\"let field of fields$; let i = index\">\n        <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n        <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n      </div>\n    </dl>\n  </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:gray;align-items:center}.psdk-operator-popover{display:table;margin:auto;min-width:100px;background-color:#fff;border:1px solid black;border-radius:10px;padding:20px;box-shadow:0 0 10px 3px #777;position:absolute;z-index:99}.psdk-operator-name{color:gray}.psdk-operator-value{padding-left:5px;color:#262626;margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:#000c}\n"] }]
+            args: [{ selector: 'app-operator', standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-operator psdk-double\">\n  <div class=\"psdk-label\">\n    {{ label$ }}\n  </div>\n  <div class=\"psdk-double\">\n    <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n  </div>\n  <div>{{ date$ }}</div>\n</div>\n\n<div>\n  <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n    <dl>\n      <div *ngFor=\"let field of fields$; let i = index\">\n        <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n        <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n      </div>\n    </dl>\n  </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:var(--app-neutral-color);align-items:center}.psdk-operator-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-operator-name{color:var(--app-neutral-color)}.psdk-operator-value{padding-left:5px;color:var(--app-neutral-dark-color);margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:var(--app-field-header-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -14564,11 +14573,11 @@ class PulseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PulseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PulseComponent, isStandalone: true, selector: "app-pulse", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-pulse\">\n  <component-mapper [name]=\"'FeedContainer'\" [props]=\"{ pConn$ }\"></component-mapper>\n</div>\n", styles: [".psdk-pulse{padding:1rem;margin:1rem;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb;background-color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PulseComponent, isStandalone: true, selector: "app-pulse", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-pulse\">\n  <component-mapper [name]=\"'FeedContainer'\" [props]=\"{ pConn$ }\"></component-mapper>\n</div>\n", styles: [".psdk-pulse{padding:1rem;margin:1rem;border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color);background-color:var(--app-form-color)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PulseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pulse', standalone: true, imports: [forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-pulse\">\n  <component-mapper [name]=\"'FeedContainer'\" [props]=\"{ pConn$ }\"></component-mapper>\n</div>\n", styles: [".psdk-pulse{padding:1rem;margin:1rem;border-radius:.6125rem;border-left:6px solid;border-left-color:#7986cb;background-color:#fff}\n"] }]
+            args: [{ selector: 'app-pulse', standalone: true, imports: [forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-pulse\">\n  <component-mapper [name]=\"'FeedContainer'\" [props]=\"{ pConn$ }\"></component-mapper>\n</div>\n", styles: [".psdk-pulse{padding:1rem;margin:1rem;border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color);background-color:var(--app-form-color)}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -14766,11 +14775,11 @@ class TextComponent {
         return this.utils.generateDateTime(value, 'DateTime-Long-YYYY-Custom');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { pConn$: "pConn$", formatAs$: "formatAs$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:#0000008a;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { pConn$: "pConn$", formatAs$: "formatAs$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:#0000008a;margin:8px 0}\n"] }]
+            args: [{ selector: 'app-text', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formatAs$: [{
@@ -14880,11 +14889,11 @@ class FieldGroupListComponent {
         this.fields = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldGroupListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FieldGroupListComponent, isStandalone: true, selector: "app-field-group-list", inputs: { item: "item", heading: "heading", formGroup$: "formGroup$" }, ngImport: i0, template: "<div>\n  <b>{{ heading }}</b>\n  <div>\n    <div *ngIf=\"item.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: item.children.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:#0000008a;margin:8px 0}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FieldGroupListComponent, isStandalone: true, selector: "app-field-group-list", inputs: { item: "item", heading: "heading", formGroup$: "formGroup$" }, ngImport: i0, template: "<div>\n  <b>{{ heading }}</b>\n  <div>\n    <div *ngIf=\"item.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: item.children.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-field-group-list', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n  <b>{{ heading }}</b>\n  <div>\n    <div *ngIf=\"item.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: item.children.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:#0000008a;margin:8px 0}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}\n"] }]
+            args: [{ selector: 'app-field-group-list', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n  <b>{{ heading }}</b>\n  <div>\n    <div *ngIf=\"item.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: item.children.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], heading: [{
@@ -14907,11 +14916,11 @@ class MaterialDetailsFieldsComponent {
         return this.utils.generateDate(dateValue, dateFormat);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsFieldsComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialDetailsFieldsComponent, isStandalone: true, selector: "app-material-details-fields", inputs: { arFields$: "arFields$", arHighlightedFields: "arHighlightedFields" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'reference'; else showDetails\">\n      <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:#0000008a;margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialDetailsFieldsComponent, isStandalone: true, selector: "app-material-details-fields", inputs: { arFields$: "arFields$", arHighlightedFields: "arHighlightedFields" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'reference'; else showDetails\">\n      <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-details-fields', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'reference'; else showDetails\">\n      <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:#0000008a;margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"] }]
+            args: [{ selector: 'app-material-details-fields', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'reference'; else showDetails\">\n      <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { arFields$: [{
                 type: Input
             }], arHighlightedFields: [{
@@ -15103,11 +15112,11 @@ class MaterialCaseSummaryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialCaseSummaryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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' || field.config?.label?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid }\"></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:#e6e6fa;color:#673ab7;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;color:#673ab7;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:#000c}.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:#000c;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:#e9eef3;border-radius:.125rem;color:#4c5a67;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(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: 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' || field.config?.label?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid }\"></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(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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' || field.config?.label?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid }\"></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:#e6e6fa;color:#673ab7;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;color:#673ab7;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:#000c}.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:#000c;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:#e9eef3;border-radius:.125rem;color:#4c5a67;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' || field.config?.label?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid }\"></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"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { status$: [{
                 type: Input
             }], bShowStatus$: [{
@@ -15171,11 +15180,11 @@ class AlertComponent {
         this.onClose.emit({ Page: 'Page', target: 'target', type: 'type' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { message: "message", severity: "severity", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div\n  class=\"psdk-alert\"\n  [ngClass]=\"{\n    'psdk-alert-error': severity === 'error',\n    'psdk-grid-warning': severity === 'warning',\n    'psdk-grid-success': severity === 'success',\n    'psdk-grid-info': severity === 'info'\n  }\"\n>\n  <div class=\"psdk-alert-icon\">\n    <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n  </div>\n  <div>{{ message }}</div>\n  <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n    <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:#521508;border:1px solid rgb(207,53,22)}.psdk-alert-error .mat-icon{color:#cf3516}.psdk-grid-warning{color:#663c00;border:1px solid #ff9800}.psdk-grid-warning .mat-icon{color:#ff9800}.psdk-grid-success{color:#022e09;border:1px solid rgb(6,116,23)}.psdk-grid-success .mat-icon{color:#067417}.psdk-grid-info{color:#0d3c61;border:1px solid #2196f3}.psdk-grid-info .mat-icon{color:#2196f3}.close-button{background:none;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { message: "message", severity: "severity", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div\n  class=\"psdk-alert\"\n  [ngClass]=\"{\n    'psdk-alert-error': severity === 'error',\n    'psdk-grid-warning': severity === 'warning',\n    'psdk-grid-success': severity === 'success',\n    'psdk-grid-info': severity === 'info'\n  }\"\n>\n  <div class=\"psdk-alert-icon\">\n    <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n  </div>\n  <div>{{ message }}</div>\n  <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n    <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:var(--app-alert-error-color);border:1px solid var(--app-alert-error-border-color)}.psdk-alert-error .mat-icon{color:var(--app-alert-error-border-color)}.psdk-grid-warning{color:var(--app-alert-warning-color);border:1px solid var(--app-alert-warning-border-color)}.psdk-grid-warning .mat-icon{color:var(--app-alert-warning-border-color)}.psdk-grid-success{color:var(--app-alert-success-color);border:1px solid var(--app-alert-success-border-color)}.psdk-grid-success .mat-icon{color:var(--app-alert-success-border-color)}.psdk-grid-info{color:var(--app-alert-info-color);border:1px solid var(--app-alert-info-border-color)}.psdk-grid-info .mat-icon{color:var(--app-alert-info-border-color)}.close-button{background:none;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert', standalone: true, imports: [CommonModule, MatIconModule], template: "<div\n  class=\"psdk-alert\"\n  [ngClass]=\"{\n    'psdk-alert-error': severity === 'error',\n    'psdk-grid-warning': severity === 'warning',\n    'psdk-grid-success': severity === 'success',\n    'psdk-grid-info': severity === 'info'\n  }\"\n>\n  <div class=\"psdk-alert-icon\">\n    <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n  </div>\n  <div>{{ message }}</div>\n  <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n    <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:#521508;border:1px solid rgb(207,53,22)}.psdk-alert-error .mat-icon{color:#cf3516}.psdk-grid-warning{color:#663c00;border:1px solid #ff9800}.psdk-grid-warning .mat-icon{color:#ff9800}.psdk-grid-success{color:#022e09;border:1px solid rgb(6,116,23)}.psdk-grid-success .mat-icon{color:#067417}.psdk-grid-info{color:#0d3c61;border:1px solid #2196f3}.psdk-grid-info .mat-icon{color:#2196f3}.close-button{background:none;border:none;cursor:pointer}\n"] }]
+            args: [{ selector: 'app-alert', standalone: true, imports: [CommonModule, MatIconModule], template: "<div\n  class=\"psdk-alert\"\n  [ngClass]=\"{\n    'psdk-alert-error': severity === 'error',\n    'psdk-grid-warning': severity === 'warning',\n    'psdk-grid-success': severity === 'success',\n    'psdk-grid-info': severity === 'info'\n  }\"\n>\n  <div class=\"psdk-alert-icon\">\n    <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n  </div>\n  <div>{{ message }}</div>\n  <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n    <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:var(--app-alert-error-color);border:1px solid var(--app-alert-error-border-color)}.psdk-alert-error .mat-icon{color:var(--app-alert-error-border-color)}.psdk-grid-warning{color:var(--app-alert-warning-color);border:1px solid var(--app-alert-warning-border-color)}.psdk-grid-warning .mat-icon{color:var(--app-alert-warning-border-color)}.psdk-grid-success{color:var(--app-alert-success-color);border:1px solid var(--app-alert-success-border-color)}.psdk-grid-success .mat-icon{color:var(--app-alert-success-border-color)}.psdk-grid-info{color:var(--app-alert-info-color);border:1px solid var(--app-alert-info-border-color)}.psdk-grid-info .mat-icon{color:var(--app-alert-info-border-color)}.close-button{background:none;border:none;cursor:pointer}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], severity: [{
@@ -15326,11 +15335,11 @@ class WssNavBarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid #414141;width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:gray}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:#d9d9d9}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:100%;color:#d9d9d9;overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:15.625rem}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:15%;color:#d9d9d9;overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:#262626;width:5rem;height:50%;color:#d9d9d9;overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:#d9d9d9}.psdk-nav-button-span:hover{background-color:gray}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:grey;color:#fff;font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$4.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$4.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-wss-nav-bar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule], template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid #414141;width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:gray}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:#d9d9d9}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:100%;color:#d9d9d9;overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:15.625rem}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:#262626;width:5rem;height:15%;color:#d9d9d9;overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:#262626;width:5rem;height:50%;color:#d9d9d9;overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:#d9d9d9}.psdk-nav-button-span:hover{background-color:gray}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:grey;color:#fff;font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"] }]
+            args: [{ selector: 'app-wss-nav-bar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule], template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], appName$: [{
@@ -15416,11 +15425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 // import { Button } from '@angular/material'
 class WssQuickCreateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssQuickCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssQuickCreateComponent, isStandalone: true, selector: "wss-quick-create", inputs: { actions$: "actions$", heading$: "heading$" }, ngImport: i0, template: "<div class=\"wss-quick-create-header\">\n  <h1 class=\"quick-link-heading\">{{ heading$ }}</h1>\n  <ul class=\"quick-link-ul-list\">\n    <li *ngFor=\"let element of actions$\" class=\"quick-link-list\">\n      <button mat-raised-button color=\"primary\" class=\"quick-link-button\" mat-icon-button (click)=\"element.onClick()\">\n        <span class=\"quick-link-button-span\">\n          <img *ngIf=\"element.icon\" class=\"quick-link-icon\" [src]=\"element.icon\" />\n          <span>{{ element.label }}</span>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(40ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:#3f51b5;color:#fff;border-radius:8px}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:#fff!important;cursor:pointer;padding:1rem!important;height:6rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:1em;height:1em;flex-shrink:0;filter:invert(100%)}.quick-link-button-span{display:flex;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssQuickCreateComponent, isStandalone: true, selector: "wss-quick-create", inputs: { actions$: "actions$", heading$: "heading$" }, ngImport: i0, template: "<div class=\"wss-quick-create-header\">\n  <h1 class=\"quick-link-heading\">{{ heading$ }}</h1>\n  <ul class=\"quick-link-ul-list\">\n    <li *ngFor=\"let element of actions$\" class=\"quick-link-list\">\n      <button mat-raised-button color=\"primary\" class=\"quick-link-button\" mat-icon-button (click)=\"element.onClick()\">\n        <span class=\"quick-link-button-span\">\n          <img *ngIf=\"element.icon\" class=\"quick-link-icon\" [src]=\"element.icon\" />\n          <span>{{ element.label }}</span>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(40ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:8px}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:var(--app-form-color)!important;cursor:pointer;padding:1rem!important;height:6rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:1em;height:1em;flex-shrink:0;filter:invert(100%)}.quick-link-button-span{display:flex;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssQuickCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wss-quick-create', standalone: true, imports: [CommonModule], template: "<div class=\"wss-quick-create-header\">\n  <h1 class=\"quick-link-heading\">{{ heading$ }}</h1>\n  <ul class=\"quick-link-ul-list\">\n    <li *ngFor=\"let element of actions$\" class=\"quick-link-list\">\n      <button mat-raised-button color=\"primary\" class=\"quick-link-button\" mat-icon-button (click)=\"element.onClick()\">\n        <span class=\"quick-link-button-span\">\n          <img *ngIf=\"element.icon\" class=\"quick-link-icon\" [src]=\"element.icon\" />\n          <span>{{ element.label }}</span>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(40ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:#3f51b5;color:#fff;border-radius:8px}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:#fff!important;cursor:pointer;padding:1rem!important;height:6rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:1em;height:1em;flex-shrink:0;filter:invert(100%)}.quick-link-button-span{display:flex;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"] }]
+            args: [{ selector: 'wss-quick-create', standalone: true, imports: [CommonModule], template: "<div class=\"wss-quick-create-header\">\n  <h1 class=\"quick-link-heading\">{{ heading$ }}</h1>\n  <ul class=\"quick-link-ul-list\">\n    <li *ngFor=\"let element of actions$\" class=\"quick-link-list\">\n      <button mat-raised-button color=\"primary\" class=\"quick-link-button\" mat-icon-button (click)=\"element.onClick()\">\n        <span class=\"quick-link-button-span\">\n          <img *ngIf=\"element.icon\" class=\"quick-link-icon\" [src]=\"element.icon\" />\n          <span>{{ element.label }}</span>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(40ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:8px}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:var(--app-form-color)!important;cursor:pointer;padding:1rem!important;height:6rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:1em;height:1em;flex-shrink:0;filter:invert(100%)}.quick-link-button-span{display:flex;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"] }]
         }], propDecorators: { actions$: [{
                 type: Input
             }], heading$: [{
@@ -15432,11 +15441,11 @@ class BannerComponent {
         return `url(${this.backgroundImage})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerComponent, isStandalone: true, selector: "app-banner", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arChildren$: "arChildren$", title: "title", message: "message", backgroundImage: "backgroundImage", layout$: "layout$" }, ngImport: i0, template: "<div style=\"margin-bottom: '2rem'\">\n  <div class=\"background-image-style\" [ngStyle]=\"{ 'background-image': getUrl() }\">\n    <div class=\"background-style content\">\n      <div>\n        <h1 class=\"title\">{{ title }}</h1>\n        <p class=\"message\">{{ message }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout$ === 'two-column',\n      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'\n    }\"\n  >\n    <component-mapper\n      [name]=\"arChildren$[0].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[0].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n    <component-mapper\n      [name]=\"arChildren$[1].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[1].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-grid-filter-1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start;padding:1rem}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}.background-image-style{margin-left:-16px;margin-right:-16px;height:19rem;background-size:cover;background-position:center center}.background-style{background-color:transparent;color:#000;width:100%;height:100%;text-align:center}.content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.title{margin:0rem;font-size:1.728rem;font-weight:600}.message{margin:0;font-size:1rem;font-weight:400}.banner-layout{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerComponent, isStandalone: true, selector: "app-banner", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arChildren$: "arChildren$", title: "title", message: "message", backgroundImage: "backgroundImage", layout$: "layout$" }, ngImport: i0, template: "<div style=\"margin-bottom: '2rem'\">\n  <div class=\"background-image-style\" [ngStyle]=\"{ 'background-image': getUrl() }\">\n    <div class=\"background-style content\">\n      <div>\n        <h1 class=\"title\">{{ title }}</h1>\n        <p class=\"message\">{{ message }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout$ === 'two-column',\n      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'\n    }\"\n  >\n    <component-mapper\n      [name]=\"arChildren$[0].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[0].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n    <component-mapper\n      [name]=\"arChildren$[1].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[1].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-grid-filter-1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start;padding:1rem}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}.background-image-style{margin-left:-16px;margin-right:-16px;height:19rem;background-size:cover;background-position:center center}.background-style{background-color:transparent;color:var(--app-inverse-form-color);width:100%;height:100%;text-align:center}.content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.title{margin:0rem;font-size:1.728rem;font-weight:600}.message{margin:0;font-size:1rem;font-weight:400}.banner-layout{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-banner', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"margin-bottom: '2rem'\">\n  <div class=\"background-image-style\" [ngStyle]=\"{ 'background-image': getUrl() }\">\n    <div class=\"background-style content\">\n      <div>\n        <h1 class=\"title\">{{ title }}</h1>\n        <p class=\"message\">{{ message }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout$ === 'two-column',\n      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'\n    }\"\n  >\n    <component-mapper\n      [name]=\"arChildren$[0].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[0].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n    <component-mapper\n      [name]=\"arChildren$[1].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[1].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-grid-filter-1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start;padding:1rem}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}.background-image-style{margin-left:-16px;margin-right:-16px;height:19rem;background-size:cover;background-position:center center}.background-style{background-color:transparent;color:#000;width:100%;height:100%;text-align:center}.content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.title{margin:0rem;font-size:1.728rem;font-weight:600}.message{margin:0;font-size:1rem;font-weight:400}.banner-layout{padding:1rem}\n"] }]
+            args: [{ selector: 'app-banner', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"margin-bottom: '2rem'\">\n  <div class=\"background-image-style\" [ngStyle]=\"{ 'background-image': getUrl() }\">\n    <div class=\"background-style content\">\n      <div>\n        <h1 class=\"title\">{{ title }}</h1>\n        <p class=\"message\">{{ message }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout$ === 'two-column',\n      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'\n    }\"\n  >\n    <component-mapper\n      [name]=\"arChildren$[0].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[0].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n    <component-mapper\n      [name]=\"arChildren$[1].getPConnect().getComponentName()\"\n      [props]=\"{ pConn$: arChildren$[1].getPConnect(), formGroup$ }\"\n      errorMsg=\"Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-grid-filter-1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start;padding:1rem}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}.background-image-style{margin-left:-16px;margin-right:-16px;height:19rem;background-size:cover;background-position:center center}.background-style{background-color:transparent;color:var(--app-inverse-form-color);width:100%;height:100%;text-align:center}.content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.title{margin:0rem;font-size:1.728rem;font-weight:600}.message{margin:0;font-size:1rem;font-weight:400}.banner-layout{padding:1rem}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -16197,11 +16206,11 @@ class FeedContainerComponent {
         this.pulseComment[messageID] = event.target.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeedContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeedContainerComponent, isStandalone: true, selector: "app-feed-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid lightgrey}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:#673ab7}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:#aaa}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:#ddd;border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:#aaa;padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i3$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeedContainerComponent, isStandalone: true, selector: "app-feed-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:var(--app-primary-color)}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:var(--app-primary-color-filter)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:var(--app-pulse-message-color)}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:var(--app-pulse-message-background-color);border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:var(--app-pulse-message-color);padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i3$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeedContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feed-container', providers: [Utils], standalone: true, imports: [CommonModule, MatFormFieldModule, MatInputModule, MatGridListModule, MatButtonModule], template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid lightgrey}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:#673ab7}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:#673ab7;color:#fff;font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:#aaa}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:#ddd;border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:#aaa;padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"] }]
+            args: [{ selector: 'app-feed-container', providers: [Utils], standalone: true, imports: [CommonModule, MatFormFieldModule, MatInputModule, MatGridListModule, MatButtonModule], template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:var(--app-primary-color)}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:var(--app-primary-color-filter)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:var(--app-pulse-message-color)}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:var(--app-pulse-message-background-color);border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:var(--app-pulse-message-color);padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -16265,11 +16274,11 @@ class MaterialDetailsComponent {
         return this.utils.generateDate(dateValue, dateFormat);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialDetailsComponent, isStandalone: true, selector: "app-material-details", inputs: { arFields$: "arFields$", arFields2$: "arFields2$", arFields3$: "arFields3$", arHighlightedFields: "arHighlightedFields", layout: "layout" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:#0000008a;margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-status-style{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialDetailsComponent, isStandalone: true, selector: "app-material-details", inputs: { arFields$: "arFields$", arFields2$: "arFields2$", arFields3$: "arFields3$", arHighlightedFields: "arHighlightedFields", layout: "layout" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-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-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-details', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:#0000008a;margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-status-style{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:#e9eef3;border-radius:.125rem;color:#4c5a67;display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"] }]
+            args: [{ selector: 'app-material-details', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-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-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { arFields$: [{
                 type: Input
             }], arFields2$: [{
@@ -16375,11 +16384,11 @@ class ListUtilityComponent {
         return `${this.utils.getSDKStaticContentUrl()}assets/icons/`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListUtilityComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:#b499fc;border-radius:.5625rem;color:#000;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:#673ab7}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListUtilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-list-utility', standalone: true, imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:#b499fc;border-radius:.5625rem;color:#000;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:#673ab7}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
+            args: [{ selector: 'app-list-utility', standalone: true, imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { name$: [{
                 type: Input
             }], icon$: [{
@@ -16407,11 +16416,11 @@ class MaterialUtilityComponent {
         this.settingsSvgIcon$ = this.utils.getImageSrc('plus', this.headerIconUrl$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialUtilityComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialUtilityComponent, isStandalone: true, selector: "app-material-utility", inputs: { headerText$: "headerText$", headerIcon$: "headerIcon$", headerIconUrl$: "headerIconUrl$", noItemsMessage$: "noItemsMessage$" }, providers: [Utils], ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ headerText$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <img class=\"psdk-settings-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </div>\n    </div>\n    <div class=\"psdk-case-view-divider\"></div>\n    <br />\n    <div class=\"message\">{{ noItemsMessage$ }}</div>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;height:6.25rem;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialUtilityComponent, isStandalone: true, selector: "app-material-utility", inputs: { headerText$: "headerText$", headerIcon$: "headerIcon$", headerIconUrl$: "headerIconUrl$", noItemsMessage$: "noItemsMessage$" }, providers: [Utils], ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ headerText$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <img class=\"psdk-settings-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </div>\n    </div>\n    <div class=\"psdk-case-view-divider\"></div>\n    <br />\n    <div class=\"message\">{{ noItemsMessage$ }}</div>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;height:6.25rem;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialUtilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-utility', providers: [Utils], standalone: true, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ headerText$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <img class=\"psdk-settings-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </div>\n    </div>\n    <div class=\"psdk-case-view-divider\"></div>\n    <br />\n    <div class=\"message\">{{ noItemsMessage$ }}</div>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-case-view-divider{border-bottom:.0625rem solid lightgrey}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;height:6.25rem;padding:.625rem 0rem;text-align:left;background-color:#fff;border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%)}.psdk-utility .message{text-align:center}\n"] }]
+            args: [{ selector: 'app-material-utility', providers: [Utils], standalone: true, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ headerText$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <img class=\"psdk-settings-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </div>\n    </div>\n    <div class=\"psdk-case-view-divider\"></div>\n    <br />\n    <div class=\"message\">{{ noItemsMessage$ }}</div>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;height:6.25rem;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}\n"] }]
         }], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { headerText$: [{
                 type: Input
             }], headerIcon$: [{
@@ -16572,11 +16581,11 @@ class RichTextEditorComponent {
         this.onChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorComponent, isStandalone: true, selector: "app-rich-text-editor", inputs: { placeholder: "placeholder", disabled: "disabled", readonly: "readonly", value: "value", label: "label", required: "required", info: "info", error: "error", testId: "testId" }, outputs: { onBlur: "onBlur", onChange: "onChange" }, providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }], usesOnChanges: true, ngImport: i0, template: "<div [attr.data-test-id]=\"testId\">\n  <label [ngClass]=\"{ 'label-required': required === true }\" class=\"rich-text-label\">{{ label }}</label>\n  <div class=\"rich-text-editor\" *ngIf=\"!readonly\">\n    <editor\n      [formControl]=\"richText\"\n      [attr.disabled]=\"disabled\"\n      [initialValue]=\"value\"\n      [init]=\"{\n        base_url: '/tinymce',\n        suffix: '.min',\n        menubar: false,\n        placeholder,\n        statusbar: false,\n        min_height: 130,\n        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],\n        autoresize_bottom_margin: 0,\n        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',\n        toolbar_location: 'bottom',\n        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',\n        branding: false,\n        paste_data_images: true,\n        file_picker_types: 'image',\n        file_picker_callback: filePickerCallback\n      }\"\n      (onBlur)=\"blur()\"\n      (onChange)=\"change($event)\"\n    ></editor>\n    <p *ngIf=\"richText.invalid\" [ngClass]=\"'text-editor-error'\">{{ info }}</p>\n  </div>\n  <div *ngIf=\"readonly\">\n    <div class=\"readonly-richtext-editor\" style=\"margin: 10px 5px\" [innerHTML]=\"value || '--'\"></div>\n  </div>\n</div>\n", styles: [".rich-text-label{margin:5px;font-size:16px}.rich-text-editor{margin:10px 0}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:#262626}.text-editor-error{color:#e57373}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$2.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorComponent, isStandalone: true, selector: "app-rich-text-editor", inputs: { placeholder: "placeholder", disabled: "disabled", readonly: "readonly", value: "value", label: "label", required: "required", info: "info", error: "error", testId: "testId" }, outputs: { onBlur: "onBlur", onChange: "onChange" }, providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }], usesOnChanges: true, ngImport: i0, template: "<div [attr.data-test-id]=\"testId\">\n  <label [ngClass]=\"{ 'label-required': required === true }\" class=\"rich-text-label\">{{ label }}</label>\n  <div class=\"rich-text-editor\" *ngIf=\"!readonly\">\n    <editor\n      [formControl]=\"richText\"\n      [attr.disabled]=\"disabled\"\n      [initialValue]=\"value\"\n      [init]=\"{\n        base_url: '/tinymce',\n        suffix: '.min',\n        menubar: false,\n        placeholder,\n        statusbar: false,\n        min_height: 130,\n        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],\n        autoresize_bottom_margin: 0,\n        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',\n        toolbar_location: 'bottom',\n        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',\n        branding: false,\n        paste_data_images: true,\n        file_picker_types: 'image',\n        file_picker_callback: filePickerCallback\n      }\"\n      (onBlur)=\"blur()\"\n      (onChange)=\"change($event)\"\n    ></editor>\n    <p *ngIf=\"richText.invalid\" [ngClass]=\"'text-editor-error'\">{{ info }}</p>\n  </div>\n  <div *ngIf=\"readonly\">\n    <div class=\"readonly-richtext-editor\" style=\"margin: 10px 5px\" [innerHTML]=\"value || '--'\"></div>\n  </div>\n</div>\n", styles: [".rich-text-label{margin:5px;font-size:16px}.rich-text-editor{margin:10px 0}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.text-editor-error{color:var(--app-error-light-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$2.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-rich-text-editor', standalone: true, imports: [CommonModule, EditorModule, ReactiveFormsModule], providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }], template: "<div [attr.data-test-id]=\"testId\">\n  <label [ngClass]=\"{ 'label-required': required === true }\" class=\"rich-text-label\">{{ label }}</label>\n  <div class=\"rich-text-editor\" *ngIf=\"!readonly\">\n    <editor\n      [formControl]=\"richText\"\n      [attr.disabled]=\"disabled\"\n      [initialValue]=\"value\"\n      [init]=\"{\n        base_url: '/tinymce',\n        suffix: '.min',\n        menubar: false,\n        placeholder,\n        statusbar: false,\n        min_height: 130,\n        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],\n        autoresize_bottom_margin: 0,\n        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',\n        toolbar_location: 'bottom',\n        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',\n        branding: false,\n        paste_data_images: true,\n        file_picker_types: 'image',\n        file_picker_callback: filePickerCallback\n      }\"\n      (onBlur)=\"blur()\"\n      (onChange)=\"change($event)\"\n    ></editor>\n    <p *ngIf=\"richText.invalid\" [ngClass]=\"'text-editor-error'\">{{ info }}</p>\n  </div>\n  <div *ngIf=\"readonly\">\n    <div class=\"readonly-richtext-editor\" style=\"margin: 10px 5px\" [innerHTML]=\"value || '--'\"></div>\n  </div>\n</div>\n", styles: [".rich-text-label{margin:5px;font-size:16px}.rich-text-editor{margin:10px 0}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:#262626}.text-editor-error{color:#e57373}\n"] }]
+            args: [{ selector: 'app-rich-text-editor', standalone: true, imports: [CommonModule, EditorModule, ReactiveFormsModule], providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }], template: "<div [attr.data-test-id]=\"testId\">\n  <label [ngClass]=\"{ 'label-required': required === true }\" class=\"rich-text-label\">{{ label }}</label>\n  <div class=\"rich-text-editor\" *ngIf=\"!readonly\">\n    <editor\n      [formControl]=\"richText\"\n      [attr.disabled]=\"disabled\"\n      [initialValue]=\"value\"\n      [init]=\"{\n        base_url: '/tinymce',\n        suffix: '.min',\n        menubar: false,\n        placeholder,\n        statusbar: false,\n        min_height: 130,\n        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],\n        autoresize_bottom_margin: 0,\n        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',\n        toolbar_location: 'bottom',\n        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',\n        branding: false,\n        paste_data_images: true,\n        file_picker_types: 'image',\n        file_picker_callback: filePickerCallback\n      }\"\n      (onBlur)=\"blur()\"\n      (onChange)=\"change($event)\"\n    ></editor>\n    <p *ngIf=\"richText.invalid\" [ngClass]=\"'text-editor-error'\">{{ info }}</p>\n  </div>\n  <div *ngIf=\"readonly\">\n    <div class=\"readonly-richtext-editor\" style=\"margin: 10px 5px\" [innerHTML]=\"value || '--'\"></div>\n  </div>\n</div>\n", styles: [".rich-text-label{margin:5px;font-size:16px}.rich-text-editor{margin:10px 0}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.text-editor-error{color:var(--app-error-light-color)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{