@porscheinformatik/material-addons 10.2.5 → 10.3.2
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 +318 -38
- 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/data-table/data-table-action-type.js +6 -0
- package/esm2015/lib/data-table/data-table-action.js +1 -1
- package/esm2015/lib/data-table/data-table-column-header.js +1 -1
- package/esm2015/lib/data-table/data-table.component.js +210 -36
- package/esm2015/lib/data-table/data-table.module.js +22 -14
- package/esm2015/lib/toolbar/toolbar.component.js +13 -2
- package/esm2015/lib/toolbar/toolbar.service.js +15 -2
- package/fesm2015/porscheinformatik-material-addons.js +244 -35
- package/fesm2015/porscheinformatik-material-addons.js.map +1 -1
- package/lib/data-table/data-table-action-type.d.ts +5 -0
- package/lib/data-table/data-table-action.d.ts +3 -1
- package/lib/data-table/data-table-column-header.d.ts +3 -1
- package/lib/data-table/data-table.component.d.ts +45 -15
- package/lib/toolbar/toolbar.component.d.ts +3 -0
- package/lib/toolbar/toolbar.service.d.ts +6 -2
- package/package.json +1 -1
- package/porscheinformatik-material-addons.metadata.json +1 -1
- package/themes/common/styles.scss +3 -0
|
@@ -10,7 +10,8 @@ export class ToolbarService {
|
|
|
10
10
|
this.translate = translate;
|
|
11
11
|
this.mainActions = []; // shown on the left, next to title, as big buttons
|
|
12
12
|
this.toolbarActions = []; // shown on the right as icons
|
|
13
|
-
this.
|
|
13
|
+
this.toolbarActionsAlwaysAsMenu = false; // show the mobile view (burger menu) for toolbar actions
|
|
14
|
+
this.toolbarActionsMenuTitle = 'More'; // title of the burger menu
|
|
14
15
|
this.routerSubscription = this.router.events.subscribe(routingEvent => {
|
|
15
16
|
if (routingEvent instanceof NavigationEnd) {
|
|
16
17
|
if (this.currentUrl !== routingEvent.urlAfterRedirects) {
|
|
@@ -49,6 +50,12 @@ export class ToolbarService {
|
|
|
49
50
|
setDataTitle(dataTitle) {
|
|
50
51
|
this.dataTitle = dataTitle;
|
|
51
52
|
}
|
|
53
|
+
setToolbarActionsAlwaysAsMenu(toolbarActionsAlwaysAsMenu) {
|
|
54
|
+
this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
|
|
55
|
+
}
|
|
56
|
+
getToolbarActionsAlwaysAsMenu() {
|
|
57
|
+
return this.toolbarActionsAlwaysAsMenu;
|
|
58
|
+
}
|
|
52
59
|
getDataTitle() {
|
|
53
60
|
return this.dataTitle;
|
|
54
61
|
}
|
|
@@ -61,6 +68,12 @@ export class ToolbarService {
|
|
|
61
68
|
getBackAction() {
|
|
62
69
|
return this.backAction;
|
|
63
70
|
}
|
|
71
|
+
setToolbarActionsMenuTitle(toolbarActionsMenuTitle) {
|
|
72
|
+
this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
|
|
73
|
+
}
|
|
74
|
+
getToolbarActionsMenuTitle() {
|
|
75
|
+
return this.toolbarActionsMenuTitle;
|
|
76
|
+
}
|
|
64
77
|
addMainAction(mainAction) {
|
|
65
78
|
this.translate
|
|
66
79
|
.get(mainAction.i18nActionKey)
|
|
@@ -111,4 +124,4 @@ ToolbarService.ctorParameters = () => [
|
|
|
111
124
|
{ type: Router },
|
|
112
125
|
{ type: TranslateService }
|
|
113
126
|
];
|
|
114
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
127
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbGJhci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6Ii9ob21lL3J1bm5lci93b3JrL21hdGVyaWFsLWFkZG9ucy9tYXRlcmlhbC1hZGRvbnMvcHJvamVjdHMvbWF0ZXJpYWwtYWRkb25zL3NyYy8iLCJzb3VyY2VzIjpbImxpYi90b29sYmFyL3Rvb2xiYXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsVUFBVSxFQUFZLE1BQU0sZUFBZSxDQUFDO0FBQ3BELE9BQU8sRUFBQyxhQUFhLEVBQUUsTUFBTSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFdEQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0scUJBQXFCLENBQUM7Ozs7QUFNckQsTUFBTSxPQUFPLGNBQWM7SUFZekIsWUFBb0IsTUFBYyxFQUFVLFNBQTJCO1FBQW5ELFdBQU0sR0FBTixNQUFNLENBQVE7UUFBVSxjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQVZ2RSxnQkFBVyxHQUFpQixFQUFFLENBQUMsQ0FBQyxtREFBbUQ7UUFDbkYsbUJBQWMsR0FBb0IsRUFBRSxDQUFDLENBQUMsOEJBQThCO1FBQ3BFLCtCQUEwQixHQUFHLEtBQUssQ0FBQyxDQUFDLHlEQUF5RDtRQUlyRiw0QkFBdUIsR0FBRyxNQUFNLENBQUMsQ0FBQywyQkFBMkI7UUFLbkUsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsRUFBRTtZQUNwRSxJQUFJLFlBQVksWUFBWSxhQUFhLEVBQUU7Z0JBQ3pDLElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxZQUFZLENBQUMsaUJBQWlCLEVBQUU7b0JBQ3RELElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO29CQUMzQixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztvQkFDeEIsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO29CQUN2QixPQUFPLElBQUksQ0FBQyxTQUFT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QVUsR0FBRztZQUNoQixPQUFPLEVBQUUsb0JBQW9CO1lBQzdCLGFBQWEsRUFBRSxFQUFFO1lBQ2pCLE1BQU07Z0JBQ0osTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUN4QixDQUFDO1NBQ0YsQ0FBQztJQUNKLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLENBQUMsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDOzs7O1lBdElGLFVBQVUsU0FBQztnQkFDVixVQUFVLEVBQUUsTUFBTTthQUNuQjs7O1lBUHNCLE1BQU07WUFFckIsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJbmplY3RhYmxlLCBPbkRlc3Ryb3l9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOYXZpZ2F0aW9uRW5kLCBSb3V0ZXJ9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQge1N1YnNjcmlwdGlvbn0gZnJvbSAncnhqcyc7XG5pbXBvcnQge1RyYW5zbGF0ZVNlcnZpY2V9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHtCYWNrQWN0aW9uLCBNYWluQWN0aW9uLCBUb29sYmFyQWN0aW9ufSBmcm9tICcuL3Rvb2xiYXItYWN0aW9uLmludGVyZmFjZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxufSlcbmV4cG9ydCBjbGFzcyBUb29sYmFyU2VydmljZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIGJhY2tBY3Rpb246IEJhY2tBY3Rpb247XG4gIG1haW5BY3Rpb25zOiBNYWluQWN0aW9uW10gPSBbXTsgLy8gc2hvd24gb24gdGhlIGxlZnQsIG5leHQgdG8gdGl0bGUsIGFzIGJpZyBidXR0b25zXG4gIHRvb2xiYXJBY3Rpb25zOiBUb29sYmFyQWN0aW9uW10gPSBbXTsgLy8gc2hvd24gb24gdGhlIHJpZ2h0IGFzIGljb25zXG4gIHRvb2xiYXJBY3Rpb25zQWx3YXlzQXNNZW51ID0gZmFsc2U7IC8vIHNob3cgdGhlIG1vYmlsZSB2aWV3IChidXJnZXIgbWVudSkgZm9yIHRvb2xiYXIgYWN0aW9uc1xuICBkYXRhVGl0bGU6IHN0cmluZztcbiAgcm91dGVyU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG4gIHByaXZhdGUgdGl0bGU6IHN0cmluZztcbiAgcHJpdmF0ZSB0b29sYmFyQWN0aW9uc01lbnVUaXRsZSA9ICdNb3JlJzsgLy8gdGl0bGUgb2YgdGhlIGJ1cmdlciBtZW51XG5cbiAgcHJpdmF0ZSBjdXJyZW50VXJsOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByb3V0ZXI6IFJvdXRlciwgcHJpdmF0ZSB0cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICB0aGlzLnJvdXRlclN1YnNjcmlwdGlvbiA9IHRoaXMucm91dGVyLmV2ZW50cy5zdWJzY3JpYmUocm91dGluZ0V2ZW50ID0+IHtcbiAgICAgIGlmIChyb3V0aW5nRXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSB7XG4gICAgICAgIGlmICh0aGlzLmN1cnJlbnRVcmwgIT09IHJvdXRpbmdFdmVudC51cmxBZnRlclJlZGlyZWN0cykge1xuICAgICAgICAgIHRoaXMuY2xlYXJUb29sYmFyQWN0aW9ucygpO1xuICAgICAgICAgIHRoaXMuY2xlYXJNYWluQWN0aW9ucygpO1xuICAgICAgICAgIGRlbGV0ZSB0aGlzLmJhY2tBY3Rpb247XG4gICAgICAgICAgZGVsZXRlIHRoaXMuZGF0YVRpdGxlO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuY3VycmVudFVybCA9IHJvdXRlci51cmw7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5yb3V0ZXJTdWJzY3JpcHRpb24pIHtcbiAgICAgIHRoaXMucm91dGVyU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuICB9XG5cbiAgZ2V0VG9vbGJhckFjdGlvbnMoKTogVG9vbGJhckFjdGlvbltdIHtcbiAgICByZXR1cm4gdGhpcy50b29sYmFyQWN0aW9ucztcbiAgfVxuXG4gIGFkZFRvb2xiYXJBY3Rpb24oYWN0aW9uOiBUb29sYmFyQWN0aW9uKTogdm9pZCB7XG4gICAgdGhpcy50cmFuc2xhdGVcbiAgICAgIC5nZXQoYWN0aW9uLmkxOG5BY3Rpb25LZXkpXG4gICAgICAudG9Qcm9taXNlKClcbiAgICAgIC50aGVuKHRyYW5zbGF0ZWQgPT4ge1xuICAgICAgICBhY3Rpb24uYWN0aW9uTmFtZSA9IHRyYW5zbGF0ZWQ7XG4gICAgICAgIHRoaXMudG9vbGJhckFjdGlvbnMucHVzaChhY3Rpb24pO1xuICAgICAgfSk7XG4gIH1cblxuICBzZXQgdG9vbGJhclRpdGxlKHRvb2xiYXJUaXRsZTogc3RyaW5nKSB7XG4gICAgdGhpcy50aXRsZSA9IHRvb2xiYXJUaXRsZTtcbiAgfVxuXG4gIGdldCB0b29sYmFyVGl0bGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy50aXRsZTtcbiAgfVxuXG4gIHNldERhdGFUaXRsZShkYXRhVGl0bGU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuZGF0YVRpdGxlID0gZGF0YVRpdGxlO1xuICB9XG5cbiAgc2V0VG9vbGJhckFjdGlvbnNBbHdheXNBc01lbnUodG9vbGJhckFjdGlvbnNBbHdheXNBc01lbnU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnRvb2xiYXJBY3Rpb25zQWx3YXlzQXNNZW51ID0gdG9vbGJhckFjdGlvbnNBbHdheXNBc01lbnU7XG4gIH1cblxuICBnZXRUb29sYmFyQWN0aW9uc0Fsd2F5c0FzTWVudSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy50b29sYmFyQWN0aW9uc0Fsd2F5c0FzTWVudTtcbiAgfVxuXG4gIGdldERhdGFUaXRsZSgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmRhdGFUaXRsZTtcbiAgfVxuXG4gIGNsZWFyVG9vbGJhckFjdGlvbnMoKTogdm9pZCB7XG4gICAgdGhpcy50b29sYmFyQWN0aW9ucyA9IFtdO1xuICB9XG5cbiAgZ2V0TWFpbkFjdGlvbnMoKTogTWFpbkFjdGlvbltdIHtcbiAgICByZXR1cm4gdGhpcy5tYWluQWN0aW9ucztcbiAgfVxuXG4gIGdldEJhY2tBY3Rpb24oKTogQmFja0FjdGlvbiB7XG4gICAgcmV0dXJuIHRoaXMuYmFja0FjdGlvbjtcbiAgfVxuXG4gIHNldFRvb2xiYXJBY3Rpb25zTWVudVRpdGxlKHRvb2xiYXJBY3Rpb25zTWVudVRpdGxlOiBzdHJpbmcpIHtcbiAgICB0aGlzLnRvb2xiYXJBY3Rpb25zTWVudVRpdGxlID0gdG9vbGJhckFjdGlvbnNNZW51VGl0bGU7XG4gIH1cblxuICBnZXRUb29sYmFyQWN0aW9uc01lbnVUaXRsZSgpIHtcbiAgICByZXR1cm4gdGhpcy50b29sYmFyQWN0aW9uc01lbnVUaXRsZTtcbiAgfVxuXG4gIGFkZE1haW5BY3Rpb24obWFpbkFjdGlvbjogTWFpbkFjdGlvbik6IHZvaWQge1xuICAgIHRoaXMudHJhbnNsYXRlXG4gICAgICAuZ2V0KG1haW5BY3Rpb24uaTE4bkFjdGlvbktleSlcbiAgICAgIC50b1Byb21pc2UoKVxuICAgICAgLnRoZW4odHJhbnNsYXRlZCA9PiB7XG4gICAgICAgIG1haW5BY3Rpb24uYWN0aW9uTmFtZSA9IHRyYW5zbGF0ZWQ7XG4gICAgICAgIHRoaXMubWFpbkFjdGlvbnMucHVzaChtYWluQWN0aW9uKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIFBlciBkZWZhdWx0IHRoZSBnb0JhY2tSb3V0ZSBpcyBhIHJvdXRlckxpbmsuIEJ1dCBpZiBhIGhyZWYgc2hvdWxkIGJlIHVzZWQgKGZvciBhYnNvbHV0ZSBicm93c2VyIHJvdXRpbmcpIHRoZW4gaXNBYnNvbHV0ZVVybCBjYW4gYmUgc2V0IHRvIHRydWUuXG4gICAqL1xuICBhZGRCYWNrQWN0aW9uKGdvQmFja1JvdXRlOiBzdHJpbmcsIGlzQWJzb2x1dGVVcmwgPSBmYWxzZSk6IHZvaWQge1xuICAgIHRoaXMuYmFja0FjdGlvbiA9IHtcbiAgICAgIG1hdEljb246ICdrZXlib2FyZF9iYWNrc3BhY2UnLFxuICAgICAgaTE4bkFjdGlvbktleTogJycsXG4gICAgfTtcbiAgICBpZiAoIWlzQWJzb2x1dGVVcmwpIHtcbiAgICAgIHRoaXMuYmFja0FjdGlvbi5yb3V0ZXJMaW5rID0gZ29CYWNrUm91dGU7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuYmFja0FjdGlvbi5ocmVmID0gZ29CYWNrUm91dGU7XG4gICAgfVxuICB9XG5cbiAgYWRkU2ltcGxlQmFja0J1dHRvbihvdmVycmlkZUlmUHJlc2VudCA9IGZhbHNlKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZ2V0QmFja0FjdGlvbigpICYmICFvdmVycmlkZUlmUHJlc2VudCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuYmFja0FjdGlvbiA9IHtcbiAgICAgIG1hdEljb246ICdrZXlib2FyZF9iYWNrc3BhY2UnLFxuICAgICAgaTE4bkFjdGlvbktleTogJycsXG4gICAgICBhY3Rpb24oKTogdm9pZCB7XG4gICAgICAgIHdpbmRvdy5oaXN0b3J5LmJhY2soKTtcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuXG4gIGNsZWFyTWFpbkFjdGlvbnMoKTogdm9pZCB7XG4gICAgdGhpcy5tYWluQWN0aW9ucyA9IFtdO1xuICB9XG59XG4iXX0=
|
|
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
8
8
|
import { MatInputModule } from '@angular/material/input';
|
|
9
9
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
10
|
import { Title } from '@angular/platform-browser';
|
|
11
|
-
import { TranslateService } from '@ngx-translate/core';
|
|
11
|
+
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
12
12
|
import { of, Subject, Subscription } from 'rxjs';
|
|
13
13
|
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
|
|
14
14
|
import { map, throttleTime, switchMap, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
@@ -20,6 +20,10 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
|
|
|
20
20
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
21
21
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
22
22
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
23
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
24
|
+
import { v4 } from 'uuid';
|
|
25
|
+
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
26
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
23
27
|
import { Directionality } from '@angular/cdk/bidi';
|
|
24
28
|
import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
|
|
25
29
|
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
@@ -655,7 +659,8 @@ class ToolbarService {
|
|
|
655
659
|
this.translate = translate;
|
|
656
660
|
this.mainActions = []; // shown on the left, next to title, as big buttons
|
|
657
661
|
this.toolbarActions = []; // shown on the right as icons
|
|
658
|
-
this.
|
|
662
|
+
this.toolbarActionsAlwaysAsMenu = false; // show the mobile view (burger menu) for toolbar actions
|
|
663
|
+
this.toolbarActionsMenuTitle = 'More'; // title of the burger menu
|
|
659
664
|
this.routerSubscription = this.router.events.subscribe(routingEvent => {
|
|
660
665
|
if (routingEvent instanceof NavigationEnd) {
|
|
661
666
|
if (this.currentUrl !== routingEvent.urlAfterRedirects) {
|
|
@@ -694,6 +699,12 @@ class ToolbarService {
|
|
|
694
699
|
setDataTitle(dataTitle) {
|
|
695
700
|
this.dataTitle = dataTitle;
|
|
696
701
|
}
|
|
702
|
+
setToolbarActionsAlwaysAsMenu(toolbarActionsAlwaysAsMenu) {
|
|
703
|
+
this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
|
|
704
|
+
}
|
|
705
|
+
getToolbarActionsAlwaysAsMenu() {
|
|
706
|
+
return this.toolbarActionsAlwaysAsMenu;
|
|
707
|
+
}
|
|
697
708
|
getDataTitle() {
|
|
698
709
|
return this.dataTitle;
|
|
699
710
|
}
|
|
@@ -706,6 +717,12 @@ class ToolbarService {
|
|
|
706
717
|
getBackAction() {
|
|
707
718
|
return this.backAction;
|
|
708
719
|
}
|
|
720
|
+
setToolbarActionsMenuTitle(toolbarActionsMenuTitle) {
|
|
721
|
+
this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
|
|
722
|
+
}
|
|
723
|
+
getToolbarActionsMenuTitle() {
|
|
724
|
+
return this.toolbarActionsMenuTitle;
|
|
725
|
+
}
|
|
709
726
|
addMainAction(mainAction) {
|
|
710
727
|
this.translate
|
|
711
728
|
.get(mainAction.i18nActionKey)
|
|
@@ -794,11 +811,22 @@ class ToolbarComponent {
|
|
|
794
811
|
getBackAction() {
|
|
795
812
|
return this.toolbarService.getBackAction();
|
|
796
813
|
}
|
|
814
|
+
getToolbarActionsAlwaysAsMenu() {
|
|
815
|
+
return this.toolbarService.getToolbarActionsAlwaysAsMenu();
|
|
816
|
+
}
|
|
817
|
+
getToolbarActionsMenuTitle() {
|
|
818
|
+
return this.toolbarService.getToolbarActionsMenuTitle();
|
|
819
|
+
}
|
|
820
|
+
showBadgeForMenu() {
|
|
821
|
+
return this.getToolbarActions()
|
|
822
|
+
.slice(1) // the first icon is not shown in menu
|
|
823
|
+
.filter(value => value.badge && value.badge.value).length > 0;
|
|
824
|
+
}
|
|
797
825
|
}
|
|
798
826
|
ToolbarComponent.decorators = [
|
|
799
827
|
{ type: Component, args: [{
|
|
800
828
|
selector: 'mad-toolbar',
|
|
801
|
-
template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n >\n </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"!(isHandset$ | async) || i < (getToolbarActions().length > 2 ? 1 : 2)\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"
|
|
829
|
+
template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n >\n </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? 1 : 2)\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon>\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n <mat-icon\n matBadgeColor=\"warn\"\n [matBadge]=\"showBadgeForMenu() ? '⁠' : null\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n >more_vert\n </mat-icon>\n </mad-icon-button>\n <mat-menu #burgerMenu=\"matMenu\" class=\"no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button *ngIf=\"i >= 1\" mat-menu-item (click)=\"action.action()\">\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n",
|
|
802
830
|
styles: ["mat-toolbar{background:#fff}.content-toolbar{border-bottom:1px solid #dcdcdc;height:57px}.right-aligned{margin-left:auto;margin-right:0;overflow:hidden}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep.mat-badge-content{bottom:-7px!important;right:-7px!important}"]
|
|
803
831
|
},] }
|
|
804
832
|
];
|
|
@@ -1499,30 +1527,49 @@ TableModule.decorators = [
|
|
|
1499
1527
|
},] }
|
|
1500
1528
|
];
|
|
1501
1529
|
|
|
1530
|
+
class DataTableActionType {
|
|
1531
|
+
}
|
|
1532
|
+
DataTableActionType.SINGLE = "SINGLE";
|
|
1533
|
+
DataTableActionType.BATCH = "BATCH";
|
|
1534
|
+
DataTableActionType.NONE = "NONE";
|
|
1535
|
+
|
|
1502
1536
|
class DataTableComponent {
|
|
1503
1537
|
constructor() {
|
|
1504
1538
|
var _a;
|
|
1505
|
-
this.ACTION_COLUMN_NAME =
|
|
1539
|
+
this.ACTION_COLUMN_NAME = "__action__";
|
|
1540
|
+
this.SINGLE = DataTableActionType.SINGLE;
|
|
1541
|
+
this.BATCH = DataTableActionType.BATCH;
|
|
1542
|
+
this.NONE = DataTableActionType.NONE;
|
|
1506
1543
|
this.columns = [];
|
|
1507
|
-
this.filterLabel =
|
|
1508
|
-
this.filterPlaceholder =
|
|
1544
|
+
this.filterLabel = "Filter";
|
|
1545
|
+
this.filterPlaceholder = "";
|
|
1546
|
+
this.noDataText = "No matching data found";
|
|
1509
1547
|
this.pageSizeOptions = [5, 10, 15];
|
|
1510
1548
|
this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) || 10;
|
|
1511
|
-
this.
|
|
1512
|
-
this.tableActions = [];
|
|
1513
|
-
this.tableAction = new EventEmitter();
|
|
1514
|
-
this.rowAction = new EventEmitter();
|
|
1549
|
+
this.actions = [];
|
|
1515
1550
|
this.sortEvent = new EventEmitter();
|
|
1551
|
+
this.actionEvent = new EventEmitter();
|
|
1552
|
+
this.pagingEvent = new EventEmitter();
|
|
1553
|
+
this.tableActions = [];
|
|
1554
|
+
this.rowActions = [];
|
|
1555
|
+
this.allSelected = false;
|
|
1556
|
+
this.displayedDataMap = new Map();
|
|
1557
|
+
this.actualDataMap = new Map();
|
|
1558
|
+
this.selectionModel = new SelectionModel(true);
|
|
1516
1559
|
this.isFilterEnabled = false;
|
|
1517
1560
|
this.isPaginationEnabled = false;
|
|
1561
|
+
this.mode = this.NONE;
|
|
1562
|
+
this.isRowClickable = false;
|
|
1563
|
+
this.isLoading = false;
|
|
1518
1564
|
}
|
|
1519
|
-
set
|
|
1565
|
+
set tableData(data) {
|
|
1520
1566
|
if (!this.dataSource) {
|
|
1521
1567
|
this.dataSource = new MatTableDataSource(data);
|
|
1522
1568
|
}
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1569
|
+
this.createDataMapsAndSetDisplayedDataSourceData(data);
|
|
1570
|
+
}
|
|
1571
|
+
set loading(isLoading) {
|
|
1572
|
+
this.isLoading = isLoading;
|
|
1526
1573
|
}
|
|
1527
1574
|
set paginationEnabled(isPaginationEnabled) {
|
|
1528
1575
|
this.isPaginationEnabled = isPaginationEnabled;
|
|
@@ -1536,47 +1583,203 @@ class DataTableComponent {
|
|
|
1536
1583
|
this.isFilterEnabled = isFilterEnabled;
|
|
1537
1584
|
this.setFilterValue(undefined);
|
|
1538
1585
|
}
|
|
1586
|
+
set forceMode(mode) {
|
|
1587
|
+
if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
|
|
1588
|
+
this._forceMode = mode;
|
|
1589
|
+
this.mode = mode;
|
|
1590
|
+
this.setActions();
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1539
1593
|
ngOnInit() {
|
|
1540
1594
|
this.columnNames = this.columns.map(column => column.label);
|
|
1541
|
-
this.
|
|
1542
|
-
|
|
1543
|
-
|
|
1595
|
+
this.mode = this.getTableMode();
|
|
1596
|
+
this.setActions();
|
|
1597
|
+
if (this.mode !== this.NONE) {
|
|
1598
|
+
this.isRowClickable = true;
|
|
1544
1599
|
this.defaultAction = this.rowActions[0];
|
|
1545
1600
|
}
|
|
1601
|
+
this.columnNames.unshift(this.ACTION_COLUMN_NAME);
|
|
1546
1602
|
}
|
|
1547
1603
|
ngAfterViewInit() {
|
|
1548
1604
|
this.dataSource.paginator = this.paginator;
|
|
1549
1605
|
this.dataSource.sort = this.sort;
|
|
1550
1606
|
}
|
|
1551
|
-
|
|
1552
|
-
|
|
1607
|
+
get selectedCount() {
|
|
1608
|
+
var _a;
|
|
1609
|
+
return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
|
|
1610
|
+
}
|
|
1611
|
+
get rowCount() {
|
|
1612
|
+
var _a;
|
|
1613
|
+
return ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data)) ? this.dataSource._pageData(this.dataSource.data).length : 0;
|
|
1614
|
+
}
|
|
1615
|
+
getSelectedCount(actionType) {
|
|
1616
|
+
const count = this.selectedCount;
|
|
1617
|
+
if (actionType != this.BATCH || count < 2) {
|
|
1618
|
+
return "";
|
|
1619
|
+
}
|
|
1620
|
+
return " (" + count + ")";
|
|
1621
|
+
}
|
|
1622
|
+
isDisabled(actionType) {
|
|
1623
|
+
switch (actionType) {
|
|
1624
|
+
case this.SINGLE:
|
|
1625
|
+
return this.selectedCount != 1;
|
|
1626
|
+
case this.BATCH:
|
|
1627
|
+
return this.selectedCount < 1;
|
|
1628
|
+
default:
|
|
1629
|
+
return false;
|
|
1630
|
+
}
|
|
1631
|
+
}
|
|
1632
|
+
onToggleSelectAll() {
|
|
1633
|
+
// clear all selection first
|
|
1634
|
+
this.selectionModel.clear();
|
|
1635
|
+
// toggle all checkbox
|
|
1636
|
+
this.allSelected = !this.allSelected;
|
|
1637
|
+
if (this.allSelected) {
|
|
1638
|
+
// select all rows of the current page
|
|
1639
|
+
this.dataSource._pageData(this.dataSource.data).forEach((row) => {
|
|
1640
|
+
const dataRow = row;
|
|
1641
|
+
const rowId = "" + dataRow.rowId;
|
|
1642
|
+
this.selectionModel.select(rowId);
|
|
1643
|
+
});
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
isSelected(rowId) {
|
|
1647
|
+
return this.selectionModel.isSelected(rowId);
|
|
1648
|
+
}
|
|
1649
|
+
setFilterValue(value) {
|
|
1650
|
+
this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
|
|
1651
|
+
}
|
|
1652
|
+
onRowCheckbox(event, row) {
|
|
1653
|
+
event.stopPropagation(); // no click event on row
|
|
1654
|
+
this.selectionModel.toggle(row.rowId);
|
|
1553
1655
|
}
|
|
1554
1656
|
onRowEvent(event, row, action = this.defaultAction) {
|
|
1555
|
-
|
|
1556
|
-
this.
|
|
1657
|
+
switch (this.mode) {
|
|
1658
|
+
case this.BATCH:
|
|
1659
|
+
this.onRowCheckbox(event, row);
|
|
1660
|
+
break;
|
|
1661
|
+
case this.SINGLE:
|
|
1662
|
+
// emit the default action if the row (not the icon!) was clicked
|
|
1663
|
+
if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
|
|
1664
|
+
const selected = [];
|
|
1665
|
+
// if ID-generator is provided, return the ID, else return the ACTUAL data
|
|
1666
|
+
selected.push(this.idGenerator ? row.rowId : this.actualDataMap.get(row.rowId));
|
|
1667
|
+
this.emitTableAction(action, selected);
|
|
1668
|
+
}
|
|
1669
|
+
break;
|
|
1670
|
+
default:
|
|
1671
|
+
// do nothing if mode is NONE (or null)
|
|
1672
|
+
return;
|
|
1557
1673
|
}
|
|
1558
1674
|
}
|
|
1559
1675
|
onSortingEvent(sortingParams) {
|
|
1560
1676
|
this.sortEvent.emit(sortingParams);
|
|
1561
1677
|
}
|
|
1678
|
+
onPaginationEvent(event) {
|
|
1679
|
+
this.pagingEvent.emit(event);
|
|
1680
|
+
}
|
|
1562
1681
|
onTableAction(tableAction) {
|
|
1563
1682
|
if (!!tableAction) {
|
|
1564
|
-
|
|
1683
|
+
const selection = [];
|
|
1684
|
+
for (const selected of this.selectionModel.selected) {
|
|
1685
|
+
selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
|
|
1686
|
+
}
|
|
1687
|
+
tableAction.selected = selection;
|
|
1688
|
+
this.actionEvent.emit(tableAction);
|
|
1565
1689
|
}
|
|
1566
1690
|
}
|
|
1567
|
-
|
|
1568
|
-
|
|
1691
|
+
static transformData(value, transformer, transformerParams) {
|
|
1692
|
+
if (!transformer || !(transformer instanceof Function)) {
|
|
1693
|
+
return value;
|
|
1694
|
+
}
|
|
1695
|
+
return transformer(value, transformerParams);
|
|
1569
1696
|
}
|
|
1570
|
-
|
|
1697
|
+
static generateRowId() {
|
|
1698
|
+
return v4();
|
|
1699
|
+
}
|
|
1700
|
+
static isClickOnRowMenuIcon(event) {
|
|
1571
1701
|
var _a;
|
|
1572
|
-
return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains(
|
|
1702
|
+
return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains("mat-icon");
|
|
1703
|
+
}
|
|
1704
|
+
emitTableAction(action, selected) {
|
|
1705
|
+
const emitAction = Object.assign({}, action);
|
|
1706
|
+
if (action.type !== this.NONE) {
|
|
1707
|
+
emitAction.selected = [...selected];
|
|
1708
|
+
}
|
|
1709
|
+
this.actionEvent.emit(emitAction);
|
|
1710
|
+
}
|
|
1711
|
+
generateDisplayedDataElement(rowId, actualDataElement) {
|
|
1712
|
+
const displayedDataElement = {};
|
|
1713
|
+
displayedDataElement["rowId"] = rowId;
|
|
1714
|
+
for (const column of this.columns) {
|
|
1715
|
+
const actualValue = actualDataElement[column.dataPropertyName];
|
|
1716
|
+
displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
|
|
1717
|
+
}
|
|
1718
|
+
return displayedDataElement;
|
|
1719
|
+
}
|
|
1720
|
+
setActions() {
|
|
1721
|
+
this.rowActions = [];
|
|
1722
|
+
this.tableActions = [];
|
|
1723
|
+
for (const action of this.actions) {
|
|
1724
|
+
if (this.mode !== action.hiddenInMode) {
|
|
1725
|
+
switch (action.type) {
|
|
1726
|
+
case this.SINGLE:
|
|
1727
|
+
if (this.mode === this.SINGLE) {
|
|
1728
|
+
this.rowActions.push(action);
|
|
1729
|
+
}
|
|
1730
|
+
else {
|
|
1731
|
+
this.tableActions.push(action);
|
|
1732
|
+
}
|
|
1733
|
+
break;
|
|
1734
|
+
case this.BATCH:
|
|
1735
|
+
if (this.mode !== this.SINGLE) {
|
|
1736
|
+
this.tableActions.push(action);
|
|
1737
|
+
}
|
|
1738
|
+
break;
|
|
1739
|
+
default:
|
|
1740
|
+
this.tableActions.push(action);
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
}
|
|
1744
|
+
}
|
|
1745
|
+
createDataMapsAndSetDisplayedDataSourceData(data) {
|
|
1746
|
+
const displayedDataList = [];
|
|
1747
|
+
this.actualDataMap.clear();
|
|
1748
|
+
this.displayedDataMap.clear();
|
|
1749
|
+
for (const dataEntry of data) {
|
|
1750
|
+
const rowId = (this.idGenerator) ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
|
|
1751
|
+
this.actualDataMap.set(rowId, dataEntry);
|
|
1752
|
+
const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
|
|
1753
|
+
this.displayedDataMap.set(rowId, displayedDataElement);
|
|
1754
|
+
displayedDataList.push(displayedDataElement);
|
|
1755
|
+
}
|
|
1756
|
+
this.dataSource.data = displayedDataList;
|
|
1757
|
+
}
|
|
1758
|
+
getTableMode() {
|
|
1759
|
+
if (this._forceMode) {
|
|
1760
|
+
return this._forceMode;
|
|
1761
|
+
}
|
|
1762
|
+
if (!this.actions) {
|
|
1763
|
+
return this.NONE;
|
|
1764
|
+
}
|
|
1765
|
+
const distinctActionTypes = new Set();
|
|
1766
|
+
for (const rowAction of this.actions) {
|
|
1767
|
+
distinctActionTypes.add(rowAction.type);
|
|
1768
|
+
}
|
|
1769
|
+
if (distinctActionTypes.has(this.BATCH)) {
|
|
1770
|
+
return this.BATCH;
|
|
1771
|
+
}
|
|
1772
|
+
if (distinctActionTypes.has(this.SINGLE)) {
|
|
1773
|
+
return this.SINGLE;
|
|
1774
|
+
}
|
|
1775
|
+
return this.NONE;
|
|
1573
1776
|
}
|
|
1574
1777
|
}
|
|
1575
1778
|
DataTableComponent.decorators = [
|
|
1576
1779
|
{ type: Component, args: [{
|
|
1577
|
-
selector:
|
|
1578
|
-
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n
|
|
1579
|
-
styles: [".text-right{padding-right:24px!important;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
|
|
1780
|
+
selector: "mad-data-table",
|
|
1781
|
+
template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label | translate }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel | translate }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label | translate }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"mad-table\">\n <div class=\"datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (click)=\"onRowCheckbox($event, element.rowId)\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"mode === SINGLE\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\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 scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label | translate}}\"\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 scope=\"col\" 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\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\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 (page)=\"onPaginationEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
1782
|
+
styles: [".text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center}.mad-table,.noDataText{position:relative;width:100%}.mad-table{overflow-x:auto}.mad-datatable-action-bar{align-items:baseline;display:flex;justify-content:space-between}.mad-datatable-checkbox-container{margin-right:16px}.datatable-spinner-wrapper{align-items:center;background-color:#fff;display:flex;height:100%;justify-content:center;left:0;opacity:.8;pointer-events:unset;position:absolute;top:0;width:100%;z-index:99999}"]
|
|
1580
1783
|
},] }
|
|
1581
1784
|
];
|
|
1582
1785
|
DataTableComponent.propDecorators = {
|
|
@@ -1586,14 +1789,16 @@ DataTableComponent.propDecorators = {
|
|
|
1586
1789
|
noDataText: [{ type: Input }],
|
|
1587
1790
|
pageSizeOptions: [{ type: Input }],
|
|
1588
1791
|
defaultPageSize: [{ type: Input }],
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1792
|
+
actions: [{ type: Input }],
|
|
1793
|
+
idGenerator: [{ type: Input }],
|
|
1794
|
+
tableData: [{ type: Input }],
|
|
1795
|
+
loading: [{ type: Input }],
|
|
1592
1796
|
paginationEnabled: [{ type: Input }],
|
|
1593
1797
|
filterEnabled: [{ type: Input }],
|
|
1594
|
-
|
|
1595
|
-
rowAction: [{ type: Output }],
|
|
1798
|
+
forceMode: [{ type: Input }],
|
|
1596
1799
|
sortEvent: [{ type: Output }],
|
|
1800
|
+
actionEvent: [{ type: Output }],
|
|
1801
|
+
pagingEvent: [{ type: Output }],
|
|
1597
1802
|
paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
|
|
1598
1803
|
sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
|
|
1599
1804
|
};
|
|
@@ -1613,9 +1818,13 @@ DataTableModule.decorators = [
|
|
|
1613
1818
|
MatPaginatorModule,
|
|
1614
1819
|
MatSortModule,
|
|
1615
1820
|
MatTableModule,
|
|
1821
|
+
MatProgressSpinnerModule,
|
|
1616
1822
|
ButtonModule,
|
|
1823
|
+
TranslateModule,
|
|
1824
|
+
MatCheckboxModule,
|
|
1825
|
+
MatBadgeModule
|
|
1617
1826
|
],
|
|
1618
|
-
exports: [DataTableComponent]
|
|
1827
|
+
exports: [DataTableComponent]
|
|
1619
1828
|
},] }
|
|
1620
1829
|
];
|
|
1621
1830
|
|