@porscheinformatik/material-addons 10.2.1 → 10.2.4

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout')) :
-    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'], 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));
-}(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) { '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() {
@@ -1899,12 +1899,149 @@
                         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) {
@@ -1952,7 +2089,7 @@
     StepHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-step-header',
-                    template: "<div class=\"header\" fxLayout=\"row\" fxLayoutGap=\"1em\"\n     [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n     [style.border-color]=\"this.hasError ? '#f44336' : '#d3d3d3'\">\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",
+                    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',
@@ -1960,7 +2097,7 @@
                     },
                     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:#f44336;overflow:hidden;width:100%}.header-label{align-items:center;display:flex}.step-state-complete{background:green;width:5px}.step-state-error{background:#f44336;width:5px}.step-state-neutral{background:#d3d3d3;width:5px}.green-check{color:green}.red-error{color:#f44336}"]
+                    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 [
@@ -2017,8 +2154,9 @@
         StepComponent.prototype.ngOnDestroy = function () {
             this._isSelected.unsubscribe();
         };
-        StepComponent.prototype.next = function () {
-            this.stepValidation();
+        StepComponent.prototype.next = function (markFormAsTouched) {
+            if (markFormAsTouched === void 0) { markFormAsTouched = true; }
+            this.stepValidation(markFormAsTouched);
             if (this.onNext.observers.length <= 0) {
                 this.stepper.next();
             }
@@ -2035,7 +2173,7 @@
             this.onHeaderClick.emit(index);
         };
         StepComponent.prototype.completeLast = function () {
-            this.stepValidation();
+            this.stepValidation(true);
             this.stepClosed = true;
             if (this.onDone.observers.length <= 0) {
                 this.stepper.next();
@@ -2047,9 +2185,11 @@
             this.completed = true;
             this.state = stepper.STEP_STATE.DONE;
         };
-        StepComponent.prototype.stepValidation = function () {
+        StepComponent.prototype.stepValidation = function (markFormAsTouched) {
             var _a, _b;
-            (_a = this.stepControl) === null || _a === void 0 ? void 0 : _a.markAllAsTouched();
+            if (markFormAsTouched) {
+                (_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;
@@ -2172,6 +2312,323 @@
                 },] }
     ];
 
+    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.getIndexForActiveStep = function () {
+            var selectedIndex = this._steps.indexOf(this._activeStep);
+            return selectedIndex === -1 ? 0 : selectedIndex;
+        };
+        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 [selectedIndex]=\"this.getIndexForActiveStep()\" (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;right:0;top:0;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() {
         }
@@ -2202,6 +2659,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;
@@ -2234,6 +2700,7 @@
     exports.ɵj = BaseQuickListComponent;
     exports.ɵk = QuickListCompactComponent;
     exports.ɵl = TableComponent;
+    exports.ɵm = DataTableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });