@porscheinformatik/material-addons 10.2.0 → 10.2.1

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,10 @@ 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';
 
 class MaterialActionButtonComponent {
     constructor() {
@@ -857,7 +861,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();
         }
     }
@@ -1238,8 +1244,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 = [];
@@ -1251,7 +1256,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();
             }
@@ -1285,10 +1290,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()) {
@@ -1304,16 +1309,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 }],
@@ -1327,13 +1332,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],
             },] }
 ];
 
@@ -1460,6 +1498,259 @@ TableModule.decorators = [
             },] }
 ];
 
+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 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",
+                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:#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}"]
+            },] }
+];
+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 MaterialAddonsModule {
 }
 MaterialAddonsModule.decorators = [
@@ -1472,8 +1763,8 @@ MaterialAddonsModule.decorators = [
                     NumericFieldModule,
                     CardModule,
                     QuickListModule,
-                    ThrottleClickModule
-                ]
+                    ThrottleClickModule,
+                ],
             },] }
 ];
 
@@ -1485,5 +1776,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, 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 };
 //# sourceMappingURL=porscheinformatik-material-addons.js.map