Merge remote-tracking branch 'origin/develop' into develop

Author: Anthropic

bower.json

@@ -26,9 +26,10 @@
   },
   "devDependencies": {
     "angular": "1.5.5",
-    "angular-animate": "1.4",
+    "angular-animate": "1.5.5",
     "angular-material": "1.1.1",
-    "angular-sanitize": "1.4",
+    "angular-sanitize": "1.5.5",
+    "angular-messages": "1.5.5",
     "angular-ui-ace": "~0.2.3",
     "moment": "~2.10.6"
   }

examples/material-example.html

@@ -163,6 +163,7 @@ <h3>Schema</h3>
 <script src="../bower_components/angular-aria/angular-aria.js"></script>
 <script src="../bower_components/angular-animate/angular-animate.js"></script>
 <script src="../bower_components/angular-material/angular-material.js"></script>
+<script src="../bower_components/angular-messages/angular-messages.js"></script>
 <script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
 <!-- <script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.js"></script>
 -->
@@ -171,7 +172,7 @@ <h3>Schema</h3>
 
 <script type="text/javascript">
 // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
-var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace'])
+var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace','ngMessages'])
 
 app.config(function($mdThemingProvider, $mdDateLocaleProvider) {
   $mdThemingProvider.setDefaultTheme('default');

src/checkbox.html

@@ -5,6 +5,7 @@
                sf-changed="form"
                ng-disabled="form.readonly"
                schema-validate="form"
+               sf-material-class="md-checked"
                class="{{::form.fieldHtmlClass}}"
                name="{{::form.key|sfCamelKey}}"
                aria-label="{{::form.title}}">

src/default.html

@@ -1,6 +1,6 @@
 <md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"
-                    ng-class="{'md-input-has-value': model['{{form.key.join('\'][\'')}}'], 'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
-                    sf-messages sf-layout>
+                    ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
+                    sf-messages sf-layout sf-material-class="md-input-has-value">
   <label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
   <input sf-field-model
          ng-show="::form.key"

src/material-class.js

@@ -0,0 +1,24 @@
+angular.module('schemaForm').directive('sfMaterialClass', function($compile, $timeout) {
+    return {
+        restrict : 'A',
+        scope    : false,
+        link     : function(scope, element, attrs, ngModel) {
+            function reduceHelper(obj, i) {return obj[i]}
+
+            var modelValue;
+            try {
+                modelValue = scope.form.key.reduce(reduceHelper, scope.model);
+            } catch (e) {
+                modelValue = undefined;
+            }
+
+            // Element class is not set in DOM if executed immediately.
+            // I don't understand exactly why but it's probably related to other directive job.
+            $timeout(function() {
+                if (modelValue !== null && typeof modelValue !== 'undefined' && modelValue !== false) {
+                    element.addClass(attrs.sfMaterialClass);
+                }
+            }, 0);
+        }
+    };
+});

src/material-decorator.js

@@ -74,7 +74,8 @@
     };
 
     function sfMessagesNodeHandler() {
-      var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
+        var html = '<div ng-if="ngModel.$invalid" ng-messages="{dummy: true}" class="ng-active">' +
+          '<div ng-message="dummy" class="md-input-message-animation" sf-message="form.description"></div></div>';
       var div = document.createElement('div');
       div.innerHTML = html;
       return div.firstChild;
@@ -83,7 +84,7 @@
     function sfMessagesBuilder(args) {
       var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
       if (messagesDiv && sfMessagesNode) {
-        var child = sfMessagesNode.cloneNode();
+        var child = sfMessagesNode.cloneNode(true);
         messagesDiv.appendChild(child);
       }
     };
@@ -169,7 +170,7 @@
         var minDate = args.form.minimum || false;
         var maxDate = args.form.maximum || false;
         if (minDate) {
-          mdDatepickerFrag.setAttribute('md-max-date', minDate);
+          mdDatepickerFrag.setAttribute('md-min-date', minDate);
         }
         if (maxDate) {
           mdDatepickerFrag.setAttribute('md-max-date', maxDate);