@angular/cdk 10.0.0-rc.3 → 10.1.0

package/fesm2015/stepper.js

@@ -14,29 +14,26 @@ import { startWith, takeUntil } from 'rxjs/operators';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let CdkStepHeader = /** @class */ (() => {
-    class CdkStepHeader {
-        constructor(_elementRef) {
-            this._elementRef = _elementRef;
-        }
-        /** Focuses the step header. */
-        focus() {
-            this._elementRef.nativeElement.focus();
-        }
+class CdkStepHeader {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
     }
-    CdkStepHeader.decorators = [
-        { type: Directive, args: [{
-                    selector: '[cdkStepHeader]',
-                    host: {
-                        'role': 'tab',
-                    },
-                },] }
-    ];
-    CdkStepHeader.ctorParameters = () => [
-        { type: ElementRef }
-    ];
-    return CdkStepHeader;
-})();
+    /** Focuses the step header. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+}
+CdkStepHeader.decorators = [
+    { type: Directive, args: [{
+                selector: '[cdkStepHeader]',
+                host: {
+                    'role': 'tab',
+                },
+            },] }
+];
+CdkStepHeader.ctorParameters = () => [
+    { type: ElementRef }
+];
 
 /**
  * @license
@@ -45,22 +42,19 @@ let CdkStepHeader = /** @class */ (() => {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let CdkStepLabel = /** @class */ (() => {
-    class CdkStepLabel {
-        constructor(/** @docs-private */ template) {
-            this.template = template;
-        }
+class CdkStepLabel {
+    constructor(/** @docs-private */ template) {
+        this.template = template;
     }
-    CdkStepLabel.decorators = [
-        { type: Directive, args: [{
-                    selector: '[cdkStepLabel]',
-                },] }
-    ];
-    CdkStepLabel.ctorParameters = () => [
-        { type: TemplateRef }
-    ];
-    return CdkStepLabel;
-})();
+}
+CdkStepLabel.decorators = [
+    { type: Directive, args: [{
+                selector: '[cdkStepLabel]',
+            },] }
+];
+CdkStepLabel.ctorParameters = () => [
+    { type: TemplateRef }
+];
 
 /**
  * @license
@@ -89,349 +83,343 @@ const STEPPER_GLOBAL_OPTIONS = new InjectionToken('STEPPER_GLOBAL_OPTIONS');
  * @breaking-change 8.0.0.
  */
 const MAT_STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;
-let CdkStep = /** @class */ (() => {
-    class CdkStep {
-        /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
-        constructor(_stepper, stepperOptions) {
-            this._stepper = _stepper;
-            /** Whether user has seen the expanded step content or not. */
-            this.interacted = false;
-            this._editable = true;
-            this._optional = false;
-            this._completedOverride = null;
-            this._customError = null;
-            this._stepperOptions = stepperOptions ? stepperOptions : {};
-            this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
-            this._showError = !!this._stepperOptions.showError;
-        }
-        /** Whether the user can return to this step once it has been marked as completed. */
-        get editable() {
-            return this._editable;
-        }
-        set editable(value) {
-            this._editable = coerceBooleanProperty(value);
-        }
-        /** Whether the completion of step is optional. */
-        get optional() {
-            return this._optional;
-        }
-        set optional(value) {
-            this._optional = coerceBooleanProperty(value);
-        }
-        /** Whether step is marked as completed. */
-        get completed() {
-            return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
-        }
-        set completed(value) {
-            this._completedOverride = coerceBooleanProperty(value);
-        }
-        _getDefaultCompleted() {
-            return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
-        }
-        /** Whether step has an error. */
-        get hasError() {
-            return this._customError == null ? this._getDefaultError() : this._customError;
-        }
-        set hasError(value) {
-            this._customError = coerceBooleanProperty(value);
+class CdkStep {
+    /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
+    constructor(_stepper, stepperOptions) {
+        this._stepper = _stepper;
+        /** Whether user has seen the expanded step content or not. */
+        this.interacted = false;
+        this._editable = true;
+        this._optional = false;
+        this._completedOverride = null;
+        this._customError = null;
+        this._stepperOptions = stepperOptions ? stepperOptions : {};
+        this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
+        this._showError = !!this._stepperOptions.showError;
+    }
+    /** Whether the user can return to this step once it has been marked as completed. */
+    get editable() {
+        return this._editable;
+    }
+    set editable(value) {
+        this._editable = coerceBooleanProperty(value);
+    }
+    /** Whether the completion of step is optional. */
+    get optional() {
+        return this._optional;
+    }
+    set optional(value) {
+        this._optional = coerceBooleanProperty(value);
+    }
+    /** Whether step is marked as completed. */
+    get completed() {
+        return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
+    }
+    set completed(value) {
+        this._completedOverride = coerceBooleanProperty(value);
+    }
+    _getDefaultCompleted() {
+        return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
+    }
+    /** Whether step has an error. */
+    get hasError() {
+        return this._customError == null ? this._getDefaultError() : this._customError;
+    }
+    set hasError(value) {
+        this._customError = coerceBooleanProperty(value);
+    }
+    _getDefaultError() {
+        return this.stepControl && this.stepControl.invalid && this.interacted;
+    }
+    /** Selects this step component. */
+    select() {
+        this._stepper.selected = this;
+    }
+    /** Resets the step to its initial state. Note that this includes resetting form data. */
+    reset() {
+        this.interacted = false;
+        if (this._completedOverride != null) {
+            this._completedOverride = false;
         }
-        _getDefaultError() {
-            return this.stepControl && this.stepControl.invalid && this.interacted;
+        if (this._customError != null) {
+            this._customError = false;
         }
-        /** Selects this step component. */
-        select() {
-            this._stepper.selected = this;
+        if (this.stepControl) {
+            this.stepControl.reset();
         }
-        /** Resets the step to its initial state. Note that this includes resetting form data. */
-        reset() {
-            this.interacted = false;
-            if (this._completedOverride != null) {
-                this._completedOverride = false;
-            }
-            if (this._customError != null) {
-                this._customError = false;
+    }
+    ngOnChanges() {
+        // Since basically all inputs of the MatStep get proxied through the view down to the
+        // underlying MatStepHeader, we have to make sure that change detection runs correctly.
+        this._stepper._stateChanged();
+    }
+}
+CdkStep.decorators = [
+    { type: Component, args: [{
+                selector: 'cdk-step',
+                exportAs: 'cdkStep',
+                template: '<ng-template><ng-content></ng-content></ng-template>',
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+CdkStep.ctorParameters = () => [
+    { type: CdkStepper, decorators: [{ type: Inject, args: [forwardRef(() => CdkStepper),] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [STEPPER_GLOBAL_OPTIONS,] }] }
+];
+CdkStep.propDecorators = {
+    stepLabel: [{ type: ContentChild, args: [CdkStepLabel,] }],
+    content: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
+    stepControl: [{ type: Input }],
+    label: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    ariaLabel: [{ type: Input, args: ['aria-label',] }],
+    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
+    state: [{ type: Input }],
+    editable: [{ type: Input }],
+    optional: [{ type: Input }],
+    completed: [{ type: Input }],
+    hasError: [{ type: Input }]
+};
+class CdkStepper {
+    constructor(_dir, _changeDetectorRef, 
+    // @breaking-change 8.0.0 `_elementRef` and `_document` parameters to become required.
+    _elementRef, _document) {
+        this._dir = _dir;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._elementRef = _elementRef;
+        /** Emits when the component is destroyed. */
+        this._destroyed = new Subject();
+        this._linear = false;
+        this._selectedIndex = 0;
+        /** Event emitted when the selected step has changed. */
+        this.selectionChange = new EventEmitter();
+        this._orientation = 'horizontal';
+        this._groupId = nextId++;
+        this._document = _document;
+    }
+    /** The list of step components that the stepper is holding. */
+    get steps() {
+        return this._steps;
+    }
+    /** Whether the validity of previous steps should be checked or not. */
+    get linear() {
+        return this._linear;
+    }
+    set linear(value) {
+        this._linear = coerceBooleanProperty(value);
+    }
+    /** The index of the selected step. */
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(index) {
+        const newIndex = coerceNumberProperty(index);
+        if (this.steps) {
+            // Ensure that the index can't be out of bounds.
+            if (newIndex < 0 || newIndex > this.steps.length - 1) {
+                throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
             }
-            if (this.stepControl) {
-                this.stepControl.reset();
+            if (this._selectedIndex != newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
+                (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
+                this._updateSelectedItemIndex(index);
             }
         }
-        ngOnChanges() {
-            // Since basically all inputs of the MatStep get proxied through the view down to the
-            // underlying MatStepHeader, we have to make sure that change detection runs correctly.
-            this._stepper._stateChanged();
+        else {
+            this._selectedIndex = newIndex;
         }
     }
-    CdkStep.decorators = [
-        { type: Component, args: [{
-                    selector: 'cdk-step',
-                    exportAs: 'cdkStep',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    CdkStep.ctorParameters = () => [
-        { type: CdkStepper, decorators: [{ type: Inject, args: [forwardRef(() => CdkStepper),] }] },
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [STEPPER_GLOBAL_OPTIONS,] }] }
-    ];
-    CdkStep.propDecorators = {
-        stepLabel: [{ type: ContentChild, args: [CdkStepLabel,] }],
-        content: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
-        stepControl: [{ type: Input }],
-        label: [{ type: Input }],
-        errorMessage: [{ type: Input }],
-        ariaLabel: [{ type: Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
-        state: [{ type: Input }],
-        editable: [{ type: Input }],
-        optional: [{ type: Input }],
-        completed: [{ type: Input }],
-        hasError: [{ type: Input }]
-    };
-    return CdkStep;
-})();
-let CdkStepper = /** @class */ (() => {
-    class CdkStepper {
-        constructor(_dir, _changeDetectorRef, 
-        // @breaking-change 8.0.0 `_elementRef` and `_document` parameters to become required.
-        _elementRef, _document) {
-            this._dir = _dir;
-            this._changeDetectorRef = _changeDetectorRef;
-            this._elementRef = _elementRef;
-            /** Emits when the component is destroyed. */
-            this._destroyed = new Subject();
-            this._linear = false;
-            this._selectedIndex = 0;
-            /** Event emitted when the selected step has changed. */
-            this.selectionChange = new EventEmitter();
-            this._orientation = 'horizontal';
-            this._groupId = nextId++;
-            this._document = _document;
-        }
-        /** The list of step components that the stepper is holding. */
-        get steps() {
-            return this._steps;
-        }
-        /** Whether the validity of previous steps should be checked or not. */
-        get linear() {
-            return this._linear;
-        }
-        set linear(value) {
-            this._linear = coerceBooleanProperty(value);
-        }
-        /** The index of the selected step. */
-        get selectedIndex() {
-            return this._selectedIndex;
-        }
-        set selectedIndex(index) {
-            const newIndex = coerceNumberProperty(index);
-            if (this.steps) {
-                // Ensure that the index can't be out of bounds.
-                if (newIndex < 0 || newIndex > this.steps.length - 1) {
-                    throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
-                }
-                if (this._selectedIndex != newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
-                    (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
-                    this._updateSelectedItemIndex(index);
-                }
-            }
-            else {
-                this._selectedIndex = newIndex;
+    /** The step that is selected. */
+    get selected() {
+        // @breaking-change 8.0.0 Change return type to `CdkStep | undefined`.
+        return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
+    }
+    set selected(step) {
+        this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
+    }
+    ngAfterViewInit() {
+        // Note that while the step headers are content children by default, any components that
+        // extend this one might have them as view children. We initialize the keyboard handling in
+        // AfterViewInit so we're guaranteed for both view and content children to be defined.
+        this._keyManager = new FocusKeyManager(this._stepHeader)
+            .withWrap()
+            .withVerticalOrientation(this._orientation === 'vertical');
+        (this._dir ? this._dir.change : of())
+            .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
+            .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
+        this._keyManager.updateActiveItem(this._selectedIndex);
+        this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            if (!this.selected) {
+                this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
             }
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Selects and focuses the next step in list. */
+    next() {
+        this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
+    }
+    /** Selects and focuses the previous step in list. */
+    previous() {
+        this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
+    }
+    /** Resets the stepper to its initial state. Note that this includes clearing form data. */
+    reset() {
+        this._updateSelectedItemIndex(0);
+        this.steps.forEach(step => step.reset());
+        this._stateChanged();
+    }
+    /** Returns a unique id for each step label element. */
+    _getStepLabelId(i) {
+        return `cdk-step-label-${this._groupId}-${i}`;
+    }
+    /** Returns unique id for each step content element. */
+    _getStepContentId(i) {
+        return `cdk-step-content-${this._groupId}-${i}`;
+    }
+    /** Marks the component to be change detected. */
+    _stateChanged() {
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Returns position state of the step with the given index. */
+    _getAnimationDirection(index) {
+        const position = index - this._selectedIndex;
+        if (position < 0) {
+            return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
         }
-        /** The step that is selected. */
-        get selected() {
-            // @breaking-change 8.0.0 Change return type to `CdkStep | undefined`.
-            return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
-        }
-        set selected(step) {
-            this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
-        }
-        ngAfterViewInit() {
-            // Note that while the step headers are content children by default, any components that
-            // extend this one might have them as view children. We initialize the keyboard handling in
-            // AfterViewInit so we're guaranteed for both view and content children to be defined.
-            this._keyManager = new FocusKeyManager(this._stepHeader)
-                .withWrap()
-                .withVerticalOrientation(this._orientation === 'vertical');
-            (this._dir ? this._dir.change : of())
-                .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
-                .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
-            this._keyManager.updateActiveItem(this._selectedIndex);
-            this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
-                if (!this.selected) {
-                    this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
-                }
-            });
-        }
-        ngOnDestroy() {
-            this._destroyed.next();
-            this._destroyed.complete();
-        }
-        /** Selects and focuses the next step in list. */
-        next() {
-            this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
-        }
-        /** Selects and focuses the previous step in list. */
-        previous() {
-            this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
+        else if (position > 0) {
+            return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
         }
-        /** Resets the stepper to its initial state. Note that this includes clearing form data. */
-        reset() {
-            this._updateSelectedItemIndex(0);
-            this.steps.forEach(step => step.reset());
-            this._stateChanged();
+        return 'current';
+    }
+    /** Returns the type of icon to be displayed. */
+    _getIndicatorType(index, state = STEP_STATE.NUMBER) {
+        const step = this.steps.toArray()[index];
+        const isCurrentStep = this._isCurrentStep(index);
+        return step._displayDefaultIndicatorType ? this._getDefaultIndicatorLogic(step, isCurrentStep) :
+            this._getGuidelineLogic(step, isCurrentStep, state);
+    }
+    _getDefaultIndicatorLogic(step, isCurrentStep) {
+        if (step._showError && step.hasError && !isCurrentStep) {
+            return STEP_STATE.ERROR;
         }
-        /** Returns a unique id for each step label element. */
-        _getStepLabelId(i) {
-            return `cdk-step-label-${this._groupId}-${i}`;
+        else if (!step.completed || isCurrentStep) {
+            return STEP_STATE.NUMBER;
         }
-        /** Returns unique id for each step content element. */
-        _getStepContentId(i) {
-            return `cdk-step-content-${this._groupId}-${i}`;
+        else {
+            return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
         }
-        /** Marks the component to be change detected. */
-        _stateChanged() {
-            this._changeDetectorRef.markForCheck();
+    }
+    _getGuidelineLogic(step, isCurrentStep, state = STEP_STATE.NUMBER) {
+        if (step._showError && step.hasError && !isCurrentStep) {
+            return STEP_STATE.ERROR;
         }
-        /** Returns position state of the step with the given index. */
-        _getAnimationDirection(index) {
-            const position = index - this._selectedIndex;
-            if (position < 0) {
-                return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
-            }
-            else if (position > 0) {
-                return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
-            }
-            return 'current';
+        else if (step.completed && !isCurrentStep) {
+            return STEP_STATE.DONE;
         }
-        /** Returns the type of icon to be displayed. */
-        _getIndicatorType(index, state = STEP_STATE.NUMBER) {
-            const step = this.steps.toArray()[index];
-            const isCurrentStep = this._isCurrentStep(index);
-            return step._displayDefaultIndicatorType ? this._getDefaultIndicatorLogic(step, isCurrentStep) :
-                this._getGuidelineLogic(step, isCurrentStep, state);
+        else if (step.completed && isCurrentStep) {
+            return state;
         }
-        _getDefaultIndicatorLogic(step, isCurrentStep) {
-            if (step._showError && step.hasError && !isCurrentStep) {
-                return STEP_STATE.ERROR;
-            }
-            else if (!step.completed || isCurrentStep) {
-                return STEP_STATE.NUMBER;
-            }
-            else {
-                return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
-            }
+        else if (step.editable && isCurrentStep) {
+            return STEP_STATE.EDIT;
         }
-        _getGuidelineLogic(step, isCurrentStep, state = STEP_STATE.NUMBER) {
-            if (step._showError && step.hasError && !isCurrentStep) {
-                return STEP_STATE.ERROR;
-            }
-            else if (step.completed && !isCurrentStep) {
-                return STEP_STATE.DONE;
-            }
-            else if (step.completed && isCurrentStep) {
-                return state;
-            }
-            else if (step.editable && isCurrentStep) {
-                return STEP_STATE.EDIT;
-            }
-            else {
-                return state;
-            }
+        else {
+            return state;
         }
-        _isCurrentStep(index) {
-            return this._selectedIndex === index;
-        }
-        /** Returns the index of the currently-focused step header. */
-        _getFocusIndex() {
-            return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
+    }
+    _isCurrentStep(index) {
+        return this._selectedIndex === index;
+    }
+    /** Returns the index of the currently-focused step header. */
+    _getFocusIndex() {
+        return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
+    }
+    _updateSelectedItemIndex(newIndex) {
+        const stepsArray = this.steps.toArray();
+        this.selectionChange.emit({
+            selectedIndex: newIndex,
+            previouslySelectedIndex: this._selectedIndex,
+            selectedStep: stepsArray[newIndex],
+            previouslySelectedStep: stepsArray[this._selectedIndex],
+        });
+        // If focus is inside the stepper, move it to the next header, otherwise it may become
+        // lost when the active step content is hidden. We can't be more granular with the check
+        // (e.g. checking whether focus is inside the active step), because we don't have a
+        // reference to the elements that are rendering out the content.
+        this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
+            this._keyManager.updateActiveItem(newIndex);
+        this._selectedIndex = newIndex;
+        this._stateChanged();
+    }
+    _onKeydown(event) {
+        const hasModifier = hasModifierKey(event);
+        const keyCode = event.keyCode;
+        const manager = this._keyManager;
+        if (manager.activeItemIndex != null && !hasModifier &&
+            (keyCode === SPACE || keyCode === ENTER)) {
+            this.selectedIndex = manager.activeItemIndex;
+            event.preventDefault();
+        }
+        else if (keyCode === HOME) {
+            manager.setFirstItemActive();
+            event.preventDefault();
+        }
+        else if (keyCode === END) {
+            manager.setLastItemActive();
+            event.preventDefault();
+        }
+        else {
+            manager.onKeydown(event);
         }
-        _updateSelectedItemIndex(newIndex) {
-            const stepsArray = this.steps.toArray();
-            this.selectionChange.emit({
-                selectedIndex: newIndex,
-                previouslySelectedIndex: this._selectedIndex,
-                selectedStep: stepsArray[newIndex],
-                previouslySelectedStep: stepsArray[this._selectedIndex],
+    }
+    _anyControlsInvalidOrPending(index) {
+        const steps = this.steps.toArray();
+        steps[this._selectedIndex].interacted = true;
+        if (this._linear && index >= 0) {
+            return steps.slice(0, index).some(step => {
+                const control = step.stepControl;
+                const isIncomplete = control ? (control.invalid || control.pending || !step.interacted) : !step.completed;
+                return isIncomplete && !step.optional && !step._completedOverride;
             });
-            // If focus is inside the stepper, move it to the next header, otherwise it may become
-            // lost when the active step content is hidden. We can't be more granular with the check
-            // (e.g. checking whether focus is inside the active step), because we don't have a
-            // reference to the elements that are rendering out the content.
-            this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
-                this._keyManager.updateActiveItem(newIndex);
-            this._selectedIndex = newIndex;
-            this._stateChanged();
         }
-        _onKeydown(event) {
-            const hasModifier = hasModifierKey(event);
-            const keyCode = event.keyCode;
-            const manager = this._keyManager;
-            if (manager.activeItemIndex != null && !hasModifier &&
-                (keyCode === SPACE || keyCode === ENTER)) {
-                this.selectedIndex = manager.activeItemIndex;
-                event.preventDefault();
-            }
-            else if (keyCode === HOME) {
-                manager.setFirstItemActive();
-                event.preventDefault();
-            }
-            else if (keyCode === END) {
-                manager.setLastItemActive();
-                event.preventDefault();
-            }
-            else {
-                manager.onKeydown(event);
-            }
-        }
-        _anyControlsInvalidOrPending(index) {
-            const steps = this.steps.toArray();
-            steps[this._selectedIndex].interacted = true;
-            if (this._linear && index >= 0) {
-                return steps.slice(0, index).some(step => {
-                    const control = step.stepControl;
-                    const isIncomplete = control ? (control.invalid || control.pending || !step.interacted) : !step.completed;
-                    return isIncomplete && !step.optional && !step._completedOverride;
-                });
-            }
+        return false;
+    }
+    _layoutDirection() {
+        return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+    }
+    /** Checks whether the stepper contains the focused element. */
+    _containsFocus() {
+        if (!this._document || !this._elementRef) {
             return false;
         }
-        _layoutDirection() {
-            return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-        }
-        /** Checks whether the stepper contains the focused element. */
-        _containsFocus() {
-            if (!this._document || !this._elementRef) {
-                return false;
-            }
-            const stepperElement = this._elementRef.nativeElement;
-            const focusedElement = this._document.activeElement;
-            return stepperElement === focusedElement || stepperElement.contains(focusedElement);
-        }
+        const stepperElement = this._elementRef.nativeElement;
+        const focusedElement = this._document.activeElement;
+        return stepperElement === focusedElement || stepperElement.contains(focusedElement);
     }
-    CdkStepper.decorators = [
-        { type: Directive, args: [{
-                    selector: '[cdkStepper]',
-                    exportAs: 'cdkStepper',
-                },] }
-    ];
-    CdkStepper.ctorParameters = () => [
-        { type: Directionality, decorators: [{ type: Optional }] },
-        { type: ChangeDetectorRef },
-        { type: ElementRef },
-        { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-    ];
-    CdkStepper.propDecorators = {
-        _steps: [{ type: ContentChildren, args: [CdkStep, { descendants: true },] }],
-        _stepHeader: [{ type: ContentChildren, args: [CdkStepHeader, { descendants: true },] }],
-        linear: [{ type: Input }],
-        selectedIndex: [{ type: Input }],
-        selected: [{ type: Input }],
-        selectionChange: [{ type: Output }]
-    };
-    return CdkStepper;
-})();
+}
+CdkStepper.decorators = [
+    { type: Directive, args: [{
+                selector: '[cdkStepper]',
+                exportAs: 'cdkStepper',
+            },] }
+];
+CdkStepper.ctorParameters = () => [
+    { type: Directionality, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+CdkStepper.propDecorators = {
+    _steps: [{ type: ContentChildren, args: [CdkStep, { descendants: true },] }],
+    _stepHeader: [{ type: ContentChildren, args: [CdkStepHeader, { descendants: true },] }],
+    linear: [{ type: Input }],
+    selectedIndex: [{ type: Input }],
+    selected: [{ type: Input }],
+    selectionChange: [{ type: Output }]
+};
 
 /**
  * @license
@@ -441,73 +429,67 @@ let CdkStepper = /** @class */ (() => {
  * found in the LICENSE file at https://angular.io/license
  */
 /** Button that moves to the next step in a stepper workflow. */
-let CdkStepperNext = /** @class */ (() => {
-    class CdkStepperNext {
-        constructor(_stepper) {
-            this._stepper = _stepper;
-            /** Type of the next button. Defaults to "submit" if not specified. */
-            this.type = 'submit';
-        }
-        // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
-        // In Ivy the `host` bindings will be merged when this class is extended, whereas in
-        // ViewEngine they're overwritten.
-        // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
-        // tslint:disable-next-line:no-host-decorator-in-concrete
-        _handleClick() {
-            this._stepper.next();
-        }
+class CdkStepperNext {
+    constructor(_stepper) {
+        this._stepper = _stepper;
+        /** Type of the next button. Defaults to "submit" if not specified. */
+        this.type = 'submit';
     }
-    CdkStepperNext.decorators = [
-        { type: Directive, args: [{
-                    selector: 'button[cdkStepperNext]',
-                    host: {
-                        '[type]': 'type',
-                    }
-                },] }
-    ];
-    CdkStepperNext.ctorParameters = () => [
-        { type: CdkStepper }
-    ];
-    CdkStepperNext.propDecorators = {
-        type: [{ type: Input }],
-        _handleClick: [{ type: HostListener, args: ['click',] }]
-    };
-    return CdkStepperNext;
-})();
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritten.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    _handleClick() {
+        this._stepper.next();
+    }
+}
+CdkStepperNext.decorators = [
+    { type: Directive, args: [{
+                selector: 'button[cdkStepperNext]',
+                host: {
+                    '[type]': 'type',
+                }
+            },] }
+];
+CdkStepperNext.ctorParameters = () => [
+    { type: CdkStepper }
+];
+CdkStepperNext.propDecorators = {
+    type: [{ type: Input }],
+    _handleClick: [{ type: HostListener, args: ['click',] }]
+};
 /** Button that moves to the previous step in a stepper workflow. */
-let CdkStepperPrevious = /** @class */ (() => {
-    class CdkStepperPrevious {
-        constructor(_stepper) {
-            this._stepper = _stepper;
-            /** Type of the previous button. Defaults to "button" if not specified. */
-            this.type = 'button';
-        }
-        // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
-        // In Ivy the `host` bindings will be merged when this class is extended, whereas in
-        // ViewEngine they're overwritten.
-        // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
-        // tslint:disable-next-line:no-host-decorator-in-concrete
-        _handleClick() {
-            this._stepper.previous();
-        }
+class CdkStepperPrevious {
+    constructor(_stepper) {
+        this._stepper = _stepper;
+        /** Type of the previous button. Defaults to "button" if not specified. */
+        this.type = 'button';
+    }
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritten.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    _handleClick() {
+        this._stepper.previous();
     }
-    CdkStepperPrevious.decorators = [
-        { type: Directive, args: [{
-                    selector: 'button[cdkStepperPrevious]',
-                    host: {
-                        '[type]': 'type',
-                    }
-                },] }
-    ];
-    CdkStepperPrevious.ctorParameters = () => [
-        { type: CdkStepper }
-    ];
-    CdkStepperPrevious.propDecorators = {
-        type: [{ type: Input }],
-        _handleClick: [{ type: HostListener, args: ['click',] }]
-    };
-    return CdkStepperPrevious;
-})();
+}
+CdkStepperPrevious.decorators = [
+    { type: Directive, args: [{
+                selector: 'button[cdkStepperPrevious]',
+                host: {
+                    '[type]': 'type',
+                }
+            },] }
+];
+CdkStepperPrevious.ctorParameters = () => [
+    { type: CdkStepper }
+];
+CdkStepperPrevious.propDecorators = {
+    type: [{ type: Input }],
+    _handleClick: [{ type: HostListener, args: ['click',] }]
+};
 
 /**
  * @license
@@ -516,32 +498,29 @@ let CdkStepperPrevious = /** @class */ (() => {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let CdkStepperModule = /** @class */ (() => {
-    class CdkStepperModule {
-    }
-    CdkStepperModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [BidiModule],
-                    exports: [
-                        CdkStep,
-                        CdkStepper,
-                        CdkStepHeader,
-                        CdkStepLabel,
-                        CdkStepperNext,
-                        CdkStepperPrevious,
-                    ],
-                    declarations: [
-                        CdkStep,
-                        CdkStepper,
-                        CdkStepHeader,
-                        CdkStepLabel,
-                        CdkStepperNext,
-                        CdkStepperPrevious,
-                    ]
-                },] }
-    ];
-    return CdkStepperModule;
-})();
+class CdkStepperModule {
+}
+CdkStepperModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [BidiModule],
+                exports: [
+                    CdkStep,
+                    CdkStepper,
+                    CdkStepHeader,
+                    CdkStepLabel,
+                    CdkStepperNext,
+                    CdkStepperPrevious,
+                ],
+                declarations: [
+                    CdkStep,
+                    CdkStepper,
+                    CdkStepHeader,
+                    CdkStepLabel,
+                    CdkStepperNext,
+                    CdkStepperPrevious,
+                ]
+            },] }
+];
 
 /**
  * @license