fix(build): inline templates until offline compilation is available

 - resolves #1

examples/app.html

@@ -10,6 +10,12 @@ <h2>
   </div>
 </md-toolbar>
 
+<md-tabs>
+  <template md-tab>Tab1</template>
+  <template md-tab>Tab2</template>
+  <template md-tab>Tab3</template>
+</md-tabs>
+
 <md-content class="examples" md-scroll-y layout-padding>
 
   <h1 class="examples-title">Getting Started</h1>
@@ -26,7 +32,6 @@ <h1>Components</h1>
   </nav>
 
 
-
   <section *ngFor="#value of meta" [id]="value.id">
     <h1>{{ value.name }}</h1>
     <example *ngFor="#demo of value.examples" [model]="demo"></example>

ng2-material/components/button/button.ts

@@ -7,6 +7,8 @@ import {Ink} from "../../core/util/ink";
 import {Attribute} from "angular2/core";
 
 
+const BUTTON_TEMPLATE = `<span class="md-button-wrapper"><ng-content></ng-content></span>`;
+
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 
 @Component({
@@ -19,8 +21,7 @@ import {Attribute} from "angular2/core";
   },
 })
 @View({
-  templateUrl: 'ng2-material/components/button/button.html',
-  //styleUrls: ['ng2-material/components/button/button.css'],
+  template: BUTTON_TEMPLATE,
   encapsulation: ViewEncapsulation.None,
 })
 export class MdButton {
@@ -72,7 +73,7 @@ export class MdButton {
   },
 })
 @View({
-  templateUrl: 'ng2-material/components/button/button.html',
+  template: BUTTON_TEMPLATE,
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton implements OnChanges {

ng2-material/components/checkbox/checkbox.ts

@@ -19,7 +19,13 @@ import {Input, Output, EventEmitter} from 'angular2/core';
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/checkbox/checkbox.html',
+  template: `
+    <div (click)="toggle($event)">
+      <div class="md-checkbox-container">
+        <div class="md-checkbox-icon"></div>
+      </div>
+      <div class="md-checkbox-label"><ng-content></ng-content></div>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })

ng2-material/components/dialog/dialog.ts

@@ -213,7 +213,9 @@ export class MdDialogConfig {
 })
 @View({
   encapsulation: ViewEncapsulation.None,
-  templateUrl: 'ng2-material/components/dialog/dialog.html',
+  template: `
+    <md-dialog-content></md-dialog-content>
+    <div tabindex="0" (focus)="wrapFocus()"></div>`,
   directives: [forwardRef(() => MdDialogContent)]
 })
 class MdDialogContainer {

ng2-material/components/grid_list/grid_list.ts

@@ -29,7 +29,10 @@ class RowHeightMode {
 
 @Component({selector: 'md-grid-list', inputs: ['cols', 'rowHeight', 'gutterSize']})
 @View({
-  templateUrl: 'ng2-material/components/grid_list/grid_list.html',
+  template: `
+    <div class="md-grid-list">
+      <ng-content></ng-content>
+    </div>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdGridList implements AfterContentChecked {
@@ -226,7 +229,11 @@ export class MdGridList implements AfterContentChecked {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/grid_list/grid_tile.html',
+  template: `
+    <style>@import "ng2-material/components/grid_list/grid-list.css";</style>
+    <figure>
+      <ng-content></ng-content>
+    </figure>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdGridTile implements OnDestroy,

ng2-material/components/list/list.ts

@@ -75,9 +75,11 @@ export class MdList {
   properties: ['wrap']
 })
 @View({
-  templateUrl: 'ng2-material/components/list/list_item.html'
+  template: `
+    <div class="md-no-style md-list-item-inner">
+      <ng-content></ng-content>
+    </div>`
 })
-
 export class MdListItem implements AfterViewInit {
   constructor(private _element: ElementRef) {
   }

ng2-material/components/progress_circular/progress_circular.ts

@@ -3,7 +3,18 @@ import {MdProgressLinear} from '../progress_linear/progress_linear';
 
 @Component({selector: 'md-progress-circular'})
 @View({
-  templateUrl: 'ng2-material/components/progress_circular/progress_circular.html',
+  template: `
+    <div class="md-spinner-wrapper">
+      <div class="md-inner">
+        <div class="md-gap"></div>
+        <div class="md-left">
+          <div class="md-half-circle"></div>
+        </div>
+        <div class="md-right">
+          <div class="md-half-circle"></div>
+        </div>
+      </div>
+    </div>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdProgressCircular extends MdProgressLinear {

ng2-material/components/progress_linear/progress_linear.ts

@@ -24,7 +24,14 @@ class ProgressMode {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/progress_linear/progress_linear.html',
+  template: `
+    <div class="md-progress-linear-container md-ready">
+      <div class="md-progress-linear-dashed"></div>
+      <div class="md-progress-linear-bar md-progress-linear-bar1"
+          [style.transform]="secondaryBarTransform"></div>
+      <div class="md-progress-linear-bar md-progress-linear-bar2"
+          [style.transform]="primaryBarTransform"></div>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })

ng2-material/components/radio/radio_button.ts

@@ -41,7 +41,7 @@ var _uniqueIdCounter: number = 0;
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/radio/radio_group.html',
+  template: `<ng-content></ng-content>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdRadioGroup implements OnChanges {
@@ -220,7 +220,21 @@ export class MdRadioGroup implements OnChanges {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/radio/radio_button.html',
+  template: `
+    <!-- TODO(jelbourn): render the radio on either side of the content -->
+    <label role="radio" class="md-radio-root"
+        [class.md-radio-checked]="checked">
+      <!-- The actual radio part of the control. -->
+      <div class="md-radio-container">
+        <div class="md-radio-off"></div>
+        <div class="md-radio-on"></div>
+      </div>
+
+      <!-- The label for radio control. -->
+      <div class="md-radio-label">
+          <ng-content></ng-content>
+      </div>
+    </label>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })

ng2-material/components/switcher/switch.ts

@@ -16,7 +16,16 @@ import {MdCheckbox} from '../checkbox/checkbox';
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/switcher/switch.html',
+  template: `
+    <div class="md-switch-container">
+      <div class="md-switch-bar"></div>
+      <div class="md-switch-thumb-container">
+        <div class="md-switch-thumb"></div>
+      </div>
+    </div>
+    <div class="md-switch-label">
+      <ng-content></ng-content>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })

ng2-material/components/tabs/tabs.ts

@@ -5,6 +5,7 @@ import {
 import {isPresent} from "angular2/src/facade/lang";
 import {Ink} from "../../core/util/ink";
 import {ViewEncapsulation} from "angular2/core";
+import {NgFor} from "angular2/common";
 
 
 // TODO: behaviors to test
@@ -49,7 +50,32 @@ export class MdTab {
 
 @Component({
   selector: 'md-tabs',
-  templateUrl: 'ng2-material/components/tabs/tabs.html',
+  template: `
+    <md-tabs-wrapper>
+      <md-tab-data></md-tab-data>
+      <md-tabs-canvas role="tablist">
+        <md-pagination-wrapper>
+          <md-tab-item tabindex="-1"
+                       class="md-tab"
+                       (click)="onTabClick(pane,$event)"
+                       [class.md-active]="selected == pane"
+                       [disabled]="pane.disabled"
+                       [style.max-width]="maxTabWidth + 'px'"
+                       *ngFor="#pane of panes"
+                       role="tab">
+            {{pane.label}}
+          </md-tab-item>
+          <md-ink-bar></md-ink-bar>
+        </md-pagination-wrapper>
+      </md-tabs-canvas>
+    </md-tabs-wrapper>
+    <md-tabs-content-wrapper>
+      <md-tab-content role="tabpanel" class="md-active"
+                      [class.md-no-scroll]="mdNoScroll">
+        <ng-content></ng-content>
+      </md-tab-content>
+    </md-tabs-content-wrapper>`,
+  directives: [NgFor],
   encapsulation: ViewEncapsulation.None
 })
 export class MdTabs implements AfterContentInit {
@@ -85,7 +111,12 @@ export class MdTabs implements AfterContentInit {
   }
 
   select(pane: MdTab) {
-    this.panes.toArray().forEach((p: MdTab) => p.active = p == pane);
+    this.panes.toArray().forEach((p: MdTab, index: number) => {
+      p.active = p == pane;
+      if (p.active) {
+        this._selectedIndex = index;
+      }
+    });
   }
 
   onTabClick(pane: MdTab, event?) {