Double escaping single quotes

.bowerrc

@@ -0,0 +1,12 @@
+{
+  "directory": "bower_components",
+  "registry": {
+      "search": [
+          "https://bettervideo:md$2016@proget.mdsweb01.bettervideo.com/bower/bower",
+          "https://bower.herokuapp.com"
+      ],
+      "register": "https://bettervideo:md$2016@proget.mdsweb01.bettervideo.com/bower/bower",
+      "publish": "https://bettervideo:md$2016@proget.mdsweb01.bettervideo.com/bower/bower"
+  },
+  "strict-ssl": false
+}

README.md

@@ -5,6 +5,7 @@ Angular Material Decorator
 
 For https://github.com/json-schema-form/angular-schema-form
 
+
 Work In Progress
 ----------------
 Angular Material has reached 1.0.0 however I do not feel it is remotely stable yet, this decorator is progressing very cautiously until that project hits a more stable milestone. That said, I have made an early alpha available and will continue to release alpha releases as I add new features, these **are not production quality** as the name alpha implies.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-schema-form-material",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "authors": [
     "Marcel Bennett <iamanthropic@gmail.com>"
   ],
@@ -22,7 +22,7 @@
     "tests"
   ],
   "dependencies": {
-    "angular-schema-form": ">=0.8.13"
+    "angular-schema-form": "git://github.com/betterMDS/angular-schema-form.git#feature/webpack-babel"
   },
   "devDependencies": {
     "angular": "1.5.5",
@@ -32,5 +32,9 @@
     "angular-messages": "1.5.5",
     "angular-ui-ace": "~0.2.3",
     "moment": "~2.10.6"
+  },
+  "resolutions": {
+    "angular": "1.5.8",
+    "angular-schema-form": "feature/webpack-babel"
   }
 }

gulpfile.js

@@ -7,20 +7,21 @@ var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   jscs = require('gulp-jscs');
 
