chore: update examples to match material2 repo (#152)

Author: kara

src/app/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
+
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'autocomplete-overview-example',

src/app/examples/dialog-elements/dialog-elements-example-dialog.html

@@ -0,0 +1,5 @@
+<h1 md-dialog-title>Dialog with elements</h1>
+<div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
+<div md-dialog-actions>
+  <button md-button md-dialog-close>Close</button>
+</div>

src/app/examples/dialog-elements/dialog-elements-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/app/examples/dialog-elements/dialog-elements-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Launch dialog</button>

src/app/examples/dialog-elements/dialog-elements-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-elements-example',
+  templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+  constructor(public dialog: MdDialog) { }
+
+  openDialog() {
+    this.dialog.open(DialogElementsExampleDialog);
+  }
+}
+
+
+@Component({
+  selector: 'dialog-elements-example-dialog',
+  templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }

src/app/examples/example-data.ts

@@ -28,9 +28,7 @@ export class ExampleData {
       }
       this.selectorName = this.indexFilename = `${example}-example`;
 
-      var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
-        return letter.toUpperCase();
-      });
+      let exampleName = example.replace(/(?:^\w|\b\w)/g, letter => letter.toUpperCase());
 
       if (EXAMPLE_COMPONENTS[example].title) {
         this.description = EXAMPLE_COMPONENTS[example].title;

src/app/examples/example-module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MaterialModule} from '@angular/material';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -39,6 +40,10 @@ import {
   DialogResultExampleDialog,
   DialogResultExample
 } from './dialog-result/dialog-result-example';
+import {
+  DialogElementsExampleDialog,
+  DialogElementsExample
+} from './dialog-elements/dialog-elements-example';
 import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
@@ -62,7 +67,6 @@ import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-labe
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SelectOverviewExample} from './select-overview/select-overview-example';
-import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
@@ -102,11 +106,17 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
   },
   'dialog-result': {
-    title: 'Dailog with a result',
+    title: 'Dialog with a result',
     component: DialogResultExample,
     additionalFiles: ['dialog-result-example-dialog.html'],
     selectorName: 'DialogResultExample, DialogResultExampleDialog',
   },
+  'dialog-elements': {
+    title: 'Dialog elements',
+    component: DialogElementsExample,
+    additionalFiles: ['dialog-elements-example-dialog.html'],
+    selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+  },
   'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
   'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
   'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
@@ -145,10 +155,7 @@ export const EXAMPLE_COMPONENTS = {
   'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample},
   'snack-bar-component': {
     title: 'Snack-bar with a custom component',
-    component: SnackBarComponentExample,
-    selectorName: 'SnackBarComponentExample, PizzaPartyComponent',
-    additionalFiles:
-      ['snack-bar-component-example-snack.html', 'snack-bar-component-example-snack.css']
+    component: SnackBarComponentExample
   },
   'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
   'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
@@ -179,6 +186,8 @@ export const EXAMPLE_LIST = [
   DialogOverviewExampleDialog,
   DialogResultExample,
   DialogResultExampleDialog,
+  DialogElementsExample,
+  DialogElementsExampleDialog,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

src/app/examples/grid-list-overview/grid-list-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+md-grid-tile {
+  background: lightblue;
+}

src/app/examples/grid-list-overview/grid-list-overview-example.html

@@ -1,4 +1,4 @@
-<md-grid-list cols="2">
+<md-grid-list cols="2" rowHeight="2:1">
   <md-grid-tile>1</md-grid-tile>
   <md-grid-tile>2</md-grid-tile>
   <md-grid-tile>3</md-grid-tile>

src/app/examples/grid-list-overview/grid-list-overview-example.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 
-
 @Component({
   selector: 'grid-list-overview-example',
+  styleUrls: ['./grid-list-overview-example.css'],
   templateUrl: './grid-list-overview-example.html',
 })
 export class GridListOverviewExample {}

src/app/examples/list-sections/list-sections-example.css

@@ -1,4 +1,3 @@
 .mat-list-icon {
   color: rgba(0,0,0,0.54);
-}
-
+}

src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -1,6 +1,6 @@
 <md-card>
   <md-card-content>
-    <h2 class="example-h2">Progress circle configuration</h2>
+    <h2 class="example-h2">Progress spinner configuration</h2>
 
     <section class="example-section">
       <label class="example-margin">Color:</label>
@@ -41,7 +41,7 @@ <h2 class="example-h2">Result</h2>
 
     <md-progress-spinner
         class="example-margin"
-        [color]="color"
+        [attr.color]="color"
         [mode]="mode"
         [value]="value">
     </md-progress-spinner>

src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -7,7 +7,7 @@ import {Component} from '@angular/core';
   styleUrls: ['./progress-spinner-configurable-example.css'],
 })
 export class ProgressSpinnerConfigurableExample {
-  color = 'praimry';
+  color = 'primary';
   mode = 'determinate';
   value = 50;
 }

src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
+
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'autocomplete-overview-example',

src/assets/plunker/examples/card-fancy/card-fancy-example.css

@@ -3,6 +3,6 @@
 }
 
 .example-header-image {
-  background-image: url('assets/img/examples/shiba1.jpg');
+  background-image: url('../../../assets/img/examples/shiba1.jpg');
   background-size: cover;
 }

src/assets/plunker/examples/dialog-elements/dialog-elements-example-dialog.html

@@ -0,0 +1,5 @@
+<h1 md-dialog-title>Dialog with elements</h1>
+<div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
+<div md-dialog-actions>
+  <button md-button md-dialog-close>Close</button>
+</div>

