feature(steps): toggle, open and close methods (#40)

* added toggle, open and close methods to step

* updated docs and demo

src/app/components/components/steps/steps.component.html

@@ -6,7 +6,7 @@
     <p>Change Event: {{stepChangeMsg}}</p>
     <p>Active/Deactive Event for Step 1: {{activeDeactiveStep1Msg}}</p>
     <td-steps (stepChange)="stepChange($event)">
-      <td-step label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [disabled]="disabled" [active]="activeStep1" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
+      <td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
         STEP CONTENT GOES HERE
       </td-step>
       <td-step #step2 label="Required Step" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
@@ -31,7 +31,7 @@
   <md-divider></md-divider>
   <md-card-actions>
     <button md-button color="primary" (click)="toggleDisabled()">Toggle Disable All Steps</button>
-    <button md-button color="primary" (click)="toggleActiveStep1()">Toggle Active Step 1</button>
+    <button md-button color="primary" (click)="step1.toggle()">Toggle Active Step 1</button>
   </md-card-actions>
 </md-card>
 <md-card>
@@ -106,9 +106,10 @@ <h3>Example:</h3>
     <p>HTML:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <td-step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
+        <td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
           ...
           <td-step-actions>
+            <button (click)="step.close()">Close</button>
             ... add button elements for the step content (optional)
           </td-step-actions>
           <td-step-summary>

src/app/components/components/steps/steps.component.ts

@@ -61,21 +61,29 @@ export class StepsDemoComponent {
     description: 'Event emitted when [TdStepComponent] is deactivated.',
     name: 'deactivated?',
     type: 'function()',
+  }, {
+    description: `Toggle active state of [TdStepComponent]. Retuns "true" if successful, else "false".
+                  Can be accessed by referencing element in local variable.`,
+    name: 'toggle',
+    type: 'function()',
+  }, {
+    description: `Opens [TdStepComponent]. Retuns "true" if successful, else "false".
+                  Can be accessed by referencing element in local variable.`,
+    name: 'open',
+    type: 'function()',
+  }, {
+    description: `Closes [TdStepComponent]. Retuns "true" if successful, else "false".
+                  Can be accessed by referencing element in local variable.`,
+    name: 'close',
+    type: 'function()',
   }];
 
   stepChangeMsg: string = 'No change detected yet.';
   activeDeactiveStep1Msg: string = 'No select/deselect detected yet';
-  activeStep1: boolean = false;
   stateStep2: StepState = StepState.Required;
   stateStep3: StepState = StepState.Complete;
   disabled: boolean = false;
 
-  toggleActiveStep1(): void {
-    if (!this.disabled) {
-      this.activeStep1 = !this.activeStep1;
-    }
-  }
-
   toggleRequiredStep2(): void {
     this.stateStep2 = (this.stateStep2 === StepState.Required ? StepState.None : StepState.Required);
   }

src/platform/core/steps/step.component.html

@@ -20,8 +20,8 @@
   <div flex>
     <md-nav-list>
       <a [tabIndex]="disabled? -1 : 0"
-         (keydown.enter)="clickEvent()"
-         (click)="clickEvent()"
+         (keydown.enter)="toggle()"
+         (click)="toggle()"
          md-list-item>
         <div [class.md-disabled]="(!active && !isComplete()) || disabled"
              [class.md-warn]="isRequired() && !disabled"

src/platform/core/steps/step.component.ts

@@ -113,11 +113,28 @@ export class TdStepComponent {
   @Output('deactivated') onDeactivated: EventEmitter<void> = new EventEmitter<void>();
 
   /**
-   * Method executed when [TdStepComponent] is clicked.
+   * Toggle active state of [TdStepComponent]
+   * retuns 'true' if successful, else 'false'.
    */
-  clickEvent(): void {
-    this._setActive(!this._active);
-  };
+  toggle(): boolean {
+    return this._setActive(!this._active);
+  }
+
+  /**
+   * Opens [TdStepComponent]
+   * retuns 'true' if successful, else 'false'.
+   */
+  open(): boolean {
+    return this._setActive(true);
+  }
+
+  /**
+   * Closes [TdStepComponent]
+   * retuns 'true' if successful, else 'false'.
+   */
+  close(): boolean {
+    return this._setActive(false);
+  }
 
   /**
    * Returns 'true' if [state] equals to [StepState.Complete | 'complete'], else 'false'.
@@ -136,10 +153,11 @@ export class TdStepComponent {
   /**
    * Method to change active state internally and emit the [onActivated] event if 'true' or [onDeactivated] 
    * event if 'false'. (Blocked if [disabled] is 'true')
+   * returns true if successfully changed state
    */
-  private _setActive(newActive: boolean): void {
+  private _setActive(newActive: boolean): boolean {
     if (this._disabled) {
-      return;
+      return false;
     }
     if (this._active !== newActive) {
       this._active = newActive;
@@ -148,7 +166,9 @@ export class TdStepComponent {
       } else {
         this._onDeactivated();
       }
+      return true;
     }
+    return false;
   };
 
   private _onActivated(): void {