-gulp.task('build', function() {
+gulp.task('build', ['templates','js']);
+gulp.task('js', function() {
   var stream = streamqueue({ objectMode: true });
-  stream.queue(
-    gulp.src('./src/**/*.html')
-    .pipe(minifyHtml({
-      empty: true,
-      spare: true,
-      quotes: true
-    }))
-    .pipe(templateCache({
-      module: 'schemaForm',
-      root: 'decorators/material/'
-    }))
-    );
+  // stream.queue(
+  //   gulp.src('./src/**/*.html')
+  //   .pipe(minifyHtml({
+  //     empty: true,
+  //     spare: true,
+  //     quotes: true
+  //   }))
+  //   .pipe(templateCache({
+  //     module: 'schemaForm',
+  //     root: 'decorators/material/'
+  //   }))
+  //   );
   stream.queue(gulp.src('./src/**/*.js'));
 
   stream.done()

package.json

@@ -1,9 +1,10 @@
 {
   "name": "angular-schema-form-material",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.5",
   "description": "Angular Material decorator for Angular Schema Form",
   "main": "dist/material-decorator.js",
   "scripts": {
+    "buildAll": "npm run templates && npm run build",
     "templates": "gulp templates",
     "dist": "npm run build && npm run minify",
     "build": "webpack",
@@ -21,7 +22,7 @@
     "angular": ">= 1.2",
     "angular-messages": "^1.5.0",
     "angular-sanitize": ">= 1.2",
-    "angular-schema-form": "git://github.com/json-schema-form/angular-schema-form.git#feature/webpack-babel",
+    "angular-schema-form": "git://github.com/betterMDS/angular-schema-form.git#feature/webpack-babel",
     "tv4": "~1.0.15"
   },
   "devDependencies": {

src/array.html

@@ -8,9 +8,9 @@
              ng-repeat="item in modelArray track by $index"
              schema-form-array-items
              class="{{form.fieldHtmlClass}}">
-      <md-button flex="none" flex-order="2"
+      <md-button flex="none" flex-order="2" flex="5"
                  type="button"
-                 ng-hide="form.readonly || form.remove === null"
+                 ng-if=" !( form.readonly || form.remove === null )"
                  ng-click="deleteFromArray($index)"
                  ng-disabled="form.schema.minItems >= modelArray.length"
                  class="md-icon-button" aria-label="More"
@@ -19,16 +19,17 @@
       </md-button>
     </md-list-item>
   </md-list>
-  <div class="clearfix" style="padding: 15px;" ng-model="modelArray" schema-validate="form">
+  <div class="clearfix" ng-model="modelArray" schema-validate="form" layout="row" layout-align="end center">
     <div class="help-block"
          ng-show="(hasError() && errorMessage(schemaError())) || form.description"
          ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
 
-    <md-button ng-hide="form.readonly || form.add === null"
+    <md-button ng-if=" !( form.readonly || form.add === null )"
             ng-click="appendToArray()"
             ng-disabled="form.schema.maxItems <= modelArray.length"
             type="button"
-            class="btn md-raised md-primary {{ form.style.add || 'btn-default' }} pull-right">
+            style="align-self: flex-end;"
+            class="md-raised md-mini md-primary {{ form.style.add || 'btn-default' }} pull-right">
       <i class="glyphicon glyphicon-plus"></i>
       {{ form.add || 'Add'}}
     </md-button>

src/autocomplete.html

@@ -1,21 +1,23 @@
-<div class="form-group {{form.htmlClass}} schema-form-select"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
-     sf-messages sf-layout>
+<div class="form-group {{::form.htmlClass ? form.htmlClass : 'flex-100'}} schema-form-select " sf-layout>
   <md-autocomplete flex
+
+    ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
     ng-disabled="form.readonly"
     ng-model="$$value$$"
     sf-autocomplete
     sf-field-model="replaceAll"
+    sf-changed-auto-complete="form"
     schema-validate="form"
     md-selected-item="$$value$$"
     md-search-text="searchText"
     md-selected-item-change="'todo';"
-    md-items="item in evalExpr('this[\''+form.optionFilter+'\'](\''+searchText+'\')')"
+    md-items="item in evalExpr('this[\\''+form.optionFilter+'\\'](\\''+searchText+'\\')')"
     md-item-text="item.name"
     md-floating-label="{{::form.title}}"
-    md-menu-class="autocomplete-custom-template">
+    md-menu-class="autocomplete-custom-template"
+    >
     <md-item-template>
-      <span md-highlight-text="searchText">{{item.name}}</span>
+      <span md-highlight-text="searchText" md-highlight-flags="i">{{item.name}}</span>
     </md-item-template>
     <md-not-found>
       No matches found

src/card.html

@@ -1,2 +1,9 @@
-<md-card class="schema-form-card {{form.htmlClass}}">
+<md-card ng-disabled="form.readonly">
+	<!--{{form| json}}-->
+	<md-card-header ng-if="form.title && !form.notitle">
+		<md-card-header-text>
+			<span class="md-title">{{ form.title }}</span>
+		</md-card-header-text>
+	</md-card-header>
+	<md-card-content ng-class='{"layout-column": !form.inline, "layout-row": form.inline, "layout-wrap": form.inline }' sf-field-transclude></md-card-content>
 </md-card>

src/date.html

@@ -1,13 +1,14 @@
-<div class="schema-form-date {{::form.htmlClass}}">
-  <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
-  <md-datepicker sf-field-model
-                 sf-changed="form"
-                 schema-validate="form"
-                 sf-type-parser="form.schema"
-                 id="{{::form.key|sfCamelKey}}"
-                 ng-show="::form.key"
-                 ng-class="::form.fieldHtmlClass"
-                 ng-disabled="::form.readonly"
-                 md-placeholder="Enter date" sf-messages>
-  </md-datepicker>
-</div>
+<md-input-container class="schema-form-date" ng-class="[ form.htmlClass || 'flex-100' ]">
+	<label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
+	<md-datepicker sf-field-model
+				   sf-changed="form"
+				   schema-validate="form"
+				   sf-type-parser="form.schema"
+				   id="{{::form.key|sfCamelKey}}"
+				   ng-show="::form.key"
+				   ng-class="::form.fieldHtmlClass"
+				   ng-disabled="::form.readonly"
+
+	>
+	</md-datepicker>
+</md-input-container>

src/default.html

@@ -1,18 +1,25 @@
-<md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"
-                    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"
-         type="{{::form.type}}"
-         step="any"
-         sf-changed="form"
-         placeholder="{{form.placeholder}}"
-         id="{{::form.key|sfCamelKey}}"
-         ng-class="::form.fieldHtmlClass"
-         sf-type-parser="form.schema"
-         ng-disabled="::form.readonly"
-         schema-validate="form"
-         name="{{::form.key|sfCamelKey}}"
-         aria-describedby="{{::form.key|sfCamelKey}}Status" />
+<md-input-container
+		class="form-group schema-form-input"
+		ng-class="[ form.htmlClass ? form.htmlClass : 'flex-100', {'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false }]"
+		sf-messages sf-layout
+
+>
+	<label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
+	<input sf-field-model
+		   ng-show="::form.key"
+		   type="{{::form.type}}"
+		   step="any"
+		   sf-changed="form"
+		   id="{{::form.key|sfCamelKey}}"
+		   ng-class="::form.fieldHtmlClass"
+		   sf-type-parser="form.schema"
+		   ng-disabled="::form.readonly"
+		   schema-validate="form"
+		   name="{{::form.key|sfCamelKey}}"
+		   aria-describedby="{{::form.key|sfCamelKey}}Status"
+
+		   ng-attr-md-maxlength="{{form.maxlength}}"
+		   ng-attr-maxlength="{{form.maxlength}}"
+	/>
+
 </md-input-container>

src/fieldset-trcl.html

@@ -1,4 +1,4 @@
 <fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>
-  <legend ng-show="form.title">{{ form.title }}</legend>
+  <legend ng-show="showTitle()">{{ form.title }}</legend>
   <div ng-transclude></div>
 </fieldset>

src/fieldset.html

@@ -1,3 +1,6 @@
-<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>
-  <legend ng-show="form.title">{{ form.title }}</legend>
+<fieldset ng-disabled="form.readonly" class="standard {{ form.htmlClass ? form.htmlClass : 'flex-100' }}">
+  <legend ng-show="showTitle()">{{ form.title }}</legend>
+  <div layout="row" layout-wrap sf-field-transclude>
+
+  </div>
 </fieldset>

src/material-class.js

@@ -1,4 +1,4 @@
-angular.module('schemaForm').directive('sfMaterialClass', function($compile, $timeout) {
+angular.module('schemaForm').directive('sfMaterialClass', ["$compile", "$timeout", function($compile, $timeout) {
     return {
         restrict : 'A',
         scope    : false,
@@ -15,10 +15,10 @@ angular.module('schemaForm').directive('sfMaterialClass', function($compile, $ti
             // 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) {
+                if (modelValue !== null && typeof modelValue !== 'undefined' && modelValue !== false && modelValue !== '') {
                     element.addClass(attrs.sfMaterialClass);
                 }
-            }, 0);
+            }, 100);
         }
     };
-});
+}]);

src/radios-inline.html

@@ -1,5 +1,5 @@
 <div class="form-group schema-form-radios-inline {{form.htmlClass}}"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" sf-layout sf-messages>
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" sf-layout>
   <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
   <md-radio-group layout="row"
                   sf-field-model="replaceAll"

src/radios.html

@@ -1,17 +1,20 @@
 <div class="form-group schema-form-radios {{form.htmlClass}}"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
-  <label class="control-label" ng-show="showTitle()" aria-label="{{form.title}}" layout="row">{{form.title}} {{form.titleMap | json}}</label>
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" sf-messages>
+  <label class="control-label" ng-show="showTitle()" aria-label="{{form.title}}" layout="row" ng-class="{'md-required': form.required}">{{form.title}}</label>
   <div>
     <md-radio-group sf-field-model
                     sf-changed="form"
                     ng-disabled="form.readonly"
                     name="{{form.key.join('.')}}"
-                    sf-layout sf-messages>
+                    schema-validate="form"
+                    sf-layout>
       <md-radio-button ng-repeat="item in form.titleMap"
                        ng-value="item.value"
-                       class="{{form.fieldHtmlClass}}"
+
                        sf-field-model="ng-class"
-                       ng-class="{ active: item.value === $$value$$ }">
+                       ng-class="{ active: item.value === $$value$$ }"
+                       aria-label="item.name">
+		  <!--                       class="{{form.fieldHtmlClass}}" -->
         <span ng-bind-html="item.name"></span>
       </md-radio-button>
     </md-radio-group>

src/select.html

@@ -1,9 +1,9 @@
 <md-input-container
-    class="form-group {{::form.htmlClass}} schema-form-select"
+    class="form-group {{::form.htmlClass ? form.htmlClass : 'flex-100'}} schema-form-select"
     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
     sf-messages sf-layout>
   <label ng-show="::showTitle()">{{::form.title}}</label>
-  <md-select sf-field-model schema-validate="form">
+  <md-select sf-field-model schema-validate="form" ng-disabled="::form.readonly" name="{{::form.key|sfCamelKey}}" sf-changed="form">
     <md-optgroup ng-repeat-start="(key, opt) in form.getOptions(form, evalExpr) | orderBy:'group' as optGroups"
                  ng-if="opt.group && opt.group != optGroups[key-1].group"
                  label="{{::opt.group}}"
@@ -16,4 +16,5 @@
                  ng-value="::opt.value"
                  ng-repeat-end>{{::opt.name}}</md-option>
   </md-select>
+  <div class="md-errors-spacer"></div>
 </md-input-container>

src/submit.html

@@ -1,9 +1,27 @@
-<section class="schema-form-submit {{form.htmlClass}}" sf-messages>
-  <md-button class="md-raised {{ form.style || 'md-primary' }} {{form.fieldHtmlClass}}"
-             type="{{::form.type}}"
-             ng-disabled="form.readonly"
-             aria-label="{{::form.title}}">
+<section class="schema-form-submit" ng-class="[ form.htmlClass ]" layout="row">
+  <md-progress-circular
+    class="md-accent md-hue-1"
+    md-mode="indeterminate"
+    md-diameter="32"
+    aria-label="Saving"
+    style="margin: 0 8px 0 0;"
+    ng-if="model.processing"
+  ></md-progress-circular>
+
+    <md-button
+    class="md-raised"
+	ng-class="[ form.style || 'md-primary', form.fieldHtmlClass ]"
+    type="{{::form.type}}"
+    ng-disabled="form.readonly"
+    aria-label="{{::form.title}}"
+    layout="row"
+    layout-align="space-around center"
+    ng-click="buttonClick($event,form)"
+  >
+
     <md-tooltip ng-if="::form.tip">{{::form.tip}}</md-tooltip>
+
+
     {{::form.title}}
   </md-button>
 </section>

src/textarea.html

@@ -1,4 +1,4 @@
-<md-input-container class="{{::form.htmlClass}} schema-form-textarea" sf-messages sf-layout>
+<md-input-container class="schema-form-textarea" sf-messages sf-layout ng-class="[ form.htmlClass || 'flex-100' ]">
   <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
   <textarea ng-class="::form.fieldHtmlClass"
             id="{{::form.key|sfCamelKey}}"

src/timepicker.html

@@ -0,0 +1,14 @@
+<md-input-container class="schema-form-date" ng-class="[ form.htmlClass || 'flex-100' ]">
+    <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
+    <md-time-picker sf-field-model
+                   sf-changed="form"
+                   schema-validate="form"
+                   sf-type-parser="form.schema"
+                   id="{{::form.key|sfCamelKey}}"
+                   ng-show="::form.key"
+                   ng-class="::form.fieldHtmlClass"
+                   ng-disabled="::form.readonly"
+
+    >
+    </md-time-picker>
+</md-input-container>

webpack.config.js

@@ -7,7 +7,7 @@ console.log('Angular Schema Form v' + pjson.version);
 module.exports = {
   entry: './src/module.js',
   output: {
-    path: path.join(__dirname, 'dist'),
+    path: path.join(__dirname, 'dist/'),
     filename: 'angular-schema-form-material.js',
     libraryTarget: 'umd'
   },