@porscheinformatik/material-addons 10.1.6 → 10.2.0
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/bundles/porscheinformatik-material-addons.umd.js +54 -23
- package/bundles/porscheinformatik-material-addons.umd.js.map +1 -1
- package/bundles/porscheinformatik-material-addons.umd.min.js +2 -2
- package/bundles/porscheinformatik-material-addons.umd.min.js.map +1 -1
- package/esm2015/lib/card/card.component.js +19 -5
- package/esm2015/lib/table/table.component.js +3 -3
- package/fesm2015/porscheinformatik-material-addons.js +20 -6
- package/fesm2015/porscheinformatik-material-addons.js.map +1 -1
- package/lib/card/card.component.d.ts +4 -0
- package/package.json +6 -6
- package/porscheinformatik-material-addons.metadata.json +1 -1
- package/themes/common/styles.scss +17 -9
|
@@ -11,9 +11,11 @@ export class CardComponent {
|
|
|
11
11
|
this.saveDisabled = false;
|
|
12
12
|
this.saveText = 'NOT SET';
|
|
13
13
|
this.editMode = false;
|
|
14
|
+
this.additionalActionText = '';
|
|
14
15
|
this.edit = new EventEmitter();
|
|
15
16
|
this.cancel = new EventEmitter();
|
|
16
17
|
this.save = new EventEmitter();
|
|
18
|
+
this.additionalAction = new EventEmitter();
|
|
17
19
|
}
|
|
18
20
|
onCancel() {
|
|
19
21
|
this.cancel.emit(undefined);
|
|
@@ -28,15 +30,24 @@ export class CardComponent {
|
|
|
28
30
|
toggleCollapse() {
|
|
29
31
|
this.expanded = !this.expanded;
|
|
30
32
|
}
|
|
33
|
+
additionalActionClicked() {
|
|
34
|
+
this.additionalAction.emit(undefined);
|
|
35
|
+
}
|
|
31
36
|
}
|
|
32
37
|
CardComponent.decorators = [
|
|
33
38
|
{ type: Component, args: [{
|
|
34
39
|
selector: 'mad-card',
|
|
35
|
-
template: "<mat-card>\n <mat-card-header>\n <mat-card-title>\n {{ title }}\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n </mat-card-title>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n
|
|
40
|
+
template: "<mat-card>\n <mat-card-header>\n <mat-card-title>\n {{ title }}\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n </mat-card-title>\n <span>\n <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n <mat-icon>{{additionalActionIcon}}</mat-icon>\n </mad-icon-button>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n </span>\n </mat-card-header>\n <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n <ng-content></ng-content>\n </mat-card-content>\n <mat-card-actions *ngIf=\"!readonly && editMode\">\n <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n {{ cancelText }}\n </mad-outline-button>\n </mat-card-actions>\n</mat-card>\n",
|
|
36
41
|
animations: [
|
|
37
42
|
trigger('collapseExpandAnimation', [
|
|
38
|
-
transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
|
|
39
|
-
|
|
43
|
+
transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
|
|
44
|
+
opacity: 1,
|
|
45
|
+
height: '*'
|
|
46
|
+
}))]),
|
|
47
|
+
transition(':leave', [style({ opacity: 1, height: '*', overflow: 'hidden' }), animate('100ms', style({
|
|
48
|
+
opacity: 0,
|
|
49
|
+
height: 0
|
|
50
|
+
}))]),
|
|
40
51
|
]),
|
|
41
52
|
trigger('rotateIcon', [
|
|
42
53
|
state('true', style({ transform: 'rotate(0)' })),
|
|
@@ -59,8 +70,11 @@ CardComponent.propDecorators = {
|
|
|
59
70
|
saveText: [{ type: Input }],
|
|
60
71
|
title: [{ type: Input }],
|
|
61
72
|
editMode: [{ type: Input }],
|
|
73
|
+
additionalActionIcon: [{ type: Input }],
|
|
74
|
+
additionalActionText: [{ type: Input }],
|
|
62
75
|
edit: [{ type: Output }],
|
|
63
76
|
cancel: [{ type: Output }],
|
|
64
|
-
save: [{ type: Output }]
|
|
77
|
+
save: [{ type: Output }],
|
|
78
|
+
additionalAction: [{ type: Output }]
|
|
65
79
|
};
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvbWF0ZXJpYWwtYWRkb25zL21hdGVyaWFsLWFkZG9ucy9wcm9qZWN0cy9tYXRlcmlhbC1hZGRvbnMvc3JjLyIsInNvdXJjZXMiOlsibGliL2NhcmQvY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBeUIvRSxNQUFNLE9BQU8sYUFBYTtJQXZCMUI7UUF3QlcsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDdkIsZUFBVSxHQUFHLFNBQVMsQ0FBQztRQUN2QixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ2hCLGFBQVEsR0FBRyxTQUFTLENBQUM7UUFDckIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUNsQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ2hCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLGFBQVEsR0FBRyxTQUFTLENBQUM7UUFFckIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQix5QkFBb0IsR0FBVyxFQUFFLENBQUM7UUFDakMsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDMUIsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDNUIsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDMUIscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQXNCbEQsQ0FBQztJQXBCQyxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztJQUN2QixDQUFDO0lBRUQsTUFBTTtRQUNKLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFRCxjQUFjO1FBQ1osSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDakMsQ0FBQztJQUVELHVCQUF1QjtRQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7OztZQTVERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFVBQVU7Z0JBQ3BCLHN2Q0FBb0M7Z0JBQ3BDLFVBQVUsRUFBRTtvQkFDVixPQUFPLENBQUMseUJBQXlCLEVBQUU7d0JBQ2pDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBQyxPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBQyxDQUFDLEVBQUUsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUM7Z0NBQy9GLE9BQU8sRUFBRSxDQUFDO2dDQUNWLE1BQU0sRUFBRSxHQUFHOzZCQUNaLENBQUMsQ0FBQyxDQUFDLENBQUM7d0JBQ0wsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFDLENBQUMsRUFBRSxPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQztnQ0FDakcsT0FBTyxFQUFFLENBQUM7Z0NBQ1YsTUFBTSxFQUFFLENBQUM7NkJBQ1YsQ0FBQyxDQUFDLENBQUMsQ0FBQztxQkFDTixDQUFDO29CQUNGLE9BQU8sQ0FBQyxZQUFZLEVBQUU7d0JBQ3BCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7d0JBQzlDLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLGdCQUFnQixFQUFDLENBQUMsQ0FBQzt3QkFDcEQsVUFBVSxDQUFDLGVBQWUsRUFBRSxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQzt3QkFDdEQsVUFBVSxDQUFDLGVBQWUsRUFBRSxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUM7cUJBQ3RELENBQUM7aUJBQ0g7O2FBRUY7Ozs2QkFFRSxLQUFLO3lCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFDTCxLQUFLO3lCQUNMLEtBQUs7dUJBQ0wsS0FBSzsyQkFDTCxLQUFLO3VCQUNMLEtBQUs7b0JBQ0wsS0FBSzt1QkFDTCxLQUFLO21DQUNMLEtBQUs7bUNBQ0wsS0FBSzttQkFDTCxNQUFNO3FCQUNOLE1BQU07bUJBQ04sTUFBTTsrQkFDTixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2FuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlcn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21hZC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignY29sbGFwc2VFeHBhbmRBbmltYXRpb24nLCBbXG4gICAgICB0cmFuc2l0aW9uKCc6ZW50ZXInLCBbc3R5bGUoe29wYWNpdHk6IDAsIGhlaWdodDogMCwgb3ZlcmZsb3c6ICdoaWRkZW4nfSksIGFuaW1hdGUoJzEwMG1zJywgc3R5bGUoe1xuICAgICAgICBvcGFjaXR5OiAxLFxuICAgICAgICBoZWlnaHQ6ICcqJ1xuICAgICAgfSkpXSksXG4gICAgICB0cmFuc2l0aW9uKCc6bGVhdmUnLCBbc3R5bGUoe29wYWNpdHk6IDEsIGhlaWdodDogJyonLCBvdmVyZmxvdzogJ2hpZGRlbid9KSwgYW5pbWF0ZSgnMTAwbXMnLCBzdHlsZSh7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGhlaWdodDogMFxuICAgICAgfSkpXSksXG4gICAgXSksXG4gICAgdHJpZ2dlcigncm90YXRlSWNvbicsIFtcbiAgICAgIHN0YXRlKCd0cnVlJywgc3R5bGUoe3RyYW5zZm9ybTogJ3JvdGF0ZSgwKSd9KSksXG4gICAgICBzdGF0ZSgnZmFsc2UnLCBzdHlsZSh7dHJhbnNmb3JtOiAncm90YXRlKDE4MGRlZyknfSkpLFxuICAgICAgdHJhbnNpdGlvbigndHJ1ZSA9PiBmYWxzZScsIGFuaW1hdGUoJzEwMG1zIGVhc2Utb3V0JykpLFxuICAgICAgdHJhbnNpdGlvbignZmFsc2UgPT4gdHJ1ZScsIGFuaW1hdGUoJzEwMG1zIGVhc2UtaW4nKSksXG4gICAgXSksXG4gIF0sXG4gIHN0eWxlVXJsczogWycuL2NhcmQuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY2FuY2VsRGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgY2FuY2VsVGV4dCA9ICdOT1QgU0VUJztcbiAgQElucHV0KCkgcmVhZG9ubHkgPSB0cnVlO1xuICBASW5wdXQoKSBlZGl0VGV4dCA9ICdOT1QgU0VUJztcbiAgQElucHV0KCkgZXhwYW5kYWJsZSA9IHRydWU7XG4gIEBJbnB1dCgpIGV4cGFuZGVkID0gdHJ1ZTtcbiAgQElucHV0KCkgc2F2ZURpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNhdmVUZXh0ID0gJ05PVCBTRVQnO1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBlZGl0TW9kZSA9IGZhbHNlO1xuICBASW5wdXQoKSBhZGRpdGlvbmFsQWN0aW9uSWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBhZGRpdGlvbmFsQWN0aW9uVGV4dDogc3RyaW5nID0gJyc7XG4gIEBPdXRwdXQoKSBlZGl0ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgY2FuY2VsID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgc2F2ZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIGFkZGl0aW9uYWxBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgb25DYW5jZWwoKTogdm9pZCB7XG4gICAgdGhpcy5jYW5jZWwuZW1pdCh1bmRlZmluZWQpO1xuICB9XG5cbiAgb25FZGl0KCk6IHZvaWQge1xuICAgIHRoaXMuZWRpdC5lbWl0KHVuZGVmaW5lZCk7XG4gICAgdGhpcy5leHBhbmRlZCA9IHRydWU7XG4gIH1cblxuICBvblNhdmUoKTogdm9pZCB7XG4gICAgdGhpcy5zYXZlLmVtaXQodW5kZWZpbmVkKTtcbiAgfVxuXG4gIHRvZ2dsZUNvbGxhcHNlKCk6IHZvaWQge1xuICAgIHRoaXMuZXhwYW5kZWQgPSAhdGhpcy5leHBhbmRlZDtcbiAgfVxuXG4gIGFkZGl0aW9uYWxBY3Rpb25DbGlja2VkKCkge1xuICAgIHRoaXMuYWRkaXRpb25hbEFjdGlvbi5lbWl0KHVuZGVmaW5lZCk7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -81,8 +81,8 @@ export class TableComponent {
|
|
|
81
81
|
TableComponent.decorators = [
|
|
82
82
|
{ type: Component, args: [{
|
|
83
83
|
selector: 'mad-table',
|
|
84
|
-
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
85
|
-
styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}"]
|
|
84
|
+
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
85
|
+
styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
|
|
86
86
|
},] }
|
|
87
87
|
];
|
|
88
88
|
TableComponent.propDecorators = {
|
|
@@ -103,4 +103,4 @@ TableComponent.propDecorators = {
|
|
|
103
103
|
paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
|
|
104
104
|
sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
|
|
105
105
|
};
|
|
106
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
106
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii9ob21lL3J1bm5lci93b3JrL21hdGVyaWFsLWFkZG9ucy9tYXRlcmlhbC1hZGRvbnMvcHJvamVjdHMvbWF0ZXJpYWwtYWRkb25zL3NyYy8iLCJzb3VyY2VzIjpbImxpYi90YWJsZS90YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzdELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsT0FBTyxFQUFRLE1BQU0sd0JBQXdCLENBQUM7QUFTdkQsTUFBTSxPQUFPLGNBQWM7SUFMM0I7O1FBTVcsdUJBQWtCLEdBQUcsWUFBWSxDQUFDO1FBRWxDLFlBQU8sR0FBbUIsRUFBRSxDQUFDO1FBQzdCLGdCQUFXLEdBQUcsU0FBUyxDQUFDO1FBQ3hCLHNCQUFpQixHQUFHLFNBQVMsQ0FBQztRQUU5QixvQkFBZSxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUM5QixvQkFBZSxHQUFHLE9BQUEsSUFBSSxDQUFDLGVBQWUsMENBQUcsQ0FBQyxNQUFLLEVBQUUsQ0FBQztRQUNsRCxlQUFVLEdBQWtCLEVBQUUsQ0FBQztRQUMvQixpQkFBWSxHQUFrQixFQUFFLENBQUM7UUF5QmhDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWUsQ0FBQztRQUM5QyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQWUsQ0FBQztRQUM1QyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQVMvQyxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUN4Qix3QkFBbUIsR0FBRyxLQUFLLENBQUM7SUErQzlCLENBQUM7SUFsRkMsSUFBYSxhQUFhLENBQUMsSUFBVztRQUNwQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNwQixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksa0JBQWtCLENBQU0sSUFBSSxDQUFDLENBQUM7U0FDckQ7YUFBTTtZQUNMLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUM3QjtJQUNILENBQUM7SUFFRCxJQUFhLGlCQUFpQixDQUFDLG1CQUE0QjtRQUN6RCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsbUJBQW1CLENBQUM7UUFDL0MsMkJBQTJCO1FBQzNCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQztRQUNwRixJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxFQUFFO1lBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUNyRDtJQUNILENBQUM7SUFFRCxJQUNJLGFBQWEsQ0FBQyxlQUF3QjtRQUN4QyxJQUFJLENBQUMsZUFBZSxHQUFHLGVBQWUsQ0FBQztRQUN2QyxJQUFJLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFnQkQsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFDakQsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1lBQ2xELElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUN6QztJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUMzQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ2pDLDRFQUE0RTtRQUM1RSx1QkFBdUI7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxlQUFlLEdBQUcsQ0FBQyxJQUFTLEVBQUUsTUFBYyxFQUFFLEVBQUUsQ0FDOUQsQ0FBQyxNQUFNLElBQUksTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUM1RyxDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWE7UUFDcEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWlCLEVBQUUsR0FBUSxFQUFFLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYTtRQUNqRSxJQUFJLENBQUMsQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDakQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLGlDQUFNLE1BQU0sS0FBRSxTQUFTLEVBQUUsR0FBRyxJQUFHLENBQUM7U0FDcEQ7SUFDSCxDQUFDO0lBRUQsY0FBYyxDQUFDLGFBQW1CO1FBQ2hDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxhQUFhLENBQUMsV0FBd0I7UUFDcEMsSUFBSSxDQUFDLENBQUMsV0FBVyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQ3BDO0lBQ0gsQ0FBQztJQUVPLGNBQWMsQ0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxJQUFJLEdBQUcsV0FBVyxFQUFFLENBQUM7SUFDdkQsQ0FBQztJQUVPLG9CQUFvQixDQUFDLEtBQWlCOztRQUM1QyxhQUFRLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxNQUFzQiwwQ0FBRSxTQUFTLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRTtJQUN4RSxDQUFDOzs7WUFsR0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQiwwOEZBQXFDOzthQUV0Qzs7O3NCQUlFLEtBQUs7MEJBQ0wsS0FBSztnQ0FDTCxLQUFLO3lCQUNMLEtBQUs7OEJBQ0wsS0FBSzs4QkFDTCxLQUFLO3lCQUNMLEtBQUs7MkJBQ0wsS0FBSzs0QkFFTCxLQUFLO2dDQVFMLEtBQUs7NEJBU0wsS0FBSzswQkFNTCxNQUFNO3dCQUNOLE1BQU07d0JBQ04sTUFBTTt3QkFFTixTQUFTLFNBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTttQkFDekMsU0FBUyxTQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFRhYmxlRGF0YVNvdXJjZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYmxlJztcbmltcG9ydCB7IE1hdFBhZ2luYXRvciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3BhZ2luYXRvcic7XG5pbXBvcnQgeyBNYXRTb3J0LCBTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc29ydCc7XG5pbXBvcnQgeyBDb2x1bW5IZWFkZXIgfSBmcm9tICcuL2NvbHVtbi1oZWFkZXInO1xuaW1wb3J0IHsgVGFibGVBY3Rpb24gfSBmcm9tICcuL3RhYmxlLWFjdGlvbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21hZC10YWJsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhYmxlLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRhYmxlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgcmVhZG9ubHkgQUNUSU9OX0NPTFVNTl9OQU1FID0gJ19fYWN0aW9uX18nO1xuXG4gIEBJbnB1dCgpIGNvbHVtbnM6IENvbHVtbkhlYWRlcltdID0gW107XG4gIEBJbnB1dCgpIGZpbHRlckxhYmVsID0gJ05PVCBTRVQnO1xuICBASW5wdXQoKSBmaWx0ZXJQbGFjZWhvbGRlciA9ICdOT1QgU0VUJztcbiAgQElucHV0KCkgbm9EYXRhVGV4dDogc3RyaW5nO1xuICBASW5wdXQoKSBwYWdlU2l6ZU9wdGlvbnMgPSBbNSwgMTAsIDE1XTtcbiAgQElucHV0KCkgZGVmYXVsdFBhZ2VTaXplID0gdGhpcy5wYWdlU2l6ZU9wdGlvbnM/LlswXSB8fCAxMDtcbiAgQElucHV0KCkgcm93QWN0aW9uczogVGFibGVBY3Rpb25bXSA9IFtdO1xuICBASW5wdXQoKSB0YWJsZUFjdGlvbnM6IFRhYmxlQWN0aW9uW10gPSBbXTtcblxuICBASW5wdXQoKSBzZXQgZGlzcGxheWVkRGF0YShkYXRhOiBhbnlbXSkge1xuICAgIGlmICghdGhpcy5kYXRhU291cmNlKSB7XG4gICAgICB0aGlzLmRhdGFTb3VyY2UgPSBuZXcgTWF0VGFibGVEYXRhU291cmNlPGFueT4oZGF0YSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZGF0YVNvdXJjZS5kYXRhID0gZGF0YTtcbiAgICB9XG4gIH1cblxuICBASW5wdXQoKSBzZXQgcGFnaW5hdGlvbkVuYWJsZWQoaXNQYWdpbmF0aW9uRW5hYmxlZDogYm9vbGVhbikge1xuICAgIHRoaXMuaXNQYWdpbmF0aW9uRW5hYmxlZCA9IGlzUGFnaW5hdGlvbkVuYWJsZWQ7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgcGFnZVNpemUgPSB0aGlzLmlzUGFnaW5hdGlvbkVuYWJsZWQgPyB0aGlzLmRlZmF1bHRQYWdlU2l6ZSA6IE51bWJlci5NQVhfVkFMVUU7XG4gICAgaWYgKHRoaXMuZGF0YVNvdXJjZS5wYWdpbmF0b3IpIHtcbiAgICAgIHRoaXMuZGF0YVNvdXJjZS5wYWdpbmF0b3IuX2NoYW5nZVBhZ2VTaXplKHBhZ2VTaXplKTtcbiAgICB9XG4gIH1cblxuICBASW5wdXQoKVxuICBzZXQgZmlsdGVyRW5hYmxlZChpc0ZpbHRlckVuYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmlzRmlsdGVyRW5hYmxlZCA9IGlzRmlsdGVyRW5hYmxlZDtcbiAgICB0aGlzLnNldEZpbHRlclZhbHVlKHVuZGVmaW5lZCk7XG4gIH1cblxuICBAT3V0cHV0KCkgdGFibGVBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFRhYmxlQWN0aW9uPigpO1xuICBAT3V0cHV0KCkgcm93QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxUYWJsZUFjdGlvbj4oKTtcbiAgQE91dHB1dCgpIHNvcnRFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8U29ydD4oKTtcblxuICBAVmlld0NoaWxkKE1hdFBhZ2luYXRvciwgeyBzdGF0aWM6IGZhbHNlIH0pIHBhZ2luYXRvcjogTWF0UGFnaW5hdG9yO1xuICBAVmlld0NoaWxkKE1hdFNvcnQsIHsgc3RhdGljOiB0cnVlIH0pIHNvcnQ6IE1hdFNvcnQ7XG5cbiAgZGF0YVNvdXJjZTogTWF0VGFibGVEYXRhU291cmNlPGFueVtdPjtcbiAgY29sdW1uTmFtZXM6IHN0cmluZ1tdO1xuICBpc1Jvd0NsaWNrYWJsZTogYm9vbGVhbjtcbiAgZGVmYXVsdEFjdGlvbjogVGFibGVBY3Rpb247XG4gIGlzRmlsdGVyRW5hYmxlZCA9IGZhbHNlO1xuICBpc1BhZ2luYXRpb25FbmFibGVkID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jb2x1bW5OYW1lcyA9IHRoaXMuY29sdW1ucy5tYXAoY29sdW1uID0+IGNvbHVtbi5sYWJlbCk7XG4gICAgdGhpcy5pc1Jvd0NsaWNrYWJsZSA9IHRoaXMucm93QWN0aW9ucy5sZW5ndGggPiAwO1xuICAgIGlmICh0aGlzLmlzUm93Q2xpY2thYmxlKSB7XG4gICAgICB0aGlzLmNvbHVtbk5hbWVzLnVuc2hpZnQodGhpcy5BQ1RJT05fQ09MVU1OX05BTUUpO1xuICAgICAgdGhpcy5kZWZhdWx0QWN0aW9uID0gdGhpcy5yb3dBY3Rpb25zWzBdO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmRhdGFTb3VyY2UucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XG4gICAgdGhpcy5kYXRhU291cmNlLnNvcnQgPSB0aGlzLnNvcnQ7XG4gICAgLy8gc2V0IGN1c3RvbSBmaWx0ZXIgcHJlZGljYXRlIHRvIGVuYWJsZSBzZWFyY2ggZm9yIG11bHRpcGxlIHNlYXJjaCBzdHJpbmdzOlxuICAgIC8vIGUuZy4gXCJvbmUgdHdvIHRocmVlXCJcbiAgICB0aGlzLmRhdGFTb3VyY2UuZmlsdGVyUHJlZGljYXRlID0gKGRhdGE6IGFueSwgZmlsdGVyOiBzdHJpbmcpID0+IFxuICAgICAgIWZpbHRlciB8fCBmaWx0ZXIuc3BsaXQoL1xccysvKS5ldmVyeSh0ZXJtID0+ICEhT2JqZWN0LmtleXMoZGF0YSkuZmluZChrZXkgPT4gZGF0YVtrZXldLmluY2x1ZGVzKHRlcm0pKSk7XG4gIH1cblxuICBvbkZpbHRlcih2YWx1ZTogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy5zZXRGaWx0ZXJWYWx1ZSh2YWx1ZSk7XG4gIH1cblxuICBvblJvd0V2ZW50KGV2ZW50OiBNb3VzZUV2ZW50LCByb3c6IGFueSwgYWN0aW9uID0gdGhpcy5kZWZhdWx0QWN0aW9uKTogdm9pZCB7XG4gICAgaWYgKCEhYWN0aW9uICYmICF0aGlzLmlzQ2xpY2tPblJvd01lbnVJY29uKGV2ZW50KSkge1xuICAgICAgdGhpcy5yb3dBY3Rpb24uZW1pdCh7IC4uLmFjdGlvbiwgb3V0cHV0Um93OiByb3cgfSk7XG4gICAgfVxuICB9XG5cbiAgb25Tb3J0aW5nRXZlbnQoc29ydGluZ1BhcmFtczogU29ydCk6IHZvaWQge1xuICAgIHRoaXMuc29ydEV2ZW50LmVtaXQoc29ydGluZ1BhcmFtcyk7XG4gIH1cblxuICBvblRhYmxlQWN0aW9uKHRhYmxlQWN0aW9uOiBUYWJsZUFjdGlvbik6IHZvaWQge1xuICAgIGlmICghIXRhYmxlQWN0aW9uKSB7XG4gICAgICB0aGlzLnRhYmxlQWN0aW9uLmVtaXQodGFibGVBY3Rpb24pO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgc2V0RmlsdGVyVmFsdWUodmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuZGF0YVNvdXJjZS5maWx0ZXIgPSB2YWx1ZT8udHJpbSgpLnRvTG93ZXJDYXNlKCk7XG4gIH1cblxuICBwcml2YXRlIGlzQ2xpY2tPblJvd01lbnVJY29uKGV2ZW50OiBNb3VzZUV2ZW50KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIChldmVudD8udGFyZ2V0IGFzIEhUTUxFbGVtZW50KT8uY2xhc3NMaXN0LmNvbnRhaW5zKCdtYXQtaWNvbicpO1xuICB9XG59XG4iXX0=
|
|
@@ -1121,9 +1121,11 @@ class CardComponent {
|
|
|
1121
1121
|
this.saveDisabled = false;
|
|
1122
1122
|
this.saveText = 'NOT SET';
|
|
1123
1123
|
this.editMode = false;
|
|
1124
|
+
this.additionalActionText = '';
|
|
1124
1125
|
this.edit = new EventEmitter();
|
|
1125
1126
|
this.cancel = new EventEmitter();
|
|
1126
1127
|
this.save = new EventEmitter();
|
|
1128
|
+
this.additionalAction = new EventEmitter();
|
|
1127
1129
|
}
|
|
1128
1130
|
onCancel() {
|
|
1129
1131
|
this.cancel.emit(undefined);
|
|
@@ -1138,15 +1140,24 @@ class CardComponent {
|
|
|
1138
1140
|
toggleCollapse() {
|
|
1139
1141
|
this.expanded = !this.expanded;
|
|
1140
1142
|
}
|
|
1143
|
+
additionalActionClicked() {
|
|
1144
|
+
this.additionalAction.emit(undefined);
|
|
1145
|
+
}
|
|
1141
1146
|
}
|
|
1142
1147
|
CardComponent.decorators = [
|
|
1143
1148
|
{ type: Component, args: [{
|
|
1144
1149
|
selector: 'mad-card',
|
|
1145
|
-
template: "<mat-card>\n <mat-card-header>\n <mat-card-title>\n {{ title }}\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n </mat-card-title>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n
|
|
1150
|
+
template: "<mat-card>\n <mat-card-header>\n <mat-card-title>\n {{ title }}\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n </mat-card-title>\n <span>\n <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n <mat-icon>{{additionalActionIcon}}</mat-icon>\n </mad-icon-button>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n </span>\n </mat-card-header>\n <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n <ng-content></ng-content>\n </mat-card-content>\n <mat-card-actions *ngIf=\"!readonly && editMode\">\n <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n {{ cancelText }}\n </mad-outline-button>\n </mat-card-actions>\n</mat-card>\n",
|
|
1146
1151
|
animations: [
|
|
1147
1152
|
trigger('collapseExpandAnimation', [
|
|
1148
|
-
transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
|
|
1149
|
-
|
|
1153
|
+
transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
|
|
1154
|
+
opacity: 1,
|
|
1155
|
+
height: '*'
|
|
1156
|
+
}))]),
|
|
1157
|
+
transition(':leave', [style({ opacity: 1, height: '*', overflow: 'hidden' }), animate('100ms', style({
|
|
1158
|
+
opacity: 0,
|
|
1159
|
+
height: 0
|
|
1160
|
+
}))]),
|
|
1150
1161
|
]),
|
|
1151
1162
|
trigger('rotateIcon', [
|
|
1152
1163
|
state('true', style({ transform: 'rotate(0)' })),
|
|
@@ -1169,9 +1180,12 @@ CardComponent.propDecorators = {
|
|
|
1169
1180
|
saveText: [{ type: Input }],
|
|
1170
1181
|
title: [{ type: Input }],
|
|
1171
1182
|
editMode: [{ type: Input }],
|
|
1183
|
+
additionalActionIcon: [{ type: Input }],
|
|
1184
|
+
additionalActionText: [{ type: Input }],
|
|
1172
1185
|
edit: [{ type: Output }],
|
|
1173
1186
|
cancel: [{ type: Output }],
|
|
1174
|
-
save: [{ type: Output }]
|
|
1187
|
+
save: [{ type: Output }],
|
|
1188
|
+
additionalAction: [{ type: Output }]
|
|
1175
1189
|
};
|
|
1176
1190
|
|
|
1177
1191
|
class ThrottleClickDirective {
|
|
@@ -1402,8 +1416,8 @@ class TableComponent {
|
|
|
1402
1416
|
TableComponent.decorators = [
|
|
1403
1417
|
{ type: Component, args: [{
|
|
1404
1418
|
selector: 'mad-table',
|
|
1405
|
-
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
1406
|
-
styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}"]
|
|
1419
|
+
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
1420
|
+
styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
|
|
1407
1421
|
},] }
|
|
1408
1422
|
];
|
|
1409
1423
|
TableComponent.propDecorators = {
|