@pega/angular-sdk-components 0.25.3 → 0.25.4

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

@@ -46,6 +46,7 @@ import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency';
 import utc from 'dayjs/plugin/utc';
 import tzone from 'dayjs/plugin/timezone';
 import { MomentDateModule } from '@angular/material-moment-adapter';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import * as i6$1 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import * as i6$2 from '@angular/material/select';
@@ -62,6 +63,7 @@ import * as i1$4 from '@angular/material/dialog';
 import { MatDialogModule, MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
 import * as i4$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { SelectionModel } from '@angular/cdk/collections';
 import * as i14 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import * as i7 from '@angular/material/sort';
@@ -2338,7 +2340,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
         const oWorkData = oWorkItem.getDataObject();
         // this.containerName$ = oWorkMeta["name"];
         if (bLoadChildren && oWorkData) {
-            this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name, undefined, this.localeReference);
+            this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
         }
         // turn off spinner
         this.psService.sendMessage(false);
@@ -2610,11 +2612,11 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FlowContainerComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i2.FormBuilder }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], usesInheritance: true, ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], usesInheritance: true, ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row; align-items: center\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FlowContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flow-container', providers: [Utils], imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'app-flow-container', providers: [Utils], imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row; align-items: center\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i2.FormBuilder }, { type: i0.NgZone }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -3061,11 +3063,11 @@ class MultiStepComponent {
         return index < this.arNavigationSteps$.length - 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiStepComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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 id=\"multi-step-label\" 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(--mat-sys-outline-variant)}.psdk-icon{padding:0rem .125rem;min-width:unset}.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}.psdk-sub-step-not-current{padding-left:.625rem}.psdk-flow-container-top{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;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%)}.psdk-vertical-step-icon-selected{margin-right:12px;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label,.psdk-vertical-step-label-selected{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}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;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{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{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label,.psdk-horizontal-step-label-selected{display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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 && mainStep.visited_status == 'current'\">\n          <div *ngFor=\"let subStep of mainStep.steps\">\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          </div>\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 id=\"multi-step-label\" 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 && mainStep.visited_status == 'current'\">\n        <div *ngFor=\"let subStep of mainStep.steps\">\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        </div>\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(--mat-sys-outline-variant)}.psdk-icon{padding:0rem .125rem;min-width:unset}.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(--mat-sys-on-secondary-container)}.psdk-sub-step-not-current{color:var(--mat-sys-on-surface-variant);padding-left:.625rem}.psdk-flow-container-top{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(--mat-sys-secondary);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%)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--mat-sys-on-surface-variant);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(--mat-sys-on-secondary-container);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}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;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(--mat-sys-secondary);color:var(--mat-sys-surface);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(--mat-sys-primary);color:var(--mat-sys-surface);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(--mat-sys-on-surface-variant);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(--mat-sys-on-secondary-container);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multi-step', providers: [Utils], 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 id=\"multi-step-label\" 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(--mat-sys-outline-variant)}.psdk-icon{padding:0rem .125rem;min-width:unset}.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}.psdk-sub-step-not-current{padding-left:.625rem}.psdk-flow-container-top{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;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%)}.psdk-vertical-step-icon-selected{margin-right:12px;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label,.psdk-vertical-step-label-selected{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}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;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{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{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label,.psdk-horizontal-step-label-selected{display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{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], 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 && mainStep.visited_status == 'current'\">\n          <div *ngFor=\"let subStep of mainStep.steps\">\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          </div>\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 id=\"multi-step-label\" 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 && mainStep.visited_status == 'current'\">\n        <div *ngFor=\"let subStep of mainStep.steps\">\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        </div>\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(--mat-sys-outline-variant)}.psdk-icon{padding:0rem .125rem;min-width:unset}.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(--mat-sys-on-secondary-container)}.psdk-sub-step-not-current{color:var(--mat-sys-on-surface-variant);padding-left:.625rem}.psdk-flow-container-top{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(--mat-sys-secondary);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%)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--mat-sys-on-surface-variant);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(--mat-sys-on-secondary-container);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}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;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(--mat-sys-secondary);color:var(--mat-sys-surface);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(--mat-sys-primary);color:var(--mat-sys-surface);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(--mat-sys-on-surface-variant);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(--mat-sys-on-secondary-container);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
         }], ctorParameters: () => [{ type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -3198,11 +3200,11 @@ class NavbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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: "19.2.15", 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  <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\">{{\n          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))\n        }}</span>\n      </mat-list-item>\n    </mat-list>\n  </mat-list>\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\">{{ page.name }}</span>\n      </div>\n    </mat-list-item>\n  </mat-list>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list id=\"profile\">\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 (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);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(--mat-sys-background);color:var(--mat-sys-on-background);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:#0000008a}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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  <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\">{{\n          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))\n        }}</span>\n      </mat-list-item>\n    </mat-list>\n  </mat-list>\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\">{{ page.name }}</span>\n      </div>\n    </mat-list-item>\n  </mat-list>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list id=\"profile\">\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 (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);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;top:0;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(--mat-sys-background);color:var(--mat-sys-on-background);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:#0000008a}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-navbar', providers: [Utils], 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  <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\">{{\n          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))\n        }}</span>\n      </mat-list-item>\n    </mat-list>\n  </mat-list>\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\">{{ page.name }}</span>\n      </div>\n    </mat-list-item>\n  </mat-list>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list id=\"profile\">\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 (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);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(--mat-sys-background);color:var(--mat-sys-on-background);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:#0000008a}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}\n"] }]
