chore: move examples in from docs site repo (#2781)

src/examples/button-overview/button-overview-example.css

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

src/examples/button-overview/button-overview-example.html

@@ -0,0 +1 @@
+<button md-button>Click me!</button>

src/examples/button-overview/button-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-overview-example',
+  templateUrl: './button-overview-example.html',
+})
+export class ButtonOverviewExample {}

src/examples/button-toggle-exclusive/button-toggle-exclusive-example.css

@@ -0,0 +1,3 @@
+.example-selected-value {
+  margin: 15px 0;
+}

src/examples/button-toggle-exclusive/button-toggle-exclusive-example.html

@@ -0,0 +1,15 @@
+<md-button-toggle-group #group="mdButtonToggleGroup">
+  <md-button-toggle value="left">
+    <md-icon>format_align_left</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="center">
+    <md-icon>format_align_center</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="right">
+    <md-icon>format_align_right</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="justify" disabled>
+    <md-icon>format_align_justify</md-icon>
+  </md-button-toggle>
+</md-button-toggle-group>
+<div class="example-selected-value">Selected value: {{group.value}}</div>

src/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-toggle-exclusive-example',
+  templateUrl: './button-toggle-exclusive-example.html',
+  styleUrls: ['./button-toggle-exclusive-example.css'],
+})
+export class ButtonToggleExclusiveExample {}

src/examples/button-toggle-overview/button-toggle-overview-example.css

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

src/examples/button-toggle-overview/button-toggle-overview-example.html

@@ -0,0 +1 @@
+<md-button-toggle>Toggle me!</md-button-toggle>

src/examples/button-toggle-overview/button-toggle-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-toggle-overview-example',
+  templateUrl: './button-toggle-overview-example.html',
+})
+export class ButtonToggleOverviewExample {}

src/examples/button-types/button-types-example.css

@@ -0,0 +1,9 @@
+.example-container {
+  width: 500px;
+}
+
+.example-button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}

src/examples/button-types/button-types-example.html

@@ -0,0 +1,17 @@
+<div class="example-container">
+  <h3>Normal Buttons</h3>
+  <div class="button-row">
+    <button md-button>Flat button</button>
+    <button md-raised-button>Raised button</button>
+    <button md-fab><md-icon>check</md-icon></button>
+    <button md-mini-fab><md-icon>check</md-icon></button>
+  </div>
+
+  <h3>Link Buttons</h3>
+  <div class="example-button-row">
+    <a md-button routerLink=".">Flat button</a>
+    <a md-raised-button routerLink=".">Raised button</a>
+    <a md-fab routerLink="."><md-icon>check</md-icon></a>
+    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
+  </div>
+</div>

src/examples/button-types/button-types-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-types-example',
+  templateUrl: './button-types-example.html',
+  styleUrls: ['./button-types-example.css'],
+})
+export class ButtonTypesExample {}

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

@@ -0,0 +1,8 @@
+.example-card {
+  width: 400px;
+}
+
+.example-header-image {
+  background-image: url('assets/img/examples/shiba1.jpg');
+  background-size: cover;
+}

src/examples/card-fancy/card-fancy-example.html

@@ -0,0 +1,19 @@
+<md-card class="example-card">
+  <md-card-header>
+    <div md-card-avatar class="example-header-image"></div>
+    <md-card-title>Shiba Inu</md-card-title>
+    <md-card-subtitle>Dog Breed</md-card-subtitle>
+  </md-card-header>
+  <img md-card-image src="assets/img/examples/shiba2.jpg">
+  <md-card-content>
+    <p>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+      bred for hunting.
+    </p>
+  </md-card-content>
+  <md-card-actions>
+    <button md-button>LIKE</button>
+    <button md-button>SHARE</button>
+  </md-card-actions>
+</md-card>

src/examples/card-fancy/card-fancy-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'card-fancy-example',
+  templateUrl: './card-fancy-example.html',
+  styleUrls: ['./card-fancy-example.css'],
+})
+export class CardFancyExample {}

src/examples/card-overview/card-overview-example.css

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

src/examples/card-overview/card-overview-example.html

@@ -0,0 +1 @@
+<md-card>Simple card</md-card>

src/examples/card-overview/card-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'card-overview-example',
+  templateUrl: './card-overview-example.html',
+})
+export class CardOverviewExample {}

src/examples/checkbox-configurable/checkbox-configurable-example.css

@@ -0,0 +1,14 @@
+.example-h2 {
+  margin: 10px;
+}
+
+.example-section {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+.example-margin {
+  margin: 0 10px;
+}

src/examples/checkbox-configurable/checkbox-configurable-example.html

@@ -0,0 +1,40 @@
+<md-card>
+  <md-card-content>
+    <h2 class="example-h2">Checkbox configuration</h2>
+
+    <section class="example-section">
+      <md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox>
+      <md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox>
+    </section>
+
+    <section class="example-section">
+      <label class="example-margin">Align:</label>
+      <md-radio-group [(ngModel)]="align">
+        <md-radio-button class="example-margin" value="start">Start</md-radio-button>
+        <md-radio-button class="example-margin" value="end">End</md-radio-button>
+      </md-radio-group>
+    </section>
+
+    <section class="example-section">
+      <md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
+    </section>
+  </md-card-content>
+</md-card>
+
+<md-card class="result">
+  <md-card-content>
+    <h2 class="example-h2">Result</h2>
+
+    <section class="example-section">
+      <md-checkbox
+          class="example-margin"
+          [checked]="checked"
+          [indeterminate]="indeterminate"
+          [align]="align"
+          [disabled]="disabled">
+        I'm a checkbox
+      </md-checkbox>
+    </section>
+  </md-card-content>
+</md-card>
+

src/examples/checkbox-configurable/checkbox-configurable-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'checkbox-configurable-example',
+  templateUrl: './checkbox-configurable-example.html',
+  styleUrls: ['./checkbox-configurable-example.css'],
+})
+export class CheckboxConfigurableExample {
+  checked = false;
+  indeterminate = false;
+  align = 'start';
+  disabled = false;
+}

src/examples/checkbox-overview/checkbox-overview-example.css

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

src/examples/checkbox-overview/checkbox-overview-example.html

@@ -0,0 +1 @@
+<md-checkbox>Check me!</md-checkbox>

src/examples/checkbox-overview/checkbox-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'checkbox-overview-example',
+  templateUrl: './checkbox-overview-example.html',
+})
+export class CheckboxOverviewExample {}

src/examples/chips-overview/chips-overview-example.css

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

src/examples/chips-overview/chips-overview-example.html

@@ -0,0 +1,6 @@
+<md-chip-list>
+  <md-chip>One fish</md-chip>
+  <md-chip>Two fish</md-chip>
+  <md-chip color="primary" selected="true">Primary fish</md-chip>
+  <md-chip color="accent" selected="true">Accent fish</md-chip>
+</md-chip-list>

src/examples/chips-overview/chips-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'chips-overview-example',
+  templateUrl: './chips-overview-example.html',
+})
+export class ChipsOverviewExample {}

src/examples/chips-stacked/chips-stacked-example.css

@@ -0,0 +1,3 @@
+md-chip {
+  max-width: 200px;
+}

src/examples/chips-stacked/chips-stacked-example.html

@@ -0,0 +1,7 @@
+<md-chip-list class="md-chip-list-stacked">
+  <md-chip *ngFor="let chipColor of availableColors"
+      selected="true"
+      color="{{chipColor.color}}">
+    {{chipColor.name}}
+  </md-chip>
+</md-chip-list>

src/examples/chips-stacked/chips-stacked-example.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'chips-stacked-example',
+  templateUrl: './chips-stacked-example.html',
+  styleUrls: ['./chips-stacked-example.css'],
+})
+export class ChipsStackedExample {
+  color: string;
+
+  availableColors = [
+    { name: 'none', color: '' },
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' }
+  ];
+}

src/examples/dialog-overview/dialog-overview-example-dialog.html

@@ -0,0 +1 @@
+<p> Hi, I'm a dialog! </p>

src/examples/dialog-overview/dialog-overview-example.css

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

src/examples/dialog-overview/dialog-overview-example.html

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

src/examples/dialog-overview/dialog-overview-example.ts

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

src/examples/dialog-result/dialog-result-example-dialog.html

@@ -0,0 +1,6 @@
+<h1 md-dialog-title>Dialog</h1>
+<div md-dialog-content>What would you like to do?</div>
+<div md-dialog-actions>
+  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
+  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
+</div>

src/examples/dialog-result/dialog-result-example.css

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

src/examples/dialog-result/dialog-result-example.html

@@ -0,0 +1,2 @@
+<button md-button (click)="openDialog()">Launch dialog</button>
+You chose: {{selectedOption}}

src/examples/dialog-result/dialog-result-example.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {MdDialog, MdDialogRef} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-result-example',
+  templateUrl: './dialog-result-example.html',
+})
+export class DialogResultExample {
+  selectedOption: string;
+
+  constructor(public dialog: MdDialog) {}
+
+  openDialog() {
+    let dialogRef = this.dialog.open(DialogResultExampleDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      this.selectedOption = result;
+    });
+  }
+}
+
+
+@Component({
+  selector: 'dialog-result-example-dialog',
+  templateUrl: './dialog-result-example-dialog.html',
+})
+export class DialogResultExampleDialog {
+  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
+}

src/examples/example-data.ts

@@ -0,0 +1,48 @@
+import {EXAMPLE_COMPONENTS} from './example-module';
+
+
+/**
+ * Example data
+ *   with information about Component name, selector, files used in example, and path to examples
+ */
+export class ExampleData {
+  // TODO: figure out how do we get these variables.
+  description: string = 'Some description for material';
+  // TODO: use real example and delete the example/ folder.
+  examplePath = '/assets/example/';
+  exampleFiles = ['button-demo.html', 'button-demo.scss', 'button-demo.ts'];
+
+  // TODO: extract these variables from example code.
+  selectorName = 'button-demo';
+  indexFilename = 'button-demo';
+  componentName = 'ButtonDemo';
+
+  constructor(example: string) {
+    if (example && EXAMPLE_COMPONENTS[example]) {
+      this.examplePath = `/assets/plunker/examples/${example}/`;
+      // TODO(tinayuangao): Do not hard-code extensions
+      this.exampleFiles = ['html', 'ts', 'css']
+        .map((extension) => `${example}-example.${extension}`);
+      if (EXAMPLE_COMPONENTS[example].additionalFiles) {
+        this.exampleFiles = this.exampleFiles.concat(EXAMPLE_COMPONENTS[example].additionalFiles);
+      }
+      this.selectorName = this.indexFilename = `${example}-example`;
+
+      var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
+        return letter.toUpperCase();
+      });
+
+      if (EXAMPLE_COMPONENTS[example].title) {
+        this.description = EXAMPLE_COMPONENTS[example].title;
+      } else {
+        this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example';
+      }
+
+      if (EXAMPLE_COMPONENTS[example].selectorName) {
+        this.componentName = EXAMPLE_COMPONENTS[example].selectorName;
+      } else {
+        this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example';
+      }
+    }
+  }
+}