From 015392f0ff9558119ba7a13249579342a7a51891 Mon Sep 17 00:00:00 2001
From: Justin DuJardin <justin@dujardinconsulting.com>
Date: Sat, 12 Dec 2015 10:43:59 -0800
Subject: [PATCH] chore: update demos to use unique class names for better
 error reporting

 - error output when compiling templates is better now, so use unique names to be identifiable in the error message.
---
 app.html => examples/app.html                 |  7 +++
 app.scss => examples/app.scss                 |  9 ++--
 app.ts => examples/app.ts                     |  8 ++--
 examples/components/card/basic_usage.ts       |  2 +-
 .../components/card/card_action_buttons.ts    |  2 +-
 examples/components/card/in_card_actions.ts   |  2 +-
 .../progress_circular/basic_usage.html        |  2 +-
 .../progress_circular/basic_usage.ts          |  2 +-
 .../progress_linear/basic_usage.html          |  9 ++--
 .../components/progress_linear/basic_usage.ts |  5 ++-
 examples/components/toolbar/basic_usage.ts    |  2 +-
 ng2-material/all.ts                           | 45 ++++++++++++-------
 ng2-material/components/button/button.ts      |  2 +-
 .../components/grid_list/grid_list.ts         |  2 +-
 14 files changed, 58 insertions(+), 41 deletions(-)
 rename app.html => examples/app.html (90%)
 rename app.scss => examples/app.scss (73%)
 rename app.ts => examples/app.ts (63%)

diff --git a/app.html b/examples/app.html
similarity index 90%
rename from app.html
rename to examples/app.html
index dc9b935a..1a1a135a 100644
--- a/app.html
+++ b/examples/app.html
@@ -21,6 +21,13 @@ <h1>Toolbar</h1>
   </example>
 
 
+  <md-divider></md-divider>
+
+  <h1>Switch</h1>
+  <example name="Basic Usage">
+    <switch-basic-usage></switch-basic-usage>
+  </example>
+
   <md-divider></md-divider>
 
   <h1>Linear Progress Bar</h1>
diff --git a/app.scss b/examples/app.scss
similarity index 73%
rename from app.scss
rename to examples/app.scss
index d484d2d3..87406fed 100644
--- a/app.scss
+++ b/examples/app.scss
@@ -1,7 +1,8 @@
-@import "font/font";
+$md-font-url: '../public/font/';
 