src/assets/plunker/examples/dialog-elements/dialog-elements-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/plunker/examples/dialog-elements/dialog-elements-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Launch dialog</button>

src/assets/plunker/examples/dialog-elements/dialog-elements-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-elements-example',
+  templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+  constructor(public dialog: MdDialog) { }
+
+  openDialog() {
+    this.dialog.open(DialogElementsExampleDialog);
+  }
+}
+
+
+@Component({
+  selector: 'dialog-elements-example-dialog',
+  templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }

src/assets/plunker/examples/example-data.ts

@@ -28,9 +28,7 @@ export class ExampleData {
       }
       this.selectorName = this.indexFilename = `${example}-example`;
 
-      var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
-        return letter.toUpperCase();
-      });
+      let exampleName = example.replace(/(?:^\w|\b\w)/g, letter => letter.toUpperCase());
 
       if (EXAMPLE_COMPONENTS[example].title) {
         this.description = EXAMPLE_COMPONENTS[example].title;

src/assets/plunker/examples/example-module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MaterialModule} from '@angular/material';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -39,6 +40,10 @@ import {
   DialogResultExampleDialog,
   DialogResultExample
 } from './dialog-result/dialog-result-example';
+import {
+  DialogElementsExampleDialog,
+  DialogElementsExample
+} from './dialog-elements/dialog-elements-example';
 import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
@@ -62,7 +67,6 @@ import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-labe
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SelectOverviewExample} from './select-overview/select-overview-example';
-import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
@@ -102,11 +106,17 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
   },
   'dialog-result': {
-    title: 'Dailog with a result',
+    title: 'Dialog with a result',
     component: DialogResultExample,
     additionalFiles: ['dialog-result-example-dialog.html'],
     selectorName: 'DialogResultExample, DialogResultExampleDialog',
   },
+  'dialog-elements': {
+    title: 'Dialog elements',
+    component: DialogElementsExample,
+    additionalFiles: ['dialog-elements-example-dialog.html'],
+    selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+  },
   'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
   'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
   'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
@@ -176,6 +186,8 @@ export const EXAMPLE_LIST = [
   DialogOverviewExampleDialog,
   DialogResultExample,
   DialogResultExampleDialog,
+  DialogElementsExample,
+  DialogElementsExampleDialog,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+md-grid-tile {
+  background: lightblue;
+}

src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.html

@@ -1,4 +1,4 @@
-<md-grid-list cols="2">
+<md-grid-list cols="2" rowHeight="2:1">
   <md-grid-tile>1</md-grid-tile>
   <md-grid-tile>2</md-grid-tile>
   <md-grid-tile>3</md-grid-tile>

src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 
-
 @Component({
   selector: 'grid-list-overview-example',
+  styleUrls: ['./grid-list-overview-example.css'],
   templateUrl: './grid-list-overview-example.html',
 })
 export class GridListOverviewExample {}

src/assets/plunker/examples/icon-svg-example/icon-svg-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/plunker/examples/icon-svg-example/icon-svg-example.html

@@ -0,0 +1 @@
+<md-icon svgIcon="thumbs-up"></md-icon>

src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MdIconRegistry} from '@angular/material';
+
+
+@Component({
+  selector: 'icon-svg-example',
+  templateUrl: './icon-svg-example.html',
+})
+export class IconSvgExample {
+  constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIcon(
+        'thumbs-up',
+        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
+  }
+}

src/assets/plunker/examples/list-sections/list-sections-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+.mat-list-icon {
+  color: rgba(0,0,0,0.54);
+}

src/assets/plunker/examples/list-sections/list-sections-example.html

@@ -1,14 +1,14 @@
 <md-list>
   <h3 md-subheader>Folders</h3>
   <md-list-item *ngFor="let folder of folders">
-    <md-icon md-list-avatar>folder</md-icon>
+    <md-icon md-list-icon>folder</md-icon>
     <h4 md-line>{{folder.name}}</h4>
     <p md-line> {{folder.updated | date}} </p>
   </md-list-item>
   <md-divider></md-divider>
   <h3 md-subheader>Notes</h3>
   <md-list-item *ngFor="let note of notes">
-    <md-icon md-list-avatar>note</md-icon>
+    <md-icon md-list-icon>note</md-icon>
     <h4 md-line>{{note.name}}</h4>
     <p md-line> {{note.updated | date}} </p>
   </md-list-item>

src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -1,6 +1,6 @@
 <md-card>
   <md-card-content>
-    <h2 class="example-h2">Progress circle configuration</h2>
+    <h2 class="example-h2">Progress spinner configuration</h2>
 
     <section class="example-section">
       <label class="example-margin">Color:</label>
@@ -41,7 +41,7 @@ <h2 class="example-h2">Result</h2>
 
     <md-progress-spinner
         class="example-margin"
-        [color]="color"
+        [attr.color]="color"
         [mode]="mode"
         [value]="value">
     </md-progress-spinner>

src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -7,7 +7,7 @@ import {Component} from '@angular/core';
   styleUrls: ['./progress-spinner-configurable-example.css'],
 })
 export class ProgressSpinnerConfigurableExample {
-  color = 'praimry';
+  color = 'primary';
   mode = 'determinate';
   value = 50;
 }

src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts

@@ -20,6 +20,6 @@ export class SnackBarComponentExample {
 @Component({
   selector: 'snack-bar-component-example-snack',
   templateUrl: './snack-bar-component-example-snack.html',
-  styleUrls: ['./snack-bar-component-example.css'],
+  styleUrls: ['./snack-bar-component-example-snack.css'],
 })
 export class PizzaPartyComponent {}