From a766c20d650151d4815e1bfd515378a1bc073345 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Wed, 4 Nov 2015 19:37:41 -0600
Subject: [PATCH] refactor(demos): forms and input

---
 .../cards/advanced-map/pages.ts               | 13 +++
 .../template.html}                            |  0
 .../cards/advanced-social/pages.ts            | 13 +++
 .../template.html}                            |  0
 .../cards/advanced-weather/pages.ts           | 13 +++
 .../template.html}                            |  0
 .../{cards-background => background}/pages.ts |  2 +-
 .../template.html}                            |  0
 demos/component-docs/cards/basic/pages.ts     | 13 +++
 .../{cards-basic.html => basic/template.html} |  0
 .../cards/cards-background/main.html          | 36 --------
 demos/component-docs/cards/cards.ts           | 84 ++---------------
 demos/component-docs/cards/header/pages.ts    | 13 +++
 .../template.html}                            |  0
 demos/component-docs/cards/image/pages.ts     | 13 +++
 .../{cards-image.html => image/template.html} |  0
 demos/component-docs/cards/list/pages.ts      | 13 +++
 .../{cards-list.html => list/template.html}   |  0
 demos/component-docs/forms/forms.ts           | 91 -------------------
 demos/component-docs/helpers.ts               | 45 ++++-----
 demos/component-docs/icons/basic/pages.ts     | 13 +++
 .../icons/{icons.html => basic/template.html} |  0
 demos/component-docs/icons/icons.ts           | 14 +--
 demos/component-docs/index.ts                 |  4 +-
 demos/component-docs/inputs/checkbox/pages.ts | 12 +++
 .../{checkbox.html => checkbox/template.html} |  0
 demos/component-docs/inputs/inputs.ts         | 53 +----------
 demos/component-docs/inputs/radio/pages.ts    | 12 +++
 .../{radio.html => radio/template.html}       |  0
 demos/component-docs/inputs/range/pages.ts    | 12 +++
 .../{range.html => range/template.html}       |  0
 demos/component-docs/inputs/select/pages.ts   | 12 +++
 .../{select.html => select/template.html}     |  0
 demos/component-docs/inputs/switch/pages.ts   | 12 +++
 .../{switch.html => switch/template.html}     |  0
 demos/component-docs/labels/basic/pages.ts    | 24 +++++
 .../forms.html => labels/basic/template.html} |  0
 .../labels/fixed-inline/pages.ts              | 13 +++
 .../fixed-inline/template.html}               |  0
 demos/component-docs/labels/floating/pages.ts | 13 +++
 .../floating/template.html}                   |  0
 demos/component-docs/labels/inline/pages.ts   | 13 +++
 .../inline/template.html}                     |  0
 demos/component-docs/labels/inset/pages.ts    | 13 +++
 .../inset.html => labels/inset/template.html} |  0
 demos/component-docs/labels/labels.ts         |  7 ++
 .../labels/placeholder/pages.ts               | 13 +++
 .../placeholder/template.html}                |  0
 demos/component-docs/labels/stacked/pages.ts  | 13 +++
 .../stacked/template.html}                    |  0
 50 files changed, 306 insertions(+), 296 deletions(-)
 create mode 100644 demos/component-docs/cards/advanced-map/pages.ts
 rename demos/component-docs/cards/{cards-advanced-map.html => advanced-map/template.html} (100%)
 create mode 100644 demos/component-docs/cards/advanced-social/pages.ts
 rename demos/component-docs/cards/{cards-advanced-social.html => advanced-social/template.html} (100%)
 create mode 100644 demos/component-docs/cards/advanced-weather/pages.ts
 rename demos/component-docs/cards/{cards-advanced-weather.html => advanced-weather/template.html} (100%)
 rename demos/component-docs/cards/{cards-background => background}/pages.ts (82%)
 rename demos/component-docs/cards/{cards-background.html => background/template.html} (100%)
 create mode 100644 demos/component-docs/cards/basic/pages.ts
 rename demos/component-docs/cards/{cards-basic.html => basic/template.html} (100%)
 delete mode 100644 demos/component-docs/cards/cards-background/main.html
 create mode 100644 demos/component-docs/cards/header/pages.ts
 rename demos/component-docs/cards/{cards-header.html => header/template.html} (100%)
 create mode 100644 demos/component-docs/cards/image/pages.ts
 rename demos/component-docs/cards/{cards-image.html => image/template.html} (100%)
 create mode 100644 demos/component-docs/cards/list/pages.ts
 rename demos/component-docs/cards/{cards-list.html => list/template.html} (100%)
 delete mode 100644 demos/component-docs/forms/forms.ts
 create mode 100644 demos/component-docs/icons/basic/pages.ts
 rename demos/component-docs/icons/{icons.html => basic/template.html} (100%)
 create mode 100644 demos/component-docs/inputs/checkbox/pages.ts
 rename demos/component-docs/inputs/{checkbox.html => checkbox/template.html} (100%)
 create mode 100644 demos/component-docs/inputs/radio/pages.ts
 rename demos/component-docs/inputs/{radio.html => radio/template.html} (100%)
 create mode 100644 demos/component-docs/inputs/range/pages.ts
 rename demos/component-docs/inputs/{range.html => range/template.html} (100%)
 create mode 100644 demos/component-docs/inputs/select/pages.ts
 rename demos/component-docs/inputs/{select.html => select/template.html} (100%)
 create mode 100644 demos/component-docs/inputs/switch/pages.ts
 rename demos/component-docs/inputs/{switch.html => switch/template.html} (100%)
 create mode 100644 demos/component-docs/labels/basic/pages.ts
 rename demos/component-docs/{forms/forms.html => labels/basic/template.html} (100%)
 create mode 100644 demos/component-docs/labels/fixed-inline/pages.ts
 rename demos/component-docs/{forms/fixed-inline.html => labels/fixed-inline/template.html} (100%)
 create mode 100644 demos/component-docs/labels/floating/pages.ts
 rename demos/component-docs/{forms/floating.html => labels/floating/template.html} (100%)
 create mode 100644 demos/component-docs/labels/inline/pages.ts
 rename demos/component-docs/{forms/inline.html => labels/inline/template.html} (100%)
 create mode 100644 demos/component-docs/labels/inset/pages.ts
 rename demos/component-docs/{forms/inset.html => labels/inset/template.html} (100%)
 create mode 100644 demos/component-docs/labels/labels.ts
 create mode 100644 demos/component-docs/labels/placeholder/pages.ts
 rename demos/component-docs/{forms/placeholder.html => labels/placeholder/template.html} (100%)
 create mode 100644 demos/component-docs/labels/stacked/pages.ts
 rename demos/component-docs/{forms/stacked.html => labels/stacked/template.html} (100%)

