Fix plunkers and add tabs to the site (#70)

* Tab example

* Fix plunker, update examples

* Add example sources to assets/ so that they can be served directly for
plunker

* Footer font-size descrease

Author: jelbourn

package.json

@@ -16,14 +16,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
     "@angular/material": "angular/material2-builds",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
     "@angular/router": "~3.2.3",
     "core-js": "^2.4.1",
     "fs-extra": "^1.0.0",
@@ -34,7 +34,7 @@
     "zone.js": "^0.7.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.0",
+    "@angular/compiler-cli": "^2.4.1",
     "@types/jasmine": "^2.2.30",
     "@types/node": "^6.0.42",
     "angular-cli": "1.0.0-beta.24",

src/app/examples/example-module.ts

@@ -147,7 +147,7 @@ export const EXAMPLE_COMPONENTS = {
   },
   'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
   'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
-  'tabs-template-label': {title: 'Tabs with a label template', component: TabsTemplateLabelExample},
+  'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample},
   'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample},
   'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample},
   'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample},

src/app/examples/slider-configurable/slider-configurable-example.ts

@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
-  selector: 'configurable-slider-example',
+  selector: 'slider-configurable-example',
   templateUrl: './slider-configurable-example.html',
   styleUrls: ['./slider-configurable-example.css'],
   encapsulation: ViewEncapsulation.None,

src/app/examples/tabs-template-label/tabs-template-label-example.html

@@ -1,9 +1 @@
-<md-tab-group>
-  <md-tab>
-    <template md-tab-label>
-      I'm a <em>fancy</em> tab <md-icon>sentiment_very_satisfied</md-icon>
-    </template>
-    Content 1
-  </md-tab>
-  <md-tab label="Tab 2">Content 2</md-tab>
-</md-tab-group>
+More examples coming soon!

src/app/shared/documentation-items/documentation-items.ts

@@ -44,6 +44,7 @@ const DOCS = [
       {id: 'list', name: 'List', examples: ['list-sections']},
       {id: 'grid-list', name: 'Grid list', examples: ['grid-list-dynamic']},
       {id: 'card', name: 'Card', examples: ['card-fancy']},
+      {id: 'tabs', name: 'Tabs', examples: ['tabs-template-label']},
     ]
   },
   {

src/app/shared/footer/footer.scss

@@ -1,5 +1,6 @@
 .docs-footer {
   margin-top: 40px;
-  padding: 20px;
+  padding: 15px;
   text-align: center;
+  font-size: 12px;
 }

src/assets/documents/overview/tabs.html

@@ -4,7 +4,7 @@
 of the header, pagination controls appear to let the user scroll left and right across the labels.</p>
 <p>The active tab may be set using the <code>selectedIndex</code> input or when the user selects one of the
 tab labels in the header.</p>
-<div material-docs-example="tab-overview"></div>
+<div material-docs-example="tabs-overview"></div>
 <h3 id="events">Events</h3>
 <p>The <code>selectChange</code> output event is emitted when the active tab changes.  </p>
 <p>The <code>focusChange</code> output event is emitted when the user puts focus on any of the tab labels in

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

@@ -3,6 +3,6 @@
 }
 
 <span class="hljs-selector-class">.example-header-image</span> {
-  <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'shiba1.jpg'</span>);
+  <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'assets/img/examples/shiba1.jpg'</span>);
   <span class="hljs-attribute">background-size</span>: cover;
 }

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

@@ -4,7 +4,7 @@
     <span class="hljs-tag">&lt;<span class="hljs-name">md-card-title</span>&gt;</span>Shiba Inu<span class="hljs-tag">&lt;/<span class="hljs-name">md-card-title</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">md-card-subtitle</span>&gt;</span>Dog Breed<span class="hljs-tag">&lt;/<span class="hljs-name">md-card-subtitle</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">md-card-header</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">md-card-image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"shiba2.jpg"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">md-card-image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/examples/shiba2.jpg"</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">md-card-content</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

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

@@ -1 +1 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">md-icon</span> <span class="hljs-attr">svgSrc</span>=<span class="hljs-string">"ic_3d_rotation_black_24px.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-icon</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">md-icon</span> <span class="hljs-attr">svgIcon</span>=<span class="hljs-string">"thumbs-up"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-icon</span>&gt;</span>

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

@@ -1,8 +1,16 @@
 <span class="hljs-keyword">import</span> {Component} from <span class="hljs-string">'@angular/core'</span>;
+<span class="hljs-keyword">import</span> {DomSanitizer} from <span class="hljs-string">'@angular/platform-browser'</span>;
+<span class="hljs-keyword">import</span> {MdIconRegistry} from <span class="hljs-string">'@angular/material'</span>;
 
 
 <span class="hljs-meta">@Component</span>({
   selector: <span class="hljs-string">'icon-svg-example'</span>,
   templateUrl: <span class="hljs-string">'./icon-svg-example.html'</span>,
 })
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> IconSvgExample {}
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> IconSvgExample {
+  <span class="hljs-keyword">constructor</span>(<span class="hljs-params">iconRegistry: MdIconRegistry, sanitizer: DomSanitizer</span>) {
+    iconRegistry.addSvgIcon(
+        <span class="hljs-string">'thumbs-up'</span>,
+        sanitizer.bypassSecurityTrustResourceUrl(<span class="hljs-string">'assets/img/examples/thumbup-icon.svg'</span>));
+  }
+}

src/assets/examples/slider-configurable-example-ts.html

@@ -2,7 +2,7 @@
 
 
 <span class="hljs-meta">@Component</span>({
-  selector: <span class="hljs-string">'configurable-slider-example'</span>,
+  selector: <span class="hljs-string">'slider-configurable-example'</span>,
   templateUrl: <span class="hljs-string">'./slider-configurable-example.html'</span>,
   styleUrls: [<span class="hljs-string">'./slider-configurable-example.css'</span>],
   encapsulation: ViewEncapsulation.None,

src/assets/examples/tabs-template-label-example-html.html

@@ -1,9 +1 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">md-tab-group</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">md-tab</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">md-tab-label</span>&gt;</span>
-      I'm a <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>fancy<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> tab <span class="hljs-tag">&lt;<span class="hljs-name">md-icon</span>&gt;</span>sentiment_very_satisfied<span class="hljs-tag">&lt;/<span class="hljs-name">md-icon</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
-    Content 1
-  <span class="hljs-tag">&lt;/<span class="hljs-name">md-tab</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">md-tab</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span>Content 2<span class="hljs-tag">&lt;/<span class="hljs-name">md-tab</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">md-tab-group</span>&gt;</span>
+More examples coming soon!

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

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

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

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

src/assets/plunker/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/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.css

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

src/assets/plunker/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/assets/plunker/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/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.css

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

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

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

src/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/examples/card-overview/card-overview-example.css

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

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

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

src/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/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/assets/plunker/examples/checkbox-overview/checkbox-overview-example.css

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

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

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

src/assets/plunker/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/assets/plunker/examples/chips-overview/chips-overview-example.css

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

src/assets/plunker/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/assets/plunker/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/assets/plunker/examples/chips-stacked/chips-stacked-example.css

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