@porscheinformatik/material-addons 10.3.4 → 10.4.0

package/fesm2015/porscheinformatik-material-addons.js

@@ -22,6 +22,8 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { SelectionModel } from '@angular/cdk/collections';
 import { v4 } from 'uuid';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Directionality } from '@angular/cdk/bidi';
@@ -68,7 +70,13 @@ class MadBasicButton {
     constructor() {
         this.disableClick = (e) => e.stopPropagation();
     }
-    ngOnChanges(changes) {
+    get pointerEvent() {
+        return this.disabled ? 'none' : 'auto';
+    }
+    get opacity() {
+        return this.disabled ? '0.35' : '1';
+    }
+    ngOnChanges() {
         this.disableButton();
     }
     disableButton() {
@@ -79,12 +87,6 @@ class MadBasicButton {
             this.button.nativeElement.removeEventListener('click', this.disableClick);
         }
     }
-    get pointerEvent() {
-        return this.disabled ? 'none' : 'auto';
-    }
-    get opacity() {
-        return this.disabled ? '0.35' : '1';
-    }
 }
 MadBasicButton.propDecorators = {
     pointerEvent: [{ type: HostBinding, args: ['style.pointer-events',] }],
@@ -248,11 +250,11 @@ class ReadOnlyFormFieldWrapperComponent {
          */
         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;
     }
@@ -303,7 +305,7 @@ class ReadOnlyFormFieldWrapperComponent {
         var _a, _b;
         const input = (_b = (_a = this.readOnlyContentWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input');
         if (input) {
-            let textOverFlowStyleValue = this.getTextOverFlowStyleValue();
+            const textOverFlowStyleValue = this.getTextOverFlowStyleValue();
             if (textOverFlowStyleValue) {
                 input.setAttribute('style', 'text-overflow: ' + textOverFlowStyleValue);
             }
@@ -314,7 +316,7 @@ class ReadOnlyFormFieldWrapperComponent {
         var _a, _b;
         // it works only if the style is added to the component directly. Should find a way for get it from the calculated
         // style. Than it would be possible to define the text-overflow in css for the whole application
-        let textOverflow = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.style.textOverflow;
+        const textOverflow = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.style.textOverflow;
         if (!textOverflow) {
             return 'ellipsis';
         }
@@ -338,7 +340,7 @@ class ReadOnlyFormFieldWrapperComponent {
     }
     isTextOverflown(input) {
         if (input) {
-            return (input.offsetWidth < input.scrollWidth);
+            return input.offsetWidth < input.scrollWidth;
         }
         return false;
     }
@@ -361,10 +363,10 @@ ReadOnlyFormFieldWrapperComponent.ctorParameters = () => [
     { type: ElementRef }
 ];
 ReadOnlyFormFieldWrapperComponent.propDecorators = {
-    readonly: [{ type: Input }],
-    value: [{ type: Input, args: ['value',] }],
     originalContent: [{ type: ViewChild, args: ['contentWrapper', { static: false },] }],
     readOnlyContentWrapper: [{ type: ViewChild, args: ['readOnlyContentWrapper', { static: false },] }],
+    readonly: [{ type: Input }],
+    value: [{ type: Input, args: ['value',] }],
     textAlign: [{ type: Input, args: ['textAlign',] }],
     formatNumber: [{ type: Input, args: ['formatNumber',] }],
     decimalPlaces: [{ type: Input, args: ['decimalPlaces',] }],
@@ -673,6 +675,12 @@ class ToolbarService {
             }
         });
     }
+    get toolbarTitle() {
+        return this.title;
+    }
+    set toolbarTitle(toolbarTitle) {
+        this.title = toolbarTitle;
+    }
     ngOnDestroy() {
         if (this.routerSubscription) {
             this.routerSubscription.unsubscribe();
@@ -690,12 +698,6 @@ class ToolbarService {
             this.toolbarActions.push(action);
         });
     }
-    set toolbarTitle(toolbarTitle) {
-        this.title = toolbarTitle;
-    }
-    get toolbarTitle() {
-        return this.title;
-    }
     setDataTitle(dataTitle) {
         this.dataTitle = dataTitle;
     }
@@ -818,9 +820,9 @@ class ToolbarComponent {
         return this.toolbarService.getToolbarActionsMenuTitle();
     }
     showBadgeForMenu() {
-        return this.getToolbarActions()
+        return (this.getToolbarActions()
             .slice(1) // the first icon is not shown in menu
-            .filter(value => value.badge && value.badge.value).length > 0;
+            .filter(value => value.badge && value.badge.value).length > 0);
     }
     hasImportantToolbarActions() {
         return this.getToolbarActions().filter(value => !!value.importantAction).length > 0;
@@ -1188,14 +1190,20 @@ CardComponent.decorators = [
                 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: [
                     trigger('collapseExpandAnimation', [
-                        transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
+                        transition(':enter', [
+                            style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                            animate('100ms', style({
                                 opacity: 1,
-                                height: '*'
-                            }))]),
-                        transition(':leave', [style({ opacity: 1, height: '*', overflow: 'hidden' }), animate('100ms', style({
+                                height: '*',
+                            })),
+                        ]),
+                        transition(':leave', [
+                            style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                            animate('100ms', style({
                                 opacity: 0,
-                                height: 0
-                            }))]),
+                                height: 0,
+                            })),
+                        ]),
                     ]),
                     trigger('rotateIcon', [
                         state('true', style({ transform: 'rotate(0)' })),
@@ -1232,24 +1240,23 @@ class ThrottleClickDirective {
         this.throttleClick = new EventEmitter();
         this.clicks = new Subject();
     }
+    clickEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicks.next(event);
+    }
     ngOnInit() {
         this.subscription = this.clicks.pipe(throttleTime(this.throttleTime)).subscribe(e => this.throttleClick.emit(e));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    clickEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicks.next(event);
-    }
 }
 ThrottleClickDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[madThrottleClick]',
             },] }
 ];
-ThrottleClickDirective.ctorParameters = () => [];
 ThrottleClickDirective.propDecorators = {
     throttleTime: [{ type: Input }],
     throttleClick: [{ type: Output }],
@@ -1410,7 +1417,6 @@ QuickListModule.decorators = [
 class TableComponent {
     constructor() {
         var _a;
-        this.ACTION_COLUMN_NAME = '__action__';
         this.columns = [];
         this.filterLabel = 'NOT SET';
         this.filterPlaceholder = 'NOT SET';
@@ -1421,6 +1427,7 @@ class TableComponent {
         this.tableAction = new EventEmitter();
         this.rowAction = new EventEmitter();
         this.sortEvent = new EventEmitter();
+        this.ACTION_COLUMN_NAME = '__action__';
         this.isFilterEnabled = false;
         this.isPaginationEnabled = false;
     }
@@ -1499,14 +1506,14 @@ TableComponent.propDecorators = {
     defaultPageSize: [{ type: Input }],
     rowActions: [{ type: Input }],
     tableActions: [{ type: Input }],
-    displayedData: [{ type: Input }],
-    paginationEnabled: [{ type: Input }],
-    filterEnabled: [{ type: Input }],
     tableAction: [{ type: Output }],
     rowAction: [{ type: Output }],
     sortEvent: [{ type: Output }],
     paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
-    sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
+    sort: [{ type: ViewChild, args: [MatSort, { static: true },] }],
+    displayedData: [{ type: Input }],
+    paginationEnabled: [{ type: Input }],
+    filterEnabled: [{ type: Input }]
 };
 
 class TableModule {
@@ -1532,38 +1539,160 @@ TableModule.decorators = [
 
 class DataTableActionType {
 }
-DataTableActionType.SINGLE = "SINGLE";
-DataTableActionType.BATCH = "BATCH";
-DataTableActionType.NONE = "NONE";
+DataTableActionType.SINGLE = 'SINGLE';
+DataTableActionType.BATCH = 'BATCH';
+DataTableActionType.NONE = 'NONE';
 
-class DataTableComponent {
-    constructor() {
+class DataTableColumnsModalComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.selectedColumns = [];
+        this.availableColumns = [];
+        this.filteredAvailableColumns = [];
+    }
+    ngOnInit() {
+        this.definition = this.data.definition;
+        for (const column of this.data.allColumns) {
+            const columnId = column.id;
+            const selectedColumnIds = this.definition.displayedColumns.map(col => col.id);
+            if (selectedColumnIds.includes(columnId)) {
+                this.selectedColumns.push(column);
+            }
+            else {
+                this.availableColumns.push(column);
+            }
+        }
+        this.clearFilterValue();
+    }
+    onDrop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            const itemIndex = this.findMatchingItemIndex(event.previousContainer, event.item);
+            transferArrayItem(event.previousContainer.data, event.container.data, itemIndex, event.currentIndex);
+            this.clearFilterValue();
+            this.availableColumns.sort((a, b) => a.label.localeCompare(b.label));
+        }
+    }
+    onSave() {
+        this.definition.displayedColumns = this.selectedColumns;
+        const saveChange = {
+            action: 'SAVE',
+            definition: this.definition,
+        };
+        this.dialogRef.close(saveChange);
+    }
+    onDelete() {
+        const deleteChange = {
+            action: 'DELETE',
+            definition: this.definition,
+        };
+        this.dialogRef.close(deleteChange);
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    updateFilterValue() {
         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(c => c.label.toLowerCase().includes(this.searchFilter.toLowerCase()));
+        }
+        else {
+            this.filteredAvailableColumns = [...this.availableColumns];
+        }
+    }
+    findMatchingItemIndex(previousContainer, item) {
+        const itemId = item.element.nativeElement.id;
+        const previousContainerItems = [...previousContainer.data];
+        if ((previousContainerItems === null || previousContainerItems === void 0 ? void 0 : previousContainerItems.length) < 1) {
+            return 0;
+        }
+        for (let itemIndex = 0; itemIndex < previousContainerItems.length; itemIndex++) {
+            if (previousContainerItems[itemIndex].id === itemId) {
+                return itemIndex;
+            }
+        }
+        return 0;
+    }
+    clearFilterValue() {
+        this.searchFilter = '';
+        this.filteredAvailableColumns = [...this.availableColumns];
+    }
+}
+DataTableColumnsModalComponent.decorators = [
+    { type: 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 = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+class DataTableComponent {
+    constructor(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 EventEmitter();
         this.actionEvent = new EventEmitter();
-        this.pagingEvent = new EventEmitter();
+        this.pageEvent = new EventEmitter();
+        this.allColumnsEvent = new EventEmitter();
+        this.columnDefinitionChangeEvent = new EventEmitter();
+        this.viewDefinitionChangeEvent = new 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 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;
+    }
+    set displayedColumns(cols) {
+        if (!this.displayedColumnDefinition) {
+            this.columns = cols ? [...cols] : [];
+            this.columnIds = this.columns.map(column => column.id);
+            this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+        }
+    }
+    set displayedColumnDefinition(def) {
+        this.selectedColumnDefinion = def;
+        this.columns = def.displayedColumns;
+        this.columnIds = this.columns.map(column => column.id);
+        this.columnIds.unshift(this.ACTION_COLUMN_NAME);
     }
     set tableData(data) {
         if (!this.dataSource) {
@@ -1571,19 +1700,46 @@ class DataTableComponent {
         }
         this.createDataMapsAndSetDisplayedDataSourceData(data);
     }
+    set page(page) {
+        this.paginatorPageIndex = page.pageIndex;
+        this.paginatorPageSize = page.pageSize;
+        this.paginatorLength = page.length;
+    }
+    set columnDefinitions(definitions) {
+        var _a;
+        this.editableColumnDefinitions = [];
+        this.viewableColumnDefinitions = [];
+        this.allColumnDefinitions = [...definitions];
+        for (const definition of definitions) {
+            if (definition.editable) {
+                this.editableColumnDefinitions.push(definition);
+            }
+            if (((_a = definition.displayedColumns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.viewableColumnDefinitions.push(definition);
+            }
+        }
+    }
     set loading(isLoading) {
         this.isLoading = isLoading;
     }
+    set defaultPageSize(defaultSize) {
+        this.paginatorPageSize = defaultSize;
+    }
+    set externalPaginator(paginator) {
+        this.extPaginator = paginator;
+    }
     set paginationEnabled(isPaginationEnabled) {
         this.isPaginationEnabled = isPaginationEnabled;
-        // eslint-disable-next-line
-        const pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
-        if (this.dataSource.paginator) {
-            this.dataSource.paginator._changePageSize(pageSize);
+        this.unsetPageSizeIfNecessary();
+    }
+    set allColumns(allColumns) {
+        this.allAvailableColumns = allColumns;
+        if (allColumns && this.showColumnModal) {
+            this.openColumnModal();
         }
     }
     set filterEnabled(isFilterEnabled) {
-        this.isFilterEnabled = isFilterEnabled;
+        this.isFilterEnabled = !this.useAsync ? isFilterEnabled : false;
         this.setFilterValue(undefined);
     }
     set forceMode(mode) {
@@ -1593,39 +1749,106 @@ class DataTableComponent {
             this.setActions();
         }
     }
+    static compare(a, b, sort) {
+        const x = a[sort.active];
+        const y = b[sort.active];
+        const 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;
+        }
+    }
+    static compareNumber(x, y, ascending) {
+        return ascending ? x - y : y - x;
+    }
+    static compareString(x, y, ascending) {
+        return ascending ? x.localeCompare(y) : y.localeCompare(x);
+    }
+    static compareBoolean(x, y, ascending) {
+        if (x === y) {
+            return 0;
+        }
+        if (ascending) {
+            // true first
+            return x ? -1 : 1;
+        }
+        else {
+            // false first
+            return x ? 1 : -1;
+        }
+    }
+    static transformData(value, transformer, transformerParams) {
+        if (!transformer || !(transformer instanceof Function)) {
+            return value;
+        }
+        return transformer(value, transformerParams);
+    }
+    static generateRowId() {
+        return v4();
+    }
+    static isClickOnRowMenuIcon(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');
+    }
     ngOnInit() {
-        this.columnNames = this.columns.map(column => 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);
     }
     ngAfterViewInit() {
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
     }
+    onColumnSettings(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();
+        }
+    }
+    onViewDefinition(definition) {
+        this.selectedDefinition = definition;
+        this.viewDefinitionChangeEvent.emit(definition);
+    }
+    isCurrentDefinition(definition) {
+        return this.selectedDefinition && this.selectedDefinition.id === definition.id;
+    }
     get selectedCount() {
         var _a;
         return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
     }
     get rowCount() {
+        return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
+    }
+    getAllDataSourceRowsOfCurrentPage() {
         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 (_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data);
     }
     getSelectedCount(actionType) {
         const count = this.selectedCount;
-        if (actionType != this.BATCH || count < 2) {
-            return "";
+        if (actionType !== this.BATCH || count < 2) {
+            return '';
         }
-        return " (" + count + ")";
+        return ' (' + count + ')';
     }
     isDisabled(actionType) {
         switch (actionType) {
             case this.SINGLE:
-                return this.selectedCount != 1;
+                return this.selectedCount !== 1;
             case this.BATCH:
                 return this.selectedCount < 1;
             default:
@@ -1639,10 +1862,8 @@ class DataTableComponent {
         this.allSelected = !this.allSelected;
         if (this.allSelected) {
             // select all rows of the current page
-            this.dataSource._pageData(this.dataSource.data).forEach((row) => {
-                const dataRow = row;
-                const rowId = "" + dataRow.rowId;
-                this.selectionModel.select(rowId);
+            this.getAllDataSourceRowsOfCurrentPage().forEach(row => {
+                this.selectionModel.select('' + row.rowId);
             });
         }
     }
@@ -1675,11 +1896,18 @@ class DataTableComponent {
                 return;
         }
     }
-    onSortingEvent(sortingParams) {
-        this.sortEvent.emit(sortingParams);
+    onSortingEvent(sort) {
+        if (this.useAsync) {
+            this.sortEvent.emit(sort);
+        }
+        else {
+            this.internalSort(sort);
+        }
     }
-    onPaginationEvent(event) {
-        this.pagingEvent.emit(event);
+    onPageEvent(event) {
+        if (this.useAsync) {
+            this.pageEvent.emit(event);
+        }
     }
     onTableAction(tableAction) {
         if (!!tableAction) {
@@ -1691,19 +1919,6 @@ class DataTableComponent {
             this.actionEvent.emit(tableAction);
         }
     }
-    static transformData(value, transformer, transformerParams) {
-        if (!transformer || !(transformer instanceof Function)) {
-            return value;
-        }
-        return transformer(value, transformerParams);
-    }
-    static generateRowId() {
-        return v4();
-    }
-    static isClickOnRowMenuIcon(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");
-    }
     emitTableAction(action, selected) {
         const emitAction = Object.assign({}, action);
         if (action.type !== this.NONE) {
@@ -1713,13 +1928,17 @@ class DataTableComponent {
     }
     generateDisplayedDataElement(rowId, actualDataElement) {
         const displayedDataElement = {};
-        displayedDataElement["rowId"] = rowId;
+        displayedDataElement.rowId = rowId;
         for (const column of this.columns) {
             const actualValue = actualDataElement[column.dataPropertyName];
             displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
         }
         return displayedDataElement;
     }
+    internalSort(sort) {
+        const sortedData = [...this.dataSource.data].sort((a, b) => DataTableComponent.compare(a, b, sort));
+        this.dataSource.data = [...sortedData];
+    }
     setActions() {
         this.rowActions = [];
         this.tableActions = [];
@@ -1749,14 +1968,41 @@ class DataTableComponent {
         const displayedDataList = [];
         this.actualDataMap.clear();
         this.displayedDataMap.clear();
-        for (const dataEntry of data) {
-            const rowId = (this.idGenerator) ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
-            this.actualDataMap.set(rowId, dataEntry);
-            const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
-            this.displayedDataMap.set(rowId, displayedDataElement);
-            displayedDataList.push(displayedDataElement);
+        if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+            for (const dataEntry of data) {
+                const rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
+                this.actualDataMap.set(rowId, dataEntry);
+                const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
+                this.displayedDataMap.set(rowId, displayedDataElement);
+                displayedDataList.push(displayedDataElement);
+            }
         }
         this.dataSource.data = displayedDataList;
+        this.unsetPageSizeIfNecessary();
+    }
+    openColumnModal() {
+        const 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,
+        };
+        const dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
+        dialog.afterClosed().subscribe(result => {
+            // no event on CANCEL
+            if (result) {
+                this.columnDefinitionChangeEvent.emit(result);
+            }
+        });
     }
     getTableMode() {
         if (this._forceMode) {
@@ -1777,31 +2023,62 @@ class DataTableComponent {
         }
         return this.NONE;
     }
+    unsetPageSizeIfNecessary() {
+        if (!this.useAsync && !this.isPaginationEnabled) {
+            const dataCount = this.dataSource.data ? this.dataSource.data.length : 0;
+            this.paginatorPageSize = dataCount;
+            this.paginatorLength = dataCount;
+        }
+    }
 }
 DataTableComponent.decorators = [
     { type: 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 = () => [
+    { type: MatDialog }
+];
 DataTableComponent.propDecorators = {
-    columns: [{ type: Input }],
     filterLabel: [{ type: Input }],
     filterPlaceholder: [{ type: Input }],
+    filterColumnsLabel: [{ type: Input }],
+    filterColumnsPlaceHolder: [{ type: Input }],
     noDataText: [{ type: Input }],
+    columnSettingsModalTitleLabel: [{ type: Input }],
+    selectedLabel: [{ type: Input }],
+    availableLabel: [{ type: Input }],
+    saveLabel: [{ type: Input }],
+    deleteLabel: [{ type: Input }],
+    cancelLabel: [{ type: Input }],
+    infoTextLabel: [{ type: Input }],
+    tableClass: [{ type: Input }],
     pageSizeOptions: [{ type: Input }],
-    defaultPageSize: [{ type: Input }],
+    externalFilter: [{ type: Input }],
     actions: [{ type: Input }],
     idGenerator: [{ type: Input }],
+    deleteDefinitionAllowed: [{ type: Input }],
+    useAsync: [{ type: Input }],
+    displayedColumns: [{ type: Input }],
+    displayedColumnDefinition: [{ type: Input }],
     tableData: [{ type: Input }],
+    page: [{ type: Input }],
+    columnDefinitions: [{ type: Input }],
     loading: [{ type: Input }],
+    defaultPageSize: [{ type: Input }],
+    externalPaginator: [{ type: Input }],
     paginationEnabled: [{ type: Input }],
+    allColumns: [{ type: Input }],
     filterEnabled: [{ type: Input }],
     forceMode: [{ type: Input }],
     sortEvent: [{ type: Output }],
     actionEvent: [{ type: Output }],
-    pagingEvent: [{ type: Output }],
+    pageEvent: [{ type: Output }],
+    allColumnsEvent: [{ type: Output }],
+    columnDefinitionChangeEvent: [{ type: Output }],
+    viewDefinitionChangeEvent: [{ type: Output }],
     paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
     sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
 };
@@ -1810,7 +2087,7 @@ class DataTableModule {
 }
 DataTableModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [DataTableComponent],
+                declarations: [DataTableComponent, DataTableColumnsModalComponent],
                 imports: [
                     CommonModule,
                     MatButtonModule,
@@ -1825,9 +2102,11 @@ DataTableModule.decorators = [
                     ButtonModule,
                     TranslateModule,
                     MatCheckboxModule,
-                    MatBadgeModule
+                    MatBadgeModule,
+                    DragDropModule,
+                    FormsModule,
                 ],
-                exports: [DataTableComponent]
+                exports: [DataTableComponent, DataTableColumnsModalComponent],
             },] }
 ];
 
@@ -1878,8 +2157,8 @@ StepHeaderComponent.decorators = [
                 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2052,7 +2331,7 @@ StepperComponent.decorators = [
                 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
@@ -2087,9 +2366,6 @@ StepperModule.decorators = [
 ];
 
 class ContentHeaderComponent {
-    constructor() { }
-    ngOnInit() {
-    }
 }
 ContentHeaderComponent.decorators = [
     { type: Component, args: [{
@@ -2098,12 +2374,8 @@ ContentHeaderComponent.decorators = [
                 styles: [".content-header{padding-right:.5rem}"]
             },] }
 ];
-ContentHeaderComponent.ctorParameters = () => [];
 
 class ContentPanelContainerComponent {
-    constructor() { }
-    ngOnInit() {
-    }
 }
 ContentPanelContainerComponent.decorators = [
     { type: Component, args: [{
@@ -2112,12 +2384,8 @@ ContentPanelContainerComponent.decorators = [
                 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 = () => [];
 
 class ContentPanelContainerContentComponent {
-    constructor() { }
-    ngOnInit() {
-    }
 }
 ContentPanelContainerContentComponent.decorators = [
     { type: Component, args: [{
@@ -2126,12 +2394,8 @@ ContentPanelContainerContentComponent.decorators = [
                 styles: [":host{border-top:.05rem solid #ccc;flex:1 1 auto;height:1rem;overflow-y:auto;padding:1rem}"]
             },] }
 ];
-ContentPanelContainerContentComponent.ctorParameters = () => [];
 
 class ContentPanelContainerFooterComponent {
-    constructor() { }
-    ngOnInit() {
-    }
 }
 ContentPanelContainerFooterComponent.decorators = [
     { type: Component, args: [{
@@ -2140,12 +2404,8 @@ ContentPanelContainerFooterComponent.decorators = [
                 styles: [":host{align-items:center;border-top:.05rem solid #ccc;display:flex;flex:0 0 auto;min-height:2rem;padding:.25rem 1rem}"]
             },] }
 ];
-ContentPanelContainerFooterComponent.ctorParameters = () => [];
 
 class MainContainerComponent {
-    constructor() { }
-    ngOnInit() {
-    }
 }
 MainContainerComponent.decorators = [
     { type: Component, args: [{
@@ -2154,7 +2414,6 @@ MainContainerComponent.decorators = [
                 styles: [".main-container{display:flex;flex-direction:column;height:100%}"]
             },] }
 ];
-MainContainerComponent.ctorParameters = () => [];
 
 class ContentPanelModule {
 }
@@ -2189,18 +2448,21 @@ class FlowbarComponent {
          */
         this._headerClick = new EventEmitter(true);
     }
+    get currentStepLabel() {
+        return this._activeStep.label;
+    }
+    get currentSubStepLabel() {
+        var _a;
+        return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
+    }
     ngOnInit() {
         // 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(step => {
-                return step.enabled;
-            });
+            this._activeStep = this._steps.find(step => 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(step => {
-                        return step.enabled;
-                    });
+                    this._activeStep.activeSubStep = this._activeStep.subSteps.find(step => step.enabled);
                 }
                 this._activeStepChange.emit(this._activeStep);
             }
@@ -2298,14 +2560,10 @@ class FlowbarComponent {
         return false;
     }
     getCurrentIndex() {
-        return this._steps.findIndex(value => {
-            return value === this._activeStep;
-        });
+        return this._steps.findIndex(value => value === this._activeStep);
     }
     getCurrentSubStepIndex() {
-        return this._activeStep.subSteps.findIndex(value => {
-            return value === this._activeStep.activeSubStep;
-        });
+        return this._activeStep.subSteps.findIndex(value => value === this._activeStep.activeSubStep);
     }
     triggerClick() {
         const selectedStep = this._steps[this.stepper.selectedIndex];
@@ -2315,13 +2573,6 @@ class FlowbarComponent {
         event.stopPropagation(); //stop processing current header click event
         this._headerClick.emit(step);
     }
-    get currentStepLabel() {
-        return this._activeStep.label;
-    }
-    get currentSubStepLabel() {
-        var _a;
-        return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
-    }
     activeTabHasSubSteps() {
         return this._activeStep.subSteps && this._activeStep.subSteps.length > 0;
     }
@@ -2359,11 +2610,11 @@ FlowbarComponent.decorators = [
             },] }
 ];
 FlowbarComponent.propDecorators = {
-    stepper: [{ type: ViewChild, args: ['stepper',] }],
     _steps: [{ type: Input, args: ['steps',] }],
     _activeStep: [{ type: Input, args: ['activeStep',] }],
     _activeStepChange: [{ type: Output, args: ['activeStepChange',] }],
-    _headerClick: [{ type: Output, args: ['headerClick',] }]
+    _headerClick: [{ type: Output, args: ['headerClick',] }],
+    stepper: [{ type: ViewChild, args: ['stepper',] }]
 };
 
 class FlowbarModule {
@@ -2401,5 +2652,5 @@ MaterialAddonsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonModule, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DataTableModule, FlowbarComponent, FlowbarModule, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldModule, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations, PrimaryButtonComponent as ɵa, MadBasicButton as ɵb, OutlineButtonComponent as ɵc, LinkButtonComponent as ɵd, DangerButtonComponent as ɵe, IconButtonComponent as ɵf, NumericFieldDirective as ɵg, CardComponent as ɵh, QuickListComponent as ɵi, BaseQuickListComponent as ɵj, QuickListCompactComponent as ɵk, TableComponent as ɵl, DataTableComponent as ɵm };
+export { ButtonModule, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DataTableModule, FlowbarComponent, FlowbarModule, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldModule, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations, PrimaryButtonComponent as ɵb, MadBasicButton as ɵc, OutlineButtonComponent as ɵd, LinkButtonComponent as ɵe, DangerButtonComponent as ɵf, IconButtonComponent as ɵg, NumericFieldDirective as ɵh, CardComponent as ɵi, QuickListComponent as ɵj, BaseQuickListComponent as ɵk, QuickListCompactComponent as ɵl, TableComponent as ɵm, DataTableComponent as ɵn, DataTableColumnsModalComponent as ɵo };
 //# sourceMappingURL=porscheinformatik-material-addons.js.map