@porscheinformatik/material-addons 10.2.0 → 10.2.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator')) :
-    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator));
-}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout')) :
+    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/bidi', '@angular/cdk/stepper', '@angular/cdk/a11y', '@angular/flex-layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.bidi, global.ng.cdk.stepper, global.ng.cdk.a11y, global.ng.flexLayout));
+}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator, bidi, stepper, a11y, flexLayout) { 'use strict';
 
     var MaterialActionButtonComponent = /** @class */ (function () {
         function MaterialActionButtonComponent() {
@@ -1222,7 +1222,9 @@
             set: function (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();
                 }
             },
@@ -1621,9 +1623,8 @@
                 },] }
     ];
 
-    // Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
-    var QuickListComponent = /** @class */ (function () {
-        function QuickListComponent(changeDetectorRef) {
+    var BaseQuickListComponent = /** @class */ (function () {
+        function BaseQuickListComponent(changeDetectorRef) {
             this.changeDetectorRef = changeDetectorRef;
             this.allItems = [];
             this.addLabel = 'NOT SET';
@@ -1632,31 +1633,31 @@
             this.added = new i0.EventEmitter();
             this.removed = new i0.EventEmitter();
         }
-        QuickListComponent.prototype.ngOnInit = function () {
+        BaseQuickListComponent.prototype.ngOnInit = function () {
             this.addEventFunction = this.addItem.bind(this);
-            if (typeof this.minItems !== 'undefined') {
+            if (this.minItems) {
                 for (var n = this.allItems.length; n < this.minItems; n++) {
                     this.interalAddItem();
                 }
             }
         };
-        QuickListComponent.prototype.ngAfterViewInit = function () {
+        BaseQuickListComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             setTimeout(function () { return _this.setFocusOnAdd(); }, 1);
         };
-        QuickListComponent.prototype.addItem = function () {
+        BaseQuickListComponent.prototype.addItem = function () {
             var newItem = this.interalAddItem();
             if (!!newItem) {
                 this.added.emit(newItem);
             }
         };
-        QuickListComponent.prototype.removeItem = function (item) {
+        BaseQuickListComponent.prototype.removeItem = function (item) {
             if (this.isDeleteAllowed()) {
                 this.allItems.splice(this.allItems.indexOf(item), 1);
                 this.removed.emit(item);
             }
         };
-        QuickListComponent.prototype.setFocusOnAdd = function () {
+        BaseQuickListComponent.prototype.setFocusOnAdd = function () {
             var _this = this;
             this.rowCountFocus = this.itemRows.length;
             this.itemRows.changes.subscribe(function (els) {
@@ -1669,13 +1670,13 @@
                 _this.rowCountFocus = els.length;
             });
         };
-        QuickListComponent.prototype.isAddAllowed = function () {
-            return typeof this.maxItems === 'undefined' || this.allItems.length < this.maxItems;
+        BaseQuickListComponent.prototype.isAddAllowed = function () {
+            return this.addPossible && (!this.maxItems || this.allItems.length < this.maxItems);
         };
-        QuickListComponent.prototype.isDeleteAllowed = function () {
-            return typeof this.minItems === 'undefined' || this.allItems.length > this.minItems;
+        BaseQuickListComponent.prototype.isDeleteAllowed = function () {
+            return !this.minItems || this.allItems.length > this.minItems;
         };
-        QuickListComponent.prototype.interalAddItem = function () {
+        BaseQuickListComponent.prototype.interalAddItem = function () {
             if (this.isAddAllowed()) {
                 var newItem = Object.assign({}, this.blankItem);
                 // creates ids in the form of "n5kdz1pljl8"
@@ -1688,18 +1689,18 @@
             }
             return null;
         };
-        return QuickListComponent;
+        return BaseQuickListComponent;
     }());
-    QuickListComponent.decorators = [
+    BaseQuickListComponent.decorators = [
         { type: i0.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 = function () { return [
+    BaseQuickListComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
-    QuickListComponent.propDecorators = {
+    BaseQuickListComponent.propDecorators = {
         allItems: [{ type: i0.Input }],
         addLabel: [{ type: i0.Input }],
         addPossible: [{ type: i0.Input }],
@@ -1713,6 +1714,44 @@
         itemRows: [{ type: i0.ViewChildren, args: ['row',] }]
     };
 
+    var QuickListComponent = /** @class */ (function (_super) {
+        __extends(QuickListComponent, _super);
+        function QuickListComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            return _this;
+        }
+        return QuickListComponent;
+    }(BaseQuickListComponent));
+    QuickListComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    var QuickListCompactComponent = /** @class */ (function (_super) {
+        __extends(QuickListCompactComponent, _super);
+        function QuickListCompactComponent(changeDetectorRef) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            return _this;
+        }
+        return QuickListCompactComponent;
+    }(BaseQuickListComponent));
+    QuickListCompactComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var QuickListModule = /** @class */ (function () {
         function QuickListModule() {
         }
@@ -1720,9 +1759,9 @@
     }());
     QuickListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [QuickListComponent],
+                    declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
                     imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, ButtonModule],
-                    exports: [QuickListComponent],
+                    exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
                 },] }
     ];
 
@@ -1866,6 +1905,273 @@
                 },] }
     ];
 
+    var StepHeaderComponent = /** @class */ (function (_super) {
+        __extends(StepHeaderComponent, _super);
+        function StepHeaderComponent(_focusMonitor, _elementRef) {
+            var _this = _super.call(this, _elementRef) || this;
+            _this._focusMonitor = _focusMonitor;
+            return _this;
+        }
+        StepHeaderComponent.prototype.ngAfterViewInit = function () {
+            this._focusMonitor.monitor(this._elementRef, true);
+        };
+        StepHeaderComponent.prototype.ngOnDestroy = function () {
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        };
+        /** Focuses the step header. */
+        StepHeaderComponent.prototype.focus = function (origin, options) {
+            if (origin) {
+                this._focusMonitor.focusVia(this._elementRef, origin, options);
+            }
+            else {
+                this._elementRef.nativeElement.focus(options);
+            }
+        };
+        StepHeaderComponent.prototype.getCssForState = function () {
+            if (this.state === stepper.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';
+            }
+        };
+        StepHeaderComponent.prototype.getIcon = function () {
+            if (this.completed) {
+                return 'check_circle_outline';
+            }
+            else if (this.hasError) {
+                return 'error_outline';
+            }
+            return '';
+        };
+        return StepHeaderComponent;
+    }(stepper.CdkStepHeader));
+    StepHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mad-step-header',
+                    template: "<div class=\"header\" fxLayout=\"row\" fxLayoutGap=\"1em\"\n     [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n     [style.border-color]=\"this.hasError ? '#f44336' : '#d3d3d3'\">\n    <div [ngClass]=\"this.getCssForState()\"></div>\n    <div class=\"header-label\">\n        <mat-icon class=\"material-icons-outlined\">\n            {{this.selected && !this.closed ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}\n        </mat-icon>\n    </div>\n    <div *ngIf=\"this.completed || this.hasError\" class=\"header-label\">\n        <mat-icon [ngClass]=\"this.completed ? 'green-check' : 'red-error'\">\n            {{getIcon()}}\n        </mat-icon>\n    </div>\n    <span *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{(this.index + 1) + '.'}}</span>\n    <div class=\"header-label\"> {{this.label}}</div>\n</div>\n",
+                    inputs: ['color'],
+                    host: {
+                        'class': 'mad-step-header',
+                        'role': 'tab',
+                    },
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".header{-webkit-tap-highlight-color:transparent;border:1px solid #d3d3d3;box-sizing:content-box;cursor:pointer;height:62px;outline:#f44336;overflow:hidden;width:100%}.header-label{align-items:center;display:flex}.step-state-complete{background:green;width:5px}.step-state-error{background:#f44336;width:5px}.step-state-neutral{background:#d3d3d3;width:5px}.green-check{color:green}.red-error{color:#f44336}"]
+                },] }
+    ];
+    StepHeaderComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: i0.ElementRef }
+    ]; };
+    StepHeaderComponent.propDecorators = {
+        index: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        state: [{ type: i0.Input }],
+        errorMessage: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        optional: [{ type: i0.Input }],
+        hasError: [{ type: i0.Input }],
+        completed: [{ type: i0.Input }],
+        closed: [{ type: i0.Input }]
+    };
+
+    /**
+     * Animations used by the MAD stepper.
+     */
+    var madStepperAnimations = {
+        verticalStepTransition: animations.trigger('stepTransition', [
+            animations.state('previous', animations.style({ height: '0px', visibility: 'hidden' })),
+            animations.state('next', animations.style({ height: '0px', visibility: 'hidden' })),
+            animations.state('current', animations.style({ height: '*', visibility: 'visible' })),
+            animations.transition('* <=> current', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    };
+
+    var StepComponent = /** @class */ (function (_super) {
+        __extends(StepComponent, _super);
+        function StepComponent(stepper, _viewContainerRef) {
+            var _this = _super.call(this, stepper) || this;
+            _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 i0.EventEmitter();
+            /** Action event for the done button. If not set the StepComponent will handle the step navigation  */
+            _this.onDone = new i0.EventEmitter();
+            /*** Action event when the header is clicked. If not set the StepComponent will handle the step navigation*/
+            _this.onHeaderClick = new i0.EventEmitter();
+            _this.stepClosed = false;
+            _this._isSelected = rxjs.Subscription.EMPTY;
+            return _this;
+        }
+        StepComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this._isSelected = this._stepper.steps.changes
+                .pipe(operators.switchMap(function () { return _this._stepper.selectionChange.pipe(operators.map(function (event) { return event.selectedStep === _this; }), operators.tap(function () { return (_this.stepClosed = false); }), operators.startWith(_this._stepper.selected === _this)); }))
+                .subscribe();
+        };
+        StepComponent.prototype.ngOnDestroy = function () {
+            this._isSelected.unsubscribe();
+        };
+        StepComponent.prototype.next = function () {
+            this.stepValidation();
+            if (this.onNext.observers.length <= 0) {
+                this.stepper.next();
+            }
+            this.onNext.emit();
+        };
+        StepComponent.prototype.selectAndMarkAsTouched = function (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);
+        };
+        StepComponent.prototype.completeLast = function () {
+            this.stepValidation();
+            this.stepClosed = true;
+            if (this.onDone.observers.length <= 0) {
+                this.stepper.next();
+            }
+            this.onDone.emit();
+        };
+        StepComponent.prototype.resetValidations = function () {
+            this.hasError = false;
+            this.completed = true;
+            this.state = stepper.STEP_STATE.DONE;
+        };
+        StepComponent.prototype.stepValidation = function () {
+            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 = stepper.STEP_STATE.DONE;
+            }
+            else {
+                this.completed = false;
+                this.hasError = true;
+                this.state = stepper.STEP_STATE.ERROR;
+            }
+        };
+        return StepComponent;
+    }(stepper.CdkStep));
+    StepComponent.decorators = [
+        { type: i0.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: stepper.CdkStep, useExisting: StepComponent }],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.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 = function () { return [
+        { type: StepperComponent, decorators: [{ type: i0.Inject, args: [i0.forwardRef(function () { return StepperComponent; }),] }] },
+        { type: i0.ViewContainerRef }
+    ]; };
+    StepComponent.propDecorators = {
+        onNext: [{ type: i0.Output }],
+        onDone: [{ type: i0.Output }],
+        onHeaderClick: [{ type: i0.Output }]
+    };
+    var StepperComponent = /** @class */ (function (_super) {
+        __extends(StepperComponent, _super);
+        function StepperComponent(dir, changeDetectorRef, elementRef, _document) {
+            var _this = _super.call(this, dir, changeDetectorRef, elementRef, _document) || this;
+            /** Event emitted when the current step is done transitioning in. */
+            _this.animationDone = new i0.EventEmitter();
+            /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+            _this.steps = new i0.QueryList();
+            _this._animationDone = new rxjs.Subject();
+            _this._orientation = 'vertical';
+            return _this;
+        }
+        StepperComponent.prototype.ngOnInit = function () {
+            // Only linear stepper implementation is supported
+            _super.prototype.linear = true;
+        };
+        StepperComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            _super.prototype.ngAfterContentInit.call(this);
+            this.steps.changes.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
+                _this._stateChanged();
+            });
+            this._animationDone
+                .pipe(operators.distinctUntilChanged(function (x, y) { return x.fromState === y.fromState && x.toState === y.toState; }), operators.takeUntil(this._destroyed))
+                .subscribe(function (event) {
+                if (event.toState === 'current') {
+                    _this.animationDone.emit();
+                }
+            });
+        };
+        /**
+         * Method patched to enable the closing of the last step.
+         */
+        StepperComponent.prototype._getAnimationDirection = function (index) {
+            var _a, _b;
+            var 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.prototype._getAnimationDirection.call(this, index);
+        };
+        StepperComponent.prototype._stepIsNavigable = function (index, step) {
+            return step.completed || this.selectedIndex === index || !this.linear;
+        };
+        return StepperComponent;
+    }(stepper.CdkStepper));
+    StepperComponent.decorators = [
+        { type: i0.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: stepper.CdkStepper, useExisting: StepperComponent }],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.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 = function () { return [
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+    StepperComponent.propDecorators = {
+        animationDone: [{ type: i0.Output }],
+        nextButtonLabel: [{ type: i0.Input }],
+        doneButtonLabel: [{ type: i0.Input }],
+        _stepHeader: [{ type: i0.ViewChildren, args: [StepHeaderComponent,] }],
+        _steps: [{ type: i0.ContentChildren, args: [StepComponent, { descendants: true },] }]
+    };
+
+    var StepperModule = /** @class */ (function () {
+        function StepperModule() {
+        }
+        return StepperModule;
+    }());
+    StepperModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [StepperComponent, StepHeaderComponent, StepComponent],
+                    imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, stepper.CdkStepperModule, flexLayout.FlexModule],
+                    exports: [StepperComponent, StepHeaderComponent, StepComponent],
+                },] }
+    ];
+
     var MaterialAddonsModule = /** @class */ (function () {
         function MaterialAddonsModule() {
         }
@@ -1881,8 +2187,8 @@
                         NumericFieldModule,
                         CardModule,
                         QuickListModule,
-                        ThrottleClickModule
-                    ]
+                        ThrottleClickModule,
+                    ],
                 },] }
     ];
 
