Refactor md-step-header and md-step-content + optional step change

Author: jwshinjwshin

src/cdk/stepper/public_api.ts

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

src/cdk/stepper/step-content.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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
+ */
+
+import {Directive, Input} from '@angular/core';
+import {CdkStep, CdkStepper} from './stepper';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
+
+@Directive({
+  selector: 'cdkStepContent',
+  host: {
+    'role': 'tabpanel',
+    '[attr.id]': 'contentId',
+    '[attr.aria-labelledby]': 'labelId',
+    '[attr.aria-expanded]': 'selectedIndex == index',
+  }
+})
+export class CdkStepContent {
+  /** Whether the orientation of stepper is horizontal. */
+  @Input()
+  get horizontal() { return this._horizontal; }
+  set horizontal(value: any) {
+    this._horizontal = coerceBooleanProperty(value);
+  }
+  private _horizontal: boolean;
+
+  /** Unique label ID of step header. */
+  @Input()
+  labelId: string;
+
+  /** Unique content ID of step content. */
+  @Input()
+  contentId: string;
+
+  /** Index of the given step. */
+  @Input()
+  get index() { return this._index; }
+  set index(value: any) {
+    this._index = coerceNumberProperty(value);
+  }
+  private _index: number;
+
+  /** Index of selected step in stepper. */
+  @Input()
+  get selectedIndex() { return this._selectedIndex; }
+  set selectedIndex(value: any) {
+    this._selectedIndex = coerceNumberProperty(value);
+  }
+  private _selectedIndex: number;
+
+  /** Returns the step at the index position in stepper. */
+  get step(): CdkStep {
+    return this._stepper._steps.toArray()[this._index];
+  }
+
+  constructor(private _stepper: CdkStepper) { }
+}

src/cdk/stepper/step-header.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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
+ */
+
+import {Directive, Input} from '@angular/core';
+import {CdkStep, CdkStepper} from './stepper';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
+
+@Directive({
+  selector: 'cdkStepHeader',
+  host: {
+    'role': 'tab',
+    '[attr.id]': 'labelId',
+    '[attr.aria-controls]': 'contentId',
+    '[attr.aria-selected]': 'selected'
+  }
+})
+export class CdkStepHeader {
+  /** Whether the orientation of stepper is horizontal. */
+  @Input()
+  get horizontal() { return this._horizontal; }
+  set horizontal(value: any) {
+    this._horizontal = coerceBooleanProperty(value);
+  }
+  private _horizontal: boolean;
+
+  /** Unique label ID of step header. */
+  @Input()
+  labelId: string;
+
+  /** Unique content ID of step content. */
+  @Input()
+  contentId: string;
+
+  /** Index of the given step. */
+  @Input()
+  get index() { return this._index; }
+  set index(value: any) {
+    this._index = coerceNumberProperty(value);
+  }
+  private _index: number;
+
+  /** Whether the given step is selected. */
+  @Input()
+  get selected() { return this._selected; }
+  set selected(value: any) {
+    this._selected = coerceBooleanProperty(value);
+  }
+  private _selected: boolean;
+
+
+  /** Returns the step at the index position in stepper. */
+  get step(): CdkStep {
+    return this._stepper._steps.toArray()[this._index];
+  }
+
+  constructor(private _stepper: CdkStepper) { }
+
+  /** Returns the type of icon to be displayed. */
+  _getIndicatorType(): 'number' | 'edit' | 'done' {
+    if (!this.step.completed || this._selected) {
+      return 'number';
+    } else {
+      return this.step.editable ? 'edit' : 'done';
+    }
+  }
+}

src/cdk/stepper/step-icon.ts

