@pega/angular-sdk-components 0.23.6 → 0.24.1
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.
- package/esm2022/lib/_bridge/angular-pconnect.mjs +14 -2
- package/esm2022/lib/_bridge/helpers/sdk-pega-component-map.mjs +3 -1
- package/esm2022/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.mjs +6 -3
- package/esm2022/lib/_components/designSystemExtension/operator/operator.component.mjs +9 -5
- package/esm2022/lib/_components/field/auto-complete/auto-complete.component.mjs +2 -2
- package/esm2022/lib/_components/field/check-box/check-box.component.mjs +107 -42
- package/esm2022/lib/_components/field/group/group.component.mjs +6 -3
- package/esm2022/lib/_components/field/multiselect/multiselect.component.mjs +311 -0
- package/esm2022/lib/_components/field/multiselect/utils.mjs +187 -0
- package/esm2022/lib/_components/field/rich-text/rich-text.component.mjs +3 -3
- package/esm2022/lib/_components/field/time/time.component.mjs +5 -3
- package/esm2022/lib/_components/field/url/url.component.mjs +5 -3
- package/esm2022/lib/_components/infra/Containers/view-container/view-container.component.mjs +6 -6
- package/esm2022/lib/_components/infra/multi-step/multi-step.component.mjs +3 -3
- package/esm2022/lib/_components/infra/navbar/navbar.component.mjs +6 -3
- package/esm2022/lib/_components/template/case-summary/case-summary.component.mjs +33 -4
- package/esm2022/lib/_components/template/field-value-list/field-value-list.component.mjs +8 -3
- package/esm2022/lib/_components/template/list-view/list-view.component.mjs +23 -25
- package/esm2022/lib/_components/template/simple-table-manual/helpers.mjs +2 -2
- package/esm2022/lib/_components/template/simple-table-manual/simple-table-manual.component.mjs +41 -12
- package/esm2022/lib/_components/template/wss-nav-bar/wss-nav-bar.component.mjs +5 -3
- package/esm2022/lib/_components/widget/attachment/attachment.component.mjs +7 -3
- package/esm2022/lib/_helpers/instructions-utils.mjs +36 -0
- package/esm2022/lib/_helpers/utils.mjs +2 -2
- package/fesm2022/pega-angular-sdk-components.mjs +778 -112
- package/fesm2022/pega-angular-sdk-components.mjs.map +1 -1
- package/lib/_bridge/angular-pconnect.d.ts +2 -0
- package/lib/_bridge/helpers/sdk-pega-component-map.d.ts +2 -0
- package/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.d.ts +2 -0
- package/lib/_components/designSystemExtension/operator/operator.component.d.ts +2 -1
- package/lib/_components/field/check-box/check-box.component.d.ts +18 -0
- package/lib/_components/field/multiselect/multiselect.component.d.ts +64 -0
- package/lib/_components/field/multiselect/utils.d.ts +8 -0
- package/lib/_components/field/time/time.component.d.ts +1 -0
- package/lib/_components/field/url/url.component.d.ts +1 -0
- package/lib/_components/infra/navbar/navbar.component.d.ts +2 -0
- package/lib/_components/template/case-summary/case-summary.component.d.ts +2 -0
- package/lib/_components/template/field-value-list/field-value-list.component.d.ts +2 -1
- package/lib/_components/template/list-view/list-view.component.d.ts +0 -2
- package/lib/_components/template/simple-table-manual/simple-table-manual.component.d.ts +2 -0
- package/lib/_components/template/wss-nav-bar/wss-nav-bar.component.d.ts +2 -0
- package/lib/_components/widget/attachment/attachment.component.d.ts +4 -0
- package/lib/_helpers/instructions-utils.d.ts +4 -0
- package/lib/doc/KeyReleaseUpdates.md +1 -1
- package/package.json +1 -1
|
@@ -66,6 +66,9 @@ import * as i6$4 from '@angular/material/table';
|
|
|
66
66
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
67
67
|
import * as i8$2 from '@angular/cdk/drag-drop';
|
|
68
68
|
import { moveItemInArray, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
69
|
+
import * as i11 from '@angular/material/chips';
|
|
70
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
71
|
+
import cloneDeep from 'lodash/cloneDeep';
|
|
69
72
|
import download from 'downloadjs';
|
|
70
73
|
import * as i3$2 from '@angular/material/badge';
|
|
71
74
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
@@ -407,7 +410,7 @@ class Utils {
|
|
|
407
410
|
}
|
|
408
411
|
handleDataPageList(configProps, dataObject) {
|
|
409
412
|
const dataPage = configProps.datasource;
|
|
410
|
-
if (dataObject[dataPage]) {
|
|
413
|
+
if (dataObject && dataObject[dataPage]) {
|
|
411
414
|
alert('need to handle data page');
|
|
412
415
|
return [];
|
|
413
416
|
}
|
|
@@ -958,13 +961,25 @@ class AngularPConnectService {
|
|
|
958
961
|
}
|
|
959
962
|
else {
|
|
960
963
|
returnObject.compID = theCompID;
|
|
961
|
-
returnObject.unsubscribeFn =
|
|
964
|
+
returnObject.unsubscribeFn = () => {
|
|
965
|
+
this.removeFormField(inComp);
|
|
966
|
+
theUnsub();
|
|
967
|
+
};
|
|
962
968
|
}
|
|
963
969
|
// initialize this components entry in the componentPropsArr
|
|
964
970
|
this.componentPropsArr[theCompID] = {};
|
|
971
|
+
this.addFormField(inComp);
|
|
965
972
|
// return object with compID and unsubscribe...
|
|
966
973
|
return returnObject;
|
|
967
974
|
}
|
|
975
|
+
addFormField(inComp) {
|
|
976
|
+
inComp.pConn$?.addFormField();
|
|
977
|
+
}
|
|
978
|
+
removeFormField(inComp) {
|
|
979
|
+
if (inComp.pConn$?.removeFormField) {
|
|
980
|
+
inComp.pConn$?.removeFormField();
|
|
981
|
+
}
|
|
982
|
+
}
|
|
968
983
|
// Returns true if the component's entry in ___componentPropsArr___ is
|
|
969
984
|
// the same as the inCompProps passed in.
|
|
970
985
|
// As a side effect, update the component's entry in componentPropsArr
|
|
@@ -2829,11 +2844,11 @@ class MultiStepComponent {
|
|
|
2829
2844
|
return index < this.arNavigationSteps$.length - 1;
|
|
2830
2845
|
}
|
|
2831
2846
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiStepComponent, isStandalone: true, selector: "app-multi-step", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", bIsVertical$: "bIsVertical$", arCurrentStepIndicies$: "arCurrentStepIndicies$", arNavigationSteps$: "arNavigationSteps$" }, outputs: { actionButtonClick: "actionButtonClick" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"bShow$\">\n <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n <div class=\"psdk-vertical-step-header\">\n <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-vertical-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n {{ mainStep.name }}\n </div>\n </div>\n <div class=\"{{ _getVBodyClass(i) }}\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n <div class=\"psdk-horizontal-stepper-header-container\">\n <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n <div class=\"psdk-horizontal-step-header\">\n <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-text-label\">\n {{ mainStep.name }}\n </div>\n </div>\n </div>\n <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n </ng-container>\n </div>\n <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
2847
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiStepComponent, isStandalone: true, selector: "app-multi-step", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", bIsVertical$: "bIsVertical$", arCurrentStepIndicies$: "arCurrentStepIndicies$", arNavigationSteps$: "arNavigationSteps$" }, outputs: { actionButtonClick: "actionButtonClick" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"bShow$\">\n <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n <div class=\"psdk-vertical-step-header\">\n <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-vertical-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n {{ mainStep.name }}\n </div>\n </div>\n <div class=\"{{ _getVBodyClass(i) }}\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n <div class=\"psdk-horizontal-stepper-header-container\">\n <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n <div class=\"psdk-horizontal-step-header\">\n <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-text-label\">\n {{ mainStep.name }}\n </div>\n </div>\n </div>\n <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n </ng-container>\n </div>\n <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;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(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
2833
2848
|
}
|
|
2834
2849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, decorators: [{
|
|
2835
2850
|
type: Component,
|
|
2836
|
-
args: [{ selector: 'app-multi-step', providers: [Utils], standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"bShow$\">\n <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n <div class=\"psdk-vertical-step-header\">\n <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-vertical-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n {{ mainStep.name }}\n </div>\n </div>\n <div class=\"{{ _getVBodyClass(i) }}\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n <div class=\"psdk-horizontal-stepper-header-container\">\n <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n <div class=\"psdk-horizontal-step-header\">\n <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-text-label\">\n {{ mainStep.name }}\n </div>\n </div>\n </div>\n <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n </ng-container>\n </div>\n <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
|
|
2851
|
+
args: [{ selector: 'app-multi-step', providers: [Utils], standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"bShow$\">\n <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n <div class=\"psdk-vertical-step-header\">\n <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-vertical-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n {{ mainStep.name }}\n </div>\n </div>\n <div class=\"{{ _getVBodyClass(i) }}\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n <div class=\"psdk-horizontal-stepper-header-container\">\n <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n <div class=\"psdk-horizontal-step-header\">\n <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-icon-content\">\n <span>{{ i + 1 }}</span>\n </div>\n </div>\n <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n <div class=\"psdk-horizontal-step-text-label\">\n {{ mainStep.name }}\n </div>\n </div>\n </div>\n <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n </ng-container>\n </div>\n <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n <ng-container *ngIf=\"mainStep?.steps\">\n <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n <div style=\"display: inline-flex\">\n <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n </div>\n <div *ngIf=\"subStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </div>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n <component-mapper\n name=\"AssignmentCard\"\n [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n ></component-mapper>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;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(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
|
|
2837
2852
|
}], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { pConn$: [{
|
|
2838
2853
|
type: Input
|
|
2839
2854
|
}], formGroup$: [{
|
|
@@ -2867,6 +2882,7 @@ class NavbarComponent {
|
|
|
2867
2882
|
this.portalApp$ = '';
|
|
2868
2883
|
this.showAppName$ = false;
|
|
2869
2884
|
this.localeCategory = 'AppShell';
|
|
2885
|
+
this.localeUtils = PCore.getLocaleUtils();
|
|
2870
2886
|
}
|
|
2871
2887
|
ngOnInit() {
|
|
2872
2888
|
// First thing in initialization is registering and subscribing to the AngularPConnect service
|
|
@@ -2914,6 +2930,8 @@ class NavbarComponent {
|
|
|
2914
2930
|
this.navPages$.forEach(page => {
|
|
2915
2931
|
page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
|
|
2916
2932
|
});
|
|
2933
|
+
// @ts-ignore - second parameter pageReference for getValue method should be optional
|
|
2934
|
+
this.localeReference = this.pConn$.getValue('.pyLocaleReference');
|
|
2917
2935
|
this.actionsAPI = this.pConn$.getActionsApi();
|
|
2918
2936
|
this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
|
|
2919
2937
|
this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
|
|
@@ -2958,11 +2976,11 @@ class NavbarComponent {
|
|
|
2958
2976
|
});
|
|
2959
2977
|
}
|
|
2960
2978
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n <div class=\"psdk-nav-header\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n <span class=\"psdk-nav-button-span\">Create</span>\n </div>\n </mat-list-item>\n <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n <mat-list-item\n id=\"case-list-item\"\n *ngFor=\"let caseType of caseTypes$\"\n (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n >\n <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n </mat-list-item>\n </mat-list>\n </mat-list>\n </div>\n <div style=\"height: 100%\">\n <mat-list *ngFor=\"let page of navPages$\">\n <mat-list-item (click)=\"navPanelButtonClick(page)\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n <span class=\"psdk-nav-button-span\">{{
|
|
2979
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n <div class=\"psdk-nav-header\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n <span class=\"psdk-nav-button-span\">Create</span>\n </div>\n </mat-list-item>\n <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n <mat-list-item\n id=\"case-list-item\"\n *ngFor=\"let caseType of caseTypes$\"\n (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n >\n <span class=\"psdk-nav-button-span\">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>\n </mat-list-item>\n </mat-list>\n </mat-list>\n </div>\n <div style=\"height: 100%\">\n <mat-list *ngFor=\"let page of navPages$\">\n <mat-list-item (click)=\"navPanelButtonClick(page)\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n <span class=\"psdk-nav-button-span\">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>\n </div>\n </mat-list-item>\n </mat-list>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n </mat-menu>\n </mat-list>\n </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
2962
2980
|
}
|
|
2963
2981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
2964
2982
|
type: Component,
|
|
2965
|
-
args: [{ selector: 'app-navbar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule], template: "<div class=\"psdk-appshell-nav\">\n <div class=\"psdk-nav-header\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n <span class=\"psdk-nav-button-span\">Create</span>\n </div>\n </mat-list-item>\n <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n <mat-list-item\n id=\"case-list-item\"\n *ngFor=\"let caseType of caseTypes$\"\n (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n >\n <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n </mat-list-item>\n </mat-list>\n </mat-list>\n </div>\n <div style=\"height: 100%\">\n <mat-list *ngFor=\"let page of navPages$\">\n <mat-list-item (click)=\"navPanelButtonClick(page)\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n <span class=\"psdk-nav-button-span\">{{
|
|
2983
|
+
args: [{ selector: 'app-navbar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule], template: "<div class=\"psdk-appshell-nav\">\n <div class=\"psdk-nav-header\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n <span class=\"psdk-nav-button-span\">Create</span>\n </div>\n </mat-list-item>\n <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n <mat-list-item\n id=\"case-list-item\"\n *ngFor=\"let caseType of caseTypes$\"\n (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n >\n <span class=\"psdk-nav-button-span\">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>\n </mat-list-item>\n </mat-list>\n </mat-list>\n </div>\n <div style=\"height: 100%\">\n <mat-list *ngFor=\"let page of navPages$\">\n <mat-list-item (click)=\"navPanelButtonClick(page)\">\n <div class=\"flex-box\">\n <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n <span class=\"psdk-nav-button-span\">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>\n </div>\n </mat-list-item>\n </mat-list>\n </div>\n <div class=\"psdk-nav-divider\"></div>\n <div>\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n </mat-menu>\n </mat-list>\n </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"] }]
|
|
2966
2984
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
2967
2985
|
type: Input
|
|
2968
2986
|
}], appName$: [{
|
|
@@ -3675,14 +3693,14 @@ class ViewContainerComponent {
|
|
|
3675
3693
|
/* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
|
|
3676
3694
|
PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
|
|
3677
3695
|
}
|
|
3678
|
-
|
|
3679
|
-
if (sessionStorage.getItem('hasViewContainer') == 'false') {
|
|
3680
|
-
// @ts-ignore - Property 'getMetadata' is private and only accessible within class
|
|
3681
|
-
if (this.pConn$.getMetadata().children) {
|
|
3696
|
+
if (!PCore.checkIfSemanticURL()) {
|
|
3682
3697
|
containerMgr.addContainerItem(this.dispatchObject);
|
|
3683
3698
|
}
|
|
3684
|
-
sessionStorage.setItem('hasViewContainer', 'true');
|
|
3685
3699
|
}
|
|
3700
|
+
// if (sessionStorage.getItem('hasViewContainer') == 'false') {
|
|
3701
|
+
// // @ts-ignore - Property 'getMetadata' is private and only accessible within class
|
|
3702
|
+
// sessionStorage.setItem('hasViewContainer', 'true');
|
|
3703
|
+
// }
|
|
3686
3704
|
// cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
|
|
3687
3705
|
// however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
|
|
3688
3706
|
// without checking to update here in init, will initialize and this is correct
|
|
@@ -4009,7 +4027,7 @@ class AutoCompleteComponent {
|
|
|
4009
4027
|
}
|
|
4010
4028
|
_filter(value) {
|
|
4011
4029
|
const filterVal = (value || this.filterValue).toLowerCase();
|
|
4012
|
-
return this.options$?.filter(option => option.value
|
|
4030
|
+
return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
|
|
4013
4031
|
}
|
|
4014
4032
|
// Callback passed when subscribing to store change
|
|
4015
4033
|
async onStateChange() {
|
|
@@ -4312,6 +4330,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4312
4330
|
type: Output
|
|
4313
4331
|
}] } });
|
|
4314
4332
|
|
|
4333
|
+
function isSelfReferencedProperty(param, referenceProp) {
|
|
4334
|
+
const [, parentPropName] = param.split('.');
|
|
4335
|
+
const referencePropParent = referenceProp?.split('.').pop();
|
|
4336
|
+
return parentPropName === referencePropParent;
|
|
4337
|
+
}
|
|
4338
|
+
function updateNewInstructions(c11nEnv, selectionList) {
|
|
4339
|
+
const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(selectionList) || {};
|
|
4340
|
+
const compositeKeys = [];
|
|
4341
|
+
Object.values(parameters).forEach((param) => {
|
|
4342
|
+
if (isSelfReferencedProperty(param, selectionList))
|
|
4343
|
+
compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
|
|
4344
|
+
});
|
|
4345
|
+
c11nEnv.getListActions().initDefaultPageInstructions(selectionList, compositeKeys);
|
|
4346
|
+
}
|
|
4347
|
+
function insertInstruction(c11nEnv, selectionList, selectionKey, primaryField, item) {
|
|
4348
|
+
const { id, primary } = item;
|
|
4349
|
+
const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
|
|
4350
|
+
const displayProperty = primaryField.startsWith('.') ? primaryField.substring(1) : primaryField;
|
|
4351
|
+
const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
|
|
4352
|
+
const startIndex = rows.length;
|
|
4353
|
+
const content = {
|
|
4354
|
+
[actualProperty]: id,
|
|
4355
|
+
[displayProperty]: primary,
|
|
4356
|
+
nonFormProperties: actualProperty !== displayProperty ? [displayProperty] : []
|
|
4357
|
+
};
|
|
4358
|
+
c11nEnv.getListActions().insert(content, startIndex);
|
|
4359
|
+
}
|
|
4360
|
+
function deleteInstruction(c11nEnv, selectionList, selectionKey, item) {
|
|
4361
|
+
const { id } = item;
|
|
4362
|
+
const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
|
|
4363
|
+
const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
|
|
4364
|
+
const index = rows.findIndex(row => row[actualProperty] === id);
|
|
4365
|
+
c11nEnv.getListActions().deleteEntry(index);
|
|
4366
|
+
}
|
|
4367
|
+
|
|
4315
4368
|
class CheckBoxComponent {
|
|
4316
4369
|
constructor(angularPConnect, cdRef, utils) {
|
|
4317
4370
|
this.angularPConnect = angularPConnect;
|
|
@@ -4332,6 +4385,7 @@ class CheckBoxComponent {
|
|
|
4332
4385
|
this.displayMode$ = '';
|
|
4333
4386
|
this.bHasForm$ = true;
|
|
4334
4387
|
this.componentReference = '';
|
|
4388
|
+
this.listOfCheckboxes = [];
|
|
4335
4389
|
this.fieldControl = new FormControl('', null);
|
|
4336
4390
|
}
|
|
4337
4391
|
ngOnInit() {
|
|
@@ -4342,6 +4396,10 @@ class CheckBoxComponent {
|
|
|
4342
4396
|
// call updateSelf when initializing
|
|
4343
4397
|
// this.updateSelf();
|
|
4344
4398
|
this.checkAndUpdate();
|
|
4399
|
+
if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
|
|
4400
|
+
this.pConn$.setReferenceList(this.selectionList);
|
|
4401
|
+
updateNewInstructions(this.pConn$, this.selectionList);
|
|
4402
|
+
}
|
|
4345
4403
|
if (this.formGroup$) {
|
|
4346
4404
|
// add control to formGroup
|
|
4347
4405
|
this.formGroup$.addControl(this.controlName$, this.fieldControl);
|
|
@@ -4378,58 +4436,113 @@ class CheckBoxComponent {
|
|
|
4378
4436
|
updateSelf() {
|
|
4379
4437
|
// moved this from ngOnInit() and call this from there instead...
|
|
4380
4438
|
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
|
|
4381
|
-
if (this.configProps$.value != undefined) {
|
|
4382
|
-
this.value$ = this.configProps$.value;
|
|
4383
|
-
}
|
|
4384
4439
|
this.testId = this.configProps$.testId;
|
|
4385
|
-
this.label$ = this.configProps$.label;
|
|
4386
4440
|
this.displayMode$ = this.configProps$.displayMode;
|
|
4387
|
-
this.
|
|
4388
|
-
this.helperText = this.configProps$.helperText;
|
|
4389
|
-
this.trueLabel$ = this.configProps$.trueLabel;
|
|
4390
|
-
this.falseLabel$ = this.configProps$.falseLabel;
|
|
4391
|
-
// timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
|
|
4392
|
-
setTimeout(() => {
|
|
4393
|
-
if (this.configProps$.required != null) {
|
|
4394
|
-
this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
|
|
4395
|
-
}
|
|
4396
|
-
this.cdRef.detectChanges();
|
|
4397
|
-
});
|
|
4398
|
-
if (this.configProps$.visibility != null) {
|
|
4399
|
-
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
|
|
4400
|
-
}
|
|
4401
|
-
// disabled
|
|
4402
|
-
if (this.configProps$.disabled != undefined) {
|
|
4403
|
-
this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
|
|
4404
|
-
}
|
|
4405
|
-
if (this.bDisabled$) {
|
|
4406
|
-
this.fieldControl.disable();
|
|
4407
|
-
}
|
|
4408
|
-
else {
|
|
4409
|
-
this.fieldControl.enable();
|
|
4410
|
-
}
|
|
4411
|
-
if (this.configProps$.readOnly != null) {
|
|
4412
|
-
this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
|
|
4413
|
-
}
|
|
4414
|
-
this.componentReference = this.pConn$.getStateProps().value;
|
|
4441
|
+
this.label$ = this.configProps$.label;
|
|
4415
4442
|
if (this.label$ != '') {
|
|
4416
4443
|
this.showLabel$ = true;
|
|
4417
4444
|
}
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4445
|
+
this.actionsApi = this.pConn$.getActionsApi();
|
|
4446
|
+
this.propName = this.pConn$.getStateProps().value;
|
|
4447
|
+
// multi case
|
|
4448
|
+
this.selectionMode = this.configProps$.selectionMode;
|
|
4449
|
+
if (this.selectionMode === 'multi') {
|
|
4450
|
+
this.referenceList = this.configProps$.referenceList;
|
|
4451
|
+
this.selectionList = this.configProps$.selectionList;
|
|
4452
|
+
this.selectedvalues = this.configProps$.readonlyContextList;
|
|
4453
|
+
this.primaryField = this.configProps$.primaryField;
|
|
4454
|
+
this.datasource = this.configProps$.datasource;
|
|
4455
|
+
this.selectionKey = this.configProps$.selectionKey;
|
|
4456
|
+
const listSourceItems = this.datasource?.source ?? [];
|
|
4457
|
+
const dataField = this.selectionKey?.split?.('.')[1];
|
|
4458
|
+
const listToDisplay = [];
|
|
4459
|
+
listSourceItems.forEach(element => {
|
|
4460
|
+
element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
|
|
4461
|
+
listToDisplay.push(element);
|
|
4462
|
+
});
|
|
4463
|
+
this.listOfCheckboxes = listToDisplay;
|
|
4421
4464
|
}
|
|
4422
4465
|
else {
|
|
4423
|
-
this.
|
|
4466
|
+
if (this.configProps$.value != undefined) {
|
|
4467
|
+
this.value$ = this.configProps$.value;
|
|
4468
|
+
}
|
|
4469
|
+
this.caption$ = this.configProps$.caption;
|
|
4470
|
+
this.helperText = this.configProps$.helperText;
|
|
4471
|
+
this.trueLabel$ = this.configProps$.trueLabel;
|
|
4472
|
+
this.falseLabel$ = this.configProps$.falseLabel;
|
|
4473
|
+
// timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
|
|
4474
|
+
setTimeout(() => {
|
|
4475
|
+
if (this.configProps$.required != null) {
|
|
4476
|
+
this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
|
|
4477
|
+
}
|
|
4478
|
+
this.cdRef.detectChanges();
|
|
4479
|
+
});
|
|
4480
|
+
if (this.configProps$.visibility != null) {
|
|
4481
|
+
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
|
|
4482
|
+
}
|
|
4483
|
+
// disabled
|
|
4484
|
+
if (this.configProps$.disabled != undefined) {
|
|
4485
|
+
this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
|
|
4486
|
+
}
|
|
4487
|
+
if (this.bDisabled$) {
|
|
4488
|
+
this.fieldControl.disable();
|
|
4489
|
+
}
|
|
4490
|
+
else {
|
|
4491
|
+
this.fieldControl.enable();
|
|
4492
|
+
}
|
|
4493
|
+
if (this.configProps$.readOnly != null) {
|
|
4494
|
+
this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
|
|
4495
|
+
this.fieldControl.disable();
|
|
4496
|
+
}
|
|
4497
|
+
this.componentReference = this.pConn$.getStateProps().value;
|
|
4498
|
+
// eslint-disable-next-line sonarjs/no-redundant-boolean
|
|
4499
|
+
if (this.value$ === 'true' || this.value$ == true) {
|
|
4500
|
+
this.isChecked$ = true;
|
|
4501
|
+
}
|
|
4502
|
+
else {
|
|
4503
|
+
this.isChecked$ = false;
|
|
4504
|
+
}
|
|
4505
|
+
// trigger display of error message with field control
|
|
4506
|
+
if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
|
|
4507
|
+
const timer = interval(100).subscribe(() => {
|
|
4508
|
+
this.fieldControl.setErrors({ message: true });
|
|
4509
|
+
this.fieldControl.markAsTouched();
|
|
4510
|
+
timer.unsubscribe();
|
|
4511
|
+
});
|
|
4512
|
+
}
|
|
4424
4513
|
}
|
|
4425
4514
|
}
|
|
4426
4515
|
fieldOnChange(event) {
|
|
4427
4516
|
event.value = event.checked;
|
|
4428
|
-
this.
|
|
4517
|
+
handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
|
|
4429
4518
|
}
|
|
4430
4519
|
fieldOnBlur(event) {
|
|
4431
|
-
|
|
4432
|
-
|
|
4520
|
+
if (this.selectionMode === 'multi') {
|
|
4521
|
+
this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
|
|
4522
|
+
}
|
|
4523
|
+
else {
|
|
4524
|
+
event.value = event.checked;
|
|
4525
|
+
this.angularPConnectData.actions?.onBlur(this, event);
|
|
4526
|
+
}
|
|
4527
|
+
}
|
|
4528
|
+
handleChangeMultiMode(event, element) {
|
|
4529
|
+
if (!element.selected) {
|
|
4530
|
+
insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
|
|
4531
|
+
id: element.key,
|
|
4532
|
+
primary: element.text ?? element.value
|
|
4533
|
+
});
|
|
4534
|
+
}
|
|
4535
|
+
else {
|
|
4536
|
+
deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
|
|
4537
|
+
id: element.key,
|
|
4538
|
+
primary: element.text ?? element.value
|
|
4539
|
+
});
|
|
4540
|
+
}
|
|
4541
|
+
this.pConn$.clearErrorMessages({
|
|
4542
|
+
property: this.selectionList,
|
|
4543
|
+
category: '',
|
|
4544
|
+
context: ''
|
|
4545
|
+
});
|
|
4433
4546
|
}
|
|
4434
4547
|
getErrorMessage() {
|
|
4435
4548
|
let errMessage = '';
|
|
@@ -4447,11 +4560,11 @@ class CheckBoxComponent {
|
|
|
4447
4560
|
return errMessage;
|
|
4448
4561
|
}
|
|
4449
4562
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4450
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"
|
|
4563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n <span>\n <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n </span>\n </div>\n <div *ngIf=\"selectionMode === 'multi'; else single\">\n <mat-option *ngFor=\"let item of listOfCheckboxes\" (click)=\"handleChangeMultiMode($event, item)\">\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"item.selected\"\n [attr.data-test-id]=\"testId + ':' + item.value\"\n (change)=\"handleChangeMultiMode($event, item)\"\n (blur)=\"fieldOnBlur($event)\"\n >{{ item.text ?? item.value }}\n </mat-checkbox>\n </mat-option>\n </div>\n <ng-template #single>\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"isChecked$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n >{{ caption$ }}</mat-checkbox\n >\n <p *ngIf=\"helperText\">{{ helperText }}</p>\n </ng-template>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\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{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%;color:#0009}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}p{font-size:.75rem;color:#00000094}mat-checkbox{margin-left:-11px}.mat-mdc-option{margin-left:-16px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
4451
4564
|
}
|
|
4452
4565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
4453
4566
|
type: Component,
|
|
4454
|
-
args: [{ selector: 'app-check-box', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"
|
|
4567
|
+
args: [{ selector: 'app-check-box', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper\n *ngIf=\"bVisible$ !== false\"\n name=\"FieldValueList\"\n [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n <span>\n <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n </span>\n </div>\n <div *ngIf=\"selectionMode === 'multi'; else single\">\n <mat-option *ngFor=\"let item of listOfCheckboxes\" (click)=\"handleChangeMultiMode($event, item)\">\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"item.selected\"\n [attr.data-test-id]=\"testId + ':' + item.value\"\n (change)=\"handleChangeMultiMode($event, item)\"\n (blur)=\"fieldOnBlur($event)\"\n >{{ item.text ?? item.value }}\n </mat-checkbox>\n </mat-option>\n </div>\n <ng-template #single>\n <mat-checkbox\n [labelPosition]=\"'after'\"\n [checked]=\"isChecked$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n >{{ caption$ }}</mat-checkbox\n >\n <p *ngIf=\"helperText\">{{ helperText }}</p>\n </ng-template>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\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{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%;color:#0009}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}p{font-size:.75rem;color:#00000094}mat-checkbox{margin-left:-11px}.mat-mdc-option{margin-left:-16px}\n"] }]
|
|
4455
4568
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
4456
4569
|
type: Input
|
|
4457
4570
|
}], formGroup$: [{
|
|
@@ -6884,6 +6997,9 @@ class GroupComponent {
|
|
|
6884
6997
|
this.heading$ = this.configProps$.heading;
|
|
6885
6998
|
this.instructions$ = this.configProps$.instructions;
|
|
6886
6999
|
this.collapsible$ = this.configProps$.collapsible;
|
|
7000
|
+
if (this.configProps$.visibility === undefined) {
|
|
7001
|
+
this.visibility$ = this.pConn$.getComputedVisibility();
|
|
7002
|
+
}
|
|
6887
7003
|
if (this.configProps$.displayMode === 'LABELS_LEFT') {
|
|
6888
7004
|
if (this.configProps$.visibility === undefined)
|
|
6889
7005
|
this.visibility$ = true;
|
|
@@ -6896,11 +7012,11 @@ class GroupComponent {
|
|
|
6896
7012
|
}
|
|
6897
7013
|
}
|
|
6898
7014
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6899
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupComponent, isStandalone: true, selector: "app-group", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<ng-container *ngIf=\"visibility
|
|
7015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupComponent, isStandalone: true, selector: "app-group", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<ng-container *ngIf=\"visibility$ && arChildren$.length\">\n <component-mapper\n name=\"FieldGroup\"\n [props]=\"{\n name: showHeading$ ? heading$ : undefined,\n collapsible: collapsible$,\n instructions: instructions$,\n childrenTemplate: childrenTemplate\n }\"\n >\n </component-mapper>\n\n <ng-template #childrenTemplate>\n <div *ngFor=\"let kid of arChildren$\">\n <component-mapper\n [name]=\"kid.getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: kid.getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Field Group wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n ></component-mapper>\n </div>\n </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
6900
7016
|
}
|
|
6901
7017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupComponent, decorators: [{
|
|
6902
7018
|
type: Component,
|
|
6903
|
-
args: [{ selector: 'app-group', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<ng-container *ngIf=\"visibility
|
|
7019
|
+
args: [{ selector: 'app-group', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<ng-container *ngIf=\"visibility$ && arChildren$.length\">\n <component-mapper\n name=\"FieldGroup\"\n [props]=\"{\n name: showHeading$ ? heading$ : undefined,\n collapsible: collapsible$,\n instructions: instructions$,\n childrenTemplate: childrenTemplate\n }\"\n >\n </component-mapper>\n\n <ng-template #childrenTemplate>\n <div *ngFor=\"let kid of arChildren$\">\n <component-mapper\n [name]=\"kid.getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: kid.getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Field Group wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n ></component-mapper>\n </div>\n </ng-template>\n</ng-container>\n" }]
|
|
6904
7020
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }]; }, propDecorators: { pConn$: [{
|
|
6905
7021
|
type: Input
|
|
6906
7022
|
}], formGroup$: [{
|
|
@@ -8087,6 +8203,7 @@ class TimeComponent {
|
|
|
8087
8203
|
this.bDisabled$ = false;
|
|
8088
8204
|
this.bVisible$ = true;
|
|
8089
8205
|
this.displayMode$ = '';
|
|
8206
|
+
this.testId = '';
|
|
8090
8207
|
this.bHasForm$ = true;
|
|
8091
8208
|
this.componentReference = '';
|
|
8092
8209
|
this.fieldControl = new FormControl('', null);
|
|
@@ -8135,6 +8252,7 @@ class TimeComponent {
|
|
|
8135
8252
|
updateSelf() {
|
|
8136
8253
|
// moved this from ngOnInit() and call this from there instead...
|
|
8137
8254
|
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
|
|
8255
|
+
this.testId = this.configProps$.testId;
|
|
8138
8256
|
this.label$ = this.configProps$.label;
|
|
8139
8257
|
this.displayMode$ = this.configProps$.displayMode;
|
|
8140
8258
|
if (this.configProps$.value != undefined) {
|
|
@@ -8200,11 +8318,11 @@ class TimeComponent {
|
|
|
8200
8318
|
return errMessage;
|
|
8201
8319
|
}
|
|
8202
8320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeComponent, isStandalone: true, selector: "app-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"time\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
8321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeComponent, isStandalone: true, selector: "app-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"time\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
8204
8322
|
}
|
|
8205
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeComponent, decorators: [{
|
|
8206
8324
|
type: Component,
|
|
8207
|
-
args: [{ selector: 'app-time', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"time\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
8325
|
+
args: [{ selector: 'app-time', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"time\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
8208
8326
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8209
8327
|
type: Input
|
|
8210
8328
|
}], formGroup$: [{
|
|
@@ -8225,6 +8343,7 @@ class UrlComponent {
|
|
|
8225
8343
|
this.bDisabled$ = false;
|
|
8226
8344
|
this.bVisible$ = true;
|
|
8227
8345
|
this.displayMode$ = '';
|
|
8346
|
+
this.testId = '';
|
|
8228
8347
|
this.bHasForm$ = true;
|
|
8229
8348
|
this.componentReference = '';
|
|
8230
8349
|
this.fieldControl = new FormControl('', null);
|
|
@@ -8276,6 +8395,7 @@ class UrlComponent {
|
|
|
8276
8395
|
if (this.configProps$.value != undefined) {
|
|
8277
8396
|
this.value$ = this.configProps$.value;
|
|
8278
8397
|
}
|
|
8398
|
+
this.testId = this.configProps$.testId;
|
|
8279
8399
|
this.label$ = this.configProps$.label;
|
|
8280
8400
|
this.displayMode$ = this.configProps$.displayMode;
|
|
8281
8401
|
this.helperText = this.configProps$.helperText;
|
|
@@ -8336,11 +8456,11 @@ class UrlComponent {
|
|
|
8336
8456
|
return errMessage;
|
|
8337
8457
|
}
|
|
8338
8458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlComponent, isStandalone: true, selector: "app-url", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"url\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
8459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlComponent, isStandalone: true, selector: "app-url", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"url\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
8340
8460
|
}
|
|
8341
8461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlComponent, decorators: [{
|
|
8342
8462
|
type: Component,
|
|
8343
|
-
args: [{ selector: 'app-url', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"url\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
8463
|
+
args: [{ selector: 'app-url', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n <mat-label>{{ label$ }}</mat-label>\n <input\n matInput\n [placeholder]=\"placeholder\"\n type=\"url\"\n [value]=\"value$\"\n [required]=\"bRequired$\"\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n (change)=\"fieldOnChange($event)\"\n (blur)=\"fieldOnBlur($event)\"\n />\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
8344
8464
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8345
8465
|
type: Input
|
|
8346
8466
|
}], formGroup$: [{
|
|
@@ -8674,11 +8794,11 @@ class RichTextComponent {
|
|
|
8674
8794
|
handleEvent(actionsApi, 'changeNblur', propName, editorValue);
|
|
8675
8795
|
}
|
|
8676
8796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextComponent, isStandalone: true, selector: "app-rich-text", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode
|
|
8797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextComponent, isStandalone: true, selector: "app-rich-text", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, isHtml$: true }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$; else noEdit\">\n <div *ngIf=\"bVisible$\">\n <component-mapper\n name=\"RichTextEditor\"\n [props]=\"{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value: value$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ onBlur: fieldOnBlur, onChange: fieldOnChange }\"\n ></component-mapper>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <div *ngIf=\"bVisible$ !== false\">\n <component-mapper name=\"RichTextEditor\" [props]=\"{ label: label$, value: value$, readonly: true, testId }\" [parent]=\"this\"></component-mapper>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
8678
8798
|
}
|
|
8679
8799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextComponent, decorators: [{
|
|
8680
8800
|
type: Component,
|
|
8681
|
-
args: [{ selector: 'app-rich-text', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode
|
|
8801
|
+
args: [{ selector: 'app-rich-text', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, isHtml$: true }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"!bReadonly$; else noEdit\">\n <div *ngIf=\"bVisible$\">\n <component-mapper\n name=\"RichTextEditor\"\n [props]=\"{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value: value$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ onBlur: fieldOnBlur, onChange: fieldOnChange }\"\n ></component-mapper>\n </div>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <div *ngIf=\"bVisible$ !== false\">\n <component-mapper name=\"RichTextEditor\" [props]=\"{ label: label$, value: value$, readonly: true, testId }\" [parent]=\"this\"></component-mapper>\n </div>\n</ng-template>\n" }]
|
|
8682
8802
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8683
8803
|
type: Input
|
|
8684
8804
|
}], formGroup$: [{
|
|
@@ -8904,10 +9024,39 @@ class CaseSummaryComponent {
|
|
|
8904
9024
|
const kid = oField.getPConnect();
|
|
8905
9025
|
this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
|
|
8906
9026
|
}
|
|
8907
|
-
|
|
9027
|
+
const secondarySummaryFields = this.prepareCaseSummaryData(this.arChildren$[1].getPConnect());
|
|
9028
|
+
const secondaryChildren = this.arChildren$[1].getPConnect().getChildren();
|
|
9029
|
+
secondaryChildren.forEach((oField, index) => {
|
|
8908
9030
|
const kid = oField.getPConnect();
|
|
8909
|
-
|
|
8910
|
-
|
|
9031
|
+
const displayLabel = secondarySummaryFields[index].value.getPConnect().getConfigProps().label;
|
|
9032
|
+
this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid, displayLabel });
|
|
9033
|
+
});
|
|
9034
|
+
}
|
|
9035
|
+
prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
|
|
9036
|
+
const { config, children } = pConnectMeta;
|
|
9037
|
+
const pConnect = getPConnect();
|
|
9038
|
+
const caseSummaryComponentObject = {};
|
|
9039
|
+
const { type } = pConnectMeta;
|
|
9040
|
+
const createdComponent = pConnect.createComponent({
|
|
9041
|
+
type,
|
|
9042
|
+
children: children ? [...children] : [],
|
|
9043
|
+
config: {
|
|
9044
|
+
...config
|
|
9045
|
+
}
|
|
9046
|
+
});
|
|
9047
|
+
caseSummaryComponentObject.value = createdComponent;
|
|
9048
|
+
return caseSummaryComponentObject;
|
|
9049
|
+
}
|
|
9050
|
+
prepareCaseSummaryData(summaryFieldChildren) {
|
|
9051
|
+
const convertChildrenToSummaryData = kid => {
|
|
9052
|
+
return kid?.map((childItem, index) => {
|
|
9053
|
+
const childMeta = childItem.getPConnect().meta;
|
|
9054
|
+
const caseSummaryComponentObject = this.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
|
|
9055
|
+
caseSummaryComponentObject.id = index + 1;
|
|
9056
|
+
return caseSummaryComponentObject;
|
|
9057
|
+
});
|
|
9058
|
+
};
|
|
9059
|
+
return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
|
|
8911
9060
|
}
|
|
8912
9061
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseSummaryComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8913
9062
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseSummaryComponent, isStandalone: true, selector: "app-case-summary", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<component-mapper name=\"CaseSummaryFields\" [props]=\"{ status$, bShowStatus$, primaryFields$, secondaryFields$ }\"></component-mapper>\n", styles: [".psdk-case-summary-info-box{display:flex;flex-direction:row;justify-content:space-evenly}.psdk-case-summary-data{flex:1}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-status{background-color:var(--app-primary-color);color:var(--app-form-color);padding:0;margin-top:.625rem;width:-moz-fit-content;width:fit-content}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
@@ -10261,18 +10410,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10261
10410
|
}] } });
|
|
10262
10411
|
|
|
10263
10412
|
class FieldValueListComponent {
|
|
10413
|
+
constructor() {
|
|
10414
|
+
this.isHtml$ = false;
|
|
10415
|
+
}
|
|
10264
10416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-labels-left\">\n
|
|
10417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$", isHtml$: "isHtml$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-labels-left\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-stacked\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
10266
10418
|
}
|
|
10267
10419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldValueListComponent, decorators: [{
|
|
10268
10420
|
type: Component,
|
|
10269
|
-
args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-labels-left\">\n
|
|
10421
|
+
args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-labels-left\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n <div class=\"psdk-grid-label\">{{ label$ }}</div>\n <div class=\"psdk-val-stacked\">\n <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"] }]
|
|
10270
10422
|
}], propDecorators: { label$: [{
|
|
10271
10423
|
type: Input
|
|
10272
10424
|
}], value$: [{
|
|
10273
10425
|
type: Input
|
|
10274
10426
|
}], displayMode$: [{
|
|
10275
10427
|
type: Input
|
|
10428
|
+
}], isHtml$: [{
|
|
10429
|
+
type: Input
|
|
10276
10430
|
}] } });
|
|
10277
10431
|
|
|
10278
10432
|
class InlineDashboardComponent {
|
|
@@ -11317,7 +11471,7 @@ class ListViewComponent {
|
|
|
11317
11471
|
/** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
|
|
11318
11472
|
this.compositeKeys = this.configProps$?.compositeKeys;
|
|
11319
11473
|
this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
|
|
11320
|
-
this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload
|
|
11474
|
+
this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
|
|
11321
11475
|
this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
|
|
11322
11476
|
this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
|
|
11323
11477
|
this.showDynamicFields = this.configProps$?.showDynamicFields;
|
|
@@ -11701,9 +11855,6 @@ class ListViewComponent {
|
|
|
11701
11855
|
}
|
|
11702
11856
|
}
|
|
11703
11857
|
}
|
|
11704
|
-
compare(a, b, isAsc) {
|
|
11705
|
-
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
|
11706
|
-
}
|
|
11707
11858
|
_headerSortClick(event, columnData) {
|
|
11708
11859
|
// images 0 - filter, 1 - arrow, 2 - more
|
|
11709
11860
|
/** Commenting this code for now as it is giving errors not sure if it ever worked */
|
|
@@ -11730,20 +11881,21 @@ class ListViewComponent {
|
|
|
11730
11881
|
this.arrowDirection = this.arrowDirection === 'up' ? 'down' : 'up';
|
|
11731
11882
|
this.filterSortGroupBy();
|
|
11732
11883
|
}
|
|
11733
|
-
|
|
11734
|
-
|
|
11735
|
-
|
|
11736
|
-
|
|
11737
|
-
|
|
11738
|
-
|
|
11739
|
-
|
|
11740
|
-
|
|
11741
|
-
|
|
11742
|
-
|
|
11743
|
-
|
|
11744
|
-
|
|
11745
|
-
|
|
11746
|
-
}
|
|
11884
|
+
// Commenting below method, since the code which is using it, is already commented
|
|
11885
|
+
// clearOutArrows(event, columnData) {
|
|
11886
|
+
// const arImages = event.srcElement.parentElement.getElementsByTagName('img');
|
|
11887
|
+
// for (const theImage of arImages) {
|
|
11888
|
+
// // let theImage = arImages[i]
|
|
11889
|
+
// const arrow = theImage.getAttribute('arrow');
|
|
11890
|
+
// if (arrow) {
|
|
11891
|
+
// const arrowId = theImage.getAttribute('arrowid');
|
|
11892
|
+
// if (arrow != 'none' && arrowId != columnData.config.name) {
|
|
11893
|
+
// theImage.setAttribute('arrow', 'none');
|
|
11894
|
+
// theImage.src = '';
|
|
11895
|
+
// }
|
|
11896
|
+
// }
|
|
11897
|
+
// }
|
|
11898
|
+
// }
|
|
11747
11899
|
sortCompare(a, b) {
|
|
11748
11900
|
let aValue = a[this.compareRef];
|
|
11749
11901
|
let bValue = b[this.compareRef];
|
|
@@ -11759,18 +11911,18 @@ class ListViewComponent {
|
|
|
11759
11911
|
}
|
|
11760
11912
|
switch (this.arrowDirection) {
|
|
11761
11913
|
case 'up':
|
|
11762
|
-
if (aValue < bValue) {
|
|
11914
|
+
if (!aValue || aValue < bValue) {
|
|
11763
11915
|
return -1;
|
|
11764
11916
|
}
|
|
11765
|
-
if (aValue > bValue) {
|
|
11917
|
+
if (!bValue || aValue > bValue) {
|
|
11766
11918
|
return 1;
|
|
11767
11919
|
}
|
|
11768
11920
|
break;
|
|
11769
11921
|
case 'down':
|
|
11770
|
-
if (aValue > bValue) {
|
|
11922
|
+
if (!bValue || aValue > bValue) {
|
|
11771
11923
|
return -1;
|
|
11772
11924
|
}
|
|
11773
|
-
if (aValue < bValue) {
|
|
11925
|
+
if (!aValue || aValue < bValue) {
|
|
11774
11926
|
return 1;
|
|
11775
11927
|
}
|
|
11776
11928
|
break;
|
|
@@ -12387,7 +12539,7 @@ class ListViewComponent {
|
|
|
12387
12539
|
return select;
|
|
12388
12540
|
}
|
|
12389
12541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n <div>\n <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n <div>\n <table\n mat-table\n id=\"list-view\"\n [dataSource]=\"repeatList$\"\n matSort\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n <div>\n <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n </div>\n <div *ngIf=\"bInForm$\">\n <div>\n <div class=\"psdk-inner-div-in-form\">\n <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n </td>\n </ng-container>\n <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n </td>\n </ng-container>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n <div *ngIf=\"repeatListData?.length === 0\">\n <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n </table>\n </div>\n <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n </div>\n </div>\n </div>\n\n <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n </div>\n\n <!-- pop overs for filters-->\n <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
12542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n <div>\n <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n <div>\n <table\n mat-table\n id=\"list-view\"\n [dataSource]=\"repeatList$\"\n matSort\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] || '---' }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n <div>\n <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] || '---' }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n </div>\n <div *ngIf=\"bInForm$\">\n <div>\n <div class=\"psdk-inner-div-in-form\">\n <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n </td>\n </ng-container>\n <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n </td>\n </ng-container>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n <div *ngIf=\"repeatListData?.length === 0\">\n <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n </table>\n </div>\n <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n </div>\n </div>\n </div>\n\n <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n </div>\n\n <!-- pop overs for filters-->\n <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$2.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
12391
12543
|
}
|
|
12392
12544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
12393
12545
|
type: Component,
|
|
@@ -12410,7 +12562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
12410
12562
|
MatOptionModule,
|
|
12411
12563
|
MatDatepickerModule,
|
|
12412
12564
|
forwardRef(() => ComponentMapperComponent)
|
|
12413
|
-
], template: "<div class=\"psdk-list-header\">\n <div>\n <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n <div>\n <table\n mat-table\n id=\"list-view\"\n [dataSource]=\"repeatList$\"\n matSort\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n <div>\n <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n </div>\n <div *ngIf=\"bInForm$\">\n <div>\n <div class=\"psdk-inner-div-in-form\">\n <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n </td>\n </ng-container>\n <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n </td>\n </ng-container>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n <div *ngIf=\"repeatListData?.length === 0\">\n <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n </table>\n </div>\n <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n </div>\n </div>\n </div>\n\n <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n </div>\n\n <!-- pop overs for filters-->\n <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
|
|
12565
|
+
], template: "<div class=\"psdk-list-header\">\n <div>\n <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n </mat-form-field>\n\n <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n <div>\n <table\n mat-table\n id=\"list-view\"\n [dataSource]=\"repeatList$\"\n matSort\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] || '---' }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n <div>\n <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div class=\"psdk-mat-header-arrow\">\n <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n </div>\n <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element; index as i\">\n <button\n *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n mat-button\n color=\"primary\"\n (click)=\"_listViewClick(dCol.config, element)\"\n >\n {{ element[dCol.config.name] || '---' }}\n </button>\n <ng-template #regular>\n {{ element[dCol.config.name] || '---' }}\n </ng-template>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n <!-- Group header -->\n <ng-container matColumnDef=\"groupHeader\">\n <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n <strong\n >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n group.totalCounts\n }})</strong\n >\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n </table>\n </div>\n </div>\n </div>\n <div *ngIf=\"bInForm$\">\n <div>\n <div class=\"psdk-inner-div-in-form\">\n <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n </td>\n </ng-container>\n <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n </td>\n </ng-container>\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n {{ dCol.config.label }}\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n </table>\n <div *ngIf=\"repeatListData?.length === 0\">\n <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n </table>\n </div>\n <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n </div>\n </div>\n </div>\n\n <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n </div>\n\n <!-- pop overs for filters-->\n <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
|
|
12414
12566
|
}], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: Utils }]; }, propDecorators: { paginator: [{
|
|
12415
12567
|
type: ViewChild,
|
|
12416
12568
|
args: [MatPaginator]
|
|
@@ -12465,6 +12617,477 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
12465
12617
|
type: Input
|
|
12466
12618
|
}] } });
|
|
12467
12619
|
|
|
12620
|
+
function setVisibilityForList(c11nEnv, visibility) {
|
|
12621
|
+
const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();
|
|
12622
|
+
// usecase:multiselect, fieldgroup, editable table
|
|
12623
|
+
if ((selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) || (renderMode === 'Editable' && referenceList)) {
|
|
12624
|
+
c11nEnv.getListActions().setVisibility(visibility);
|
|
12625
|
+
}
|
|
12626
|
+
}
|
|
12627
|
+
function preProcessColumns(columns) {
|
|
12628
|
+
return columns?.map(col => {
|
|
12629
|
+
const tempColObj = { ...col };
|
|
12630
|
+
tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
|
|
12631
|
+
if (tempColObj.setProperty) {
|
|
12632
|
+
tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
|
|
12633
|
+
}
|
|
12634
|
+
return tempColObj;
|
|
12635
|
+
});
|
|
12636
|
+
}
|
|
12637
|
+
function getDisplayFieldsMetaData(columns) {
|
|
12638
|
+
const displayColumns = columns?.filter(col => col.display === 'true');
|
|
12639
|
+
const metaDataObj = {
|
|
12640
|
+
key: '',
|
|
12641
|
+
primary: '',
|
|
12642
|
+
secondary: []
|
|
12643
|
+
};
|
|
12644
|
+
const keyCol = columns?.filter(col => col.key === 'true');
|
|
12645
|
+
metaDataObj.key = keyCol?.length > 0 ? keyCol[0].value : 'auto';
|
|
12646
|
+
const itemsRecordsColumn = columns?.filter(col => col.itemsRecordsColumn === 'true');
|
|
12647
|
+
if (itemsRecordsColumn?.length > 0) {
|
|
12648
|
+
metaDataObj.itemsRecordsColumn = itemsRecordsColumn[0].value;
|
|
12649
|
+
}
|
|
12650
|
+
const itemsGroupKeyColumn = columns?.filter(col => col.itemsGroupKeyColumn === 'true');
|
|
12651
|
+
if (itemsGroupKeyColumn?.length > 0) {
|
|
12652
|
+
metaDataObj.itemsGroupKeyColumn = itemsGroupKeyColumn[0].value;
|
|
12653
|
+
}
|
|
12654
|
+
for (let index = 0; index < displayColumns?.length; index += 1) {
|
|
12655
|
+
if (displayColumns[index].secondary === 'true') {
|
|
12656
|
+
metaDataObj.secondary.push(displayColumns[index].value);
|
|
12657
|
+
}
|
|
12658
|
+
else if (displayColumns[index].primary === 'true') {
|
|
12659
|
+
metaDataObj.primary = displayColumns[index].value;
|
|
12660
|
+
}
|
|
12661
|
+
}
|
|
12662
|
+
return metaDataObj;
|
|
12663
|
+
}
|
|
12664
|
+
function createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected) {
|
|
12665
|
+
const secondaryArr = [];
|
|
12666
|
+
displayFieldMeta.secondary.forEach(col => {
|
|
12667
|
+
secondaryArr.push(entry[col]);
|
|
12668
|
+
});
|
|
12669
|
+
const isSelected = selected.some(item => item.id === entry[displayFieldMeta.key]);
|
|
12670
|
+
return {
|
|
12671
|
+
id: entry[displayFieldMeta.key],
|
|
12672
|
+
primary: entry[displayFieldMeta.primary],
|
|
12673
|
+
secondary: showSecondaryData ? secondaryArr : [],
|
|
12674
|
+
selected: isSelected
|
|
12675
|
+
};
|
|
12676
|
+
}
|
|
12677
|
+
function putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected) {
|
|
12678
|
+
let newTreeItems = itemsTree.slice();
|
|
12679
|
+
const showSecondaryData = !showSecondaryInSearchOnly;
|
|
12680
|
+
for (const obj of listObjData) {
|
|
12681
|
+
const items = obj[displayFieldMeta.itemsRecordsColumn].map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
|
|
12682
|
+
newTreeItems = newTreeItems.map(caseObject => {
|
|
12683
|
+
if (caseObject.id === obj[displayFieldMeta.itemsGroupKeyColumn]) {
|
|
12684
|
+
caseObject.items = [...items];
|
|
12685
|
+
}
|
|
12686
|
+
return caseObject;
|
|
12687
|
+
});
|
|
12688
|
+
}
|
|
12689
|
+
return newTreeItems;
|
|
12690
|
+
}
|
|
12691
|
+
function prepareSearchResults(listObjData, displayFieldMeta) {
|
|
12692
|
+
const searchResults = [];
|
|
12693
|
+
for (const obj of listObjData) {
|
|
12694
|
+
searchResults.push(...obj[displayFieldMeta.itemsRecordsColumn]);
|
|
12695
|
+
}
|
|
12696
|
+
return searchResults;
|
|
12697
|
+
}
|
|
12698
|
+
async function doSearch(searchText, clickedGroup, initialCaseClass, displayFieldMeta, dataApiObj, // deep clone of the dataApiObj
|
|
12699
|
+
itemsTree, isGroupData, showSecondaryInSearchOnly, selected) {
|
|
12700
|
+
let searchTextForUngroupedData = '';
|
|
12701
|
+
if (dataApiObj) {
|
|
12702
|
+
// creating dataApiObject in grouped data cases
|
|
12703
|
+
if (isGroupData) {
|
|
12704
|
+
dataApiObj = cloneDeep(dataApiObj);
|
|
12705
|
+
dataApiObj.fetchedNQData = false;
|
|
12706
|
+
dataApiObj.cache = {};
|
|
12707
|
+
// if we have no search text and no group selected, return the original tree
|
|
12708
|
+
if (searchText === '' && clickedGroup === '') {
|
|
12709
|
+
return itemsTree;
|
|
12710
|
+
}
|
|
12711
|
+
// setting the inital search text & search classes in ApiObject
|
|
12712
|
+
dataApiObj.parameters[Object.keys(dataApiObj.parameters)[1]] = searchText;
|
|
12713
|
+
dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = initialCaseClass;
|
|
12714
|
+
// if we have a selected group
|
|
12715
|
+
if (clickedGroup) {
|
|
12716
|
+
// check if the data for this group is already present and no search text
|
|
12717
|
+
if (searchText === '') {
|
|
12718
|
+
const containsData = itemsTree.find(item => item.id === clickedGroup);
|
|
12719
|
+
// do not make API call when items of respective group are already fetched
|
|
12720
|
+
if (containsData?.items?.length)
|
|
12721
|
+
return itemsTree;
|
|
12722
|
+
}
|
|
12723
|
+
dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
|
|
12724
|
+
}
|
|
12725
|
+
}
|
|
12726
|
+
else {
|
|
12727
|
+
searchTextForUngroupedData = searchText;
|
|
12728
|
+
}
|
|
12729
|
+
// search API call
|
|
12730
|
+
const response = await dataApiObj.fetchData(searchTextForUngroupedData).catch(() => {
|
|
12731
|
+
return itemsTree;
|
|
12732
|
+
});
|
|
12733
|
+
let listObjData = response.data;
|
|
12734
|
+
let newItemsTree = [];
|
|
12735
|
+
if (isGroupData) {
|
|
12736
|
+
if (searchText) {
|
|
12737
|
+
listObjData = prepareSearchResults(listObjData, displayFieldMeta);
|
|
12738
|
+
}
|
|
12739
|
+
else {
|
|
12740
|
+
newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
|
|
12741
|
+
return newItemsTree;
|
|
12742
|
+
}
|
|
12743
|
+
}
|
|
12744
|
+
const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
|
|
12745
|
+
if (listObjData !== undefined && listObjData.length > 0) {
|
|
12746
|
+
newItemsTree = listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
|
|
12747
|
+
}
|
|
12748
|
+
return newItemsTree;
|
|
12749
|
+
}
|
|
12750
|
+
return itemsTree;
|
|
12751
|
+
}
|
|
12752
|
+
function setValuesToPropertyList(searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) {
|
|
12753
|
+
const setPropertyList = columns
|
|
12754
|
+
?.filter(col => col.setProperty)
|
|
12755
|
+
.map(col => {
|
|
12756
|
+
return {
|
|
12757
|
+
source: col.value,
|
|
12758
|
+
target: col.setProperty,
|
|
12759
|
+
key: col.key,
|
|
12760
|
+
primary: col.primary
|
|
12761
|
+
};
|
|
12762
|
+
});
|
|
12763
|
+
const valueToSet = [];
|
|
12764
|
+
if (setPropertyList.length > 0) {
|
|
12765
|
+
setPropertyList.forEach(prop => {
|
|
12766
|
+
items.forEach(item => {
|
|
12767
|
+
if (prop.key === 'true' && item) {
|
|
12768
|
+
valueToSet.push(item.id);
|
|
12769
|
+
}
|
|
12770
|
+
else if (prop.primary === 'true' || !item) {
|
|
12771
|
+
valueToSet.push(searchText);
|
|
12772
|
+
}
|
|
12773
|
+
});
|
|
12774
|
+
if (updatePropertyInRedux) {
|
|
12775
|
+
// BUG-666851 setting options so that the store values are replaced and not merged
|
|
12776
|
+
const options = {
|
|
12777
|
+
isArrayDeepMerge: false
|
|
12778
|
+
};
|
|
12779
|
+
if (prop.target === 'Associated property') {
|
|
12780
|
+
actions.updateFieldValue(assocProp, valueToSet, options);
|
|
12781
|
+
}
|
|
12782
|
+
else {
|
|
12783
|
+
actions.updateFieldValue(`.${prop.target}`, valueToSet, options);
|
|
12784
|
+
}
|
|
12785
|
+
}
|
|
12786
|
+
});
|
|
12787
|
+
}
|
|
12788
|
+
return valueToSet;
|
|
12789
|
+
}
|
|
12790
|
+
function getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) {
|
|
12791
|
+
return groupDataSource?.map(group => {
|
|
12792
|
+
const secondaryArr = [];
|
|
12793
|
+
groupsDisplayFieldMeta.secondary.forEach(col => {
|
|
12794
|
+
secondaryArr.push(group[col]);
|
|
12795
|
+
});
|
|
12796
|
+
return {
|
|
12797
|
+
id: group[groupsDisplayFieldMeta.key],
|
|
12798
|
+
primary: group[groupsDisplayFieldMeta.primary],
|
|
12799
|
+
secondary: showSecondaryInSearchOnly ? [] : secondaryArr,
|
|
12800
|
+
items: []
|
|
12801
|
+
};
|
|
12802
|
+
});
|
|
12803
|
+
}
|
|
12804
|
+
|
|
12805
|
+
class MultiselectComponent {
|
|
12806
|
+
constructor(angularPConnect, utils) {
|
|
12807
|
+
this.angularPConnect = angularPConnect;
|
|
12808
|
+
this.utils = utils;
|
|
12809
|
+
// Used with AngularPConnect
|
|
12810
|
+
this.angularPConnectData = {};
|
|
12811
|
+
this.label$ = '';
|
|
12812
|
+
this.value$ = '';
|
|
12813
|
+
this.bRequired$ = false;
|
|
12814
|
+
this.bDisabled$ = false;
|
|
12815
|
+
this.bVisible$ = true;
|
|
12816
|
+
this.bHasForm$ = true;
|
|
12817
|
+
this.fieldControl = new FormControl('', null);
|
|
12818
|
+
this.showSecondaryInSearchOnly = false;
|
|
12819
|
+
this.isGroupData = false;
|
|
12820
|
+
this.groupDataSource = [];
|
|
12821
|
+
this.matchPosition = 'contains';
|
|
12822
|
+
this.groupColumnsConfig = [{}];
|
|
12823
|
+
this.selectedItems = [];
|
|
12824
|
+
this.itemsTreeBaseData = [];
|
|
12825
|
+
this.itemsTree = [];
|
|
12826
|
+
this.optionClicked = (event, data, trigger) => {
|
|
12827
|
+
event.stopPropagation();
|
|
12828
|
+
this.toggleSelection(data, trigger);
|
|
12829
|
+
};
|
|
12830
|
+
this.toggleSelection = (data, trigger) => {
|
|
12831
|
+
data.selected = !data.selected;
|
|
12832
|
+
this.trigger = trigger;
|
|
12833
|
+
this.itemsTree.map((ele) => {
|
|
12834
|
+
if (ele.id === data.id) {
|
|
12835
|
+
ele.selected = data.selected;
|
|
12836
|
+
}
|
|
12837
|
+
return ele;
|
|
12838
|
+
});
|
|
12839
|
+
if (data.selected === true) {
|
|
12840
|
+
this.selectedItems.push(data);
|
|
12841
|
+
}
|
|
12842
|
+
else {
|
|
12843
|
+
const index = this.selectedItems.findIndex(value => value.id === data.id);
|
|
12844
|
+
this.selectedItems.splice(index, 1);
|
|
12845
|
+
}
|
|
12846
|
+
this.value$ = '';
|
|
12847
|
+
// if this is a referenceList case
|
|
12848
|
+
if (this.referenceList)
|
|
12849
|
+
this.setSelectedItemsForReferenceList(data);
|
|
12850
|
+
this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
|
|
12851
|
+
};
|
|
12852
|
+
this.removeChip = (data) => {
|
|
12853
|
+
if (data) {
|
|
12854
|
+
data = this.itemsTree.filter((ele) => {
|
|
12855
|
+
return ele.id === data.id;
|
|
12856
|
+
});
|
|
12857
|
+
this.toggleSelection(data[0]);
|
|
12858
|
+
}
|
|
12859
|
+
};
|
|
12860
|
+
}
|
|
12861
|
+
ngOnInit() {
|
|
12862
|
+
// First thing in initialization is registering and subscribing to the AngularPConnect service
|
|
12863
|
+
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
|
|
12864
|
+
this.controlName$ = this.angularPConnect.getComponentID(this);
|
|
12865
|
+
// Then, continue on with other initialization
|
|
12866
|
+
this.checkAndUpdate();
|
|
12867
|
+
if (this.formGroup$) {
|
|
12868
|
+
// add control to formGroup
|
|
12869
|
+
this.formGroup$.addControl(this.controlName$, this.fieldControl);
|
|
12870
|
+
this.fieldControl.setValue(this.value$);
|
|
12871
|
+
this.bHasForm$ = true;
|
|
12872
|
+
}
|
|
12873
|
+
else {
|
|
12874
|
+
this.bHasForm$ = false;
|
|
12875
|
+
}
|
|
12876
|
+
}
|
|
12877
|
+
ngOnDestroy() {
|
|
12878
|
+
if (this.formGroup$) {
|
|
12879
|
+
this.formGroup$.removeControl(this.controlName$);
|
|
12880
|
+
}
|
|
12881
|
+
if (this.angularPConnectData.unsubscribeFn) {
|
|
12882
|
+
this.angularPConnectData.unsubscribeFn();
|
|
12883
|
+
}
|
|
12884
|
+
}
|
|
12885
|
+
// Callback passed when subscribing to store change
|
|
12886
|
+
onStateChange() {
|
|
12887
|
+
this.checkAndUpdate();
|
|
12888
|
+
}
|
|
12889
|
+
checkAndUpdate() {
|
|
12890
|
+
// Should always check the bridge to see if the component should
|
|
12891
|
+
// update itself (re-render)
|
|
12892
|
+
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
|
|
12893
|
+
// ONLY call updateSelf when the component should update
|
|
12894
|
+
if (bUpdateSelf) {
|
|
12895
|
+
this.updateSelf();
|
|
12896
|
+
}
|
|
12897
|
+
}
|
|
12898
|
+
// updateSelf
|
|
12899
|
+
updateSelf() {
|
|
12900
|
+
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
|
|
12901
|
+
let { datasource = [], columns = [{}] } = this.configProps$;
|
|
12902
|
+
this.setPropertyValuesFromProps();
|
|
12903
|
+
if (this.referenceList.length > 0) {
|
|
12904
|
+
datasource = this.referenceList;
|
|
12905
|
+
columns = [
|
|
12906
|
+
{
|
|
12907
|
+
value: this.primaryField,
|
|
12908
|
+
display: 'true',
|
|
12909
|
+
useForSearch: true,
|
|
12910
|
+
primary: 'true'
|
|
12911
|
+
},
|
|
12912
|
+
{
|
|
12913
|
+
value: this.selectionKey,
|
|
12914
|
+
setProperty: this.selectionKey,
|
|
12915
|
+
key: 'true'
|
|
12916
|
+
}
|
|
12917
|
+
];
|
|
12918
|
+
let secondaryColumns = [];
|
|
12919
|
+
if (this.secondaryFields) {
|
|
12920
|
+
secondaryColumns = this.secondaryFields.map(secondaryField => ({
|
|
12921
|
+
value: secondaryField,
|
|
12922
|
+
display: 'true',
|
|
12923
|
+
secondary: 'true',
|
|
12924
|
+
useForSearch: 'true'
|
|
12925
|
+
}));
|
|
12926
|
+
}
|
|
12927
|
+
else {
|
|
12928
|
+
secondaryColumns = [
|
|
12929
|
+
{
|
|
12930
|
+
value: this.selectionKey,
|
|
12931
|
+
display: 'true',
|
|
12932
|
+
secondary: 'true',
|
|
12933
|
+
useForSearch: 'true'
|
|
12934
|
+
}
|
|
12935
|
+
];
|
|
12936
|
+
}
|
|
12937
|
+
if (this.referenceType === 'Case') {
|
|
12938
|
+
columns = [...columns, ...secondaryColumns];
|
|
12939
|
+
}
|
|
12940
|
+
}
|
|
12941
|
+
this.value$ = this.value$ ? this.value$ : '';
|
|
12942
|
+
const contextName = this.pConn$.getContextName();
|
|
12943
|
+
const dataConfig = {
|
|
12944
|
+
dataSource: datasource,
|
|
12945
|
+
groupDataSource: this.groupDataSource,
|
|
12946
|
+
isGroupData: this.isGroupData,
|
|
12947
|
+
showSecondaryInSearchOnly: this.showSecondaryInSearchOnly,
|
|
12948
|
+
parameters: this.parameters,
|
|
12949
|
+
matchPosition: this.matchPosition,
|
|
12950
|
+
listType: this.listType,
|
|
12951
|
+
maxResultsDisplay: this.maxResultsDisplay || '100',
|
|
12952
|
+
columns: preProcessColumns(columns),
|
|
12953
|
+
groupColumnsConfig: preProcessColumns(this.groupColumnsConfig)
|
|
12954
|
+
};
|
|
12955
|
+
const groupsDisplayFieldMeta = this.listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.groupColumnsConfig) : null;
|
|
12956
|
+
this.itemsTreeBaseData = getGroupDataForItemsTree(this.groupDataSource, groupsDisplayFieldMeta, this.showSecondaryInSearchOnly) || [];
|
|
12957
|
+
this.itemsTree = this.isGroupData ? getGroupDataForItemsTree(this.groupDataSource, groupsDisplayFieldMeta, this.showSecondaryInSearchOnly) : [];
|
|
12958
|
+
this.displayFieldMeta = this.listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
|
|
12959
|
+
this.listActions = this.pConn$.getListActions();
|
|
12960
|
+
this.pConn$.setReferenceList(this.selectionList);
|
|
12961
|
+
if (this.configProps$.visibility != null) {
|
|
12962
|
+
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
|
|
12963
|
+
}
|
|
12964
|
+
// disabled
|
|
12965
|
+
if (this.configProps$.disabled != undefined) {
|
|
12966
|
+
this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
|
|
12967
|
+
}
|
|
12968
|
+
if (this.bDisabled$) {
|
|
12969
|
+
this.fieldControl.disable();
|
|
12970
|
+
}
|
|
12971
|
+
else {
|
|
12972
|
+
this.fieldControl.enable();
|
|
12973
|
+
}
|
|
12974
|
+
if (this.listType !== 'associated') {
|
|
12975
|
+
PCore.getDataApi()
|
|
12976
|
+
?.init(dataConfig, contextName)
|
|
12977
|
+
.then(async (dataObj) => {
|
|
12978
|
+
this.dataApiObj = dataObj;
|
|
12979
|
+
if (!this.isGroupData) {
|
|
12980
|
+
this.getCaseListBasedOnParams(this.value$ ?? '', '', [...this.selectedItems], [...this.itemsTree]);
|
|
12981
|
+
}
|
|
12982
|
+
});
|
|
12983
|
+
}
|
|
12984
|
+
}
|
|
12985
|
+
setPropertyValuesFromProps() {
|
|
12986
|
+
this.label$ = this.configProps$.label;
|
|
12987
|
+
this.placeholder = this.configProps$.placeholder || '';
|
|
12988
|
+
this.listType = this.configProps$.listType ? this.configProps$.listType : '';
|
|
12989
|
+
this.hideLabel = this.configProps$.hideLabel;
|
|
12990
|
+
this.parameters = this.configProps$?.parameters ? this.configProps$?.parameters : {};
|
|
12991
|
+
this.referenceList = this.configProps$?.referenceList;
|
|
12992
|
+
this.selectionKey = this.configProps$?.selectionKey;
|
|
12993
|
+
this.primaryField = this.configProps$?.primaryField;
|
|
12994
|
+
this.initialCaseClass = this.configProps$?.initialCaseClass;
|
|
12995
|
+
this.showSecondaryInSearchOnly = this.configProps$?.showSecondaryInSearchOnly ? this.configProps$?.showSecondaryInSearchOnly : false;
|
|
12996
|
+
this.isGroupData = this.configProps$?.isGroupData ? this.configProps$.isGroupData : false;
|
|
12997
|
+
this.referenceType = this.configProps$?.referenceType;
|
|
12998
|
+
this.secondaryFields = this.configProps$?.secondaryFields;
|
|
12999
|
+
this.groupDataSource = this.configProps$?.groupDataSource ? this.configProps$?.groupDataSource : [];
|
|
13000
|
+
this.matchPosition = this.configProps$?.matchPosition ? this.configProps$?.matchPosition : 'contains';
|
|
13001
|
+
this.maxResultsDisplay = this.configProps$?.maxResultsDisplay;
|
|
13002
|
+
this.groupColumnsConfig = this.configProps$?.groupColumnsConfig ? this.configProps$?.groupColumnsConfig : [{}];
|
|
13003
|
+
this.selectionList = this.configProps$?.selectionList;
|
|
13004
|
+
this.value$ = this.configProps$?.value;
|
|
13005
|
+
}
|
|
13006
|
+
// main search function trigger
|
|
13007
|
+
getCaseListBasedOnParams(searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) {
|
|
13008
|
+
if (this.referenceList && this.referenceList.length > 0) {
|
|
13009
|
+
this.listActions.getSelectedRows(true).then(result => {
|
|
13010
|
+
selectedRows =
|
|
13011
|
+
result.length > 0
|
|
13012
|
+
? result.map(item => {
|
|
13013
|
+
return {
|
|
13014
|
+
id: item[this.selectionKey.startsWith('.') ? this.selectionKey.substring(1) : this.selectionKey],
|
|
13015
|
+
primary: item[this.primaryField.startsWith('.') ? this.primaryField.substring(1) : this.primaryField]
|
|
13016
|
+
};
|
|
13017
|
+
})
|
|
13018
|
+
: [];
|
|
13019
|
+
this.selectedItems = selectedRows;
|
|
13020
|
+
const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...this.itemsTreeBaseData] : [...currentItemsTree];
|
|
13021
|
+
doSearch(searchText, group, this.initialCaseClass, this.displayFieldMeta, this.dataApiObj, initalItemsTree, this.isGroupData, this.showSecondaryInSearchOnly, selectedRows || []).then(res => {
|
|
13022
|
+
this.itemsTree = res || [];
|
|
13023
|
+
if (this.trigger) {
|
|
13024
|
+
this.trigger.openPanel();
|
|
13025
|
+
}
|
|
13026
|
+
});
|
|
13027
|
+
});
|
|
13028
|
+
}
|
|
13029
|
+
}
|
|
13030
|
+
fieldOnChange(event) {
|
|
13031
|
+
this.value$ = event.target.value;
|
|
13032
|
+
this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
|
|
13033
|
+
}
|
|
13034
|
+
optionChanged(event) {
|
|
13035
|
+
this.angularPConnectData.actions?.onChange(this, event);
|
|
13036
|
+
}
|
|
13037
|
+
setSelectedItemsForReferenceList(data) {
|
|
13038
|
+
// Clear error messages if any
|
|
13039
|
+
const propName = this.pConn$.getStateProps().selectionList;
|
|
13040
|
+
this.pConn$.clearErrorMessages({
|
|
13041
|
+
property: propName,
|
|
13042
|
+
category: '',
|
|
13043
|
+
context: ''
|
|
13044
|
+
});
|
|
13045
|
+
const { selected } = data;
|
|
13046
|
+
if (selected) {
|
|
13047
|
+
insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, data);
|
|
13048
|
+
}
|
|
13049
|
+
else {
|
|
13050
|
+
deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, data);
|
|
13051
|
+
}
|
|
13052
|
+
}
|
|
13053
|
+
getErrorMessage() {
|
|
13054
|
+
let errMessage = '';
|
|
13055
|
+
// look for validation messages for json, pre-defined or just an error pushed from workitem (400)
|
|
13056
|
+
if (this.fieldControl.hasError('message')) {
|
|
13057
|
+
errMessage = this.angularPConnectData.validateMessage ?? '';
|
|
13058
|
+
return errMessage;
|
|
13059
|
+
}
|
|
13060
|
+
if (this.fieldControl.hasError('required')) {
|
|
13061
|
+
errMessage = 'You must enter a value';
|
|
13062
|
+
}
|
|
13063
|
+
else if (this.fieldControl.errors) {
|
|
13064
|
+
errMessage = this.fieldControl.errors.toString();
|
|
13065
|
+
}
|
|
13066
|
+
return errMessage;
|
|
13067
|
+
}
|
|
13068
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiselectComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13069
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, 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 #trigger=\"matAutocompleteTrigger\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item, trigger)\">\n <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item, trigger)\">\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: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatChipsModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i11.MatChipGrid; }), selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i11.MatChipInput; }), selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i0.forwardRef(function () { return i11.MatChipRemove; }), selector: "[matChipRemove]" }, { kind: "component", type: i0.forwardRef(function () { return i11.MatChipRow; }), selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }] }); }
|
|
13070
|
+
}
|
|
13071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
13072
|
+
type: Component,
|
|
13073
|
+
args: [{ selector: 'app-multiselect', standalone: true, imports: [
|
|
13074
|
+
CommonModule,
|
|
13075
|
+
ReactiveFormsModule,
|
|
13076
|
+
MatFormFieldModule,
|
|
13077
|
+
MatInputModule,
|
|
13078
|
+
MatAutocompleteModule,
|
|
13079
|
+
MatOptionModule,
|
|
13080
|
+
MatCheckboxModule,
|
|
13081
|
+
MatIconModule,
|
|
13082
|
+
MatChipsModule,
|
|
13083
|
+
forwardRef(() => ComponentMapperComponent)
|
|
13084
|
+
], 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 #trigger=\"matAutocompleteTrigger\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item, trigger)\">\n <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item, trigger)\">\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"] }]
|
|
13085
|
+
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
13086
|
+
type: Input
|
|
13087
|
+
}], formGroup$: [{
|
|
13088
|
+
type: Input
|
|
13089
|
+
}] } });
|
|
13090
|
+
|
|
12468
13091
|
class NarrowWideFormComponent {
|
|
12469
13092
|
ngOnInit() {
|
|
12470
13093
|
this.updateSelf();
|
|
@@ -12862,7 +13485,7 @@ const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
|
|
|
12862
13485
|
type: 'text',
|
|
12863
13486
|
label: fields[index].config.label || fields[index].config.caption,
|
|
12864
13487
|
fillAvailableSpace: !!field.config.fillAvailableSpace,
|
|
12865
|
-
id: index
|
|
13488
|
+
id: `${index}`,
|
|
12866
13489
|
name: field.config.value.substr(4),
|
|
12867
13490
|
cellRenderer: TABLE_CELL,
|
|
12868
13491
|
sort: false,
|
|
@@ -13152,8 +13775,10 @@ class SimpleTableManualComponent {
|
|
|
13152
13775
|
this.arFilterMainButtons$ = [];
|
|
13153
13776
|
this.arFilterSecondaryButtons$ = [];
|
|
13154
13777
|
this.allowEditingInModal = false;
|
|
13778
|
+
this.isInitialized = false;
|
|
13155
13779
|
}
|
|
13156
13780
|
ngOnInit() {
|
|
13781
|
+
this.isInitialized = true;
|
|
13157
13782
|
// First thing in initialization is registering and subscribing to the AngularPConnect service
|
|
13158
13783
|
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
|
|
13159
13784
|
this.configProps$ = this.pConn$.getConfigProps();
|
|
@@ -13257,6 +13882,7 @@ class SimpleTableManualComponent {
|
|
|
13257
13882
|
// unchanged config info. For now, much of the info here is carried over from
|
|
13258
13883
|
// Nebula and we may not end up using it all.
|
|
13259
13884
|
this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
|
|
13885
|
+
this.initializeDefaultPageInstructions();
|
|
13260
13886
|
// end of from Nebula
|
|
13261
13887
|
// Here, we use the "name" field in fieldDefs since that has the assoicated property
|
|
13262
13888
|
// (if one exists for the field). If no "name", use "cellRenderer" (typically get DELETE_ICON)
|
|
@@ -13296,6 +13922,18 @@ class SimpleTableManualComponent {
|
|
|
13296
13922
|
// Note that the "property" shown in the column ("FirstName" in the above examples) is what
|
|
13297
13923
|
// ties the 3 data structures together.
|
|
13298
13924
|
}
|
|
13925
|
+
initializeDefaultPageInstructions() {
|
|
13926
|
+
if (this.isInitialized) {
|
|
13927
|
+
this.isInitialized = false;
|
|
13928
|
+
if (this.allowEditingInModal) {
|
|
13929
|
+
this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), this.fieldDefs.filter(item => item.name).map(item => item.name));
|
|
13930
|
+
}
|
|
13931
|
+
else {
|
|
13932
|
+
// @ts-ignore - An argument for 'fields' was not provided
|
|
13933
|
+
this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
|
|
13934
|
+
}
|
|
13935
|
+
}
|
|
13936
|
+
}
|
|
13299
13937
|
getResultsText() {
|
|
13300
13938
|
const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
|
|
13301
13939
|
return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
|
|
@@ -13313,13 +13951,27 @@ class SimpleTableManualComponent {
|
|
|
13313
13951
|
return result;
|
|
13314
13952
|
}
|
|
13315
13953
|
}
|
|
13316
|
-
|
|
13317
|
-
|
|
13954
|
+
//
|
|
13955
|
+
switch (this.arrowDirection) {
|
|
13956
|
+
case 'up':
|
|
13957
|
+
if (!aValue || aValue < bValue) {
|
|
13958
|
+
return -1;
|
|
13959
|
+
}
|
|
13960
|
+
if (!bValue || aValue > bValue) {
|
|
13961
|
+
return 1;
|
|
13962
|
+
}
|
|
13963
|
+
break;
|
|
13964
|
+
case 'down':
|
|
13965
|
+
if (!bValue || aValue > bValue) {
|
|
13966
|
+
return -1;
|
|
13967
|
+
}
|
|
13968
|
+
if (!aValue || aValue < bValue) {
|
|
13969
|
+
return 1;
|
|
13970
|
+
}
|
|
13971
|
+
break;
|
|
13972
|
+
default:
|
|
13973
|
+
break;
|
|
13318
13974
|
}
|
|
13319
|
-
if (this.arrowDirection === 'up')
|
|
13320
|
-
return aValue - bValue;
|
|
13321
|
-
if (this.arrowDirection === 'down')
|
|
13322
|
-
return bValue - aValue;
|
|
13323
13975
|
return 0;
|
|
13324
13976
|
}
|
|
13325
13977
|
compareByColumnPxRefObjectInsName(aValue, bValue) {
|
|
@@ -13759,13 +14411,13 @@ class SimpleTableManualComponent {
|
|
|
13759
14411
|
.getActionsApi()
|
|
13760
14412
|
.openEmbeddedDataModal(this.defaultView, this.pConn$, this.referenceListStr, this.referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
|
|
13761
14413
|
}
|
|
13762
|
-
else if (PCore.getPCoreVersion()?.includes('8.7')) {
|
|
13763
|
-
this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
|
|
13764
|
-
}
|
|
13765
14414
|
else {
|
|
13766
14415
|
// @ts-ignore - second parameter "pageRef" is optional for insert method
|
|
13767
14416
|
this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
|
|
13768
14417
|
}
|
|
14418
|
+
this.pConn$.clearErrorMessages({
|
|
14419
|
+
property: this.pConn$.getStateProps()?.referenceList?.substring(1)
|
|
14420
|
+
});
|
|
13769
14421
|
}
|
|
13770
14422
|
editRecord(data, index) {
|
|
13771
14423
|
if (data) {
|
|
@@ -13811,7 +14463,7 @@ class SimpleTableManualComponent {
|
|
|
13811
14463
|
this.elementsData = eleData;
|
|
13812
14464
|
}
|
|
13813
14465
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
14466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
13815
14467
|
}
|
|
13816
14468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
|
|
13817
14469
|
type: Component,
|
|
@@ -13827,7 +14479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13827
14479
|
MatSelectModule,
|
|
13828
14480
|
MatInputModule,
|
|
13829
14481
|
forwardRef(() => ComponentMapperComponent)
|
|
13830
|
-
], template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] }}</td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
|
|
14482
|
+
], template: "<ng-container *ngIf=\"bVisible$\">\n <div class=\"simple-table-wrapper\">\n <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n </h3>\n <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n <div>{{ dCol.config.label }}</div>\n <div class=\"psdk-mat-header-filter\">\n <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n </button>\n <mat-menu #groupMenu>\n <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n </button>\n <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n </button>\n <button mat-menu-item (click)=\"_filter($event, dCol)\">\n <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n </button>\n </mat-menu>\n </div>\n </th>\n <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <div *ngIf=\"allowEditingInModal\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <div class=\"header-icon\">\n <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n </button>\n <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n </mat-menu>\n </div>\n </td>\n </div>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n <td mat-cell *matCellDef=\"let element\">\n <component-mapper\n [name]=\"element[i].getPConnect().getComponentName()\"\n [props]=\"{\n pConn$: element[i].getPConnect(),\n formGroup$: formGroup$\n }\"\n errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n ></component-mapper>\n </td>\n </ng-container>\n </ng-container>\n <ng-container matColumnDef=\"DeleteIcon\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; index as j\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n </table>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n </div>\n <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n <div class=\"psdk-modal-file-top\">\n <h4>\n Filter:<b> {{ filterContainsLabel$ }}</b>\n </h4>\n <div *ngIf=\"bContains$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"startswith\">Starts with</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field class=\"psdk-full-width\">\n <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n </mat-form-field>\n </div>\n\n <div *ngIf=\"bDateTime$\">\n <mat-form-field class=\"psdk-full-width\">\n <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n <mat-option value=\"notequal\">is not equal to</mat-option>\n <mat-option value=\"after\">after</mat-option>\n <mat-option value=\"before\">before</mat-option>\n <mat-option value=\"null\">is null</mat-option>\n <mat-option value=\"notnull\">is not null</mat-option>\n </mat-select>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date</mat-label>\n <input\n matInput\n #dateInput\n [matDatepicker]=\"pegadate\"\n type=\"text\"\n [value]=\"filterContainsValue$\"\n (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Date time</mat-label>\n <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n </mat-form-field>\n\n <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n <mat-label>Time</mat-label>\n <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n </mat-form-field>\n </div>\n\n <component-mapper\n name=\"ActionButtons\"\n [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n [parent]=\"this\"\n [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n ></component-mapper>\n </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
|
|
13831
14483
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: DatapageService }]; }, propDecorators: { sort: [{
|
|
13832
14484
|
type: ViewChild,
|
|
13833
14485
|
args: [MatSort]
|
|
@@ -14183,6 +14835,8 @@ class WssNavBarComponent {
|
|
|
14183
14835
|
this.bShowCaseTypes$ = false;
|
|
14184
14836
|
this.portalApp$ = '';
|
|
14185
14837
|
this.showAppName$ = false;
|
|
14838
|
+
this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
|
|
14839
|
+
this.localeCategory = 'AppShell';
|
|
14186
14840
|
}
|
|
14187
14841
|
ngOnInit() {
|
|
14188
14842
|
// First thing in initialization is registering and subscribing to the AngularPConnect service
|
|
@@ -14273,11 +14927,11 @@ class WssNavBarComponent {
|
|
|
14273
14927
|
});
|
|
14274
14928
|
}
|
|
14275
14929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n <mat-toolbar-row mat-icon-button>\n <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n\n <div *ngFor=\"let page of navPages$\">\n <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n </div>\n </div>\n\n <span class=\"spacer\"></span>\n\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">
|
|
14930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n <mat-toolbar-row mat-icon-button>\n <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n\n <div *ngFor=\"let page of navPages$\">\n <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n </div>\n </div>\n\n <span class=\"spacer\"></span>\n\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n </mat-menu>\n </mat-list>\n </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$4.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] }); }
|
|
14277
14931
|
}
|
|
14278
14932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, decorators: [{
|
|
14279
14933
|
type: Component,
|
|
14280
|
-
args: [{ selector: 'app-wss-nav-bar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule], template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n <mat-toolbar-row mat-icon-button>\n <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n\n <div *ngFor=\"let page of navPages$\">\n <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n </div>\n </div>\n\n <span class=\"spacer\"></span>\n\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">
|
|
14934
|
+
args: [{ selector: 'app-wss-nav-bar', providers: [Utils], standalone: true, imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule], template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n <mat-toolbar-row mat-icon-button>\n <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n <div>\n <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n </div>\n <div class=\"psdk-nav-portal-info\">\n <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n </div>\n </div>\n\n <div *ngFor=\"let page of navPages$\">\n <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n </div>\n </div>\n\n <span class=\"spacer\"></span>\n\n <mat-list>\n <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n <div class=\"flex-box\">\n <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n </div>\n </mat-list-item>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item>Profile</button>\n <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Log off', localeCategory) }}</button>\n </mat-menu>\n </mat-list>\n </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"] }]
|
|
14281
14935
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
14282
14936
|
type: Input
|
|
14283
14937
|
}], appName$: [{
|
|
@@ -14331,6 +14985,10 @@ class AttachmentComponent {
|
|
|
14331
14985
|
this.extensions$ = '';
|
|
14332
14986
|
this.status = '';
|
|
14333
14987
|
this.validateMessage = '';
|
|
14988
|
+
this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
|
|
14989
|
+
this.localeCategory = 'CosmosFields';
|
|
14990
|
+
this.uploadMultipleFilesLabel = this.localizedVal('file_upload_text_multiple', this.localeCategory);
|
|
14991
|
+
this.uploadSingleFileLabel = this.localizedVal('file_upload_text_one', this.localeCategory);
|
|
14334
14992
|
this.fileDownload = (data, fileName, ext) => {
|
|
14335
14993
|
const file = ext ? `${fileName}.${ext}` : fileName;
|
|
14336
14994
|
download(atob(data), file);
|
|
@@ -14873,11 +15531,11 @@ class AttachmentComponent {
|
|
|
14873
15531
|
};
|
|
14874
15532
|
}
|
|
14875
15533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14876
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n <span class=\"psdk-label-wrapper-readonly\">\n <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n </span>\n <div\n [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n id=\"attachment-container\"\n *ngIf=\"bShowSelector$\"\n >\n <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n {{
|
|
15534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n <span class=\"psdk-label-wrapper-readonly\">\n <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n </span>\n <div\n [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n id=\"attachment-container\"\n *ngIf=\"bShowSelector$\"\n >\n <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n {{\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 <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n <div *ngFor=\"let attachment of arFileList$\">\n <component-mapper\n *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n name=\"SummaryItem\"\n [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n <ng-template #showfull>\n <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
14877
15535
|
}
|
|
14878
15536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, decorators: [{
|
|
14879
15537
|
type: Component,
|
|
14880
|
-
args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n <span class=\"psdk-label-wrapper-readonly\">\n <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n </span>\n <div\n [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n id=\"attachment-container\"\n *ngIf=\"bShowSelector$\"\n >\n <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n {{
|
|
15538
|
+
args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n <span class=\"psdk-label-wrapper-readonly\">\n <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n </span>\n <div\n [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n id=\"attachment-container\"\n *ngIf=\"bShowSelector$\"\n >\n <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n {{\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 <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n <div *ngFor=\"let attachment of arFileList$\">\n <component-mapper\n *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n name=\"SummaryItem\"\n [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n ></component-mapper>\n <ng-template #showfull>\n <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
|
|
14881
15539
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
|
|
14882
15540
|
type: Input
|
|
14883
15541
|
}], formGroup$: [{
|
|
@@ -16579,6 +17237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
16579
17237
|
class MaterialCaseSummaryComponent {
|
|
16580
17238
|
constructor(utils) {
|
|
16581
17239
|
this.utils = utils;
|
|
17240
|
+
this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
|
|
17241
|
+
this.localeCategory = 'ModalContainer';
|
|
16582
17242
|
}
|
|
16583
17243
|
ngOnInit() {
|
|
16584
17244
|
this.updatePrimaryWithStatus();
|
|
@@ -16621,6 +17281,7 @@ class MaterialCaseSummaryComponent {
|
|
|
16621
17281
|
updatePrimaryWithStatus() {
|
|
16622
17282
|
this.primaryFieldsWithStatus$ = [];
|
|
16623
17283
|
for (const prim of this.primaryFields$) {
|
|
17284
|
+
prim.config.value = this.localizedVal(prim.config.value, this.localeCategory);
|
|
16624
17285
|
this.primaryFieldsWithStatus$.push(prim);
|
|
16625
17286
|
}
|
|
16626
17287
|
if (this.bShowStatus$) {
|
|
@@ -16635,11 +17296,11 @@ class MaterialCaseSummaryComponent {
|
|
|
16635
17296
|
}
|
|
16636
17297
|
}
|
|
16637
17298
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialCaseSummaryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialCaseSummaryComponent, isStandalone: true, selector: "app-material-case-summary", inputs: { status$: "status$", bShowStatus$: "bShowStatus$", primaryFields$: "primaryFields$", secondaryFields$: "secondaryFields$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-case-summary-fields\">\n <dl class=\"psdk-case-summary-fields-primary\">\n <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n <dt class=\"psdk-csf-primary-field-header\">\n {{ field.config.label }}\n </dt>\n <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n </ng-container>\n </dd>\n <ng-template #hasValue>\n <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n </dd>\n </ng-template>\n </div>\n </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n <div\n *ngIf=\"\n field.config?.label?.toLowerCase() == 'create operator'
|
|
17299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialCaseSummaryComponent, isStandalone: true, selector: "app-material-case-summary", inputs: { status$: "status$", bShowStatus$: "bShowStatus$", primaryFields$: "primaryFields$", secondaryFields$: "secondaryFields$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-case-summary-fields\">\n <dl class=\"psdk-case-summary-fields-primary\">\n <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n <dt class=\"psdk-csf-primary-field-header\">\n {{ field.config.label }}\n </dt>\n <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n </ng-container>\n </dd>\n <ng-template #hasValue>\n <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n </dd>\n </ng-template>\n </div>\n </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n <div\n *ngIf=\"\n field.config?.label?.toLowerCase() == 'create operator' ||\n field.displayLabel.toLowerCase() == 'create operator' ||\n field.config?.label?.toLowerCase() == 'update operator' ||\n field.displayLabel.toLowerCase() == 'update operator';\n else hasSecondaryValue\n \"\n >\n <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n </div>\n <ng-template #hasSecondaryValue>\n <div class=\"psdk-csf-secondary-field\">\n <dt class=\"psdk-csf-secondary-field-header\">\n {{ field.config.displayLabel || field.config.label }}\n </dt>\n <dd class=\"psdk-csf-secondary-field-data\">\n <div [ngSwitch]=\"field.type\">\n <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n </div>\n </dd>\n </div>\n </ng-template>\n </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{padding:1rem;display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-secondary-value{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
|
|
16639
17300
|
}
|
|
16640
17301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialCaseSummaryComponent, decorators: [{
|
|
16641
17302
|
type: Component,
|
|
16642
|
-
args: [{ selector: 'app-material-case-summary', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-summary-fields\">\n <dl class=\"psdk-case-summary-fields-primary\">\n <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n <dt class=\"psdk-csf-primary-field-header\">\n {{ field.config.label }}\n </dt>\n <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n </ng-container>\n </dd>\n <ng-template #hasValue>\n <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n </dd>\n </ng-template>\n </div>\n </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n <div\n *ngIf=\"\n field.config?.label?.toLowerCase() == 'create operator'
|
|
17303
|
+
args: [{ selector: 'app-material-case-summary', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-summary-fields\">\n <dl class=\"psdk-case-summary-fields-primary\">\n <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n <dt class=\"psdk-csf-primary-field-header\">\n {{ field.config.label }}\n </dt>\n <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n </ng-container>\n </dd>\n <ng-template #hasValue>\n <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n </dd>\n </ng-template>\n </div>\n </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n <div\n *ngIf=\"\n field.config?.label?.toLowerCase() == 'create operator' ||\n field.displayLabel.toLowerCase() == 'create operator' ||\n field.config?.label?.toLowerCase() == 'update operator' ||\n field.displayLabel.toLowerCase() == 'update operator';\n else hasSecondaryValue\n \"\n >\n <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n </div>\n <ng-template #hasSecondaryValue>\n <div class=\"psdk-csf-secondary-field\">\n <dt class=\"psdk-csf-secondary-field-header\">\n {{ field.config.displayLabel || field.config.label }}\n </dt>\n <dd class=\"psdk-csf-secondary-field-data\">\n <div [ngSwitch]=\"field.type\">\n <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n </div>\n </dd>\n </div>\n </ng-template>\n </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{padding:1rem;display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-secondary-value{font-size:1rem}\n"] }]
|
|
16643
17304
|
}], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { status$: [{
|
|
16644
17305
|
type: Input
|
|
16645
17306
|
}], bShowStatus$: [{
|
|
@@ -16839,17 +17500,19 @@ class OperatorComponent {
|
|
|
16839
17500
|
}
|
|
16840
17501
|
updateSelf() {
|
|
16841
17502
|
const configProps$ = this.pConn$.getConfigProps();
|
|
16842
|
-
|
|
17503
|
+
this.displayLabel = this.displayLabel?.toLowerCase();
|
|
17504
|
+
const label = configProps$?.label?.toLowerCase();
|
|
17505
|
+
if (label === 'create operator' || this.displayLabel === 'create operator') {
|
|
16843
17506
|
this.name$ = configProps$.createOperator.userName;
|
|
16844
17507
|
this.id$ = configProps$.createOperator.userId;
|
|
16845
17508
|
this.label$ = configProps$.createLabel;
|
|
16846
17509
|
}
|
|
16847
|
-
else if (
|
|
17510
|
+
else if (label === 'update operator' || this.displayLabel === 'update operator') {
|
|
16848
17511
|
this.name$ = configProps$.updateOperator.userName;
|
|
16849
17512
|
this.id$ = configProps$.updateOperator.userId;
|
|
16850
17513
|
this.label$ = configProps$.updateLabel;
|
|
16851
17514
|
}
|
|
16852
|
-
else if (
|
|
17515
|
+
else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
|
|
16853
17516
|
this.name$ = configProps$.resolveOperator.userName;
|
|
16854
17517
|
this.id$ = configProps$.resolveOperator.userId;
|
|
16855
17518
|
this.label$ = configProps$.resolveLabel;
|
|
@@ -16931,13 +17594,15 @@ class OperatorComponent {
|
|
|
16931
17594
|
});
|
|
16932
17595
|
}
|
|
16933
17596
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OperatorComponent, isStandalone: true, selector: "app-operator", inputs: { pConn$: "pConn$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-operator psdk-double\">\n <div class=\"psdk-label\">\n {{ label$ }}\n </div>\n <div class=\"psdk-double\">\n <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n </div>\n <div>{{ date$ }}</div>\n</div>\n\n<div>\n <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n <dl>\n <div *ngFor=\"let field of fields$; let i = index\">\n <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n </div>\n </dl>\n </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:var(--app-neutral-color);align-items:center}.psdk-operator-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-operator-name{color:var(--app-neutral-color)}.psdk-operator-value{padding-left:5px;color:var(--app-neutral-dark-color);margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:var(--app-field-header-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
17597
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OperatorComponent, isStandalone: true, selector: "app-operator", inputs: { pConn$: "pConn$", displayLabel: "displayLabel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-operator psdk-double\">\n <div class=\"psdk-label\">\n {{ label$ }}\n </div>\n <div class=\"psdk-double\">\n <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n </div>\n <div>{{ date$ }}</div>\n</div>\n\n<div>\n <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n <dl>\n <div *ngFor=\"let field of fields$; let i = index\">\n <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n </div>\n </dl>\n </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:var(--app-neutral-color);align-items:center}.psdk-operator-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-operator-name{color:var(--app-neutral-color)}.psdk-operator-value{padding-left:5px;color:var(--app-neutral-dark-color);margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:var(--app-field-header-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
16935
17598
|
}
|
|
16936
17599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperatorComponent, decorators: [{
|
|
16937
17600
|
type: Component,
|
|
16938
17601
|
args: [{ selector: 'app-operator', standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-operator psdk-double\">\n <div class=\"psdk-label\">\n {{ label$ }}\n </div>\n <div class=\"psdk-double\">\n <button mat-button color=\"primary\" style=\"text-decoration: underline\" (click)=\"showOperator()\">{{ name$ }}</button>\n </div>\n <div>{{ date$ }}</div>\n</div>\n\n<div>\n <div *ngIf=\"bShowPopover$\" class=\"psdk-operator-popover\">\n <dl>\n <div *ngFor=\"let field of fields$; let i = index\">\n <dt class=\"psdk-operator-name\">{{ field.name }}</dt>\n <dd class=\"psdk-operator-value\">{{ field.value }}</dd>\n </div>\n </dl>\n </div>\n</div>\n", styles: [".psdk-operator{display:flex;flex-direction:row;font-size:.8rem;color:var(--app-neutral-color);align-items:center}.psdk-operator-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-operator-name{color:var(--app-neutral-color)}.psdk-operator-value{padding-left:5px;color:var(--app-neutral-dark-color);margin:0}.psdk-single{flex:1}.psdk-double{column-gap:1rem;text-align:center}.psdk-top-pad{padding-top:10px}dl{display:grid;grid-template-columns:auto 1fr;grid-column-gap:1rem;grid-row-gap:.5rem}dl:before,dl:after{box-sizing:border-box;margin:0;padding:0}dt{max-width:20ch;grid-column-start:1}dd{max-width:75ch;grid-column-start:2}.mat-mdc-button.mat-primary,.mat-mdc-icon-button.mat-primary,.mat-mdc-outlined-button.mat-primary{padding:0;line-height:unset}.psdk-label{word-break:break-word;grid-column-start:1;max-width:max-content;color:var(--app-field-header-color)}\n"] }]
|
|
16939
17602
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
16940
17603
|
type: Input
|
|
17604
|
+
}], displayLabel: [{
|
|
17605
|
+
type: Input
|
|
16941
17606
|
}] } });
|
|
16942
17607
|
|
|
16943
17608
|
class PulseComponent {
|
|
@@ -17138,6 +17803,7 @@ const pegaSdkComponentMap = {
|
|
|
17138
17803
|
MaterialUtility: MaterialUtilityComponent,
|
|
17139
17804
|
ModalViewContainer: ModalViewContainerComponent,
|
|
17140
17805
|
MultiReferenceReadOnly: MultiReferenceReadonlyComponent,
|
|
17806
|
+
Multiselect: MultiselectComponent,
|
|
17141
17807
|
MultiStep: MultiStepComponent,
|
|
17142
17808
|
// 'NarrowWide': NarrowWideFormComponent,
|
|
17143
17809
|
NarrowWideDetails: DetailsNarrowWideComponent,
|