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/fesm2020/tin-spa.mjs
CHANGED
|
@@ -3140,6 +3140,8 @@ class ButtonService {
|
|
|
3140
3140
|
getButtonColor(button, row) {
|
|
3141
3141
|
if (this.isButtonDisabled(button, row))
|
|
3142
3142
|
return 'lightgray';
|
|
3143
|
+
if (button?.color)
|
|
3144
|
+
return button.color;
|
|
3143
3145
|
if (button.icon?.color)
|
|
3144
3146
|
return button.icon.color;
|
|
3145
3147
|
const colorMap = {
|
|
@@ -3200,7 +3202,7 @@ class ButtonService {
|
|
|
3200
3202
|
return buttons?.find(button => button?.name === 'create');
|
|
3201
3203
|
}
|
|
3202
3204
|
getDisplayedButtons(buttons, isSmallScreen, minButtons) {
|
|
3203
|
-
const nonCreateButtons = buttons?.filter(x => x.name !== 'create');
|
|
3205
|
+
const nonCreateButtons = buttons?.filter(x => x.name !== 'create' && !x.inHeader);
|
|
3204
3206
|
if (isSmallScreen) {
|
|
3205
3207
|
if (minButtons) {
|
|
3206
3208
|
return nonCreateButtons.filter(x => minButtons.includes(x.name));
|
|
@@ -3657,11 +3659,11 @@ class AlertComponent {
|
|
|
3657
3659
|
ngOnInit() {
|
|
3658
3660
|
}
|
|
3659
3661
|
getAlertMessages(type = undefined) {
|
|
3660
|
-
return this.alertMessages
|
|
3662
|
+
return this.alertMessages?.messages.filter(x => x.type === type);
|
|
3661
3663
|
}
|
|
3662
3664
|
hasAlertMessages(type = undefined) {
|
|
3663
|
-
let
|
|
3664
|
-
return
|
|
3665
|
+
let has = this.alertMessages?.messages.filter(x => x.type === type).length > 0;
|
|
3666
|
+
return has;
|
|
3665
3667
|
}
|
|
3666
3668
|
testVisible(msg) {
|
|
3667
3669
|
return msg.hiddenCondition ? !msg.hiddenCondition(this.data) : true;
|
|
@@ -3964,6 +3966,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3964
3966
|
type: Output
|
|
3965
3967
|
}] } });
|
|
3966
3968
|
|
|
3969
|
+
class TableHeaderComponent {
|
|
3970
|
+
constructor(buttonService) {
|
|
3971
|
+
this.buttonService = buttonService;
|
|
3972
|
+
// @Input() displayedButtons: Button[];
|
|
3973
|
+
this.createClick = new EventEmitter();
|
|
3974
|
+
this.customClick = new EventEmitter();
|
|
3975
|
+
this.refreshClick = new EventEmitter();
|
|
3976
|
+
this.tileClick = new EventEmitter();
|
|
3977
|
+
}
|
|
3978
|
+
ngOnInit() {
|
|
3979
|
+
this.createButton = this.buttonService.getCreateButton(this.config?.buttons);
|
|
3980
|
+
}
|
|
3981
|
+
onButtonClick(button) {
|
|
3982
|
+
if (button.name === 'create') {
|
|
3983
|
+
this.createClick.emit();
|
|
3984
|
+
}
|
|
3985
|
+
else {
|
|
3986
|
+
this.customClick.emit(button.name);
|
|
3987
|
+
}
|
|
3988
|
+
}
|
|
3989
|
+
onRefreshClick() {
|
|
3990
|
+
this.refreshClick.emit();
|
|
3991
|
+
}
|
|
3992
|
+
onTileClick(tileName) {
|
|
3993
|
+
this.tileClick.emit(tileName);
|
|
3994
|
+
}
|
|
3995
|
+
getHeaderButtons() {
|
|
3996
|
+
return this.config.buttons.filter(b => b.name == 'create' || b.inHeader);
|
|
3997
|
+
}
|
|
3998
|
+
testVisible(button) {
|
|
3999
|
+
return this.buttonService.testVisible(button, this.config.parentData);
|
|
4000
|
+
}
|
|
4001
|
+
testDisabled(button) {
|
|
4002
|
+
return this.buttonService.testDisabled(button, this.config.parentData);
|
|
4003
|
+
}
|
|
4004
|
+
getButtonColor(button, row) {
|
|
4005
|
+
return this.buttonService.getButtonColor(button, row);
|
|
4006
|
+
}
|
|
4007
|
+
}
|
|
4008
|
+
TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4009
|
+
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" }] });
|
|
4010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
4011
|
+
type: Component,
|
|
4012
|
+
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"] }]
|
|
4013
|
+
}], ctorParameters: function () { return [{ type: ButtonService }]; }, propDecorators: { config: [{
|
|
4014
|
+
type: Input
|
|
4015
|
+
}], hideTitle: [{
|
|
4016
|
+
type: Input
|
|
4017
|
+
}], tableDataSource: [{
|
|
4018
|
+
type: Input
|
|
4019
|
+
}], tileConfig: [{
|
|
4020
|
+
type: Input
|
|
4021
|
+
}], smallScreen: [{
|
|
4022
|
+
type: Input
|
|
4023
|
+
}], tileReload: [{
|
|
4024
|
+
type: Input
|
|
4025
|
+
}], showFilterButton: [{
|
|
4026
|
+
type: Input
|
|
4027
|
+
}], createClick: [{
|
|
4028
|
+
type: Output
|
|
4029
|
+
}], customClick: [{
|
|
4030
|
+
type: Output
|
|
4031
|
+
}], refreshClick: [{
|
|
4032
|
+
type: Output
|
|
4033
|
+
}], tileClick: [{
|
|
4034
|
+
type: Output
|
|
4035
|
+
}] } });
|
|
4036
|
+
|
|
3967
4037
|
class TableRowComponent {
|
|
3968
4038
|
constructor(buttonService) {
|
|
3969
4039
|
this.buttonService = buttonService;
|
|
@@ -4102,7 +4172,6 @@ class TableInternalComponent {
|
|
|
4102
4172
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
4103
4173
|
this.displayedButtons = this.buttonService.getDisplayedButtons(this.config?.buttons, this.smallScreen, this.config?.minButtons);
|
|
4104
4174
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
4105
|
-
this.createButton = this.buttonService.getCreateButton(this.config?.buttons);
|
|
4106
4175
|
this.showFilterButton = !this.config?.searchConfig;
|
|
4107
4176
|
if (this.displayedButtons?.length > 0 && !this.displayedColumns.includes('action')) {
|
|
4108
4177
|
this.displayedColumns.push('action');
|
|
@@ -4406,10 +4475,10 @@ class TableInternalComponent {
|
|
|
4406
4475
|
}
|
|
4407
4476
|
}
|
|
4408
4477
|
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 });
|
|
4409
|
-
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<
|
|
4478
|
+
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" }] });
|
|
4410
4479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
|
|
4411
4480
|
type: Component,
|
|
4412
|
-
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<
|
|
4481
|
+
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"] }]
|
|
4413
4482
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
4414
4483
|
type: ViewChild,
|
|
4415
4484
|
args: ['tablePaginator']
|
|
@@ -4645,51 +4714,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4645
4714
|
}] } });
|
|
4646
4715
|
;
|
|
4647
4716
|
|
|
4648
|
-
class TableHeaderComponent {
|
|
4649
|
-
constructor() {
|
|
4650
|
-
this.createClick = new EventEmitter();
|
|
4651
|
-
this.refreshClick = new EventEmitter();
|
|
4652
|
-
this.tileClick = new EventEmitter();
|
|
4653
|
-
}
|
|
4654
|
-
onCreateClick() {
|
|
4655
|
-
this.createClick.emit();
|
|
4656
|
-
}
|
|
4657
|
-
onRefreshClick() {
|
|
4658
|
-
this.refreshClick.emit();
|
|
4659
|
-
}
|
|
4660
|
-
onTileClick(tileName) {
|
|
4661
|
-
this.tileClick.emit(tileName);
|
|
4662
|
-
}
|
|
4663
|
-
}
|
|
4664
|
-
TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4665
|
-
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" }] });
|
|
4666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
4667
|
-
type: Component,
|
|
4668
|
-
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"] }]
|
|
4669
|
-
}], propDecorators: { config: [{
|
|
4670
|
-
type: Input
|
|
4671
|
-
}], hideTitle: [{
|
|
4672
|
-
type: Input
|
|
4673
|
-
}], tableDataSource: [{
|
|
4674
|
-
type: Input
|
|
4675
|
-
}], createButton: [{
|
|
4676
|
-
type: Input
|
|
4677
|
-
}], tileConfig: [{
|
|
4678
|
-
type: Input
|
|
4679
|
-
}], smallScreen: [{
|
|
4680
|
-
type: Input
|
|
4681
|
-
}], tileReload: [{
|
|
4682
|
-
type: Input
|
|
4683
|
-
}], showFilterButton: [{
|
|
4684
|
-
type: Input
|
|
4685
|
-
}], createClick: [{
|
|
4686
|
-
type: Output
|
|
4687
|
-
}], refreshClick: [{
|
|
4688
|
-
type: Output
|
|
4689
|
-
}], tileClick: [{
|
|
4690
|
-
type: Output
|
|
4691
|
-
}] } });
|
|
4692
|
-
|
|
4693
4717
|
class TableComponent {
|
|
4694
4718
|
constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService) {
|
|
4695
4719
|
this.dataService = dataService;
|
|
@@ -4741,7 +4765,6 @@ class TableComponent {
|
|
|
4741
4765
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
4742
4766
|
this.displayedButtons = this.buttonService.getDisplayedButtons(this.config?.buttons, this.smallScreen, this.config?.minButtons);
|
|
4743
4767
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
4744
|
-
this.createButton = this.buttonService.getCreateButton(this.config?.buttons);
|
|
4745
4768
|
this.showFilterButton = !this.config?.searchConfig;
|
|
4746
4769
|
if (this.displayedButtons?.length > 0 && !this.displayedColumns.includes('action')) {
|
|
4747
4770
|
this.displayedColumns.push('action');
|
|
@@ -5045,10 +5068,10 @@ class TableComponent {
|
|
|
5045
5068
|
}
|
|
5046
5069
|
}
|
|
5047
5070
|
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 });
|
|
5048
|
-
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\" [
|
|
5071
|
+
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" }] });
|
|
5049
5072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
5050
5073
|
type: Component,
|
|
5051
|
-
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\" [
|
|
5074
|
+
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"] }]
|
|
5052
5075
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
5053
5076
|
type: ViewChild,
|
|
5054
5077
|
args: ['tablePaginator']
|