@pega/angular-sdk-components 0.25.3 → 0.25.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -46,27 +46,29 @@ import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency';
46
46
  import utc from 'dayjs/plugin/utc';
47
47
  import tzone from 'dayjs/plugin/timezone';
48
48
  import { MomentDateModule } from '@angular/material-moment-adapter';
49
+ import { ScrollStrategyOptions } from '@angular/cdk/overlay';
49
50
  import * as i6$1 from '@danielmoncada/angular-datetime-picker';
50
51
  import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
51
52
  import * as i6$2 from '@angular/material/select';
52
53
  import { MatSelectModule } from '@angular/material/select';
53
- import * as i2$2 from '@angular/material/icon';
54
+ import * as i6$3 from '@angular/material/icon';
54
55
  import { MatIconModule, MatIcon } from '@angular/material/icon';
55
- import * as i5$2 from '@angular/google-maps';
56
+ import * as i2$2 from '@angular/google-maps';
56
57
  import { GoogleMapsModule } from '@angular/google-maps';
57
58
  import { MatTelInput } from 'mat-tel-input';
58
59
  import { parsePhoneNumberFromString } from 'libphonenumber-js';
59
- import * as i5$3 from '@angular/material/radio';
60
+ import * as i5$2 from '@angular/material/radio';
60
61
  import { MatRadioModule } from '@angular/material/radio';
61
62
  import * as i1$4 from '@angular/material/dialog';
62
63
  import { MatDialogModule, MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
63
64
  import * as i4$4 from '@angular/material/toolbar';
64
65
  import { MatToolbarModule } from '@angular/material/toolbar';
66
+ import { SelectionModel } from '@angular/cdk/collections';
65
67
  import * as i14 from '@angular/material/paginator';
66
68
  import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
67
69
  import * as i7 from '@angular/material/sort';
68
70
  import { MatSortModule, MatSort } from '@angular/material/sort';
69
- import * as i5$4 from '@angular/material/table';
71
+ import * as i5$3 from '@angular/material/table';
70
72
  import { MatTableDataSource, MatTableModule } from '@angular/material/table';
71
73
  import * as i8 from '@angular/cdk/drag-drop';
72
74
  import { moveItemInArray, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
@@ -166,6 +168,10 @@ class ReferenceComponent {
166
168
  const viewComponent = inPConn.createComponent(viewObject, null, null, {
167
169
  pageReference: context && context.startsWith('@CLASS') ? '' : context
168
170
  });
171
+ if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
172
+ const inheritedProps = inPConn.getInheritedProps();
173
+ referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
174
+ }
169
175
  // Get the PConnect object from the created component
170
176
  const newCompPConnect = viewComponent.getPConnect();
171
177
  // Set inherited configuration on the new component
@@ -2338,7 +2344,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
2338
2344
  const oWorkData = oWorkItem.getDataObject();
2339
2345
  // this.containerName$ = oWorkMeta["name"];
2340
2346
  if (bLoadChildren && oWorkData) {
2341
- this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name, undefined, this.localeReference);
2347
+ this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
2342
2348
  }
2343
2349
  // turn off spinner
2344
2350
  this.psService.sendMessage(false);
@@ -2610,11 +2616,11 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
2610
2616
  });
2611
2617
  }
2612
2618
  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 }); }
2613
- 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"] }] }); }
2619
+ 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"] }] }); }
2614
2620
  }
2615
2621
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FlowContainerComponent, decorators: [{
2616
2622
  type: Component,
2617
- 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" }]
2623
+ 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" }]
2618
2624
  }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i2.FormBuilder }, { type: i0.NgZone }, { type: Utils }], propDecorators: { pConn$: [{
2619
2625
  type: Input
2620
2626
  }] } });
@@ -3061,11 +3067,11 @@ class MultiStepComponent {
3061
3067
  return index < this.arNavigationSteps$.length - 1;
3062
3068
  }
3063
3069
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiStepComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
3064
- 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"] }] }); }
3070
+ 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"] }] }); }
3065
3071
  }
3066
3072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiStepComponent, decorators: [{
3067
3073
  type: Component,
3068
- 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"] }]
3074
+ 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"] }]
3069
3075
  }], ctorParameters: () => [{ type: Utils }], propDecorators: { pConn$: [{
3070
3076
  type: Input
3071
3077
  }], formGroup$: [{
@@ -3198,11 +3204,11 @@ class NavbarComponent {
3198
3204
  });
3199
3205
  }
3200
3206
  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 }); }
3201
- 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"] }] }); }
3207
+ 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 <mat-list id=\"profile\" class=\"psdk-logout-button\">\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", 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%}.psdk-logout-button{flex:1;align-content:flex-end}\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"] }] }); }
3202
3208
  }
3203
3209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NavbarComponent, decorators: [{
3204
3210
  type: Component,
3205
- 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"] }]
3211
+ 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 <mat-list id=\"profile\" class=\"psdk-logout-button\">\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", 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%}.psdk-logout-button{flex:1;align-content:flex-end}\n"] }]
3206
3212
  }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }], propDecorators: { pConn$: [{
3207
3213
  type: Input
3208
3214
  }], appName$: [{
@@ -3817,7 +3823,7 @@ function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityCheck
3817
3823
  };
3818
3824
  }
3819
3825
 
3820
- const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
3826
+ const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
3821
3827
  const DETAILS_TEMPLATES = [
3822
3828
  'Details',
3823
3829
  'DetailsFields',
@@ -3922,10 +3928,9 @@ class ViewComponent {
3922
3928
  // It WILL render if true or undefined.
3923
3929
  this.templateName$ = this.configProps$.template || '';
3924
3930
  this.title$ = this.configProps$.title || '';
3925
- this.label$ = this.configProps$.label || '';
3926
- this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
3927
3931
  // label & showLabel within inheritedProps takes precedence over configProps
3928
- this.label$ = this.inheritedProps$.label || this.label$;
3932
+ this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
3933
+ this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
3929
3934
  // children may have a 'reference' so normalize the children array
3930
3935
  this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
3931
3936
  this.visibility$ = this.configProps$.visibility ?? this.visibility$;
@@ -6414,7 +6419,7 @@ class DateComponent extends FieldBase {
6414
6419
  return '';
6415
6420
  }
6416
6421
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
6417
- 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"] }] }); }
6422
+ 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"] }] }); }
6418
6423
  }
6419
6424
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateComponent, decorators: [{
6420
6425
  type: Component,
@@ -6427,7 +6432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
6427
6432
  MatNativeDateModule,
6428
6433
  MomentDateModule,
6429
6434
  forwardRef(() => ComponentMapperComponent)
6430
- ], 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"] }]
6435
+ ], 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"] }]
6431
6436
  }] });
6432
6437
 
6433
6438
  class DateTimeComponent extends FieldBase {
@@ -6440,6 +6445,8 @@ class DateTimeComponent extends FieldBase {
6440
6445
  this.theDateFormat = getDateFormatInfo();
6441
6446
  this.timezone = PCore.getEnvironmentInfo()?.getTimeZone();
6442
6447
  this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
6448
+ this.sso = inject(ScrollStrategyOptions);
6449
+ this.scrollStrategy = this.sso.reposition();
6443
6450
  }
6444
6451
  ngOnInit() {
6445
6452
  super.ngOnInit();
@@ -6490,7 +6497,7 @@ class DateTimeComponent extends FieldBase {
6490
6497
  handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
6491
6498
  }
6492
6499
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
6493
- 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"] }] }); }
6500
+ 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"] }] }); }
6494
6501
  }
6495
6502
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateTimeComponent, decorators: [{
6496
6503
  type: Component,
@@ -6503,7 +6510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
6503
6510
  OwlDateTimeModule,
6504
6511
  OwlNativeDateTimeModule,
6505
6512
  forwardRef(() => ComponentMapperComponent)
6506
- ], 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"] }]
6513
+ ], 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"] }]
6507
6514
  }] });
6508
6515
 
6509
6516
  class DecimalComponent extends FieldBase {
@@ -6983,82 +6990,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
6983
6990
  }]
