feature(stepper): horizontal stepper (#95)

* first draft of re-implementation of td-steps to change between modes

* updated demo/docs with draft

* added stand alone step example

* made step-header a dummy component

* returned label/sublabel inputs and added ripple to step-header

* updated doc blocks in header

* Added dummy step-body component

* updated body docblocks

* added portal directives for content, summary and actions + removed mode from step

* updated doc blocks

* removed multiple attribute and added horizontal vs vertical layout in steps

* abstracted code (first pass) for steps

* moved files into folders

* missed compilation errors

* added validation to check if td-step has td-steps as parent

* added validation to check if td-steps has td-step children

* fix lint errors

* updated stepper in layouts with breaking changes

* updated demo and added responsive demo

* made demo better with 3 botton toggles

* updated docs with breaking changes

* added comment on td-step-content

* changes validation message

* update(docs): stepper step 1 active & better content

* update(docs): vertical stepper by default

* update(stepper): use material2 theme

- increase warn icon size
- update horizontal line position

* update(stepper): material2 theme

- remove focus/active outline

* added labels to loading group buttons to be inline with stepper buttons

* disabled hover/focus background change when step is disabled

src/app/components/components/loading/loading.component.html

@@ -5,12 +5,11 @@
   <md-card-content>
     <div layout="row" layout-align="start center" flex>
       <md-button-toggle-group name="mode" [(ngModel)]="determinate" (click)="modeChange()">
-        <md-button-toggle md-tooltip="Indeterminate" [value]="0"><md-icon>timer_off</md-icon></md-button-toggle>
-        <md-button-toggle md-tooltip="Determinate" [value]="1"><md-icon>timer</md-icon></md-button-toggle>
+        <md-button-toggle md-tooltip="Indeterminate Loading" [value]="0"><md-icon>timer_off</md-icon> Indeterminate</md-button-toggle>
+        <md-button-toggle md-tooltip="Determinate Loading" [value]="1"><md-icon>timer</md-icon> Determinate</md-button-toggle>
       </md-button-toggle-group>
-      <span flex="5"></span>
-      <span>Loading Registered: {{replaceRegistered}} times</span>
     </div>
+    <p>Loading Registered: {{replaceRegistered}} times</p>
     <div *ngIf="!determinate">
       <h3>Indeterminate Mode</h3>
       <p>Circular Type</p>

src/app/components/components/media/media.component.ts

@@ -28,7 +28,7 @@ export class MediaDemoComponent implements OnInit, OnDestroy {
     query: 'md',
     value: false,
   }, {
-    query: 'gt-gm',
+    query: 'gt-md',
     value: false,
   }, {
     query: 'lg',

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

@@ -3,28 +3,42 @@
   <md-card-subtitle>A sequence of logical & numbered steps</md-card-subtitle>
   <md-divider></md-divider>
   <md-card-content>
+    <div layout="row" layout-align="start center">
+      <md-button-toggle-group (change)="modeChange()" name="mode" [(ngModel)]="mode">
+        <md-button-toggle md-tooltip="Vertical Stepper" [value]="0"><md-icon>swap_vert</md-icon> Vertical</md-button-toggle>
+        <md-button-toggle md-tooltip="Horizontal Stepper" [value]="1"><md-icon>swap_horiz</md-icon> Horizontal</md-button-toggle>
+        <md-button-toggle md-tooltip="Responsive (changes from horizontal to vertical)" [value]="2"><md-icon>devices</md-icon> Responsive (gt-sm)</md-button-toggle>
+      </md-button-toggle-group>
+    </div>
     <p>Change Event: {{stepChangeMsg}}</p>
     <p>Active/Deactive Event for Step 1: {{activeDeactiveStep1Msg}}</p>
-    <td-steps (stepChange)="stepChange($event)">
-      <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
+    <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
+    <td-steps (stepChange)="stepChange($event)" [mode]="horizontal ? 'horizontal' : 'vertical'">
+      <td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [active]="true" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
+        <template td-step-content>
+          Include any content you like for an active stepper 
+        </template>
       </td-step>
-      <td-step #step2 label="Required Step" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
-        STEP CONTENT GOES HERE  
-        <td-step-actions>
+      <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
+        <template td-step-content>
+          This step is required!
+        </template>
+        <template td-step-actions>
           <button md-raised-button color="primary" (click)="toggleRequiredStep2()">Toggle Require</button>
           <button md-button (click)="step2.active = false">Cancel</button>
-        </td-step-actions>
+        </template>
       </td-step>
       <td-step #step3 label="Complete State" sublabel="Toggle between active and inactive while in complete state." [state]="stateStep3" [disabled]="disabled">
-        STEP CONTENT GOES HERE  
-        <td-step-actions>
+        <template td-step-content>
+          Mark this step complete and get a summary
+        </template>
+        <template td-step-summary>
+          Use an optional step summary to summarize the info in this step
+        </template>
+        <template td-step-actions>
           <button md-raised-button color="primary" (click)="toggleCompleteStep3()">Toggle Complete</button>
           <button md-button (click)="step3.active = false">Cancel</button>
-        </td-step-actions>
-        <td-step-summary>
-          STEP SUMMARY GOES HERE
-        </td-step-summary>
+        </template>
       </td-step>
     </td-steps>
   </md-card-content>
@@ -56,7 +70,7 @@ <h3>Example:</h3>
     <p>HTML:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <td-steps (stepChange)="change($event)" multiple>
+        <td-steps (stepChange)="change($event)" mode="'vertical'|'horizontal'">
           <td-step>
             ...
           </td-step>
@@ -121,14 +135,16 @@ <h3>Example:</h3>
     <td-highlight lang="html">
       <![CDATA[
         <td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
-          ...
-          <td-step-actions>
+          <template td-step-content>
+            ... add content that will be shown when the step is "active"
+          </template>
+          <template td-step-actions>
             <button (click)="step.close()">Close</button>
             ... add button elements for the step content (optional)
-          </td-step-actions>
-          <td-step-summary>
+          </template>
+          <template td-step-summary>
             ... add summary that will be shown when step in is "complete" state (optional)
-          </td-step-summary>
+          </template>
         </td-step>        
       ]]>
     </td-highlight>

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

@@ -1,23 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
 
-import { StepState, IStepChangeEvent } from '../../../../platform/core';
+import { StepState, IStepChangeEvent, TdMediaService } from '../../../../platform/core';
 
 @Component({
   selector: 'steps-demo',
   styleUrls: [ 'steps.component.scss' ],
   templateUrl: 'steps.component.html',
 })
-export class StepsDemoComponent {
+export class StepsDemoComponent implements OnInit, OnDestroy {
 
   stepsAttrs: Object[] = [{
     description: `Method to be executed when [onStepChange] event is emitted.
                   Emits an [IStepChangeEvent] implemented object.`,
     name: 'stepChange?',
     type: 'function($event)',
   }, {
-    description: 'Defines if there can be one or multiple [TdStepComponent] elements active at the same time.',
-    name: 'multiple?',
-    type: 'boolean',
+    description: 'Defines if the mode of the [TdStepsComponent].  Defaults to [StepMode.Vertical | "vertical"]',
+    name: 'mode?',
+    type: 'StepMode or ["vertical" | "horizontal"]',
   }];
 
   stepAttrs: Object[] = [{
@@ -65,12 +66,48 @@ export class StepsDemoComponent {
     type: 'function()',
   }];
 
+  querySubscription: Subscription;
+  mode: number = 0;
+  horizontal: boolean = true;
+  isScreenGtSm: boolean = false;
   stepChangeMsg: string = 'No change detected yet.';
   activeDeactiveStep1Msg: string = 'No select/deselect detected yet';
   stateStep2: StepState = StepState.Required;
   stateStep3: StepState = StepState.Complete;
   disabled: boolean = false;
 
+  constructor(private _mediaService: TdMediaService, private _ngZone: NgZone) {
+  }
+
+  ngOnInit(): void {
+    this.watchScreen();
+  }
+  ngOnDestroy(): void {
+    this.querySubscription.unsubscribe();
+  }
+
+  watchScreen(): void {
+    this._ngZone.run(() => {
+      this.isScreenGtSm = this._mediaService.query('gt-sm');
+    });
+    this.querySubscription = this._mediaService.registerQuery('gt-sm').subscribe((matches: boolean) => {
+      this._ngZone.run(() => {
+        this.isScreenGtSm = matches;
+        if (this.mode === 2) {
+          this.horizontal = matches;
+        }
+      });
+    });
+  }
+
+  modeChange(): void {
+    if (this.mode === 2) {
+      this.horizontal = this.isScreenGtSm;
+    } else {
+      this.horizontal = this.mode === 1;
+    }
+  }
+
   toggleRequiredStep2(): void {
     this.stateStep2 = (this.stateStep2 === StepState.Required ? StepState.None : StepState.Required);
   }

src/app/components/layouts/card-over/card-over.component.html

@@ -6,92 +6,100 @@
     <md-card-content>
       <div layout-gt-md="row">
         <div flex-gt-md="45">
-          <td-steps multiple>
+          <td-steps>
             <td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
-              <md-list>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
-                  <p md-line>The wrapper of your entire layout</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>#layout</code></h3>
-                  <p md-line>The ID and local reference of your sidenav</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>title?: string</code></h3>
-                  <p md-line>The title of your sidenav</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>logo?: string</code></h3>
-                  <p md-line>The path to your sidenav logo</p>
-                </md-list-item>
-                <md-divider></md-divider>
-              </md-list>
+              <template td-step-content>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
+                    <p md-line>The wrapper of your entire layout</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>#layout</code></h3>
+                    <p md-line>The ID and local reference of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>title?: string</code></h3>
+                    <p md-line>The title of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your sidenav logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
+              </template>
             </td-step>
-            <td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
-              <md-list>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
-                  <p md-line>The menu items wrapper</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
-                  <p md-line>Loops over the routes from your Class</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
-                  <p md-line>The SVG or font icon</p>
-                </md-list-item>
-                <md-divider></md-divider>
-              </md-list>
+            <td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
+              <template td-step-content>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
+                    <p md-line>The menu items wrapper</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
+                    <p md-line>Loops over the routes from your Class</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
+                    <p md-line>The SVG or font icon</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
+              </template>
             </td-step>
-            <td-step [active]="true" label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
-              <md-list>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
-                  <p md-line>Builds the top toolbar and content area</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>title?: string</code></h3>
-                  <p md-line>The title of your toolbar</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>logo?: string</code></h3>
-                  <p md-line>The path to your toolbar logo</p>
-                </md-list-item>
-                <md-divider></md-divider>
-              </md-list>
+            <td-step label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
+              <template td-step-content>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
+                    <p md-line>Builds the top toolbar and content area</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>title?: string</code></h3>
+                    <p md-line>The title of your toolbar</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your toolbar logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
+              </template>
             </td-step>
-            <td-step [active]="true" label="Step 4: td-layout-card-over" sublabel="the main card content area">
-              <md-list>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
-                  <p md-line>Builds the card and content area</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>title?: string</code></h3>
-                  <p md-line>The card title</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code>subtitle?: string</code></h3>
-                  <p md-line>The card subtitle</p>
-                </md-list-item>
-                <md-divider></md-divider>
-                <md-list-item>
-                  <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
-                  <p md-line>Loads html for each route (view)</p>
-                </md-list-item>
-                <md-divider></md-divider>
-              </md-list>
+            <td-step label="Step 4: td-layout-card-over" sublabel="the main card content area">
+              <template td-step-content>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
+                    <p md-line>Builds the card and content area</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>title?: string</code></h3>
+                    <p md-line>The card title</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>subtitle?: string</code></h3>
+                    <p md-line>The card subtitle</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
+                    <p md-line>Loads html for each route (view)</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
+              </template>
             </td-step>
           </td-steps>
         </div>