@porscheinformatik/material-addons 10.3.2 → 10.4.0

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/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';
+    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/dialog'), require('@angular/cdk/drag-drop'), 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/dialog', '@angular/cdk/drag-drop', '@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.dialog, global.ng.cdk.dragDrop, 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, dialog, dragDrop, checkbox, progressSpinner, bidi, stepper, a11y, flexLayout, stepper$1) { 'use strict';
 
     var MaterialActionButtonComponent = /** @class */ (function () {
         function MaterialActionButtonComponent() {
@@ -364,17 +364,6 @@
         function MadBasicButton() {
             this.disableClick = function (e) { return e.stopPropagation(); };
         }
-        MadBasicButton.prototype.ngOnChanges = function (changes) {
-            this.disableButton();
-        };
-        MadBasicButton.prototype.disableButton = function () {
-            if (this.disabled) {
-                this.button.nativeElement.addEventListener('click', this.disableClick);
-            }
-            else {
-                this.button.nativeElement.removeEventListener('click', this.disableClick);
-            }
-        };
         Object.defineProperty(MadBasicButton.prototype, "pointerEvent", {
             get: function () {
                 return this.disabled ? 'none' : 'auto';
@@ -389,6 +378,17 @@
             enumerable: false,
             configurable: true
         });
+        MadBasicButton.prototype.ngOnChanges = function () {
+            this.disableButton();
+        };
+        MadBasicButton.prototype.disableButton = function () {
+            if (this.disabled) {
+                this.button.nativeElement.addEventListener('click', this.disableClick);
+            }
+            else {
+                this.button.nativeElement.removeEventListener('click', this.disableClick);
+            }
+        };
         return MadBasicButton;
     }());
     MadBasicButton.propDecorators = {
@@ -571,11 +571,11 @@
              */
             this.rows = 3;
             /**
-               * If shrinkIfEmpty is set to "false", nothing changes
-               * If set to "true" and multiline is also "true", the textarea will
-               * shrink to one row, if value is empty/null/undefined.
-               * Otherwise, the defined rows-value will be used
-               */
+             * If shrinkIfEmpty is set to "false", nothing changes
+             * If set to "true" and multiline is also "true", the textarea will
+             * shrink to one row, if value is empty/null/undefined.
+             * Otherwise, the defined rows-value will be used
+             */
             this.shrinkIfEmpty = false;
             this.toolTipForInputEnabled = false;
         }
@@ -661,7 +661,7 @@
         };
         ReadOnlyFormFieldWrapperComponent.prototype.isTextOverflown = function (input) {
             if (input) {
-                return (input.offsetWidth < input.scrollWidth);
+                return input.offsetWidth < input.scrollWidth;
             }
             return false;
         };
@@ -685,10 +685,10 @@
         { type: i0.ElementRef }
     ]; };
     ReadOnlyFormFieldWrapperComponent.propDecorators = {
-        readonly: [{ type: i0.Input }],
-        value: [{ type: i0.Input, args: ['value',] }],
         originalContent: [{ type: i0.ViewChild, args: ['contentWrapper', { static: false },] }],
         readOnlyContentWrapper: [{ type: i0.ViewChild, args: ['readOnlyContentWrapper', { static: false },] }],
+        readonly: [{ type: i0.Input }],
+        value: [{ type: i0.Input, args: ['value',] }],
         textAlign: [{ type: i0.Input, args: ['textAlign',] }],
         formatNumber: [{ type: i0.Input, args: ['formatNumber',] }],
         decimalPlaces: [{ type: i0.Input, args: ['decimalPlaces',] }],
@@ -1015,6 +1015,16 @@
                 }
             });
         }
+        Object.defineProperty(ToolbarService.prototype, "toolbarTitle", {
+            get: function () {
+                return this.title;
+            },
+            set: function (toolbarTitle) {
+                this.title = toolbarTitle;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ToolbarService.prototype.ngOnDestroy = function () {
             if (this.routerSubscription) {
                 this.routerSubscription.unsubscribe();
@@ -1033,16 +1043,6 @@
                 _this.toolbarActions.push(action);
             });
         };
-        Object.defineProperty(ToolbarService.prototype, "toolbarTitle", {
-            get: function () {
-                return this.title;
-            },
-            set: function (toolbarTitle) {
-                this.title = toolbarTitle;
-            },
-            enumerable: false,
-            configurable: true
-        });
         ToolbarService.prototype.setDataTitle = function (dataTitle) {
             this.dataTitle = dataTitle;
         };
@@ -1169,16 +1169,19 @@
             return this.toolbarService.getToolbarActionsMenuTitle();
         };
         ToolbarComponent.prototype.showBadgeForMenu = function () {
-            return this.getToolbarActions()
+            return (this.getToolbarActions()
                 .slice(1) // the first icon is not shown in menu
-                .filter(function (value) { return value.badge && value.badge.value; }).length > 0;
+                .filter(function (value) { return value.badge && value.badge.value; }).length > 0);
+        };
+        ToolbarComponent.prototype.hasImportantToolbarActions = function () {
+            return this.getToolbarActions().filter(function (value) { return !!value.importantAction; }).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) && !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",
+                    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 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\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=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button *ngIf=\"i >= (hasImportantToolbarActions() ? 0: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          </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}"]
                 },] }
     ];
