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,89 @@
+/**
+ * @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, ElementRef, 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',
+    // '[attr.tabindex]': 'tabIndex'
+  }
+})
+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;
+
+  // /** Tab index of the header of the given step. */
+  // @Input()
+  // get tabIndex() { return this._tabIndex; }
+  // set tabIndex(value: any) {
+  //  this._tabIndex = coerceNumberProperty(value);
+  // }
+  // private _tabIndex: number;
+
+  /** Returns the step at the index position in stepper. */
+  get step(): CdkStep {
+    return this._stepper._steps.toArray()[this._index];
+  }
+
+  constructor(private _stepper: CdkStepper, private _elementRef: ElementRef) { }
+
+  /** 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';
+    }
+  }
+
+  /** Blurs the step header. */
+  _blur() {
+    this._elementRef.nativeElement.blur();
+  }
+
+  /** Focuses the step header. */
+  _focus() {
+    this._elementRef.nativeElement.focus();
+  }
+}

src/cdk/stepper/step-icon.ts

@@ -8,15 +8,15 @@
 
 import {
   ContentChildren,
+  // This import is only used to define a generic type. The current TypeScript version incorrectly
+  // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
+  // tslint:disable-next-line:no-unused-variable
+  ElementRef,
   EventEmitter,
   Input,
   Output,
   QueryList,
   Directive,
-  // This import is only used to define a generic type. The current TypeScript version incorrectly
-  // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
-  // tslint:disable-next-line:no-unused-variable
-  ElementRef,
   Component,
   ContentChild,
   ViewChild,
@@ -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>

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)]
     });
   }
 }