+            args: [{ selector: 'app-navbar', providers: [Utils], 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  <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\">{{\n          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))\n        }}</span>\n      </mat-list-item>\n    </mat-list>\n  </mat-list>\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\">{{ page.name }}</span>\n      </div>\n    </mat-list-item>\n  </mat-list>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list id=\"profile\">\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 (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);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;top:0;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(--mat-sys-background);color:var(--mat-sys-on-background);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:#0000008a}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], appName$: [{
@@ -3817,7 +3819,7 @@ function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityCheck
     };
 }
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
 const DETAILS_TEMPLATES = [
     'Details',
     'DetailsFields',
@@ -3922,10 +3924,9 @@ class ViewComponent {
         //  It WILL render if true or undefined.
         this.templateName$ = this.configProps$.template || '';
         this.title$ = this.configProps$.title || '';
-        this.label$ = this.configProps$.label || '';
-        this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
         // label & showLabel within inheritedProps takes precedence over configProps
-        this.label$ = this.inheritedProps$.label || this.label$;
+        this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
+        this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
         // children may have a 'reference' so normalize the children array
         this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
         this.visibility$ = this.configProps$.visibility ?? this.visibility$;
@@ -6414,7 +6415,7 @@ class DateComponent extends FieldBase {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DateComponent, isStandalone: true, selector: "app-date", providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"theDateFormat.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\" [disabled]=\"bDisabled$\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.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(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$1.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatNativeDateModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MomentDateModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DateComponent, isStandalone: true, selector: "app-date", providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"theDateFormat.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\" [disabled]=\"bDisabled$\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\" xPosition=\"end\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.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(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$1.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatNativeDateModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MomentDateModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -6427,7 +6428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatNativeDateModule,
                         MomentDateModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"theDateFormat.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\" [disabled]=\"bDisabled$\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"] }]
+                    ], providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"theDateFormat.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\" [disabled]=\"bDisabled$\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\" xPosition=\"end\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"] }]
         }] });
 
 class DateTimeComponent extends FieldBase {
@@ -6440,6 +6441,8 @@ class DateTimeComponent extends FieldBase {
         this.theDateFormat = getDateFormatInfo();
         this.timezone = PCore.getEnvironmentInfo()?.getTimeZone();
         this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
+        this.sso = inject(ScrollStrategyOptions);
+        this.scrollStrategy = this.sso.reposition();
     }
     ngOnInit() {
         super.ngOnInit();
@@ -6490,7 +6493,7 @@ class DateTimeComponent extends FieldBase {
         handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DateTimeComponent, isStandalone: true, selector: "app-date-time", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [required]=\"bRequired$\"\n          [readonly]=\"bDisabled$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker [disabled]=\"bDisabled$\"></owl-date-time>\n        <mat-error *ngIf=\"fieldControl?.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.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(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlDateTimeModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.OwlDateTimeTriggerDirective), selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.OwlDateTimeInputDirective), selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i0.forwardRef(() => i6$1.OwlDateTimeComponent), selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlNativeDateTimeModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DateTimeComponent, isStandalone: true, selector: "app-date-time", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [required]=\"bRequired$\"\n          [readonly]=\"bDisabled$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker [disabled]=\"bDisabled$\" [scrollStrategy]=\"scrollStrategy\"></owl-date-time>\n        <mat-error *ngIf=\"fieldControl?.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.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(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlDateTimeModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.OwlDateTimeTriggerDirective), selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.OwlDateTimeInputDirective), selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i0.forwardRef(() => i6$1.OwlDateTimeComponent), selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlNativeDateTimeModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateTimeComponent, decorators: [{
             type: Component,
@@ -6503,7 +6506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         OwlDateTimeModule,
                         OwlNativeDateTimeModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [required]=\"bRequired$\"\n          [readonly]=\"bDisabled$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker [disabled]=\"bDisabled$\"></owl-date-time>\n        <mat-error *ngIf=\"fieldControl?.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"] }]
+                    ], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [required]=\"bRequired$\"\n          [readonly]=\"bDisabled$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker [disabled]=\"bDisabled$\" [scrollStrategy]=\"scrollStrategy\"></owl-date-time>\n        <mat-error *ngIf=\"fieldControl?.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"] }]
         }] });
 
 class DecimalComponent extends FieldBase {
@@ -7707,11 +7710,11 @@ class PhoneComponent extends FieldBase {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .cdk-overlay-pane{left:32rem!important;top:20rem!important}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => MatTelInput), selector: "mat-tel-input", inputs: ["autocomplete", "cssClass", "errorStateMatcher", "placeholder", "maxLength", "name", "onlyCountries", "preferredCountries", "searchPlaceholder", "enablePlaceholder", "enableSearch", "resetOnChange", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => MatTelInput), selector: "mat-tel-input", inputs: ["autocomplete", "cssClass", "errorStateMatcher", "placeholder", "maxLength", "name", "onlyCountries", "preferredCountries", "searchPlaceholder", "enablePlaceholder", "enableSearch", "resetOnChange", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .cdk-overlay-pane{left:32rem!important;top:20rem!important}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
+            args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
         }] });
 
 class RadioButtonsComponent extends FieldBase {
@@ -12131,6 +12134,7 @@ class ListViewComponent {
         this.psService = psService;
         this.utils = utils;
         this.bInForm$ = true;
+        this.selection = new SelectionModel(true, []);
         this.displayedColumns$ = Array();
         this.groupByColumns$ = [];
         this.repeatListData = [];
@@ -12341,6 +12345,13 @@ class ListViewComponent {
                     this.multiSelectionMode = true;
                 }
                 this.repeatList$ = new MatTableDataSource(this.updatedRefList);
+                if (this.configProps$?.readonlyContextList?.length > 0) {
+                    const readonlyIds = new Set(this.configProps$.readonlyContextList.map(element => element[this.rowID]));
+                    const rowsToSelect = this.repeatList$.data.filter(row => readonlyIds.has(row[this.rowID]));
+                    if (rowsToSelect.length > 0) {
+                        this.selection.select(...rowsToSelect);
+                    }
+                }
                 this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this);
                 // keeping an original copy to get back after possible sorts, filters and groupBy
                 this.repeatListData = this.repeatList$.data.slice();
@@ -12453,12 +12464,6 @@ class ListViewComponent {
             this.repeatList$.paginator.firstPage();
         }
     }
-    isChecked(rowIn) {
-        const initialVal = false;
-        return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
-            return acc || rowIn[this.rowID] === currRow[this.rowID];
-        }, initialVal);
-    }
     fieldOnChange(row) {
         const value = row[this.rowID];
         const reqObj = {};
@@ -12475,32 +12480,29 @@ class ListViewComponent {
         this.checkBoxValue = value;
         this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
     }
-    onCheckboxClick(row, event) {
-        const value = row[this.rowID];
-        const checked = event?.checked;
-        const reqObj = {};
-        if (this.compositeKeys?.length > 1) {
-            const index = this.response.findIndex(element => element[this.rowID] === value);
-            const selectedRow = this.response[index];
-            this.compositeKeys.forEach(element => {
-                reqObj[element] = selectedRow[element];
-            });
-            reqObj.$selected = checked;
+    onCheckboxClick(row) {
+        this.selection.toggle(row);
+        const requiredValue = this.getSelectedValue(row);
+        this.pConn$?.getListActions()?.setSelectedRows([requiredValue]);
+    }
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.repeatList$.data.length;
+        return numSelected === numRows;
+    }
+    toggleAllRows() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+            this.pConn$?.getListActions()?.clearSelectedRows();
+            return;
         }
-        else {
-            reqObj[this.rowID] = value;
-            reqObj.$selected = checked;
+        if (this.selection.hasValue() && !this.isAllSelected()) {
+            this.pConn$?.getListActions()?.clearSelectedRows();
         }
-        this.pConn$?.getListActions()?.setSelectedRows([reqObj]);
+        this.selection.select(...this.repeatList$.data);
+        const requiredValues = this.repeatList$.data.map(row => this.getSelectedValue(row));
+        this.pConn$?.getListActions()?.setSelectedRows(requiredValues);
     }
-    // rowClick(row) {
-    //   switch (this.configProps$.rowClickAction) {
-    //     case 'openAssignment':
-    //       this.psService.sendMessage(true);
-    //       this.openAssignment(row);
-    //       break;
-    //   }
-    // }
     _getIconStyle(level) {
         let sReturn = '';
         let nLevel = parseInt(level, 10);
@@ -13256,6 +13258,24 @@ class ListViewComponent {
         }
         return select;
     }
+    getSelectedValue(row) {
+        const value = row[this.rowID];
+        const checked = this.selection.isSelected(row);
+        const reqObj = {};
+        if (this.compositeKeys?.length > 1) {
+            const index = this.response.findIndex(element => element[this.rowID] === value);
+            const selectedRow = this.response[index];
+            this.compositeKeys.forEach(element => {
+                reqObj[element] = selectedRow[element];
+            });
+            reqObj.$selected = checked;
+        }
+        else {
+            reqObj[this.rowID] = value;
+            reqObj.$selected = checked;
+        }
+        return reqObj;
+    }
     updateFiltersFromData(data) {
         if (this.displayAs === 'advancedSearch') {
             this.filters = {};
@@ -13308,7 +13328,7 @@ class ListViewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" mat-table [dataSource]=\"[]\">\n              <!-- Define columns for headers -->\n              <ng-container *ngFor=\"let col of displayedColumns$\" [matColumnDef]=\"col\">\n                <th mat-header-cell *matHeaderCellDef>\n                  {{ getValue(col) }}\n                </th>\n              </ng-container>\n\n              <!-- Render only header row -->\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">\n            {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n          </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{border:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container);padding:.5rem 0rem}table{width:100%;border-bottom:1px solid var(--app-neutral-light-color)}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem;margin-right: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(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3);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:#00000080;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}::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}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i5$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i5$3.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i3$2.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$1.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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    <div style=\"display: flex; justify-content: space-between; align-items: center; margin: 0 10px\">\n      <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold; margin: 0\">\n        {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n      </h3>\n      <mat-form-field *ngIf=\"bShowSearch$\">\n        <mat-label class=\"search-label\"><mat-icon>search</mat-icon><span class=\"psdk-search-label\">Search</span> </mat-label>\n        <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\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 class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\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 *ngIf=\"bInForm$\">\n      <div class=\"psdk-inner-div-in-form\">\n        <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n          <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n            </td>\n          </ng-container>\n          <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef>\n              <mat-checkbox\n                (change)=\"toggleAllRows()\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              >\n              </mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-checkbox (change)=\"onCheckboxClick(row)\" [checked]=\"selection.isSelected(row)\"> </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\" mat-table [dataSource]=\"[]\">\n            <!-- Define columns for headers -->\n            <ng-container *ngFor=\"let col of displayedColumns$\" [matColumnDef]=\"col\">\n              <th mat-header-cell *matHeaderCellDef>\n                {{ getValue(col) }}\n              </th>\n            </ng-container>\n\n            <!-- Render only header row -->\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n          </table>\n        </div>\n        <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">\n          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\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{border:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container)}table{width:100%;border-bottom:1px solid var(--mat-sys-on-secondary-container)}.search-label{display:flex;align-items:center}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem;margin-right: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(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3);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:#00000080;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--mat-sys-on-secondary-container);padding:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i4$3.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i5$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i5$3.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i3$2.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$1.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$1.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -13331,7 +13351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatOptionModule,
                         MatDatepickerModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" mat-table [dataSource]=\"[]\">\n              <!-- Define columns for headers -->\n              <ng-container *ngFor=\"let col of displayedColumns$\" [matColumnDef]=\"col\">\n                <th mat-header-cell *matHeaderCellDef>\n                  {{ getValue(col) }}\n                </th>\n              </ng-container>\n\n              <!-- Render only header row -->\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">\n            {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n          </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{border:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container);padding:.5rem 0rem}table{width:100%;border-bottom:1px solid var(--app-neutral-light-color)}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem;margin-right: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(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3);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:#00000080;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}::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}\n"] }]
+                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <div style=\"display: flex; justify-content: space-between; align-items: center; margin: 0 10px\">\n      <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold; margin: 0\">\n        {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n      </h3>\n      <mat-form-field *ngIf=\"bShowSearch$\">\n        <mat-label class=\"search-label\"><mat-icon>search</mat-icon><span class=\"psdk-search-label\">Search</span> </mat-label>\n        <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\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 class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\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 *ngIf=\"bInForm$\">\n      <div class=\"psdk-inner-div-in-form\">\n        <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n          <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n            </td>\n          </ng-container>\n          <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef>\n              <mat-checkbox\n                (change)=\"toggleAllRows()\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              >\n              </mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-checkbox (change)=\"onCheckboxClick(row)\" [checked]=\"selection.isSelected(row)\"> </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\" mat-table [dataSource]=\"[]\">\n            <!-- Define columns for headers -->\n            <ng-container *ngFor=\"let col of displayedColumns$\" [matColumnDef]=\"col\">\n              <th mat-header-cell *matHeaderCellDef>\n                {{ getValue(col) }}\n              </th>\n            </ng-container>\n\n            <!-- Render only header row -->\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n          </table>\n        </div>\n        <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">\n          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\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{border:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container)}table{width:100%;border-bottom:1px solid var(--mat-sys-on-secondary-container)}.search-label{display:flex;align-items:center}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem;margin-right: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(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3);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:#00000080;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--mat-sys-level3)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--mat-sys-on-secondary-container);padding:8px!important}\n"] }]
         }], ctorParameters: () => [{ type: ProgressSpinnerService }, { type: Utils }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -14451,11 +14471,11 @@ class SelfServiceCaseViewComponent {
         openProcessAction(data.ID, { ...data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelfServiceCaseViewComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelfServiceCaseViewComponent, isStandalone: true, selector: "app-self-service-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"showCaseActions\" class=\"psdk-self-service-case-view-header\">\n  <div>{{ this.heading$ }}</div>\n  <div class=\"psdk-case-view-buttons\">\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</div>\n<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <div *ngIf=\"showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)\">\n      <mat-toolbar class=\"psdk-case-view-toolbar\">\n        <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n          <div class=\"psdk-case-view-heading\">\n            <div>\n              <h1 id=\"case-name\">{{ heading$ }}</h1>\n            </div>\n            <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n            <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          </div>\n        </mat-toolbar-row>\n      </mat-toolbar>\n      <div class=\"psdk-case-view-divider\"></div>\n      <div class=\"psdk-case-view-summary\">\n        <component-mapper\n          name=\"CaseSummaryFields\"\n          [props]=\"{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }\"\n        ></component-mapper>\n      </div>\n    </div>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&\n            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&\n            showCaseLifecycle\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  </div>\n  <div class=\"psdk-case-view-utilities\">\n    <div *ngIf=\"arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()\">\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(--mat-sys-on-primary-fixed);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;background-color:var(--mat-sys-surface-container);height:100%}.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{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary);justify-content:center}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}.psdk-self-service-case-view-header{display:flex;justify-content:space-around;align-items:center;margin:10px;background-color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelfServiceCaseViewComponent, isStandalone: true, selector: "app-self-service-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"showCaseActions\" class=\"psdk-self-service-case-view-header\">\n  <div>{{ this.heading$ }}</div>\n  <div class=\"psdk-case-view-buttons\">\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</div>\n<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\" *ngIf=\"showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n    <div class=\"psdk-case-view-divider\"></div>\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper\n        name=\"CaseSummaryFields\"\n        [props]=\"{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&\n            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&\n            showCaseLifecycle\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  </div>\n  <div class=\"psdk-case-view-utilities\" *ngIf=\"arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()\">\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", 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(--mat-sys-on-primary-fixed);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;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%;padding-left:0}.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{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary);justify-content:center}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}.psdk-self-service-case-view-header{display:flex;justify-content:space-around;align-items:center;margin:10px;background-color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelfServiceCaseViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-self-service-case-view', providers: [Utils], imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"showCaseActions\" class=\"psdk-self-service-case-view-header\">\n  <div>{{ this.heading$ }}</div>\n  <div class=\"psdk-case-view-buttons\">\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</div>\n<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <div *ngIf=\"showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)\">\n      <mat-toolbar class=\"psdk-case-view-toolbar\">\n        <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n          <div class=\"psdk-case-view-heading\">\n            <div>\n              <h1 id=\"case-name\">{{ heading$ }}</h1>\n            </div>\n            <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n            <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          </div>\n        </mat-toolbar-row>\n      </mat-toolbar>\n      <div class=\"psdk-case-view-divider\"></div>\n      <div class=\"psdk-case-view-summary\">\n        <component-mapper\n          name=\"CaseSummaryFields\"\n          [props]=\"{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }\"\n        ></component-mapper>\n      </div>\n    </div>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&\n            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&\n            showCaseLifecycle\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  </div>\n  <div class=\"psdk-case-view-utilities\">\n    <div *ngIf=\"arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()\">\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(--mat-sys-on-primary-fixed);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;background-color:var(--mat-sys-surface-container);height:100%}.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{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary);justify-content:center}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}.psdk-self-service-case-view-header{display:flex;justify-content:space-around;align-items:center;margin:10px;background-color:var(--mat-sys-primary)}\n"] }]
+            args: [{ selector: 'app-self-service-case-view', providers: [Utils], imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"showCaseActions\" class=\"psdk-self-service-case-view-header\">\n  <div>{{ this.heading$ }}</div>\n  <div class=\"psdk-case-view-buttons\">\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</div>\n<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\" *ngIf=\"showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n    <div class=\"psdk-case-view-divider\"></div>\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper\n        name=\"CaseSummaryFields\"\n        [props]=\"{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&\n            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&\n            showCaseLifecycle\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  </div>\n  <div class=\"psdk-case-view-utilities\" *ngIf=\"arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()\">\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", 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(--mat-sys-on-primary-fixed);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;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%;padding-left:0}.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{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary);justify-content:center}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}.psdk-self-service-case-view-header{display:flex;justify-content:space-around;align-items:center;margin:10px;background-color:var(--mat-sys-primary)}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -16584,9 +16604,11 @@ class AttachmentComponent {
     updateSelf() {
         const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
         const stateProps = this.pConn$.getStateProps();
-        const { value, label, required, visibility, disabled, readOnly, extensions, displayMode, isTableFormatter, allowMultiple, editMode } = configProps;
+        const { value, label, required, disabled, readOnly, extensions, displayMode, isTableFormatter, allowMultiple, editMode } = configProps;
         this.bRequired$ = this.utils.getBooleanValue(required);
-        this.bVisible$ = this.utils.getBooleanValue(visibility);
+        if (configProps.visibility != null) {
+            this.bVisible$ = this.utils.getBooleanValue(configProps.visibility);
+        }
         this.bDisabled$ = this.utils.getBooleanValue(disabled);
         this.bReadonly$ = this.utils.getBooleanValue(readOnly);
         this.allowMultiple$ = this.utils.getBooleanValue(allowMultiple);
@@ -16866,11 +16888,11 @@ class AttachmentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AttachmentComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploader"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\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}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);padding:.5rem;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}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem;filter:var(--app-white-color-filter)}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer;filter:var(--app-white-color-filter)}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploader"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\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(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;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(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachment', imports: [CommonModule, MatProgressSpinnerModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\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}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);padding:.5rem;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}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem;filter:var(--app-white-color-filter)}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer;filter:var(--app-white-color-filter)}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"] }]
+            args: [{ selector: 'app-attachment', imports: [CommonModule, MatProgressSpinnerModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\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(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;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(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -18145,31 +18167,55 @@ class QuickCreateComponent {
         this.heading$ = this.configProps$.heading;
         this.showCaseIcons$ = this.configProps$.showCaseIcons;
         this.classFilter$ = this.configProps$.classFilter;
+        const cases = [];
+        const defaultCases = [];
         const envInfo = PCore.getEnvironmentInfo();
-        if (this.classFilter$ &&
-            envInfo.environmentInfoObject &&
-            envInfo.environmentInfoObject.pyCaseTypeList &&
-            envInfo.environmentInfoObject.pyCaseTypeList.length > 0) {
-            this.classFilter$.forEach(item => {
-                let icon = this.utils.getImageSrc('polaris-solid', this.utils.getSDKStaticContentUrl());
-                let label = '';
-                envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
-                    if (casetype.pyWorkTypeImplementationClassName === item) {
-                        icon = casetype.pxIcon && this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl());
-                        label = casetype.pyWorkTypeName ?? '';
-                    }
-                });
-                if (label !== '') {
-                    this.cases$.push({
-                        label,
+        if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+            envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
+                if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+                    defaultCases.push({
+                        classname: casetype.pyWorkTypeImplementationClassName,
                         onClick: () => {
-                            this.createCase(item);
+                            this.createCase(casetype.pyWorkTypeImplementationClassName);
                         },
-                        ...(this.showCaseIcons$ && { icon })
+                        ...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
+                        label: casetype.pyWorkTypeName
                     });
                 }
             });
         }
+        else {
+            const pConnectInAppContext = PCore.createPConnect({
+                options: { context: PCore.getConstants().APP.APP }
+            }).getPConnect();
+            const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal');
+            pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+                if (casetype.pyClassName && casetype.pyLabel) {
+                    defaultCases.push({
+                        classname: casetype.pyClassName,
+                        onClick: () => {
+                            this.createCase(casetype.pyClassName);
+                        },
+                        ...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
+                        label: casetype.pyLabel
+                    });
+                }
+            });
+        }
+        /* If classFilter is not empty - filter from the list of defaultCases */
+        if (this.classFilter$?.length > 0) {
+            this.classFilter$.forEach(item => {
+                defaultCases.forEach(casetype => {
+                    if (casetype.classname === item) {
+                        cases.push(casetype);
+                    }
+                });
+            });
+            this.cases$ = cases;
+        }
+        else {
+            this.cases$ = defaultCases;
+        }
     }
     ngOnInit() {
         // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
@@ -18407,11 +18453,11 @@ class TodoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TodoComponent, deps: [{ token: ProgressSpinnerService }, { token: ErrorMessagesService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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], ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ count }}</div>\n  </div>\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              {{ localizedVal('In', localeCategory) }}\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\" *ngIf=\"!isConfirm || canPerform; else readOnlyText\">\n                {{ localizedVal(assignment?.name, '', localeUtils.getCaseLocaleReference(assignment.classname)) }} {{ getID(assignment) }}\n              </button>\n              <ng-template #readOnlyText> {{ localizedVal(assignment?.name, localeCategory) }} {{ getID(assignment) }} </ng-template>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull;\n                <span class=\"psdk-todo-assignment-status\">{{\n                  localizedVal(assignment.status, '', localeUtils.getCaseLocaleReference(assignment.classname))\n                }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ goLocalizedValue === 'go' ? 'Go' : goLocalizedValue }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"count > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--mat-sys-surface-container);border-radius:.6125rem}.psdk-todo-header{display:inline-flex;margin-bottom:1rem}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--mat-sys-primary);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(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem;align-items:center}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--mat-sys-surface-container-highest);border-radius:.125rem;color:var(--mat-sys-on-surface);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(--mat-sys-on-surface)}.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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], ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ count }}</div>\n  </div>\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              {{ localizedVal('In', localeCategory) }}\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\" *ngIf=\"!isConfirm || canPerform; else readOnlyText\">\n                {{ localizedVal(assignment?.name, '', localeUtils.getCaseLocaleReference(assignment.classname)) }} {{ getID(assignment) }}\n              </button>\n              <ng-template #readOnlyText> {{ localizedVal(assignment?.name, localeCategory) }} {{ getID(assignment) }} </ng-template>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull;\n                <span class=\"psdk-todo-assignment-status\">{{\n                  localizedVal(assignment.status, '', localeUtils.getCaseLocaleReference(assignment.classname))\n                }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ goLocalizedValue === 'go' ? 'Go' : goLocalizedValue }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"count > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--mat-sys-surface-container);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--mat-sys-primary)}.psdk-todo-header{display:inline-flex;margin-bottom:1rem}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--mat-sys-primary);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(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem;align-items:center}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--mat-sys-surface-container-highest);border-radius:.125rem;color:var(--mat-sys-on-surface);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(--mat-sys-on-surface)}.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TodoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-todo', providers: [Utils], imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ count }}</div>\n  </div>\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              {{ localizedVal('In', localeCategory) }}\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\" *ngIf=\"!isConfirm || canPerform; else readOnlyText\">\n                {{ localizedVal(assignment?.name, '', localeUtils.getCaseLocaleReference(assignment.classname)) }} {{ getID(assignment) }}\n              </button>\n              <ng-template #readOnlyText> {{ localizedVal(assignment?.name, localeCategory) }} {{ getID(assignment) }} </ng-template>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull;\n                <span class=\"psdk-todo-assignment-status\">{{\n                  localizedVal(assignment.status, '', localeUtils.getCaseLocaleReference(assignment.classname))\n                }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ goLocalizedValue === 'go' ? 'Go' : goLocalizedValue }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"count > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--mat-sys-surface-container);border-radius:.6125rem}.psdk-todo-header{display:inline-flex;margin-bottom:1rem}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--mat-sys-primary);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(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem;align-items:center}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--mat-sys-surface-container-highest);border-radius:.125rem;color:var(--mat-sys-on-surface);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(--mat-sys-on-surface)}.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], imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ count }}</div>\n  </div>\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              {{ localizedVal('In', localeCategory) }}\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\" *ngIf=\"!isConfirm || canPerform; else readOnlyText\">\n                {{ localizedVal(assignment?.name, '', localeUtils.getCaseLocaleReference(assignment.classname)) }} {{ getID(assignment) }}\n              </button>\n              <ng-template #readOnlyText> {{ localizedVal(assignment?.name, localeCategory) }} {{ getID(assignment) }} </ng-template>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull;\n                <span class=\"psdk-todo-assignment-status\">{{\n                  localizedVal(assignment.status, '', localeUtils.getCaseLocaleReference(assignment.classname))\n                }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ goLocalizedValue === 'go' ? 'Go' : goLocalizedValue }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"count > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--mat-sys-surface-container);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--mat-sys-primary)}.psdk-todo-header{display:inline-flex;margin-bottom:1rem}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--mat-sys-primary);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(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem;align-items:center}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--mat-sys-surface-container-highest);border-radius:.125rem;color:var(--mat-sys-on-surface);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(--mat-sys-on-surface)}.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: () => [{ type: ProgressSpinnerService }, { type: ErrorMessagesService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], caseInfoID$: [{
@@ -19096,11 +19142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 // import { Button } from '@angular/material'
 class WssQuickCreateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WssQuickCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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-button:hover .quick-link-icon{transform:scale(1.2) rotate(10deg)}.wss-quick-create-header{background-color:var(--mat-sys-surface-container)}.quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(20ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--mat-sys-surface-container);border-radius:16px;border:1px solid var(--mat-sys-primary)}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:var(--app-form-color)!important;cursor:pointer;padding:1rem!important;height:10rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:3em;height:3em;flex-shrink:0}.quick-link-button-span{display:flex;flex-direction:column;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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-button:hover .quick-link-icon{transform:scale(1.2) rotate(10deg)}.wss-quick-create-header{background-color:var(--mat-sys-surface-container)}.quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(20ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--mat-sys-surface-container);border-radius:16px;border:1px solid var(--mat-sys-primary)}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;cursor:pointer;padding:1rem!important;height:10rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:3em;height:3em;flex-shrink:0}.quick-link-button-span{display:flex;flex-direction:column;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WssQuickCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wss-quick-create', 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-button:hover .quick-link-icon{transform:scale(1.2) rotate(10deg)}.wss-quick-create-header{background-color:var(--mat-sys-surface-container)}.quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(20ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--mat-sys-surface-container);border-radius:16px;border:1px solid var(--mat-sys-primary)}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;color:var(--app-form-color)!important;cursor:pointer;padding:1rem!important;height:10rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:3em;height:3em;flex-shrink:0}.quick-link-button-span{display:flex;flex-direction:column;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"] }]
+            args: [{ selector: 'wss-quick-create', 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-button:hover .quick-link-icon{transform:scale(1.2) rotate(10deg)}.wss-quick-create-header{background-color:var(--mat-sys-surface-container)}.quick-link-ul-list{list-style:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(20ch,100%),1fr));display:grid;gap:1rem}.quick-link-list{background-color:var(--mat-sys-surface-container);border-radius:16px;border:1px solid var(--mat-sys-primary)}.quick-link-button{text-transform:capitalize!important;font-size:16px!important;cursor:pointer;padding:1rem!important;height:10rem;width:100%;justify-content:start!important;background-color:transparent;border:0}.quick-link-icon{width:3em;height:3em;flex-shrink:0}.quick-link-button-span{display:flex;flex-direction:column;align-items:center;gap:.5rem}.quick-link-heading{margin-top:8px}\n"] }]
         }], propDecorators: { actions$: [{
                 type: Input
             }], heading$: [{