feat(examples): add basic usage input example

 - WIP still needs some ❤️

examples/all.ts

@@ -19,15 +19,17 @@ import TabsDynamicTabs from './components/tabs/dynamic_tabs';
 import CheckboxBasicUsage from "./components/checkbox/basic_usage";
 import CheckboxSyncing from "./components/checkbox/syncing";
 import ListBasicUsage from "./components/list/basic_usage";
+import InputBasicUsage from "./components/input/basic_usage";
 
 /**
- * Collection of Material Design component directives.
+ * Collection of Material Design component example directives.
  */
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   CardBasicUsage, CardInlineActions, CardActionButtons,
   ButtonBasicUsage,
   CheckboxBasicUsage, CheckboxSyncing,
   DialogBasicUsage,
+  InputBasicUsage,
   ListBasicUsage,
   RadioBasicUsage,
   SwitchBasicUsage,

examples/components/input/basic_usage.html

@@ -0,0 +1,90 @@
+<div layout="column" class="md-inline-form">
+
+  <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
+    <div>
+      <md-input-container>
+        <label>Title</label>
+        <input md-input [(value)]="user.title">
+      </md-input-container>
+
+      <md-input-container>
+        <label>Email</label>
+        <input md-input [(value)]="user.email" type="email">
+      </md-input-container>
+    </div>
+  </md-content>
+
+  <md-content layout-padding>
+    <div>
+      <form name="userForm">
+
+        <div layout-gt-xs="row">
+          <md-input-container class="md-block" flex-gt-xs>
+            <label>Company (Disabled)</label>
+            <input md-input [(value)]="user.company" disabled>
+          </md-input-container>
+        </div>
+
+        <div layout-gt-sm="row">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>First name</label>
+            <input md-input [(value)]="user.firstName">
+          </md-input-container>
+
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Last Name</label>
+            <input md-input [(value)]="user.lastName">
+          </md-input-container>
+        </div>
+
+        <md-input-container class="md-block">
+          <label>Address</label>
+          <input md-input [(value)]="user.address">
+        </md-input-container>
+
+        <md-input-container md-no-float class="md-block">
+          <input md-input [(value)]="user.address2" placeholder="Address 2">
+        </md-input-container>
+
+        <div layout-gt-sm="row">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>City</label>
+            <input md-input [(value)]="user.city">
+          </md-input-container>
+
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>State</label>
+            <select [(value)]="user.state">
+              <option *ngFor="#state of states" [value]="state.abbrev">
+                {{state.abbrev}}
+              </option>
+            </select>
+          </md-input-container>
+
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Postal Code</label>
+            <!--<br>TODO: remove this: {{postalCode.errors | json}}-->
+            <input md-input ngControl="postalCode" [(value)]="user.postalCode" placeholder="12345"
+              required mdPattern="^[0-9]{5}$" #postalCode="ngForm" mdMaxLength="5">
+
+            <div md-messages role="alert" multiple [hidden]="postalCode.valid || postalCode.pristine">
+              <div [hidden]="!postalCode.errors?.required" md-message>You must supply a postal code.</div>
+              <div [hidden]="!postalCode.errors?.mdPattern" md-message>That doesn't look like a valid postal code.</div>
+              <div [hidden]="!postalCode.errors?.mdMaxLength" md-message>
+                Don't use the long version silly...we don't need to be that specific...
+              </div>
+            </div>
+          </md-input-container>
+        </div>
+
+        <md-input-container class="md-block">
+          <label>Biography</label>
+          <textarea md-input [(value)]="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
+        </md-input-container>
+
+
+      </form>
+    </div>
+  </md-content>
+
+</div>

examples/components/input/basic_usage.scss

@@ -0,0 +1,5 @@
+md-input-container > select {
+  margin: 0;
+  order: 2;
+  display: flex;
+}

examples/components/input/basic_usage.ts

@@ -0,0 +1,33 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {FORM_DIRECTIVES, Validators} from 'angular2/common';
+
+@Component({selector: 'input-basic-usage'})
+@View({
+  templateUrl: 'examples/components/input/basic_usage.html',
+  styleUrls: ['examples/components/input/basic_usage.css'],
+  directives: [MATERIAL_DIRECTIVES, FORM_DIRECTIVES]
+})
+export default class InputBasicUsage {
+  user = {
+    title: 'Developer',
+    email: 'ipsum@lorem.com',
+    firstName: '',
+    lastName: '',
+    company: 'Google',
+    address: '1600 Amphitheatre Pkwy',
+    address2: '',
+    city: 'Mountain View',
+    state: 'CA',
+    biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
+    postalCode: '94043'
+  };
+
+  states = [
+    'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME',
+    'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA',
+    'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
+  ].map(function (state) {
+    return {abbrev: state};
+  })
+}