@porscheinformatik/material-addons 10.1.7 → 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();
         }
     }
@@ -1121,9 +1127,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 +1146,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 +1186,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 +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 = [];
@@ -1237,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();
             }
@@ -1271,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()) {
@@ -1290,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 }],
@@ -1313,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],
             },] }
 ];
 
@@ -1446,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 = [
@@ -1458,8 +1763,8 @@ MaterialAddonsModule.decorators = [
                     NumericFieldModule,
                     CardModule,
                     QuickListModule,
-                    ThrottleClickModule
-                ]
+                    ThrottleClickModule,
+                ],
             },] }
 ];
 
@@ -1471,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