@porscheinformatik/material-addons 10.2.5 → 10.3.2

package/bundles/porscheinformatik-material-addons.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/stepper')) :
-    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/bidi', '@angular/cdk/stepper', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/stepper'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.bidi, global.ng.cdk.stepper, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.stepper));
-}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator, bidi, stepper, a11y, flexLayout, stepper$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/collections'), require('uuid'), require('@angular/material/checkbox'), require('@angular/material/progress-spinner'), require('@angular/cdk/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/stepper')) :
+    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/collections', 'uuid', '@angular/material/checkbox', '@angular/material/progress-spinner', '@angular/cdk/bidi', '@angular/cdk/stepper', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/stepper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.collections, global.uuid, global.ng.material.checkbox, global.ng.material.progressSpinner, global.ng.cdk.bidi, global.ng.cdk.stepper, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.stepper));
+}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator, collections, uuid, checkbox, progressSpinner, bidi, stepper, a11y, flexLayout, stepper$1) { 'use strict';
 
     var MaterialActionButtonComponent = /** @class */ (function () {
         function MaterialActionButtonComponent() {
@@ -1001,7 +1001,8 @@
             this.translate = translate;
             this.mainActions = []; // shown on the left, next to title, as big buttons
             this.toolbarActions = []; // shown on the right as icons
-            this.liftFabButtonHigher = false;
+            this.toolbarActionsAlwaysAsMenu = false; // show the mobile view (burger menu) for toolbar actions
+            this.toolbarActionsMenuTitle = 'More'; // title of the burger menu
             this.routerSubscription = this.router.events.subscribe(function (routingEvent) {
                 if (routingEvent instanceof i1.NavigationEnd) {
                     if (_this.currentUrl !== routingEvent.urlAfterRedirects) {
@@ -1045,6 +1046,12 @@
         ToolbarService.prototype.setDataTitle = function (dataTitle) {
             this.dataTitle = dataTitle;
         };
+        ToolbarService.prototype.setToolbarActionsAlwaysAsMenu = function (toolbarActionsAlwaysAsMenu) {
+            this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
+        };
+        ToolbarService.prototype.getToolbarActionsAlwaysAsMenu = function () {
+            return this.toolbarActionsAlwaysAsMenu;
+        };
         ToolbarService.prototype.getDataTitle = function () {
             return this.dataTitle;
         };
@@ -1057,6 +1064,12 @@
         ToolbarService.prototype.getBackAction = function () {
             return this.backAction;
         };
+        ToolbarService.prototype.setToolbarActionsMenuTitle = function (toolbarActionsMenuTitle) {
+            this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
+        };
+        ToolbarService.prototype.getToolbarActionsMenuTitle = function () {
+            return this.toolbarActionsMenuTitle;
+        };
         ToolbarService.prototype.addMainAction = function (mainAction) {
             var _this = this;
             this.translate
@@ -1149,12 +1162,23 @@
         ToolbarComponent.prototype.getBackAction = function () {
             return this.toolbarService.getBackAction();
         };
+        ToolbarComponent.prototype.getToolbarActionsAlwaysAsMenu = function () {
+            return this.toolbarService.getToolbarActionsAlwaysAsMenu();
+        };
+        ToolbarComponent.prototype.getToolbarActionsMenuTitle = function () {
+            return this.toolbarService.getToolbarActionsMenuTitle();
+        };
+        ToolbarComponent.prototype.showBadgeForMenu = function () {
+            return this.getToolbarActions()
+                .slice(1) // the first icon is not shown in menu
+                .filter(function (value) { return value.badge && value.badge.value; }).length > 0;
+        };
         return ToolbarComponent;
     }());
     ToolbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-toolbar',
-                    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\"\n        >\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          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isHandset$ | async\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" matTooltip=\"More\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\">\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",
+                    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() ? '&#8288;' : 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",
                     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}"]
                 },] }
     ];
@@ -1905,31 +1929,57 @@
                 },] }
     ];
 
+    var DataTableActionType = /** @class */ (function () {
+        function DataTableActionType() {
+        }
+        return DataTableActionType;
+    }());
+    DataTableActionType.SINGLE = "SINGLE";
+    DataTableActionType.BATCH = "BATCH";
+    DataTableActionType.NONE = "NONE";
+
     var DataTableComponent = /** @class */ (function () {
         function DataTableComponent() {
             var _a;
-            this.ACTION_COLUMN_NAME = '__action__';
+            this.ACTION_COLUMN_NAME = "__action__";
+            this.SINGLE = DataTableActionType.SINGLE;
+            this.BATCH = DataTableActionType.BATCH;
+            this.NONE = DataTableActionType.NONE;
             this.columns = [];
-            this.filterLabel = 'NOT SET';
-            this.filterPlaceholder = 'NOT SET';
+            this.filterLabel = "Filter";
+            this.filterPlaceholder = "";
+            this.noDataText = "No matching data found";
             this.pageSizeOptions = [5, 10, 15];
             this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) || 10;
-            this.rowActions = [];
-            this.tableActions = [];
-            this.tableAction = new i0.EventEmitter();
-            this.rowAction = new i0.EventEmitter();
+            this.actions = [];
             this.sortEvent = new i0.EventEmitter();
+            this.actionEvent = new i0.EventEmitter();
+            this.pagingEvent = new i0.EventEmitter();
+            this.tableActions = [];
+            this.rowActions = [];
+            this.allSelected = false;
+            this.displayedDataMap = new Map();
+            this.actualDataMap = new Map();
+            this.selectionModel = new collections.SelectionModel(true);
             this.isFilterEnabled = false;
             this.isPaginationEnabled = false;
+            this.mode = this.NONE;
+            this.isRowClickable = false;
+            this.isLoading = false;
         }
-        Object.defineProperty(DataTableComponent.prototype, "displayedData", {
+        Object.defineProperty(DataTableComponent.prototype, "tableData", {
             set: function (data) {
                 if (!this.dataSource) {
                     this.dataSource = new table.MatTableDataSource(data);
                 }
-                else {
-                    this.dataSource.data = data;
-                }
+                this.createDataMapsAndSetDisplayedDataSourceData(data);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "loading", {
+            set: function (isLoading) {
+                this.isLoading = isLoading;
             },
             enumerable: false,
             configurable: true
@@ -1954,49 +2004,273 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DataTableComponent.prototype, "forceMode", {
+            set: function (mode) {
+                if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
+                    this._forceMode = mode;
+                    this.mode = mode;
+                    this.setActions();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         DataTableComponent.prototype.ngOnInit = function () {
             this.columnNames = this.columns.map(function (column) { return column.label; });
-            this.isRowClickable = this.rowActions.length > 0;
-            if (this.isRowClickable) {
-                this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+            this.mode = this.getTableMode();
+            this.setActions();
+            if (this.mode !== this.NONE) {
+                this.isRowClickable = true;
                 this.defaultAction = this.rowActions[0];
             }
+            this.columnNames.unshift(this.ACTION_COLUMN_NAME);
         };
         DataTableComponent.prototype.ngAfterViewInit = function () {
             this.dataSource.paginator = this.paginator;
             this.dataSource.sort = this.sort;
         };
-        DataTableComponent.prototype.onFilter = function (value) {
-            this.setFilterValue(value);
+        Object.defineProperty(DataTableComponent.prototype, "selectedCount", {
+            get: function () {
+                var _a;
+                return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "rowCount", {
+            get: function () {
+                var _a;
+                return ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data)) ? this.dataSource._pageData(this.dataSource.data).length : 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DataTableComponent.prototype.getSelectedCount = function (actionType) {
+            var count = this.selectedCount;
+            if (actionType != this.BATCH || count < 2) {
+                return "";
+            }
+            return " (" + count + ")";
+        };
+        DataTableComponent.prototype.isDisabled = function (actionType) {
+            switch (actionType) {
+                case this.SINGLE:
+                    return this.selectedCount != 1;
+                case this.BATCH:
+                    return this.selectedCount < 1;
+                default:
+                    return false;
+            }
+        };
+        DataTableComponent.prototype.onToggleSelectAll = function () {
+            var _this = this;
+            // clear all selection first
+            this.selectionModel.clear();
+            // toggle all checkbox
+            this.allSelected = !this.allSelected;
+            if (this.allSelected) {
+                // select all rows of the current page
+                this.dataSource._pageData(this.dataSource.data).forEach(function (row) {
+                    var dataRow = row;
+                    var rowId = "" + dataRow.rowId;
+                    _this.selectionModel.select(rowId);
+                });
+            }
+        };
+        DataTableComponent.prototype.isSelected = function (rowId) {
+            return this.selectionModel.isSelected(rowId);
+        };
+        DataTableComponent.prototype.setFilterValue = function (value) {
+            this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+        };
+        DataTableComponent.prototype.onRowCheckbox = function (event, row) {
+            event.stopPropagation(); // no click event on row
+            this.selectionModel.toggle(row.rowId);
         };
         DataTableComponent.prototype.onRowEvent = function (event, row, action) {
             if (action === void 0) { action = this.defaultAction; }
-            if (!!action && !this.isClickOnRowMenuIcon(event)) {
-                this.rowAction.emit(Object.assign(Object.assign({}, action), { outputRow: row }));
+            switch (this.mode) {
+                case this.BATCH:
+                    this.onRowCheckbox(event, row);
+                    break;
+                case this.SINGLE:
+                    // emit the default action if the row (not the icon!) was clicked
+                    if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
+                        var selected = [];
+                        // if ID-generator is provided, return the ID, else return the ACTUAL data
+                        selected.push(this.idGenerator ? row.rowId : this.actualDataMap.get(row.rowId));
+                        this.emitTableAction(action, selected);
+                    }
+                    break;
+                default:
+                    // do nothing if mode is NONE (or null)
+                    return;
             }
         };
         DataTableComponent.prototype.onSortingEvent = function (sortingParams) {
             this.sortEvent.emit(sortingParams);
         };
+        DataTableComponent.prototype.onPaginationEvent = function (event) {
+            this.pagingEvent.emit(event);
+        };
         DataTableComponent.prototype.onTableAction = function (tableAction) {
+            var e_1, _b;
             if (!!tableAction) {
-                this.tableAction.emit(tableAction);
+                var selection = [];
+                try {
+                    for (var _c = __values(this.selectionModel.selected), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var selected = _d.value;
+                        selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                tableAction.selected = selection;
+                this.actionEvent.emit(tableAction);
             }
         };
-        DataTableComponent.prototype.setFilterValue = function (value) {
-            this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+        DataTableComponent.transformData = function (value, transformer, transformerParams) {
+            if (!transformer || !(transformer instanceof Function)) {
+                return value;
+            }
+            return transformer(value, transformerParams);
         };
-        DataTableComponent.prototype.isClickOnRowMenuIcon = function (event) {
+        DataTableComponent.generateRowId = function () {
+            return uuid.v4();
+        };
+        DataTableComponent.isClickOnRowMenuIcon = function (event) {
             var _a;
-            return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('mat-icon');
+            return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains("mat-icon");
+        };
+        DataTableComponent.prototype.emitTableAction = function (action, selected) {
+            var emitAction = Object.assign({}, action);
+            if (action.type !== this.NONE) {
+                emitAction.selected = __spread(selected);
+            }
+            this.actionEvent.emit(emitAction);
+        };
+        DataTableComponent.prototype.generateDisplayedDataElement = function (rowId, actualDataElement) {
+            var e_2, _b;
+            var displayedDataElement = {};
+            displayedDataElement["rowId"] = rowId;
+            try {
+                for (var _c = __values(this.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var column = _d.value;
+                    var actualValue = actualDataElement[column.dataPropertyName];
+                    displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            return displayedDataElement;
+        };
+        DataTableComponent.prototype.setActions = function () {
+            var e_3, _b;
+            this.rowActions = [];
+            this.tableActions = [];
+            try {
+                for (var _c = __values(this.actions), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var action = _d.value;
+                    if (this.mode !== action.hiddenInMode) {
+                        switch (action.type) {
+                            case this.SINGLE:
+                                if (this.mode === this.SINGLE) {
+                                    this.rowActions.push(action);
+                                }
+                                else {
+                                    this.tableActions.push(action);
+                                }
+                                break;
+                            case this.BATCH:
+                                if (this.mode !== this.SINGLE) {
+                                    this.tableActions.push(action);
+                                }
+                                break;
+                            default:
+                                this.tableActions.push(action);
+                        }
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        };
+        DataTableComponent.prototype.createDataMapsAndSetDisplayedDataSourceData = function (data) {
+            var e_4, _b;
+            var displayedDataList = [];
+            this.actualDataMap.clear();
+            this.displayedDataMap.clear();
+            try {
+                for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
+                    var dataEntry = data_1_1.value;
+                    var rowId = (this.idGenerator) ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
+                    this.actualDataMap.set(rowId, dataEntry);
+                    var displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
+                    this.displayedDataMap.set(rowId, displayedDataElement);
+                    displayedDataList.push(displayedDataElement);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (data_1_1 && !data_1_1.done && (_b = data_1.return)) _b.call(data_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            this.dataSource.data = displayedDataList;
+        };
+        DataTableComponent.prototype.getTableMode = function () {
+            var e_5, _b;
+            if (this._forceMode) {
+                return this._forceMode;
+            }
+            if (!this.actions) {
+                return this.NONE;
+            }
+            var distinctActionTypes = new Set();
+            try {
+                for (var _c = __values(this.actions), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var rowAction = _d.value;
+                    distinctActionTypes.add(rowAction.type);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            if (distinctActionTypes.has(this.BATCH)) {
+                return this.BATCH;
+            }
+            if (distinctActionTypes.has(this.SINGLE)) {
+                return this.SINGLE;
+            }
+            return this.NONE;
         };
         return DataTableComponent;
     }());
     DataTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'mad-data-table',
-                    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 autocomplete=\"off\" (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 scope=\"col\" 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          scope=\"col\"\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 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\">\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",
-                    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%}"]
+                    selector: "mad-data-table",
+                    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",
+                    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}"]
                 },] }
     ];
     DataTableComponent.propDecorators = {
@@ -2006,14 +2280,16 @@
         noDataText: [{ type: i0.Input }],
         pageSizeOptions: [{ type: i0.Input }],
         defaultPageSize: [{ type: i0.Input }],
-        rowActions: [{ type: i0.Input }],
-        tableActions: [{ type: i0.Input }],
-        displayedData: [{ type: i0.Input }],
+        actions: [{ type: i0.Input }],
+        idGenerator: [{ type: i0.Input }],
+        tableData: [{ type: i0.Input }],
+        loading: [{ type: i0.Input }],
         paginationEnabled: [{ type: i0.Input }],
         filterEnabled: [{ type: i0.Input }],
-        tableAction: [{ type: i0.Output }],
-        rowAction: [{ type: i0.Output }],
+        forceMode: [{ type: i0.Input }],
         sortEvent: [{ type: i0.Output }],
+        actionEvent: [{ type: i0.Output }],
+        pagingEvent: [{ type: i0.Output }],
         paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: false },] }],
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
@@ -2036,9 +2312,13 @@
                         paginator.MatPaginatorModule,
                         sort.MatSortModule,
                         table.MatTableModule,
+                        progressSpinner.MatProgressSpinnerModule,
                         ButtonModule,
+                        i2.TranslateModule,
+                        checkbox.MatCheckboxModule,
+                        badge.MatBadgeModule
                     ],
-                    exports: [DataTableComponent],
+                    exports: [DataTableComponent]
                 },] }
     ];