@@ -1905,12 +2211,17 @@
     exports.ReadOnlyFormFieldComponent = ReadOnlyFormFieldComponent;
     exports.ReadOnlyFormFieldModule = ReadOnlyFormFieldModule;
     exports.ReadOnlyFormFieldWrapperComponent = ReadOnlyFormFieldWrapperComponent;
+    exports.StepComponent = StepComponent;
+    exports.StepHeaderComponent = StepHeaderComponent;
+    exports.StepperComponent = StepperComponent;
+    exports.StepperModule = StepperModule;
     exports.TableModule = TableModule;
     exports.ThrottleClickDirective = ThrottleClickDirective;
     exports.ThrottleClickModule = ThrottleClickModule;
     exports.ToolbarComponent = ToolbarComponent;
     exports.ToolbarModule = ToolbarModule;
     exports.ToolbarService = ToolbarService;
+    exports.madStepperAnimations = madStepperAnimations;
     exports.ɵa = PrimaryButtonComponent;
     exports.ɵb = MadBasicButton;
     exports.ɵc = OutlineButtonComponent;
@@ -1920,7 +2231,9 @@
     exports.ɵg = NumericFieldDirective;
     exports.ɵh = CardComponent;
     exports.ɵi = QuickListComponent;
-    exports.ɵj = TableComponent;
+    exports.ɵj = BaseQuickListComponent;
+    exports.ɵk = QuickListCompactComponent;
+    exports.ɵl = TableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });