@porscheinformatik/material-addons 10.1.9 → 10.2.3

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')) :
-    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'], 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));
-}(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) { '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/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/stepper')) :
+    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/bidi', '@angular/cdk/stepper', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/stepper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.bidi, global.ng.cdk.stepper, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.stepper));
+}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator, bidi, stepper, a11y, flexLayout, stepper$1) { 'use strict';
 
     var MaterialActionButtonComponent = /** @class */ (function () {
         function MaterialActionButtonComponent() {
@@ -61,11 +61,13 @@
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b)
-                if (b.hasOwnProperty(p))
+                if (Object.prototype.hasOwnProperty.call(b, p))
                     d[p] = b[p]; };
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -208,10 +210,10 @@
             k2 = k;
         o[k2] = m[k];
     });
-    function __exportStar(m, exports) {
+    function __exportStar(m, o) {
         for (var p in m)
-            if (p !== "default" && !exports.hasOwnProperty(p))
-                __createBinding(exports, m, p);
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
     }
     function __values(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
@@ -251,11 +253,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -264,7 +268,17 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -321,7 +335,7 @@
         var result = {};
         if (mod != null)
             for (var k in mod)
-                if (Object.hasOwnProperty.call(mod, k))
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
                     __createBinding(result, mod, k);
         __setModuleDefault(result, mod);
         return result;
@@ -329,18 +343,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var MadBasicButton = /** @class */ (function () {
@@ -1205,7 +1222,9 @@
             set: function (value) {
                 if (this._numericValue !== value && !(isNaN(this._numericValue) && (isNaN(value) || value === null))) {
                     this.originalValue = value;
-                    this._numericValue = this.roundOrTruncate(value);
+                    // Don't roundOrTruncate if value was set to empty otherwise input value will be set to 0 instead of empty
+                    // which happens when an input is being reset
+                    this._numericValue = value === null || value === undefined ? value : this.roundOrTruncate(value); // eslint-disable-line
                     this.handleInputChanged();
                 }
             },
@@ -1478,9 +1497,11 @@
             this.saveDisabled = false;
             this.saveText = 'NOT SET';
             this.editMode = false;
+            this.additionalActionText = '';
             this.edit = new i0.EventEmitter();
             this.cancel = new i0.EventEmitter();
             this.save = new i0.EventEmitter();
+            this.additionalAction = new i0.EventEmitter();
         }
         CardComponent.prototype.onCancel = function () {
             this.cancel.emit(undefined);
@@ -1495,16 +1516,25 @@
         CardComponent.prototype.toggleCollapse = function () {
             this.expanded = !this.expanded;
         };
+        CardComponent.prototype.additionalActionClicked = function () {
+            this.additionalAction.emit(undefined);
+        };
         return CardComponent;
     }());
     CardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-card',
-                    template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>\n      {{ title }}\n      <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n        <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n      </mad-icon-button>\n    </mat-card-title>\n    <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n      <mat-icon>create</mat-icon>\n    </mad-icon-button>\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",
+                    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({ opacity: 1, height: '*' }))]),
-                            animations.transition(':leave', [animations.style({ opacity: 1, height: '*', overflow: 'hidden' }), animations.animate('100ms', animations.style({ opacity: 0, height: 0 }))]),
+                            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({
+                                    opacity: 0,
+                                    height: 0
+                                }))]),
                         ]),
                         animations.trigger('rotateIcon', [
                             animations.state('true', animations.style({ transform: 'rotate(0)' })),
@@ -1527,9 +1557,12 @@
         saveText: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
         editMode: [{ type: i0.Input }],
+        additionalActionIcon: [{ type: i0.Input }],
+        additionalActionText: [{ type: i0.Input }],
         edit: [{ type: i0.Output }],
         cancel: [{ type: i0.Output }],
-        save: [{ type: i0.Output }]
+        save: [{ type: i0.Output }],
+        additionalAction: [{ type: i0.Output }]
     };
 
     var ThrottleClickDirective = /** @class */ (function () {
@@ -1590,9 +1623,8 @@
                 },] }
     ];
 