@@ -1551,14 +1554,20 @@
                     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",
                     animations: [
                         animations.trigger('collapseExpandAnimation', [
-                            animations.transition(':enter', [animations.style({ opacity: 0, height: 0, overflow: 'hidden' }), animations.animate('100ms', animations.style({
+                            animations.transition(':enter', [
+                                animations.style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animations.animate('100ms', animations.style({
                                     opacity: 1,
-                                    height: '*'
-                                }))]),
-                            animations.transition(':leave', [animations.style({ opacity: 1, height: '*', overflow: 'hidden' }), animations.animate('100ms', animations.style({
+                                    height: '*',
+                                })),
+                            ]),
+                            animations.transition(':leave', [
+                                animations.style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animations.animate('100ms', animations.style({
                                     opacity: 0,
-                                    height: 0
-                                }))]),
+                                    height: 0,
+                                })),
+                            ]),
                         ]),
                         animations.trigger('rotateIcon', [
                             animations.state('true', animations.style({ transform: 'rotate(0)' })),
@@ -1595,6 +1604,11 @@
             this.throttleClick = new i0.EventEmitter();
             this.clicks = new rxjs.Subject();
         }
+        ThrottleClickDirective.prototype.clickEvent = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.clicks.next(event);
+        };
         ThrottleClickDirective.prototype.ngOnInit = function () {
             var _this = this;
             this.subscription = this.clicks.pipe(operators.throttleTime(this.throttleTime)).subscribe(function (e) { return _this.throttleClick.emit(e); });
@@ -1602,11 +1616,6 @@
         ThrottleClickDirective.prototype.ngOnDestroy = function () {
             this.subscription.unsubscribe();
         };
-        ThrottleClickDirective.prototype.clickEvent = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.clicks.next(event);
-        };
         return ThrottleClickDirective;
     }());
     ThrottleClickDirective.decorators = [
@@ -1614,7 +1623,6 @@
                     selector: '[madThrottleClick]',
                 },] }
     ];
-    ThrottleClickDirective.ctorParameters = function () { return []; };
     ThrottleClickDirective.propDecorators = {
         throttleTime: [{ type: i0.Input }],
         throttleClick: [{ type: i0.Output }],
@@ -1792,7 +1800,6 @@
     var TableComponent = /** @class */ (function () {
         function TableComponent() {
             var _a;
-            this.ACTION_COLUMN_NAME = '__action__';
             this.columns = [];
             this.filterLabel = 'NOT SET';
             this.filterPlaceholder = 'NOT SET';
@@ -1803,6 +1810,7 @@
             this.tableAction = new i0.EventEmitter();
             this.rowAction = new i0.EventEmitter();
             this.sortEvent = new i0.EventEmitter();
+            this.ACTION_COLUMN_NAME = '__action__';
             this.isFilterEnabled = false;
             this.isPaginationEnabled = false;
         }
@@ -1882,7 +1890,7 @@
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-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 (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",
+                    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\" sticky>\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\" [sticky]=\"column.isSticky\">\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</div>\n<!-- Pagination -->\n<mat-paginator\n  [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n  [pageSize]=\"defaultPageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
                     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%}"]
                 },] }
     ];
@@ -1895,14 +1903,14 @@
         defaultPageSize: [{ type: i0.Input }],
         rowActions: [{ type: i0.Input }],
         tableActions: [{ type: i0.Input }],
-        displayedData: [{ type: i0.Input }],
-        paginationEnabled: [{ type: i0.Input }],
-        filterEnabled: [{ type: i0.Input }],
         tableAction: [{ type: i0.Output }],
         rowAction: [{ type: i0.Output }],
         sortEvent: [{ type: i0.Output }],
         paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: false },] }],
-        sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
+        sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }],
+        displayedData: [{ type: i0.Input }],
+        paginationEnabled: [{ type: i0.Input }],
+        filterEnabled: [{ type: i0.Input }]
     };
 
     var TableModule = /** @class */ (function () {
@@ -1934,39 +1942,182 @@
         }
         return DataTableActionType;
     }());
-    DataTableActionType.SINGLE = "SINGLE";
-    DataTableActionType.BATCH = "BATCH";
-    DataTableActionType.NONE = "NONE";
+    DataTableActionType.SINGLE = 'SINGLE';
+    DataTableActionType.BATCH = 'BATCH';
+    DataTableActionType.NONE = 'NONE';
 
-    var DataTableComponent = /** @class */ (function () {
-        function DataTableComponent() {
+    var DataTableColumnsModalComponent = /** @class */ (function () {
+        function DataTableColumnsModalComponent(dialogRef, data) {
+            this.dialogRef = dialogRef;
+            this.data = data;
+            this.selectedColumns = [];
+            this.availableColumns = [];
+            this.filteredAvailableColumns = [];
+        }
+        DataTableColumnsModalComponent.prototype.ngOnInit = function () {
+            var e_1, _b;
+            this.definition = this.data.definition;
+            try {
+                for (var _c = __values(this.data.allColumns), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var column = _d.value;
+                    var columnId = column.id;
+                    var selectedColumnIds = this.definition.displayedColumns.map(function (col) { return col.id; });
+                    if (selectedColumnIds.includes(columnId)) {
+                        this.selectedColumns.push(column);
+                    }
+                    else {
+                        this.availableColumns.push(column);
+                    }
+                }
+            }
+            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; }
+            }
+            this.clearFilterValue();
+        };
+        DataTableColumnsModalComponent.prototype.onDrop = function (event) {
+            if (event.previousContainer === event.container) {
+                dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            }
+            else {
+                var itemIndex = this.findMatchingItemIndex(event.previousContainer, event.item);
+                dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, itemIndex, event.currentIndex);
+                this.clearFilterValue();
+                this.availableColumns.sort(function (a, b) { return a.label.localeCompare(b.label); });
+            }
+        };
+        DataTableColumnsModalComponent.prototype.onSave = function () {
+            this.definition.displayedColumns = this.selectedColumns;
+            var saveChange = {
+                action: 'SAVE',
+                definition: this.definition,
+            };
+            this.dialogRef.close(saveChange);
+        };
+        DataTableColumnsModalComponent.prototype.onDelete = function () {
+            var deleteChange = {
+                action: 'DELETE',
+                definition: this.definition,
+            };
+            this.dialogRef.close(deleteChange);
+        };
+        DataTableColumnsModalComponent.prototype.onCancel = function () {
+            this.dialogRef.close();
+        };
+        DataTableColumnsModalComponent.prototype.updateFilterValue = function () {
+            var _this = this;
             var _a;
-            this.ACTION_COLUMN_NAME = "__action__";
-            this.SINGLE = DataTableActionType.SINGLE;
-            this.BATCH = DataTableActionType.BATCH;
-            this.NONE = DataTableActionType.NONE;
-            this.columns = [];
-            this.filterLabel = "Filter";
-            this.filterPlaceholder = "";
-            this.noDataText = "No matching data found";
+            if (((_a = this.searchFilter) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.filteredAvailableColumns = this.availableColumns.filter(function (c) { return c.label.toLowerCase().includes(_this.searchFilter.toLowerCase()); });
+            }
+            else {
+                this.filteredAvailableColumns = __spread(this.availableColumns);
+            }
+        };
+        DataTableColumnsModalComponent.prototype.findMatchingItemIndex = function (previousContainer, item) {
+            var itemId = item.element.nativeElement.id;
+            var previousContainerItems = __spread(previousContainer.data);
+            if ((previousContainerItems === null || previousContainerItems === void 0 ? void 0 : previousContainerItems.length) < 1) {
+                return 0;
+            }
+            for (var itemIndex = 0; itemIndex < previousContainerItems.length; itemIndex++) {
+                if (previousContainerItems[itemIndex].id === itemId) {
+                    return itemIndex;
+                }
+            }
+            return 0;
+        };
+        DataTableColumnsModalComponent.prototype.clearFilterValue = function () {
+            this.searchFilter = '';
+            this.filteredAvailableColumns = __spread(this.availableColumns);
+        };
+        return DataTableColumnsModalComponent;
+    }());
+    DataTableColumnsModalComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-data-table-columns-modal.component',
+                    template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\">\n        <div class=\"column-drag-box\"\n             *ngFor=\"let selectedColumn of selectedColumns; let i = index\"\n             cdkDrag\n             [id]=\"selectedColumn.id\"\n        >\n          {{i + 1}}. {{selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n          <input matInput autocomplete=\"off\" (keyup)=\"updateFilterValue()\"\n                 placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\" [(ngModel)]=\"searchFilter\"/>\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\">\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{availableColumn.label}}\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data?.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data?.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n    {{ data?.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n",
+                    styles: [".column-drag-main-content{border-bottom:1px solid #f5f5f5;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:16px;padding:8px 8px 16px;width:544px}.column-drag-container{display:inline-block;font-size:small;max-width:100%;vertical-align:top;width:256px}.info-box{margin-bottom:16px}.column-drag-info-area,.info-box{color:rgba(0,0,0,.66);font-size:small;width:100%}.column-drag-info-area{align-items:stretch;display:flex;flex-direction:column;height:36px;justify-content:right;margin-bottom:32px}.column-drag-list{background:#fff;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;display:block;height:200px;overflow:auto}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{align-items:center;background:#fff;border-bottom:1px solid #ccc;box-sizing:border-box;color:rgba(0,0,0,.87);cursor:move;display:flex;flex-direction:row;font-size:14px;height:40px;justify-content:space-between;padding:12px 10px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
+                },] }
+    ];
+    DataTableColumnsModalComponent.ctorParameters = function () { return [
+        { type: dialog.MatDialogRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    ]; };
+
+    var DataTableComponent = /** @class */ (function () {
+        function DataTableComponent(matDialog) {
+            this.matDialog = matDialog;
+            // Translations
+            this.filterLabel = 'Filter';
+            this.filterPlaceholder = '';
+            this.filterColumnsLabel = 'Filter';
+            this.filterColumnsPlaceHolder = 'Filter available columns';
+            this.noDataText = 'No matching data found';
+            this.columnSettingsModalTitleLabel = 'Column settings';
+            this.selectedLabel = 'Selected columns';
+            this.availableLabel = 'Available columns';
+            this.saveLabel = 'Save';
+            this.deleteLabel = 'Delete';
+            this.cancelLabel = 'Cancel';
+            this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
             this.pageSizeOptions = [5, 10, 15];
-            this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) || 10;
             this.actions = [];
+            this.deleteDefinitionAllowed = false;
+            this.useAsync = false;
             this.sortEvent = new i0.EventEmitter();
             this.actionEvent = new i0.EventEmitter();
-            this.pagingEvent = new i0.EventEmitter();
+            this.pageEvent = new i0.EventEmitter();
+            this.allColumnsEvent = new i0.EventEmitter();
+            this.columnDefinitionChangeEvent = new i0.EventEmitter();
+            this.viewDefinitionChangeEvent = new i0.EventEmitter();
+            this.ACTION_COLUMN_NAME = '__action__';
+            this.SINGLE = DataTableActionType.SINGLE;
+            this.BATCH = DataTableActionType.BATCH;
+            this.NONE = DataTableActionType.NONE;
             this.tableActions = [];
             this.rowActions = [];
+            this.columns = [];
             this.allSelected = false;
             this.displayedDataMap = new Map();
             this.actualDataMap = new Map();
             this.selectionModel = new collections.SelectionModel(true);
+            this.allColumnDefinitions = [];
             this.isFilterEnabled = false;
             this.isPaginationEnabled = false;
             this.mode = this.NONE;
             this.isRowClickable = false;
+            this.showColumnModal = false;
             this.isLoading = false;
+            this.paginatorLength = 0;
+            this.paginatorPageIndex = 0;
+            this.paginatorPageSize = 50;
         }
+        Object.defineProperty(DataTableComponent.prototype, "displayedColumns", {
+            set: function (cols) {
+                if (!this.displayedColumnDefinition) {
+                    this.columns = cols ? __spread(cols) : [];
+                    this.columnIds = this.columns.map(function (column) { return column.id; });
+                    this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "displayedColumnDefinition", {
+            set: function (def) {
+                this.selectedColumnDefinion = def;
+                this.columns = def.displayedColumns;
+                this.columnIds = this.columns.map(function (column) { return column.id; });
+                this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DataTableComponent.prototype, "tableData", {
             set: function (data) {
                 if (!this.dataSource) {
@@ -1977,6 +2128,44 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DataTableComponent.prototype, "page", {
+            set: function (page) {
+                this.paginatorPageIndex = page.pageIndex;
+                this.paginatorPageSize = page.pageSize;
+                this.paginatorLength = page.length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "columnDefinitions", {
+            set: function (definitions) {
+                var e_1, _b;
+                var _a;
+                this.editableColumnDefinitions = [];
+                this.viewableColumnDefinitions = [];
+                this.allColumnDefinitions = __spread(definitions);
+                try {
+                    for (var definitions_1 = __values(definitions), definitions_1_1 = definitions_1.next(); !definitions_1_1.done; definitions_1_1 = definitions_1.next()) {
+                        var definition = definitions_1_1.value;
+                        if (definition.editable) {
+                            this.editableColumnDefinitions.push(definition);
+                        }
+                        if (((_a = definition.displayedColumns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                            this.viewableColumnDefinitions.push(definition);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (definitions_1_1 && !definitions_1_1.done && (_b = definitions_1.return)) _b.call(definitions_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DataTableComponent.prototype, "loading", {
             set: function (isLoading) {
                 this.isLoading = isLoading;
@@ -1984,13 +2173,33 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DataTableComponent.prototype, "defaultPageSize", {
+            set: function (defaultSize) {
+                this.paginatorPageSize = defaultSize;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "externalPaginator", {
+            set: function (paginator) {
+                this.extPaginator = paginator;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DataTableComponent.prototype, "paginationEnabled", {
             set: function (isPaginationEnabled) {
                 this.isPaginationEnabled = isPaginationEnabled;
-                // eslint-disable-next-line
-                var pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
-                if (this.dataSource.paginator) {
-                    this.dataSource.paginator._changePageSize(pageSize);
+                this.unsetPageSizeIfNecessary();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "allColumns", {
+            set: function (allColumns) {
+                this.allAvailableColumns = allColumns;
+                if (allColumns && this.showColumnModal) {
+                    this.openColumnModal();
                 }
             },
             enumerable: false,
@@ -1998,7 +2207,7 @@
         });
         Object.defineProperty(DataTableComponent.prototype, "filterEnabled", {
             set: function (isFilterEnabled) {
-                this.isFilterEnabled = isFilterEnabled;
+                this.isFilterEnabled = !this.useAsync ? isFilterEnabled : false;
                 this.setFilterValue(undefined);
             },
             enumerable: false,
@@ -2015,20 +2224,84 @@
             enumerable: false,
             configurable: true
         });
+        DataTableComponent.compare = function (a, b, sort) {
+            var x = a[sort.active];
+            var y = b[sort.active];
+            var ascending = sort.direction === 'asc';
+            switch (typeof x) {
+                case 'number':
+                    return DataTableComponent.compareNumber(x, y, ascending);
+                case 'string':
+                    return DataTableComponent.compareString(x, y, ascending);
+                case 'boolean':
+                    return DataTableComponent.compareBoolean(x, y, ascending);
+                default:
+                    // cannot compare -> return equal
+                    return 0;
+            }
+        };
+        DataTableComponent.compareNumber = function (x, y, ascending) {
+            return ascending ? x - y : y - x;
+        };
+        DataTableComponent.compareString = function (x, y, ascending) {
+            return ascending ? x.localeCompare(y) : y.localeCompare(x);
+        };
+        DataTableComponent.compareBoolean = function (x, y, ascending) {
+            if (x === y) {
+                return 0;
+            }
+            if (ascending) {
+                // true first
+                return x ? -1 : 1;
+            }
+            else {
+                // false first
+                return x ? 1 : -1;
+            }
+        };
+        DataTableComponent.transformData = function (value, transformer, transformerParams) {
+            if (!transformer || !(transformer instanceof Function)) {
+                return value;
+            }
+            return transformer(value, transformerParams);
+        };
+        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');
+        };
         DataTableComponent.prototype.ngOnInit = function () {
-            this.columnNames = this.columns.map(function (column) { return column.label; });
             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.onColumnSettings = function (definition) {
+            this.showColumnModal = true;
+            this.selectedDefinition = definition ? definition : this.allColumnDefinitions[0];
+            if (this.allAvailableColumns) {
+                this.openColumnModal();
+            }
+            else {
+                // if no complete definitions have been loaded yet send an event so the app can load it
+                this.allColumnsEvent.emit();
+            }
+        };
+        DataTableComponent.prototype.onViewDefinition = function (definition) {
+            this.selectedDefinition = definition;
+            this.viewDefinitionChangeEvent.emit(definition);
+        };
+        DataTableComponent.prototype.isCurrentDefinition = function (definition) {
+            return this.selectedDefinition && this.selectedDefinition.id === definition.id;
+        };
         Object.defineProperty(DataTableComponent.prototype, "selectedCount", {
             get: function () {
                 var _a;
@@ -2039,23 +2312,26 @@
         });
         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;
+                return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
             },
             enumerable: false,
             configurable: true
         });
+        DataTableComponent.prototype.getAllDataSourceRowsOfCurrentPage = function () {
+            var _a;
+            return (_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data);
+        };
         DataTableComponent.prototype.getSelectedCount = function (actionType) {
             var count = this.selectedCount;
-            if (actionType != this.BATCH || count < 2) {
-                return "";
+            if (actionType !== this.BATCH || count < 2) {
+                return '';
             }
-            return " (" + count + ")";
+            return ' (' + count + ')';
         };
         DataTableComponent.prototype.isDisabled = function (actionType) {
             switch (actionType) {
                 case this.SINGLE:
-                    return this.selectedCount != 1;
+                    return this.selectedCount !== 1;
                 case this.BATCH:
                     return this.selectedCount < 1;
                 default:
@@ -2070,10 +2346,8 @@
             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);
+                this.getAllDataSourceRowsOfCurrentPage().forEach(function (row) {
+                    _this.selectionModel.select('' + row.rowId);
                 });
             }
         };
@@ -2107,14 +2381,21 @@
                     return;
             }
         };
-        DataTableComponent.prototype.onSortingEvent = function (sortingParams) {
-            this.sortEvent.emit(sortingParams);
+        DataTableComponent.prototype.onSortingEvent = function (sort) {
+            if (this.useAsync) {
+                this.sortEvent.emit(sort);
+            }
+            else {
+                this.internalSort(sort);
+            }
         };
-        DataTableComponent.prototype.onPaginationEvent = function (event) {
-            this.pagingEvent.emit(event);
+        DataTableComponent.prototype.onPageEvent = function (event) {
+            if (this.useAsync) {
+                this.pageEvent.emit(event);
+            }
         };
         DataTableComponent.prototype.onTableAction = function (tableAction) {
-            var e_1, _b;
+            var e_2, _b;
             if (!!tableAction) {
                 var selection = [];
                 try {
@@ -2123,30 +2404,17 @@
                         selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
                     }
                 }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                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_1) throw e_1.error; }
+                    finally { if (e_2) throw e_2.error; }
                 }
                 tableAction.selected = selection;
                 this.actionEvent.emit(tableAction);
             }
         };
-        DataTableComponent.transformData = function (value, transformer, transformerParams) {
-            if (!transformer || !(transformer instanceof Function)) {
-                return value;
-            }
-            return transformer(value, transformerParams);
-        };
-        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");
-        };
         DataTableComponent.prototype.emitTableAction = function (action, selected) {
             var emitAction = Object.assign({}, action);
             if (action.type !== this.NONE) {
@@ -2155,9 +2423,9 @@
             this.actionEvent.emit(emitAction);
         };
         DataTableComponent.prototype.generateDisplayedDataElement = function (rowId, actualDataElement) {
-            var e_2, _b;
+            var e_3, _b;
             var displayedDataElement = {};
-            displayedDataElement["rowId"] = rowId;
+            displayedDataElement.rowId = rowId;
             try {
                 for (var _c = __values(this.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var column = _d.value;
@@ -2165,17 +2433,21 @@
                     displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            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_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
             return displayedDataElement;
         };
+        DataTableComponent.prototype.internalSort = function (sort) {
+            var sortedData = __spread(this.dataSource.data).sort(function (a, b) { return DataTableComponent.compare(a, b, sort); });
+            this.dataSource.data = __spread(sortedData);
+        };
         DataTableComponent.prototype.setActions = function () {
-            var e_3, _b;
+            var e_4, _b;
             this.rowActions = [];
             this.tableActions = [];
             try {
@@ -2202,40 +2474,68 @@
                     }
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         };
         DataTableComponent.prototype.createDataMapsAndSetDisplayedDataSourceData = function (data) {
-            var e_4, _b;
+            var e_5, _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 {
+            if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
                 try {
-                    if (data_1_1 && !data_1_1.done && (_b = data_1.return)) _b.call(data_1);
+                    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_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (data_1_1 && !data_1_1.done && (_b = data_1.return)) _b.call(data_1);
+                    }
+                    finally { if (e_5) throw e_5.error; }
                 }
-                finally { if (e_4) throw e_4.error; }
             }
             this.dataSource.data = displayedDataList;
+            this.unsetPageSizeIfNecessary();
+        };
+        DataTableComponent.prototype.openColumnModal = function () {
+            var _this = this;
+            var dialogData = {
+                allColumns: this.allAvailableColumns,
+                definition: this.selectedDefinition,
+                deleteDefinitionAllowed: this.deleteDefinitionAllowed,
+                filterColumnsLabel: this.filterColumnsLabel,
+                filterColumnsPlaceHolder: this.filterColumnsPlaceHolder,
+                noDataText: this.noDataText,
+                titleLabel: this.columnSettingsModalTitleLabel,
+                selectedLabel: this.selectedLabel,
+                availableLabel: this.availableLabel,
+                saveLabel: this.saveLabel,
+                deleteLabel: this.deleteLabel,
+                cancelLabel: this.cancelLabel,
+                infoTextLabel: this.infoTextLabel,
+            };
+            var dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
+            dialog.afterClosed().subscribe(function (result) {
+                // no event on CANCEL
+                if (result) {
+                    _this.columnDefinitionChangeEvent.emit(result);
+                }
+            });
         };
         DataTableComponent.prototype.getTableMode = function () {
-            var e_5, _b;
+            var e_6, _b;
             if (this._forceMode) {
                 return this._forceMode;
             }
@@ -2249,12 +2549,12 @@
                     distinctActionTypes.add(rowAction.type);
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_6) throw e_6.error; }
             }
             if (distinctActionTypes.has(this.BATCH)) {
                 return this.BATCH;
@@ -2264,32 +2564,63 @@
             }
             return this.NONE;
         };
+        DataTableComponent.prototype.unsetPageSizeIfNecessary = function () {
+            if (!this.useAsync && !this.isPaginationEnabled) {
+                var dataCount = this.dataSource.data ? this.dataSource.data.length : 0;
+                this.paginatorPageSize = dataCount;
+                this.paginatorLength = dataCount;
+            }
+        };
         return DataTableComponent;
     }());
     DataTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    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}"]
+                    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<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button *ngFor=\"let definition of editableColumnDefinitions\"\n            mat-menu-item\n            class=\"row-action\"\n            (click)=\"onColumnSettings(definition)\"\n            [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n    >\n      {{ definition.label | translate }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button *ngFor=\"let definition of viewableColumnDefinitions\"\n            mat-menu-item\n            class=\"row-action\"\n            (click)=\"onViewDefinition(definition)\"\n            [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n    >\n      {{ definition.label | translate }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n  <div class=\"mad-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.id\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label | translate }}\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 | translate }}\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=\"columnIds\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnIds\"\n    ></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button\n      *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n      (click)=\"onColumnSettings()\"\n    >\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button\n      *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n    >\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button\n      *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n    >\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [length]=\"paginatorLength\"\n    [pageIndex]=\"paginatorPageIndex\"\n    [pageSize]=\"paginatorPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($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=\"mad-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: [":host{background-color:#fff;display:flex;flex:1 1 auto;flex-direction:column;min-height:112px}.datatable-vertical-stretch-to-parent{display:flex;flex:1;flex-direction:column;max-height:100%;width:100%}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-300,.datatable-max-height-500{display:flex;flex:1;flex-direction:column;width:100%}.datatable{flex:1 1 auto;height:100%;overflow:auto;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable td,.datatable th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}.text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{position:relative;text-align:center;width:100%}.mad-datatable-action-bar{align-items:baseline;display:flex;justify-content:space-between}.mad-datatable-checkbox-container{margin-right:16px}.mad-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}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-header-row th{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:1}.active-column-definition{background-color:#f5f5f5;color:#000}"]
                 },] }
     ];
+    DataTableComponent.ctorParameters = function () { return [
+        { type: dialog.MatDialog }
+    ]; };
     DataTableComponent.propDecorators = {
-        columns: [{ type: i0.Input }],
         filterLabel: [{ type: i0.Input }],
         filterPlaceholder: [{ type: i0.Input }],
+        filterColumnsLabel: [{ type: i0.Input }],
+        filterColumnsPlaceHolder: [{ type: i0.Input }],
         noDataText: [{ type: i0.Input }],
+        columnSettingsModalTitleLabel: [{ type: i0.Input }],
+        selectedLabel: [{ type: i0.Input }],
+        availableLabel: [{ type: i0.Input }],
+        saveLabel: [{ type: i0.Input }],
+        deleteLabel: [{ type: i0.Input }],
+        cancelLabel: [{ type: i0.Input }],
+        infoTextLabel: [{ type: i0.Input }],
+        tableClass: [{ type: i0.Input }],
         pageSizeOptions: [{ type: i0.Input }],
-        defaultPageSize: [{ type: i0.Input }],
+        externalFilter: [{ type: i0.Input }],
         actions: [{ type: i0.Input }],
         idGenerator: [{ type: i0.Input }],
+        deleteDefinitionAllowed: [{ type: i0.Input }],
+        useAsync: [{ type: i0.Input }],
+        displayedColumns: [{ type: i0.Input }],
+        displayedColumnDefinition: [{ type: i0.Input }],
         tableData: [{ type: i0.Input }],
+        page: [{ type: i0.Input }],
+        columnDefinitions: [{ type: i0.Input }],
         loading: [{ type: i0.Input }],
+        defaultPageSize: [{ type: i0.Input }],
+        externalPaginator: [{ type: i0.Input }],
         paginationEnabled: [{ type: i0.Input }],
+        allColumns: [{ type: i0.Input }],
         filterEnabled: [{ type: i0.Input }],
         forceMode: [{ type: i0.Input }],
         sortEvent: [{ type: i0.Output }],
         actionEvent: [{ type: i0.Output }],
-        pagingEvent: [{ type: i0.Output }],
+        pageEvent: [{ type: i0.Output }],
+        allColumnsEvent: [{ type: i0.Output }],
+        columnDefinitionChangeEvent: [{ type: i0.Output }],
+        viewDefinitionChangeEvent: [{ type: i0.Output }],
         paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: false },] }],
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
@@ -2301,7 +2632,7 @@
     }());
     DataTableModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [DataTableComponent],
+                    declarations: [DataTableComponent, DataTableColumnsModalComponent],
                     imports: [
                         common.CommonModule,
                         button.MatButtonModule,
@@ -2316,9 +2647,11 @@
                         ButtonModule,
                         i2.TranslateModule,
                         checkbox.MatCheckboxModule,
-                        badge.MatBadgeModule
+                        badge.MatBadgeModule,
+                        dragDrop.DragDropModule,
+                        forms.FormsModule,
                     ],
-                    exports: [DataTableComponent]
+                    exports: [DataTableComponent, DataTableColumnsModalComponent],
                 },] }
     ];
 
@@ -2372,8 +2705,8 @@
                     template: "<div\n  class=\"header\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"1em\"\n  [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n  [ngClass]=\"this.hasError ? 'error-border' : 'check-border'\"\n>\n  <div [ngClass]=\"this.getCssForState()\"></div>\n  <div class=\"header-label\">\n    <mat-icon class=\"material-icons-outlined\">\n      {{ this.selected && !this.closed ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}\n    </mat-icon>\n  </div>\n  <div *ngIf=\"this.completed || this.hasError\" class=\"header-label\">\n    <mat-icon [ngClass]=\"this.completed ? 'green-check' : 'red-error'\">\n      {{ getIcon() }}\n    </mat-icon>\n  </div>\n  <span *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n  <div class=\"header-label\">{{ this.label }}</div>\n</div>\n",
                     inputs: ['color'],
                     host: {
-                        'class': 'mad-step-header',
-                        'role': 'tab',
+                        class: 'mad-step-header',
+                        role: 'tab',
                     },
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -2555,7 +2888,7 @@
                     host: {
                         '[class.stepper-vertical]': 'true',
                         '[attr.aria-orientation]': '"vertical"',
-                        'role': 'tablist',
+                        role: 'tablist',
                     },
                     animations: [madStepperAnimations.verticalStepTransition],
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -2595,8 +2928,6 @@
     var ContentHeaderComponent = /** @class */ (function () {
         function ContentHeaderComponent() {
         }
-        ContentHeaderComponent.prototype.ngOnInit = function () {
-        };
         return ContentHeaderComponent;
     }());
     ContentHeaderComponent.decorators = [
@@ -2606,13 +2937,10 @@
                     styles: [".content-header{padding-right:.5rem}"]
                 },] }
     ];
-    ContentHeaderComponent.ctorParameters = function () { return []; };
 
     var ContentPanelContainerComponent = /** @class */ (function () {
         function ContentPanelContainerComponent() {
         }
-        ContentPanelContainerComponent.prototype.ngOnInit = function () {
-        };
         return ContentPanelContainerComponent;
     }());
     ContentPanelContainerComponent.decorators = [
@@ -2622,13 +2950,10 @@
                     styles: [":host{display:flex;flex:1 1 auto;min-height:.05rem;overflow:hidden;position:relative}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}"]
                 },] }
     ];
-    ContentPanelContainerComponent.ctorParameters = function () { return []; };
 
     var ContentPanelContainerContentComponent = /** @class */ (function () {
         function ContentPanelContainerContentComponent() {
         }
-        ContentPanelContainerContentComponent.prototype.ngOnInit = function () {
-        };
         return ContentPanelContainerContentComponent;
     }());
     ContentPanelContainerContentComponent.decorators = [
@@ -2638,13 +2963,10 @@
                     styles: [":host{border-top:.05rem solid #ccc;flex:1 1 auto;height:1rem;overflow-y:auto;padding:1rem}"]
                 },] }
     ];
