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

@@ -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>

app.scss → 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);
     }

app.ts → examples/app.ts

@@ -1,17 +1,17 @@
 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';
 
 
 
 @Component({
   selector: 'demos-app'
 })
 @View({
-  templateUrl: 'app.html',
+  templateUrl: 'examples/app.html',
   directives: [MATERIAL_DIRECTIVES, Example, DEMO_DIRECTIVES]
 })
 export class DemosApp {

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';
 }

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';
 }

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';
 }

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">
 

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[] = [];

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>
 

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

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 {
 }

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';

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 {

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;