-    // Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
-    var QuickListComponent = /** @class */ (function () {
-        function QuickListComponent(changeDetectorRef) {
+    var BaseQuickListComponent = /** @class */ (function () {
+        function BaseQuickListComponent(changeDetectorRef) {
             this.changeDetectorRef = changeDetectorRef;
             this.allItems = [];
             this.addLabel = 'NOT SET';
@@ -1601,31 +1633,31 @@
             this.added = new i0.EventEmitter();
             this.removed = new i0.EventEmitter();
         }
-        QuickListComponent.prototype.ngOnInit = function () {
+        BaseQuickListComponent.prototype.ngOnInit = function () {
             this.addEventFunction = this.addItem.bind(this);
-            if (typeof this.minItems !== 'undefined') {
+            if (this.minItems) {
                 for (var n = this.allItems.length; n < this.minItems; n++) {
                     this.interalAddItem();
                 }
             }
         };
-        QuickListComponent.prototype.ngAfterViewInit = function () {
+        BaseQuickListComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             setTimeout(function () { return _this.setFocusOnAdd(); }, 1);
         };
-        QuickListComponent.prototype.addItem = function () {
+        BaseQuickListComponent.prototype.addItem = function () {
             var newItem = this.interalAddItem();
             if (!!newItem) {
                 this.added.emit(newItem);
             }
         };
-        QuickListComponent.prototype.removeItem = function (item) {
+        BaseQuickListComponent.prototype.removeItem = function (item) {
             if (this.isDeleteAllowed()) {
                 this.allItems.splice(this.allItems.indexOf(item), 1);
                 this.removed.emit(item);
             }
         };
-        QuickListComponent.prototype.setFocusOnAdd = function () {
+        BaseQuickListComponent.prototype.setFocusOnAdd = function () {
             var _this = this;
             this.rowCountFocus = this.itemRows.length;
             this.itemRows.changes.subscribe(function (els) {
@@ -1638,13 +1670,13 @@
                 _this.rowCountFocus = els.length;
             });
         };
-        QuickListComponent.prototype.isAddAllowed = function () {
-            return typeof this.maxItems === 'undefined' || this.allItems.length < this.maxItems;
+        BaseQuickListComponent.prototype.isAddAllowed = function () {
+            return this.addPossible && (!this.maxItems || this.allItems.length < this.maxItems);
         };
-        QuickListComponent.prototype.isDeleteAllowed = function () {
-            return typeof this.minItems === 'undefined' || this.allItems.length > this.minItems;
+        BaseQuickListComponent.prototype.isDeleteAllowed = function () {
+            return !this.minItems || this.allItems.length > this.minItems;
         };
-        QuickListComponent.prototype.interalAddItem = function () {
+        BaseQuickListComponent.prototype.interalAddItem = function () {
             if (this.isAddAllowed()) {
                 var newItem = Object.assign({}, this.blankItem);
                 // creates ids in the form of "n5kdz1pljl8"
@@ -1657,18 +1689,18 @@
             }
             return null;
         };
-        return QuickListComponent;
+        return BaseQuickListComponent;
     }());
-    QuickListComponent.decorators = [
+    BaseQuickListComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'mad-quick-list',
-                    template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n  <div *ngIf=\"itemTemplate\" #row>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!(readonly || readonly === '')\" [disabled]=\"!isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button *ngIf=\"!(readonly || readonly === '')\" (click)=\"addItem()\"\n                 [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n"
+                    selector: 'mad-base-quick-list',
+                    template: ''
                 },] }
     ];
-    QuickListComponent.ctorParameters = function () { return [
+    BaseQuickListComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
-    QuickListComponent.propDecorators = {
+    BaseQuickListComponent.propDecorators = {
         allItems: [{ type: i0.Input }],
         addLabel: [{ type: i0.Input }],
         addPossible: [{ type: i0.Input }],
@@ -1682,6 +1714,44 @@
         itemRows: [{ type: i0.ViewChildren, args: ['row',] }]
     };
 
+    var QuickListComponent = /** @class */ (function (_super) {
+        __extends(QuickListComponent, _super);
+        function QuickListComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            return _this;
+        }
+        return QuickListComponent;
+    }(BaseQuickListComponent));
+    QuickListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-quick-list',
+                    template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n  <div *ngIf=\"itemTemplate\" #row>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n                 [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n"
+                },] }
+    ];
+    QuickListComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    var QuickListCompactComponent = /** @class */ (function (_super) {
+        __extends(QuickListCompactComponent, _super);
+        function QuickListCompactComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            return _this;
+        }
+        return QuickListCompactComponent;
+    }(BaseQuickListComponent));
+    QuickListCompactComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-quick-list-compact',
+                    template: "<h3>\n    <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last;\">\n    <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row>\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n        <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n            <mat-icon>delete</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n            <mat-icon>add_circle_outline</mat-icon>\n        </mad-icon-button>\n    </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.allItems.length\"\n                 (click)=\"addItem()\"\n                 [disabled]=\"!isAddAllowed()\">\n    {{ addLabel }}\n</mad-link-button>\n"
+                },] }
+    ];
+    QuickListCompactComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var QuickListModule = /** @class */ (function () {
         function QuickListModule() {
         }
@@ -1689,9 +1759,9 @@
     }());
     QuickListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [QuickListComponent],
+                    declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
                     imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, ButtonModule],
-                    exports: [QuickListComponent],
+                    exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
                 },] }
     ];
 