diff --git a/demos/component-docs/cards/advanced-map/pages.ts b/demos/component-docs/cards/advanced-map/pages.ts
new file mode 100644
index 0000000000..ba0ec22225
--- /dev/null
+++ b/demos/component-docs/cards/advanced-map/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/advanced-map/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class AdvancedMapPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/cards/cards-advanced-map.html b/demos/component-docs/cards/advanced-map/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-advanced-map.html
rename to demos/component-docs/cards/advanced-map/template.html
diff --git a/demos/component-docs/cards/advanced-social/pages.ts b/demos/component-docs/cards/advanced-social/pages.ts
new file mode 100644
index 0000000000..df80216266
--- /dev/null
+++ b/demos/component-docs/cards/advanced-social/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/advanced-social/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class AdvancedSocialPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/cards-advanced-social.html b/demos/component-docs/cards/advanced-social/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-advanced-social.html
rename to demos/component-docs/cards/advanced-social/template.html
diff --git a/demos/component-docs/cards/advanced-weather/pages.ts b/demos/component-docs/cards/advanced-weather/pages.ts
new file mode 100644
index 0000000000..98626d6a40
--- /dev/null
+++ b/demos/component-docs/cards/advanced-weather/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/advanced-weather/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class AdvancedWeatherPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/cards/cards-advanced-weather.html b/demos/component-docs/cards/advanced-weather/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-advanced-weather.html
rename to demos/component-docs/cards/advanced-weather/template.html
diff --git a/demos/component-docs/cards/cards-background/pages.ts b/demos/component-docs/cards/background/pages.ts
similarity index 82%
rename from demos/component-docs/cards/cards-background/pages.ts
rename to demos/component-docs/cards/background/pages.ts
index 63d8189aba..8dd1490460 100644
--- a/demos/component-docs/cards/cards-background/pages.ts
+++ b/demos/component-docs/cards/background/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'cards/cards-background/main.html',
+  templateUrl: 'cards/background/template.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class BackgroundPage {
diff --git a/demos/component-docs/cards/cards-background.html b/demos/component-docs/cards/background/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-background.html
rename to demos/component-docs/cards/background/template.html
diff --git a/demos/component-docs/cards/basic/pages.ts b/demos/component-docs/cards/basic/pages.ts
new file mode 100644
index 0000000000..c6bc2ad674
--- /dev/null
+++ b/demos/component-docs/cards/basic/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/basic/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/cards-basic.html b/demos/component-docs/cards/basic/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-basic.html
rename to demos/component-docs/cards/basic/template.html
diff --git a/demos/component-docs/cards/cards-background/main.html b/demos/component-docs/cards/cards-background/main.html
deleted file mode 100644
index 91f0e4e9f4..0000000000
--- a/demos/component-docs/cards/cards-background/main.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
-  <ion-title>Background Images</ion-title>
-</ion-navbar>
-
-<ion-content class="has-header components-demo cards-bg">
-
-<ion-card class="advanced-background">
-  <img src="img/card-saopaolo.png"/>
-  <p class="advanced-background-title">São Paulo</p>
-  <p class="advanced-background-subtitle">41 Listings</p>
-</ion-card>
-
-<ion-card class="advanced-background">
-  <img src="img/card-amsterdam.png"/>
-  <p class="advanced-background-title">Amsterdam</p>
-  <p class="advanced-background-subtitle">64 Listings</p>
-</ion-card>
-
-<ion-card class="advanced-background">
-  <img src="img/card-sf.png"/>
-  <p class="advanced-background-title">San Francisco</p>
-  <p class="advanced-background-subtitle">72 Listings</p>
-</ion-card>
-
-<ion-card class="advanced-background">
-  <img src="img/card-madison.png"/>
-  <p class="advanced-background-title">Madison</p>
-  <p class="advanced-background-subtitle">28 Listings</p>
-</ion-card>
-
-</ion-content>
-
-
-
-
diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts
index 758e3ee1ec..caa9106d5d 100644
--- a/demos/component-docs/cards/cards.ts
+++ b/demos/component-docs/cards/cards.ts
@@ -1,76 +1,8 @@
-import {Page} from 'ionic/ionic';
-import {forwardRef} from 'angular2/angular2';
-import {AndroidAttribute} from '../helpers';
-
-export * from './cards-background/pages';
-
-@Page({
-  templateUrl: 'cards/cards-basic.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class BasicPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'cards/cards-header.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class HeaderPage {
-    constructor() {
-
-    }
-}
-
-
-@Page({
-  templateUrl: 'cards/cards-list.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ListPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'cards/cards-image.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ImagePage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'cards/cards-advanced-social.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class AdvancedSocialPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'cards/cards-advanced-map.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class AdvancedMapPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'cards/cards-advanced-weather.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class AdvancedWeatherPage {
-    constructor() {
-
-    }
-}
+export * from './advanced-map/pages';
+export * from './advanced-social/pages';
+export * from './advanced-weather/pages';
+export * from './background/pages';
+export * from './basic/pages';
+export * from './header/pages';
+export * from './image/pages';
+export * from './list/pages';
diff --git a/demos/component-docs/cards/header/pages.ts b/demos/component-docs/cards/header/pages.ts
new file mode 100644
index 0000000000..da2232a532
--- /dev/null
+++ b/demos/component-docs/cards/header/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/header/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class HeaderPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/cards-header.html b/demos/component-docs/cards/header/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-header.html
rename to demos/component-docs/cards/header/template.html
diff --git a/demos/component-docs/cards/image/pages.ts b/demos/component-docs/cards/image/pages.ts
new file mode 100644
index 0000000000..c0321971d5
--- /dev/null
+++ b/demos/component-docs/cards/image/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/image/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ImagePage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/cards-image.html b/demos/component-docs/cards/image/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-image.html
rename to demos/component-docs/cards/image/template.html
diff --git a/demos/component-docs/cards/list/pages.ts b/demos/component-docs/cards/list/pages.ts
new file mode 100644
index 0000000000..af241f55f2
--- /dev/null
+++ b/demos/component-docs/cards/list/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'cards/list/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ListPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/cards-list.html b/demos/component-docs/cards/list/template.html
similarity index 100%
rename from demos/component-docs/cards/cards-list.html
rename to demos/component-docs/cards/list/template.html
diff --git a/demos/component-docs/forms/forms.ts b/demos/component-docs/forms/forms.ts
deleted file mode 100644
index 7df7efcd3a..0000000000
--- a/demos/component-docs/forms/forms.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import {FORM_DIRECTIVES, FormBuilder, forwardRef, Validators, Control, ControlGroup} from 'angular2/angular2';
-import {Page} from 'ionic/ionic';
-import {AndroidAttribute} from '../helpers';
-
-
-
-@Page({
-  templateUrl: 'forms/forms.html',
-  providers: [FormBuilder],
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class FormsPage {
-
-  constructor() {
-    this.form = new ControlGroup({
-      firstName: new Control("", Validators.required),
-      lastName: new Control("", Validators.required)
-    });
-  }
-
-  processForm(event) {
-    // TODO: display input in a popup
-    console.log(event);
-  }
-
-
-}
-
-@Page({
-  templateUrl: 'forms/fixed-inline.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class FixedInlinePage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'forms/floating.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class FloatingPage {
-    constructor() {
-
-    }
-}
-
-
-@Page({
-  templateUrl: 'forms/inline.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class InlinePage {
-    constructor() {
-
-    }
-}
-
-
-@Page({
-  templateUrl: 'forms/inset.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class InsetPage {
-    constructor() {
-
-    }
-}
-
-
-@Page({
-  templateUrl: 'forms/placeholder.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class PlaceholderPage {
-    constructor() {
-
-    }
-}
-
-
-@Page({
-  templateUrl: 'forms/stacked.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class StackedPage {
-    constructor() {
-
-    }
-}
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index 891c516b01..1506fd524f 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -5,22 +5,9 @@ import {Platform, Navbar} from 'ionic/ionic';
 import * as actionSheets from './action-sheets/action-sheets';
 import * as buttons from './buttons/buttons';
 import * as cards from './cards/cards';
-
-import {FormsPage,
-        FixedInlinePage,
-        FloatingPage,
-        InlinePage,
-        InsetPage,
-        PlaceholderPage,
-        StackedPage} from './forms/forms';
-        
-import {IconsPage} from './icons/icons';
-
-import {CheckboxPage,
-        RadioPage,
-        RangePage,
-        SelectPage,
-        SwitchPage} from './inputs/inputs';
+import * as labels from './labels/labels';
+import * as icons from './icons/icons';
+import * as inputs from './inputs/inputs';
 
 import {BasicListsPage,
         AvatarListsPage,
@@ -117,21 +104,21 @@ export function getPageFor(hash) {
         'card-advanced-social': cards.AdvancedSocialPage,
         'card-advanced-weather': cards.AdvancedWeatherPage,
 
-        'checkbox': CheckboxPage,
-        'radio': RadioPage,
-        'range': RangePage,
-        'select': SelectPage,
-        'switch': SwitchPage,
+        'checkbox': inputs.CheckboxPage,
+        'radio': inputs.RadioPage,
+        'range': inputs.RangePage,
+        'select': inputs.SelectPage,
+        'switch': inputs.SwitchPage,
 
-        'inputs': FormsPage,
-        'fixed-inline-labels': FixedInlinePage,
-        'floating-labels': FloatingPage,
-        'inline-labels': InlinePage,
-        'inset-labels': InsetPage,
-        'placeholder-labels': PlaceholderPage,
-        'stacked-labels': StackedPage,
+        'inputs': labels.BasicPage,
+        'fixed-inline-labels': labels.FixedInlinePage,
+        'floating-labels': labels.FloatingPage,
+        'inline-labels': labels.InlinePage,
+        'inset-labels': labels.InsetPage,
+        'placeholder-labels': labels.PlaceholderPage,
+        'stacked-labels': labels.StackedPage,
 
-        'icons': IconsPage,
+        'icons': icons.BasicPage,
 
         'lists': BasicListsPage,
         'avatar-list': AvatarListsPage,
diff --git a/demos/component-docs/icons/basic/pages.ts b/demos/component-docs/icons/basic/pages.ts
new file mode 100644
index 0000000000..d980059046
--- /dev/null
+++ b/demos/component-docs/icons/basic/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+    templateUrl: 'icons/basic/template.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/basic/template.html
similarity index 100%
rename from demos/component-docs/icons/icons.html
rename to demos/component-docs/icons/basic/template.html
diff --git a/demos/component-docs/icons/icons.ts b/demos/component-docs/icons/icons.ts
index f7cc33ee76..ebdd570b29 100644
--- a/demos/component-docs/icons/icons.ts
+++ b/demos/component-docs/icons/icons.ts
@@ -1,13 +1 @@
-import {Page} from 'ionic/ionic';
-import {forwardRef} from 'angular2/angular2';
-import {AndroidAttribute} from '../helpers';
-
-@Page({
-    templateUrl: 'icons/icons.html',
-    directives: [forwardRef(() => AndroidAttribute)]
-})
-export class IconsPage {
-    constructor() {
-
-    }
-}
+export * from './basic/pages';
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index fbc884d085..2af4f048f8 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,7 +1,7 @@
 import {App, IonicApp, Platform, ActionSheet} from 'ionic/ionic';
 import {Page, Config, Events} from 'ionic/ionic';
 import {PageOne, PageTwo, PageThree} from './menus/menus';
-import {ActionSheetPage} from './actionSheet/actionSheet';
+import * as actionSheets from './action-sheets/action-sheets';
 import * as helpers from './helpers';
 
 
@@ -32,7 +32,7 @@ class DemoApp {
             if (data.hash) {
               this.nextPage = helpers.getPageFor(data.hash.replace('#', ''));
             } else {
-              this.nextPage = ActionSheetPage;
+              this.nextPage = actionSheets.BasicPage;
             }
             let nav = this.app.getComponent('nav');
             nav.setRoot(this.nextPage);
diff --git a/demos/component-docs/inputs/checkbox/pages.ts b/demos/component-docs/inputs/checkbox/pages.ts
new file mode 100644
index 0000000000..e1b8a6d2ea
--- /dev/null
+++ b/demos/component-docs/inputs/checkbox/pages.ts
@@ -0,0 +1,12 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'inputs/checkbox/template.html',
+  directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class CheckboxPage{
+  constructor() {
+  }
+}
diff --git a/demos/component-docs/inputs/checkbox.html b/demos/component-docs/inputs/checkbox/template.html
similarity index 100%
rename from demos/component-docs/inputs/checkbox.html
rename to demos/component-docs/inputs/checkbox/template.html
diff --git a/demos/component-docs/inputs/inputs.ts b/demos/component-docs/inputs/inputs.ts
index 1d4878434f..b9c4e27fdf 100644
--- a/demos/component-docs/inputs/inputs.ts
+++ b/demos/component-docs/inputs/inputs.ts
@@ -1,48 +1,5 @@
-import {App, IonicApp, Page} from 'ionic/ionic';
-import {forwardRef} from 'angular2/angular2';
-import * as helpers from '../helpers';
-
-@Page({
-  templateUrl: 'inputs/checkbox.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class CheckboxPage{
-  constructor() {
-  }
-}
-
-@Page({
-  templateUrl: 'inputs/radio.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class RadioPage{
-  constructor() {
-  }
-}
-
-@Page({
-  templateUrl: 'inputs/range.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class RangePage{
-  constructor() {
-  }
-}
-
-@Page({
-  templateUrl: 'inputs/select.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class SelectPage{
-  constructor() {
-  }
-}
-
-@Page({
-  templateUrl: 'inputs/switch.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class SwitchPage{
-  constructor() {
-  }
-}
+export * from './checkbox/pages';
+export * from './radio/pages';
+export * from './range/pages';
+export * from './select/pages';
+export * from './switch/pages';
diff --git a/demos/component-docs/inputs/radio/pages.ts b/demos/component-docs/inputs/radio/pages.ts
new file mode 100644
index 0000000000..25db75ccd8
--- /dev/null
+++ b/demos/component-docs/inputs/radio/pages.ts
@@ -0,0 +1,12 @@
+import {App, IonicApp, Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import * as helpers from '../../helpers';
+
+@Page({
+    templateUrl: 'inputs/radio/template.html',
+    directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class RadioPage {
+    constructor() {
+    }
+}
diff --git a/demos/component-docs/inputs/radio.html b/demos/component-docs/inputs/radio/template.html
similarity index 100%
rename from demos/component-docs/inputs/radio.html
rename to demos/component-docs/inputs/radio/template.html
diff --git a/demos/component-docs/inputs/range/pages.ts b/demos/component-docs/inputs/range/pages.ts
new file mode 100644
index 0000000000..849fd1d044
--- /dev/null
+++ b/demos/component-docs/inputs/range/pages.ts
@@ -0,0 +1,12 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'inputs/range/template.html',
+  directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class RangePage{
+  constructor() {
+  }
+}
\ No newline at end of file
diff --git a/demos/component-docs/inputs/range.html b/demos/component-docs/inputs/range/template.html
similarity index 100%
rename from demos/component-docs/inputs/range.html
rename to demos/component-docs/inputs/range/template.html
diff --git a/demos/component-docs/inputs/select/pages.ts b/demos/component-docs/inputs/select/pages.ts
new file mode 100644
index 0000000000..84f5da82ac
--- /dev/null
+++ b/demos/component-docs/inputs/select/pages.ts
@@ -0,0 +1,12 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'inputs/select/template.html',
+  directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class SelectPage{
+  constructor() {
+  }
+}
diff --git a/demos/component-docs/inputs/select.html b/demos/component-docs/inputs/select/template.html
similarity index 100%
rename from demos/component-docs/inputs/select.html
rename to demos/component-docs/inputs/select/template.html
diff --git a/demos/component-docs/inputs/switch/pages.ts b/demos/component-docs/inputs/switch/pages.ts
new file mode 100644
index 0000000000..8059ee55ca
--- /dev/null
+++ b/demos/component-docs/inputs/switch/pages.ts
@@ -0,0 +1,12 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'inputs/switch/template.html',
+  directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class SwitchPage{
+  constructor() {
+  }
+}
diff --git a/demos/component-docs/inputs/switch.html b/demos/component-docs/inputs/switch/template.html
similarity index 100%
rename from demos/component-docs/inputs/switch.html
rename to demos/component-docs/inputs/switch/template.html
diff --git a/demos/component-docs/labels/basic/pages.ts b/demos/component-docs/labels/basic/pages.ts
new file mode 100644
index 0000000000..48922ed770
--- /dev/null
+++ b/demos/component-docs/labels/basic/pages.ts
@@ -0,0 +1,24 @@
+import {FORM_DIRECTIVES, FormBuilder, forwardRef, Validators, Control, ControlGroup} from 'angular2/angular2';
+import {Page} from 'ionic/ionic';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/basic/template.html',
+  providers: [FormBuilder],
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+
+  constructor() {
+    this.form = new ControlGroup({
+      firstName: new Control("", Validators.required),
+      lastName: new Control("", Validators.required)
+    });
+  }
+
+  processForm(event) {
+    // TODO: display input in a popup
+    console.log(event);
+  }
+
+}
diff --git a/demos/component-docs/forms/forms.html b/demos/component-docs/labels/basic/template.html
similarity index 100%
rename from demos/component-docs/forms/forms.html
rename to demos/component-docs/labels/basic/template.html
diff --git a/demos/component-docs/labels/fixed-inline/pages.ts b/demos/component-docs/labels/fixed-inline/pages.ts
new file mode 100644
index 0000000000..ac63ebc809
--- /dev/null
+++ b/demos/component-docs/labels/fixed-inline/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/fixed-inline/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class FixedInlinePage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/forms/fixed-inline.html b/demos/component-docs/labels/fixed-inline/template.html
similarity index 100%
rename from demos/component-docs/forms/fixed-inline.html
rename to demos/component-docs/labels/fixed-inline/template.html
diff --git a/demos/component-docs/labels/floating/pages.ts b/demos/component-docs/labels/floating/pages.ts
new file mode 100644
index 0000000000..1b3dde0214
--- /dev/null
+++ b/demos/component-docs/labels/floating/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/floating/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class FloatingPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/forms/floating.html b/demos/component-docs/labels/floating/template.html
similarity index 100%
rename from demos/component-docs/forms/floating.html
rename to demos/component-docs/labels/floating/template.html
diff --git a/demos/component-docs/labels/inline/pages.ts b/demos/component-docs/labels/inline/pages.ts
new file mode 100644
index 0000000000..9662648399
--- /dev/null
+++ b/demos/component-docs/labels/inline/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/inline/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class InlinePage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/forms/inline.html b/demos/component-docs/labels/inline/template.html
similarity index 100%
rename from demos/component-docs/forms/inline.html
rename to demos/component-docs/labels/inline/template.html
diff --git a/demos/component-docs/labels/inset/pages.ts b/demos/component-docs/labels/inset/pages.ts
new file mode 100644
index 0000000000..38d1970d2a
--- /dev/null
+++ b/demos/component-docs/labels/inset/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/inset/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class InsetPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/forms/inset.html b/demos/component-docs/labels/inset/template.html
similarity index 100%
rename from demos/component-docs/forms/inset.html
rename to demos/component-docs/labels/inset/template.html
diff --git a/demos/component-docs/labels/labels.ts b/demos/component-docs/labels/labels.ts
new file mode 100644
index 0000000000..f5c659c2a4
--- /dev/null
+++ b/demos/component-docs/labels/labels.ts
@@ -0,0 +1,7 @@
+export * from './basic/pages';
+export * from './fixed-inline/pages';
+export * from './floating/pages';
+export * from './inline/pages';
+export * from './inset/pages';
+export * from './placeholder/pages';
+export * from './stacked/pages';
diff --git a/demos/component-docs/labels/placeholder/pages.ts b/demos/component-docs/labels/placeholder/pages.ts
new file mode 100644
index 0000000000..a9c06d31c5
--- /dev/null
+++ b/demos/component-docs/labels/placeholder/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/placeholder/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class PlaceholderPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/forms/placeholder.html b/demos/component-docs/labels/placeholder/template.html
similarity index 100%
rename from demos/component-docs/forms/placeholder.html
rename to demos/component-docs/labels/placeholder/template.html
diff --git a/demos/component-docs/labels/stacked/pages.ts b/demos/component-docs/labels/stacked/pages.ts
new file mode 100644
index 0000000000..e3653e9ef7
--- /dev/null
+++ b/demos/component-docs/labels/stacked/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'labels/stacked/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class StackedPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/forms/stacked.html b/demos/component-docs/labels/stacked/template.html
similarity index 100%
rename from demos/component-docs/forms/stacked.html
rename to demos/component-docs/labels/stacked/template.html