-@import "ng2-material/all";
-@import "examples/example";
+@import "../public/font/font";
+@import "../ng2-material/all";
+@import "example";
 
 demos-app {
   .md-toolbar {
@@ -15,8 +16,6 @@ demos-app {
       font-weight: 300;
       color: md-color($md-primary,900);
     }
-    > md-divider {
-    }
     .card-media {
       background-color: md-color($md-background);
     }
diff --git a/app.ts b/examples/app.ts
similarity index 63%
rename from app.ts
rename to examples/app.ts
index fb150f4f..0b0f19e0 100644
--- a/app.ts
+++ b/examples/app.ts
@@ -1,9 +1,9 @@
 import {Component, View} from 'angular2/core';
 import {bootstrap} from 'angular2/angular2';
-import {MATERIAL_DIRECTIVES} from './ng2-material/all';
+import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
 
-import {DEMO_DIRECTIVES} from './examples/all';
-import Example from './examples/example';
+import {DEMO_DIRECTIVES} from './all';
+import Example from './example';
 
 
 
@@ -11,7 +11,7 @@ import Example from './examples/example';
   selector: 'demos-app'
 })
 @View({
-  templateUrl: 'app.html',
+  templateUrl: 'examples/app.html',
   directives: [MATERIAL_DIRECTIVES, Example, DEMO_DIRECTIVES]
 })
 export class DemosApp {
diff --git a/examples/components/card/basic_usage.ts b/examples/components/card/basic_usage.ts
index 0cca4c32..f51799a7 100644
--- a/examples/components/card/basic_usage.ts
+++ b/examples/components/card/basic_usage.ts
@@ -3,6 +3,6 @@ import {MATERIAL_DIRECTIVES} from '../../base';
 
 @Component({selector: 'card-basic-usage'})
 @View({templateUrl: 'examples/components/card/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
-export default class DemoView {
+export default class CardBasicUsage {
   public imagePath: string = 'public/images/washedout.png';
 }
diff --git a/examples/components/card/card_action_buttons.ts b/examples/components/card/card_action_buttons.ts
index cb7d7c39..1e29ce17 100644
--- a/examples/components/card/card_action_buttons.ts
+++ b/examples/components/card/card_action_buttons.ts
@@ -2,6 +2,6 @@ import {View, Component} from 'angular2/core';
 
 @Component({selector: 'card-action-buttons'})
 @View({templateUrl: 'examples/components/card/card_action_buttons.html'})
-export default class DemoView {
+export default class CardActionButtons {
   public imagePath: string = 'public/images/washedout.png';
 }
diff --git a/examples/components/card/in_card_actions.ts b/examples/components/card/in_card_actions.ts
index 487c7d6b..97c8c783 100644
--- a/examples/components/card/in_card_actions.ts
+++ b/examples/components/card/in_card_actions.ts
@@ -2,6 +2,6 @@ import {View, Component} from 'angular2/core';
 
 @Component({selector: 'card-in-card-actions'})
 @View({templateUrl: 'examples/components/card/in_card_actions.html'})
-export default class DemoView {
+export default class InCardActions {
   public imagePath: string = 'public/images/washedout.png';
 }
diff --git a/examples/components/progress_circular/basic_usage.html b/examples/components/progress_circular/basic_usage.html
index 4f44b85c..933b57f2 100644
--- a/examples/components/progress_circular/basic_usage.html
+++ b/examples/components/progress_circular/basic_usage.html
@@ -35,7 +35,7 @@ <h4>Theming </h4>
   </div>
 
 
-  <hr [ng-class]="{'visible' : activated}">
+  <hr [ngClass]="{'visible' : activated}">
 
   <div id="loaders" layout="row" layout-align="start center">
 
diff --git a/examples/components/progress_circular/basic_usage.ts b/examples/components/progress_circular/basic_usage.ts
index c881f246..3041a029 100644
--- a/examples/components/progress_circular/basic_usage.ts
+++ b/examples/components/progress_circular/basic_usage.ts
@@ -3,7 +3,7 @@ import {MATERIAL_DIRECTIVES} from '../../base';
 
 @Component({selector: 'progress-circular-basic-usage'})
 @View({templateUrl: 'examples/components/progress_circular/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
-export default class DemoView {
+export default class ProgressCircularBasicUsage {
   public imagePath: string = 'public/images/washedout.png';
 
   public modes: string[] = [];
diff --git a/examples/components/progress_linear/basic_usage.html b/examples/components/progress_linear/basic_usage.html
index 4f546ba2..247b3067 100644
--- a/examples/components/progress_linear/basic_usage.html
+++ b/examples/components/progress_linear/basic_usage.html
@@ -34,25 +34,24 @@ <h4 class="md-title">Query</h4>
     use the <b>query</b> indicator:
   </p>
 
-  <div class="container" ng-class="{'visible' : !activated}">
+  <div class="container" [ngClass]="{'visible' : !activated}">
     <md-progress-linear [mode]="modes[1]"></md-progress-linear>
     <div class="bottom-block">
       <span>Loading application libraries...</span>
     </div>
   </div>
 
-  <hr [ng-class]="{'visible' : activated}">
+  <hr [ngClass]="{'visible' : activated}">
 
   <div id="loaders" layout="row" layout-align="start center">
 
     <p>Query and Buffer progress linear indicators: </p>
 
-    <h5>Off</h5>
     <md-switch
         [checked]="activated"
-        (md-on-change)="toggleActivation()"
+        (mdOnChange)="toggleActivation()"
         aria-label="Enable Indicators">
-      <h5>On</h5>
+      <h5 [innerText]="activated ? 'On' : 'Off'"></h5>
     </md-switch>
   </div>
 
diff --git a/examples/components/progress_linear/basic_usage.ts b/examples/components/progress_linear/basic_usage.ts
index 9e83d3b4..94a8ad4f 100644
--- a/examples/components/progress_linear/basic_usage.ts
+++ b/examples/components/progress_linear/basic_usage.ts
@@ -3,7 +3,7 @@ import {MATERIAL_DIRECTIVES} from '../../base';
 
 @Component({selector: 'progress-linear-basic-usage'})
 @View({templateUrl: 'examples/components/progress_linear/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
-export default class DemoView {
+export default class ProgressLinearBasicUsage {
   public modes: string[] = [];
   public mode: string = 'query';
   public activated: boolean = true;
@@ -54,13 +54,14 @@ export default class DemoView {
    */
   toggleActivation() {
     if (!this.activated) {
-      this.modes = [];
+      this.modes = [null,null,null,null,null];
     }
     if (this.activated) {
       this._j = this._counter = 0;
       this.determinateValue = 30;
       this.determinateValue2 = 30;
     }
+    this.activated = !this.activated;
   };
 
 }
diff --git a/examples/components/toolbar/basic_usage.ts b/examples/components/toolbar/basic_usage.ts
index 1b9561dc..a1bec7d7 100644
--- a/examples/components/toolbar/basic_usage.ts
+++ b/examples/components/toolbar/basic_usage.ts
@@ -3,5 +3,5 @@ import {MATERIAL_DIRECTIVES} from '../../base';
 
 @Component({selector: 'toolbar-basic-usage'})
 @View({templateUrl: 'examples/components/toolbar/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
-export default class DemoView {
+export default class ToolbarBasicUsage {
 }
diff --git a/ng2-material/all.ts b/ng2-material/all.ts
index e4c342d7..45d43d24 100644
--- a/ng2-material/all.ts
+++ b/ng2-material/all.ts
@@ -1,18 +1,46 @@
 import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
 
 import {MdAnchor, MdButton} from './components/button/button';
+export * from './components/button/button';
+
 import {MdCheckbox} from './components/checkbox/checkbox';
+export * from './components/checkbox/checkbox';
+
 import {MdContent} from './components/content/content';
+export * from './components/content/content';
+
+export * from './components/dialog/dialog';
+
 import {MdDivider} from './components/divider/divider';
+export * from './components/divider/divider';
+
 import {MdGridList, MdGridTile} from './components/grid_list/grid_list';
+export * from './components/grid_list/grid_list';
+
 import {MdIcon} from './components/icon/icon';
+export * from './components/icon/icon';
+
 import {MdInput, MdInputContainer} from './components/input/input';
+export * from './components/input/input';
+
 import {MdList, MdListItem} from './components/list/list';
+export * from './components/list/list';
+
 import {MdProgressLinear} from './components/progress_linear/progress_linear';
+export * from './components/progress_linear/progress_linear';
+
 import {MdProgressCircular} from './components/progress_circular/progress_circular';
+export * from './components/progress_circular/progress_circular';
+
 import {MdRadioButton, MdRadioGroup} from './components/radio/radio_button';
+export * from './components/radio/radio_button';
+export * from './components/radio/radio_dispatcher';
+
 import {MdSwitch} from './components/switcher/switch';
+export * from './components/switcher/switch';
+
 import {MdToolbar} from './components/toolbar/toolbar';
+export * from './components/toolbar/toolbar';
 
 /**
  * Collection of Material Design component directives.
@@ -32,20 +60,3 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
   MdSwitch,
   MdToolbar
 ]);
-
-// Re-export all components
-export * from './components/button/button';
-export * from './components/checkbox/checkbox';
-export * from './components/content/content';
-export * from './components/dialog/dialog';
-export * from './components/divider/divider';
-export * from './components/grid_list/grid_list';
-export * from './components/icon/icon';
-export * from './components/input/input';
-export * from './components/list/list';
-export * from './components/progress_linear/progress_linear';
-export * from './components/progress_circular/progress_circular';
-export * from './components/radio/radio_button';
-export * from './components/radio/radio_dispatcher';
-export * from './components/switcher/switch';
-export * from './components/toolbar/toolbar';
diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts
index aeffc660..5435099c 100644
--- a/ng2-material/components/button/button.ts
+++ b/ng2-material/components/button/button.ts
@@ -18,7 +18,7 @@ import {isPresent} from 'angular2/src/facade/lang';
 })
 @View({
   templateUrl: 'ng2-material/components/button/button.html',
-  styleUrls: ['ng2-material/components/button/button.css'],
+  //styleUrls: ['ng2-material/components/button/button.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdButton {
diff --git a/ng2-material/components/grid_list/grid_list.ts b/ng2-material/components/grid_list/grid_list.ts
index 3a3c81ae..d679f509 100644
--- a/ng2-material/components/grid_list/grid_list.ts
+++ b/ng2-material/components/grid_list/grid_list.ts
@@ -418,7 +418,7 @@ class Position {
 
 
 /** Simple data structure for style values to be applied to a tile. */
-class TileStyle {
+export class TileStyle {
   height: string;
   width: string;
   top: string;