@porscheinformatik/material-addons 10.2.1 → 10.2.4

package/fesm2015/porscheinformatik-material-addons.js

@@ -24,6 +24,7 @@ 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() {
@@ -1492,12 +1493,132 @@ 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);
@@ -1542,7 +1663,7 @@ class StepHeaderComponent extends CdkStepHeader {
 StepHeaderComponent.decorators = [
     { type: 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',
@@ -1550,7 +1671,7 @@ StepHeaderComponent.decorators = [
                 },
                 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:#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 = () => [
@@ -1604,8 +1725,8 @@ class StepComponent extends CdkStep {
     ngOnDestroy() {
         this._isSelected.unsubscribe();
     }
-    next() {
-        this.stepValidation();
+    next(markFormAsTouched = true) {
+        this.stepValidation(markFormAsTouched);
         if (this.onNext.observers.length <= 0) {
             this.stepper.next();
         }
@@ -1622,7 +1743,7 @@ class StepComponent extends CdkStep {
         this.onHeaderClick.emit(index);
     }
     completeLast() {
-        this.stepValidation();
+        this.stepValidation(true);
         this.stepClosed = true;
         if (this.onDone.observers.length <= 0) {
             this.stepper.next();
@@ -1634,9 +1755,11 @@ class StepComponent extends CdkStep {
         this.completed = true;
         this.state = STEP_STATE.DONE;
     }
-    stepValidation() {
+    stepValidation(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;
@@ -1751,6 +1874,296 @@ StepperModule.decorators = [
             },] }
 ];
 
+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';
+    }
+    getIndexForActiveStep() {
+        const selectedIndex = this._steps.indexOf(this._activeStep);
+        return selectedIndex === -1 ? 0 : selectedIndex;
+    }
+    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 [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: 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 = [
@@ -1776,5 +2189,5 @@ MaterialAddonsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonModule, CardModule, 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 };
+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