feat(input): add error states, md-maxlength

bower.json

@@ -14,6 +14,7 @@
     "angular-aria": "1.3.x",
     "angular-route": "1.3.x",
     "angular-mocks": "1.3.x",
-    "angularytics": "^0.3.0"
+    "angularytics": "^0.3.0",
+    "angular-messages": "~1.3.8"
   }
 }

docs/app/js/app.js

@@ -1,4 +1,4 @@
-var DocsApp = angular.module('docsApp', ['ngMaterial', 'ngRoute', 'angularytics'])
+var DocsApp = angular.module('docsApp', ['ngMaterial', 'ngRoute', 'angularytics', 'ngMessages'])
 
 .config([
   'COMPONENTS',

docs/config/template/demo-index.template.html

@@ -6,6 +6,7 @@
 
     <script src="/bower_components/angular/angular.js"></script>
     <script src="/bower_components/angular-animate/angular-animate.js"></script>
+    <script src="/bower_components/angular-messages/angular-messages.js"></script>
     <script src="/bower_components/angular-aria/angular-aria.js"></script>
     <script src="/bower_components/hammerjs/hammer.js"></script>
     <script src="/dist/angular-material.js"></script>

docs/config/template/index.template.html

@@ -7,6 +7,7 @@
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/{$ doc.buildConfig.ngVersion $}/angular-animate.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/{$ doc.buildConfig.ngVersion $}/angular-route.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/{$ doc.buildConfig.ngVersion $}/angular-aria.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/{$ doc.buildConfig.ngVersion $}/angular-messages.min.js"></script>
 
 <script src="docs.js"></script>
 <script src="docs-demo-scripts.js"></script>

src/components/card/card.scss

@@ -1,10 +1,12 @@
 $card-margin: 8px !default;
+$card-padding: 16px !default;
 $card-box-shadow: $whiteframe-shadow-z1 !default;
 
 md-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  margin: $card-margin;
 
   box-shadow: $card-box-shadow;
 
@@ -15,6 +17,6 @@ md-card {
 
   md-card-content {
     order: 1;
-    margin: $card-margin;
+    padding: $card-padding;
   }
 }

src/components/input/demoBasicUsage/index.html

@@ -12,47 +12,50 @@
   </md-content>
 
   <md-content class="md-padding">
+    <form name="userForm">
 
-    <md-input-container flex>
-      <label>Company (Disabled)</label>
-      <input ng-model="user.company" disabled>
-    </md-input-container>
-
-    <div layout layout-sm="column">
       <md-input-container flex>
-        <label>First Name</label>
-        <input ng-model="user.firstName">
+        <label>Company (Disabled)</label>
+        <input ng-model="user.company" disabled>
       </md-input-container>
+
+      <div layout layout-sm="column">
+        <md-input-container flex>
+          <label>First Name</label>
+          <input ng-model="user.firstName">
+        </md-input-container>
+        <md-input-container flex>
+          <label>Last Name</label>
+          <input ng-model="theMax">
+        </md-input-container>
+      </div>
+
       <md-input-container flex>
-        <label>Last Name</label>
-        <input ng-model="user.lastName">
+        <label>Address</label>
+        <input ng-model="user.address">
       </md-input-container>
-    </div>
 
-    <md-input-container flex>
-      <label>Address</label>
-      <input ng-model="user.address">
-    </md-input-container>
+      <div layout layout-sm="column">
+        <md-input-container flex>
+          <label>City</label>
+          <input ng-model="user.city">
+        </md-input-container>
+        <md-input-container flex>
+          <label>State</label>
+          <input ng-model="user.state">
+        </md-input-container>
+        <md-input-container flex>
+          <label>Postal Code</label>
+          <input ng-model="user.postalCode">
+        </md-input-container>
+      </div>
 
-    <div layout layout-sm="column">
-      <md-input-container flex>
-        <label>City</label>
-        <input ng-model="user.city">
-      </md-input-container>
       <md-input-container flex>
-        <label>State</label>
-        <input ng-model="user.state">
+        <label>Biography</label>
+        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
       </md-input-container>
-      <md-input-container flex>
-        <label>Postal Code</label>
-        <input ng-model="user.postalCode">
-      </md-input-container>
-    </div>
 
-    <md-input-container flex>
-      <label>Biography</label>
-      <textarea ng-model="user.biography" columns="1"></textarea>
-    </md-input-container>
+    </md-content>
 
-  </md-content>
+  </form>
 </div>

src/components/input/demoBasicUsage/script.js

@@ -1,4 +1,4 @@
-angular.module('inputBasicDemo', ['ngMaterial'])
+angular.module('inputBasicDemo', ['ngMaterial', 'ngMessages'])
 
 .controller('DemoCtrl', function($scope) {
   $scope.user = {

src/components/input/demoErrors/index.html

@@ -0,0 +1,40 @@
+<ng-app="inputErrorsApp" ng-controller="AppCtrl" layout="column">
+
+  <md-toolbar class="md-primary">
+    <h1 class="md-toolbar-tools">
+      Top Secret Project
+    </h1>
+  </md-toolbar>
+
+  <md-content class="md-padding">
+    <form name="projectForm">
+      <md-input-container>
+        <label>Description</label>
+        <input md-maxlength="30" required name="description" ng-model="project.description">
+        <div ng-messages="projectForm.description.$error" ng-show="projectForm.description.$dirty">
+          <div ng-message="required">This is required.</div>
+          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
+        </div>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Client Name</label>
+        <input required name="clientName" ng-model="project.clientName">
+        <div ng-messages="projectForm.clientName.$error" ng-show="projectForm.clientName.$dirty">
+          <div ng-message="required">This is required.</div>
+        </div>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Hourly Rate (USD)</label>
+        <input required type="number" step="any" name="rate" ng-model="project.rate" min="800" max="5000" required>
+        <div ng-messages="projectForm.rate.$error">
+          <div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
+          <div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
+          <div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
+        </div>
+      </md-input-container>
+    </form>
+  </md-content>
+
+</div>

src/components/input/demoErrors/script.js

@@ -0,0 +1,9 @@
+angular.module('inputErrorsApp', ['ngMaterial', 'ngMessages'])
+
+.controller('AppCtrl', function($scope) {
+  $scope.project = {
+    description: 'Nuclear Missile Defense System',
+    clientName: 'Bill Clinton',
+    rate: 100,
+  };
+});

src/components/input/input-theme.scss

@@ -11,34 +11,48 @@ md-input-container.md-THEME_NAME-theme {
     color: '{{foreground-3}}';
   }
 
-  &.md-input-focused {
-    .md-input {
-      border-color: '{{primary-500}}';
-    }
-    label {
-      color: '{{primary-500}}';
-    }
-    &.md-accent {
-      .md-input {
-        border-color: '{{accent-500}}';
-      }
+
+  &:not(.md-input-invalid) {
+    &.md-input-has-value {
       label {
-        color: '{{accent-500}}';
+        color: '{{foreground-2}}';
       }
     }
-    &.md-warn {
+    &.md-input-focused {
       .md-input {
-        border-color: '{{warn-500}}';
+        border-color: '{{primary-500}}';
       }
       label {
-        color: '{{warn-500}}';
+        color: '{{primary-500}}';
+      }
+      &.md-accent {
+        .md-input {
+          border-color: '{{accent-500}}';
+        }
+        label {
+          color: '{{accent-500}}';
+        }
+      }
+      &.md-warn {
+        .md-input {
+          border-color: '{{warn-500}}';
+        }
+        label {
+          color: '{{warn-500}}';
+        }
       }
     }
   }
-
-  &.md-input-has-value:not(.md-input-focused) {
+  &.md-input-invalid {
+    .md-input {
+      border-color: '{{warn-500}}';
+    }
     label {
-      color: '{{foreground-2}}';
+      color: '{{warn-500}}';
+    }
+    ng-message, [ng-message],
+    .md-char-counter {
+      color: '{{warn-500}}';
     }
   }