@@ -164,7 +164,7 @@ export class CdkStepper {
   _focusIndex: number = 0;
 
   /** Used to track unique ID for each stepper component. */
-  private _groupId: number;
+  _groupId: number;
 
   constructor() {
     this._groupId = nextId++;
@@ -241,7 +241,7 @@ export class CdkStepper {
     const stepsArray = this._steps.toArray();
     stepsArray[this._selectedIndex].interacted = true;
     if (this._linear) {
-      return stepsArray.slice(0, index).some(step => step.stepControl.invalid && !step.optional);
+      return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
     }
     return false;
   }

src/cdk/stepper/step-label-container.ts

@@ -21,11 +21,11 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
 
     <md-step formGroupName="1" [stepControl]="formArray.get([1])" optional>
       <ng-template mdStepLabel>
-        <div>Fill out your phone number</div>
+        <div>Fill out your email address</div>
       </ng-template>
       <md-input-container>
-        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl" required>
-        <md-error>This field is required</md-error>
+        <input mdInput placeholder="Email address" formControlName="emailFormCtrl">
+        <md-error>The input is invalid.</md-error>
       </md-input-container>
       <div>
         <button md-button mdStepperPrevious type="button">Back</button>
@@ -62,12 +62,12 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
     </form>
   </md-step>
 
-  <md-step [stepControl]="phoneFormGroup" optional>
-    <form [formGroup]="phoneFormGroup">
+  <md-step [stepControl]="emailFormGroup" optional>
+    <form [formGroup]="emailFormGroup">
       <ng-template mdStepLabel>Fill out your phone number</ng-template>
       <md-form-field>
-        <input mdInput placeholder="Phone number" formControlName="phoneCtrl" required>
-        <md-error>This field is required</md-error>
+        <input mdInput placeholder="Email address" formControlName="emailCtrl">
+        <md-error>The input is invalid</md-error>
       </md-form-field>
       <div>
         <button md-button mdStepperPrevious>Back</button>
@@ -156,9 +156,7 @@ <h3>Horizontal Stepper Demo</h3>
   </md-step>
 
   <md-step>
-    <ng-template mdStepLabel>
-      <div>Fill out your phone number</div>
-    </ng-template>
+    <ng-template mdStepLabel>Fill out your phone number</ng-template>
     <md-form-field>
       <input mdInput placeholder="Phone number">
     </md-form-field>
@@ -169,9 +167,7 @@ <h3>Horizontal Stepper Demo</h3>
   </md-step>
 
   <md-step>
-    <ng-template mdStepLabel>
-      <div>Fill out your address</div>
-    </ng-template>
+    <ng-template mdStepLabel>Fill out your address</ng-template>
     <md-form-field>
       <input mdInput placeholder="Address">
     </md-form-field>

src/cdk/stepper/stepper.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
 @Component({
   moduleId: module.id,
   selector: 'stepper-demo',
@@ -13,7 +15,7 @@ export class StepperDemo {
   isNonEditable = false;
 
   nameFormGroup: FormGroup;
-  phoneFormGroup: FormGroup;
+  emailFormGroup: FormGroup;
 
   steps = [
     {label: 'Confirm your name', content: 'Last name, First name.'},
@@ -35,8 +37,8 @@ export class StepperDemo {
           lastNameFormCtrl: ['', Validators.required],
         }),
         this._formBuilder.group({
-          phoneFormCtrl: ['', Validators.required],
-        })
+          emailFormCtrl: ['', Validators.pattern(EMAIL_REGEX)]
+        }),
       ])
     });
 
@@ -45,8 +47,8 @@ export class StepperDemo {
       lastNameCtrl: ['', Validators.required],
     });
 
-    this.phoneFormGroup = this._formBuilder.group({
-      phoneCtrl: ['', Validators.required]
+    this.emailFormGroup = this._formBuilder.group({
+      emailCtrl: ['', Validators.pattern(EMAIL_REGEX)]
     });
   }
 }

src/demo-app/stepper/stepper-demo.html

@@ -7,18 +7,19 @@
   $background: map-get($theme, background);
   $primary: map-get($theme, primary);
 
-  .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
-
+  .mat-stepper-header {
     &:focus,
     &:hover {
       background-color: mat-color($background, hover);
     }
+  }
+  .mat-step-header {
 
-    .mat-stepper-label-active {
+    .mat-step-label-active {
       color: mat-color($foreground, text);
     }
 
-    .mat-stepper-label-inactive,
+    .mat-step-label-inactive,
     .mat-step-optional {
       color: mat-color($foreground, disabled-text);
     }
@@ -28,14 +29,9 @@
       color: mat-color($primary, default-contrast);
     }
 
-    &[aria-selected='false'] {
-      .mat-stepper-label {
-        color: mat-color($foreground, disabled-text);
-      }
-
-      .mat-step-icon-not-touched {
-        background-color: mat-color($foreground, disabled-text);
-      }
+    .mat-step-icon-not-touched {
+      background-color: mat-color($foreground, disabled-text);
+      color: mat-color($primary, default-contrast);
     }
   }