-    ContentPanelContainerContentComponent.ctorParameters = function () { return []; };
 
     var ContentPanelContainerFooterComponent = /** @class */ (function () {
         function ContentPanelContainerFooterComponent() {
         }
-        ContentPanelContainerFooterComponent.prototype.ngOnInit = function () {
-        };
         return ContentPanelContainerFooterComponent;
     }());
     ContentPanelContainerFooterComponent.decorators = [
@@ -2654,13 +2976,10 @@
                     styles: [":host{align-items:center;border-top:.05rem solid #ccc;display:flex;flex:0 0 auto;min-height:2rem;padding:.25rem 1rem}"]
                 },] }
     ];
-    ContentPanelContainerFooterComponent.ctorParameters = function () { return []; };
 
     var MainContainerComponent = /** @class */ (function () {
         function MainContainerComponent() {
         }
-        MainContainerComponent.prototype.ngOnInit = function () {
-        };
         return MainContainerComponent;
     }());
     MainContainerComponent.decorators = [
@@ -2670,7 +2989,6 @@
                     styles: [".main-container{display:flex;flex-direction:column;height:100%}"]
                 },] }
     ];
-    MainContainerComponent.ctorParameters = function () { return []; };
 
     var ContentPanelModule = /** @class */ (function () {
         function ContentPanelModule() {
@@ -2708,18 +3026,29 @@
              */
             this._headerClick = new i0.EventEmitter(true);
         }
+        Object.defineProperty(FlowbarComponent.prototype, "currentStepLabel", {
+            get: function () {
+                return this._activeStep.label;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FlowbarComponent.prototype, "currentSubStepLabel", {
+            get: function () {
+                var _a;
+                return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
+            },
+            enumerable: false,
+            configurable: true
+        });
         FlowbarComponent.prototype.ngOnInit = function () {
             // If no active step is set as input or the active step is not enabled, select the first enabled step
             if (!this._activeStep || !this._activeStep.enabled) {
-                this._activeStep = this._steps.find(function (step) {
-                    return step.enabled;
-                });
+                this._activeStep = this._steps.find(function (step) { return step.enabled; });
                 if (this._activeStep) {
                     // If sub steps exist then set the first non disabled sub step per default
                     if (this.activeTabHasSubSteps()) {
-                        this._activeStep.activeSubStep = this._activeStep.subSteps.find(function (step) {
-                            return step.enabled;
-                        });
+                        this._activeStep.activeSubStep = this._activeStep.subSteps.find(function (step) { return step.enabled; });
                     }
                     this._activeStepChange.emit(this._activeStep);
                 }
@@ -2818,15 +3147,11 @@
         };
         FlowbarComponent.prototype.getCurrentIndex = function () {
             var _this = this;
-            return this._steps.findIndex(function (value) {
-                return value === _this._activeStep;
-            });
+            return this._steps.findIndex(function (value) { return value === _this._activeStep; });
         };
         FlowbarComponent.prototype.getCurrentSubStepIndex = function () {
             var _this = this;
-            return this._activeStep.subSteps.findIndex(function (value) {
-                return value === _this._activeStep.activeSubStep;
-            });
+            return this._activeStep.subSteps.findIndex(function (value) { return value === _this._activeStep.activeSubStep; });
         };
         FlowbarComponent.prototype.triggerClick = function () {
             var selectedStep = this._steps[this.stepper.selectedIndex];
@@ -2836,21 +3161,6 @@
             event.stopPropagation(); //stop processing current header click event
             this._headerClick.emit(step);
         };
-        Object.defineProperty(FlowbarComponent.prototype, "currentStepLabel", {
-            get: function () {
-                return this._activeStep.label;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FlowbarComponent.prototype, "currentSubStepLabel", {
-            get: function () {
-                var _a;
-                return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
-            },
-            enumerable: false,
-            configurable: true
-        });
         FlowbarComponent.prototype.activeTabHasSubSteps = function () {
             return this._activeStep.subSteps && this._activeStep.subSteps.length > 0;
         };
@@ -2889,11 +3199,11 @@
                 },] }
     ];
     FlowbarComponent.propDecorators = {
-        stepper: [{ type: i0.ViewChild, args: ['stepper',] }],
         _steps: [{ type: i0.Input, args: ['steps',] }],
         _activeStep: [{ type: i0.Input, args: ['activeStep',] }],
         _activeStepChange: [{ type: i0.Output, args: ['activeStepChange',] }],
-        _headerClick: [{ type: i0.Output, args: ['headerClick',] }]
+        _headerClick: [{ type: i0.Output, args: ['headerClick',] }],
+        stepper: [{ type: i0.ViewChild, args: ['stepper',] }]
     };
 
     var FlowbarModule = /** @class */ (function () {
@@ -2968,19 +3278,20 @@
     exports.ToolbarModule = ToolbarModule;
     exports.ToolbarService = ToolbarService;
     exports.madStepperAnimations = madStepperAnimations;
-    exports.ɵa = PrimaryButtonComponent;
-    exports.ɵb = MadBasicButton;
-    exports.ɵc = OutlineButtonComponent;
-    exports.ɵd = LinkButtonComponent;
-    exports.ɵe = DangerButtonComponent;
-    exports.ɵf = IconButtonComponent;
-    exports.ɵg = NumericFieldDirective;
-    exports.ɵh = CardComponent;
-    exports.ɵi = QuickListComponent;
-    exports.ɵj = BaseQuickListComponent;
-    exports.ɵk = QuickListCompactComponent;
-    exports.ɵl = TableComponent;
-    exports.ɵm = DataTableComponent;
+    exports.ɵb = PrimaryButtonComponent;
+    exports.ɵc = MadBasicButton;
+    exports.ɵd = OutlineButtonComponent;
+    exports.ɵe = LinkButtonComponent;
+    exports.ɵf = DangerButtonComponent;
+    exports.ɵg = IconButtonComponent;
+    exports.ɵh = NumericFieldDirective;
+    exports.ɵi = CardComponent;
+    exports.ɵj = QuickListComponent;
+    exports.ɵk = BaseQuickListComponent;
+    exports.ɵl = QuickListCompactComponent;
+    exports.ɵm = TableComponent;
+    exports.ɵn = DataTableComponent;
+    exports.ɵo = DataTableColumnsModalComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });