@porscheinformatik/material-addons 10.1.9 → 10.2.3

package/fesm2015/porscheinformatik-material-addons.js

@@ -1,5 +1,5 @@
-import { Component, Input, NgModule, HostBinding, ViewChild, ElementRef, ChangeDetectorRef, ɵɵdefineInjectable, ɵɵinject, LOCALE_ID, Injectable, Inject, Renderer2, EventEmitter, Directive, forwardRef, Output, HostListener, ContentChild, TemplateRef, ViewChildren } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, NgModule, HostBinding, ViewChild, ElementRef, ChangeDetectorRef, ɵɵdefineInjectable, ɵɵinject, LOCALE_ID, Injectable, Inject, Renderer2, EventEmitter, Directive, forwardRef, Output, HostListener, ContentChild, TemplateRef, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, ViewContainerRef, QueryList, Optional, ContentChildren } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { RouterModule, NavigationEnd, Router } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -9,9 +9,9 @@ import { MatInputModule } from '@angular/material/input';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
-import { of, Subject } from 'rxjs';
+import { of, Subject, Subscription } from 'rxjs';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
-import { map, throttleTime } from 'rxjs/operators';
+import { map, throttleTime, switchMap, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -20,6 +20,11 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { Directionality } from '@angular/cdk/bidi';
+import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { FlexModule } from '@angular/flex-layout';
+import { MatStepperModule } from '@angular/material/stepper';
 
 class MaterialActionButtonComponent {
     constructor() {
@@ -857,7 +862,9 @@ class NumericFieldDirective {
     set numericValue(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();
         }
     }
@@ -1121,9 +1128,11 @@ class CardComponent {
         this.saveDisabled = false;
         this.saveText = 'NOT SET';
         this.editMode = false;
+        this.additionalActionText = '';
         this.edit = new EventEmitter();
         this.cancel = new EventEmitter();
         this.save = new EventEmitter();
+        this.additionalAction = new EventEmitter();
     }
     onCancel() {
         this.cancel.emit(undefined);
@@ -1138,15 +1147,24 @@ class CardComponent {
     toggleCollapse() {
         this.expanded = !this.expanded;
     }
+    additionalActionClicked() {
+        this.additionalAction.emit(undefined);
+    }
 }
 CardComponent.decorators = [
     { type: 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: [
                     trigger('collapseExpandAnimation', [
-                        transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({ opacity: 1, height: '*' }))]),
-                        transition(':leave', [style({ opacity: 1, height: '*', overflow: 'hidden' }), animate('100ms', style({ opacity: 0, height: 0 }))]),
+                        transition(':enter', [style({ opacity: 0, height: 0, overflow: 'hidden' }), animate('100ms', style({
+                                opacity: 1,
+                                height: '*'
+                            }))]),
+                        transition(':leave', [style({ opacity: 1, height: '*', overflow: 'hidden' }), animate('100ms', style({
+                                opacity: 0,
+                                height: 0
+                            }))]),
                     ]),
                     trigger('rotateIcon', [
                         state('true', style({ transform: 'rotate(0)' })),
@@ -1169,9 +1187,12 @@ CardComponent.propDecorators = {
     saveText: [{ type: Input }],
     title: [{ type: Input }],
     editMode: [{ type: Input }],
+    additionalActionIcon: [{ type: Input }],
+    additionalActionText: [{ type: Input }],
     edit: [{ type: Output }],
     cancel: [{ type: Output }],
-    save: [{ type: Output }]
+    save: [{ type: Output }],
+    additionalAction: [{ type: Output }]
 };
 
 class ThrottleClickDirective {
@@ -1224,8 +1245,7 @@ CardModule.decorators = [
             },] }
 ];
 
-// Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
-class QuickListComponent {
+class BaseQuickListComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
         this.allItems = [];
@@ -1237,7 +1257,7 @@ class QuickListComponent {
     }
     ngOnInit() {
         this.addEventFunction = this.addItem.bind(this);
-        if (typeof this.minItems !== 'undefined') {
+        if (this.minItems) {
             for (let n = this.allItems.length; n < this.minItems; n++) {
                 this.interalAddItem();
             }
@@ -1271,10 +1291,10 @@ class QuickListComponent {
         });
     }
     isAddAllowed() {
-        return typeof this.maxItems === 'undefined' || this.allItems.length < this.maxItems;
+        return this.addPossible && (!this.maxItems || this.allItems.length < this.maxItems);
     }
     isDeleteAllowed() {
-        return typeof this.minItems === 'undefined' || this.allItems.length > this.minItems;
+        return !this.minItems || this.allItems.length > this.minItems;
     }
     interalAddItem() {
         if (this.isAddAllowed()) {
@@ -1290,16 +1310,16 @@ class QuickListComponent {
         return null;
     }
 }
-QuickListComponent.decorators = [
+BaseQuickListComponent.decorators = [
     { type: 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 = () => [
+BaseQuickListComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
-QuickListComponent.propDecorators = {
+BaseQuickListComponent.propDecorators = {
     allItems: [{ type: Input }],
     addLabel: [{ type: Input }],
     addPossible: [{ type: Input }],
@@ -1313,13 +1333,46 @@ QuickListComponent.propDecorators = {
     itemRows: [{ type: ViewChildren, args: ['row',] }]
 };
 
+// Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
+class QuickListComponent extends BaseQuickListComponent {
+    constructor(changeDetectorRef) {
+        super(changeDetectorRef);
+        this.changeDetectorRef = changeDetectorRef;
+    }
+}
+QuickListComponent.decorators = [
+    { type: 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 = () => [
+    { type: ChangeDetectorRef }
+];
+
+class QuickListCompactComponent extends BaseQuickListComponent {
+    constructor(changeDetectorRef) {
+        super(changeDetectorRef);
+        this.changeDetectorRef = changeDetectorRef;
+    }
+}
+QuickListCompactComponent.decorators = [
+    { type: 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 = () => [
+    { type: ChangeDetectorRef }
+];
+
 class QuickListModule {
 }
 QuickListModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [QuickListComponent],
+                declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
                 imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule],
-                exports: [QuickListComponent],
+                exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
             },] }
 ];
 
@@ -1440,12 +1493,671 @@ TableModule.decorators = [
                     MatPaginatorModule,
                     MatSortModule,
                     MatTableModule,
-                    ButtonModule
+                    ButtonModule,
                 ],
                 exports: [TableComponent],
             },] }
 ];
 
+class DataTableComponent {
+    constructor() {
+        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 EventEmitter();
+        this.rowAction = new EventEmitter();
+        this.sortEvent = new EventEmitter();
+        this.isFilterEnabled = false;
+        this.isPaginationEnabled = false;
+    }
+    set displayedData(data) {
+        if (!this.dataSource) {
+            this.dataSource = new MatTableDataSource(data);
+        }
+        else {
+            this.dataSource.data = data;
+        }
+    }
+    set paginationEnabled(isPaginationEnabled) {
+        this.isPaginationEnabled = isPaginationEnabled;
+        // eslint-disable-next-line
+        const pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator._changePageSize(pageSize);
+        }
+    }
+    set filterEnabled(isFilterEnabled) {
+        this.isFilterEnabled = isFilterEnabled;
+        this.setFilterValue(undefined);
+    }
+    ngOnInit() {
+        this.columnNames = this.columns.map(column => column.label);
+        this.isRowClickable = this.rowActions.length > 0;
+        if (this.isRowClickable) {
+            this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+            this.defaultAction = this.rowActions[0];
+        }
+    }
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+    }
+    onFilter(value) {
+        this.setFilterValue(value);
+    }
+    onRowEvent(event, row, action = this.defaultAction) {
+        if (!!action && !this.isClickOnRowMenuIcon(event)) {
+            this.rowAction.emit(Object.assign(Object.assign({}, action), { outputRow: row }));
+        }
+    }
+    onSortingEvent(sortingParams) {
+        this.sortEvent.emit(sortingParams);
+    }
+    onTableAction(tableAction) {
+        if (!!tableAction) {
+            this.tableAction.emit(tableAction);
+        }
+    }
+    setFilterValue(value) {
+        this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+    }
+    isClickOnRowMenuIcon(event) {
+        var _a;
+        return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('mat-icon');
+    }
+}
+DataTableComponent.decorators = [
+    { type: 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: Input }],
+    filterLabel: [{ type: Input }],
+    filterPlaceholder: [{ type: Input }],
+    noDataText: [{ type: Input }],
+    pageSizeOptions: [{ type: Input }],
+    defaultPageSize: [{ type: Input }],
+    rowActions: [{ type: Input }],
+    tableActions: [{ type: Input }],
+    displayedData: [{ type: Input }],
+    paginationEnabled: [{ type: Input }],
+    filterEnabled: [{ type: Input }],
+    tableAction: [{ type: Output }],
+    rowAction: [{ type: Output }],
+    sortEvent: [{ type: Output }],
+    paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
+    sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
+};
+
+class DataTableModule {
+}
+DataTableModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DataTableComponent],
+                imports: [
+                    CommonModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    MatMenuModule,
+                    MatPaginatorModule,
+                    MatSortModule,
+                    MatTableModule,
+                    ButtonModule,
+                ],
+                exports: [DataTableComponent],
+            },] }
+];
+
+class StepHeaderComponent extends CdkStepHeader {
+    constructor(_focusMonitor, _elementRef) {
+        super(_elementRef);
+        this._focusMonitor = _focusMonitor;
+    }
+    ngAfterViewInit() {
+        this._focusMonitor.monitor(this._elementRef, true);
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /** Focuses the step header. */
+    focus(origin, options) {
+        if (origin) {
+            this._focusMonitor.focusVia(this._elementRef, origin, options);
+        }
+        else {
+            this._elementRef.nativeElement.focus(options);
+        }
+    }
+    getCssForState() {
+        if (this.state === 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';
+        }
+    }
+    getIcon() {
+        if (this.completed) {
+            return 'check_circle_outline';
+        }
+        else if (this.hasError) {
+            return 'error_outline';
+        }
+        return '';
+    }
+}
+StepHeaderComponent.decorators = [
+    { type: 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: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
+    { type: FocusMonitor },
+    { type: ElementRef }
+];
+StepHeaderComponent.propDecorators = {
+    index: [{ type: Input }],
+    label: [{ type: Input }],
+    state: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    selected: [{ type: Input }],
+    active: [{ type: Input }],
+    optional: [{ type: Input }],
+    hasError: [{ type: Input }],
+    completed: [{ type: Input }],
+    closed: [{ type: Input }]
+};
+
+/**
+ * Animations used by the MAD stepper.
+ */
+const madStepperAnimations = {
+    verticalStepTransition: trigger('stepTransition', [
+        state('previous', style({ height: '0px', visibility: 'hidden' })),
+        state('next', style({ height: '0px', visibility: 'hidden' })),
+        state('current', style({ height: '*', visibility: 'visible' })),
+        transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+};
+
+class StepComponent extends CdkStep {
+    constructor(stepper, _viewContainerRef) {
+        super(stepper);
+        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 EventEmitter();
+        /** Action event for the done button. If not set the StepComponent will handle the step navigation  */
+        this.onDone = new EventEmitter();
+        /*** Action event when the header is clicked. If not set the StepComponent will handle the step navigation*/
+        this.onHeaderClick = new EventEmitter();
+        this.stepClosed = false;
+        this._isSelected = Subscription.EMPTY;
+    }
+    ngAfterContentInit() {
+        this._isSelected = this._stepper.steps.changes
+            .pipe(switchMap(() => this._stepper.selectionChange.pipe(map(event => event.selectedStep === this), tap(() => (this.stepClosed = false)), startWith(this._stepper.selected === this))))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this._isSelected.unsubscribe();
+    }
+    next() {
+        this.stepValidation();
+        if (this.onNext.observers.length <= 0) {
+            this.stepper.next();
+        }
+        this.onNext.emit();
+    }
+    selectAndMarkAsTouched(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);
+    }
+    completeLast() {
+        this.stepValidation();
+        this.stepClosed = true;
+        if (this.onDone.observers.length <= 0) {
+            this.stepper.next();
+        }
+        this.onDone.emit();
+    }
+    resetValidations() {
+        this.hasError = false;
+        this.completed = true;
+        this.state = STEP_STATE.DONE;
+    }
+    stepValidation() {
+        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 = STEP_STATE.DONE;
+        }
+        else {
+            this.completed = false;
+            this.hasError = true;
+            this.state = STEP_STATE.ERROR;
+        }
+    }
+}
+StepComponent.decorators = [
+    { type: 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: CdkStep, useExisting: StepComponent }],
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
+    { type: StepperComponent, decorators: [{ type: Inject, args: [forwardRef(() => StepperComponent),] }] },
+    { type: ViewContainerRef }
+];
+StepComponent.propDecorators = {
+    onNext: [{ type: Output }],
+    onDone: [{ type: Output }],
+    onHeaderClick: [{ type: Output }]
+};
+class StepperComponent extends CdkStepper {
+    constructor(dir, changeDetectorRef, elementRef, _document) {
+        super(dir, changeDetectorRef, elementRef, _document);
+        /** Event emitted when the current step is done transitioning in. */
+        this.animationDone = new EventEmitter();
+        /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+        this.steps = new QueryList();
+        this._animationDone = new Subject();
+        this._orientation = 'vertical';
+    }
+    ngOnInit() {
+        // Only linear stepper implementation is supported
+        super.linear = true;
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this._stateChanged();
+        });
+        this._animationDone
+            .pipe(distinctUntilChanged((x, y) => x.fromState === y.fromState && x.toState === y.toState), takeUntil(this._destroyed))
+            .subscribe(event => {
+            if (event.toState === 'current') {
+                this.animationDone.emit();
+            }
+        });
+    }
+    /**
+     * Method patched to enable the closing of the last step.
+     */
+    _getAnimationDirection(index) {
+        var _a, _b;
+        const 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._getAnimationDirection(index);
+    }
+    _stepIsNavigable(index, step) {
+        return step.completed || this.selectedIndex === index || !this.linear;
+    }
+}
+StepperComponent.decorators = [
+    { type: 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: CdkStepper, useExisting: StepperComponent }],
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
+    { type: Directionality, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+StepperComponent.propDecorators = {
+    animationDone: [{ type: Output }],
+    nextButtonLabel: [{ type: Input }],
+    doneButtonLabel: [{ type: Input }],
+    _stepHeader: [{ type: ViewChildren, args: [StepHeaderComponent,] }],
+    _steps: [{ type: ContentChildren, args: [StepComponent, { descendants: true },] }]
+};
+
+class StepperModule {
+}
+StepperModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [StepperComponent, StepHeaderComponent, StepComponent],
+                imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, FlexModule],
+                exports: [StepperComponent, StepHeaderComponent, StepComponent],
+            },] }
+];
+
+class ContentHeaderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ContentHeaderComponent.decorators = [
+    { type: 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 = () => [];
+
+class ContentPanelContainerComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ContentPanelContainerComponent.decorators = [
+    { type: 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 = () => [];
+
+class ContentPanelContainerContentComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ContentPanelContainerContentComponent.decorators = [
+    { type: 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 = () => [];
+
+class ContentPanelContainerFooterComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ContentPanelContainerFooterComponent.decorators = [
+    { type: 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 = () => [];
+
+class MainContainerComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+MainContainerComponent.decorators = [
+    { type: 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 = () => [];
+
+class ContentPanelModule {
+}
+ContentPanelModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ContentHeaderComponent,
+                    ContentPanelContainerComponent,
+                    ContentPanelContainerContentComponent,
+                    ContentPanelContainerFooterComponent,
+                    MainContainerComponent,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    ContentHeaderComponent,
+                    ContentPanelContainerComponent,
+                    ContentPanelContainerContentComponent,
+                    ContentPanelContainerFooterComponent,
+                    MainContainerComponent,
+                ],
+            },] }
+];
+
+class FlowbarComponent {
+    constructor() {
+        this._steps = [];
+        this._activeStepChange = new 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 EventEmitter(true);
+    }
+    ngOnInit() {
+        // If no active step is set as input or the active step is not enabled, select the first enabled step
+        if (!this._activeStep || !this._activeStep.enabled) {
+            this._activeStep = this._steps.find(step => {
+                return step.enabled;
+            });
+            if (this._activeStep) {
+                // If sub steps exist then set the first non disabled sub step per default
+                if (this.activeTabHasSubSteps()) {
+                    this._activeStep.activeSubStep = this._activeStep.subSteps.find(step => {
+                        return step.enabled;
+                    });
+                }
+                this._activeStepChange.emit(this._activeStep);
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.stepper._getIndicatorType = () => 'number';
+    }
+    changeActiveStep(step) {
+        const 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);
+    }
+    changeActiveStepOnHeader(step) {
+        const stepIndex = this._steps.indexOf(step);
+        this._activeStep = step;
+        this.stepper.selected = this.stepper._steps.find((_, i) => i === stepIndex);
+    }
+    changeActiveSubStep(subStep) {
+        this._activeStep.activeSubStep = subStep;
+    }
+    previous() {
+        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()) {
+                const previousEnabledStep = this.findPreviousEnabledStep();
+                this.changeActiveStep(previousEnabledStep);
+                this.stepper.selectedIndex = this._steps.indexOf(previousEnabledStep);
+            }
+            else {
+                const subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex - 1];
+            }
+        }
+    }
+    next() {
+        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()) {
+                const nextEnabledStep = this.findNextEnabledStep();
+                this.changeActiveStep(nextEnabledStep);
+                this.stepper.selectedIndex = this._steps.indexOf(nextEnabledStep);
+            }
+            else {
+                const subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex + 1];
+            }
+        }
+    }
+    isPreviousAvailable() {
+        if (this._activeStep) {
+            if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
+                const index = this.getCurrentIndex();
+                return index > 0 && this.isAnyPreviousStepEnabled(index);
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    isNextAvailable() {
+        if (this._activeStep) {
+            if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
+                const index = this.getCurrentIndex();
+                return index < this._steps.length - 1 && this.isAnyFollowingStepEnabled(index);
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    isLastStep() {
+        if (this.getCurrentIndex() === this._steps.length - 1) {
+            if (this.activeTabHasSubSteps()) {
+                return this.isLastSubStep();
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    getCurrentIndex() {
+        return this._steps.findIndex(value => {
+            return value === this._activeStep;
+        });
+    }
+    getCurrentSubStepIndex() {
+        return this._activeStep.subSteps.findIndex(value => {
+            return value === this._activeStep.activeSubStep;
+        });
+    }
+    triggerClick() {
+        const selectedStep = this._steps[this.stepper.selectedIndex];
+        this.changeActiveStep(selectedStep);
+    }
+    headerClick(event, step) {
+        event.stopPropagation(); //stop processing current header click event
+        this._headerClick.emit(step);
+    }
+    get currentStepLabel() {
+        return this._activeStep.label;
+    }
+    get currentSubStepLabel() {
+        var _a;
+        return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    activeTabHasSubSteps() {
+        return this._activeStep.subSteps && this._activeStep.subSteps.length > 0;
+    }
+    isFirstSubStep() {
+        return this._activeStep.activeSubStep === this._activeStep.subSteps[0];
+    }
+    isLastSubStep() {
+        return this._activeStep.activeSubStep === this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
+    }
+    isAnyPreviousStepEnabled(index) {
+        // eslint-disable-next-line id-blacklist
+        return this._steps.slice(0, index).find(step => step.enabled) !== undefined;
+    }
+    isAnyFollowingStepEnabled(index) {
+        // eslint-disable-next-line id-blacklist
+        return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled) !== undefined;
+    }
+    findPreviousEnabledStep() {
+        const index = this.getCurrentIndex();
+        return this._steps
+            .slice(0, index)
+            .reverse()
+            .find(step => step.enabled);
+    }
+    findNextEnabledStep() {
+        const index = this.getCurrentIndex();
+        return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
+    }
+}
+FlowbarComponent.decorators = [
+    { type: 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: ViewChild, args: ['stepper',] }],
+    _steps: [{ type: Input, args: ['steps',] }],
+    _activeStep: [{ type: Input, args: ['activeStep',] }],
+    _activeStepChange: [{ type: Output, args: ['activeStepChange',] }],
+    _headerClick: [{ type: Output, args: ['headerClick',] }]
+};
+
+class FlowbarModule {
+}
+FlowbarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [FlowbarComponent],
+                imports: [CommonModule, MatStepperModule],
+                exports: [FlowbarComponent],
+            },] }
+];
+
 class MaterialAddonsModule {
 }
 MaterialAddonsModule.decorators = [
@@ -1458,8 +2170,8 @@ MaterialAddonsModule.decorators = [
                     NumericFieldModule,
                     CardModule,
                     QuickListModule,
-                    ThrottleClickModule
-                ]
+                    ThrottleClickModule,
+                ],
             },] }
 ];
 
@@ -1471,5 +2183,5 @@ MaterialAddonsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonModule, CardModule, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldModule, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, PrimaryButtonComponent as ɵa, MadBasicButton as ɵb, OutlineButtonComponent as ɵc, LinkButtonComponent as ɵd, DangerButtonComponent as ɵe, IconButtonComponent as ɵf, NumericFieldDirective as ɵg, CardComponent as ɵh, QuickListComponent as ɵi, TableComponent as ɵj };
+export { ButtonModule, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DataTableModule, FlowbarComponent, FlowbarModule, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldModule, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations, PrimaryButtonComponent as ɵa, MadBasicButton as ɵb, OutlineButtonComponent as ɵc, LinkButtonComponent as ɵd, DangerButtonComponent as ɵe, IconButtonComponent as ɵf, NumericFieldDirective as ɵg, CardComponent as ɵh, QuickListComponent as ɵi, BaseQuickListComponent as ɵj, QuickListCompactComponent as ɵk, TableComponent as ɵl, DataTableComponent as ɵm };
 //# sourceMappingURL=porscheinformatik-material-addons.js.map