@@ -1829,12 +1899,729 @@
                         paginator.MatPaginatorModule,
                         sort.MatSortModule,
                         table.MatTableModule,
-                        ButtonModule
+                        ButtonModule,
                     ],
                     exports: [TableComponent],
                 },] }
     ];
 
+    var DataTableComponent = /** @class */ (function () {
+        function DataTableComponent() {
+            var _a;
+            this.ACTION_COLUMN_NAME = '__action__';
+            this.columns = [];
+            this.filterLabel = 'NOT SET';
+            this.filterPlaceholder = 'NOT SET';
+            this.pageSizeOptions = [5, 10, 15];
+            this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) || 10;
+            this.rowActions = [];
+            this.tableActions = [];
+            this.tableAction = new i0.EventEmitter();
+            this.rowAction = new i0.EventEmitter();
+            this.sortEvent = new i0.EventEmitter();
+            this.isFilterEnabled = false;
+            this.isPaginationEnabled = false;
+        }
+        Object.defineProperty(DataTableComponent.prototype, "displayedData", {
+            set: function (data) {
+                if (!this.dataSource) {
+                    this.dataSource = new table.MatTableDataSource(data);
+                }
+                else {
+                    this.dataSource.data = data;
+                }
+            },
+            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);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataTableComponent.prototype, "filterEnabled", {
+            set: function (isFilterEnabled) {
+                this.isFilterEnabled = isFilterEnabled;
+                this.setFilterValue(undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DataTableComponent.prototype.ngOnInit = function () {
+            this.columnNames = this.columns.map(function (column) { return column.label; });
+            this.isRowClickable = this.rowActions.length > 0;
+            if (this.isRowClickable) {
+                this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+                this.defaultAction = this.rowActions[0];
+            }
+        };
+        DataTableComponent.prototype.ngAfterViewInit = function () {
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+        };
+        DataTableComponent.prototype.onFilter = function (value) {
+            this.setFilterValue(value);
+        };
+        DataTableComponent.prototype.onRowEvent = function (event, row, action) {
+            if (action === void 0) { action = this.defaultAction; }
+            if (!!action && !this.isClickOnRowMenuIcon(event)) {
+                this.rowAction.emit(Object.assign(Object.assign({}, action), { outputRow: row }));
+            }
+        };
+        DataTableComponent.prototype.onSortingEvent = function (sortingParams) {
+            this.sortEvent.emit(sortingParams);
+        };
+        DataTableComponent.prototype.onTableAction = function (tableAction) {
+            if (!!tableAction) {
+                this.tableAction.emit(tableAction);
+            }
+        };
+        DataTableComponent.prototype.setFilterValue = function (value) {
+            this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+        };
+        DataTableComponent.prototype.isClickOnRowMenuIcon = function (event) {
+            var _a;
+            return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('mat-icon');
+        };
+        return DataTableComponent;
+    }());
+    DataTableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-data-table',
+                    template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput autocomplete=\"off\" (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
+                    styles: [".text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
+                },] }
+    ];
+    DataTableComponent.propDecorators = {
+        columns: [{ type: i0.Input }],
+        filterLabel: [{ type: i0.Input }],
+        filterPlaceholder: [{ type: i0.Input }],
+        noDataText: [{ type: i0.Input }],
+        pageSizeOptions: [{ type: i0.Input }],
+        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 },] }]
+    };
+
+    var DataTableModule = /** @class */ (function () {
+        function DataTableModule() {
+        }
+        return DataTableModule;
+    }());
+    DataTableModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [DataTableComponent],
+                    imports: [
+                        common.CommonModule,
+                        button.MatButtonModule,
+                        icon.MatIconModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        menu.MatMenuModule,
+                        paginator.MatPaginatorModule,
+                        sort.MatSortModule,
+                        table.MatTableModule,
+                        ButtonModule,
+                    ],
+                    exports: [DataTableComponent],
+                },] }
+    ];
+
+    var StepHeaderComponent = /** @class */ (function (_super) {
+        __extends(StepHeaderComponent, _super);
+        function StepHeaderComponent(_focusMonitor, _elementRef) {
+            var _this = _super.call(this, _elementRef) || this;
+            _this._focusMonitor = _focusMonitor;
+            return _this;
+        }
+        StepHeaderComponent.prototype.ngAfterViewInit = function () {
+            this._focusMonitor.monitor(this._elementRef, true);
+        };
+        StepHeaderComponent.prototype.ngOnDestroy = function () {
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        };
+        /** Focuses the step header. */
+        StepHeaderComponent.prototype.focus = function (origin, options) {
+            if (origin) {
+                this._focusMonitor.focusVia(this._elementRef, origin, options);
+            }
+            else {
+                this._elementRef.nativeElement.focus(options);
+            }
+        };
+        StepHeaderComponent.prototype.getCssForState = function () {
+            if (this.state === stepper.STEP_STATE.NUMBER && !this.completed && !this.hasError) {
+                return 'step-state-neutral'; //initiale state is 'number'
+            }
+            else if (this.completed) {
+                return 'step-state-complete';
+            }
+            else if (this.hasError) {
+                return 'step-state-error';
+            }
+        };
+        StepHeaderComponent.prototype.getIcon = function () {
+            if (this.completed) {
+                return 'check_circle_outline';
+            }
+            else if (this.hasError) {
+                return 'error_outline';
+            }
+            return '';
+        };
+        return StepHeaderComponent;
+    }(stepper.CdkStepHeader));
+    StepHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-step-header',
+                    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',
+                    },
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".header{-webkit-tap-highlight-color:transparent;border:1px solid #d3d3d3;box-sizing:content-box;cursor:pointer;height:62px;outline:var(--warn-color);overflow:hidden;width:100%}.header-label{align-items:center;display:flex}.step-state-complete{background:green;width:5px}.step-state-error{background:var(--warn-color);width:5px}.step-state-neutral{background:#d3d3d3;width:5px}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}"]
+                },] }
+    ];
+    StepHeaderComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: i0.ElementRef }
+    ]; };
+    StepHeaderComponent.propDecorators = {
+        index: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        state: [{ type: i0.Input }],
+        errorMessage: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        optional: [{ type: i0.Input }],
+        hasError: [{ type: i0.Input }],
+        completed: [{ type: i0.Input }],
+        closed: [{ type: i0.Input }]
+    };
+
+    /**
+     * Animations used by the MAD stepper.
+     */
+    var madStepperAnimations = {
+        verticalStepTransition: animations.trigger('stepTransition', [
+            animations.state('previous', animations.style({ height: '0px', visibility: 'hidden' })),
+            animations.state('next', animations.style({ height: '0px', visibility: 'hidden' })),
+            animations.state('current', animations.style({ height: '*', visibility: 'visible' })),
+            animations.transition('* <=> current', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    };
+
+    var StepComponent = /** @class */ (function (_super) {
+        __extends(StepComponent, _super);
+        function StepComponent(stepper, _viewContainerRef) {
+            var _this = _super.call(this, stepper) || this;
+            _this.stepper = stepper;
+            _this._viewContainerRef = _viewContainerRef;
+            /** Action event for the next button. If not set the StepComponent will handle the step navigation */
+            _this.onNext = new i0.EventEmitter();
+            /** Action event for the done button. If not set the StepComponent will handle the step navigation  */
+            _this.onDone = new i0.EventEmitter();
+            /*** Action event when the header is clicked. If not set the StepComponent will handle the step navigation*/
+            _this.onHeaderClick = new i0.EventEmitter();
+            _this.stepClosed = false;
+            _this._isSelected = rxjs.Subscription.EMPTY;
+            return _this;
+        }
+        StepComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this._isSelected = this._stepper.steps.changes
+                .pipe(operators.switchMap(function () { return _this._stepper.selectionChange.pipe(operators.map(function (event) { return event.selectedStep === _this; }), operators.tap(function () { return (_this.stepClosed = false); }), operators.startWith(_this._stepper.selected === _this)); }))
+                .subscribe();
+        };
+        StepComponent.prototype.ngOnDestroy = function () {
+            this._isSelected.unsubscribe();
+        };
+        StepComponent.prototype.next = function () {
+            this.stepValidation();
+            if (this.onNext.observers.length <= 0) {
+                this.stepper.next();
+            }
+            this.onNext.emit();
+        };
+        StepComponent.prototype.selectAndMarkAsTouched = function (index) {
+            var _a, _b;
+            //Mark current selected step as touched before selecting to display errors in the from
+            (_b = (_a = this._stepper.selected) === null || _a === void 0 ? void 0 : _a.stepControl) === null || _b === void 0 ? void 0 : _b.markAllAsTouched();
+            this.stepClosed = false;
+            if (this.onHeaderClick.observers.length <= 0) {
+                this.select();
+            }
+            this.onHeaderClick.emit(index);
+        };
+        StepComponent.prototype.completeLast = function () {
+            this.stepValidation();
+            this.stepClosed = true;
+            if (this.onDone.observers.length <= 0) {
+                this.stepper.next();
+            }
+            this.onDone.emit();
+        };
+        StepComponent.prototype.resetValidations = function () {
+            this.hasError = false;
+            this.completed = true;
+            this.state = stepper.STEP_STATE.DONE;
+        };
+        StepComponent.prototype.stepValidation = function () {
+            var _a, _b;
+            (_a = this.stepControl) === null || _a === void 0 ? void 0 : _a.markAllAsTouched();
+            if ((_b = this.stepControl) === null || _b === void 0 ? void 0 : _b.valid) {
+                this.hasError = false;
+                this.completed = true;
+                this.state = stepper.STEP_STATE.DONE;
+            }
+            else {
+                this.completed = false;
+                this.hasError = true;
+                this.state = stepper.STEP_STATE.ERROR;
+            }
+        };
+        return StepComponent;
+    }(stepper.CdkStep));
+    StepComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-step',
+                    template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n    <div class=\"step-container\" fxLayout=\"column\">\n        <div class=\"step-content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"step-buttons\">\n        <div *ngIf=\"!last\">\n            <button mat-stroked-button color=\"primary\" (click)=\"next()\">{{nextBtnLbl}}</button>\n        </div>\n        <div *ngIf=\"last\">\n            <button mat-stroked-button color=\"primary\" (click)=\"completeLast()\">{{doneBtnLbl}}</button>\n        </div>\n        </div>\n    </div>\n</ng-template>\n",
+                    providers: [{ provide: stepper.CdkStep, useExisting: StepComponent }],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{align-items:center;border:none!important;display:flex;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{outline:0;overflow:hidden}.vertical-content{padding:0 24px}.step-container{border-bottom:1px solid #d3d3d3;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3}.step-buttons,.step-content{padding:2em}"]
+                },] }
+    ];
+    StepComponent.ctorParameters = function () { return [
+        { type: StepperComponent, decorators: [{ type: i0.Inject, args: [i0.forwardRef(function () { return StepperComponent; }),] }] },
+        { type: i0.ViewContainerRef }
+    ]; };
+    StepComponent.propDecorators = {
+        onNext: [{ type: i0.Output }],
+        onDone: [{ type: i0.Output }],
+        onHeaderClick: [{ type: i0.Output }]
+    };
+    var StepperComponent = /** @class */ (function (_super) {
+        __extends(StepperComponent, _super);
+        function StepperComponent(dir, changeDetectorRef, elementRef, _document) {
+            var _this = _super.call(this, dir, changeDetectorRef, elementRef, _document) || this;
+            /** Event emitted when the current step is done transitioning in. */
+            _this.animationDone = new i0.EventEmitter();
+            /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+            _this.steps = new i0.QueryList();
+            _this._animationDone = new rxjs.Subject();
+            _this._orientation = 'vertical';
+            return _this;
+        }
+        StepperComponent.prototype.ngOnInit = function () {
+            // Only linear stepper implementation is supported
+            _super.prototype.linear = true;
+        };
+        StepperComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            _super.prototype.ngAfterContentInit.call(this);
+            this.steps.changes.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
+                _this._stateChanged();
+            });
+            this._animationDone
+                .pipe(operators.distinctUntilChanged(function (x, y) { return x.fromState === y.fromState && x.toState === y.toState; }), operators.takeUntil(this._destroyed))
+                .subscribe(function (event) {
+                if (event.toState === 'current') {
+                    _this.animationDone.emit();
+                }
+            });
+        };
+        /**
+         * Method patched to enable the closing of the last step.
+         */
+        StepperComponent.prototype._getAnimationDirection = function (index) {
+            var _a, _b;
+            var closeLastStep = this.selectedIndex === this.steps.length - 1 && ((_a = this._steps.last) === null || _a === void 0 ? void 0 : _a.completed) && ((_b = this._steps.last) === null || _b === void 0 ? void 0 : _b.stepClosed);
+            if (closeLastStep) {
+                return 'next';
+            }
+            return _super.prototype._getAnimationDirection.call(this, index);
+        };
+        StepperComponent.prototype._stepIsNavigable = function (index, step) {
+            return step.completed || this.selectedIndex === index || !this.linear;
+        };
+        return StepperComponent;
+    }(stepper.CdkStepper));
+    StepperComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-stepper',
+                    template: "<!-- Vertical stepper -->\n<ng-container>\n    <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n        <ng-container\n                [ngTemplateOutlet]=\"stepTemplate\"\n                [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n        <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n            <div class=\"vertical-stepper-content\" role=\"tabpanel\"\n                 [@stepTransition]=\"_getAnimationDirection(i)\"\n                 (@stepTransition.done)=\"_animationDone.next($event)\"\n                 [id]=\"_getStepContentId(i)\"\n                 [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                 [attr.aria-expanded]=\"selectedIndex === i\">\n                <div class=\"vertical-content\">\n                    <ng-container [ngTemplateOutlet]=\"step.content\"\n                                  [ngTemplateOutletContext]=\"{step: step, i: i, last: isLast, first: isFirst, nextBtnLbl: this.nextButtonLabel, doneBtnLbl: this.doneButtonLabel}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n    <mad-step-header\n            class=\"mat-vertical-stepper-header\"\n            (click)=\"step.selectAndMarkAsTouched(i)\"\n            (keydown)=\"_onKeydown($event)\"\n            [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n            [id]=\"_getStepLabelId(i)\"\n            [attr.aria-posinset]=\"i + 1\"\n            [attr.aria-setsize]=\"steps.length\"\n            [attr.aria-controls]=\"_getStepContentId(i)\"\n            [attr.aria-selected]=\"selectedIndex == i\"\n            [attr.aria-label]=\"step.ariaLabel || null\"\n            [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n            [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n            [index]=\"i\"\n            [completed]=\"step.completed\"\n            [hasError]=\"step.hasError\"\n            [state]=\"_getIndicatorType(i, step.state)\"\n            [label]=\"step.stepLabel || step.label\"\n            [selected]=\"selectedIndex === i\"\n            [active]=\"_stepIsNavigable(i, step)\"\n            [optional]=\"step.optional\"\n            [closed]=\"step.stepClosed\"\n            [errorMessage]=\"step.errorMessage\"></mad-step-header>\n</ng-template>\n",
+                    host: {
+                        '[class.stepper-vertical]': 'true',
+                        '[attr.aria-orientation]': '"vertical"',
+                        'role': 'tablist',
+                    },
+                    animations: [madStepperAnimations.verticalStepTransition],
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    providers: [{ provide: stepper.CdkStepper, useExisting: StepperComponent }],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{align-items:center;border:none!important;display:flex;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{outline:0;overflow:hidden}.vertical-content{padding:0 24px}.step-container{border-bottom:1px solid #d3d3d3;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3}.step-buttons,.step-content{padding:2em}"]
+                },] }
+    ];
+    StepperComponent.ctorParameters = function () { return [
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+    StepperComponent.propDecorators = {
+        animationDone: [{ type: i0.Output }],
+        nextButtonLabel: [{ type: i0.Input }],
+        doneButtonLabel: [{ type: i0.Input }],
+        _stepHeader: [{ type: i0.ViewChildren, args: [StepHeaderComponent,] }],
+        _steps: [{ type: i0.ContentChildren, args: [StepComponent, { descendants: true },] }]
+    };
+
+    var StepperModule = /** @class */ (function () {
+        function StepperModule() {
+        }
+        return StepperModule;
+    }());
+    StepperModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [StepperComponent, StepHeaderComponent, StepComponent],
+                    imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, stepper.CdkStepperModule, flexLayout.FlexModule],
+                    exports: [StepperComponent, StepHeaderComponent, StepComponent],
+                },] }
+    ];
+
+    var ContentHeaderComponent = /** @class */ (function () {
+        function ContentHeaderComponent() {
+        }
+        ContentHeaderComponent.prototype.ngOnInit = function () {
+        };
+        return ContentHeaderComponent;
+    }());
+    ContentHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-content-header',
+                    template: "<div class=\"content-header\">\n    <ng-content></ng-content>\n</div>\n",
+                    styles: [".content-header{padding-right:.5rem}"]
+                },] }
+    ];
+    ContentHeaderComponent.ctorParameters = function () { return []; };
+
+    var ContentPanelContainerComponent = /** @class */ (function () {
+        function ContentPanelContainerComponent() {
+        }
+        ContentPanelContainerComponent.prototype.ngOnInit = function () {
+        };
+        return ContentPanelContainerComponent;
+    }());
+    ContentPanelContainerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-content-panel-container',
+                    template: "<div class=\"content-panel-outer-wrapper\">\n    <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n    <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n</div>\n",
+                    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 = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-content-panel-container-content',
+                    template: "<ng-content></ng-content>",
+                    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 = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-content-panel-container-footer',
+                    template: "<ng-content></ng-content>",
+                    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 = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-main-container',
+                    template: "<div class=\"main-container\">\n    <ng-content select=\"mad-content-header\"></ng-content>\n    <ng-content select=\"mad-flowbar\"></ng-content>\n    <ng-content select=\"mad-content-panel-container\"></ng-content>\n</div>\n",
+                    styles: [".main-container{display:flex;flex-direction:column;height:100%}"]
+                },] }
+    ];
+    MainContainerComponent.ctorParameters = function () { return []; };
+
+    var ContentPanelModule = /** @class */ (function () {
+        function ContentPanelModule() {
+        }
+        return ContentPanelModule;
+    }());
+    ContentPanelModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        ContentHeaderComponent,
+                        ContentPanelContainerComponent,
+                        ContentPanelContainerContentComponent,
+                        ContentPanelContainerFooterComponent,
+                        MainContainerComponent,
+                    ],
+                    imports: [common.CommonModule],
+                    exports: [
+                        ContentHeaderComponent,
+                        ContentPanelContainerComponent,
+                        ContentPanelContainerContentComponent,
+                        ContentPanelContainerFooterComponent,
+                        MainContainerComponent,
+                    ],
+                },] }
+    ];
+
+    var FlowbarComponent = /** @class */ (function () {
+        function FlowbarComponent() {
+            this._steps = [];
+            this._activeStepChange = new i0.EventEmitter(true);
+            /**
+             * Event emitted when a step header is clicked.
+             * When defined header navigation has to be implemented programmatically.
+             * e.g. {@see changeActiveStepOnHeader}
+             */
+            this._headerClick = new i0.EventEmitter(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;
+                });
+                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._activeStepChange.emit(this._activeStep);
+                }
+            }
+        };
+        FlowbarComponent.prototype.ngAfterViewInit = function () {
+            this.stepper._getIndicatorType = function () { return 'number'; };
+        };
+        FlowbarComponent.prototype.changeActiveStep = function (step) {
+            var previousIndex = this._steps.indexOf(this._activeStep);
+            this._activeStep = step;
+            if (this.activeTabHasSubSteps()) {
+                if (previousIndex < this._steps.indexOf(this._activeStep)) {
+                    this._activeStep.activeSubStep = this._activeStep.subSteps[0];
+                }
+                else {
+                    this._activeStep.activeSubStep = this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
+                }
+            }
+            this._activeStepChange.emit(this._activeStep);
+        };
+        FlowbarComponent.prototype.changeActiveStepOnHeader = function (step) {
+            var stepIndex = this._steps.indexOf(step);
+            this._activeStep = step;
+            this.stepper.selected = this.stepper._steps.find(function (_, i) { return i === stepIndex; });
+        };
+        FlowbarComponent.prototype.changeActiveSubStep = function (subStep) {
+            this._activeStep.activeSubStep = subStep;
+        };
+        FlowbarComponent.prototype.previous = function () {
+            if (this.isPreviousAvailable()) {
+                // If active step has no sub steps or first sub step is selected -> go to previous main step
+                if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
+                    var previousEnabledStep = this.findPreviousEnabledStep();
+                    this.changeActiveStep(previousEnabledStep);
+                    this.stepper.selectedIndex = this._steps.indexOf(previousEnabledStep);
+                }
+                else {
+                    var subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                    this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex - 1];
+                }
+            }
+        };
+        FlowbarComponent.prototype.next = function () {
+            if (this.isNextAvailable()) {
+                // If active step has no sub steps or last sub step is selected -> go to next main step
+                if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
+                    var nextEnabledStep = this.findNextEnabledStep();
+                    this.changeActiveStep(nextEnabledStep);
+                    this.stepper.selectedIndex = this._steps.indexOf(nextEnabledStep);
+                }
+                else {
+                    var subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                    this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex + 1];
+                }
+            }
+        };
+        FlowbarComponent.prototype.isPreviousAvailable = function () {
+            if (this._activeStep) {
+                if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
+                    var index = this.getCurrentIndex();
+                    return index > 0 && this.isAnyPreviousStepEnabled(index);
+                }
+                else {
+                    return true;
+                }
+            }
+            return false;
+        };
+        FlowbarComponent.prototype.isNextAvailable = function () {
+            if (this._activeStep) {
+                if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
+                    var index = this.getCurrentIndex();
+                    return index < this._steps.length - 1 && this.isAnyFollowingStepEnabled(index);
+                }
+                else {
+                    return true;
+                }
+            }
+            return false;
+        };
+        FlowbarComponent.prototype.isLastStep = function () {
+            if (this.getCurrentIndex() === this._steps.length - 1) {
+                if (this.activeTabHasSubSteps()) {
+                    return this.isLastSubStep();
+                }
+                else {
+                    return true;
+                }
+            }
+            return false;
+        };
+        FlowbarComponent.prototype.getCurrentIndex = function () {
+            var _this = this;
+            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;
+            });
+        };
+        FlowbarComponent.prototype.triggerClick = function () {
+            var selectedStep = this._steps[this.stepper.selectedIndex];
+            this.changeActiveStep(selectedStep);
+        };
+        FlowbarComponent.prototype.headerClick = function (event, step) {
+            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;
+        };
+        FlowbarComponent.prototype.isFirstSubStep = function () {
+            return this._activeStep.activeSubStep === this._activeStep.subSteps[0];
+        };
+        FlowbarComponent.prototype.isLastSubStep = function () {
+            return this._activeStep.activeSubStep === this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
+        };
+        FlowbarComponent.prototype.isAnyPreviousStepEnabled = function (index) {
+            // eslint-disable-next-line id-blacklist
+            return this._steps.slice(0, index).find(function (step) { return step.enabled; }) !== undefined;
+        };
+        FlowbarComponent.prototype.isAnyFollowingStepEnabled = function (index) {
+            // eslint-disable-next-line id-blacklist
+            return this._steps.slice(index + 1, this._steps.length).find(function (step) { return step.enabled; }) !== undefined;
+        };
+        FlowbarComponent.prototype.findPreviousEnabledStep = function () {
+            var index = this.getCurrentIndex();
+            return this._steps
+                .slice(0, index)
+                .reverse()
+                .find(function (step) { return step.enabled; });
+        };
+        FlowbarComponent.prototype.findNextEnabledStep = function () {
+            var index = this.getCurrentIndex();
+            return this._steps.slice(index + 1, this._steps.length).find(function (step) { return step.enabled; });
+        };
+        return FlowbarComponent;
+    }());
+    FlowbarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-flowbar',
+                    template: "<div class=\"stepper-container\">\n    <mat-horizontal-stepper #stepper (click)=\"triggerClick()\">\n        <mat-step *ngFor=\"let step of _steps\" [aria-labelledby]=\"!step.enabled ? 'disabled' : null\">\n            <ng-template matStepLabel>\n                <div class=\"step-header-overlay\" *ngIf=\"this._headerClick.observers.length > 0\"  (click)=\"headerClick($event, step)\"></div>\n                <span>{{step.label}}</span>\n            </ng-template>\n        </mat-step>\n    </mat-horizontal-stepper>\n</div>\n",
+                    styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{height:auto;padding:0}::ng-deep .mat-step-header[aria-labelledby=disabled]{cursor:not-allowed;pointer-events:none!important}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-width:4px;margin:0 5px}.step-header-overlay{height:100%;position:absolute;width:100%}"]
+                },] }
+    ];
+    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',] }]
+    };
+
+    var FlowbarModule = /** @class */ (function () {
+        function FlowbarModule() {
+        }
+        return FlowbarModule;
+    }());
+    FlowbarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [FlowbarComponent],
+                    imports: [common.CommonModule, stepper$1.MatStepperModule],
+                    exports: [FlowbarComponent],
+                },] }
+    ];
+
     var MaterialAddonsModule = /** @class */ (function () {
         function MaterialAddonsModule() {
         }
@@ -1850,8 +2637,8 @@
                         NumericFieldModule,
                         CardModule,
                         QuickListModule,
-                        ThrottleClickModule
-                    ]
+                        ThrottleClickModule,
+                    ],
                 },] }
     ];
 
@@ -1865,6 +2652,15 @@
 
     exports.ButtonModule = ButtonModule;
     exports.CardModule = CardModule;
+    exports.ContentHeaderComponent = ContentHeaderComponent;
+    exports.ContentPanelContainerComponent = ContentPanelContainerComponent;
+    exports.ContentPanelContainerContentComponent = ContentPanelContainerContentComponent;
+    exports.ContentPanelContainerFooterComponent = ContentPanelContainerFooterComponent;
+    exports.ContentPanelModule = ContentPanelModule;
+    exports.DataTableModule = DataTableModule;
+    exports.FlowbarComponent = FlowbarComponent;
+    exports.FlowbarModule = FlowbarModule;
+    exports.MainContainerComponent = MainContainerComponent;
     exports.MaterialActionButtonComponent = MaterialActionButtonComponent;
     exports.MaterialActionButtonModule = MaterialActionButtonModule;
     exports.MaterialAddonsModule = MaterialAddonsModule;
@@ -1874,12 +2670,17 @@
     exports.ReadOnlyFormFieldComponent = ReadOnlyFormFieldComponent;
     exports.ReadOnlyFormFieldModule = ReadOnlyFormFieldModule;
     exports.ReadOnlyFormFieldWrapperComponent = ReadOnlyFormFieldWrapperComponent;
+    exports.StepComponent = StepComponent;
+    exports.StepHeaderComponent = StepHeaderComponent;
+    exports.StepperComponent = StepperComponent;
+    exports.StepperModule = StepperModule;
     exports.TableModule = TableModule;
     exports.ThrottleClickDirective = ThrottleClickDirective;
     exports.ThrottleClickModule = ThrottleClickModule;
     exports.ToolbarComponent = ToolbarComponent;
     exports.ToolbarModule = ToolbarModule;
     exports.ToolbarService = ToolbarService;
+    exports.madStepperAnimations = madStepperAnimations;
     exports.ɵa = PrimaryButtonComponent;
     exports.ɵb = MadBasicButton;
     exports.ɵc = OutlineButtonComponent;
@@ -1889,7 +2690,10 @@
     exports.ɵg = NumericFieldDirective;
     exports.ɵh = CardComponent;
     exports.ɵi = QuickListComponent;
-    exports.ɵj = TableComponent;
+    exports.ɵj = BaseQuickListComponent;
+    exports.ɵk = QuickListCompactComponent;
+    exports.ɵl = TableComponent;
+    exports.ɵm = DataTableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });