@pega/angular-sdk-components 0.23.5 → 0.23.7
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/_components/field/auto-complete/auto-complete.component.mjs +2 -2
- package/esm2022/lib/_components/field/group/group.component.mjs +6 -3
- 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/multi-step/multi-step.component.mjs +3 -3
- 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 +22 -24
- package/esm2022/lib/_components/template/list-view/utils.mjs +5 -3
- 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/_directives/thousand-seperator.directive.mjs +5 -2
- package/fesm2022/pega-angular-sdk-components.mjs +95 -51
- package/fesm2022/pega-angular-sdk-components.mjs.map +1 -1
- 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/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/doc/KeyReleaseUpdates.md +63 -0
- package/package.json +1 -1
|
@@ -2829,11 +2829,11 @@ class MultiStepComponent {
|
|
|
2829
2829
|
return index < this.arNavigationSteps$.length - 1;
|
|
2830
2830
|
}
|
|
2831
2831
|
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"] }] }); }
|
|
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;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
2833
|
}
|
|
2834
2834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, decorators: [{
|
|
2835
2835
|
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"] }]
|
|
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;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
2837
|
}], ctorParameters: function () { return [{ type: Utils }]; }, propDecorators: { pConn$: [{
|
|
2838
2838
|
type: Input
|
|
2839
2839
|
}], formGroup$: [{
|
|
@@ -4009,7 +4009,7 @@ class AutoCompleteComponent {
|
|
|
4009
4009
|
}
|
|
4010
4010
|
_filter(value) {
|
|
4011
4011
|
const filterVal = (value || this.filterValue).toLowerCase();
|
|
4012
|
-
return this.options$?.filter(option => option.value
|
|
4012
|
+
return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
|
|
4013
4013
|
}
|
|
4014
4014
|
// Callback passed when subscribing to store change
|
|
4015
4015
|
async onStateChange() {
|
|
@@ -6377,7 +6377,10 @@ class ThousandSeparatorDirective {
|
|
|
6377
6377
|
const input = this.el.nativeElement;
|
|
6378
6378
|
let value = input.value.replace(/,/g, ''); // Remove existing commas
|
|
6379
6379
|
if (event?.data !== '.') {
|
|
6380
|
-
|
|
6380
|
+
if (Number.isNaN(Number(value))) {
|
|
6381
|
+
value = value.slice(0, -1);
|
|
6382
|
+
}
|
|
6383
|
+
value = value ? Number(value).toLocaleString() : ''; // Add thousands separator
|
|
6381
6384
|
input.value = value;
|
|
6382
6385
|
}
|
|
6383
6386
|
}
|
|
@@ -6884,6 +6887,9 @@ class GroupComponent {
|
|
|
6884
6887
|
this.heading$ = this.configProps$.heading;
|
|
6885
6888
|
this.instructions$ = this.configProps$.instructions;
|
|
6886
6889
|
this.collapsible$ = this.configProps$.collapsible;
|
|
6890
|
+
if (this.configProps$.visibility === undefined) {
|
|
6891
|
+
this.visibility$ = this.pConn$.getComputedVisibility();
|
|
6892
|
+
}
|
|
6887
6893
|
if (this.configProps$.displayMode === 'LABELS_LEFT') {
|
|
6888
6894
|
if (this.configProps$.visibility === undefined)
|
|
6889
6895
|
this.visibility$ = true;
|
|
@@ -6896,11 +6902,11 @@ class GroupComponent {
|
|
|
6896
6902
|
}
|
|
6897
6903
|
}
|
|
6898
6904
|
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
|
|
6905
|
+
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
6906
|
}
|
|
6901
6907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupComponent, decorators: [{
|
|
6902
6908
|
type: Component,
|
|
6903
|
-
args: [{ selector: 'app-group', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<ng-container *ngIf=\"visibility
|
|
6909
|
+
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
6910
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }]; }, propDecorators: { pConn$: [{
|
|
6905
6911
|
type: Input
|
|
6906
6912
|
}], formGroup$: [{
|
|
@@ -8087,6 +8093,7 @@ class TimeComponent {
|
|
|
8087
8093
|
this.bDisabled$ = false;
|
|
8088
8094
|
this.bVisible$ = true;
|
|
8089
8095
|
this.displayMode$ = '';
|
|
8096
|
+
this.testId = '';
|
|
8090
8097
|
this.bHasForm$ = true;
|
|
8091
8098
|
this.componentReference = '';
|
|
8092
8099
|
this.fieldControl = new FormControl('', null);
|
|
@@ -8135,6 +8142,7 @@ class TimeComponent {
|
|
|
8135
8142
|
updateSelf() {
|
|
8136
8143
|
// moved this from ngOnInit() and call this from there instead...
|
|
8137
8144
|
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
|
|
8145
|
+
this.testId = this.configProps$.testId;
|
|
8138
8146
|
this.label$ = this.configProps$.label;
|
|
8139
8147
|
this.displayMode$ = this.configProps$.displayMode;
|
|
8140
8148
|
if (this.configProps$.value != undefined) {
|
|
@@ -8200,11 +8208,11 @@ class TimeComponent {
|
|
|
8200
8208
|
return errMessage;
|
|
8201
8209
|
}
|
|
8202
8210
|
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"] }] }); }
|
|
8211
|
+
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
8212
|
}
|
|
8205
8213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeComponent, decorators: [{
|
|
8206
8214
|
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"] }]
|
|
8215
|
+
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
8216
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8209
8217
|
type: Input
|
|
8210
8218
|
}], formGroup$: [{
|
|
@@ -8225,6 +8233,7 @@ class UrlComponent {
|
|
|
8225
8233
|
this.bDisabled$ = false;
|
|
8226
8234
|
this.bVisible$ = true;
|
|
8227
8235
|
this.displayMode$ = '';
|
|
8236
|
+
this.testId = '';
|
|
8228
8237
|
this.bHasForm$ = true;
|
|
8229
8238
|
this.componentReference = '';
|
|
8230
8239
|
this.fieldControl = new FormControl('', null);
|
|
@@ -8276,6 +8285,7 @@ class UrlComponent {
|
|
|
8276
8285
|
if (this.configProps$.value != undefined) {
|
|
8277
8286
|
this.value$ = this.configProps$.value;
|
|
8278
8287
|
}
|
|
8288
|
+
this.testId = this.configProps$.testId;
|
|
8279
8289
|
this.label$ = this.configProps$.label;
|
|
8280
8290
|
this.displayMode$ = this.configProps$.displayMode;
|
|
8281
8291
|
this.helperText = this.configProps$.helperText;
|
|
@@ -8336,11 +8346,11 @@ class UrlComponent {
|
|
|
8336
8346
|
return errMessage;
|
|
8337
8347
|
}
|
|
8338
8348
|
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"] }] }); }
|
|
8349
|
+
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
8350
|
}
|
|
8341
8351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlComponent, decorators: [{
|
|
8342
8352
|
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"] }]
|
|
8353
|
+
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
8354
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8345
8355
|
type: Input
|
|
8346
8356
|
}], formGroup$: [{
|
|
@@ -8674,11 +8684,11 @@ class RichTextComponent {
|
|
|
8674
8684
|
handleEvent(actionsApi, 'changeNblur', propName, editorValue);
|
|
8675
8685
|
}
|
|
8676
8686
|
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
|
|
8687
|
+
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
8688
|
}
|
|
8679
8689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextComponent, decorators: [{
|
|
8680
8690
|
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
|
|
8691
|
+
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
8692
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
|
|
8683
8693
|
type: Input
|
|
8684
8694
|
}], formGroup$: [{
|
|
@@ -10261,18 +10271,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10261
10271
|
}] } });
|
|
10262
10272
|
|
|
10263
10273
|
class FieldValueListComponent {
|
|
10274
|
+
constructor() {
|
|
10275
|
+
this.isHtml$ = false;
|
|
10276
|
+
}
|
|
10264
10277
|
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
|
|
10278
|
+
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
10279
|
}
|
|
10267
10280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldValueListComponent, decorators: [{
|
|
10268
10281
|
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
|
|
10282
|
+
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
10283
|
}], propDecorators: { label$: [{
|
|
10271
10284
|
type: Input
|
|
10272
10285
|
}], value$: [{
|
|
10273
10286
|
type: Input
|
|
10274
10287
|
}], displayMode$: [{
|
|
10275
10288
|
type: Input
|
|
10289
|
+
}], isHtml$: [{
|
|
10290
|
+
type: Input
|
|
10276
10291
|
}] } });
|
|
10277
10292
|
|
|
10278
10293
|
class InlineDashboardComponent {
|
|
@@ -11160,10 +11175,12 @@ const readContextResponse = async (context, params) => {
|
|
|
11160
11175
|
const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
|
|
11161
11176
|
const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
|
|
11162
11177
|
dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
|
|
11163
|
-
if (compositeKeys.length) {
|
|
11178
|
+
if (compositeKeys.length && otherContext) {
|
|
11164
11179
|
otherContext.setCompositeKeys(compositeKeys);
|
|
11165
11180
|
}
|
|
11166
|
-
otherContext
|
|
11181
|
+
if (otherContext) {
|
|
11182
|
+
otherContext.fetchRowActionDetails = null;
|
|
11183
|
+
}
|
|
11167
11184
|
}
|
|
11168
11185
|
const presetArray = [];
|
|
11169
11186
|
const rawMetadata = pConn$.getRawMetadata().config;
|
|
@@ -11699,9 +11716,6 @@ class ListViewComponent {
|
|
|
11699
11716
|
}
|
|
11700
11717
|
}
|
|
11701
11718
|
}
|
|
11702
|
-
compare(a, b, isAsc) {
|
|
11703
|
-
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
|
11704
|
-
}
|
|
11705
11719
|
_headerSortClick(event, columnData) {
|
|
11706
11720
|
// images 0 - filter, 1 - arrow, 2 - more
|
|
11707
11721
|
/** Commenting this code for now as it is giving errors not sure if it ever worked */
|
|
@@ -11728,20 +11742,21 @@ class ListViewComponent {
|
|
|
11728
11742
|
this.arrowDirection = this.arrowDirection === 'up' ? 'down' : 'up';
|
|
11729
11743
|
this.filterSortGroupBy();
|
|
11730
11744
|
}
|
|
11731
|
-
|
|
11732
|
-
|
|
11733
|
-
|
|
11734
|
-
|
|
11735
|
-
|
|
11736
|
-
|
|
11737
|
-
|
|
11738
|
-
|
|
11739
|
-
|
|
11740
|
-
|
|
11741
|
-
|
|
11742
|
-
|
|
11743
|
-
|
|
11744
|
-
}
|
|
11745
|
+
// Commenting below method, since the code which is using it, is already commented
|
|
11746
|
+
// clearOutArrows(event, columnData) {
|
|
11747
|
+
// const arImages = event.srcElement.parentElement.getElementsByTagName('img');
|
|
11748
|
+
// for (const theImage of arImages) {
|
|
11749
|
+
// // let theImage = arImages[i]
|
|
11750
|
+
// const arrow = theImage.getAttribute('arrow');
|
|
11751
|
+
// if (arrow) {
|
|
11752
|
+
// const arrowId = theImage.getAttribute('arrowid');
|
|
11753
|
+
// if (arrow != 'none' && arrowId != columnData.config.name) {
|
|
11754
|
+
// theImage.setAttribute('arrow', 'none');
|
|
11755
|
+
// theImage.src = '';
|
|
11756
|
+
// }
|
|
11757
|
+
// }
|
|
11758
|
+
// }
|
|
11759
|
+
// }
|
|
11745
11760
|
sortCompare(a, b) {
|
|
11746
11761
|
let aValue = a[this.compareRef];
|
|
11747
11762
|
let bValue = b[this.compareRef];
|
|
@@ -11757,18 +11772,18 @@ class ListViewComponent {
|
|
|
11757
11772
|
}
|
|
11758
11773
|
switch (this.arrowDirection) {
|
|
11759
11774
|
case 'up':
|
|
11760
|
-
if (aValue < bValue) {
|
|
11775
|
+
if (!aValue || aValue < bValue) {
|
|
11761
11776
|
return -1;
|
|
11762
11777
|
}
|
|
11763
|
-
if (aValue > bValue) {
|
|
11778
|
+
if (!bValue || aValue > bValue) {
|
|
11764
11779
|
return 1;
|
|
11765
11780
|
}
|
|
11766
11781
|
break;
|
|
11767
11782
|
case 'down':
|
|
11768
|
-
if (aValue > bValue) {
|
|
11783
|
+
if (!bValue || aValue > bValue) {
|
|
11769
11784
|
return -1;
|
|
11770
11785
|
}
|
|
11771
|
-
if (aValue < bValue) {
|
|
11786
|
+
if (!aValue || aValue < bValue) {
|
|
11772
11787
|
return 1;
|
|
11773
11788
|
}
|
|
11774
11789
|
break;
|
|
@@ -12385,7 +12400,7 @@ class ListViewComponent {
|
|
|
12385
12400
|
return select;
|
|
12386
12401
|
}
|
|
12387
12402
|
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 }); }
|
|
12388
|
-
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"] }] }); }
|
|
12403
|
+
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"] }] }); }
|
|
12389
12404
|
}
|
|
12390
12405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
12391
12406
|
type: Component,
|
|
@@ -12408,7 +12423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
12408
12423
|
MatOptionModule,
|
|
12409
12424
|
MatDatepickerModule,
|
|
12410
12425
|
forwardRef(() => ComponentMapperComponent)
|
|
12411
|
-
], 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"] }]
|
|
12426
|
+
], 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"] }]
|
|
12412
12427
|
}], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: Utils }]; }, propDecorators: { paginator: [{
|
|
12413
12428
|
type: ViewChild,
|
|
12414
12429
|
args: [MatPaginator]
|
|
@@ -12860,7 +12875,7 @@ const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
|
|
|
12860
12875
|
type: 'text',
|
|
12861
12876
|
label: fields[index].config.label || fields[index].config.caption,
|
|
12862
12877
|
fillAvailableSpace: !!field.config.fillAvailableSpace,
|
|
12863
|
-
id: index
|
|
12878
|
+
id: `${index}`,
|
|
12864
12879
|
name: field.config.value.substr(4),
|
|
12865
12880
|
cellRenderer: TABLE_CELL,
|
|
12866
12881
|
sort: false,
|
|
@@ -13150,8 +13165,10 @@ class SimpleTableManualComponent {
|
|
|
13150
13165
|
this.arFilterMainButtons$ = [];
|
|
13151
13166
|
this.arFilterSecondaryButtons$ = [];
|
|
13152
13167
|
this.allowEditingInModal = false;
|
|
13168
|
+
this.isInitialized = false;
|
|
13153
13169
|
}
|
|
13154
13170
|
ngOnInit() {
|
|
13171
|
+
this.isInitialized = true;
|
|
13155
13172
|
// First thing in initialization is registering and subscribing to the AngularPConnect service
|
|
13156
13173
|
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
|
|
13157
13174
|
this.configProps$ = this.pConn$.getConfigProps();
|
|
@@ -13255,6 +13272,7 @@ class SimpleTableManualComponent {
|
|
|
13255
13272
|
// unchanged config info. For now, much of the info here is carried over from
|
|
13256
13273
|
// Nebula and we may not end up using it all.
|
|
13257
13274
|
this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
|
|
13275
|
+
this.initializeDefaultPageInstructions();
|
|
13258
13276
|
// end of from Nebula
|
|
13259
13277
|
// Here, we use the "name" field in fieldDefs since that has the assoicated property
|
|
13260
13278
|
// (if one exists for the field). If no "name", use "cellRenderer" (typically get DELETE_ICON)
|
|
@@ -13294,6 +13312,18 @@ class SimpleTableManualComponent {
|
|
|
13294
13312
|
// Note that the "property" shown in the column ("FirstName" in the above examples) is what
|
|
13295
13313
|
// ties the 3 data structures together.
|
|
13296
13314
|
}
|
|
13315
|
+
initializeDefaultPageInstructions() {
|
|
13316
|
+
if (this.isInitialized) {
|
|
13317
|
+
this.isInitialized = false;
|
|
13318
|
+
if (this.allowEditingInModal) {
|
|
13319
|
+
this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), this.fieldDefs.filter(item => item.name).map(item => item.name));
|
|
13320
|
+
}
|
|
13321
|
+
else {
|
|
13322
|
+
// @ts-ignore - An argument for 'fields' was not provided
|
|
13323
|
+
this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
|
|
13324
|
+
}
|
|
13325
|
+
}
|
|
13326
|
+
}
|
|
13297
13327
|
getResultsText() {
|
|
13298
13328
|
const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
|
|
13299
13329
|
return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
|
|
@@ -13311,13 +13341,27 @@ class SimpleTableManualComponent {
|
|
|
13311
13341
|
return result;
|
|
13312
13342
|
}
|
|
13313
13343
|
}
|
|
13314
|
-
|
|
13315
|
-
|
|
13344
|
+
//
|
|
13345
|
+
switch (this.arrowDirection) {
|
|
13346
|
+
case 'up':
|
|
13347
|
+
if (!aValue || aValue < bValue) {
|
|
13348
|
+
return -1;
|
|
13349
|
+
}
|
|
13350
|
+
if (!bValue || aValue > bValue) {
|
|
13351
|
+
return 1;
|
|
13352
|
+
}
|
|
13353
|
+
break;
|
|
13354
|
+
case 'down':
|
|
13355
|
+
if (!bValue || aValue > bValue) {
|
|
13356
|
+
return -1;
|
|
13357
|
+
}
|
|
13358
|
+
if (!aValue || aValue < bValue) {
|
|
13359
|
+
return 1;
|
|
13360
|
+
}
|
|
13361
|
+
break;
|
|
13362
|
+
default:
|
|
13363
|
+
break;
|
|
13316
13364
|
}
|
|
13317
|
-
if (this.arrowDirection === 'up')
|
|
13318
|
-
return aValue - bValue;
|
|
13319
|
-
if (this.arrowDirection === 'down')
|
|
13320
|
-
return bValue - aValue;
|
|
13321
13365
|
return 0;
|
|
13322
13366
|
}
|
|
13323
13367
|
compareByColumnPxRefObjectInsName(aValue, bValue) {
|
|
@@ -13757,13 +13801,13 @@ class SimpleTableManualComponent {
|
|
|
13757
13801
|
.getActionsApi()
|
|
13758
13802
|
.openEmbeddedDataModal(this.defaultView, this.pConn$, this.referenceListStr, this.referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
|
|
13759
13803
|
}
|
|
13760
|
-
else if (PCore.getPCoreVersion()?.includes('8.7')) {
|
|
13761
|
-
this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
|
|
13762
|
-
}
|
|
13763
13804
|
else {
|
|
13764
13805
|
// @ts-ignore - second parameter "pageRef" is optional for insert method
|
|
13765
13806
|
this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
|
|
13766
13807
|
}
|
|
13808
|
+
this.pConn$.clearErrorMessages({
|
|
13809
|
+
property: this.pConn$.getStateProps()?.referenceList?.substring(1)
|
|
13810
|
+
});
|
|
13767
13811
|
}
|
|
13768
13812
|
editRecord(data, index) {
|
|
13769
13813
|
if (data) {
|
|
@@ -13809,7 +13853,7 @@ class SimpleTableManualComponent {
|
|
|
13809
13853
|
this.elementsData = eleData;
|
|
13810
13854
|
}
|
|
13811
13855
|
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 }); }
|
|
13812
|
-
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"] }] }); }
|
|
13856
|
+
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"] }] }); }
|
|
13813
13857
|
}
|
|
13814
13858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
|
|
13815
13859
|
type: Component,
|
|
@@ -13825,7 +13869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13825
13869
|
MatSelectModule,
|
|
13826
13870
|
MatInputModule,
|
|
13827
13871
|
forwardRef(() => ComponentMapperComponent)
|
|
13828
|
-
], 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"] }]
|
|
13872
|
+
], 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"] }]
|
|
13829
13873
|
}], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }, { type: DatapageService }]; }, propDecorators: { sort: [{
|
|
13830
13874
|
type: ViewChild,
|
|
13831
13875
|
args: [MatSort]
|