Simplify code based on review

src/cdk/stepper/public_api.ts

@@ -11,20 +11,14 @@ import {CdkStepper, CdkStep} from './stepper';
 import {CommonModule} from '@angular/common';
 import {CdkStepLabel} from './step-label';
 import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
-import {CdkStepHeader} from './step-header';
-import {CdkStepContent} from './step-content';
 
 @NgModule({
   imports: [CommonModule],
-  exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepHeader,
-    CdkStepContent],
-  declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious,
-    CdkStepHeader, CdkStepContent]
+  exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
+  declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
 })
 export class CdkStepperModule {}
 
 export * from './stepper';
 export * from './step-label';
 export * from './stepper-button';
-export * from './step-header';
-export * from './step-content';

src/cdk/stepper/stepper.ts

@@ -20,7 +20,8 @@ import {
   Component,
   ContentChild,
   ViewChild,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {CdkStepLabel} from './step-label';
@@ -53,7 +54,8 @@ export class StepperSelectionEvent {
 
 @Component({
   selector: 'cdk-step',
-  templateUrl: 'step.html'
+  templateUrl: 'step.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class CdkStep {
   /** Template for step label if it exists. */
@@ -138,8 +140,8 @@ export class CdkStepper {
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
-    if (index < this._selectedIndex && !this._steps.toArray()[index].editable) { return; }
-    if (this._anyControlsInvalid(index)) {
+    if (this._anyControlsInvalid(index)
+        || index < this._selectedIndex && !this._steps.toArray()[index].editable) {
       // remove focus from clicked step header if the step is not able to be selected
       this._stepHeader.toArray()[index].nativeElement.blur();
     } else if (this._selectedIndex != index) {
@@ -202,6 +204,16 @@ export class CdkStepper {
     }
   }
 
+  /** Returns the type of icon to be displayed. */
+  _getIndicatorType(index: number): 'number' | 'edit' | 'done' {
+    const step = this._steps.toArray()[index];
+    if (!step.completed || this._selectedIndex == index) {
+      return 'number';
+    } else {
+      return step.editable ? 'edit' : 'done';
+    }
+  }
+
   private _emitStepperSelectionEvent(newIndex: number): void {
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({

src/lib/stepper/_stepper-theme.scss

@@ -13,8 +13,8 @@
       background-color: mat-color($background, hover);
     }
   }
-  .mat-step-header {
 
+  .mat-step-header {
     .mat-step-label-active {
       color: mat-color($foreground, text);
     }

src/lib/stepper/index.ts

@@ -19,7 +19,6 @@ import {MdStepLabel} from './step-label';
 import {MdStepperNext, MdStepperPrevious} from './stepper-button';
 import {MdIconModule} from '../icon/index';
 import {MdStepHeader} from './step-header';
-import {MdStepContent} from './step-content';
 
 @NgModule({
   imports: [
@@ -31,9 +30,9 @@ import {MdStepContent} from './step-content';
     MdIconModule
   ],
   exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
-    MdStepperNext, MdStepperPrevious, MdStepHeader, MdStepContent],
+    MdStepperNext, MdStepperPrevious, MdStepHeader],
   declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
-    MdStepperNext, MdStepperPrevious, MdStepHeader, MdStepContent],
+    MdStepperNext, MdStepperPrevious, MdStepHeader],
 })
 export class MdStepperModule {}
 
@@ -43,4 +42,3 @@ export * from './step-label';
 export * from './stepper';
 export * from './stepper-button';
 export * from './step-header';
-export * from './step-content';

src/lib/stepper/step-header.html

@@ -1,20 +1,17 @@
-<div [class.mat-horizontal-stepper-header]="horizontal"
-     [class.mat-vertical-stepper-header]="!horizontal">
-  <div [class.mat-step-icon]="_getIndicatorType() != 'number' || selected"
-       [class.mat-step-icon-not-touched]="_getIndicatorType() == 'number' && !selected"
-       [ngSwitch]="_getIndicatorType()">
-    <span *ngSwitchCase="'number'">{{index + 1}}</span>
-    <md-icon *ngSwitchCase="'edit'">create</md-icon>
-    <md-icon *ngSwitchCase="'done'">done</md-icon>
-  </div>
-  <div [class.mat-step-label-active]="step.completed || selected"
-       [class.mat-step-label-inactive]="!step.completed && !selected">
-    <!-- If there is a label template, use it. -->
-    <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
-    </ng-container>
-    <!-- It there is no label template, fall back to the text label. -->
-    <div class="text-label" *ngIf="!step.stepLabel">{{step.label}}</div>
+<div [class.mat-step-icon]="icon != 'number' || selected"
+     [class.mat-step-icon-not-touched]="icon == 'number' && !selected">
+  <span *ngIf="icon == 'number'">{{index + 1}}</span>
+  <md-icon *ngIf="icon == 'edit'">create</md-icon>
+  <md-icon *ngIf="icon == 'done'">done</md-icon>
+</div>
+<div [class.mat-step-label-active]="active"
+     [class.mat-step-label-inactive]="!active">
+  <!-- If there is a label template, use it. -->
+  <ng-container *ngIf="stepLabel" [ngTemplateOutlet]="stepLabel.template">
+  </ng-container>
+  <!-- It there is no label template, fall back to the text label. -->
+  <div class="mat-step-text-label" *ngIf="!stepLabel">{{label}}</div>
 
-    <div class="mat-step-optional" *ngIf="step.optional">Optional</div>
-  </div>
+  <div class="mat-step-optional" *ngIf="optional">Optional</div>
 </div>
+

src/lib/stepper/step-header.scss

@@ -1,4 +1,3 @@
-$mat-horizontal-stepper-header-height: 72px !default;
 $mat-stepper-label-header-height: 24px !default;
 $mat-stepper-label-min-width: 50px !default;
 $mat-stepper-side-gap: 24px !default;
@@ -10,32 +9,6 @@ $mat-step-optional-font-size: 12px;
   display: flex;
 }
 
-.mat-horizontal-stepper-header {
-  display: flex;
-  height: $mat-horizontal-stepper-header-height;
-  overflow: hidden;
-  align-items: center;
-  padding: 0 $mat-stepper-side-gap;
-
-  .mat-step-icon,
-  .mat-step-icon-not-touched {
-    margin-right: $mat-stepper-line-gap;
-    flex: none;
-  }
-}
-
-.mat-vertical-stepper-header {
-  display: flex;
-  align-items: center;
-  padding: $mat-stepper-side-gap;
-  max-height: $mat-stepper-label-header-height;
-
-  .mat-step-icon,
-  .mat-step-icon-not-touched {
-    margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
-  }
-}
-
 .mat-step-optional {
   font-size: $mat-step-optional-font-size;
 }
@@ -60,7 +33,7 @@ $mat-step-optional-font-size: 12px;
   vertical-align: middle;
 }
 
-.text-label {
+.mat-step-text-label {
   text-overflow: ellipsis;
   overflow: hidden;
 }