6984
6991
  }] });
6985
6992
 
6986
- class LocationComponent {
6987
- constructor(loader, angularPConnect, utils, cdRef) {
6988
- this.loader = loader;
6989
- this.angularPConnect = angularPConnect;
6990
- this.utils = utils;
6991
- this.cdRef = cdRef;
6993
+ class LocationComponent extends FieldBase {
6994
+ constructor() {
6995
+ super(...arguments);
6996
+ this.loader = inject(GoogleMapsLoaderService);
6992
6997
  // Dom variables
6993
6998
  this.mapReady = false;
6994
6999
  this.isLocating = false;
6995
- this.searchControl = new FormControl('');
6996
7000
  this.showMap = true;
6997
7001
  this.filteredOptions = [];
6998
7002
  this.markerPosition = null;
6999
- // Used with AngularPConnect
7000
- this.angularPConnectData = {};
7001
- this.label$ = '';
7002
- this.bRequired$ = false;
7003
- this.bReadonly$ = false;
7004
- this.bDisabled$ = false;
7005
- this.bVisible$ = true;
7006
- this.bHasForm$ = true;
7007
- this.testId = '';
7008
7003
  }
7009
7004
  async ngOnInit() {
7005
+ super.ngOnInit();
7010
7006
  // Loading map
7011
7007
  const apiKey = this.pConn$.getGoogleMapsAPIKey();
7012
7008
  await this.loader.load(apiKey);
7013
7009
  this.mapReady = true;
7014
7010
  this.initializeGoogleServices();
7015
7011
  this.getPlacePredictions();
7016
- this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
7017
- this.controlName$ = this.angularPConnect.getComponentID(this);
7018
- this.checkAndUpdate();
7019
- if (this.formGroup$) {
7020
- // add control to formGroup
7021
- this.formGroup$.addControl(this.controlName$, this.searchControl);
7022
- this.bHasForm$ = true;
7023
- }
7024
- else {
7025
- this.bReadonly$ = true;
7026
- this.bHasForm$ = false;
7027
- }
7028
- }
7029
- ngOnDestroy() {
7030
- if (this.formGroup$) {
7031
- this.formGroup$.removeControl(this.controlName$);
7032
- }
7033
- if (this.angularPConnectData.unsubscribeFn) {
7034
- this.angularPConnectData.unsubscribeFn();
7035
- }
7036
- }
7037
- checkAndUpdate() {
7038
- const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
7039
- if (bUpdateSelf) {
7040
- this.updateSelf();
7041
- }
7042
- }
7043
- onStateChange() {
7044
- setTimeout(() => {
7045
- this.checkAndUpdate();
7046
- }, 0);
7047
7012
  }
7013
+ /**
7014
+ * Updates the component when there are changes in the state.
7015
+ */
7048
7016
  updateSelf() {
7017
+ // Resolve configuration properties
7049
7018
  this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
7050
- if (this.configProps$.visibility != null) {
7051
- this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
7052
- }
7019
+ // Update component common properties
7020
+ this.updateComponentCommonProperties(this.configProps$);
7053
7021
  this.onlyCoordinates = !!this.configProps$.onlyCoordinates;
7054
- this.label$ = this.configProps$.label;
7055
- this.testId = this.configProps$.testId;
7056
- this.helperText = this.configProps$.helperText || '';
7057
- this.placeholder = this.configProps$.placeholder || '';
7058
7022
  this.showMapReadOnly$ = !!this.configProps$.showMapReadOnly;
7059
- if (this.configProps$.readOnly != null) {
7060
- this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
7061
- }
7062
7023
  this.showMap = this.bReadonly$ ? this.showMapReadOnly$ : !!this.configProps$.showMap;
7063
7024
  if (this.configProps$.coordinates) {
7064
7025
  const latAndLong = this.configProps$.coordinates.split(',').map(Number);
@@ -7066,34 +7027,8 @@ class LocationComponent {
7066
7027
  const longitude = Number(latAndLong[1]);
7067
7028
  this.updateMap(latitude, longitude, this.configProps$.value);
7068
7029
  }
7069
- // // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
7070
- setTimeout(() => {
7071
- if (this.configProps$.required != null) {
7072
- this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
7073
- }
7074
- this.cdRef.detectChanges();
7075
- });
7076
- // // disabled
7077
- if (this.configProps$.disabled != undefined) {
7078
- this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
7079
- }
7080
- if (this.bDisabled$ || this.bReadonly$) {
7081
- this.searchControl.disable();
7082
- }
7083
- else {
7084
- this.searchControl.enable();
7085
- }
7086
- this.actionsApi = this.pConn$.getActionsApi();
7087
7030
  this.valueProp = this.pConn$.getStateProps().value;
7088
7031
  this.coordinatesProp = this.pConn$.getStateProps().coordinates;
7089
- // // trigger display of error message with field control
7090
- if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
7091
- const timer = interval(100).subscribe(() => {
7092
- this.searchControl.setErrors({ message: true });
7093
- this.searchControl.markAsTouched();
7094
- timer.unsubscribe();
7095
- });
7096
- }
7097
7032
  }
7098
7033
  onOptionSelected(event) {
7099
7034
  const value = event.option.value;
@@ -7144,21 +7079,6 @@ class LocationComponent {
7144
7079
  });
7145
7080
  }
7146
7081
  }
7147
- getErrorMessage() {
7148
- let errMessage = '';
7149
- // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
7150
- if (this.searchControl.hasError('message')) {
7151
- errMessage = this.angularPConnectData.validateMessage ?? '';
7152
- return errMessage;
7153
- }
7154
- if (this.searchControl.hasError('required')) {
7155
- errMessage = 'You must enter a value';
7156
- }
7157
- else if (this.searchControl.errors) {
7158
- errMessage = this.searchControl.errors.toString();
7159
- }
7160
- return errMessage;
7161
- }
7162
7082
  tryGetLocation(retryCount) {
7163
7083
  navigator.geolocation.getCurrentPosition(position => {
7164
7084
  const lat = position.coords.latitude;
@@ -7213,7 +7133,7 @@ class LocationComponent {
7213
7133
  this.geocoder = new google.maps.Geocoder();
7214
7134
  }
7215
7135
  getPlacePredictions() {
7216
- this.searchControl.valueChanges
7136
+ this.fieldControl.valueChanges
7217
7137
  .pipe(debounceTime$1(300), switchMap(value => this.getSuggestions(value || '')))
7218
7138
  .subscribe(predictions => {
7219
7139
  this.filteredOptions = predictions;
@@ -7266,17 +7186,17 @@ class LocationComponent {
7266
7186
  }
7267
7187
  }
7268
7188
  updateProps() {
7269
- handleEvent(this.actionsApi, 'change', this.valueProp, this.searchControl.value);
7189
+ handleEvent(this.actionsApi, 'change', this.valueProp, this.fieldControl.value);
7270
7190
  handleEvent(this.actionsApi, 'change', this.coordinatesProp, this.coordinates);
7271
7191
  }
7272
7192
  setCoordinates(latitude, longitude) {
7273
7193
  this.coordinates = `${latitude}, ${longitude}`;
7274
7194
  }
7275
7195
  setLocationValue(value) {
7276
- this.searchControl.setValue(value, { emitEvent: false });
7196
+ this.fieldControl.setValue(value, { emitEvent: false });
7277
7197
  }
7278
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LocationComponent, deps: [{ token: GoogleMapsLoaderService }, { token: AngularPConnectService }, { token: Utils }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
7279
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LocationComponent, isStandalone: true, selector: "app-location", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"mapReady && bVisible$\">\n <!-- Google suggestions -->\n <mat-form-field class=\"psdk-full-width\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n [attr.data-test-id]=\"testId\"\n (blur)=\"fieldOnBlur()\"\n />\n <mat-error *ngIf=\"searchControl.invalid\">{{ getErrorMessage() }}</mat-error>\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n (click)=\"locateMe()\"\n [disabled]=\"isLocating || bDisabled$ || bReadonly$\"\n aria-label=\"Use my location\"\n >\n <ng-container *ngIf=\"!isLocating; else loadingSpinner\">\n <mat-icon>location_on</mat-icon>\n </ng-container>\n <ng-template #loadingSpinner>\n <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n </ng-template>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option }}\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n <!-- Google map -->\n <div *ngIf=\"showMap\" class=\"map-wrapper\">\n <google-map height=\"400px\" width=\"100%\" [center]=\"center\" [zoom]=\"13\" (mapClick)=\"onMapClick($event)\">\n <map-marker *ngIf=\"markerPosition\" [position]=\"markerPosition\" [title]=\"'Selected Location'\"></map-marker>\n </google-map>\n <div class=\"map-blocker\" *ngIf=\"bDisabled$ || bReadonly$\"></div>\n </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.map-wrapper{position:relative}.map-blocker{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10;cursor:not-allowed}\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: GoogleMapsModule }, { kind: "component", type: i5$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i5$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
7198
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LocationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
7199
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LocationComponent, isStandalone: true, selector: "app-location", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mapReady && bVisible$\">\n <!-- Google suggestions -->\n <mat-form-field class=\"psdk-full-width\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n [attr.data-test-id]=\"testId\"\n (blur)=\"fieldOnBlur()\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n (click)=\"locateMe()\"\n [disabled]=\"isLocating || bDisabled$ || bReadonly$\"\n aria-label=\"Use my location\"\n >\n <ng-container *ngIf=\"!isLocating; else loadingSpinner\">\n <mat-icon>location_on</mat-icon>\n </ng-container>\n <ng-template #loadingSpinner>\n <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n </ng-template>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option }}\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n <!-- Google map -->\n <div *ngIf=\"showMap\" class=\"map-wrapper\">\n <google-map height=\"400px\" width=\"100%\" [center]=\"center\" [zoom]=\"13\" (mapClick)=\"onMapClick($event)\">\n <map-marker *ngIf=\"markerPosition\" [position]=\"markerPosition\" [title]=\"'Selected Location'\"></map-marker>\n </google-map>\n <div class=\"map-blocker\" *ngIf=\"bDisabled$ || bReadonly$\"></div>\n </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.map-wrapper{position:relative}.map-blocker{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10;cursor:not-allowed}\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: GoogleMapsModule }, { kind: "component", type: i2$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i2$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
7280
7200
  }
7281
7201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LocationComponent, decorators: [{
7282
7202
  type: Component,
@@ -7290,12 +7210,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
7290
7210
  MatInputModule,
7291
7211
  MatProgressSpinnerModule,
7292
7212
  ReactiveFormsModule
7293
- ], template: "<div *ngIf=\"mapReady && bVisible$\">\n <!-- Google suggestions -->\n <mat-form-field class=\"psdk-full-width\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n [attr.data-test-id]=\"testId\"\n (blur)=\"fieldOnBlur()\"\n />\n <mat-error *ngIf=\"searchControl.invalid\">{{ getErrorMessage() }}</mat-error>\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n (click)=\"locateMe()\"\n [disabled]=\"isLocating || bDisabled$ || bReadonly$\"\n aria-label=\"Use my location\"\n >\n <ng-container *ngIf=\"!isLocating; else loadingSpinner\">\n <mat-icon>location_on</mat-icon>\n </ng-container>\n <ng-template #loadingSpinner>\n <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n </ng-template>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option }}\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n <!-- Google map -->\n <div *ngIf=\"showMap\" class=\"map-wrapper\">\n <google-map height=\"400px\" width=\"100%\" [center]=\"center\" [zoom]=\"13\" (mapClick)=\"onMapClick($event)\">\n <map-marker *ngIf=\"markerPosition\" [position]=\"markerPosition\" [title]=\"'Selected Location'\"></map-marker>\n </google-map>\n <div class=\"map-blocker\" *ngIf=\"bDisabled$ || bReadonly$\"></div>\n </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.map-wrapper{position:relative}.map-blocker{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10;cursor:not-allowed}\n"] }]
7294
- }], ctorParameters: () => [{ type: GoogleMapsLoaderService }, { type: AngularPConnectService }, { type: Utils }, { type: i0.ChangeDetectorRef }], propDecorators: { pConn$: [{
7295
- type: Input
7296
- }], formGroup$: [{
7297
- type: Input
7298
- }] } });
7213
+ ], template: "<div *ngIf=\"mapReady && bVisible$\">\n <!-- Google suggestions -->\n <mat-form-field class=\"psdk-full-width\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n [attr.data-test-id]=\"testId\"\n (blur)=\"fieldOnBlur()\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n (click)=\"locateMe()\"\n [disabled]=\"isLocating || bDisabled$ || bReadonly$\"\n aria-label=\"Use my location\"\n >\n <ng-container *ngIf=\"!isLocating; else loadingSpinner\">\n <mat-icon>location_on</mat-icon>\n </ng-container>\n <ng-template #loadingSpinner>\n <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" strokeWidth=\"3\"></mat-progress-spinner>\n </ng-template>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option }}\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n <!-- Google map -->\n <div *ngIf=\"showMap\" class=\"map-wrapper\">\n <google-map height=\"400px\" width=\"100%\" [center]=\"center\" [zoom]=\"13\" (mapClick)=\"onMapClick($event)\">\n <map-marker *ngIf=\"markerPosition\" [position]=\"markerPosition\" [title]=\"'Selected Location'\"></map-marker>\n </google-map>\n <div class=\"map-blocker\" *ngIf=\"bDisabled$ || bReadonly$\"></div>\n </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.map-wrapper{position:relative}.map-blocker{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10;cursor:not-allowed}\n"] }]
7214
+ }] });
7299
7215
 
7300
7216
  const PERIOD = '.';
7301
7217
  const AT = '@';
@@ -7707,11 +7623,11 @@ class PhoneComponent extends FieldBase {
7707
7623
  return '';
7708
7624
  }
7709
7625
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
7710
- 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"] }] }); }
7626
+ 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"] }] }); }
7711
7627
  }
7712
7628
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, decorators: [{
7713
7629
  type: Component,
7714
- 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"] }]
7630
+ 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"] }]
7715
7631
  }] });
7716
7632
 
7717
7633
  class RadioButtonsComponent extends FieldBase {
@@ -7773,7 +7689,7 @@ class RadioButtonsComponent extends FieldBase {
7773
7689
  return this.pConn$.getLocalizedValue(opt.value, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
7774
7690
  }
7775
7691
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
7776
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", providers: [Utils], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"variant !== 'card'; else cardMode\">\n <div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n ></component-mapper>\n </div>\n</div>\n<ng-template #noDisplayMode>\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input matInput [placeholder]=\"placeholder\" style=\"display: none\" [required]=\"bRequired$\" />\n <mat-radio-group\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n (change)=\"fieldOnChange($event)\"\n class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n >\n <mat-radio-button\n *ngFor=\"let opt of options$\"\n [checked]=\"isSelected(opt.key)\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n [value]=\"opt.key\"\n class=\"psdk-radio-button\"\n >\n {{ getLocalizedOptionValue(opt) }}\n </mat-radio-button>\n </mat-radio-group>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #cardMode>\n <h4>{{ label$ }}</h4>\n <div>\n <component-mapper name=\"SelectableCard\" [props]=\"{ pConn$: pConn$, type: 'radio' }\" [parent]=\"this\"></component-mapper>\n </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row;margin-top:1rem}.psdk-radio-vertical{display:flex;flex-direction:column;margin-top:1rem}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mdc-line-ripple{display:none}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\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(() => 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: "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(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
7692
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", providers: [Utils], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"variant !== 'card'; else cardMode\">\n <div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n ></component-mapper>\n </div>\n</div>\n<ng-template #noDisplayMode>\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input matInput [placeholder]=\"placeholder\" style=\"display: none\" [required]=\"bRequired$\" />\n <mat-radio-group\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n [attr.data-test-id]=\"testId\"\n (change)=\"fieldOnChange($event)\"\n class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n >\n <mat-radio-button\n *ngFor=\"let opt of options$\"\n [checked]=\"isSelected(opt.key)\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n [value]=\"opt.key\"\n class=\"psdk-radio-button\"\n >\n {{ getLocalizedOptionValue(opt) }}\n </mat-radio-button>\n </mat-radio-group>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #cardMode>\n <h4>{{ label$ }}</h4>\n <div>\n <component-mapper name=\"SelectableCard\" [props]=\"{ pConn$: pConn$, type: 'radio' }\" [parent]=\"this\"></component-mapper>\n </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row;margin-top:1rem}.psdk-radio-vertical{display:flex;flex-direction:column;margin-top:1rem}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mdc-line-ripple{display:none}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\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(() => 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: "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(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i5$2.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(() => i5$2.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
7777
7693
  }
7778
7694
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonsComponent, decorators: [{
7779
7695
  type: Component,
@@ -8972,7 +8888,7 @@ class SearchFormComponent {
8972
8888
  return selectionsExist;
8973
8889
  }
8974
8890
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchFormComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
8975
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchFormComponent, isStandalone: true, selector: "app-search-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", searchSelectCacheKey: "searchSelectCacheKey" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-form\" style=\"display: flex; flex-direction: column\">\n <h5>{{ propsToUse.label }}</h5>\n <div *ngIf=\"searchCategoriesComp === 'dropdown'\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"currentTabId\" (selectionChange)=\"handleTabClick($event.value)\">\n <mat-option *ngFor=\"let tab of tabItems\" [value]=\"tab.id\">{{ tab.name }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"searchCategoriesComp === 'radio'\">\n <mat-radio-group [value]=\"currentTabId\">\n <mat-radio-button *ngFor=\"let tab of tabItems\" [value]=\"tab.id\" (click)=\"handleTabClick($event)\">{{ tab.name }}</mat-radio-button>\n </mat-radio-group>\n </div>\n\n <!-- Tab Content -->\n <div>\n <div *ngFor=\"let tab of tabItems; let index = index\">\n <div *ngIf=\"tab.id === currentTabId\" class=\"psdk-sub-tabs\">\n <component-mapper\n *ngIf=\"tab.content?.getPConnect() as tabPConn\"\n [name]=\"tabPConn.getComponentName()\"\n [props]=\"{ pConn$: tabPConn, formGroup$ }\"\n ></component-mapper>\n </div>\n </div>\n </div>\n <!-- Dialog -->\n <ng-template #dialogTemplate>\n <h2 mat-dialog-title>Discard selections?</h2>\n <mat-dialog-content>\n <p>When changing search categories, any previous selections will be lost.</p>\n </mat-dialog-content>\n <mat-dialog-actions>\n <button mat-stroked-button type=\"button\" (click)=\"onDialogClose()\">Go back</button>\n <button mat-raised-button color=\"primary\" (click)=\"clearSelectionAndSwitchTab()\">Discard</button>\n </mat-dialog-actions>\n </ng-template>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep mat-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list{display:none}\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(() => ReactiveFormsModule) }, { 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: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTabsModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDialogModule) }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogTitle), selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogActions), selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogContent), selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
8891
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchFormComponent, isStandalone: true, selector: "app-search-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", searchSelectCacheKey: "searchSelectCacheKey" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-form\" style=\"display: flex; flex-direction: column\">\n <h5>{{ propsToUse.label }}</h5>\n <div *ngIf=\"searchCategoriesComp === 'dropdown'\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"currentTabId\" (selectionChange)=\"handleTabClick($event.value)\">\n <mat-option *ngFor=\"let tab of tabItems\" [value]=\"tab.id\">{{ tab.name }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"searchCategoriesComp === 'radio'\">\n <mat-radio-group [value]=\"currentTabId\">\n <mat-radio-button *ngFor=\"let tab of tabItems\" [value]=\"tab.id\" (click)=\"handleTabClick($event)\">{{ tab.name }}</mat-radio-button>\n </mat-radio-group>\n </div>\n\n <!-- Tab Content -->\n <div>\n <div *ngFor=\"let tab of tabItems; let index = index\">\n <div *ngIf=\"tab.id === currentTabId\" class=\"psdk-sub-tabs\">\n <component-mapper\n *ngIf=\"tab.content?.getPConnect() as tabPConn\"\n [name]=\"tabPConn.getComponentName()\"\n [props]=\"{ pConn$: tabPConn, formGroup$ }\"\n ></component-mapper>\n </div>\n </div>\n </div>\n <!-- Dialog -->\n <ng-template #dialogTemplate>\n <h2 mat-dialog-title>Discard selections?</h2>\n <mat-dialog-content>\n <p>When changing search categories, any previous selections will be lost.</p>\n </mat-dialog-content>\n <mat-dialog-actions>\n <button mat-stroked-button type=\"button\" (click)=\"onDialogClose()\">Go back</button>\n <button mat-raised-button color=\"primary\" (click)=\"clearSelectionAndSwitchTab()\">Discard</button>\n </mat-dialog-actions>\n </ng-template>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep mat-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list{display:none}\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(() => ReactiveFormsModule) }, { 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: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i5$2.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(() => i5$2.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTabsModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDialogModule) }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogTitle), selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogActions), selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i0.forwardRef(() => i1$4.MatDialogContent), selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
8976
8892
  }
8977
8893
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchFormComponent, decorators: [{
8978
8894
  type: Component,
@@ -9161,7 +9077,7 @@ class SelectableCardComponent extends FieldBase {
9161
9077
  }
9162
9078
  }
9163
9079
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
9164
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectableCardComponent, isStandalone: true, selector: "lib-selectable-card", inputs: { type: "type" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"type === 'checkbox'\"\n style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem\"\n>\n <div *ngFor=\"let cardContent of contentList\">\n <mat-card [ngStyle]=\"cardStyle\" appearance=\"outlined\" (click)=\"cardSelect($event, cardContent.commonCardProps)\">\n <img\n *ngIf=\"cardContent.cardImage\"\n mat-card-image\n src=\"{{ cardContent.cardImage.src }}\"\n alt=\"{{ cardContent.cardImage.alt }}\"\n [ngStyle]=\"cardContent.cardImage.style\"\n />\n <mat-card-content>\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"cardContent.commonCardProps.selected\"\n [disabled]=\"disabled || readOnly\"\n [attr.data-test-id]=\"testId + ':' + cardContent.commonCardProps.label\"\n (change)=\"handleChangeMultiMode($event, cardContent.commonCardProps)\"\n (blur)=\"fieldOnBlur()\"\n >{{ cardContent.commonCardProps.label }}</mat-checkbox\n >\n <div\n *ngFor=\"let field of cardContent.commonCardProps.fields\"\n [ngStyle]=\"field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle\"\n >\n <div>{{ field.name }}</div>\n <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n</div>\n\n<mat-radio-group\n *ngIf=\"type === 'radio'\"\n style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem\"\n [name]=\"propName\"\n [value]=\"radioBtnValue\"\n (change)=\"fieldOnChange($event.value)\"\n>\n <div *ngFor=\"let cardContent of contentList\">\n <mat-card [ngStyle]=\"cardStyle\" appearance=\"outlined\" (click)=\"cardSelect($event, cardContent.commonCardProps)\">\n <img\n *ngIf=\"cardContent.cardImage\"\n mat-card-image\n src=\"{{ cardContent.cardImage.src }}\"\n alt=\"{{ cardContent.cardImage.alt }}\"\n [ngStyle]=\"cardContent.cardImage.style\"\n />\n <mat-card-content>\n <mat-radio-button\n [checked]=\"radioBtnValue === cardContent?.commonCardProps?.key\"\n [disabled]=\"disabled\"\n [value]=\"cardContent.commonCardProps.key\"\n >\n {{ cardContent.commonCardProps.label }}\n </mat-radio-button>\n <div\n *ngFor=\"let field of cardContent.commonCardProps.fields\"\n [ngStyle]=\"field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle\"\n >\n <div>{{ field.name }}</div>\n <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n</mat-radio-group>\n", styles: ["::ng-deep .mdc-label{font-size:large}.mat-mdc-card-content:last-child{padding-bottom:0}.mat-mdc-card-content:first-child{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i5$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: 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: MatCheckboxModule }, { kind: "component", type: 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"] }] }); }
9080
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectableCardComponent, isStandalone: true, selector: "lib-selectable-card", inputs: { type: "type" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"type === 'checkbox'\"\n style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem\"\n>\n <div *ngFor=\"let cardContent of contentList\">\n <mat-card [ngStyle]=\"cardStyle\" appearance=\"outlined\" (click)=\"cardSelect($event, cardContent.commonCardProps)\">\n <img\n *ngIf=\"cardContent.cardImage\"\n mat-card-image\n src=\"{{ cardContent.cardImage.src }}\"\n alt=\"{{ cardContent.cardImage.alt }}\"\n [ngStyle]=\"cardContent.cardImage.style\"\n />\n <mat-card-content>\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"cardContent.commonCardProps.selected\"\n [disabled]=\"disabled || readOnly\"\n [attr.data-test-id]=\"testId + ':' + cardContent.commonCardProps.label\"\n (change)=\"handleChangeMultiMode($event, cardContent.commonCardProps)\"\n (blur)=\"fieldOnBlur()\"\n >{{ cardContent.commonCardProps.label }}</mat-checkbox\n >\n <div\n *ngFor=\"let field of cardContent.commonCardProps.fields\"\n [ngStyle]=\"field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle\"\n >\n <div>{{ field.name }}</div>\n <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n</div>\n\n<mat-radio-group\n *ngIf=\"type === 'radio'\"\n style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem\"\n [name]=\"propName\"\n [value]=\"radioBtnValue\"\n (change)=\"fieldOnChange($event.value)\"\n>\n <div *ngFor=\"let cardContent of contentList\">\n <mat-card [ngStyle]=\"cardStyle\" appearance=\"outlined\" (click)=\"cardSelect($event, cardContent.commonCardProps)\">\n <img\n *ngIf=\"cardContent.cardImage\"\n mat-card-image\n src=\"{{ cardContent.cardImage.src }}\"\n alt=\"{{ cardContent.cardImage.alt }}\"\n [ngStyle]=\"cardContent.cardImage.style\"\n />\n <mat-card-content>\n <mat-radio-button\n [checked]=\"radioBtnValue === cardContent?.commonCardProps?.key\"\n [disabled]=\"disabled\"\n [value]=\"cardContent.commonCardProps.key\"\n >\n {{ cardContent.commonCardProps.label }}\n </mat-radio-button>\n <div\n *ngFor=\"let field of cardContent.commonCardProps.fields\"\n [ngStyle]=\"field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle\"\n >\n <div>{{ field.name }}</div>\n <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n</mat-radio-group>\n", styles: ["::ng-deep .mdc-label{font-size:large}.mat-mdc-card-content:last-child{padding-bottom:0}.mat-mdc-card-content:first-child{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i5$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: 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"] }] }); }
9165
9081
  }
9166
9082
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectableCardComponent, decorators: [{
9167
9083
  type: Component,
@@ -12131,6 +12047,7 @@ class ListViewComponent {
12131
12047
  this.psService = psService;
12132
12048
  this.utils = utils;
12133
12049
  this.bInForm$ = true;
12050
+ this.selection = new SelectionModel(true, []);
12134
12051
  this.displayedColumns$ = Array();
12135
12052
  this.groupByColumns$ = [];
12136
12053
  this.repeatListData = [];
@@ -12341,6 +12258,13 @@ class ListViewComponent {
12341
12258
  this.multiSelectionMode = true;
12342
12259
  }
12343
12260
  this.repeatList$ = new MatTableDataSource(this.updatedRefList);
12261
+ if (this.configProps$?.readonlyContextList?.length > 0) {
12262
+ const readonlyIds = new Set(this.configProps$.readonlyContextList.map(element => element[this.rowID]));
12263
+ const rowsToSelect = this.repeatList$.data.filter(row => readonlyIds.has(row[this.rowID]));
12264
+ if (rowsToSelect.length > 0) {
12265
+ this.selection.select(...rowsToSelect);
12266
+ }
12267
+ }
12344
12268
  this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this);
12345
12269
  // keeping an original copy to get back after possible sorts, filters and groupBy
12346
12270
  this.repeatListData = this.repeatList$.data.slice();
@@ -12432,6 +12356,7 @@ class ListViewComponent {
12432
12356
  const arReturn = arFields;
12433
12357
  arReturn.forEach((field, i) => {
12434
12358
  field.config = { ...field.config, ...fields[i], name: fields[i].id };
12359
+ field.config.label = PCore.getLocaleUtils().getLocaleValue(field.config.label, this.configProps$.localeReference);
12435
12360
  });
12436
12361
  return arReturn;
12437
12362
  }
@@ -12453,12 +12378,6 @@ class ListViewComponent {
12453
12378
  this.repeatList$.paginator.firstPage();
12454
12379
  }
12455
12380
  }
12456
- isChecked(rowIn) {
12457
- const initialVal = false;
12458
- return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
12459
- return acc || rowIn[this.rowID] === currRow[this.rowID];
12460
- }, initialVal);
12461
- }
12462
12381
  fieldOnChange(row) {
12463
12382
  const value = row[this.rowID];
12464
12383
  const reqObj = {};
@@ -12475,32 +12394,29 @@ class ListViewComponent {
12475
12394
  this.checkBoxValue = value;
12476
12395
  this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
12477
12396
  }
12478
- onCheckboxClick(row, event) {
12479
- const value = row[this.rowID];
12480
- const checked = event?.checked;
12481
- const reqObj = {};
12482
- if (this.compositeKeys?.length > 1) {
12483
- const index = this.response.findIndex(element => element[this.rowID] === value);
12484
- const selectedRow = this.response[index];
12485
- this.compositeKeys.forEach(element => {
12486
- reqObj[element] = selectedRow[element];
12487
- });
12488
- reqObj.$selected = checked;
12397
+ onCheckboxClick(row) {
12398
+ this.selection.toggle(row);
12399
+ const requiredValue = this.getSelectedValue(row);
12400
+ this.pConn$?.getListActions()?.setSelectedRows([requiredValue]);
12401
+ }
12402
+ isAllSelected() {
12403
+ const numSelected = this.selection.selected.length;
12404
+ const numRows = this.repeatList$.data.length;
12405
+ return numSelected === numRows;
12406
+ }
12407
+ toggleAllRows() {
12408
+ if (this.isAllSelected()) {
12409
+ this.selection.clear();
12410
+ this.pConn$?.getListActions()?.clearSelectedRows();
12411
+ return;
12489
12412
  }
12490
- else {
12491
- reqObj[this.rowID] = value;
12492
- reqObj.$selected = checked;
12413
+ if (this.selection.hasValue() && !this.isAllSelected()) {
12414
+ this.pConn$?.getListActions()?.clearSelectedRows();
12493
12415
  }
12494
- this.pConn$?.getListActions()?.setSelectedRows([reqObj]);
12416
+ this.selection.select(...this.repeatList$.data);
12417
+ const requiredValues = this.repeatList$.data.map(row => this.getSelectedValue(row));
12418
+ this.pConn$?.getListActions()?.setSelectedRows(requiredValues);
12495
12419
  }
12496
- // rowClick(row) {
12497
- // switch (this.configProps$.rowClickAction) {
12498
- // case 'openAssignment':
12499
- // this.psService.sendMessage(true);
12500
- // this.openAssignment(row);
12501
- // break;
12502
- // }
12503
- // }
12504
12420
  _getIconStyle(level) {
12505
12421
  let sReturn = '';
12506
12422
  let nLevel = parseInt(level, 10);
@@ -13256,6 +13172,24 @@ class ListViewComponent {
13256
13172
  }
13257
13173
  return select;
13258
13174
  }
13175
+ getSelectedValue(row) {
13176
+ const value = row[this.rowID];
13177
+ const checked = this.selection.isSelected(row);
13178
+ const reqObj = {};
13179
+ if (this.compositeKeys?.length > 1) {
13180
+ const index = this.response.findIndex(element => element[this.rowID] === value);
13181
+ const selectedRow = this.response[index];
13182
+ this.compositeKeys.forEach(element => {
13183
+ reqObj[element] = selectedRow[element];
13184
+ });
13185
+ reqObj.$selected = checked;
13186
+ }
13187
+ else {
13188
+ reqObj[this.rowID] = value;
13189
+ reqObj.$selected = checked;
13190
+ }
13191
+ return reqObj;
13192
+ }
13259
13193
  updateFiltersFromData(data) {
13260
13194
  if (this.displayAs === 'advancedSearch') {
13261
13195
  this.filters = {};
@@ -13308,7 +13242,7 @@ class ListViewComponent {
13308
13242
  };
13309
13243
  }
13310
13244
  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 }); }
13311
- 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"] }] }); }
13245
+ 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$3.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$3.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$3.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(() => i6$3.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i5$2.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => 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"] }] }); }
13312
13246
  }
13313
13247
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListViewComponent, decorators: [{
13314
13248
  type: Component,
@@ -13331,7 +13265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
13331
13265
  MatOptionModule,
13332
13266
  MatDatepickerModule,
13333
13267
  forwardRef(() => ComponentMapperComponent)
13334
- ], 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"] }]
13268
+ ], 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"] }]
13335
13269
  }], ctorParameters: () => [{ type: ProgressSpinnerService }, { type: Utils }], propDecorators: { paginator: [{
13336
13270
  type: ViewChild,
13337
13271
  args: [MatPaginator]
@@ -13751,7 +13685,7 @@ class MultiselectComponent extends FieldBase {
13751
13685
  }
13752
13686
  }
13753
13687
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
13754
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\">\n <mat-label>{{ label$ }}</mat-label>\n <mat-chip-grid #chipGrid>\n <ng-container *ngFor=\"let select of selectedItems\">\n <mat-chip-row (removed)=\"removeChip(select)\">\n {{ select.primary }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n </ng-container>\n </mat-chip-grid>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n (input)=\"fieldOnChange($event)\"\n [matChipInputFor]=\"chipGrid\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item)\">\n <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item)\">\n <span>{{ item.primary }}</span>\n </mat-checkbox>\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep .mat-mdc-form-field-infix{padding-left:10px}\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: ReactiveFormsModule }, { kind: "directive", type: 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: 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: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] }); }
13688
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\">\n <mat-label>{{ label$ }}</mat-label>\n <mat-chip-grid #chipGrid>\n <ng-container *ngFor=\"let select of selectedItems\">\n <mat-chip-row (removed)=\"removeChip(select)\">\n {{ select.primary }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n </ng-container>\n </mat-chip-grid>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"fieldControl\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [matAutocomplete]=\"auto\"\n (input)=\"fieldOnChange($event)\"\n [matChipInputFor]=\"chipGrid\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item)\">\n <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item)\">\n <span>{{ item.primary }}</span>\n </mat-checkbox>\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep .mat-mdc-form-field-infix{padding-left:10px}\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: ReactiveFormsModule }, { kind: "directive", type: 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: 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: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] }); }
13755
13689
  }
13756
13690
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
13757
13691
  type: Component,
@@ -14451,11 +14385,11 @@ class SelfServiceCaseViewComponent {
14451
14385
  openProcessAction(data.ID, { ...data });
14452
14386
  }
14453
14387
  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 }); }
14454
- 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"] }] }); }
14388
+ 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"] }] }); }
14455
14389
  }
14456
14390
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelfServiceCaseViewComponent, decorators: [{
14457
14391
  type: Component,
14458
- 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"] }]
14392
+ 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"] }]
14459
14393
  }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
14460
14394
  type: Input
14461
14395
  }], formGroup$: [{
@@ -15709,7 +15643,7 @@ class SimpleTableManualComponent {
15709
15643
  this.elementsData = eleData;
15710
15644
  }
15711
15645
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
15712
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [DatapageService], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--mat-sys-outline-variant);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--mat-sys-surface-container);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.psdk-utility-card-action-svg-icon{width:1.4rem;filter:var(--app-primary-color-filter)}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => 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: "directive", type: i0.forwardRef(() => i5$4.MatNoDataRow), selector: "ng-template[matNoDataRow]" }, { 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(() => 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(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => 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(() => 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(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
15646
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [DatapageService], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields; let i = index\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n <tr class=\"mat-row psdk-no-records\" *matNoDataRow>\n <td id=\"no-records\" class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}\n </td>\n </tr>\n </table>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">\n + {{ localizedVal('Add', localeCategory) }}\n </button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--mat-sys-outline-variant);padding:8px!important;min-width:10rem}::ng-deep th.mat-mdc-header-cell:last-child,td.mat-mdc-cell:last-child{min-width:2rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--mat-sys-surface-container);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;text-align:center;border:1px solid var(--mat-sys-outline-variant);border-top:none}.psdk-utility-card-action-svg-icon{width:1.4rem;filter:var(--app-primary-color-filter)}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i5$3.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i5$3.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i5$3.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i0.forwardRef(() => i5$3.MatNoDataRow), selector: "ng-template[matNoDataRow]" }, { 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(() => 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(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => 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(() => 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(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
15713
15647
  }
15714
15648
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
15715
15649
  type: Component,
@@ -16584,9 +16518,11 @@ class AttachmentComponent {
16584
16518
  updateSelf() {
16585
16519
  const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
16586
16520
  const stateProps = this.pConn$.getStateProps();
16587
- const { value, label, required, visibility, disabled, readOnly, extensions, displayMode, isTableFormatter, allowMultiple, editMode } = configProps;
16521
+ const { value, label, required, disabled, readOnly, extensions, displayMode, isTableFormatter, allowMultiple, editMode } = configProps;
16588
16522
  this.bRequired$ = this.utils.getBooleanValue(required);
16589
- this.bVisible$ = this.utils.getBooleanValue(visibility);
16523
+ if (configProps.visibility != null) {
16524
+ this.bVisible$ = this.utils.getBooleanValue(configProps.visibility);
16525
+ }
16590
16526
  this.bDisabled$ = this.utils.getBooleanValue(disabled);
16591
16527
  this.bReadonly$ = this.utils.getBooleanValue(readOnly);
16592
16528
  this.allowMultiple$ = this.utils.getBooleanValue(allowMultiple);
@@ -16866,11 +16802,11 @@ class AttachmentComponent {
16866
16802
  }
16867
16803
  }
16868
16804
  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 }); }
16869
- 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"] }] }); }
16805
+ 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: i6$3.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"] }] }); }
16870
16806
  }
16871
16807
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AttachmentComponent, decorators: [{
16872
16808
  type: Component,
16873
- 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"] }]
16809
+ 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"] }]
16874
16810
  }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
16875
16811
  type: Input
16876
16812
  }], formGroup$: [{
@@ -16944,7 +16880,7 @@ class CaseHistoryComponent {
16944
16880
  });
16945
16881
  }
16946
16882
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseHistoryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
16947
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n <table mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
16883
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n <table mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
16948
16884
  }
16949
16885
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseHistoryComponent, decorators: [{
16950
16886
  type: Component,
@@ -17568,11 +17504,11 @@ class FileUtilityComponent {
17568
17504
  return false;
17569
17505
  }
17570
17506
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUtilityComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
17571
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <component-mapper\n name=\"ListUtility\"\n [props]=\"{\n name$: lu_name$,\n icon$: lu_icon$,\n bLoading$: lu_bLoading$,\n count$: lu_count$,\n arActions$: lu_arActions$,\n arItems$: lu_arItems$,\n onViewAll$: lu_onViewAllFunction,\n menuIconOverrideAction$: removeFileFromList$\n }\"\n ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-file-selector\">\n <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>\n <div class=\"psdk-modal-link-entry\">\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-links-row\">\n <div class=\"psdk-links-two-column\">\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>Link title</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n </mat-form-field>\n </div>\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>URL</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"psdk-modal-link-add\">\n <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>\n </div>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n ></component-mapper>\n </div>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <div class=\"psdk-view-all-header\">\n <div>\n <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n </div>\n <div>\n <button mat-icon-button (click)=\"_closeViewAll()\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n </button>\n </div>\n </div>\n <div class=\"psdk-view-all-body\">\n <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#0009;position:fixed;z-index:999;top:0;left:0}.psdk-modal-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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(() => 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: "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: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
17507
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n <component-mapper\n name=\"ListUtility\"\n [props]=\"{\n name$: lu_name$,\n icon$: lu_icon$,\n bLoading$: lu_bLoading$,\n count$: lu_count$,\n arActions$: lu_arActions$,\n arItems$: lu_arItems$,\n onViewAll$: lu_onViewAllFunction,\n menuIconOverrideAction$: removeFileFromList$\n }\"\n ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-file-selector\">\n <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>\n <div class=\"psdk-modal-link-entry\">\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-links-row\">\n <div class=\"psdk-links-two-column\">\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>Link title</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n </mat-form-field>\n </div>\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>URL</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"psdk-modal-link-add\">\n <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>\n </div>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n ></component-mapper>\n </div>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <div class=\"psdk-view-all-header\">\n <div>\n <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n </div>\n <div>\n <button mat-icon-button (click)=\"_closeViewAll()\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n </button>\n </div>\n </div>\n <div class=\"psdk-view-all-body\">\n <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#0009;position:fixed;z-index:999;top:0;left:0}.psdk-modal-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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(() => 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: "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: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
17572
17508
  }
17573
17509
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUtilityComponent, decorators: [{
17574
17510
  type: Component,
17575
- args: [{ selector: 'app-file-utility', imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n <component-mapper\n name=\"ListUtility\"\n [props]=\"{\n name$: lu_name$,\n icon$: lu_icon$,\n bLoading$: lu_bLoading$,\n count$: lu_count$,\n arActions$: lu_arActions$,\n arItems$: lu_arItems$,\n onViewAll$: lu_onViewAllFunction,\n menuIconOverrideAction$: removeFileFromList$\n }\"\n ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-file-selector\">\n <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>\n <div class=\"psdk-modal-link-entry\">\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-links-row\">\n <div class=\"psdk-links-two-column\">\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>Link title</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n </mat-form-field>\n </div>\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>URL</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"psdk-modal-link-add\">\n <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>\n </div>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n ></component-mapper>\n </div>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <div class=\"psdk-view-all-header\">\n <div>\n <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n </div>\n <div>\n <button mat-icon-button (click)=\"_closeViewAll()\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n </button>\n </div>\n </div>\n <div class=\"psdk-view-all-body\">\n <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#0009;position:fixed;z-index:999;top:0;left:0}.psdk-modal-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"] }]
17511
+ args: [{ selector: 'app-file-utility', imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div>\n <component-mapper\n name=\"ListUtility\"\n [props]=\"{\n name$: lu_name$,\n icon$: lu_icon$,\n bLoading$: lu_bLoading$,\n count$: lu_count$,\n arActions$: lu_arActions$,\n arItems$: lu_arItems$,\n onViewAll$: lu_onViewAllFunction,\n menuIconOverrideAction$: removeFileFromList$\n }\"\n ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-file-selector\">\n <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>\n <div class=\"psdk-modal-link-entry\">\n <div class=\"psdk-modal-body\">\n <div class=\"psdk-modal-links-row\">\n <div class=\"psdk-links-two-column\">\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>Link title</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n </mat-form-field>\n </div>\n <div class=\"psdk-modal-link-data\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-label>URL</mat-label>\n <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"psdk-modal-link-add\">\n <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>\n </div>\n </div>\n\n <component-mapper\n name=\"SummaryList\"\n [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n ></component-mapper>\n </div>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-top\">\n <div class=\"psdk-view-all-header\">\n <div>\n <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n </div>\n <div>\n <button mat-icon-button (click)=\"_closeViewAll()\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n </button>\n </div>\n </div>\n <div class=\"psdk-view-all-body\">\n <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#0009;position:fixed;z-index:999;top:0;left:0}.psdk-modal-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"] }]
17576
17512
  }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }, { type: i0.NgZone }], propDecorators: { pConn$: [{
17577
17513
  type: Input
17578
17514
  }] } });
@@ -18145,31 +18081,55 @@ class QuickCreateComponent {
18145
18081
  this.heading$ = this.configProps$.heading;
18146
18082
  this.showCaseIcons$ = this.configProps$.showCaseIcons;
18147
18083
  this.classFilter$ = this.configProps$.classFilter;
18084
+ const cases = [];
18085
+ const defaultCases = [];
18148
18086
  const envInfo = PCore.getEnvironmentInfo();
18149
- if (this.classFilter$ &&
18150
- envInfo.environmentInfoObject &&
18151
- envInfo.environmentInfoObject.pyCaseTypeList &&
18152
- envInfo.environmentInfoObject.pyCaseTypeList.length > 0) {
18153
- this.classFilter$.forEach(item => {
18154
- let icon = this.utils.getImageSrc('polaris-solid', this.utils.getSDKStaticContentUrl());
18155
- let label = '';
18156
- envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
18157
- if (casetype.pyWorkTypeImplementationClassName === item) {
18158
- icon = casetype.pxIcon && this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl());
18159
- label = casetype.pyWorkTypeName ?? '';
18160
- }
18161
- });
18162
- if (label !== '') {
18163
- this.cases$.push({
18164
- label,
18087
+ if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
18088
+ envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
18089
+ if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
18090
+ defaultCases.push({
18091
+ classname: casetype.pyWorkTypeImplementationClassName,
18165
18092
  onClick: () => {
18166
- this.createCase(item);
18093
+ this.createCase(casetype.pyWorkTypeImplementationClassName);
18167
18094
  },
18168
- ...(this.showCaseIcons$ && { icon })
18095
+ ...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
18096
+ label: casetype.pyWorkTypeName
18169
18097
  });
18170
18098
  }
18171
18099
  });
18172
18100
  }
18101
+ else {
18102
+ const pConnectInAppContext = PCore.createPConnect({
18103
+ options: { context: PCore.getConstants().APP.APP }
18104
+ }).getPConnect();
18105
+ const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal');
18106
+ pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
18107
+ if (casetype.pyClassName && casetype.pyLabel) {
18108
+ defaultCases.push({
18109
+ classname: casetype.pyClassName,
18110
+ onClick: () => {
18111
+ this.createCase(casetype.pyClassName);
18112
+ },
18113
+ ...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
18114
+ label: casetype.pyLabel
18115
+ });
18116
+ }
18117
+ });
18118
+ }
18119
+ /* If classFilter is not empty - filter from the list of defaultCases */
18120
+ if (this.classFilter$?.length > 0) {
18121
+ this.classFilter$.forEach(item => {
18122
+ defaultCases.forEach(casetype => {
18123
+ if (casetype.classname === item) {
18124
+ cases.push(casetype);
18125
+ }
18126
+ });
18127
+ });
18128
+ this.cases$ = cases;
18129
+ }
18130
+ else {
18131
+ this.cases$ = defaultCases;
18132
+ }
18173
18133
  }
18174
18134
  ngOnInit() {
18175
18135
  // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
@@ -18407,11 +18367,11 @@ class TodoComponent {
18407
18367
  });
18408
18368
  }
18409
18369
  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 }); }
18410
- 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"] }] }); }
18370
+ 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"] }] }); }
18411
18371
  }
18412
18372
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TodoComponent, decorators: [{
18413
18373
  type: Component,
18414
- 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"] }]
18374
+ 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"] }]
18415
18375
  }], ctorParameters: () => [{ type: ProgressSpinnerService }, { type: ErrorMessagesService }, { type: Utils }], propDecorators: { pConn$: [{
18416
18376
  type: Input
18417
18377
  }], caseInfoID$: [{
@@ -18487,7 +18447,7 @@ class AlertComponent {
18487
18447
  this.onClose.emit({ Page: 'Page', target: 'target', type: 'type' });
18488
18448
  }
18489
18449
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18490
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { message: "message", severity: "severity", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div\n class=\"psdk-alert\"\n [ngClass]=\"{\n 'psdk-alert-error': severity === 'error',\n 'psdk-grid-warning': severity === 'warning',\n 'psdk-grid-success': severity === 'success',\n 'psdk-grid-info': severity === 'info'\n }\"\n>\n <div class=\"psdk-alert-icon\">\n <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n </div>\n <div>{{ message }}</div>\n <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:var(--mat-sys-error);border:1px solid var(--mat-sys-error)}.psdk-alert-error .mat-icon{color:var(--mat-sys-error)}.psdk-grid-warning{color:var(--app-alert-warning-color);border:1px solid var(--app-alert-warning-border-color)}.psdk-grid-warning .mat-icon{color:var(--app-alert-warning-border-color)}.psdk-grid-success{color:var(--app-alert-success-color);border:1px solid var(--app-alert-success-border-color)}.psdk-grid-success .mat-icon{color:var(--app-alert-success-border-color)}.psdk-grid-info{color:var(--app-alert-info-color);border:1px solid var(--app-alert-info-border-color)}.psdk-grid-info .mat-icon{color:var(--app-alert-info-border-color)}.close-button{background:none;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
18450
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { message: "message", severity: "severity", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div\n class=\"psdk-alert\"\n [ngClass]=\"{\n 'psdk-alert-error': severity === 'error',\n 'psdk-grid-warning': severity === 'warning',\n 'psdk-grid-success': severity === 'success',\n 'psdk-grid-info': severity === 'info'\n }\"\n>\n <div class=\"psdk-alert-icon\">\n <mat-icon>{{ getMatIcon(severity) }}</mat-icon>\n </div>\n <div>{{ message }}</div>\n <div *ngIf=\"!hideClose\" style=\"margin-left: auto\">\n <button class=\"close-button\" mat-icon-button (click)=\"onCloseClick()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n</div>\n", styles: [".psdk-alert{border:1px solid;display:flex;align-items:center;border-radius:4px;padding:10px;margin:5px 0}.psdk-alert-icon{display:flex;align-items:center;margin-right:10px}.psdk-alert-error{color:var(--mat-sys-error);border:1px solid var(--mat-sys-error)}.psdk-alert-error .mat-icon{color:var(--mat-sys-error)}.psdk-grid-warning{color:var(--app-alert-warning-color);border:1px solid var(--app-alert-warning-border-color)}.psdk-grid-warning .mat-icon{color:var(--app-alert-warning-border-color)}.psdk-grid-success{color:var(--app-alert-success-color);border:1px solid var(--app-alert-success-border-color)}.psdk-grid-success .mat-icon{color:var(--app-alert-success-border-color)}.psdk-grid-info{color:var(--app-alert-info-color);border:1px solid var(--app-alert-info-border-color)}.psdk-grid-info .mat-icon{color:var(--app-alert-info-border-color)}.close-button{background:none;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
18491
18451
  }
18492
18452
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertComponent, decorators: [{
18493
18453
  type: Component,
@@ -18582,7 +18542,7 @@ class FieldGroupComponent {
18582
18542
  this.collapsed = !this.collapsed;
18583
18543
  }
18584
18544
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18585
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldGroupComponent, isStandalone: true, selector: "app-field-group", inputs: { name: "name", collapsible: "collapsible", instructions: "instructions", childrenTemplate: "childrenTemplate" }, ngImport: i0, template: "<div class=\"field-group-container\">\n <div *ngIf=\"name\" class=\"field-group-heading\">\n <span *ngIf=\"collapsible; else no_collapse\" id=\"field-group-header\" class=\"field-group-header\" (click)=\"headerClickHandler()\">\n <mat-icon *ngIf=\"collapsed; else down_arrow\" aria-hidden=\"false\" aria-label=\"Arrow Right\" fontIcon=\"keyboard_arrow_right\"></mat-icon>\n <ng-template #down_arrow>\n <mat-icon aria-hidden=\"false\" aria-label=\"Arrow Down\" fontIcon=\"keyboard_arrow_down\"></mat-icon>\n </ng-template>\n <b>{{ name }}</b>\n </span>\n <ng-template #no_collapse>\n <span>{{ name }}</span>\n </ng-template>\n </div>\n\n <div *ngIf=\"instructions && instructions !== 'none'\" class=\"field-group-instructions\">\n <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n </div>\n <div *ngIf=\"!collapsed\" class=\"field-group-content\">\n <ng-container [ngTemplateOutlet]=\"childrenTemplate\"></ng-container>\n </div>\n</div>\n", styles: [".field-group-container .field-group-heading{padding-top:8px;padding-bottom:8px;font-weight:700}.field-group-container .field-group-heading .field-group-header{gap:5px;display:flex;align-items:center;cursor:pointer}.field-group-container .field-group-instructions{padding:5px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
18545
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldGroupComponent, isStandalone: true, selector: "app-field-group", inputs: { name: "name", collapsible: "collapsible", instructions: "instructions", childrenTemplate: "childrenTemplate" }, ngImport: i0, template: "<div class=\"field-group-container\">\n <div *ngIf=\"name\" class=\"field-group-heading\">\n <span *ngIf=\"collapsible; else no_collapse\" id=\"field-group-header\" class=\"field-group-header\" (click)=\"headerClickHandler()\">\n <mat-icon *ngIf=\"collapsed; else down_arrow\" aria-hidden=\"false\" aria-label=\"Arrow Right\" fontIcon=\"keyboard_arrow_right\"></mat-icon>\n <ng-template #down_arrow>\n <mat-icon aria-hidden=\"false\" aria-label=\"Arrow Down\" fontIcon=\"keyboard_arrow_down\"></mat-icon>\n </ng-template>\n <b>{{ name }}</b>\n </span>\n <ng-template #no_collapse>\n <span>{{ name }}</span>\n </ng-template>\n </div>\n\n <div *ngIf=\"instructions && instructions !== 'none'\" class=\"field-group-instructions\">\n <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n </div>\n <div *ngIf=\"!collapsed\" class=\"field-group-content\">\n <ng-container [ngTemplateOutlet]=\"childrenTemplate\"></ng-container>\n </div>\n</div>\n", styles: [".field-group-container .field-group-heading{padding-top:8px;padding-bottom:8px;font-weight:700}.field-group-container .field-group-heading .field-group-header{gap:5px;display:flex;align-items:center;cursor:pointer}.field-group-container .field-group-instructions{padding:5px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
18586
18546
  }
18587
18547
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldGroupComponent, decorators: [{
18588
18548
  type: Component,
@@ -19096,11 +19056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
19096
19056
  // import { Button } from '@angular/material'
19097
19057
  class WssQuickCreateComponent {
19098
19058
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WssQuickCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
19099
- 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"] }] }); }
19059
+ 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"] }] }); }
19100
19060
  }
19101
19061
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WssQuickCreateComponent, decorators: [{
19102
19062
  type: Component,
19103
- 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"] }]
19063
+ 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"] }]
19104
19064
  }], propDecorators: { actions$: [{
19105
19065
  type: Input
19106
19066
  }], heading$: [{
@@ -19607,7 +19567,7 @@ class RepeatingStructuresComponent {
19607
19567
  return fields.map((field) => field.name);
19608
19568
  }
19609
19569
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeatingStructuresComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
19610
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n <mat-form-field class=\"psdk-search\">\n <mat-label\n ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n Search</mat-label\n >\n <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <table mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n </table>\n\n <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatTableModule }, { kind: "component", type: i5$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
19570
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n <mat-form-field class=\"psdk-search\">\n <mat-label\n ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n Search</mat-label\n >\n <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <table mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n </table>\n\n <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatTableModule }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
19611
19571
  }
19612
19572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeatingStructuresComponent, decorators: [{
19613
19573
  type: Component,