tin-spa 2.3.9 → 2.3.10
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/esm2020/lib/classes/Classes.mjs +1 -1
- package/esm2020/lib/components/alert/alert.component.mjs +4 -4
- package/esm2020/lib/components/table/table.component.mjs +3 -4
- package/esm2020/lib/components/table-action/table-action.component.mjs +1 -1
- package/esm2020/lib/components/table-header/table-header.component.mjs +39 -15
- package/esm2020/lib/components/table-internal/table-internal.component.mjs +8 -11
- package/esm2020/lib/services/button.service.mjs +4 -2
- package/fesm2015/tin-spa.mjs +87 -61
- package/fesm2015/tin-spa.mjs.map +1 -1
- package/fesm2020/tin-spa.mjs +78 -55
- package/fesm2020/tin-spa.mjs.map +1 -1
- package/lib/classes/Classes.d.ts +3 -0
- package/lib/components/table/table.component.d.ts +0 -1
- package/lib/components/table-action/table-action.component.d.ts +1 -1
- package/lib/components/table-header/table-header.component.d.ts +12 -3
- package/lib/components/table-internal/table-internal.component.d.ts +0 -1
- package/package.json +1 -1
package/fesm2015/tin-spa.mjs
CHANGED
|
@@ -3138,6 +3138,8 @@ class ButtonService {
|
|
|
3138
3138
|
var _a;
|
|
3139
3139
|
if (this.isButtonDisabled(button, row))
|
|
3140
3140
|
return 'lightgray';
|
|
3141
|
+
if (button === null || button === void 0 ? void 0 : button.color)
|
|
3142
|
+
return button.color;
|
|
3141
3143
|
if ((_a = button.icon) === null || _a === void 0 ? void 0 : _a.color)
|
|
3142
3144
|
return button.icon.color;
|
|
3143
3145
|
const colorMap = {
|
|
@@ -3199,7 +3201,7 @@ class ButtonService {
|
|
|
3199
3201
|
return buttons === null || buttons === void 0 ? void 0 : buttons.find(button => (button === null || button === void 0 ? void 0 : button.name) === 'create');
|
|
3200
3202
|
}
|
|
3201
3203
|
getDisplayedButtons(buttons, isSmallScreen, minButtons) {
|
|
3202
|
-
const nonCreateButtons = buttons === null || buttons === void 0 ? void 0 : buttons.filter(x => x.name !== 'create');
|
|
3204
|
+
const nonCreateButtons = buttons === null || buttons === void 0 ? void 0 : buttons.filter(x => x.name !== 'create' && !x.inHeader);
|
|
3203
3205
|
if (isSmallScreen) {
|
|
3204
3206
|
if (minButtons) {
|
|
3205
3207
|
return nonCreateButtons.filter(x => minButtons.includes(x.name));
|
|
@@ -3662,11 +3664,13 @@ class AlertComponent {
|
|
|
3662
3664
|
ngOnInit() {
|
|
3663
3665
|
}
|
|
3664
3666
|
getAlertMessages(type = undefined) {
|
|
3665
|
-
|
|
3667
|
+
var _a;
|
|
3668
|
+
return (_a = this.alertMessages) === null || _a === void 0 ? void 0 : _a.messages.filter(x => x.type === type);
|
|
3666
3669
|
}
|
|
3667
3670
|
hasAlertMessages(type = undefined) {
|
|
3668
|
-
|
|
3669
|
-
|
|
3671
|
+
var _a;
|
|
3672
|
+
let has = ((_a = this.alertMessages) === null || _a === void 0 ? void 0 : _a.messages.filter(x => x.type === type).length) > 0;
|
|
3673
|
+
return has;
|
|
3670
3674
|
}
|
|
3671
3675
|
testVisible(msg) {
|
|
3672
3676
|
return msg.hiddenCondition ? !msg.hiddenCondition(this.data) : true;
|
|
@@ -3976,6 +3980,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3976
3980
|
type: Output
|
|
3977
3981
|
}] } });
|
|
3978
3982
|
|
|
3983
|
+
class TableHeaderComponent {
|
|
3984
|
+
constructor(buttonService) {
|
|
3985
|
+
this.buttonService = buttonService;
|
|
3986
|
+
// @Input() displayedButtons: Button[];
|
|
3987
|
+
this.createClick = new EventEmitter();
|
|
3988
|
+
this.customClick = new EventEmitter();
|
|
3989
|
+
this.refreshClick = new EventEmitter();
|
|
3990
|
+
this.tileClick = new EventEmitter();
|
|
3991
|
+
}
|
|
3992
|
+
ngOnInit() {
|
|
3993
|
+
var _a;
|
|
3994
|
+
this.createButton = this.buttonService.getCreateButton((_a = this.config) === null || _a === void 0 ? void 0 : _a.buttons);
|
|
3995
|
+
}
|
|
3996
|
+
onButtonClick(button) {
|
|
3997
|
+
if (button.name === 'create') {
|
|
3998
|
+
this.createClick.emit();
|
|
3999
|
+
}
|
|
4000
|
+
else {
|
|
4001
|
+
this.customClick.emit(button.name);
|
|
4002
|
+
}
|
|
4003
|
+
}
|
|
4004
|
+
onRefreshClick() {
|
|
4005
|
+
this.refreshClick.emit();
|
|
4006
|
+
}
|
|
4007
|
+
onTileClick(tileName) {
|
|
4008
|
+
this.tileClick.emit(tileName);
|
|
4009
|
+
}
|
|
4010
|
+
getHeaderButtons() {
|
|
4011
|
+
return this.config.buttons.filter(b => b.name == 'create' || b.inHeader);
|
|
4012
|
+
}
|
|
4013
|
+
testVisible(button) {
|
|
4014
|
+
return this.buttonService.testVisible(button, this.config.parentData);
|
|
4015
|
+
}
|
|
4016
|
+
testDisabled(button) {
|
|
4017
|
+
return this.buttonService.testDisabled(button, this.config.parentData);
|
|
4018
|
+
}
|
|
4019
|
+
getButtonColor(button, row) {
|
|
4020
|
+
return this.buttonService.getButtonColor(button, row);
|
|
4021
|
+
}
|
|
4022
|
+
}
|
|
4023
|
+
TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4024
|
+
TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick" }, ngImport: i0, template: "<div class=\"top\">\r\n\r\n <!-- buttons -->\r\n <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n <ng-container *ngIf=\"testVisible(button)\" >\r\n <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n {{button.display}}\r\n </button>\r\n <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n {{button.display}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace\"></div>\r\n\r\n <!-- tiles -->\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n </div>\r\n\r\n <!-- filter -->\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n </div>\r\n <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
4026
|
+
type: Component,
|
|
4027
|
+
args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n\r\n <!-- buttons -->\r\n <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n <ng-container *ngIf=\"testVisible(button)\" >\r\n <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n {{button.display}}\r\n </button>\r\n <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n {{button.display}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace\"></div>\r\n\r\n <!-- tiles -->\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n </div>\r\n\r\n <!-- filter -->\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n </div>\r\n <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
|
|
4028
|
+
}], ctorParameters: function () { return [{ type: ButtonService }]; }, propDecorators: { config: [{
|
|
4029
|
+
type: Input
|
|
4030
|
+
}], hideTitle: [{
|
|
4031
|
+
type: Input
|
|
4032
|
+
}], tableDataSource: [{
|
|
4033
|
+
type: Input
|
|
4034
|
+
}], tileConfig: [{
|
|
4035
|
+
type: Input
|
|
4036
|
+
}], smallScreen: [{
|
|
4037
|
+
type: Input
|
|
4038
|
+
}], tileReload: [{
|
|
4039
|
+
type: Input
|
|
4040
|
+
}], showFilterButton: [{
|
|
4041
|
+
type: Input
|
|
4042
|
+
}], createClick: [{
|
|
4043
|
+
type: Output
|
|
4044
|
+
}], customClick: [{
|
|
4045
|
+
type: Output
|
|
4046
|
+
}], refreshClick: [{
|
|
4047
|
+
type: Output
|
|
4048
|
+
}], tileClick: [{
|
|
4049
|
+
type: Output
|
|
4050
|
+
}] } });
|
|
4051
|
+
|
|
3979
4052
|
class TableRowComponent {
|
|
3980
4053
|
constructor(buttonService) {
|
|
3981
4054
|
this.buttonService = buttonService;
|
|
@@ -4110,14 +4183,13 @@ class TableInternalComponent {
|
|
|
4110
4183
|
this.formDefaults();
|
|
4111
4184
|
}
|
|
4112
4185
|
updateTableConfiguration() {
|
|
4113
|
-
var _a, _b, _c, _d, _e
|
|
4186
|
+
var _a, _b, _c, _d, _e;
|
|
4114
4187
|
this.elevation = this.getElevationClass((_a = this.config) === null || _a === void 0 ? void 0 : _a.elevation);
|
|
4115
4188
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
4116
4189
|
this.displayedButtons = this.buttonService.getDisplayedButtons((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons, this.smallScreen, (_c = this.config) === null || _c === void 0 ? void 0 : _c.minButtons);
|
|
4117
4190
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
4118
|
-
this.
|
|
4119
|
-
|
|
4120
|
-
if (((_f = this.displayedButtons) === null || _f === void 0 ? void 0 : _f.length) > 0 && !this.displayedColumns.includes('action')) {
|
|
4191
|
+
this.showFilterButton = !((_d = this.config) === null || _d === void 0 ? void 0 : _d.searchConfig);
|
|
4192
|
+
if (((_e = this.displayedButtons) === null || _e === void 0 ? void 0 : _e.length) > 0 && !this.displayedColumns.includes('action')) {
|
|
4121
4193
|
this.displayedColumns.push('action');
|
|
4122
4194
|
}
|
|
4123
4195
|
}
|
|
@@ -4422,10 +4494,10 @@ class TableInternalComponent {
|
|
|
4422
4494
|
}
|
|
4423
4495
|
}
|
|
4424
4496
|
TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4425
|
-
TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<
|
|
4497
|
+
TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- <div class=\"top\">\r\n\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div> -->\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton"], outputs: ["createClick", "customClick", "refreshClick", "tileClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4426
4498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
|
|
4427
4499
|
type: Component,
|
|
4428
|
-
args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<
|
|
4500
|
+
args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- <div class=\"top\">\r\n\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div> -->\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
4429
4501
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
4430
4502
|
type: ViewChild,
|
|
4431
4503
|
args: ['tablePaginator']
|
|
@@ -4668,51 +4740,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4668
4740
|
}] } });
|
|
4669
4741
|
;
|
|
4670
4742
|
|
|
4671
|
-
class TableHeaderComponent {
|
|
4672
|
-
constructor() {
|
|
4673
|
-
this.createClick = new EventEmitter();
|
|
4674
|
-
this.refreshClick = new EventEmitter();
|
|
4675
|
-
this.tileClick = new EventEmitter();
|
|
4676
|
-
}
|
|
4677
|
-
onCreateClick() {
|
|
4678
|
-
this.createClick.emit();
|
|
4679
|
-
}
|
|
4680
|
-
onRefreshClick() {
|
|
4681
|
-
this.refreshClick.emit();
|
|
4682
|
-
}
|
|
4683
|
-
onTileClick(tileName) {
|
|
4684
|
-
this.tileClick.emit(tileName);
|
|
4685
|
-
}
|
|
4686
|
-
}
|
|
4687
|
-
TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4688
|
-
TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", createButton: "createButton", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton" }, outputs: { createClick: "createClick", refreshClick: "refreshClick", tileClick: "tileClick" }, ngImport: i0, template: "<div class=\"top\">\r\n <div class=\"tin-row\">\r\n <ng-container *ngIf=\"createButton\">\r\n <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" (click)=\"onCreateClick()\" style=\"margin-right: 10px;\">\r\n {{createButton.display}}\r\n </button>\r\n <button *ngIf=\"config.flatButtons\" mat-stroked-button (click)=\"onCreateClick()\" style=\"margin-right: 10px; color: green;\">\r\n {{createButton.display}}\r\n </button>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
4690
|
-
type: Component,
|
|
4691
|
-
args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n <div class=\"tin-row\">\r\n <ng-container *ngIf=\"createButton\">\r\n <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" (click)=\"onCreateClick()\" style=\"margin-right: 10px;\">\r\n {{createButton.display}}\r\n </button>\r\n <button *ngIf=\"config.flatButtons\" mat-stroked-button (click)=\"onCreateClick()\" style=\"margin-right: 10px; color: green;\">\r\n {{createButton.display}}\r\n </button>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
|
|
4692
|
-
}], propDecorators: { config: [{
|
|
4693
|
-
type: Input
|
|
4694
|
-
}], hideTitle: [{
|
|
4695
|
-
type: Input
|
|
4696
|
-
}], tableDataSource: [{
|
|
4697
|
-
type: Input
|
|
4698
|
-
}], createButton: [{
|
|
4699
|
-
type: Input
|
|
4700
|
-
}], tileConfig: [{
|
|
4701
|
-
type: Input
|
|
4702
|
-
}], smallScreen: [{
|
|
4703
|
-
type: Input
|
|
4704
|
-
}], tileReload: [{
|
|
4705
|
-
type: Input
|
|
4706
|
-
}], showFilterButton: [{
|
|
4707
|
-
type: Input
|
|
4708
|
-
}], createClick: [{
|
|
4709
|
-
type: Output
|
|
4710
|
-
}], refreshClick: [{
|
|
4711
|
-
type: Output
|
|
4712
|
-
}], tileClick: [{
|
|
4713
|
-
type: Output
|
|
4714
|
-
}] } });
|
|
4715
|
-
|
|
4716
4743
|
class TableComponent {
|
|
4717
4744
|
constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService) {
|
|
4718
4745
|
this.dataService = dataService;
|
|
@@ -4760,14 +4787,13 @@ class TableComponent {
|
|
|
4760
4787
|
this.formDefaults();
|
|
4761
4788
|
}
|
|
4762
4789
|
updateTableConfiguration() {
|
|
4763
|
-
var _a, _b, _c, _d, _e
|
|
4790
|
+
var _a, _b, _c, _d, _e;
|
|
4764
4791
|
this.elevation = this.getElevationClass((_a = this.config) === null || _a === void 0 ? void 0 : _a.elevation);
|
|
4765
4792
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
4766
4793
|
this.displayedButtons = this.buttonService.getDisplayedButtons((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons, this.smallScreen, (_c = this.config) === null || _c === void 0 ? void 0 : _c.minButtons);
|
|
4767
4794
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
4768
|
-
this.
|
|
4769
|
-
|
|
4770
|
-
if (((_f = this.displayedButtons) === null || _f === void 0 ? void 0 : _f.length) > 0 && !this.displayedColumns.includes('action')) {
|
|
4795
|
+
this.showFilterButton = !((_d = this.config) === null || _d === void 0 ? void 0 : _d.searchConfig);
|
|
4796
|
+
if (((_e = this.displayedButtons) === null || _e === void 0 ? void 0 : _e.length) > 0 && !this.displayedColumns.includes('action')) {
|
|
4771
4797
|
this.displayedColumns.push('action');
|
|
4772
4798
|
}
|
|
4773
4799
|
}
|
|
@@ -5072,10 +5098,10 @@ class TableComponent {
|
|
|
5072
5098
|
}
|
|
5073
5099
|
}
|
|
5074
5100
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5075
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [
|
|
5101
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action\r\n [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton"], outputs: ["createClick", "customClick", "refreshClick", "tileClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
5076
5102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
5077
5103
|
type: Component,
|
|
5078
|
-
args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [
|
|
5104
|
+
args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action\r\n [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
5079
5105
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
5080
5106
|
type: ViewChild,
|
|
5081
5107
|
args: ['tablePaginator']
|