├── src
    ├── material
    │   ├── card.html
    │   ├── actions-trcl.html
    │   ├── actions.html
    │   ├── section.html
    │   ├── card-content.html
    │   ├── help.html
    │   ├── fieldset.html
    │   ├── tabs.html
    │   ├── fieldset-trcl.html
    │   ├── slider.html
    │   ├── submit.html
    │   ├── textarea.html
    │   ├── checkbox.html
    │   ├── date.html
    │   ├── switch.html
    │   ├── chips.html
    │   ├── checkboxes.html
    │   ├── radios-inline.html
    │   ├── default.html
    │   ├── radios.html
    │   ├── autocomplete.html
    │   ├── select.html
    │   ├── radio-buttons.html
    │   ├── array.html
    │   └── tabarray.html
    ├── module.js
    ├── material-class.js
    ├── type-parser.js
    └── material-decorator.js
├── test
    └── protractor
    │   ├── conf.js
    │   └── specs
    │       ├── validation-tv4-errors.js
    │       └── validation-messages.js
├── examples
    ├── data
    │   ├── switch.json
    │   ├── remote-titlemap-books.json
    │   ├── remote-titlemap-movies.json
    │   ├── types.json
    │   ├── simple-oneOf.json
    │   ├── conditional-required.json
    │   ├── simple.json
    │   ├── autocomplete.json
    │   ├── complex-keys.json
    │   ├── tabarray.json
    │   ├── array.json
    │   ├── tabs.json
    │   ├── grid.json
    │   ├── titlemaps.json
    │   └── sink.json
    └── example.html
├── .jscsrc
├── webpack.config.dist.js
├── bower.json
├── LICENSE
├── package.json
├── gulpfile.js
├── CONTRIBUTING.md
├── .gitignore
├── README.md
├── webpack.config.js
├── material-decorator.min.js
├── dist
    ├── angular-schema-form-material.min.js
    └── angular-schema-form-material.js
└── material-decorator.js


/src/material/card.html:
--------------------------------------------------------------------------------
1 | <md-card class="schema-form-card {{form.htmlClass}}">
2 | </md-card>
3 | 


--------------------------------------------------------------------------------
/src/material/actions-trcl.html:
--------------------------------------------------------------------------------
1 | <div class="btn-group schema-form-actions {{form.htmlClass}}" ng-transclude></div>
2 | 


--------------------------------------------------------------------------------
/src/material/actions.html:
--------------------------------------------------------------------------------
1 | <section layout="row" class="btn-group schema-form-actions {{form.htmlClass}}"></section>
2 | 


--------------------------------------------------------------------------------
/src/material/section.html:
--------------------------------------------------------------------------------
1 | <md-content class="schema-form-section {{::form.htmlClass}}" sf-layout>
2 | </md-content>
3 | 


--------------------------------------------------------------------------------
/src/module.js:
--------------------------------------------------------------------------------
1 | require('./type-parser.js');
2 | require('./material-decorator.js');
3 | require('./material-class.js');
4 | 


--------------------------------------------------------------------------------
/src/material/card-content.html:
--------------------------------------------------------------------------------
1 | <md-card-content class="schema-form-card-content {{form.htmlClass}}">
2 | </md-card-content>
3 | 


--------------------------------------------------------------------------------
/src/material/help.html:
--------------------------------------------------------------------------------
1 | <div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>
2 | 


--------------------------------------------------------------------------------
/src/material/fieldset.html:
--------------------------------------------------------------------------------
1 | <fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>
2 |   <legend ng-show="form.title">{{ form.title }}</legend>
3 | </fieldset>
4 | 


--------------------------------------------------------------------------------
/src/material/tabs.html:
--------------------------------------------------------------------------------
1 | <div sf-field-model class="schema-form-tabs {{::form.htmlClass}}">
2 |   <md-tabs md-dynamic-height md-selected="selected" md-autoselect ng-init="selected = 0"></md-tabs>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/material/fieldset-trcl.html:
--------------------------------------------------------------------------------
1 | <fieldset ng-disabled="form.readonly" class="standard {{::form.htmlClass}}" flex>
2 |   <legend ng-show="form.title">{{ form.title }}</legend>
3 |   <div ng-transclude></div>
4 | </fieldset>
5 | 


--------------------------------------------------------------------------------
/test/protractor/conf.js:
--------------------------------------------------------------------------------
1 | exports.config = {
2 |   specs: [ 'specs/*.js' ],
3 |   baseUrl: 'http://localhost:63342/',
4 |   multiCapabilities: [
5 |     { 'browserName': 'firefox' },
6 |     { 'browserName': 'chrome' }
7 |   ]
8 | };
9 | 


--------------------------------------------------------------------------------
/src/material/slider.html:
--------------------------------------------------------------------------------
 1 | <md-input-container class="schema-form-slider {{::form.htmlClass}}">
 2 |   <label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
 3 |   <md-slider sf-field-model
 4 |              flex
 5 |              id="{{::form.key|sfCamelKey}}"
 6 |              min="0"
 7 |              max="255"
 8 |              aria-label="blue"></md-slider>
 9 | </md-input-container>
10 | 


--------------------------------------------------------------------------------
/examples/data/switch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "properties": {
 5 |       "live":  {
 6 |         "title": "Mode",
 7 |         "type": "string",
 8 |         "titleMap": {
 9 |           "true": "'Yes I do'",
10 |           "false": "'Hell no'"
11 |         }
12 |       }
13 |     }
14 |   },
15 |   "form": [
16 |     {
17 |       "key":"live",
18 |       "type":"switch"
19 |     }
20 |   ]
21 | }


--------------------------------------------------------------------------------
/src/material/submit.html:
--------------------------------------------------------------------------------
 1 | <section class="schema-form-submit {{::form.htmlClass}}" sf-messages>
 2 |   <md-button class="md-raised {{ form.style || 'md-primary' }} {{::form.fieldHtmlClass}}"
 3 |              type="{{::form.type}}"
 4 |              ng-disabled="form.readonly"
 5 |              aria-label="{{::form.title}}">
 6 |     <md-tooltip ng-if="::form.tip">{{::form.tip}}</md-tooltip>
 7 |     {{::form.title}}
 8 |   </md-button>
 9 | </section>
10 | 


--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "preset": "google",
 3 |   "disallowSpacesInsideObjectBrackets": null,
 4 |   "requireSpacesInsideObjectBrackets": {
 5 |     "allExcept": [ "[", "]", "{", "}" ]
 6 |   },
 7 |   "disallowSpacesInsideArrayBrackets": null,
 8 |   "requireSpacesInsideArrayBrackets": {
 9 |     "allExcept": [ "[", "]", "{", "}" ]
10 |   },
11 |   "disallowKeywordsOnNewLine": [ ],
12 |   "disallowMultipleVarDecl": null,
13 |   "maximumLineLength": 120,
14 |   "requireSemicolons": true
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/data/remote-titlemap-books.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "titleMap": [
 3 |     { "value": "jkr1", "name": "Harry Potter", "group": "Childrens" },
 4 |     { "value": "eb1", "name": "Blinky Bill", "group": "Childrens" },
 5 |     { "value": "da1", "name": "A Hitchhiker's Guide To The Galaxy", "group": "Sci-Fi" },
 6 |     { "value": "ow1", "name": "The Picture of Dorian Gray", "group": "Horror" },
 7 |     { "value": "wc", "name": "A Nightmare On Elm Street", "group": "Horror" }
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/data/remote-titlemap-movies.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "titleMap": [
 3 |     { "value": "ss1", "name": "Demolition Man", "group": "Stallone" },
 4 |     { "value": "ss2", "name": "Rocky", "group": "Stallone" },
 5 |     { "value": "ss3", "name": "Rambo", "group": "Stallone" },
 6 |     { "value": "jcvd1", "name": "Double Impact", "group": "Van Damme" },
 7 |     { "value": "jcvd2", "name": "Bloodsport", "group": "Van Damme" },
 8 |     { "value": "jcvd3", "name": "Kickboxer", "group": "Van Damme" }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/data/types.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Types",
 5 |     "properties": {
 6 |       "string":  {
 7 |         "type": "string",
 8 |         "minLength": 3
 9 |       },
10 |       "integer":  {
11 |         "type": "integer"
12 |       },
13 |       "number":  {
14 |         "type": "number"
15 |       },
16 |       "boolean":  {
17 |         "type": "boolean"
18 |       }
19 |     },
20 |     "required": ["number"]
21 |   },
22 |   "form": [
23 |     "*"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/material/textarea.html:
--------------------------------------------------------------------------------
 1 | <md-input-container class="{{::form.htmlClass}} schema-form-textarea" sf-messages sf-layout>
 2 |   <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
 3 |   <textarea ng-class="::form.fieldHtmlClass"
 4 |             id="{{::form.key|sfCamelKey}}"
 5 |             sf-changed="form"
 6 |             ng-disabled="::form.readonly"
 7 |             sf-field-model
 8 |             schema-validate="form"
 9 |             name="{{::form.key|sfCamelKey}}"></textarea>
10 | </md-input-container>
11 | 


--------------------------------------------------------------------------------
/webpack.config.dist.js:
--------------------------------------------------------------------------------
 1 | const config = require('./webpack.config.js');
 2 | const path = require('path');
 3 | 
 4 | config.entry = {
 5 |   'angular-schema-form-material': [ path.join(__dirname, 'src', 'module') ],
 6 |   'angular-schema-form-material-bundled': [ 'angular-schema-form', path.join(__dirname, 'src', 'module') ],
 7 |   'angular-schema-form-material.min': [ path.join(__dirname, 'src', 'module') ],
 8 |   'angular-schema-form-material-bundled.min': [ 'angular-schema-form', path.join(__dirname, 'src', 'module') ],
 9 | }
10 | 
11 | module.exports = config;
12 | 


--------------------------------------------------------------------------------
/examples/data/simple-oneOf.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Comment",
 5 |     "properties": {
 6 |       "name":  {
 7 |         "oneOf": [
 8 |           {
 9 |             "type": "string",
10 |             "enum": ["Bob"]
11 |           },
12 |           {
13 |             "type": "string",
14 |             "pattern": "^\\S+ \\S+$"
15 |           }
16 |         ]
17 |       }
18 |     },
19 |     "required": ["name"]
20 |   },
21 |   "form": [
22 |     {
23 |       "key": "name",
24 |       "title": "Name"
25 |     }
26 | 
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/material/checkbox.html:
--------------------------------------------------------------------------------
 1 | <div class="checkbox schema-form-checkbox {{::form.htmlClass}}"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}"
 3 |      sf-messages>
 4 |   <md-checkbox sf-field-model
 5 |                sf-changed="form"
 6 |                ng-disabled="form.readonly"
 7 |                schema-validate="form"
 8 |                sf-material-class="md-checked"
 9 |                class="{{::form.fieldHtmlClass}}"
10 |                name="{{::form.key|sfCamelKey}}"
11 |                aria-label="{{::form.title}}">
12 |     <span>{{::form.title}}</span>
13 |   </md-checkbox>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/src/material/date.html:
--------------------------------------------------------------------------------
 1 | <div class="schema-form-date {{::form.htmlClass}}">
 2 |   <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
 3 |   <md-datepicker sf-field-model
 4 |                  sf-changed="form"
 5 |                  schema-validate="form"
 6 |                  sf-type-parser="form.schema"
 7 |                  id="{{::form.key|sfCamelKey}}"
 8 |                  ng-show="::form.key"
 9 |                  ng-class="::form.fieldHtmlClass"
10 |                  ng-disabled="::form.readonly"
11 |                  md-placeholder="Enter date" sf-messages>
12 |   </md-datepicker>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/material/switch.html:
--------------------------------------------------------------------------------
 1 | <md-input-container class="schema-form-switch {{::form.htmlClass}}">
 2 |   <md-switch sf-field-model
 3 |              sf-changed="form"
 4 |              sf-type-parser="form.schema"
 5 |              sf-messages
 6 |              schema-validate="form"
 7 |              id="{{::form.key|sfCamelKey}}"
 8 |              aria-label="{{form.title}}"
 9 |              ng-show="::form.key"
10 |              ng-class="form.fieldHtmlClass"
11 |              ng-disabled="::form.readonly">
12 |     <span  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</span>
13 |   </md-switch>
14 | </md-input-container>
15 | 


--------------------------------------------------------------------------------
/src/material/chips.html:
--------------------------------------------------------------------------------
 1 | <div class="form-group schema-form-chips {{::form.htmlClass}}"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
 3 |   <md-chips sf-field-model readonly="form.readonly" flex
 4 |             placeholder="{{::form.title}}">
 5 |     <md-chip-template>
 6 |       <!-- should include an optional template from form.template -->
 7 |       <strong ng-if="!form.template">{{$chip}}</strong>
 8 |     </md-chip-template>
 9 |   </md-chips>
10 |   <div ng-messages="ngModel.$error">
11 |     <!--
12 |        This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
13 |        is needed for the styling
14 |     -->
15 |     <div sf-message ng-message></div>
16 |   </div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/material/checkboxes.html:
--------------------------------------------------------------------------------
 1 | <div sf-array="form" sf-field-model
 2 |      class="form-group schema-form-checkboxes {{::form.htmlClass}}"
 3 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}"
 4 |      sf-messages>
 5 |   <label class="control-label" ng-show="showTitle()">{{::form.title}}</label>
 6 |   <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
 7 |     <md-checkbox ng-model="titleMapValues[$index]"
 8 |                  sf-changed="form"
 9 |                  ng-disabled="::form.readonly"
10 |                  name="{{::form.key|sfCamelKey}}"
11 |                  ng-true-value="true"
12 |                  ng-false-value="false"
13 |                  aria-label="{{::form.title}}">
14 |       {{::form.titleMap[$index].name}}
15 |     </md-checkbox>
16 |   </div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/material/radios-inline.html:
--------------------------------------------------------------------------------
 1 | <div class="form-group schema-form-radios-inline {{::form.htmlClass}}"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" sf-layout sf-messages>
 3 |   <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
 4 |   <md-radio-group layout="row"
 5 |                   sf-field-model="replaceAll"
 6 |                   ng-model="$$value$$"
 7 |                   class="{{::form.fieldHtmlClass}}"
 8 |                   ng-class="{ active: item.value === $$value$$ }"
 9 |                   sf-changed="form"
10 |                   schema-validate="form"
11 |                   ng-disabled="form.readonly"
12 |                   name="{{form.key.join('.')}}">
13 |     <md-radio-button ng-repeat="item in form.titleMap" ng-value="item.value">
14 |       <span ng-bind-html="item.name"></span>
15 |     </md-radio-button>
16 |   </md-radio-group>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/material/default.html:
--------------------------------------------------------------------------------
 1 | <md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"
 2 |                     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
 3 |                     sf-messages sf-layout sf-material-class="md-input-has-value">
 4 |   <label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
 5 |   <input sf-field-model
 6 |          ng-show="::form.key"
 7 |          type="{{::form.type}}"
 8 |          step="any"
 9 |          sf-changed="form"
10 |          placeholder="{{::form.placeholder}}"
11 |          id="{{::form.key|sfCamelKey}}"
12 |          ng-class="::form.fieldHtmlClass"
13 |          sf-type-parser="form.schema"
14 |          ng-disabled="::form.readonly"
15 |          schema-validate="form"
16 |          name="{{::form.key|sfCamelKey}}"
17 |          aria-describedby="{{::form.key|sfCamelKey}}Status" />
18 | </md-input-container>
19 | 


--------------------------------------------------------------------------------
/src/material/radios.html:
--------------------------------------------------------------------------------
 1 | <div class="form-group schema-form-radios {{::form.htmlClass}}"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
 3 |   <label class="control-label" ng-show="showTitle()" aria-label="{{form.title}}" layout="row">{{form.title}} {{form.titleMap | json}}</label>
 4 |   <div>
 5 |     <md-radio-group sf-field-model
 6 |                     sf-changed="form"
 7 |                     ng-disabled="form.readonly"
 8 |                     name="{{form.key.join('.')}}"
 9 |                     sf-layout sf-messages>
10 |       <md-radio-button ng-repeat="item in form.titleMap"
11 |                        ng-value="item.value"
12 |                        class="{{::form.fieldHtmlClass}}"
13 |                        sf-field-model="ng-class"
14 |                        ng-class="{ active: item.value === $$value$$ }">
15 |         <span ng-bind-html="item.name"></span>
16 |       </md-radio-button>
17 |     </md-radio-group>
18 |   </div>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/material/autocomplete.html:
--------------------------------------------------------------------------------
 1 | <div class="form-group {{::form.htmlClass}} schema-form-select"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
 3 |      sf-messages sf-layout>
 4 |   <md-autocomplete flex
 5 |     ng-disabled="form.readonly"
 6 |     ng-model="$$value$$"
 7 |     sf-autocomplete
 8 |     sf-field-model="replaceAll"
 9 |     schema-validate="form"
10 |     md-selected-item="$$value$$"
11 |     md-search-text="searchText"
12 |     md-selected-item-change="'todo';"
13 |     md-items="item in evalExpr('this[\''+form.optionFilter+'\'](\''+searchText+'\')')"
14 |     md-item-text="item.name"
15 |     md-floating-label="{{::form.title}}"
16 |     md-menu-class="autocomplete-custom-template">
17 |     <md-item-template>
18 |       <span md-highlight-text="searchText">{{item.name}}</span>
19 |     </md-item-template>
20 |     <md-not-found>
21 |       No matches found
22 |     </md-not-found>
23 |   </md-autocomplete>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-schema-form-material",
 3 |   "version": "1.0.0-alpha.1",
 4 |   "authors": [
 5 |     "Marcel Bennett <iamanthropic@gmail.com>"
 6 |   ],
 7 |   "description": "Angular Material decorator for Angular Schema Form",
 8 |   "main": "dist/angular-schema-form-material.js",
 9 |   "keywords": [
10 |     "angular-schema-form-decorator",
11 |     "angular material",
12 |     "material design",
13 |     "json-schema-form"
14 |   ],
15 |   "license": "MIT",
16 |   "homepage": "https://github.com/json-schema-form/angular-schema-form-material",
17 |   "ignore": [
18 |     "**/.*",
19 |     "node_modules",
20 |     "bower_components",
21 |     "test",
22 |     "tests"
23 |   ],
24 |   "dependencies": {
25 |     "angular-schema-form": ">=0.8.13"
26 |   },
27 |   "devDependencies": {
28 |     "angular": "1.5.5",
29 |     "angular-animate": "1.5.5",
30 |     "angular-material": "1.1.1",
31 |     "angular-sanitize": "1.5.5",
32 |     "angular-messages": "1.5.5",
33 |     "angular-ui-ace": "~0.2.3",
34 |     "moment": "~2.10.6"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/data/conditional-required.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "properties": {
 5 |       "switch": {
 6 |         "title": "Spam me, please",
 7 |         "type": "boolean"
 8 |       },
 9 |       "email":  {
10 |         "title": "Email",
11 |         "type": "string",
12 |         "pattern": "^\\S+@\\S+$",
13 |         "description": "Email will be used for evil."
14 |       }
15 |     },
16 |     "required": ["switch"]
17 |   },
18 |   "form": [
19 |     {
20 |       "type": "help",
21 |       "helpvalue": "<p>Schema Form does not support oneOf (yet), but you can do a workaround and simulate certain scenarios with 'condition' and 'required'  (and/or 'readonly') in the form.</p>"
22 |     },
23 |     "switch",
24 |     {
25 |       "key": "email",
26 |       "condition": "model.switch",
27 |       "required": true
28 |     },
29 |     {
30 |       "key": "email",
31 |       "condition": "!model.switch"
32 |     },
33 |     {
34 |       "type": "submit",
35 | 	    "style": "btn-info",
36 |       "title": "OK"
37 |     }
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/examples/data/simple.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Comment",
 5 |     "properties": {
 6 |       "name":  {
 7 |         "title": "Name",
 8 |         "type": "string"
 9 |       },
10 |       "date":  {
11 |         "title": "Date",
12 |         "type": "string",
13 |         "format":"date"
14 |       },
15 |       "email":  {
16 |         "title": "Email",
17 |         "type": "string",
18 |         "pattern": "^\\S+@\\S+$",
19 |         "description": "Email will be used for evil."
20 |       },
21 |       "comment": {
22 |         "title": "Comment",
23 |         "type": "string",
24 |         "maxLength": 20,
25 |         "validationMessage": "Don't be greedy!"
26 |       }
27 |     },
28 |     "required": ["name","email","comment"]
29 |   },
30 |   "form": [
31 |     "name",
32 |     "date",
33 |     "email",
34 |     {
35 |       "key": "comment",
36 |       "type": "textarea",
37 |       "placeholder": "Make a comment"
38 |     },
39 |     {
40 |       "type": "submit",
41 | 	  "style": "btn-info",
42 |       "title": "OK"
43 |     }
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/examples/data/autocomplete.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Arnold Schwarzenegger",
 5 |     "properties": {
 6 |       "first": {
 7 |         "title": "What is your favourite Schwarzenegger movie?",
 8 |         "type": "object"
 9 |       },
10 |       "second": {
11 |         "title": "What is your favourite Schwarzenegger movie?",
12 |         "type": "object"
13 |       }
14 |     }
15 |   },
16 |   "form": [
17 |     {
18 |       "key": "first",
19 |       "type": "autocomplete",
20 |       "optionFilter": "querySearch"
21 |     },
22 |     {
23 |       "type": "help",
24 |       "helpvalue": "I only need at least 1 character"
25 |     },
26 |     {
27 |       "title": "What is your second favourite Schwarzenegger movie?",
28 |       "key": "second",
29 |       "type": "autocomplete",
30 |       "optionFilter": "querySearch",
31 |       "minLength": 4
32 |     },
33 |     {
34 |       "type": "help",
35 |       "helpvalue": "I need at least 4 non-space characters"
36 |     },
37 |     {
38 |       "type": "submit",
39 |       "style": "btn-info",
40 |       "title": "OK"
41 |     }
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/src/material/select.html:
--------------------------------------------------------------------------------
 1 | <md-input-container
 2 |     class="form-group {{::form.htmlClass}} schema-form-select"
 3 |     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
 4 |     sf-messages sf-layout>
 5 |   <label ng-show="::showTitle()">{{::form.title}}</label>
 6 |   <md-select sf-field-model schema-validate="form">
 7 |     <md-optgroup ng-repeat-start="(key, opt) in form.getOptions(form, evalExpr) | orderBy:'group' as optGroups"
 8 |                  ng-if="opt.group && opt.group != optGroups[key-1].group"
 9 |                  label="{{::opt.group}}"
10 |                  aria-label="{{::opt.group}}">
11 |       <md-option ng-repeat="(key, filtered) in form.getOptions(form, evalExpr) | filter: {group: opt.group} | orderBy:'name' as opts"
12 |                  ng-value="::filtered.value"
13 |                  aria-label="{{::filtered.name}}">{{::filtered.name}}</md-option>
14 |     </md-optgroup>
15 |     <md-option   ng-if="!opt.group"
16 |                  ng-value="::opt.value"
17 |                  ng-repeat-end>{{::opt.name}}</md-option>
18 |   </md-select>
19 | </md-input-container>
20 | 


--------------------------------------------------------------------------------
/src/material-class.js:
--------------------------------------------------------------------------------
 1 | angular.module('schemaForm').directive('sfMaterialClass', sfMaterialClassDirective);
 2 | 
 3 | sfMaterialClassDirective.$inject = [
 4 |   '$compile', '$timeout'
 5 | ];
 6 | 
 7 | function sfMaterialClassDirective($compile, $timeout) {
 8 |     return {
 9 |         restrict : 'A',
10 |         scope    : false,
11 |         link     : function(scope, element, attrs, ngModel) {
12 |             function reduceHelper(obj, i) {return obj[i]}
13 | 
14 |             var modelValue;
15 |             try {
16 |                 modelValue = scope.form.key.reduce(reduceHelper, scope.model);
17 |             } catch (e) {
18 |                 modelValue = undefined;
19 |             }
20 | 
21 |             // Element class is not set in DOM if executed immediately.
22 |             // I don't understand exactly why but it's probably related to other directive job.
23 |             $timeout(function() {
24 |                 if (modelValue !== null && typeof modelValue !== 'undefined' && modelValue !== false) {
25 |                     element.addClass(attrs.sfMaterialClass);
26 |                 }
27 |             }, 0);
28 |         }
29 |     };
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 JSON Schema Form
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/material/radio-buttons.html:
--------------------------------------------------------------------------------
 1 | <div class="form-group schema-form-radiobuttons {{::form.htmlClass}}"
 2 |      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" sf-layout sf-messages>
 3 |   <div>
 4 |     <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
 5 |   </div>
 6 |   <section layout="row" layout-sm="column" layout-align="center center">
 7 |     <md-input-container ng-repeat="item in form.titleMap">
 8 |       <md-button type="button"
 9 |                  class="group md-raised"
10 |                  sf-field-model="replaceAll"
11 |                  ng-model="$$value$$"
12 |                  sf-changed="form"
13 |                  class="radio {{::form.fieldHtmlClass}}"
14 |                  ng-class="{'md-primary': ($$value$$ == item.value)}"
15 |                  ng-disabled="form.readonly"
16 |                  ng-model-options="form.ngModelOptions"
17 |                  schema-validate="form"
18 |                  ng-value="item.value"
19 |                  ng-click="$$value$$ = item.value"
20 |                  name="{{form.key.join('.')}}">
21 |         <span ng-bind-html="item.name"></span>
22 |       </md-button>
23 |     </md-input-container>
24 |   </section>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/examples/data/complex-keys.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Complex Key Support",
 5 |     "properties": {
 6 |       "a[\"b\"].c": {
 7 |         "type": "string"
 8 |       },
 9 |       "simple": {
10 |         "type": "object",
11 |         "properties": {
12 |           "prøp": {
13 |             "title": "UTF8 in both dot and bracket notation",
14 |             "type": "string"
15 |           }
16 |         }
17 |       },
18 |       "array-key": {
19 |         "type": "array",
20 |         "items": {
21 |           "type": "object",
22 |           "properties": {
23 |             "a'rr[\"l":  {
24 |               "title": "Control Characters",
25 |               "type": "string"
26 |             },
27 |             "˙∆∂∞˚¬":  {
28 |               "type": "string"
29 |             }
30 |           },
31 |           "required": [
32 |             "a'rr[\"l",
33 |             "˙∆∂∞˚¬"
34 |           ]
35 |         }
36 |       }
37 |     }
38 |   },
39 |   "form": [
40 |     {
41 |       "type": "help",
42 |       "helpvalue": "Complex keys are only supported with AngularJS version 1.3.x, see <a href=\"https://github.com/Textalk/angular-schema-form/blob/master/docs/knownlimitations.md\">known limitations</a> in the docs."
43 |     },
44 |     "['a[\"b\"].c']",
45 |     {
46 |       "key": "array-key",
47 |       "items": [
48 |         "['array-key'][]['a'rr[\"l']",
49 |         {
50 |           "key": "['array-key'][]['˙∆∂∞˚¬']",
51 |           "title": "Unicode Characters"
52 |         }
53 |       ]
54 |     },
55 |     {
56 |       "key": "simple",
57 |       "items": [
58 |         "simple.prøp"
59 |       ]
60 |     }
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/examples/data/tabarray.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Comment",
 5 |     "properties": {
 6 |       "comments": {
 7 |         "type": "array",
 8 |         "items": {
 9 |           "type": "object",
10 |           "properties": {
11 |             "name":  {
12 |               "title": "Name",
13 |               "type": "string"
14 |             },
15 |             "email":  {
16 |               "title": "Email",
17 |               "type": "string",
18 |               "pattern": "^\\S+@\\S+$",
19 |               "description": "Email will be used for evil."
20 |             },
21 |             "comment": {
22 |               "title": "Comment",
23 |               "type": "string",
24 |               "maxLength": 20,
25 |               "validationMessage": "Don't be greedy!"
26 |             }
27 |           },
28 |           "required": ["name","email","comment"]
29 |         }
30 |       }
31 |     }
32 |   },
33 |   "form": [
34 |     {
35 |       "type": "help",
36 |       "helpvalue": "<h4>Tabbed Array Example</h4><p>Tab arrays can have tabs to the left, top or right.</p>"
37 |     },
38 |     {
39 |       "key": "comments",
40 |       "type": "tabarray",
41 | 	  "add": "New",
42 | 	  "remove": "Delete",
43 | 	  "style": {
44 | 		"remove": "btn-danger"
45 | 	  },
46 |       "title": "{{ value.name || 'Tab '+$index }}",
47 |       "items": [
48 |         "comments[].name",
49 |         "comments[].email",
50 |         {
51 |           "key": "comments[].comment",
52 |           "type": "textarea"
53 |         }
54 |       ]
55 |     },
56 |     {
57 |       "type": "submit",
58 |       "style": "btn-default",
59 |       "title": "OK"
60 |     }
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/src/material/array.html:
--------------------------------------------------------------------------------
 1 | <div  class="schema-form-array {{::form.htmlClass}}"
 2 |       sf-field-model="sf-new-array"
 3 |       sf-new-array>
 4 |   <label class="control-label" ng-show="showTitle()">{{ form.title }}</label>
 5 |   <md-list class="list-group" sf-field-model ui-sortable="form.sortOptions">
 6 |     <md-list-item layout="row" class="list-group-item"
 7 |              sf-field-model="ng-repeat"
 8 |              ng-repeat="item in modelArray track by $index"
 9 |              schema-form-array-items
10 |              class="{{::form.fieldHtmlClass}}">
11 |       <md-button flex="none" flex-order="2"
12 |                  type="button"
13 |                  ng-hide="form.readonly || form.remove === null"
14 |                  ng-click="deleteFromArray($index)"
15 |                  ng-disabled="form.schema.minItems >= modelArray.length"
16 |                  class="md-icon-button" aria-label="More"
17 |                  style="position: relative; z-index: 20;">
18 |         <md-icon>close</md-icon>
19 |       </md-button>
20 |     </md-list-item>
21 |   </md-list>
22 |   <div class="clearfix" style="padding: 15px;" ng-model="modelArray" schema-validate="form">
23 |     <div class="help-block"
24 |          ng-show="(hasError() && errorMessage(schemaError())) || form.description"
25 |          ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
26 | 
27 |     <md-button ng-hide="form.readonly || form.add === null"
28 |             ng-click="appendToArray()"
29 |             ng-disabled="form.schema.maxItems <= modelArray.length"
30 |             type="button"
31 |             class="btn md-raised md-primary {{ form.style.add || 'btn-default' }} pull-right">
32 |       <i class="glyphicon glyphicon-plus"></i>
33 |       {{ form.add || 'Add'}}
34 |     </md-button>
35 |   </div>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-schema-form-material",
 3 |   "version": "1.0.0-alpha.2",
 4 |   "description": "Angular Material decorator for Angular Schema Form",
 5 |   "main": "dist/material-decorator.js",
 6 |   "scripts": {
 7 |     "build": "webpack",
 8 |     "dist": "webpack --config webpack.config.dist.js",
 9 |     "watch": "webpack --watch",
10 |     "test": "echo \"Error: test not currently available\" && exit 1",
11 |     "test-me": "karma start --log-level debug"
12 |   },
13 |   "keywords": [
14 |     "angular-schema-form-decorator"
15 |   ],
16 |   "author": "json-schema-form",
17 |   "contributors": [
18 |     "Marcel J Bennett <iamanthropic@gmail.com> (https://github.com/Anthropic)"
19 |   ],
20 |   "license": "MIT",
21 |   "dependencies": {
22 |     "angular": ">= 1.2",
23 |     "angular-messages": "^1.5.0",
24 |     "angular-sanitize": ">= 1.2",
25 |     "tv4": "~1.0.15"
26 |   },
27 |   "devDependencies": {
28 |     "babel": "^6.5.2",
29 |     "babel-core": "^6.10.4",
30 |     "babel-loader": "^6.2.4",
31 |     "babel-polyfill": "^6.9.1",
32 |     "babel-preset-es2015": "^6.9.0",
33 |     "chai": "^3.5.0",
34 |     "coveralls": "^2.11.0",
35 |     "html": "^1.0.0",
36 |     "html-loader": "^0.4.4",
37 |     "html-webpack-plugin": "^2.25.0",
38 |     "karma": "^0.13.22",
39 |     "karma-chai-sinon": "^0.1.5",
40 |     "karma-coverage": "^1.0.0",
41 |     "karma-growler-reporter": "0.0.1",
42 |     "karma-mocha": "^1.0.1",
43 |     "karma-phantomjs-launcher": "^0.1.4",
44 |     "karma-webpack": "^1.7.0",
45 |     "mocha": "^2.5.3",
46 |     "mocha-lcov-reporter": "0.0.1",
47 |     "ngtemplate-loader": "^1.3.1",
48 |     "protractor": "^2.5.1",
49 |     "sinon": "^1.17.4",
50 |     "sinon-chai": "^2.8.0",
51 |     "streamqueue": "^0.1.3",
52 |     "uglify-js": "^2.6.2",
53 |     "webpack": "^2.1.0-beta.28",
54 |     "webpack-dev-server": "^2.1.0-beta.12"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 |   streamqueue = require('streamqueue'),
 3 |   minifyHtml = require('gulp-minify-html'),
 4 |   templateCache = require('gulp-angular-templatecache'),
 5 |   concat = require('gulp-concat'),
 6 |   rename = require('gulp-rename'),
 7 |   uglify = require('gulp-uglify'),
 8 |   jscs = require('gulp-jscs');
 9 | 
10 | gulp.task('build', function() {
11 |   var stream = streamqueue({ objectMode: true });
12 |   stream.queue(
13 |     gulp.src('./src/**/*.html')
14 |     .pipe(minifyHtml({
15 |       empty: true,
16 |       spare: true,
17 |       quotes: true
18 |     }))
19 |     .pipe(templateCache({
20 |       module: 'schemaForm',
21 |       root: 'decorators/material/'
22 |     }))
23 |     );
24 |   stream.queue(gulp.src('./src/**/*.js'));
25 | 
26 |   stream.done()
27 |   .pipe(concat('material-decorator.js'))
28 |   .pipe(gulp.dest('./'))
29 |   .pipe(uglify())
30 |   .pipe(rename('material-decorator.min.js'))
31 |   .pipe(gulp.dest('./'));
32 | 
33 | });
34 | gulp.task('templates', function() {
35 |   var stream = streamqueue({ objectMode: true });
36 |   stream.queue(
37 |     gulp.src('./src/**/*.html')
38 |     .pipe(minifyHtml({
39 |       empty: true,
40 |       spare: true,
41 |       quotes: true
42 |     }))
43 |     .pipe(templateCache({
44 |       module: 'schemaForm',
45 |       root: 'decorators/material/'
46 |     }))
47 |     );
48 | 
49 |   stream.done()
50 |   .pipe(concat('angular-schema-form-material-templates.js'))
51 |   .pipe(gulp.dest('./src'))
52 |   .pipe(uglify())
53 |   .pipe(rename('angular-schema-form-material-templates.min.js'))
54 |   .pipe(gulp.dest('./src'));
55 | 
56 | });
57 | 
58 | gulp.task('jscs', function() {
59 |   gulp.src('./src/**/*.js')
60 |       .pipe(jscs());
61 | });
62 | 
63 | gulp.task('watch', function() {
64 |   gulp.watch('./src/**/*', [ 'default' ]);
65 | });
66 | 
67 | gulp.task('default', [ 'templates' ]);
68 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | Contributing
 2 | ------------
 3 | We love contributions!
 4 | 
 5 | Contact @davidlgj or @Anthropic to ensure you don't work on something already in progress!
 6 | 
 7 | A few things to note:
 8 |   * Error messages are not handled in the standard Angular Material way due to ASF behaviour.
 9 |   To add messages to a template add **sf-messages** to the **parent** you want messages to be the last child of.
10 |   * Look at the API page for the Angular Material component you are looking at, there are possibly a few attributes
11 |   not used in the demo that may be useful. Please try to add as many useful attributes as you can, we can discuss the
12 |   best way to implement them in the ASF form data.
13 | 
14 |   As an example, if the template requires a remote titleMap, consider adding optionData as a variable in the form definition that can contain a text string reference to a variable on the sf-form $scope.
15 | 
16 | **Please base any merge request on the *development* branch instead of *master*.**
17 | 
18 | The reason for this is that we're only really using *development* for now but will eventually start trying to use
19 | [git flow](http://danielkummer.github.io/git-flow-cheatsheet/), and it makes merging your pull
20 | request a heck of a lot easier for us.
21 | 
22 | Please **avoid including the material-decorator.js or material-decorator.min.js** as that can make merging harder, and we
23 | will always generate these files when we make a new release.
24 | 
25 | With new features we love to see updates to the docs as well as tests, that makes it super
26 | easy and fast for us to merge it!
27 | 
28 | Also consider running any code through the **JavaScript Code Style** checker [jscs](https://github.com/mdevils/node-jscs)
29 | (or even better use it in your editor) using the .jscsrc file in the repo root, which should be picked up by the IDE. You can also us `gulp jscs` to
30 | check your code.
31 | 


--------------------------------------------------------------------------------
/examples/data/array.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "title": "Comment",
 5 |     "required": ["comments"],
 6 |     "properties": {
 7 |       "comments": {
 8 |         "type": "array",
 9 |         "maxItems": 2,
10 |         "items": {
11 |           "type": "object",
12 |           "properties": {
13 |             "name":  {
14 |               "title": "Name",
15 |               "type": "string"
16 |             },
17 |             "email":  {
18 |               "title": "Email",
19 |               "type": "string",
20 |               "pattern": "^\\S+@\\S+$",
21 |               "description": "Email will be used for evil."
22 |             },
23 |             "spam": {
24 |               "title": "Spam",
25 |               "type": "boolean",
26 |               "default": true
27 |             },
28 |             "comment": {
29 |               "title": "Comment",
30 |               "type": "string",
31 |               "maxLength": 20,
32 |               "validationMessage": "Don't be greedy!"
33 |             }
34 |           },
35 |           "required": ["name","comment"]
36 |         }
37 |       }
38 |     }
39 |   },
40 |   "form": [
41 |     {
42 |       "type": "help",
43 |       "helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
44 |     },
45 |     {
46 |       "key": "comments",
47 |   	  "add": "New",
48 |   	  "style": {
49 |   		"add": "btn-success"
50 | 	  },
51 |       "items": [
52 |         "comments[].name",
53 |         "comments[].email",
54 |         {
55 |           "key": "comments[].spam",
56 |           "type": "checkbox",
57 |           "title": "Yes I want spam.",
58 |           "condition": "model.comments[arrayIndex].email"
59 |         },
60 |         {
61 |           "key": "comments[].comment",
62 |           "type": "textarea"
63 |         }
64 |       ]
65 |     },
66 |     {
67 |       "type": "submit",
68 |       "style": "btn-info",
69 |       "title": "OK"
70 |     }
71 |   ]
72 | }
73 | 


--------------------------------------------------------------------------------
/src/type-parser.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * It might be a bug, but currently input[type=number] does not add
 3 |  * a parser, so the model gets populated with a string. It does however stop non numbers so it
 4 |  * must have some preproccessing. Anyway, this adds parser before schema-validate hooks into it.
 5 |  * FIXME: this is still not a complete solution. Inputting a string in an input[type=number] results
 6 |  * in parsers never firing and ngModel value removed. So no validation from schema-validate either.
 7 |  */
 8 | angular.module('schemaForm').directive('sfTypeParser', function() {
 9 |   return {
10 |     restrict: 'A',
11 |     scope: false,
12 |     require: 'ngModel',
13 |     link: function(scope, element, attrs, ngModel) {
14 |       var once = scope.$watch(attrs.sfTypeParser, function(schema) {
15 |         if (!schema) {
16 |           return;
17 |         }
18 | 
19 |         var isNumber  = schema.type.indexOf('number') !== -1;
20 |         var isInteger = schema.type.indexOf('integer') !== -1;
21 |         var numberRE  = /^[0-9]*$/;
22 |         // Use index of since type can be either an array with two values or a string.
23 |         if (isNumber || isInteger) {
24 |           // The timing here seems to work. i.e. we get in before schema-validate
25 |           ngModel.$parsers.push(function(viewValue) {
26 |             var value;
27 |             if (isNumber) {
28 |               value = parseFloat(viewValue);
29 |             } else if (numberRE.test(viewValue)) {
30 |               // We test the value to check that it's a valid integer, otherwise we can easily
31 |               // get float -> integer parsing behind the scenes.
32 |               value = parseInt(viewValue, 10);
33 |             }
34 |             console.log('parser', numberRE.test(viewValue), viewValue, value)
35 |             if (value === undefined || isNaN(value)) {
36 |               //Let the validation fail. @FIXME: it fails with "required" for some reason.
37 |               return viewValue;
38 |             }
39 |             return value;
40 |           });
41 |         }
42 | 
43 |         once();
44 |       });
45 |     }
46 |   };
47 | });
48 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Created by https://www.gitignore.io/api/osx,windows,phpstorm
  2 | 
  3 | ### OSX ###
  4 | .DS_Store
  5 | .AppleDouble
  6 | .LSOverride
  7 | 
  8 | # Icon must end with two \r
  9 | Icon
 10 | 
 11 | 
 12 | # Thumbnails
 13 | ._*
 14 | 
 15 | # Files that might appear in the root of a volume
 16 | .DocumentRevisions-V100
 17 | .fseventsd
 18 | .Spotlight-V100
 19 | .TemporaryItems
 20 | .Trashes
 21 | .VolumeIcon.icns
 22 | 
 23 | # Directories potentially created on remote AFP share
 24 | .AppleDB
 25 | .AppleDesktop
 26 | Network Trash Folder
 27 | Temporary Items
 28 | .apdisk
 29 | 
 30 | 
 31 | ### Windows ###
 32 | # Windows image file caches
 33 | Thumbs.db
 34 | ehthumbs.db
 35 | 
 36 | # Folder config file
 37 | Desktop.ini
 38 | 
 39 | # Recycle Bin used on file shares
 40 | $RECYCLE.BIN/
 41 | 
 42 | # Windows Installer files
 43 | *.cab
 44 | *.msi
 45 | *.msm
 46 | *.msp
 47 | 
 48 | # Windows shortcuts
 49 | *.lnk
 50 | 
 51 | 
 52 | ### PhpStorm ###
 53 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
 54 | 
 55 | *.iml
 56 | 
 57 | ## Directory-based project format:
 58 | .idea/
 59 | # if you remove the above rule, at least ignore the following:
 60 | 
 61 | # User-specific stuff:
 62 | # .idea/workspace.xml
 63 | # .idea/tasks.xml
 64 | # .idea/dictionaries
 65 | 
 66 | # Sensitive or high-churn files:
 67 | # .idea/dataSources.ids
 68 | # .idea/dataSources.xml
 69 | # .idea/sqlDataSources.xml
 70 | # .idea/dynamic.xml
 71 | # .idea/uiDesigner.xml
 72 | 
 73 | # Gradle:
 74 | # .idea/gradle.xml
 75 | # .idea/libraries
 76 | 
 77 | # Mongo Explorer plugin:
 78 | # .idea/mongoSettings.xml
 79 | 
 80 | ## File-based project format:
 81 | *.ipr
 82 | *.iws
 83 | 
 84 | ## Plugin-specific files:
 85 | 
 86 | # IntelliJ
 87 | /out/
 88 | 
 89 | # mpeltonen/sbt-idea plugin
 90 | .idea_modules/
 91 | 
 92 | # JIRA plugin
 93 | atlassian-ide-plugin.xml
 94 | 
 95 | # Crashlytics plugin (for Android Studio and IntelliJ)
 96 | com_crashlytics_export_strings.xml
 97 | crashlytics.properties
 98 | crashlytics-build.properties
 99 | 
100 | 
101 | bower_components
102 | node_modules
103 | 


--------------------------------------------------------------------------------
/examples/data/tabs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "schema": {
 3 |     "type": "object",
 4 |     "properties": {
 5 |       "clan": {
 6 |         "title": "Ninja Clan",
 7 |         "description": "Which clan do you wish to complete your task?",
 8 |         "type": "string",
 9 |         "enum": [ "Iga", "koga" ]
10 |       },
11 |       "armySize": {
12 |         "type": "number",
13 |         "title": "How many Ninja will be required?",
14 |         "min": 1,
15 |         "max": 7
16 |       },
17 |       "weaponOfChoice": {
18 |         "type": "string",
19 |         "title": "Favourite tool",
20 |         "enum": ["Nunchuku","Sai","Hanbo","Tonfa"]
21 |       },
22 |       "colour": {
23 |         "type": "string",
24 |         "title": "Color preference",
25 |         "enum": ["Black"]
26 |       },
27 |       "date": {
28 |         "title": "Date of assault",
29 |         "type": "string",
30 |         "format": "date"
31 |       },
32 |       "victim": {
33 |         "title": "Target",
34 |         "type": "string"
35 |       },
36 |       "assassinationStyle": {
37 |         "title": "How would you like to dispatch your target?",
38 |         "type": "string",
39 |         "enum": [ "With honour", "With much blood", "With much suffering" ]
40 |       },
41 |       "fee": {
42 |         "title": "I accept late fee payment will result in a most dishonourable and painfully slow death",
43 |         "type": "boolean"
44 |       },
45 |       "suggestions": {
46 |         "title": "Any suggestions based on local knowledge?",
47 |         "type": "string"
48 |       }
49 |     }
50 |   },
51 |   "form": [
52 |     {
53 |       "type": "tabs",
54 |       "tabs": [
55 |         {
56 |           "title": "Ninja Details",
57 |           "items": [
58 |             "clan",
59 |             "armySize",
60 |             "weaponOfChoice",
61 |             "colour"
62 |           ]
63 |         },
64 |         {
65 |           "title": "Job Properties",
66 |           "items": [
67 |             "date",
68 |             "victim",
69 |             "assassinationStyle",
70 |             "fee"
71 |           ]
72 |         },
73 |         {
74 |           "title": "Further Information",
75 |           "items": [
76 |             {
77 |               "key":"suggestions",
78 |               "type": "textarea"
79 |             }
80 |           ]
81 |         }
82 |       ]
83 |     }
84 |   ]
85 | }
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Angular Material Decorator
 2 | ==========================
 3 | 
 4 | [![Join the chat at https://gitter.im/json-schema-form/angular-schema-form-material](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/json-schema-form/angular-schema-form-material?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 5 | 
 6 | For https://github.com/json-schema-form/angular-schema-form
 7 | 
 8 | Work In Progress
 9 | ----------------
10 | 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.
11 | 
12 | All this means is that it is **very** much a **work in progress**.
13 | 
14 | Testing
15 | ------------
16 | To test clone repo and:
17 | ```
18 | npm install
19 | bower install
20 | gulp minify
21 | ```
22 | 
23 | Start favorite http server (http-server or puer for instance) and open
24 | `examples/material-example.html`
25 | 
26 | There is also a `gulp watch` task that minifys on change.
27 | 
28 | Known Issues
29 | ------------
30 |   * Almost nothing works if the schema uses bootstrap decorator features, it does not have array or complex keys yet and many other features are still missing or have no equivalent.
31 |   * Needs development branch of angular schema form.
32 |   * Only basic support for inputs, textarea, radios, radiobuttons, checkboxes, datepicker and tabs are implemented.
33 |   * Angular material theme only works when `$mdThemingProvider.alwaysWatchTheme(true);` is used.
34 |   * Until Angular Material hits 1.0.0 there is still chances that features may break again.
35 | 
36 | Contributing
37 | ------------
38 | Contributions are welcome! Please see [Contributing.md](CONTRIBUTING.md) for more info.
39 | 
40 | Future
41 | ------
42 | Using the new builder opens up for a lot of optimization. Primarily we can get rid of a lot of small
43 | watches by using build helpers. For instance, slapping on a `sf-changed` directive *only* if the
44 | form definition has an `onChange` option.
45 | 
46 | Testing
47 | -------
48 | ```
49 | npm install -g protractor
50 | protractor test/protractor/conf.js
51 | ```
52 | 
53 | change baseurl in test/protractor/conf.js to match ur local environment.
54 | 
55 | Copyright (c) 2016 Marcel John Bennett, David Jensen
56 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /* global __dirname */
 2 | /**
 3 | * NOTE in order to build with angular-schema-form you must
 4 | * have it cloned as a sibling directory to this one or npm
 5 | * installed with the version you wish to build with.
 6 | */
 7 | const webpack = require('webpack');
 8 | const path = require('path');
 9 | const package = require('./package.json');
10 | const buildDate = new Date();
11 | console.log('Angular Schema Form Material v' + package.version);
12 | const plugins = [
13 |   new webpack.BannerPlugin(
14 |     'angular-schema-form-material\n' +
15 |     '@version ' + package.version + '\n' +
16 |     '@date ' + buildDate.toUTCString() + '\n' +
17 |     '@link https://github.com/json-schema-form/angular-schema-form-material\n' +
18 |     '@license MIT\n' +
19 |     'Copyright (c) 2014-' + buildDate.getFullYear() + ' JSON Schema Form'),
20 |   /* Minification only occurs if the output is named .min */
21 |   new webpack.optimize.UglifyJsPlugin(
22 |     {
23 |       include: /\.min\.js$/,
24 |       minimize: true
25 |     })
26 | ];
27 | 
28 | module.exports = {
29 |   entry: {
30 |     'angular-schema-form-material': [ path.join(__dirname, 'src', 'module') ],
31 |     'angular-schema-form-material-bundled': [ 'angular-schema-form', path.join(__dirname, 'src', 'module') ],
32 |   },
33 |   output: {
34 |     path: path.join(__dirname, 'dist'),
35 |     filename: '[name].js',
36 |     sourceMapFilename: '[name].map'
37 |   },
38 |   resolve: {
39 |     modules: [
40 |       path.join(__dirname, "src"),
41 |       path.join(__dirname, "src", "material"),
42 |       path.join(__dirname, "..", "angular-schema-form", "dist"),
43 |       'node_modules',
44 |     ],
45 |     extensions: [ '.js', '.html' ]
46 |   },
47 |   module: {
48 |     rules: [
49 |       {
50 |         test: /\.js$/,
51 |         use: [{
52 |           loader: 'babel-loader',
53 |           options: {
54 |             presets: [
55 |               [ "es2015", { "modules": false }]
56 |             ]
57 |           }
58 |         }],
59 |         exclude: /(node_modules|angular-schema-form)/
60 |       },
61 |       {
62 |         test: /\.html$/,
63 |         use: [{
64 |           loader: 'ngtemplate-loader',
65 |           options: {
66 |             relativeTo: path.join(__dirname, 'src')
67 |           }
68 |         }, 'html-loader'],
69 |         exclude: /(index)/
70 |       }
71 |     ]
72 |   },
73 |   externals: {
74 |     'angular': 'var angular',
75 |     'tv4': 'var tv4',
76 |     'bundle!angular-schema-form': 'commonjs angular-schema-form'
77 |   },
78 |   plugins: plugins
79 | };
80 | 


--------------------------------------------------------------------------------
/src/material/tabarray.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div sf-array="form" ng-init="selected = { tab: 0 }"
 3 |      class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || 'left'}} {{::form.htmlClass}}">
 4 |   <div ng-if="!form.tabType || form.tabType !== 'right'"
 5 |        ng-class="{'col-xs-3': !form.tabType || form.tabType === 'left'}">
 6 |     <ul class="nav nav-tabs"
 7 |         ng-class="{ 'tabs-left': !form.tabType || form.tabType === 'left'}">
 8 |       <li ng-repeat="item in modelArray track by $index"
 9 |           ng-click="$event.preventDefault() || (selected.tab = $index)"
10 |           ng-class="{active: selected.tab === $index}">
11 |           <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
12 |       </li>
13 |       <li ng-hide="form.readonly" ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
14 |         <a href="#">
15 |           <i class="glyphicon glyphicon-plus"></i>
16 |           {{ form.add || 'Add'}}
17 |           </a>
18 |       </li>
19 |     </ul>
20 |   </div>
21 | 
22 |   <div ng-class="{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}">
23 |     <div class="tab-content {{::form.fieldHtmlClass}}">
24 |       <div class="tab-pane clearfix"
25 |            ng-repeat="item in modelArray track by $index"
26 |            ng-show="selected.tab === $index"
27 |            ng-class="{active: selected.tab === $index}">
28 |            <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
29 | 
30 | 
31 |            <button ng-hide="form.readonly"
32 |                    ng-click="selected.tab = deleteFromArray($index).length - 1"
33 |                    type="button"
34 |                    class="btn {{ form.style.remove || 'btn-default' }} pull-right">
35 |              <i class="glyphicon glyphicon-trash"></i>
36 |              {{ form.remove || 'Remove'}}
37 |            </button>
38 |       </div>
39 |     </div>
40 |   </div>
41 | 
42 |   <div ng-if="form.tabType === 'right'" class="col-xs-3">
43 |     <ul class="nav nav-tabs tabs-right">
44 |       <li ng-repeat="item in modelArray track by $index"
45 |           ng-click="$event.preventDefault() || (selected.tab = $index)"
46 |           ng-class="{active: selected.tab === $index}">
47 |           <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
48 |       </li>
49 |       <li ng-hide="form.readonly" ng-click="$event.preventDefault() || appendToArray()">
50 |         <a href="#">
51 |           <i class="glyphicon glyphicon-plus"></i>
52 |           {{ form.add || 'Add'}}
53 |           </a>
54 |       </li>
55 |     </ul>
56 |   </div>
57 | 
58 | </div>
59 | 


--------------------------------------------------------------------------------
/test/protractor/specs/validation-tv4-errors.js:
--------------------------------------------------------------------------------
 1 | /* global browser, it, describe, element, by */
 2 | 
 3 | describe('Schema Form validation messages', function () {
 4 | 
 5 |     describe('tv4-validators', function () {
 6 |         var URL = 'angular-schema-form-material/examples/material-example.html#/86fb7505a8ab6a43bc70';
 7 | 
 8 |         var validationMessageTestBuilder = function (testToDo) {
 9 | 
10 |             Object.keys(testToDo.validationCodes).forEach(function (validationCodeIndex) {
11 |                 it('validation test, expecting class "' + testToDo.validationCodes[validationCodeIndex] + ' when input is ' + testToDo.value, function () {
12 | 
13 |                     browser.get(URL);
14 |                     var input = element.all(by.css('form[name=ngform] input')).get(testToDo.field);
15 |                     input.sendKeys(testToDo.value);
16 | 
17 |                     expect(input.evaluate('ngModel.$valid')).toEqual(testToDo.valid);
18 |                     expect(input.getAttribute('class')).toMatch(testToDo.validationCodes[validationCodeIndex])
19 | 
20 | 
21 |                 });
22 | 
23 |             });
24 | 
25 |         };
26 | 
27 | 
28 |         var testsToDo = [
29 |             {
30 |                 field: 0,   //0 string, 1 integer
31 |                 value: "s",
32 |                 validationCodes: ['ng-invalid-tv4-200'],
33 |                 valid: false
34 |             },
35 |             {
36 |                 field: 0,
37 |                 value: 'tooo long string',
38 |                 validationCodes: ['ng-invalid-tv4-201'],
39 |                 valid: false
40 |             },
41 |             {
42 |                 field: 0,
43 |                 value: 'foo 66',
44 |                 validationCodes: ['ng-invalid-tv4-202'],
45 |                 valid: false
46 |             },
47 |             {
48 |                 field: 0,
49 |                 value: 'foobar',
50 |                 validationCodes: ['ng-valid-tv4-200'],
51 |                 valid: true
52 |             },
53 |             {
54 |                 field: 1,
55 |                 value: '3',
56 |                 validationCodes: ['ng-invalid-tv4-101'],
57 |                 valid: false
58 |             },
59 |             {
60 |                 field: 1,
61 |                 value: '66',
62 |                 validationCodes: ['ng-invalid-tv4-103'],
63 |                 valid: false
64 |             },
65 |             {
66 |                 field: 1,
67 |                 value: '11',
68 |                 validationCodes: ['ng-invalid-tv4-100'],
69 |                 valid: false
70 |             },
71 |             {
72 |                 field: 1,
73 |                 value: 'aaa',
74 |                 validationCodes: ['ng-invalid-tv4-302'],
75 |                 valid: false
76 |             }
77 |         ];
78 | 
79 | 
80 |         Object.keys(testsToDo).forEach(function (testToDoIndex) {
81 |             validationMessageTestBuilder(testsToDo[testToDoIndex]);
82 |         });
83 | 
84 | 
85 |     });
86 | });


--------------------------------------------------------------------------------
/test/protractor/specs/validation-messages.js:
--------------------------------------------------------------------------------
 1 | /* global browser, it, describe, element, by */
 2 | 
 3 | describe('Schema Form validation messages', function() {
 4 | 
 5 |     describe('#string', function() {
 6 |         var URL = 'angular-schema-form-material/examples/material-example.html#/86fb7505a8ab6a43bc70';
 7 | 
 8 |         it('should not complain if it gets a normal string', function() {
 9 |             browser.get(URL);
10 |             var input = element.all(by.css('form[name=ngform] input')).first();
11 |             input.sendKeys('string');
12 | 
13 |             expect(input.getAttribute('value')).toEqual('string');
14 |             expect(input.evaluate('ngModel.$valid')).toEqual(true);
15 | 
16 |         });
17 | 
18 | 
19 |         var validationMessageTestBuider = function(nr, value, validationMessage) {
20 |             it('should say "' + validationMessage + '" when input is ' + value, function() {
21 |                 browser.get(URL);
22 |                 var input = element.all(by.css('form[name=ngform] input')).get(nr);
23 |                 input.sendKeys(value);
24 | 
25 |                 var message = element.all(by.css('form[name=ngform] div[sf-message]'));//.get(nr);
26 |                 expect(input.evaluate('ngModel.$valid')).toEqual(false);
27 | 
28 |                 /* no error messages at this point */
29 |                 //expect(message.getText()).toEqual(validationMessage);
30 | 
31 |             });
32 |         };
33 | 
34 |         var stringTests = {
35 |             's': 'String is too short (1 chars), minimum 3',
36 |             'tooo long string': 'String is too long (11 chars), maximum 10',
37 |             'foo 66': 'String does not match pattern: ^[a-zA-Z ]+$'
38 |         };
39 | 
40 |         Object.keys(stringTests).forEach(function(value) {
41 |             validationMessageTestBuider(0, value, stringTests[value]);
42 |         });
43 | 
44 | 
45 |         var integerTests = {
46 |             '3': '3 is less than the allowed minimum of 6',
47 |             '66': '66 is greater than the allowed maximum of 50',
48 |             '11': 'Value is not a multiple of 3',
49 |             // Chrome no longer lets you input anything but numbers in a type="number" input.
50 |             'aaa': 'Required'  //'Value is not a valid number'
51 |         };
52 | 
53 |         Object.keys(integerTests).forEach(function(value) {
54 |             validationMessageTestBuider(1, value, integerTests[value]);
55 |         });
56 | 
57 | 
58 |         it('should say "Required" when fields are required', function() {
59 |             browser.get(URL);
60 |             element.all(by.css('form[name=ngform]')).submit();
61 |             var input = element.all(by.css('form[name=ngform] input')).get(1);
62 | 
63 |             var message = element.all(by.css('form[name=ngform] div[sf-message]'));//.get(1);
64 |             expect(input.evaluate('ngModel.$valid')).toEqual(false);
65 | 
66 |             /* no error messages at this point */
67 |             //expect(message.getText()).toEqual('Required');
68 | 
69 |         });
70 |     });
71 | });


--------------------------------------------------------------------------------
/examples/data/grid.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "schema": {
  3 |     "type": "object",
  4 |     "title": "Comment",
  5 |     "properties": {
  6 |       "firstname":  {
  7 |         "title": "Name",
  8 |         "type": "string"
  9 |       },
 10 |       "lastname":  {
 11 |         "title": "Surname",
 12 |         "type": "string"
 13 |       },
 14 |       "address_line_1":  {
 15 |         "title": "Address",
 16 |         "type": "string"
 17 |       },
 18 |       "address_line_2":  {
 19 |         "type": "string"
 20 |       },
 21 |       "city":  {
 22 |         "type": "string"
 23 |       },
 24 |       "state":  {
 25 |         "type": "string",
 26 |         "enum": ["VIC","NSW","QLD","WA","SA","TAS","ACT","NT"]
 27 |       },
 28 |       "postcode":  {
 29 |         "type": "integer",
 30 |         "minimum":1000,
 31 |         "maximum":9999
 32 |       },
 33 |       "email":  {
 34 |         "title": "Email",
 35 |         "type": "string",
 36 |         "pattern": "^\\S+@\\S+$",
 37 |         "description": "Email will be used for evil."
 38 |       },
 39 |       "comment": {
 40 |         "title": "Comment",
 41 |         "type": "string",
 42 |         "maxLength": 20,
 43 |         "validationMessage": "Don't be greedy!"
 44 |       }
 45 |     },
 46 |     "required": ["name","email","comment"]
 47 |   },
 48 |   "form": [
 49 |     {
 50 |       "type": "help",
 51 |       "helpvalue": "<div class=\"alert alert-info\">Grid it up with FLEX</div>"
 52 |     },
 53 |     {
 54 |       "type": "section",
 55 |       "grid": { "layout": "column" },
 56 |       "items": [
 57 |         {
 58 |           "type": "section",
 59 |           "grid": { "layout": "row" },
 60 |           "items": [
 61 |             {
 62 |               "key": "firstname",
 63 |               "grid": { "flex": 50 }
 64 |             },
 65 |             {
 66 |               "key": "lastname",
 67 |               "grid": { "flex": "" }
 68 |             }
 69 |           ]
 70 |         },
 71 |         {
 72 |           "key": "address_line_1",
 73 |           "grid": { "flex": 100, "layout": "row" }
 74 |         },
 75 |         {
 76 |           "key": "address_line_2",
 77 |           "grid": { "flex": 100, "layout": "row" }
 78 |         },
 79 |         {
 80 |           "type": "section",
 81 |           "grid": { "layout": "row" },
 82 |           "items": [
 83 |             {
 84 |               "key": "city",
 85 |               "grid": { "flex": 33, "layout": "column" }
 86 |             },
 87 |             {
 88 |               "key": "state",
 89 |               "type":"select",
 90 |               "grid": { "flex": 33, "layout": "column" }
 91 |             },
 92 |             {
 93 |               "key": "postcode",
 94 |               "grid": { "flex": 33, "layout": "column" }
 95 |             }
 96 |           ]
 97 |         },
 98 |         {
 99 |           "type": "section",
100 |           "grid": { "layout": "row" },
101 |           "items": ["email"]
102 |         },
103 |         {
104 |           "key": "comment",
105 |           "type": "textarea",
106 |           "placeholder": "Make a comment"
107 |         }
108 |       ]
109 |     },
110 |     {
111 |       "type": "submit",
112 |     "style": "btn-info",
113 |       "title": "OK"
114 |     }
115 |   ]
116 | }
117 | 


--------------------------------------------------------------------------------
/examples/data/titlemaps.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "model": {
  3 |     "select": "a",
  4 |     "array": ["b"]
  5 |   },
  6 |   "schema": {
  7 |     "type": "object",
  8 |     "properties": {
  9 |       "select": {
 10 |         "title": "Select without titleMap",
 11 |         "type": "string",
 12 |         "enum": ["a","b","c"]
 13 |       },
 14 |       "select2": {
 15 |         "title": "Select with titleMap (old style)",
 16 |         "type": "string",
 17 |         "enum": ["a","b","c"]
 18 |       },
 19 |       "noenum": { "type": "string", "title": "No enum, but forms says it's a select", "default": "a3" },
 20 |       "selectOptionData": {
 21 |         "type": "string",
 22 |         "title": "Dynamic Options",
 23 |         "default": "The Terminator"
 24 |       },
 25 |       "radios": {
 26 |         "title": "Basic radio button example to pick remote dataset for below select 'Remote Options'",
 27 |         "type": "string",
 28 |         "enum": ["books","movies"]
 29 |       },
 30 |       "selectOptionRemote": {
 31 |         "type": "string",
 32 |         "title": "Remote Options",
 33 |         "links":[
 34 |           { "rel": "options", "href": "./data/remote-titlemap-{radios}.json" }
 35 |         ]
 36 |       },
 37 |       "array": {
 38 |         "title": "Array with enum defaults to 'checkboxes'",
 39 |         "type": "array",
 40 |         "items": {
 41 |           "type": "string",
 42 |           "enum": ["a","b","c"]
 43 |         }
 44 |       },
 45 |       "array2": {
 46 |         "title": "Array with titleMap",
 47 |         "type": "array",
 48 |         "default": ["b","c"],
 49 |         "items": {
 50 |           "type": "string",
 51 |           "enum": ["a","b","c"]
 52 |         }
 53 |       },
 54 |       "radiobuttons": {
 55 |         "title": "Radio buttons used to switch a boolean or multiple values",
 56 |         "type": "boolean",
 57 |         "default": false
 58 |       }
 59 |     }
 60 |   },
 61 |   "form": [
 62 |     {
 63 |       "type": "section",
 64 |       "grid": { "flex": "", "layout": "row" },
 65 |       "items": [
 66 |         {
 67 |           "key": "select",
 68 |           "type": "select",
 69 |           "grid": { "flex": "" }
 70 |         },
 71 |         {
 72 |           "key": "select2",
 73 |           "type": "select",
 74 |           "grid": { "flex": "" },
 75 |           "titleMap": {
 76 |             "a": "A",
 77 |             "b": "B",
 78 |             "c": "C"
 79 |           }
 80 |         }
 81 |       ]
 82 |     },
 83 |     {
 84 |       "type": "section",
 85 |       "grid": { "flex": "", "layout": "row" },
 86 |       "items": [
 87 |         {
 88 |           "key": "noenum",
 89 |           "type": "select",
 90 |           "grid": { "flex": "" },
 91 |           "titleMap": [
 92 |             { "value":"a1", "name": "A1", "group": "A" },
 93 |             { "value":"a2", "name":"A2", "group": "A" },
 94 |             { "value":"a3", "name":"A3", "group": "A" },
 95 |             { "value":"b1", "name": "B1", "group": "B" },
 96 |             { "value":"b2", "name":"B2", "group": "B" },
 97 |             { "value":"b3", "name":"B3", "group": "B" }
 98 |           ]
 99 |         },
100 |         {
101 |           "key": "selectOptionData",
102 |           "type": "select",
103 |           "grid": { "flex": "" },
104 |           "optionData": "arnieFlix"
105 |         }
106 |       ]
107 |     },
108 |     {
109 |       "key": "radios",
110 |       "type": "radios",
111 |       "grid": { "layout": "row" },
112 |       "titleMap": [
113 |         { "value":"books", "name": "Books" },
114 |         { "value":"movies", "name":"Movies" }
115 |       ]
116 |     },
117 |     {
118 |       "key": "selectOptionRemote",
119 |       "type": "select",
120 |       "grid": { "flex": 100, "layout": "column" }
121 |     },
122 |     "array",
123 |     {
124 |       "key": "array2",
125 |       "type": "checkboxes",
126 |       "titleMap": [
127 |         { "value":"a", "name": "A" },
128 |         { "value":"b", "name":"B" },
129 |         { "value":"c", "name":"C" }
130 |       ]
131 |     },
132 |     {
133 |       "key":"radiobuttons",
134 |       "type": "radiobuttons",
135 |       "titleMap": [
136 |         {"value": false, "name": "No way"},
137 |         {"value": null, "name": "Maybe"},
138 |         {"value": true,  "name": "OK"}
139 |       ]
140 |     }
141 |   ]
142 | }
143 | 


--------------------------------------------------------------------------------
/examples/data/sink.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "schema": {
  3 |     "type": "object",
  4 |     "required": [
  5 |       "name",
  6 |       "shoesizeLeft"
  7 |     ],
  8 |     "properties": {
  9 |       "name": {
 10 |         "title": "Name",
 11 |         "description": "Gimme yea name lad",
 12 |         "type": "string",
 13 |         "pattern": "^[^/]*$",
 14 |         "minLength": 2
 15 |       },
 16 |       "invitation": {
 17 |         "type": "string",
 18 |         "format": "html",
 19 |         "title": "Invitation Design",
 20 |         "description": "Design the invitation in full technicolor HTML"
 21 |       },
 22 |       "favorite": {
 23 |         "title": "Favorite",
 24 |         "type": "string",
 25 |         "enum": [
 26 |           "undefined",
 27 |           "null",
 28 |           "NaN"
 29 |         ]
 30 |       },
 31 |       "shoesizeLeft": {
 32 |         "title": "Shoe size (left)",
 33 |         "default": 42,
 34 |         "type": "number"
 35 |       },
 36 |       "shoesizeRight": {
 37 |         "title": "Shoe size (right)",
 38 |         "default": 42,
 39 |         "type": "number"
 40 |       },
 41 |       "attributes": {
 42 |         "type": "object",
 43 |         "title": "Attributes",
 44 |         "required": [
 45 |           "eyecolor"
 46 |         ],
 47 |         "properties": {
 48 |           "eyecolor": {
 49 |             "type": "string",
 50 |             "format": "color",
 51 |             "title": "Eye color",
 52 |             "default": "pink"
 53 |           },
 54 |           "haircolor": {
 55 |             "type": "string",
 56 |             "title": "Hair color"
 57 |           },
 58 |           "shoulders": {
 59 |             "type": "object",
 60 |             "title": "Shoulders",
 61 |             "properties": {
 62 |               "left": {
 63 |                 "type": "string",
 64 |                 "title": "Left"
 65 |               },
 66 |               "right": {
 67 |                 "type": "string",
 68 |                 "title": "Right"
 69 |               }
 70 |             }
 71 |           }
 72 |         }
 73 |       },
 74 |       "things": {
 75 |         "type": "array",
 76 |         "title": "I like...",
 77 |         "items": {
 78 |           "type": "string",
 79 |           "enum": [
 80 |             "clowns",
 81 |             "compiling",
 82 |             "sleeping"
 83 |           ]
 84 |         }
 85 |       },
 86 |       "dislike": {
 87 |         "type": "array",
 88 |         "title": "I dislike...",
 89 |         "items": {
 90 |           "type": "string",
 91 |           "title": "I hate"
 92 |         }
 93 |       },
 94 |       "soul": {
 95 |         "title": "Terms Of Service",
 96 |         "description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
 97 |         "type": "boolean",
 98 |         "default": true
 99 |       },
100 |       "soulserial": {
101 |         "title": "Soul Serial No",
102 |         "type": "string"
103 |       },
104 |       "date": {
105 |         "title": "Date of party",
106 |         "type": "string",
107 |         "format": "date"
108 |       },
109 |       "radio": {
110 |         "title": "Radio type",
111 |         "type": "string",
112 |         "enum": [
113 |           "Transistor",
114 |           "Tube"
115 |         ]
116 |       },
117 |       "radio2": {
118 |         "title": "My Second Radio",
119 |         "type": "string",
120 |         "enum": [
121 |           "Transistor",
122 |           "Tube"
123 |         ]
124 |       },
125 |       "radiobuttons": {
126 |         "type": "string",
127 |         "enum": [
128 |           "Select me!",
129 |           "No me!"
130 |         ]
131 |       }
132 |     }
133 |   },
134 |   "form": [
135 |     {
136 |       "type": "fieldset",
137 |       "title": "Stuff",
138 |       "items": [
139 |         {
140 |           "type": "tabs",
141 |           "tabs": [
142 |             {
143 |               "title": "Simple stuff",
144 |               "items": [
145 |                 {
146 |                   "key": "name",
147 |                   "placeholder": "Check the console",
148 |                   "onChange": "log(modelValue)",
149 |                   "feedback": "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
150 |                 },
151 |                 {
152 |                   "key": "favorite",
153 |                   "feedback": false
154 |                 }
155 |               ]
156 |             },
157 |             {
158 |               "title": "More stuff",
159 |               "items": [
160 |                 "attributes.eyecolor",
161 |                 "attributes.haircolor",
162 |                 {
163 |                   "key": "attributes.shoulders.left",
164 |                   "title": "Left shoulder",
165 |                   "description": "This value is copied to attributes.shoulders.right in the model",
166 |                   "copyValueTo": ["attributes.shoulders.right"]
167 |                 },
168 |                 {
169 |                   "key": "shoesizeLeft",
170 |                   "feedback": false,
171 |                   "copyValueTo":["shoesizeRight"]
172 |                 },
173 |                 {
174 |                   "key": "shoesizeRight"
175 |                 },
176 |                 "things",
177 |                 "dislike"
178 |               ]
179 |             }
180 |           ]
181 |         }
182 |       ]
183 |     },
184 |     {
185 |       "type": "help",
186 |       "helpvalue": "<hr>"
187 |     },
188 |     "soul",
189 |     {
190 |       "condition": "modelData.soul",
191 |       "key": "soulserial",
192 |       "placeholder": "ex. 666"
193 |     },
194 |     {
195 |       "key": "date",
196 |       "minDate": "2015-06-20"
197 |     },
198 |     {
199 |       "key": "radio",
200 |       "type": "radios",
201 |       "titleMap": [
202 |         {
203 |           "value": "Transistor",
204 |           "name": "Transistor <br> Not the tube kind."
205 |         },
206 |         {
207 |           "value": "Tube",
208 |           "name": "Tube <br> The tube kind."
209 |         }
210 |       ]
211 |     },
212 |     {
213 |       "key": "radio2",
214 |       "type": "radios-inline",
215 |       "titleMap": [
216 |         {
217 |           "value": "Transistor",
218 |           "name": "Transistor <br> Not the tube kind."
219 |         },
220 |         {
221 |           "value": "Tube",
222 |           "name": "Tube <br> The tube kind."
223 |         }
224 |       ]
225 |     },
226 |     {
227 |       "key": "radiobuttons",
228 |       "style": {
229 |         "selected": "btn-success",
230 |         "unselected": "btn-default"
231 |       },
232 |       "type": "radiobuttons",
233 |       "notitle": true
234 |     },
235 |     {
236 |       "type": "actions",
237 |       "items": [
238 |         {
239 |           "type": "submit",
240 |           "style": "md-primary",
241 |           "title": "Do It!"
242 |         },
243 |         {
244 |           "type": "button",
245 |           "style": "md-warn",
246 |           "title": "Noooooooooooo",
247 |           "onClick": "sayNo()"
248 |         }
249 |       ]
250 |     }
251 |   ]
252 | }
253 | 


--------------------------------------------------------------------------------
/src/material-decorator.js:
--------------------------------------------------------------------------------
  1 | // ngtemplate-loader embeds the html on build
  2 | import actionsTemplate from './material/actions.html';
  3 | import arrayTemplate from './material/array.html';
  4 | import autocompleteTemplate from './material/autocomplete.html';
  5 | import booleanTemplate from './material/checkbox.html';
  6 | import buttonTemplate from './material/submit.html';
  7 | import checkboxTemplate from './material/checkbox.html';
  8 | import checkboxesTemplate from './material/checkboxes.html';
  9 | import dateTemplate from './material/date.html';
 10 | import defaultTemplate from './material/default.html';
 11 | import fieldsetTemplate from './material/fieldset.html';
 12 | import helpTemplate from './material/help.html';
 13 | import numberTemplate from './material/default.html';
 14 | import passwordTemplate from './material/default.html';
 15 | import radiosTemplate from './material/radios.html';
 16 | import radiosInlineTemplate from './material/radios-inline.html';
 17 | import radiobuttonsTemplate from './material/radio-buttons.html';
 18 | import sectionTemplate from './material/section.html';
 19 | import selectTemplate from './material/select.html';
 20 | import submitTemplate from './material/submit.html';
 21 | import switchTemplate from './material/switch.html';
 22 | import tabsTemplate from './material/tabs.html';
 23 | import tabarrayTemplate from './material/tabarray.html';
 24 | import textareaTemplate from './material/textarea.html';
 25 | 
 26 | angular
 27 |   .module('schemaForm')
 28 |   .config(materialDecoratorConfig)
 29 |   .directive('sfmExternalOptions', sfmExternalOptionsDirective)
 30 |   .filter('sfCamelKey', sfCamelKeyFilter);
 31 | 
 32 | materialDecoratorConfig.$inject = [
 33 |   'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider', '$injector'
 34 | ];
 35 | 
 36 | function materialDecoratorConfig(
 37 |     schemaFormProvider, decoratorsProvider, sfBuilderProvider, sfPathProvider, $injector) {
 38 |   var base = 'decorators/material/';
 39 | 
 40 |   var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
 41 |   var ngModelOptions     = sfBuilderProvider.builders.ngModelOptions;
 42 |   var ngModel            = sfBuilderProvider.builders.ngModel;
 43 |   var sfField            = sfBuilderProvider.builders.sfField;
 44 |   var condition          = sfBuilderProvider.builders.condition;
 45 |   var array              = sfBuilderProvider.builders.array;
 46 |   var numeric            = sfBuilderProvider.builders.numeric;
 47 | 
 48 |   var sfLayout           = sfLayout;
 49 |   var sfMessagesNode     = sfMessagesNodeHandler();
 50 |   var sfMessages         = sfMessagesBuilder;
 51 |   var sfOptions          = sfOptionsBuilder;
 52 |   var mdAutocomplete     = mdAutocompleteBuilder;
 53 |   var mdSwitch           = mdSwitchBuilder;
 54 |   var mdDatepicker       = mdDatepickerBuilder;
 55 |   var mdTabs             = mdTabsBuilder;
 56 |   var textarea           = textareaBuilder;
 57 | 
 58 |   var core = [ sfField, ngModel, ngModelOptions, condition, sfLayout ];
 59 |   var defaults = core.concat(sfMessages);
 60 |   var arrays = core.concat(array);
 61 | 
 62 |   schemaFormProvider.defaults.string.unshift(dateDefault);
 63 | 
 64 |   decoratorsProvider.defineDecorator('materialDecorator', {
 65 |     actions: { template: actionsTemplate, builder: [ sfField, simpleTransclusion, condition ] },
 66 |     array: { template: arrayTemplate, builder: arrays },
 67 |     autocomplete: { template: autocompleteTemplate, builder: defaults.concat(mdAutocomplete) },
 68 |     boolean: { template: checkboxTemplate, builder: defaults },
 69 |     button: { template: submitTemplate, builder: defaults },
 70 |     checkbox: { template: checkboxTemplate, builder: defaults },
 71 |     checkboxes: { template: checkboxesTemplate, builder: arrays },
 72 |     date: { template: dateTemplate, builder: defaults.concat(mdDatepicker) },
 73 |     'default': { template: defaultTemplate, builder: defaults },
 74 |     fieldset: { template: fieldsetTemplate, builder: [ sfField, simpleTransclusion, condition ] },
 75 |     help: { template: helpTemplate, builder: defaults },
 76 |     number: { template: defaultTemplate, builder: defaults.concat(numeric) },
 77 |     password: { template: defaultTemplate, builder: defaults },
 78 |     radios: { template: radiosTemplate, builder: defaults },
 79 |     'radios-inline': { template: radiosInlineTemplate, builder: defaults },
 80 |     radiobuttons: { template: radiobuttonsTemplate, builder: defaults },
 81 |     section: { template: sectionTemplate, builder: [ sfField, simpleTransclusion, condition, sfLayout ] },
 82 |     select: { template: selectTemplate, builder: defaults.concat(sfOptions) },
 83 |     submit: { template: submitTemplate, builder: defaults },
 84 |     tabs: { template: tabsTemplate, builder: [ sfField, mdTabs, condition ] },
 85 |     tabarray: { template: tabarrayTemplate, builder: arrays },
 86 |     textarea: { template: textareaTemplate, builder: defaults.concat(textarea) },
 87 |     'switch': { template: switchTemplate, builder: defaults.concat(mdSwitch) }
 88 |   });
 89 | 
 90 |   function sfLayout(args) {
 91 |     var layoutDiv = args.fieldFrag.querySelector('[sf-layout]');
 92 | 
 93 |     if (args.form.grid) {
 94 |       Object.getOwnPropertyNames(args.form.grid).forEach(function(property, idx, array) {
 95 |         layoutDiv.setAttribute(property, args.form.grid[property]);
 96 |       });
 97 |     };
 98 |   };
 99 | 
100 |   function sfMessagesNodeHandler() {
101 |     var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
102 |     var div = document.createElement('div');
103 |     div.innerHTML = html;
104 |     return div.firstChild;
105 |   };
106 | 
107 |   function sfMessagesBuilder(args) {
108 |     var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
109 |     if (messagesDiv && sfMessagesNode) {
110 |       var child = sfMessagesNode.cloneNode();
111 |       messagesDiv.appendChild(child);
112 |     }
113 |   };
114 | 
115 |   function textareaBuilder(args) {
116 |     var textareaFrag = args.fieldFrag.querySelector('textarea');
117 |     var maxLength = args.form.maxlength || false;
118 |     if (textareaFrag && maxLength) {
119 |       textareaFrag.setAttribute('md-maxlength', maxLength);
120 |     };
121 |   };
122 | 
123 |   function mdAutocompleteBuilder(args) {
124 |     var mdAutocompleteFrag = args.fieldFrag.querySelector('md-autocomplete');
125 |     var minLength = args.form.minLength || 1;
126 |     var maxLength = args.form.maxLength || false;
127 |     var title = args.form.title || args.form.placeholder || args.form.key.slice(-1)[0];
128 | 
129 |     if (mdAutocompleteFrag) {
130 |       if (args.form.onChange) {
131 |         mdAutocompleteFrag.setAttribute('md-selected-item-change', 'args.form.onChange()');
132 |         mdAutocompleteFrag.setAttribute('md-search-text-change', 'args.form.onChange(searchText)');
133 |       };
134 | 
135 |       // mdAutocompleteFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
136 |       mdAutocompleteFrag.setAttribute('md-min-length', minLength);
137 |       if (maxLength) {
138 |         mdAutocompleteFrag.setAttribute('md-max-length', maxLength);
139 |       };
140 | 
141 |       if (title) {
142 |         mdAutocompleteFrag.setAttribute('md-floating-label', title);
143 |       };
144 |     };
145 |   };
146 | 
147 |   function mdSwitchBuilder(args) {
148 |     var mdSwitchFrag = args.fieldFrag.querySelector('md-switch');
149 |     if (args.form.schema.titleMap) {
150 |       mdSwitchFrag.setAttribute('ng-true-value', args.form.schema.titleMap.true);
151 |       mdSwitchFrag.setAttribute('ng-false-value', args.form.schema.titleMap.false);
152 |     };
153 |   };
154 | 
155 |   function sfOptionsBuilder(args) {
156 |     var mdSelectFrag = args.fieldFrag.querySelector('md-select');
157 |     var enumTitleMap = [];
158 |     var i;
159 |     var mdSelectFrag;
160 | 
161 |     args.form.selectOptions = [];
162 |     args.form.getOptions = getOptionsHandler;
163 | 
164 |     if (args.form.schema.links && (typeof args.form.schema.links) === 'object') {
165 |       var link;
166 |       var related = /({)([^}]*)(})/gm;
167 |       var source = /{{([^}]*)}}/gm;
168 |       var matched;
169 | 
170 |       for (i = 0; i < args.form.schema.links.length; i++) {
171 |         link = args.form.schema.links[i];
172 |         if (link.rel === 'options') {
173 |           // TODO enable filter to allow processing results
174 |           // args.form.optionSource = link.href.replace(related, '$1$1 model.$2 | _externalOptionUri $3$3');
175 |           args.form.optionSource = link.href.replace(related, '$1$1 model.$2 $3$3');
176 |         };
177 |       };
178 | 
179 |       mdSelectFrag.setAttribute('sfm-external-options', args.form.optionSource);
180 |     }
181 |     else {
182 |       args.form.selectOptions = sfOptionsProcessor(args.form);
183 |     };
184 |   };
185 | 
186 |   function mdDatepickerBuilder(args) {
187 |     var mdDatepickerFrag = args.fieldFrag.querySelector('md-datepicker');
188 |     if (mdDatepickerFrag) {
189 |       if (args.form.onChange) {
190 |         mdDatepickerFrag.setAttribute('ng-change', 'args.form.onChange(searchText)');
191 |       }
192 |       // mdDatepickerFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
193 |       var minDate = args.form.minimum || false;
194 |       var maxDate = args.form.maximum || false;
195 |       if (minDate) {
196 |         mdDatepickerFrag.setAttribute('md-max-date', minDate);
197 |       }
198 |       if (maxDate) {
199 |         mdDatepickerFrag.setAttribute('md-max-date', maxDate);
200 |       }
201 |     }
202 |   };
203 | 
204 |   function mdTabsBuilder(args) {
205 |     if (args.form.tabs && args.form.tabs.length > 0) {
206 |       var mdTabsFrag = args.fieldFrag.querySelector('md-tabs');
207 | 
208 |       args.form.tabs.forEach(function(tab, index) {
209 |         var evalExpr = '(evalExpr(' + args.path + '.tabs[' + index + ']' +
210 |                        '.condition, { model: model, "arrayIndex": $index}))';
211 |         var mdTab = document.createElement('md-tab');
212 |         if(!!tab.condition) {
213 |           mdTab.setAttribute('ng-if', evalExpr);
214 |         };
215 |         mdTab.setAttribute('label', '{{' + args.path + '.tabs[' + index + '].title}}');
216 |         var mdTabBody = document.createElement('md-tab-body');
217 |         var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
218 |         mdTabBody.appendChild(childFrag);
219 |         mdTab.appendChild(mdTabBody);
220 |         mdTabsFrag.appendChild(mdTab);
221 |       });
222 |     }
223 |   };
224 | 
225 |   /**
226 |    * Material Datepicker
227 |    */
228 |   function dateDefault(name, schema, options) {
229 |     if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
230 |       var f = schemaFormProvider.stdFormObj(name, schema, options);
231 |       f.key  = options.path;
232 |       f.type = 'date';
233 |       options.lookup[sfPathProvider.stringify(options.path)] = f;
234 |       return f;
235 |     }
236 |   };
237 | };
238 | 
239 | function getOptionsHandler(form, evalExpr) {
240 |   if (form.optionData) {
241 |     return evalExpr(form.optionData);
242 |   };
243 | 
244 |   if (form.selectOptions) {
245 |     return form.selectOptions;
246 |   };
247 | 
248 |   return [];
249 | };
250 | 
251 | function sfOptionsProcessor(data) {
252 |   var enumTitleMap = [];
253 | 
254 |   if (data.titleMap) {
255 |     return data.titleMap;
256 |   }
257 |   else if (data.enum && data.enum.length) {
258 |     for (i = 0; i < data.enum.length; i++) {
259 |       if (data.enum[i] && data.enum[i].length) {
260 |         enumTitleMap.push({ name: data.enum[i], value: data.enum[i] });
261 |       };
262 |     };
263 |   };
264 | 
265 |   return enumTitleMap;
266 | };
267 | 
268 | sfmExternalOptionsDirective.$inject = [ '$http' ];
269 | 
270 | function sfmExternalOptionsDirective($http) {
271 |   var directive = {
272 |     link: link,
273 |     restrict: 'A'
274 |   };
275 | 
276 |   return directive;
277 | 
278 |   function link(scope, element, attrs) {
279 |     attrs.$observe('sfmExternalOptions', function(dataURI) {
280 |       $http.get(dataURI)
281 |         .then(function(response) {
282 |           scope.form.selectOptions = sfOptionsProcessor(response.data);
283 |         });
284 |     });
285 |   };
286 | };
287 | 
288 | /**
289 |  * sfCamelKey Filter
290 |  */
291 | function sfCamelKeyFilter() {
292 |   return function(formKey) {
293 |     if (!formKey) { return ''; };
294 |     var part, i, key;
295 |     key = formKey.slice();
296 |     for (i = 0; i < key.length; i++) {
297 |       part = key[i].toLowerCase().split('');
298 |       if (i && part.length) { part[0] = part[0].toUpperCase(); };
299 |       key[i] = part.join('');
300 |     };
301 |     return key.join('');
302 |   };
303 | };
304 | 
305 | /*
306 |   TODO add default filter for autocomplete which allows form.optionFilter or 'autocompleteFilter' to override
307 |   Something along the following lines...
308 |   if ($injector.has('autocompleteFilter')) {
309 |     result = $filter('autocomplete')(input);
310 |   }
311 |   else
312 |   if ($injector.has(args.form.optionFilter + 'Filter')) {
313 |     result = $filter(args.form.optionFilter)(input);
314 |   }
315 |   else {
316 |     if (args.form.optionFilter) {
317 |       mdAutocomplete.setAttribute('md-items',
318 |         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
319 |     }
320 |   }
321 | 
322 |   .filter('autocompleteMovieTest', function() {
323 |     function autocompleteMovieTestFilter(array, input){
324 |       var current = input;
325 |       // You could also call multiple filters here using:
326 |       // current = $filter('filterName')(input)
327 |       if(typeof current === 'string') {
328 |         current = current.replace(' ','-').toLowerCase();
329 |       }
330 |       current = (!current) ? '_undefined' : current;
331 |       return current;
332 |     }
333 | 
334 |     return externalOptionUriFilter;
335 |   })
336 | */
337 | 


--------------------------------------------------------------------------------
/examples/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>Material Design Schema Form Example</title>
  6 |   <link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
  7 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  8 |   <style type="text/css">
  9 |   body,html {
 10 |     min-height: 1400px;
 11 |     outline: none;
 12 |   }
 13 | 
 14 |   .form {  height: 400px;  }
 15 |   .schema {  height: 800px;  }
 16 | 
 17 |   [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
 18 |     display: none !important;
 19 |   }
 20 | 
 21 |   .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
 22 |     border-top-right-radius: 4px;
 23 |     border-bottom-right-radius: 4px;
 24 |   }
 25 | 
 26 |   .schema-form-radiobuttons md-input-container {
 27 |     margin: 0;
 28 |     padding: 0;
 29 |   }
 30 |   .schema-form-radiobuttons md-input-container button {
 31 |     font-size: 16px;
 32 |     margin: 20px 0;
 33 |     padding: 3px 15px 3px 15px;
 34 |     text-transform: none;
 35 |     font-weight: 400;
 36 |     min-width:100px;
 37 |   }
 38 |   .schema-form-radiobuttons md-input-container:first-child button {
 39 |     border-radius: 10px 0 0 10px;
 40 |   }
 41 |   .schema-form-radiobuttons md-input-container:not(:first-child):not(:last-child) button {
 42 |     border-radius: 0;
 43 |     border-left: 1px solid rgba(230, 230, 230, 0.96);
 44 |     border-right: 1px solid rgba(230, 230, 230, 0.96);
 45 |   }
 46 |   .schema-form-radiobuttons md-input-container:last-child button {
 47 |     border-radius: 0 10px 10px 0;
 48 |   }
 49 |   </style>
 50 | </head>
 51 | <body ng-app="test" ng-controller="TestCtrl as ctrl" ng-cloak>
 52 | 
 53 |   <!--- nav hidden until we redo it in angular-material -->
 54 |   <nav ng-if="false" class="navbar navbar-default">
 55 |   <div class="container-fluid">
 56 |     <!-- Brand and toggle get grouped for better mobile display -->
 57 |     <div class="navbar-header">
 58 |       <a class="navbar-brand glyphicon glyphicon-home" href="/"></a>
 59 |     </div>
 60 | 
 61 |     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 62 |       <form class="navbar-form navbar-left" role="search">
 63 |         <div class="form-group">
 64 | 
 65 |           <button class="btn btn-primary" ng-click="save();" tooltip-trigger="mouseenter" tooltip-placement="right" tooltip='Share the schema/form code.'>Save to gist</button>
 66 | 
 67 |           <div class="input-group" ng-show="navbarMode === 'default' && !error"></div>
 68 |           <div class="input-group" ng-show="navbarMode === 'loaded' && !error">
 69 |             <span ng-show="loadedData.user">Loaded configuration created by {{loadedData.user}} {{loadedData.created}}.</span>
 70 |             <div ng-show="!loadedData" class="spinner"></div>
 71 |           </div>
 72 | 
 73 |           <div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.url && !error">
 74 |             <div class="input-group-addon">Link</div>
 75 |             <input type="text" class="form-control" value="{{savedGistData.url}}">
 76 |             <span ng-if="hasFlash" class="input-group-btn">
 77 |               <button tooltip-trigger="focus" tooltip-placement="right" tooltip='Copied to clipboard' clip-copy="savedGistData.url" class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
 78 |             </span>
 79 |           </div>
 80 | 
 81 |           <div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.data.html_url && !error">
 82 |             <div class="input-group-addon">Gist</div>
 83 |             <input type="text" class="form-control" value="{{savedGistData.data.html_url}}">
 84 |             <span ng-if="hasFlash" class="input-group-btn">
 85 |               <button tooltip-trigger="focus" tooltip-placement="right" tooltip='Copied to clipboard' clip-copy="savedGistData.data.html_url" class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
 86 |             </span>
 87 |           </div>
 88 | 
 89 |           <div class="input-group" ng-show="navbarMode === 'saved' && !savedGistData && !error">
 90 |             <div class="spinner"></div>
 91 |           </div>
 92 | 
 93 |           <div class="input-group error" ng-show="error">{{error}}</div>
 94 |         </div>
 95 |       </form>
 96 |     </div><!-- /.navbar-collapse -->
 97 |   </div><!-- /.container-fluid -->
 98 | </nav>
 99 | 
100 | 
101 | <div>
102 |   <h1><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></a> Schema Form Example</h1>
103 |   <h2>Material Design</h2>
104 |   <div layout="row" layout-margin>
105 |     <div layout="column" flex="45">
106 |       <h3>The Generated Form</h3>
107 | 
108 |       <form name="ngform"
109 |             layout="column"
110 |             layout-padding
111 |             sf-model="modelData"
112 |             sf-form="form"
113 |             sf-schema="schema"
114 |             ng-submit="submitForm(ngform,modelData)"></form>
115 | 
116 |       <div ng-show="ngform.$valid"><em>Form is valid</em></div>
117 |       <div ng-show="ngform.$invalid"><em>Form is not valid</em></div>
118 | 
119 |       <h3>Model</h3>
120 |       <pre ng-cloak>{{pretty()}}</pre>
121 |     </div>
122 |     <div layout="column" flex>
123 |       <h3>Select Example</h3>
124 |       <div class="form-group">
125 |         <md-input-container>
126 |           <md-select id="selectTest" ng-model="selectedTest">
127 |             <md-option ng-value="obj" ng-repeat="obj in tests">{{::obj.name}}</md-option>
128 |           </md-select>
129 |         </md-input-container>
130 |       </div>
131 |       <h3>Form</h3>
132 |       <div ui-ace="{ theme: 'monokai',mode:'json'}"
133 |            ng-class="{red: !itParsesForm}" ng-model="formJson" class="form-control form"></div>
134 |       <h3>Schema</h3>
135 |       <div ui-ace="{ theme: 'monokai',mode:'json'}"
136 |            ng-class="{red: !itParses}" ng-model="schemaJson" class="form-control schema"></div>
137 |     </div>
138 |   </div>
139 |   <div>
140 |       <p>
141 |           <small>
142 |               <a href="../jslicense.html" rel="jslicense">JavaScript license information</a>
143 |           </small>
144 |       </p>
145 |   </div>
146 | </div>
147 | 
148 | <script type="text/ng-template" id="template/tooltip/tooltip-popup.html">
149 |   <div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
150 |     <div class="tooltip-arrow"></div>
151 |     <div class="tooltip-inner" ng-bind="content"></div>
152 |   </div>
153 | </script>
154 | 
155 | <script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
156 | <script type="text/javascript" src="../bower_components/moment/moment.js"></script>
157 | <script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
158 | <script type="text/javascript" src="../bower_components/angular/angular.js"></script>
159 | <script src="../bower_components/angular-aria/angular-aria.js"></script>
160 | <script src="../bower_components/angular-animate/angular-animate.js"></script>
161 | <script src="../bower_components/angular-material/angular-material.js"></script>
162 | <script src="../bower_components/angular-messages/angular-messages.js"></script>
163 | <script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
164 | <!-- <script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.js"></script>
165 | -->
166 | <script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
167 | <script type="text/javascript" src="../dist/angular-schema-form-material-bundled.js"></script>
168 | 
169 | <script type="text/javascript">
170 | // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
171 | var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace','ngMessages'])
172 | 
173 | app.config(function($mdThemingProvider, $mdDateLocaleProvider) {
174 |   $mdThemingProvider.setDefaultTheme('default');
175 |   $mdThemingProvider.alwaysWatchTheme(true);
176 |   $mdDateLocaleProvider.formatDate = function(date) {
177 |     console.info(moment(date).format('YYYY-MM-DD'));
178 |     return moment(date).format('YYYY-MM-DD');
179 |   };
180 | });
181 | 
182 | 
183 | app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
184 | 
185 |   $scope.tests = [
186 |     { name: "Material Flex Grid", data: 'data/grid.json' },
187 |     { name: "Simple", data: 'data/simple.json' },
188 |     { name: "Basic JSON Schema Type", data: 'data/types.json' },
189 |     { name: "Autocomplete", data: 'data/autocomplete.json' },
190 |     { name: "Switch", data: 'data/switch.json'},
191 |     { name: "TitleMap Examples", data: 'data/titlemaps.json' },
192 |     /*{ name: "Complex Key Support", data: 'data/complex-keys.json' },*/
193 |     /*{ name: "Array", data: 'data/array.json' },*/
194 |     /*{ name: "Tab Array", data: 'data/tabarray.json' },*/
195 |     { name: "Tabs", data: 'data/tabs.json' },
196 |     { name: "Kitchen Sink", data: 'data/sink.json' },
197 |     { name: "Hack: Conditional required", data: 'data/conditional-required.json' },
198 |   ];
199 | 
200 |   /////////////////////////////////////////////////////////////////////////
201 |   //// Autocomplete code //////////////////////////////////////////////////
202 |   $scope.arnieFlix = loadFlix();
203 |   $scope.searchText    = null;
204 |   $scope.simulateQuery = false;
205 |   $scope.querySearch   = querySearch;
206 |   /**
207 |    * Search for arnieFlix... use $timeout to simulate
208 |    * remote dataservice call.
209 |    */
210 |   function querySearch (query) {
211 |     var results = query ? $scope.arnieFlix.filter( createFilterFor(query) ) : $scope.arnieFlix,
212 |         deferred;
213 |     if ($scope.simulateQuery) {
214 |       deferred = $q.defer();
215 |       $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
216 |       return deferred.promise;
217 |     } else {
218 |       return results;
219 |     }
220 |   };
221 | 
222 |   /**
223 |    * Create filter function for a query string
224 |    */
225 |   function createFilterFor(query) {
226 |     var lowercaseQuery = angular.lowercase(query);
227 |     return function filterFn(item) {
228 |       return (item.value.indexOf(lowercaseQuery) === 0);
229 |     };
230 |   };
231 | 
232 |   function loadFlix() {
233 |     var films = [
234 |       { "year": undefined, "title": "The Legend of Conan" },
235 |       { "year": undefined, "title": "Triplets" },
236 |       { "year": 2015, "title": "Terminator Genisys" },
237 |       { "year": 2015, "title": "Maggie" },
238 |       { "year": 2014, "title": "The Expendables 3" },
239 |       { "year": 2014, "title": "Sabotage" },
240 |       { "year": 2013, "title": "Escape Plan" },
241 |       { "year": 2013, "title": "The Last Stand" },
242 |       { "year": 2012, "title": "The Expendables 2" },
243 |       { "year": 2010, "title": "The Expendables" },
244 |       { "year": 2005, "title": "The Kid & I" },
245 |       { "year": 2004, "title": "Around the World in 80 Days" },
246 |       { "year": 2003, "title": "Welcome to the Jungle" },
247 |       { "year": 2003, "title": "Terminator 3: Rise of the Machines" },
248 |       { "year": 2002, "title": "Collateral Damage" },
249 |       { "year": 2000, "title": "The 6th Day" },
250 |       { "year": 1999, "title": "End of Days" },
251 |       { "year": 1997, "title": "Batman & Robin" },
252 |       { "year": 1996, "title": "Jingle All the Way" },
253 |       { "year": 1996, "title": "Eraser" },
254 |       { "year": 1994, "title": "Junior" },
255 |       { "year": 1994, "title": "True Lies" },
256 |       { "year": 1993, "title": "Last Action Hero" },
257 |       { "year": 1993, "title": "Dave" },
258 |       { "year": 1991, "title": "Terminator 2: Judgment Day" },
259 |       { "year": 1990, "title": "Kindergarten Cop" },
260 |       { "year": 1990, "title": "Total Recall" },
261 |       { "year": 1988, "title": "Twins" },
262 |       { "year": 1988, "title": "Red Heat" },
263 |       { "year": 1987, "title": "The Running Man" },
264 |       { "year": 1987, "title": "Predator" },
265 |       { "year": 1986, "title": "Raw Deal" },
266 |       { "year": 1985, "title": "Commando" },
267 |       { "year": 1985, "title": "Red Sonja" },
268 |       { "year": 1984, "title": "The Terminator" },
269 |       { "year": 1984, "title": "Conan the Destroyer" },
270 |       { "year": 1982, "title": "Conan the Barbarian" },
271 |       { "year": 1980, "title": "The Jayne Mansfield Story" },
272 |       { "year": 1979, "title": "Scavenger Hunt" },
273 |       { "year": 1979, "title": "The Villain" },
274 |       { "year": 1976, "title": "Stay Hungry" },
275 |       { "year": 1974, "title": "Happy Anniversary and Goodbye" },
276 |       { "year": 1973, "title": "The Long Goodbye" },
277 |       { "year": 1969, "title": "Hercules in New York" },
278 |       { "year": 1969, "title": "Hercules" }
279 |     ];
280 |     return films.map( function (film) {
281 |       film.name = film.title;
282 |       film.value = film.title.toLowerCase();
283 |       return film;
284 |     });
285 |   };
286 | 
287 |   // $scope.autocompleteTmpl = `
288 |   //   <span class="item-year">
289 |   //     <span> {{item.year}} </span>
290 |   //   </span>
291 |   //   <span class="item-title">
292 |   //     <strong>{{item.title}}</strong>
293 |   //   </span>`;
294 |   //// Autocomplete code end //////////////////////////////////////////////
295 |   /////////////////////////////////////////////////////////////////////////
296 | 
297 |   $scope.navbarMode = 'default';
298 |   //$scope.hasFlash = swfobject.hasFlashPlayerVersion('9');
299 | 
300 |   // Load data from gist.
301 |   if (false || $location.path().length > 4) {
302 |     $scope.navbarMode = 'loaded';
303 |     var gistId = $location.path().replace('/','');
304 |     $scope.loading = true;
305 |     $http.get('https://api.github.com/gists/' + gistId).success(function(res) {
306 |       $scope.error = null;
307 |       $scope.tests.unshift({name: 'Gist'});
308 |       $scope.selectedTest = $scope.tests[0];
309 |       $scope.loadedData = {
310 |         created: moment(res.created_at).fromNow(),
311 |         user: res.user !== null ? res.user.login : 'Anonymous'
312 |       }
313 |       $scope.loading = false;
314 |       $scope.schemaJson = res.files['schema.json'].content;
315 |       $scope.formJson   = res.files['form.json'].content;
316 |       $scope.modelData  = JSON.parse(res.files['model.json'].content);
317 |     }).error(function() {
318 |       $scope.loadedData = 'dummy';
319 |       $scope.error = 'Failed to load gist.';
320 |       $scope.selectedTest = $scope.tests[0];
321 |     });
322 |   } else {
323 |     $scope.selectedTest = $scope.tests[0];
324 |   }
325 | 
326 |   $scope.$watch('selectedTest',function(val){
327 |     if (val && val.data !== undefined) {
328 |       $http.get(val.data).then(function(res) {setNewData(res.data);});
329 |     }
330 |   });
331 | 
332 |   $scope.itParses     = true;
333 |   $scope.itParsesForm = true;
334 | 
335 | 
336 |   $scope.$watch('schemaJson',function(val,old){
337 |     if (val && val !== old) {
338 |       try {
339 |         $scope.schema = JSON.parse($scope.schemaJson);
340 |         $scope.itParses = true;
341 |       } catch (e){
342 |         $scope.itParses = false;
343 |       }
344 |     }
345 |   });
346 | 
347 |   $scope.$watch('formJson',function(val,old){
348 |     if (val && val !== old) {
349 |       try {
350 |         $scope.form = JSON.parse($scope.formJson);
351 |         $scope.itParsesForm = true;
352 |       } catch (e){
353 |         $scope.itParsesForm = false;
354 |       }
355 |     }
356 |   });
357 | 
358 |   var setNewData = function(data) {
359 |     $scope.schema = data.schema;
360 |     $scope.form   = data.form;
361 |     $scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
362 |     $scope.formJson   = JSON.stringify($scope.form,undefined,2);
363 |     $scope.modelData = data.model || {};
364 |   };
365 | 
366 |   $scope.pretty = function(){
367 |     return typeof $scope.modelData === 'string' ? $scope.modelData : JSON.stringify($scope.modelData, undefined, 2);
368 |   };
369 | 
370 |   $scope.log = function(msg){
371 |     console.log("Simon says",msg);
372 |   };
373 | 
374 |   $scope.sayNo = function() {
375 |     alert('Noooooooo');
376 |   };
377 | 
378 |   $scope.say = function(msg) {
379 |     alert(msg);
380 |   };
381 | 
382 |   $scope.save = function() {
383 |     // To be able to save invalid json and point out errors, we
384 |     // don't save the schema/form but rather the ones in the input.
385 | 
386 |     $scope.navbarMode = 'saved';
387 | 
388 |     var gist = {
389 |       "description": "A saved configuration for a schema form example, http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html",
390 |       "public": true,
391 |       "files": {
392 |         "schema.json": {
393 |           "content": $scope.schemaJson
394 |         },
395 |         "form.json": {
396 |           "content": $scope.formJson
397 |         },
398 |         "model.json": {
399 |           "content": JSON.stringify($scope.modelData, undefined, 2)
400 |         }
401 |       }
402 |     };
403 | 
404 |     $http.post('https://api.github.com/gists', gist).success(function(data) {
405 |       $scope.error = null;
406 |       $location.path('/' + data.id);
407 |       $scope.savedGistData = {
408 |         data: data,
409 |         url: $location.absUrl()
410 |       };
411 |     }).error(function() {
412 |       $scope.error = 'Failed to save gist.';
413 |     });
414 |   };
415 | 
416 |   $scope.submitForm = function(form) {
417 |     // First we broadcast an event so all fields validate themselves
418 |     $scope.$broadcast('schemaFormValidate');
419 |     // Then we check if the form is valid
420 |     if (form.$valid) {
421 |       alert('You did it!');
422 |     }
423 |   };
424 | 
425 | });
426 | // @license-end
427 | </script>
428 | </body>
429 | </html>
430 | 


--------------------------------------------------------------------------------
/material-decorator.min.js:
--------------------------------------------------------------------------------
1 | angular.module("schemaForm").run(["$templateCache",function(e){e.put("decorators/material/actions-trcl.html",'<div class="btn-group schema-form-actions {{form.htmlClass}}" ng-transclude=""></div>'),e.put("decorators/material/actions.html",'<section layout="row" class="btn-group schema-form-actions {{form.htmlClass}}"></section>'),e.put("decorators/material/array.html",'<div class="schema-form-array {{form.htmlClass}}" sf-field-model="sf-new-array" sf-new-array=""><label class="control-label" ng-show="showTitle()">{{ form.title }}</label><md-list class="list-group" sf-field-model="" ui-sortable="form.sortOptions"><md-list-item layout="row" class="list-group-item" sf-field-model="ng-repeat" ng-repeat="item in modelArray track by $index" schema-form-array-items=""><md-button flex="none" flex-order="2" type="button" ng-hide="form.readonly || form.remove === null" ng-click="deleteFromArray($index)" ng-disabled="form.schema.minItems >= modelArray.length" class="md-icon-button" aria-label="More" style="position: relative; z-index: 20;"><md-icon>close</md-icon></md-button></md-list-item></md-list><div class="clearfix" style="padding: 15px;" ng-model="modelArray" schema-validate="form"><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" 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"><i class="glyphicon glyphicon-plus"></i> {{ form.add || \'Add\'}}</md-button></div></div>'),e.put("decorators/material/autocomplete.html",'<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=""><md-autocomplete flex="" ng-disabled="form.readonly" ng-model="$$value$$" sf-autocomplete="" sf-field-model="replaceAll" 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-item-text="item.name" md-floating-label="{{::form.title}}" md-menu-class="autocomplete-custom-template"><md-item-template><span md-highlight-text="searchText">{{item.name}}</span></md-item-template><md-not-found>No matches found</md-not-found></md-autocomplete></div>'),e.put("decorators/material/card-content.html",'<md-card-content class="schema-form-card-content {{form.htmlClass}}"></md-card-content>'),e.put("decorators/material/card.html",'<md-card class="schema-form-card {{form.htmlClass}}"></md-card>'),e.put("decorators/material/checkbox.html",'<div class="checkbox schema-form-checkbox {{::form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-messages=""><md-checkbox sf-field-model="" sf-changed="form" ng-disabled="form.readonly" schema-validate="form" class="{{::form.fieldHtmlClass}}" name="{{::form.key|sfCamelKey}}" aria-label="{{::form.title}}"><span>{{::form.title}}</span></md-checkbox></div>'),e.put("decorators/material/checkboxes.html",'<div sf-array="form" sf-field-model="" class="form-group schema-form-checkboxes {{::form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-messages=""><label class="control-label" ng-show="showTitle()">{{::form.title}}</label><div class="checkbox" ng-repeat="val in titleMapValues track by $index"><md-checkbox ng-model="titleMapValues[$index]" sf-changed="form" ng-disabled="::form.readonly" name="{{::form.key|sfCamelKey}}" ng-true-value="true" ng-false-value="false" aria-label="{{::form.title}}">{{::form.titleMap[$index].name}}</md-checkbox></div></div>'),e.put("decorators/material/chips.html",'<div class="form-group schema-form-chips {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}"><md-chips sf-field-model="" readonly="form.readonly" flex="" placeholder="{{::form.title}}"><md-chip-template><strong ng-if="!form.template">{{$chip}}</strong></md-chip-template></md-chips><div ng-messages="ngModel.$error"><div sf-message="" ng-message=""></div></div></div>'),e.put("decorators/material/date.html",'<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>'),e.put("decorators/material/default.html",'<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=""><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>'),e.put("decorators/material/fieldset-trcl.html",'<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex=""><legend ng-show="form.title">{{ form.title }}</legend><div ng-transclude=""></div></fieldset>'),e.put("decorators/material/fieldset.html",'<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex=""><legend ng-show="form.title">{{ form.title }}</legend></fieldset>'),e.put("decorators/material/help.html",'<div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>'),e.put("decorators/material/radio-buttons.html",'<div class="form-group schema-form-radiobuttons {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-layout="" sf-messages=""><div><label class="control-label" ng-show="showTitle()">{{form.title}}</label></div><section layout="row" layout-sm="column" layout-align="center center"><md-input-container ng-repeat="item in form.titleMap"><md-button type="button" class="group md-raised" sf-field-model="replaceAll" ng-model="$$value$$" sf-changed="form" ng-class="{\'md-primary\': ($$value$$ == item.value)}" ng-disabled="form.readonly" ng-model-options="form.ngModelOptions" schema-validate="form" ng-value="item.value" ng-click="$$value$$ = item.value" name="{{form.key.join(\'.\')}}"><span ng-bind-html="item.name"></span></md-button></md-input-container></section></div>'),e.put("decorators/material/radios-inline.html",'<div class="form-group schema-form-radios-inline {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-layout="" sf-messages=""><label class="control-label" ng-show="showTitle()">{{form.title}}</label><md-radio-group layout="row" sf-field-model="replaceAll" ng-model="$$value$$" class="{{form.fieldHtmlClass}}" ng-class="{ active: item.value === $$value$$ }" sf-changed="form" schema-validate="form" ng-disabled="form.readonly" name="{{form.key.join(\'.\')}}"><md-radio-button ng-repeat="item in form.titleMap" ng-value="item.value"><span ng-bind-html="item.name"></span></md-radio-button></md-radio-group></div>'),e.put("decorators/material/radios.html",'<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><div><md-radio-group sf-field-model="" sf-changed="form" ng-disabled="form.readonly" name="{{form.key.join(\'.\')}}" sf-layout="" sf-messages=""><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$$ }"><span ng-bind-html="item.name"></span></md-radio-button></md-radio-group></div></div>'),e.put("decorators/material/section.html",'<md-content class="schema-form-section {{::form.htmlClass}}" sf-layout=""></md-content>'),e.put("decorators/material/select.html",'<md-input-container 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=""><label ng-show="::showTitle()">{{::form.title}}</label><md-select sf-field-model="" schema-validate="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}}" aria-label="{{::opt.group}}"><md-option ng-repeat="(key, filtered) in form.getOptions(form, evalExpr) | filter: {group: opt.group} | orderBy:\'name\' as opts" ng-value="::filtered.value" aria-label="{{::filtered.name}}">{{::filtered.name}}</md-option></md-optgroup><md-option ng-if="!opt.group" ng-value="::opt.value" ng-repeat-end="">{{::opt.name}}</md-option></md-select></md-input-container>'),e.put("decorators/material/slider.html",'<md-input-container class="schema-form-slider {{form.htmlClass}}"><label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label><md-slider sf-field-model="" flex="" id="{{::form.key|sfCamelKey}}" min="0" max="255" aria-label="blue"></md-slider></md-input-container>'),e.put("decorators/material/submit.html",'<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}}"><md-tooltip ng-if="::form.tip">{{::form.tip}}</md-tooltip>{{::form.title}}</md-button></section>'),e.put("decorators/material/switch.html",'<md-input-container class="schema-form-switch {{::form.htmlClass}}"><md-switch sf-field-model="" sf-changed="form" sf-type-parser="form.schema" sf-messages="" schema-validate="form" id="{{::form.key|sfCamelKey}}" aria-label="{{form.title}}" ng-show="::form.key" ng-class="form.fieldHtmlClass" ng-disabled="::form.readonly"><span ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</span></md-switch></md-input-container>'),e.put("decorators/material/tabarray.html",'<div sf-array="form" ng-init="selected = { tab: 0 }" class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || \'left\'}} {{form.htmlClass}}"><div ng-if="!form.tabType || form.tabType !== \'right\'" ng-class="{\'col-xs-3\': !form.tabType || form.tabType === \'left\'}"><ul class="nav nav-tabs" ng-class="{ \'tabs-left\': !form.tabType || form.tabType === \'left\'}"><li ng-repeat="item in modelArray track by $index" ng-click="$event.preventDefault() || (selected.tab = $index)" ng-class="{active: selected.tab === $index}"><a href="#">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide="form.readonly" ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)"><a href="#"><i class="glyphicon glyphicon-plus"></i> {{ form.add || \'Add\'}}</a></li></ul></div><div ng-class="{\'col-xs-9\': !form.tabType || form.tabType === \'left\' || form.tabType === \'right\'}"><div class="tab-content {{form.fieldHtmlClass}}"><div class="tab-pane clearfix" ng-repeat="item in modelArray track by $index" ng-show="selected.tab === $index" ng-class="{active: selected.tab === $index}"><sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator><button ng-hide="form.readonly" ng-click="selected.tab = deleteFromArray($index).length - 1" type="button" class="btn {{ form.style.remove || \'btn-default\' }} pull-right"><i class="glyphicon glyphicon-trash"></i> {{ form.remove || \'Remove\'}}</button></div></div></div><div ng-if="form.tabType === \'right\'" class="col-xs-3"><ul class="nav nav-tabs tabs-right"><li ng-repeat="item in modelArray track by $index" ng-click="$event.preventDefault() || (selected.tab = $index)" ng-class="{active: selected.tab === $index}"><a href="#">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide="form.readonly" ng-click="$event.preventDefault() || appendToArray()"><a href="#"><i class="glyphicon glyphicon-plus"></i> {{ form.add || \'Add\'}}</a></li></ul></div></div>'),e.put("decorators/material/tabs.html",'<div sf-field-model="" class="schema-form-tabs {{::form.htmlClass}}"><md-tabs md-dynamic-height="" md-selected="selected" md-autoselect="" ng-init="selected = 0"></md-tabs></div>'),e.put("decorators/material/textarea.html",'<md-input-container class="{{::form.htmlClass}} schema-form-textarea" sf-messages="" sf-layout=""><label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label> <textarea ng-class="::form.fieldHtmlClass" id="{{::form.key|sfCamelKey}}" sf-changed="form" ng-disabled="::form.readonly" sf-field-model="" schema-validate="form" name="{{::form.key|sfCamelKey}}"></textarea></md-input-container>')}]),function(e,t){"use strict";function a(e,t,a,s,o){function m(e){var t=e.fieldFrag.querySelector("[sf-layout]");e.form.grid&&Object.getOwnPropertyNames(e.form.grid).forEach(function(a,r,l){t.setAttribute(a,e.form.grid[a])})}function i(){var e='<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>',t=document.createElement("div");return t.innerHTML=e,t.firstChild}function n(e){var t=e.fieldFrag.querySelector("[sf-messages]");if(t&&A){var a=A.cloneNode();t.appendChild(a)}}function d(e){var t=e.fieldFrag.querySelector("textarea"),a=e.form.maxlength||!1;t&&a&&t.setAttribute("md-maxlength",a)}function c(e){var t=e.fieldFrag.querySelector("md-autocomplete"),a=e.form.minLength||1,r=e.form.maxLength||!1,l=e.form.title||e.form.placeholder||e.form.key.slice(-1)[0];t&&(e.form.onChange&&(t.setAttribute("md-selected-item-change","args.form.onChange()"),t.setAttribute("md-search-text-change","args.form.onChange(searchText)")),t.setAttribute("md-min-length",a),r&&t.setAttribute("md-max-length",r),l&&t.setAttribute("md-floating-label",l))}function f(e){var t=e.fieldFrag.querySelector("md-switch");e.form.schema.titleMap&&(t.setAttribute("ng-true-value",e.form.schema.titleMap["true"]),t.setAttribute("ng-false-value",e.form.schema.titleMap["false"]))}function h(e){var t,a,a=e.fieldFrag.querySelector("md-select");if(e.form.selectOptions=[],e.form.getOptions=r,e.form.schema.links&&"object"==typeof e.form.schema.links){var s,o=/({)([^}]*)(})/gm;for(t=0;t<e.form.schema.links.length;t++)s=e.form.schema.links[t],"options"===s.rel&&(e.form.optionSource=s.href.replace(o,"$1$1 model.$2 $3$3"));a.setAttribute("sfm-external-options",e.form.optionSource)}else e.form.selectOptions=l(e.form)}function u(e){var t=e.fieldFrag.querySelector("md-datepicker");if(t){e.form.onChange&&t.setAttribute("ng-change","args.form.onChange(searchText)");var a=e.form.minimum||!1,r=e.form.maximum||!1;a&&t.setAttribute("md-max-date",a),r&&t.setAttribute("md-max-date",r)}}function p(e){if(e.form.tabs&&e.form.tabs.length>0){var t=e.fieldFrag.querySelector("md-tabs");e.form.tabs.forEach(function(a,r){var l=document.createElement("md-tab");l.setAttribute("label","{{"+e.path+".tabs["+r+"].title}}");var s=document.createElement("md-tab-body"),o=e.build(a.items,e.path+".tabs["+r+"].items",e.state);s.appendChild(o),l.appendChild(s),t.appendChild(l)})}}function g(t,a,r){if("string"===a.type&&("date"===a.format||"date-time"===a.format)){var l=e.stdFormObj(t,a,r);return l.key=r.path,l.type="date",r.lookup[s.stringify(r.path)]=l,l}}var b="decorators/material/",y=a.builders.simpleTransclusion,v=a.builders.ngModelOptions,x=a.builders.ngModel,$=a.builders.sfField,k=a.builders.condition,C=a.builders.array,w=a.builders.numeric,m=m,A=i(),T=n,E=h,M=c,S=f,F=u,O=p,j=d,K=[$,x,v,k,m],q=K.concat(T),H=K.concat(C);e.defaults.string.unshift(g),t.defineDecorator("materialDecorator",{actions:{template:b+"actions.html",builder:[$,y,k]},array:{template:b+"array.html",builder:H},autocomplete:{template:b+"autocomplete.html",builder:q.concat(M)},"boolean":{template:b+"checkbox.html",builder:q},button:{template:b+"submit.html",builder:q},checkbox:{template:b+"checkbox.html",builder:q},checkboxes:{template:b+"checkboxes.html",builder:H},date:{template:b+"date.html",builder:q.concat(F)},"default":{template:b+"default.html",builder:q},fieldset:{template:b+"fieldset.html",builder:[$,y,k]},help:{template:b+"help.html",builder:q},number:{template:b+"default.html",builder:q.concat(w)},password:{template:b+"default.html",builder:q},radios:{template:b+"radios.html",builder:q},"radios-inline":{template:b+"radios-inline.html",builder:q},radiobuttons:{template:b+"radio-buttons.html",builder:q},section:{template:b+"section.html",builder:[$,y,k,m]},select:{template:b+"select.html",builder:q.concat(E)},submit:{template:b+"submit.html",builder:q},tabs:{template:b+"tabs.html",builder:[$,O,k]},tabarray:{template:b+"tabarray.html",builder:H},textarea:{template:b+"textarea.html",builder:q.concat(j)},"switch":{template:b+"switch.html",builder:q.concat(S)}})}function r(e,t){return e.optionData?t(e.optionData):e.selectOptions?e.selectOptions:[]}function l(e){var t=[];if(e.titleMap)return e.titleMap;if(e["enum"]&&e["enum"].length)for(i=0;i<e["enum"].length;i++)e["enum"][i]&&e["enum"][i].length&&t.push({name:e["enum"][i],value:e["enum"][i]});return t}function s(e){function t(t,a,r){r.$observe("sfmExternalOptions",function(a){e.get(a).then(function(e){t.form.selectOptions=l(e.data)})})}var a={link:t,restrict:"A"};return a}function o(){return function(e){if(!e)return"";var t,a,r;for(r=e.slice(),a=0;a<r.length;a++)t=r[a].toLowerCase().split(""),a&&t.length&&(t[0]=t[0].toUpperCase()),r[a]=t.join("");return r.join("")}}e.module("schemaForm").config(a).directive("sfmExternalOptions",s).filter("sfCamelKey",o),a.$inject=["schemaFormProvider","schemaFormDecoratorsProvider","sfBuilderProvider","sfPathProvider","$injector"],s.$inject=["$http"]}(angular,void 0),require("../material-decorator-templates.js"),require("./type-parser.js"),require("./material-decorator.js"),angular.module("schemaForm").directive("sfTypeParser",function(){return{restrict:"A",scope:!1,require:"ngModel",link:function(e,t,a,r){var l=e.$watch(a.sfTypeParser,function(e){if(e){var t=-1!==e.type.indexOf("number"),a=-1!==e.type.indexOf("integer"),s=/^[0-9]*$/;(t||a)&&r.$parsers.push(function(e){var a;return t?a=parseFloat(e):s.test(e)&&(a=parseInt(e,10)),console.log("parser",s.test(e),e,a),void 0===a||isNaN(a)?e:a}),l()}})}}});


--------------------------------------------------------------------------------
/dist/angular-schema-form-material.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * angular-schema-form-material
3 |  * @version 1.0.0-alpha.2
4 |  * @date Mon, 02 Jan 2017 12:21:23 GMT
5 |  * @link https://github.com/json-schema-form/angular-schema-form-material
6 |  * @license MIT
7 |  * Copyright (c) 2014-2017 JSON Schema Form
8 |  */
9 | !function(e){function r(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}var n={};return r.m=e,r.c=n,r.i=function(e){return e},r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=27)}([function(e,r){var n="/material/default.html",t='<md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"\r\n                    ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}"\r\n                    sf-messages sf-layout sf-material-class="md-input-has-value">\r\n  <label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>\r\n  <input sf-field-model\r\n         ng-show="::form.key"\r\n         type="{{::form.type}}"\r\n         step="any"\r\n         sf-changed="form"\r\n         placeholder="{{::form.placeholder}}"\r\n         id="{{::form.key|sfCamelKey}}"\r\n         ng-class="::form.fieldHtmlClass"\r\n         sf-type-parser="form.schema"\r\n         ng-disabled="::form.readonly"\r\n         schema-validate="form"\r\n         name="{{::form.key|sfCamelKey}}"\r\n         aria-describedby="{{::form.key|sfCamelKey}}Status" />\r\n</md-input-container>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/checkbox.html",t='<div class="checkbox schema-form-checkbox {{::form.htmlClass}}"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"\r\n     sf-messages>\r\n  <md-checkbox sf-field-model\r\n               sf-changed="form"\r\n               ng-disabled="form.readonly"\r\n               schema-validate="form"\r\n               sf-material-class="md-checked"\r\n               class="{{::form.fieldHtmlClass}}"\r\n               name="{{::form.key|sfCamelKey}}"\r\n               aria-label="{{::form.title}}">\r\n    <span>{{::form.title}}</span>\r\n  </md-checkbox>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/submit.html",t='<section class="schema-form-submit {{::form.htmlClass}}" sf-messages>\r\n  <md-button class="md-raised {{ form.style || \'md-primary\' }} {{::form.fieldHtmlClass}}"\r\n             type="{{::form.type}}"\r\n             ng-disabled="form.readonly"\r\n             aria-label="{{::form.title}}">\r\n    <md-tooltip ng-if="::form.tip">{{::form.tip}}</md-tooltip>\r\n    {{::form.title}}\r\n  </md-button>\r\n</section>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r,n){n(22),n(21),n(20)},function(e,r){var n="/material/actions.html",t='<section layout="row" class="btn-group schema-form-actions {{form.htmlClass}}"></section>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/array.html",t='<div  class="schema-form-array {{::form.htmlClass}}"\r\n      sf-field-model="sf-new-array"\r\n      sf-new-array>\r\n  <label class="control-label" ng-show="showTitle()">{{ form.title }}</label>\r\n  <md-list class="list-group" sf-field-model ui-sortable="form.sortOptions">\r\n    <md-list-item layout="row" class="list-group-item"\r\n             sf-field-model="ng-repeat"\r\n             ng-repeat="item in modelArray track by $index"\r\n             schema-form-array-items\r\n             class="{{::form.fieldHtmlClass}}">\r\n      <md-button flex="none" flex-order="2"\r\n                 type="button"\r\n                 ng-hide="form.readonly || form.remove === null"\r\n                 ng-click="deleteFromArray($index)"\r\n                 ng-disabled="form.schema.minItems >= modelArray.length"\r\n                 class="md-icon-button" aria-label="More"\r\n                 style="position: relative; z-index: 20;">\r\n        <md-icon>close</md-icon>\r\n      </md-button>\r\n    </md-list-item>\r\n  </md-list>\r\n  <div class="clearfix" style="padding: 15px;" ng-model="modelArray" schema-validate="form">\r\n    <div class="help-block"\r\n         ng-show="(hasError() && errorMessage(schemaError())) || form.description"\r\n         ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>\r\n\r\n    <md-button ng-hide="form.readonly || form.add === null"\r\n            ng-click="appendToArray()"\r\n            ng-disabled="form.schema.maxItems <= modelArray.length"\r\n            type="button"\r\n            class="btn md-raised md-primary {{ form.style.add || \'btn-default\' }} pull-right">\r\n      <i class="glyphicon glyphicon-plus"></i>\r\n      {{ form.add || \'Add\'}}\r\n    </md-button>\r\n  </div>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/autocomplete.html",t='<div class="form-group {{::form.htmlClass}} schema-form-select"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}"\r\n     sf-messages sf-layout>\r\n  <md-autocomplete flex\r\n    ng-disabled="form.readonly"\r\n    ng-model="$$value$$"\r\n    sf-autocomplete\r\n    sf-field-model="replaceAll"\r\n    schema-validate="form"\r\n    md-selected-item="$$value$$"\r\n    md-search-text="searchText"\r\n    md-selected-item-change="\'todo\';"\r\n    md-items="item in evalExpr(\'this[\\\'\'+form.optionFilter+\'\\\'](\\\'\'+searchText+\'\\\')\')"\r\n    md-item-text="item.name"\r\n    md-floating-label="{{::form.title}}"\r\n    md-menu-class="autocomplete-custom-template">\r\n    <md-item-template>\r\n      <span md-highlight-text="searchText">{{item.name}}</span>\r\n    </md-item-template>\r\n    <md-not-found>\r\n      No matches found\r\n    </md-not-found>\r\n  </md-autocomplete>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/checkboxes.html",t='<div sf-array="form" sf-field-model\r\n     class="form-group schema-form-checkboxes {{::form.htmlClass}}"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"\r\n     sf-messages>\r\n  <label class="control-label" ng-show="showTitle()">{{::form.title}}</label>\r\n  <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >\r\n    <md-checkbox ng-model="titleMapValues[$index]"\r\n                 sf-changed="form"\r\n                 ng-disabled="::form.readonly"\r\n                 name="{{::form.key|sfCamelKey}}"\r\n                 ng-true-value="true"\r\n                 ng-false-value="false"\r\n                 aria-label="{{::form.title}}">\r\n      {{::form.titleMap[$index].name}}\r\n    </md-checkbox>\r\n  </div>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/date.html",t='<div class="schema-form-date {{::form.htmlClass}}">\r\n  <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>\r\n  <md-datepicker sf-field-model\r\n                 sf-changed="form"\r\n                 schema-validate="form"\r\n                 sf-type-parser="form.schema"\r\n                 id="{{::form.key|sfCamelKey}}"\r\n                 ng-show="::form.key"\r\n                 ng-class="::form.fieldHtmlClass"\r\n                 ng-disabled="::form.readonly"\r\n                 md-placeholder="Enter date" sf-messages>\r\n  </md-datepicker>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/fieldset.html",t='<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>\r\n  <legend ng-show="form.title">{{ form.title }}</legend>\r\n</fieldset>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/help.html",t='<div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/radio-buttons.html",t='<div class="form-group schema-form-radiobuttons {{::form.htmlClass}}"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-layout sf-messages>\r\n  <div>\r\n    <label class="control-label" ng-show="showTitle()">{{form.title}}</label>\r\n  </div>\r\n  <section layout="row" layout-sm="column" layout-align="center center">\r\n    <md-input-container ng-repeat="item in form.titleMap">\r\n      <md-button type="button"\r\n                 class="group md-raised"\r\n                 sf-field-model="replaceAll"\r\n                 ng-model="$$value$$"\r\n                 sf-changed="form"\r\n                 class="radio {{::form.fieldHtmlClass}}"\r\n                 ng-class="{\'md-primary\': ($$value$$ == item.value)}"\r\n                 ng-disabled="form.readonly"\r\n                 ng-model-options="form.ngModelOptions"\r\n                 schema-validate="form"\r\n                 ng-value="item.value"\r\n                 ng-click="$$value$$ = item.value"\r\n                 name="{{form.key.join(\'.\')}}">\r\n        <span ng-bind-html="item.name"></span>\r\n      </md-button>\r\n    </md-input-container>\r\n  </section>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/radios-inline.html",t='<div class="form-group schema-form-radios-inline {{::form.htmlClass}}"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}" sf-layout sf-messages>\r\n  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>\r\n  <md-radio-group layout="row"\r\n                  sf-field-model="replaceAll"\r\n                  ng-model="$$value$$"\r\n                  class="{{::form.fieldHtmlClass}}"\r\n                  ng-class="{ active: item.value === $$value$$ }"\r\n                  sf-changed="form"\r\n                  schema-validate="form"\r\n                  ng-disabled="form.readonly"\r\n                  name="{{form.key.join(\'.\')}}">\r\n    <md-radio-button ng-repeat="item in form.titleMap" ng-value="item.value">\r\n      <span ng-bind-html="item.name"></span>\r\n    </md-radio-button>\r\n  </md-radio-group>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/radios.html",t='<div class="form-group schema-form-radios {{::form.htmlClass}}"\r\n     ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}">\r\n  <label class="control-label" ng-show="showTitle()" aria-label="{{form.title}}" layout="row">{{form.title}} {{form.titleMap | json}}</label>\r\n  <div>\r\n    <md-radio-group sf-field-model\r\n                    sf-changed="form"\r\n                    ng-disabled="form.readonly"\r\n                    name="{{form.key.join(\'.\')}}"\r\n                    sf-layout sf-messages>\r\n      <md-radio-button ng-repeat="item in form.titleMap"\r\n                       ng-value="item.value"\r\n                       class="{{::form.fieldHtmlClass}}"\r\n                       sf-field-model="ng-class"\r\n                       ng-class="{ active: item.value === $$value$$ }">\r\n        <span ng-bind-html="item.name"></span>\r\n      </md-radio-button>\r\n    </md-radio-group>\r\n  </div>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/section.html",t='<md-content class="schema-form-section {{::form.htmlClass}}" sf-layout>\r\n</md-content>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/select.html",t='<md-input-container\r\n    class="form-group {{::form.htmlClass}} schema-form-select"\r\n    ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}"\r\n    sf-messages sf-layout>\r\n  <label ng-show="::showTitle()">{{::form.title}}</label>\r\n  <md-select sf-field-model schema-validate="form">\r\n    <md-optgroup ng-repeat-start="(key, opt) in form.getOptions(form, evalExpr) | orderBy:\'group\' as optGroups"\r\n                 ng-if="opt.group && opt.group != optGroups[key-1].group"\r\n                 label="{{::opt.group}}"\r\n                 aria-label="{{::opt.group}}">\r\n      <md-option ng-repeat="(key, filtered) in form.getOptions(form, evalExpr) | filter: {group: opt.group} | orderBy:\'name\' as opts"\r\n                 ng-value="::filtered.value"\r\n                 aria-label="{{::filtered.name}}">{{::filtered.name}}</md-option>\r\n    </md-optgroup>\r\n    <md-option   ng-if="!opt.group"\r\n                 ng-value="::opt.value"\r\n                 ng-repeat-end>{{::opt.name}}</md-option>\r\n  </md-select>\r\n</md-input-container>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/switch.html",t='<md-input-container class="schema-form-switch {{::form.htmlClass}}">\r\n  <md-switch sf-field-model\r\n             sf-changed="form"\r\n             sf-type-parser="form.schema"\r\n             sf-messages\r\n             schema-validate="form"\r\n             id="{{::form.key|sfCamelKey}}"\r\n             aria-label="{{form.title}}"\r\n             ng-show="::form.key"\r\n             ng-class="form.fieldHtmlClass"\r\n             ng-disabled="::form.readonly">\r\n    <span  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</span>\r\n  </md-switch>\r\n</md-input-container>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/tabarray.html",t='\r\n<div sf-array="form" ng-init="selected = { tab: 0 }"\r\n     class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || \'left\'}} {{::form.htmlClass}}">\r\n  <div ng-if="!form.tabType || form.tabType !== \'right\'"\r\n       ng-class="{\'col-xs-3\': !form.tabType || form.tabType === \'left\'}">\r\n    <ul class="nav nav-tabs"\r\n        ng-class="{ \'tabs-left\': !form.tabType || form.tabType === \'left\'}">\r\n      <li ng-repeat="item in modelArray track by $index"\r\n          ng-click="$event.preventDefault() || (selected.tab = $index)"\r\n          ng-class="{active: selected.tab === $index}">\r\n          <a href="#">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a>\r\n      </li>\r\n      <li ng-hide="form.readonly" ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">\r\n        <a href="#">\r\n          <i class="glyphicon glyphicon-plus"></i>\r\n          {{ form.add || \'Add\'}}\r\n          </a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <div ng-class="{\'col-xs-9\': !form.tabType || form.tabType === \'left\' || form.tabType === \'right\'}">\r\n    <div class="tab-content {{::form.fieldHtmlClass}}">\r\n      <div class="tab-pane clearfix"\r\n           ng-repeat="item in modelArray track by $index"\r\n           ng-show="selected.tab === $index"\r\n           ng-class="{active: selected.tab === $index}">\r\n           <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>\r\n\r\n\r\n           <button ng-hide="form.readonly"\r\n                   ng-click="selected.tab = deleteFromArray($index).length - 1"\r\n                   type="button"\r\n                   class="btn {{ form.style.remove || \'btn-default\' }} pull-right">\r\n             <i class="glyphicon glyphicon-trash"></i>\r\n             {{ form.remove || \'Remove\'}}\r\n           </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div ng-if="form.tabType === \'right\'" class="col-xs-3">\r\n    <ul class="nav nav-tabs tabs-right">\r\n      <li ng-repeat="item in modelArray track by $index"\r\n          ng-click="$event.preventDefault() || (selected.tab = $index)"\r\n          ng-class="{active: selected.tab === $index}">\r\n          <a href="#">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a>\r\n      </li>\r\n      <li ng-hide="form.readonly" ng-click="$event.preventDefault() || appendToArray()">\r\n        <a href="#">\r\n          <i class="glyphicon glyphicon-plus"></i>\r\n          {{ form.add || \'Add\'}}\r\n          </a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/tabs.html",t='<div sf-field-model class="schema-form-tabs {{::form.htmlClass}}">\r\n  <md-tabs md-dynamic-height md-selected="selected" md-autoselect ng-init="selected = 0"></md-tabs>\r\n</div>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){var n="/material/textarea.html",t='<md-input-container class="{{::form.htmlClass}} schema-form-textarea" sf-messages sf-layout>\r\n  <label ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>\r\n  <textarea ng-class="::form.fieldHtmlClass"\r\n            id="{{::form.key|sfCamelKey}}"\r\n            sf-changed="form"\r\n            ng-disabled="::form.readonly"\r\n            sf-field-model\r\n            schema-validate="form"\r\n            name="{{::form.key|sfCamelKey}}"></textarea>\r\n</md-input-container>\r\n';window.angular.module("ng").run(["$templateCache",function(e){e.put(n,t)}]),e.exports=n},function(e,r){function n(e,r){return{restrict:"A",scope:!1,link:function(e,n,t,a){function l(e,r){return e[r]}var o;try{o=e.form.key.reduce(l,e.model)}catch(e){o=void 0}r(function(){null!==o&&"undefined"!=typeof o&&o!==!1&&n.addClass(t.sfMaterialClass)},0)}}}angular.module("schemaForm").directive("sfMaterialClass",n),n.$inject=["$compile","$timeout"]},function(e,r,n){"use strict";function t(e,r,n,t,o){function s(e){var r=e.fieldFrag.querySelector("[sf-layout]");e.form.grid&&Object.getOwnPropertyNames(e.form.grid).forEach(function(n,t,a){r.setAttribute(n,e.form.grid[n])})}function i(){var e='<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>',r=document.createElement("div");return r.innerHTML=e,r.firstChild}function m(e){var r=e.fieldFrag.querySelector("[sf-messages]");if(r&&N){var n=N.cloneNode();r.appendChild(n)}}function c(e){var r=e.fieldFrag.querySelector("textarea"),n=e.form.maxlength||!1;r&&n&&r.setAttribute("md-maxlength",n)}function u(e){var r=e.fieldFrag.querySelector("md-autocomplete"),n=e.form.minLength||1,t=e.form.maxLength||!1,a=e.form.title||e.form.placeholder||e.form.key.slice(-1)[0];r&&(e.form.onChange&&(r.setAttribute("md-selected-item-change","args.form.onChange()"),r.setAttribute("md-search-text-change","args.form.onChange(searchText)")),r.setAttribute("md-min-length",n),t&&r.setAttribute("md-max-length",t),a&&r.setAttribute("md-floating-label",a))}function h(e){var r=e.fieldFrag.querySelector("md-switch");e.form.schema.titleMap&&(r.setAttribute("ng-true-value",e.form.schema.titleMap.true),r.setAttribute("ng-false-value",e.form.schema.titleMap.false))}function b(e){var r,n,n=e.fieldFrag.querySelector("md-select");if(e.form.selectOptions=[],e.form.getOptions=a,e.form.schema.links&&"object"==typeof e.form.schema.links){var t,o=/({)([^}]*)(})/gm;for(r=0;r<e.form.schema.links.length;r++)t=e.form.schema.links[r],"options"===t.rel&&(e.form.optionSource=t.href.replace(o,"$1$1 model.$2 $3$3"));n.setAttribute("sfm-external-options",e.form.optionSource)}else e.form.selectOptions=l(e.form)}function y(e){var r=e.fieldFrag.querySelector("md-datepicker");if(r){e.form.onChange&&r.setAttribute("ng-change","args.form.onChange(searchText)");var n=e.form.minimum||!1,t=e.form.maximum||!1;n&&r.setAttribute("md-max-date",n),t&&r.setAttribute("md-max-date",t)}}function $(e){if(e.form.tabs&&e.form.tabs.length>0){var r=e.fieldFrag.querySelector("md-tabs");e.form.tabs.forEach(function(n,t){var a="(evalExpr("+e.path+".tabs["+t+'].condition, { model: model, "arrayIndex": $index}))',l=document.createElement("md-tab");n.condition&&l.setAttribute("ng-if",a),l.setAttribute("label","{{"+e.path+".tabs["+t+"].title}}");var o=document.createElement("md-tab-body"),s=e.build(n.items,e.path+".tabs["+t+"].items",e.state);o.appendChild(s),l.appendChild(o),r.appendChild(l)})}}function C(r,n,a){if("string"===n.type&&("date"===n.format||"date-time"===n.format)){var l=e.stdFormObj(r,n,a);return l.key=a.path,l.type="date",a.lookup[t.stringify(a.path)]=l,l}}var A=n.builders.simpleTransclusion,M=n.builders.ngModelOptions,O=n.builders.ngModel,S=n.builders.sfField,K=n.builders.condition,P=n.builders.array,D=n.builders.numeric,s=s,N=i(),B=m,V=b,z=u,U=h,W=y,J=$,Q=c,X=[S,O,M,K,s],Y=X.concat(B),Z=X.concat(P);e.defaults.string.unshift(C),r.defineDecorator("materialDecorator",{actions:{template:d.a,builder:[S,A,K]},array:{template:f.a,builder:Z},autocomplete:{template:p.a,builder:Y.concat(z)},boolean:{template:g.a,builder:Y},button:{template:v.a,builder:Y},checkbox:{template:g.a,builder:Y},checkboxes:{template:x.a,builder:Z},date:{template:w.a,builder:Y.concat(W)},default:{template:k.a,builder:Y},fieldset:{template:T.a,builder:[S,A,K]},help:{template:E.a,builder:Y},number:{template:k.a,builder:Y.concat(D)},password:{template:k.a,builder:Y},radios:{template:F.a,builder:Y},"radios-inline":{template:j.a,builder:Y},radiobuttons:{template:H.a,builder:Y},section:{template:q.a,builder:[S,A,K,s]},select:{template:I.a,builder:Y.concat(V)},submit:{template:v.a,builder:Y},tabs:{template:G.a,builder:[S,J,K]},tabarray:{template:_.a,builder:Z},textarea:{template:R.a,builder:Y.concat(Q)},switch:{template:L.a,builder:Y.concat(U)}})}function a(e,r){return e.optionData?r(e.optionData):e.selectOptions?e.selectOptions:[]}function l(e){var r=[];if(e.titleMap)return e.titleMap;if(e.enum&&e.enum.length)for(i=0;i<e.enum.length;i++)e.enum[i]&&e.enum[i].length&&r.push({name:e.enum[i],value:e.enum[i]});return r}function o(e){function r(r,n,t){t.$observe("sfmExternalOptions",function(n){e.get(n).then(function(e){r.form.selectOptions=l(e.data)})})}var n={link:r,restrict:"A"};return n}function s(){return function(e){if(!e)return"";var r,n,t;for(t=e.slice(),n=0;n<t.length;n++)r=t[n].toLowerCase().split(""),n&&r.length&&(r[0]=r[0].toUpperCase()),t[n]=r.join("");return t.join("")}}var m=n(4),d=n.n(m),c=n(5),f=n.n(c),u=n(6),p=n.n(u),h=n(1),g=n.n(h),b=n(2),v=n.n(b),y=n(7),x=n.n(y),$=n(8),w=n.n($),C=n(0),k=n.n(C),A=n(9),T=n.n(A),M=n(10),E=n.n(M),O=n(13),F=n.n(O),S=n(12),j=n.n(S),K=n(11),H=n.n(K),P=n(14),q=n.n(P),D=n(15),I=n.n(D),N=n(16),L=n.n(N),B=n(18),G=n.n(B),V=n(17),_=n.n(V),z=n(19),R=n.n(z);angular.module("schemaForm").config(t).directive("sfmExternalOptions",o).filter("sfCamelKey",s),t.$inject=["schemaFormProvider","schemaFormDecoratorsProvider","sfBuilderProvider","sfPathProvider","$injector"],o.$inject=["$http"]},function(e,r){angular.module("schemaForm").directive("sfTypeParser",function(){return{restrict:"A",scope:!1,require:"ngModel",link:function(e,r,n,t){var a=e.$watch(n.sfTypeParser,function(e){if(e){var r=e.type.indexOf("number")!==-1,n=e.type.indexOf("integer")!==-1,l=/^[0-9]*$/;(r||n)&&t.$parsers.push(function(e){var n;return r?n=parseFloat(e):l.test(e)&&(n=parseInt(e,10)),console.log("parser",l.test(e),e,n),void 0===n||isNaN(n)?e:n}),a()}})}}})},,,,,function(e,r,n){e.exports=n(3)}]);


--------------------------------------------------------------------------------
/material-decorator.js:
--------------------------------------------------------------------------------
  1 | angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("decorators/material/actions-trcl.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\" ng-transclude=\"\"></div>");
  2 | $templateCache.put("decorators/material/actions.html","<section layout=\"row\" class=\"btn-group schema-form-actions {{form.htmlClass}}\"></section>");
  3 | $templateCache.put("decorators/material/array.html","<div class=\"schema-form-array {{form.htmlClass}}\" sf-field-model=\"sf-new-array\" sf-new-array=\"\"><label class=\"control-label\" ng-show=\"showTitle()\">{{ form.title }}</label><md-list class=\"list-group\" sf-field-model=\"\" ui-sortable=\"form.sortOptions\"><md-list-item layout=\"row\" class=\"list-group-item\" sf-field-model=\"ng-repeat\" ng-repeat=\"item in modelArray track by $index\" schema-form-array-items=\"\"><md-button flex=\"none\" flex-order=\"2\" type=\"button\" ng-hide=\"form.readonly || form.remove === null\" ng-click=\"deleteFromArray($index)\" ng-disabled=\"form.schema.minItems >= modelArray.length\" class=\"md-icon-button\" aria-label=\"More\" style=\"position: relative; z-index: 20;\"><md-icon>close</md-icon></md-button></md-list-item></md-list><div class=\"clearfix\" style=\"padding: 15px;\" ng-model=\"modelArray\" schema-validate=\"form\"><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\" 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\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</md-button></div></div>");
  4 | $templateCache.put("decorators/material/autocomplete.html","<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=\"\"><md-autocomplete flex=\"\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" sf-autocomplete=\"\" sf-field-model=\"replaceAll\" 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-item-text=\"item.name\" md-floating-label=\"{{::form.title}}\" md-menu-class=\"autocomplete-custom-template\"><md-item-template><span md-highlight-text=\"searchText\">{{item.name}}</span></md-item-template><md-not-found>No matches found</md-not-found></md-autocomplete></div>");
  5 | $templateCache.put("decorators/material/card-content.html","<md-card-content class=\"schema-form-card-content {{form.htmlClass}}\"></md-card-content>");
  6 | $templateCache.put("decorators/material/card.html","<md-card class=\"schema-form-card {{form.htmlClass}}\"></md-card>");
  7 | $templateCache.put("decorators/material/checkbox.html","<div class=\"checkbox schema-form-checkbox {{::form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\" sf-messages=\"\"><md-checkbox sf-field-model=\"\" sf-changed=\"form\" ng-disabled=\"form.readonly\" schema-validate=\"form\" class=\"{{::form.fieldHtmlClass}}\" name=\"{{::form.key|sfCamelKey}}\" aria-label=\"{{::form.title}}\"><span>{{::form.title}}</span></md-checkbox></div>");
  8 | $templateCache.put("decorators/material/checkboxes.html","<div sf-array=\"form\" sf-field-model=\"\" class=\"form-group schema-form-checkboxes {{::form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\" sf-messages=\"\"><label class=\"control-label\" ng-show=\"showTitle()\">{{::form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><md-checkbox ng-model=\"titleMapValues[$index]\" sf-changed=\"form\" ng-disabled=\"::form.readonly\" name=\"{{::form.key|sfCamelKey}}\" ng-true-value=\"true\" ng-false-value=\"false\" aria-label=\"{{::form.title}}\">{{::form.titleMap[$index].name}}</md-checkbox></div></div>");
  9 | $templateCache.put("decorators/material/chips.html","<div class=\"form-group schema-form-chips {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><md-chips sf-field-model=\"\" readonly=\"form.readonly\" flex=\"\" placeholder=\"{{::form.title}}\"><md-chip-template><strong ng-if=\"!form.template\">{{$chip}}</strong></md-chip-template></md-chips><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 10 | $templateCache.put("decorators/material/date.html","<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>");
 11 | $templateCache.put("decorators/material/default.html","<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=\"\"><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>");
 12 | $templateCache.put("decorators/material/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div ng-transclude=\"\"></div></fieldset>");
 13 | $templateCache.put("decorators/material/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend></fieldset>");
 14 | $templateCache.put("decorators/material/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
 15 | $templateCache.put("decorators/material/radio-buttons.html","<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\" sf-layout=\"\" sf-messages=\"\"><div><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label></div><section layout=\"row\" layout-sm=\"column\" layout-align=\"center center\"><md-input-container ng-repeat=\"item in form.titleMap\"><md-button type=\"button\" class=\"group md-raised\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" sf-changed=\"form\" ng-class=\"{\'md-primary\': ($$value$$ == item.value)}\" ng-disabled=\"form.readonly\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" ng-value=\"item.value\" ng-click=\"$$value$$ = item.value\" name=\"{{form.key.join(\'.\')}}\"><span ng-bind-html=\"item.name\"></span></md-button></md-input-container></section></div>");
 16 | $templateCache.put("decorators/material/radios-inline.html","<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\" sf-layout=\"\" sf-messages=\"\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><md-radio-group layout=\"row\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" class=\"{{form.fieldHtmlClass}}\" ng-class=\"{ active: item.value === $$value$$ }\" sf-changed=\"form\" schema-validate=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\"><md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group></div>");
 17 | $templateCache.put("decorators/material/radios.html","<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><div><md-radio-group sf-field-model=\"\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\" sf-layout=\"\" sf-messages=\"\"><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$$ }\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group></div></div>");
 18 | $templateCache.put("decorators/material/section.html","<md-content class=\"schema-form-section {{::form.htmlClass}}\" sf-layout=\"\"></md-content>");
 19 | $templateCache.put("decorators/material/select.html","<md-input-container 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=\"\"><label ng-show=\"::showTitle()\">{{::form.title}}</label><md-select sf-field-model=\"\" schema-validate=\"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}}\" aria-label=\"{{::opt.group}}\"><md-option ng-repeat=\"(key, filtered) in form.getOptions(form, evalExpr) | filter: {group: opt.group} | orderBy:\'name\' as opts\" ng-value=\"::filtered.value\" aria-label=\"{{::filtered.name}}\">{{::filtered.name}}</md-option></md-optgroup><md-option ng-if=\"!opt.group\" ng-value=\"::opt.value\" ng-repeat-end=\"\">{{::opt.name}}</md-option></md-select></md-input-container>");
 20 | $templateCache.put("decorators/material/slider.html","<md-input-container class=\"schema-form-slider {{form.htmlClass}}\"><label ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</label><md-slider sf-field-model=\"\" flex=\"\" id=\"{{::form.key|sfCamelKey}}\" min=\"0\" max=\"255\" aria-label=\"blue\"></md-slider></md-input-container>");
 21 | $templateCache.put("decorators/material/submit.html","<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}}\"><md-tooltip ng-if=\"::form.tip\">{{::form.tip}}</md-tooltip>{{::form.title}}</md-button></section>");
 22 | $templateCache.put("decorators/material/switch.html","<md-input-container class=\"schema-form-switch {{::form.htmlClass}}\"><md-switch sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" sf-messages=\"\" schema-validate=\"form\" id=\"{{::form.key|sfCamelKey}}\" aria-label=\"{{form.title}}\" ng-show=\"::form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"::form.readonly\"><span ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</span></md-switch></md-input-container>");
 23 | $templateCache.put("decorators/material/tabarray.html","<div sf-array=\"form\" ng-init=\"selected = { tab: 0 }\" class=\"clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || \'left\'}} {{form.htmlClass}}\"><div ng-if=\"!form.tabType || form.tabType !== \'right\'\" ng-class=\"{\'col-xs-3\': !form.tabType || form.tabType === \'left\'}\"><ul class=\"nav nav-tabs\" ng-class=\"{ \'tabs-left\': !form.tabType || form.tabType === \'left\'}\"><li ng-repeat=\"item in modelArray track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = appendToArray().length - 1)\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div><div ng-class=\"{\'col-xs-9\': !form.tabType || form.tabType === \'left\' || form.tabType === \'right\'}\"><div class=\"tab-content {{form.fieldHtmlClass}}\"><div class=\"tab-pane clearfix\" ng-repeat=\"item in modelArray track by $index\" ng-show=\"selected.tab === $index\" ng-class=\"{active: selected.tab === $index}\"><sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator><button ng-hide=\"form.readonly\" ng-click=\"selected.tab = deleteFromArray($index).length - 1\" type=\"button\" class=\"btn {{ form.style.remove || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-trash\"></i> {{ form.remove || \'Remove\'}}</button></div></div></div><div ng-if=\"form.tabType === \'right\'\" class=\"col-xs-3\"><ul class=\"nav nav-tabs tabs-right\"><li ng-repeat=\"item in modelArray track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || appendToArray()\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div></div>");
 24 | $templateCache.put("decorators/material/tabs.html","<div sf-field-model=\"\" class=\"schema-form-tabs {{::form.htmlClass}}\"><md-tabs md-dynamic-height=\"\" md-selected=\"selected\" md-autoselect=\"\" ng-init=\"selected = 0\"></md-tabs></div>");
 25 | $templateCache.put("decorators/material/textarea.html","<md-input-container class=\"{{::form.htmlClass}} schema-form-textarea\" sf-messages=\"\" sf-layout=\"\"><label ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</label> <textarea ng-class=\"::form.fieldHtmlClass\" id=\"{{::form.key|sfCamelKey}}\" sf-changed=\"form\" ng-disabled=\"::form.readonly\" sf-field-model=\"\" schema-validate=\"form\" name=\"{{::form.key|sfCamelKey}}\"></textarea></md-input-container>");}]);
 26 | (function(angular, undefined) {'use strict';
 27 |   angular
 28 |     .module('schemaForm')
 29 |     .config(materialDecoratorConfig)
 30 |     .directive('sfmExternalOptions', sfmExternalOptionsDirective)
 31 |     .filter('sfCamelKey', sfCamelKeyFilter);
 32 | 
 33 |   materialDecoratorConfig.$inject = [
 34 |     'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider', '$injector'
 35 |   ];
 36 | 
 37 |   function materialDecoratorConfig(
 38 |       schemaFormProvider, decoratorsProvider, sfBuilderProvider, sfPathProvider, $injector) {
 39 |     var base = 'decorators/material/';
 40 | 
 41 |     var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
 42 |     var ngModelOptions     = sfBuilderProvider.builders.ngModelOptions;
 43 |     var ngModel            = sfBuilderProvider.builders.ngModel;
 44 |     var sfField            = sfBuilderProvider.builders.sfField;
 45 |     var condition          = sfBuilderProvider.builders.condition;
 46 |     var array              = sfBuilderProvider.builders.array;
 47 |     var numeric            = sfBuilderProvider.builders.numeric;
 48 | 
 49 |     var sfLayout           = sfLayout;
 50 |     var sfMessagesNode     = sfMessagesNodeHandler();
 51 |     var sfMessages         = sfMessagesBuilder;
 52 |     var sfOptions          = sfOptionsBuilder;
 53 |     var mdAutocomplete     = mdAutocompleteBuilder;
 54 |     var mdSwitch           = mdSwitchBuilder;
 55 |     var mdDatepicker       = mdDatepickerBuilder;
 56 |     var mdTabs             = mdTabsBuilder;
 57 |     var textarea           = textareaBuilder;
 58 | 
 59 |     var core = [ sfField, ngModel, ngModelOptions, condition, sfLayout ];
 60 |     var defaults = core.concat(sfMessages);
 61 |     var arrays = core.concat(array);
 62 | 
 63 |     schemaFormProvider.defaults.string.unshift(dateDefault);
 64 | 
 65 |     decoratorsProvider.defineDecorator('materialDecorator', {
 66 |       actions: { template: base + 'actions.html', builder: [ sfField, simpleTransclusion, condition ] },
 67 |       array: { template: base + 'array.html', builder: arrays },
 68 |       autocomplete: { template: base + 'autocomplete.html', builder: defaults.concat(mdAutocomplete) },
 69 |       boolean: { template: base + 'checkbox.html', builder: defaults },
 70 |       button: { template: base + 'submit.html', builder: defaults },
 71 |       checkbox: { template: base + 'checkbox.html', builder: defaults },
 72 |       checkboxes: { template: base + 'checkboxes.html', builder: arrays },
 73 |       date: { template: base + 'date.html', builder: defaults.concat(mdDatepicker) },
 74 |       'default': { template: base + 'default.html', builder: defaults },
 75 |       fieldset: { template: base + 'fieldset.html', builder: [ sfField, simpleTransclusion, condition ] },
 76 |       help: { template: base + 'help.html', builder: defaults },
 77 |       number: { template: base + 'default.html', builder: defaults.concat(numeric) },
 78 |       password: { template: base + 'default.html', builder: defaults },
 79 |       radios: { template: base + 'radios.html', builder: defaults },
 80 |       'radios-inline': { template: base + 'radios-inline.html', builder: defaults },
 81 |       radiobuttons: { template: base + 'radio-buttons.html', builder: defaults },
 82 |       section: { template: base + 'section.html', builder: [ sfField, simpleTransclusion, condition, sfLayout ] },
 83 |       select: { template: base + 'select.html', builder: defaults.concat(sfOptions) },
 84 |       submit: { template: base + 'submit.html', builder: defaults },
 85 |       tabs: { template: base + 'tabs.html', builder: [ sfField, mdTabs, condition ] },
 86 |       tabarray: { template: base + 'tabarray.html', builder: arrays },
 87 |       textarea: { template: base + 'textarea.html', builder: defaults.concat(textarea) },
 88 |       switch: { template: base + 'switch.html', builder: defaults.concat(mdSwitch) }
 89 |     });
 90 | 
 91 |     function sfLayout(args) {
 92 |       var layoutDiv = args.fieldFrag.querySelector('[sf-layout]');
 93 | 
 94 |       if (args.form.grid) {
 95 |         Object.getOwnPropertyNames(args.form.grid).forEach(function(property, idx, array) {
 96 |           layoutDiv.setAttribute(property, args.form.grid[property]);
 97 |         });
 98 |       };
 99 |     };
100 | 
101 |     function sfMessagesNodeHandler() {
102 |       var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
103 |       var div = document.createElement('div');
104 |       div.innerHTML = html;
105 |       return div.firstChild;
106 |     };
107 | 
108 |     function sfMessagesBuilder(args) {
109 |       var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
110 |       if (messagesDiv && sfMessagesNode) {
111 |         var child = sfMessagesNode.cloneNode();
112 |         messagesDiv.appendChild(child);
113 |       }
114 |     };
115 | 
116 |     function textareaBuilder(args) {
117 |       var textareaFrag = args.fieldFrag.querySelector('textarea');
118 |       var maxLength = args.form.maxlength || false;
119 |       if (textareaFrag && maxLength) {
120 |         textareaFrag.setAttribute('md-maxlength', maxLength);
121 |       };
122 |     };
123 | 
124 |     function mdAutocompleteBuilder(args) {
125 |       var mdAutocompleteFrag = args.fieldFrag.querySelector('md-autocomplete');
126 |       var minLength = args.form.minLength || 1;
127 |       var maxLength = args.form.maxLength || false;
128 |       var title = args.form.title || args.form.placeholder || args.form.key.slice(-1)[0];
129 | 
130 |       if (mdAutocompleteFrag) {
131 |         if (args.form.onChange) {
132 |           mdAutocompleteFrag.setAttribute('md-selected-item-change', 'args.form.onChange()');
133 |           mdAutocompleteFrag.setAttribute('md-search-text-change', 'args.form.onChange(searchText)');
134 |         };
135 | 
136 |         // mdAutocompleteFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
137 |         mdAutocompleteFrag.setAttribute('md-min-length', minLength);
138 |         if (maxLength) {
139 |           mdAutocompleteFrag.setAttribute('md-max-length', maxLength);
140 |         };
141 | 
142 |         if (title) {
143 |           mdAutocompleteFrag.setAttribute('md-floating-label', title);
144 |         };
145 |       };
146 |     };
147 | 
148 |     function mdSwitchBuilder(args) {
149 |       var mdSwitchFrag = args.fieldFrag.querySelector('md-switch');
150 |       if (args.form.schema.titleMap) {
151 |         mdSwitchFrag.setAttribute('ng-true-value', args.form.schema.titleMap.true);
152 |         mdSwitchFrag.setAttribute('ng-false-value', args.form.schema.titleMap.false);
153 |       };
154 |     };
155 | 
156 |     function sfOptionsBuilder(args) {
157 |       var mdSelectFrag = args.fieldFrag.querySelector('md-select');
158 |       var enumTitleMap = [];
159 |       var i;
160 |       var mdSelectFrag;
161 | 
162 |       args.form.selectOptions = [];
163 |       args.form.getOptions = getOptionsHandler;
164 | 
165 |       if (args.form.schema.links && (typeof args.form.schema.links) === 'object') {
166 |         var link;
167 |         var related = /({)([^}]*)(})/gm;
168 |         var source = /{{([^}]*)}}/gm;
169 |         var matched;
170 | 
171 |         for (i = 0; i < args.form.schema.links.length; i++) {
172 |           link = args.form.schema.links[i];
173 |           if (link.rel === 'options') {
174 |             // TODO enable filter to allow processing results
175 |             // args.form.optionSource = link.href.replace(related, '$1$1 model.$2 | _externalOptionUri $3$3');
176 |             args.form.optionSource = link.href.replace(related, '$1$1 model.$2 $3$3');
177 |           };
178 |         };
179 | 
180 |         mdSelectFrag.setAttribute('sfm-external-options', args.form.optionSource);
181 |       }
182 |       else {
183 |         args.form.selectOptions = sfOptionsProcessor(args.form);
184 |       };
185 |     };
186 | 
187 |     function mdDatepickerBuilder(args) {
188 |       var mdDatepickerFrag = args.fieldFrag.querySelector('md-datepicker');
189 |       if (mdDatepickerFrag) {
190 |         if (args.form.onChange) {
191 |           mdDatepickerFrag.setAttribute('ng-change', 'args.form.onChange(searchText)');
192 |         }
193 |         // mdDatepickerFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
194 |         var minDate = args.form.minimum || false;
195 |         var maxDate = args.form.maximum || false;
196 |         if (minDate) {
197 |           mdDatepickerFrag.setAttribute('md-max-date', minDate);
198 |         }
199 |         if (maxDate) {
200 |           mdDatepickerFrag.setAttribute('md-max-date', maxDate);
201 |         }
202 |       }
203 |     };
204 | 
205 |     function mdTabsBuilder(args) {
206 |       if (args.form.tabs && args.form.tabs.length > 0) {
207 |         var mdTabsFrag = args.fieldFrag.querySelector('md-tabs');
208 | 
209 |         args.form.tabs.forEach(function(tab, index) {
210 |           var mdTab = document.createElement('md-tab');
211 |           mdTab.setAttribute('label', '{{' + args.path + '.tabs[' + index + '].title}}');
212 |           var mdTabBody = document.createElement('md-tab-body');
213 |           var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
214 |           mdTabBody.appendChild(childFrag);
215 |           mdTab.appendChild(mdTabBody);
216 |           mdTabsFrag.appendChild(mdTab);
217 |         });
218 |       }
219 |     };
220 | 
221 |     /**
222 |      * Material Datepicker
223 |      */
224 |     function dateDefault(name, schema, options) {
225 |       if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
226 |         var f = schemaFormProvider.stdFormObj(name, schema, options);
227 |         f.key  = options.path;
228 |         f.type = 'date';
229 |         options.lookup[sfPathProvider.stringify(options.path)] = f;
230 |         return f;
231 |       }
232 |     };
233 |   };
234 | 
235 |   function getOptionsHandler(form, evalExpr) {
236 |     if (form.optionData) {
237 |       return evalExpr(form.optionData);
238 |     };
239 | 
240 |     if (form.selectOptions) {
241 |       return form.selectOptions;
242 |     };
243 | 
244 |     return [];
245 |   };
246 | 
247 |   function sfOptionsProcessor(data) {
248 |     var enumTitleMap = [];
249 | 
250 |     if (data.titleMap) {
251 |       return data.titleMap;
252 |     }
253 |     else if (data.enum && data.enum.length) {
254 |       for (i = 0; i < data.enum.length; i++) {
255 |         if (data.enum[i] && data.enum[i].length) {
256 |           enumTitleMap.push({ name: data.enum[i], value: data.enum[i] });
257 |         };
258 |       };
259 |     };
260 | 
261 |     return enumTitleMap;
262 |   };
263 | 
264 |   sfmExternalOptionsDirective.$inject = [ '$http' ];
265 | 
266 |   function sfmExternalOptionsDirective($http) {
267 |     var directive = {
268 |       link: link,
269 |       restrict: 'A'
270 |     };
271 | 
272 |     return directive;
273 | 
274 |     function link(scope, element, attrs) {
275 |       attrs.$observe('sfmExternalOptions', function(dataURI) {
276 |         $http.get(dataURI)
277 |           .then(function(response) {
278 |             scope.form.selectOptions = sfOptionsProcessor(response.data);
279 |           });
280 |       });
281 |     };
282 |   };
283 | 
284 |   /**
285 |    * sfCamelKey Filter
286 |    */
287 |   function sfCamelKeyFilter() {
288 |     return function(formKey) {
289 |       if (!formKey) { return ''; };
290 |       var part, i, key;
291 |       key = formKey.slice();
292 |       for (i = 0; i < key.length; i++) {
293 |         part = key[i].toLowerCase().split('');
294 |         if (i && part.length) { part[0] = part[0].toUpperCase(); };
295 |         key[i] = part.join('');
296 |       };
297 |       return key.join('');
298 |     };
299 |   };
300 | 
301 | })(angular, undefined);
302 | /*
303 |   TODO add default filter for autocomplete which allows form.optionFilter or 'autocompleteFilter' to override
304 |   Something along the following lines...
305 |   if ($injector.has('autocompleteFilter')) {
306 |     result = $filter('autocomplete')(input);
307 |   }
308 |   else
309 |   if ($injector.has(args.form.optionFilter + 'Filter')) {
310 |     result = $filter(args.form.optionFilter)(input);
311 |   }
312 |   else {
313 |     if (args.form.optionFilter) {
314 |       mdAutocomplete.setAttribute('md-items',
315 |         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
316 |     }
317 |   }
318 | 
319 |   .filter('autocompleteMovieTest', function() {
320 |     function autocompleteMovieTestFilter(array, input){
321 |       var current = input;
322 |       // You could also call multiple filters here using:
323 |       // current = $filter('filterName')(input)
324 |       if(typeof current === 'string') {
325 |         current = current.replace(' ','-').toLowerCase();
326 |       }
327 |       current = (!current) ? '_undefined' : current;
328 |       return current;
329 |     }
330 | 
331 |     return externalOptionUriFilter;
332 |   })
333 | */
334 | 
335 | require('../material-decorator-templates.js');
336 | require('./type-parser.js');
337 | require('./material-decorator.js');
338 | 
339 | /**
340 |  * It might be a bug, but currently input[type=number] does not add
341 |  * a parser, so the model gets populated with a string. It does however stop non numbers so it
342 |  * must have some preproccessing. Anyway, this adds parser before schema-validate hooks into it.
343 |  * FIXME: this is still not a complete solution. Inputting a string in an input[type=number] results
344 |  * in parsers never firing and ngModel value removed. So no validation from schema-validate either.
345 |  */
346 | angular.module('schemaForm').directive('sfTypeParser', function() {
347 |   return {
348 |     restrict: 'A',
349 |     scope: false,
350 |     require: 'ngModel',
351 |     link: function(scope, element, attrs, ngModel) {
352 |       var once = scope.$watch(attrs.sfTypeParser, function(schema) {
353 |         if (!schema) {
354 |           return;
355 |         }
356 | 
357 |         var isNumber  = schema.type.indexOf('number') !== -1;
358 |         var isInteger = schema.type.indexOf('integer') !== -1;
359 |         var numberRE  = /^[0-9]*$/;
360 |         // Use index of since type can be either an array with two values or a string.
361 |         if (isNumber || isInteger) {
362 |           // The timing here seems to work. i.e. we get in before schema-validate
363 |           ngModel.$parsers.push(function(viewValue) {
364 |             var value;
365 |             if (isNumber) {
366 |               value = parseFloat(viewValue);
367 |             } else if (numberRE.test(viewValue)) {
368 |               // We test the value to check that it's a valid integer, otherwise we can easily
369 |               // get float -> integer parsing behind the scenes.
370 |               value = parseInt(viewValue, 10);
371 |             }
372 |             console.log('parser', numberRE.test(viewValue), viewValue, value)
373 |             if (value === undefined || isNaN(value)) {
374 |               //Let the validation fail. @FIXME: it fails with "required" for some reason.
375 |               return viewValue;
376 |             }
377 |             return value;
378 |           });
379 |         }
380 | 
381 |         once();
382 |       });
383 |     }
384 |   };
385 | });
386 | 


--------------------------------------------------------------------------------
/dist/angular-schema-form-material.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * angular-schema-form-material
  3 |  * @version 1.0.0-alpha.2
  4 |  * @date Mon, 02 Jan 2017 12:21:23 GMT
  5 |  * @link https://github.com/json-schema-form/angular-schema-form-material
  6 |  * @license MIT
  7 |  * Copyright (c) 2014-2017 JSON Schema Form
  8 |  */
  9 | /******/ (function(modules) { // webpackBootstrap
 10 | /******/ 	// The module cache
 11 | /******/ 	var installedModules = {};
 12 | 
 13 | /******/ 	// The require function
 14 | /******/ 	function __webpack_require__(moduleId) {
 15 | 
 16 | /******/ 		// Check if module is in cache
 17 | /******/ 		if(installedModules[moduleId])
 18 | /******/ 			return installedModules[moduleId].exports;
 19 | 
 20 | /******/ 		// Create a new module (and put it into the cache)
 21 | /******/ 		var module = installedModules[moduleId] = {
 22 | /******/ 			i: moduleId,
 23 | /******/ 			l: false,
 24 | /******/ 			exports: {}
 25 | /******/ 		};
 26 | 
 27 | /******/ 		// Execute the module function
 28 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 29 | 
 30 | /******/ 		// Flag the module as loaded
 31 | /******/ 		module.l = true;
 32 | 
 33 | /******/ 		// Return the exports of the module
 34 | /******/ 		return module.exports;
 35 | /******/ 	}
 36 | 
 37 | 
 38 | /******/ 	// expose the modules object (__webpack_modules__)
 39 | /******/ 	__webpack_require__.m = modules;
 40 | 
 41 | /******/ 	// expose the module cache
 42 | /******/ 	__webpack_require__.c = installedModules;
 43 | 
 44 | /******/ 	// identity function for calling harmony imports with the correct context
 45 | /******/ 	__webpack_require__.i = function(value) { return value; };
 46 | 
 47 | /******/ 	// define getter function for harmony exports
 48 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 49 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 50 | /******/ 			Object.defineProperty(exports, name, {
 51 | /******/ 				configurable: false,
 52 | /******/ 				enumerable: true,
 53 | /******/ 				get: getter
 54 | /******/ 			});
 55 | /******/ 		}
 56 | /******/ 	};
 57 | 
 58 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 59 | /******/ 	__webpack_require__.n = function(module) {
 60 | /******/ 		var getter = module && module.__esModule ?
 61 | /******/ 			function getDefault() { return module['default']; } :
 62 | /******/ 			function getModuleExports() { return module; };
 63 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 64 | /******/ 		return getter;
 65 | /******/ 	};
 66 | 
 67 | /******/ 	// Object.prototype.hasOwnProperty.call
 68 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 69 | 
 70 | /******/ 	// __webpack_public_path__
 71 | /******/ 	__webpack_require__.p = "";
 72 | 
 73 | /******/ 	// Load entry module and return exports
 74 | /******/ 	return __webpack_require__(__webpack_require__.s = 24);
 75 | /******/ })
 76 | /************************************************************************/
 77 | /******/ ([
 78 | /* 0 */
 79 | /***/ function(module, exports) {
 80 | 
 81 | var path = '/material/default.html';
 82 | var html = "<md-input-container class=\"schema-form-{{::form.type}} {{::form.htmlClass}}\"\r\n                    ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}\"\r\n                    sf-messages sf-layout sf-material-class=\"md-input-has-value\">\r\n  <label  ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</label>\r\n  <input sf-field-model\r\n         ng-show=\"::form.key\"\r\n         type=\"{{::form.type}}\"\r\n         step=\"any\"\r\n         sf-changed=\"form\"\r\n         placeholder=\"{{::form.placeholder}}\"\r\n         id=\"{{::form.key|sfCamelKey}}\"\r\n         ng-class=\"::form.fieldHtmlClass\"\r\n         sf-type-parser=\"form.schema\"\r\n         ng-disabled=\"::form.readonly\"\r\n         schema-validate=\"form\"\r\n         name=\"{{::form.key|sfCamelKey}}\"\r\n         aria-describedby=\"{{::form.key|sfCamelKey}}Status\" />\r\n</md-input-container>\r\n";
 83 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
 84 | module.exports = path;
 85 | 
 86 | /***/ },
 87 | /* 1 */
 88 | /***/ function(module, exports) {
 89 | 
 90 | var path = '/material/checkbox.html';
 91 | var html = "<div class=\"checkbox schema-form-checkbox {{::form.htmlClass}}\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess()}\"\r\n     sf-messages>\r\n  <md-checkbox sf-field-model\r\n               sf-changed=\"form\"\r\n               ng-disabled=\"form.readonly\"\r\n               schema-validate=\"form\"\r\n               sf-material-class=\"md-checked\"\r\n               class=\"{{::form.fieldHtmlClass}}\"\r\n               name=\"{{::form.key|sfCamelKey}}\"\r\n               aria-label=\"{{::form.title}}\">\r\n    <span>{{::form.title}}</span>\r\n  </md-checkbox>\r\n</div>\r\n";
 92 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
 93 | module.exports = path;
 94 | 
 95 | /***/ },
 96 | /* 2 */
 97 | /***/ function(module, exports) {
 98 | 
 99 | var path = '/material/submit.html';
100 | var html = "<section class=\"schema-form-submit {{::form.htmlClass}}\" sf-messages>\r\n  <md-button class=\"md-raised {{ form.style || 'md-primary' }} {{::form.fieldHtmlClass}}\"\r\n             type=\"{{::form.type}}\"\r\n             ng-disabled=\"form.readonly\"\r\n             aria-label=\"{{::form.title}}\">\r\n    <md-tooltip ng-if=\"::form.tip\">{{::form.tip}}</md-tooltip>\r\n    {{::form.title}}\r\n  </md-button>\r\n</section>\r\n";
101 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
102 | module.exports = path;
103 | 
104 | /***/ },
105 | /* 3 */
106 | /***/ function(module, exports, __webpack_require__) {
107 | 
108 | __webpack_require__(22);
109 | __webpack_require__(21);
110 | __webpack_require__(20);
111 | 
112 | 
113 | /***/ },
114 | /* 4 */
115 | /***/ function(module, exports) {
116 | 
117 | var path = '/material/actions.html';
118 | var html = "<section layout=\"row\" class=\"btn-group schema-form-actions {{form.htmlClass}}\"></section>\r\n";
119 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
120 | module.exports = path;
121 | 
122 | /***/ },
123 | /* 5 */
124 | /***/ function(module, exports) {
125 | 
126 | var path = '/material/array.html';
127 | var html = "<div  class=\"schema-form-array {{::form.htmlClass}}\"\r\n      sf-field-model=\"sf-new-array\"\r\n      sf-new-array>\r\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{ form.title }}</label>\r\n  <md-list class=\"list-group\" sf-field-model ui-sortable=\"form.sortOptions\">\r\n    <md-list-item layout=\"row\" class=\"list-group-item\"\r\n             sf-field-model=\"ng-repeat\"\r\n             ng-repeat=\"item in modelArray track by $index\"\r\n             schema-form-array-items\r\n             class=\"{{::form.fieldHtmlClass}}\">\r\n      <md-button flex=\"none\" flex-order=\"2\"\r\n                 type=\"button\"\r\n                 ng-hide=\"form.readonly || form.remove === null\"\r\n                 ng-click=\"deleteFromArray($index)\"\r\n                 ng-disabled=\"form.schema.minItems >= modelArray.length\"\r\n                 class=\"md-icon-button\" aria-label=\"More\"\r\n                 style=\"position: relative; z-index: 20;\">\r\n        <md-icon>close</md-icon>\r\n      </md-button>\r\n    </md-list-item>\r\n  </md-list>\r\n  <div class=\"clearfix\" style=\"padding: 15px;\" ng-model=\"modelArray\" schema-validate=\"form\">\r\n    <div class=\"help-block\"\r\n         ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\"\r\n         ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div>\r\n\r\n    <md-button ng-hide=\"form.readonly || form.add === null\"\r\n            ng-click=\"appendToArray()\"\r\n            ng-disabled=\"form.schema.maxItems <= modelArray.length\"\r\n            type=\"button\"\r\n            class=\"btn md-raised md-primary {{ form.style.add || 'btn-default' }} pull-right\">\r\n      <i class=\"glyphicon glyphicon-plus\"></i>\r\n      {{ form.add || 'Add'}}\r\n    </md-button>\r\n  </div>\r\n</div>\r\n";
128 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
129 | module.exports = path;
130 | 
131 | /***/ },
132 | /* 6 */
133 | /***/ function(module, exports) {
134 | 
135 | var path = '/material/autocomplete.html';
136 | var html = "<div class=\"form-group {{::form.htmlClass}} schema-form-select\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}\"\r\n     sf-messages sf-layout>\r\n  <md-autocomplete flex\r\n    ng-disabled=\"form.readonly\"\r\n    ng-model=\"$$value$$\"\r\n    sf-autocomplete\r\n    sf-field-model=\"replaceAll\"\r\n    schema-validate=\"form\"\r\n    md-selected-item=\"$$value$$\"\r\n    md-search-text=\"searchText\"\r\n    md-selected-item-change=\"'todo';\"\r\n    md-items=\"item in evalExpr('this[\\''+form.optionFilter+'\\'](\\''+searchText+'\\')')\"\r\n    md-item-text=\"item.name\"\r\n    md-floating-label=\"{{::form.title}}\"\r\n    md-menu-class=\"autocomplete-custom-template\">\r\n    <md-item-template>\r\n      <span md-highlight-text=\"searchText\">{{item.name}}</span>\r\n    </md-item-template>\r\n    <md-not-found>\r\n      No matches found\r\n    </md-not-found>\r\n  </md-autocomplete>\r\n</div>\r\n";
137 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
138 | module.exports = path;
139 | 
140 | /***/ },
141 | /* 7 */
142 | /***/ function(module, exports) {
143 | 
144 | var path = '/material/checkboxes.html';
145 | var html = "<div sf-array=\"form\" sf-field-model\r\n     class=\"form-group schema-form-checkboxes {{::form.htmlClass}}\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess()}\"\r\n     sf-messages>\r\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{::form.title}}</label>\r\n  <div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\" >\r\n    <md-checkbox ng-model=\"titleMapValues[$index]\"\r\n                 sf-changed=\"form\"\r\n                 ng-disabled=\"::form.readonly\"\r\n                 name=\"{{::form.key|sfCamelKey}}\"\r\n                 ng-true-value=\"true\"\r\n                 ng-false-value=\"false\"\r\n                 aria-label=\"{{::form.title}}\">\r\n      {{::form.titleMap[$index].name}}\r\n    </md-checkbox>\r\n  </div>\r\n</div>\r\n";
146 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
147 | module.exports = path;
148 | 
149 | /***/ },
150 | /* 8 */
151 | /***/ function(module, exports) {
152 | 
153 | var path = '/material/date.html';
154 | var html = "<div class=\"schema-form-date {{::form.htmlClass}}\">\r\n  <label ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</label>\r\n  <md-datepicker sf-field-model\r\n                 sf-changed=\"form\"\r\n                 schema-validate=\"form\"\r\n                 sf-type-parser=\"form.schema\"\r\n                 id=\"{{::form.key|sfCamelKey}}\"\r\n                 ng-show=\"::form.key\"\r\n                 ng-class=\"::form.fieldHtmlClass\"\r\n                 ng-disabled=\"::form.readonly\"\r\n                 md-placeholder=\"Enter date\" sf-messages>\r\n  </md-datepicker>\r\n</div>\r\n";
155 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
156 | module.exports = path;
157 | 
158 | /***/ },
159 | /* 9 */
160 | /***/ function(module, exports) {
161 | 
162 | var path = '/material/fieldset.html';
163 | var html = "<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex>\r\n  <legend ng-show=\"form.title\">{{ form.title }}</legend>\r\n</fieldset>\r\n";
164 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
165 | module.exports = path;
166 | 
167 | /***/ },
168 | /* 10 */
169 | /***/ function(module, exports) {
170 | 
171 | var path = '/material/help.html';
172 | var html = "<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>\r\n";
173 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
174 | module.exports = path;
175 | 
176 | /***/ },
177 | /* 11 */
178 | /***/ function(module, exports) {
179 | 
180 | var path = '/material/radio-buttons.html';
181 | var html = "<div class=\"form-group schema-form-radiobuttons {{::form.htmlClass}}\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess()}\" sf-layout sf-messages>\r\n  <div>\r\n    <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\r\n  </div>\r\n  <section layout=\"row\" layout-sm=\"column\" layout-align=\"center center\">\r\n    <md-input-container ng-repeat=\"item in form.titleMap\">\r\n      <md-button type=\"button\"\r\n                 class=\"group md-raised\"\r\n                 sf-field-model=\"replaceAll\"\r\n                 ng-model=\"$$value$$\"\r\n                 sf-changed=\"form\"\r\n                 class=\"radio {{::form.fieldHtmlClass}}\"\r\n                 ng-class=\"{'md-primary': ($$value$$ == item.value)}\"\r\n                 ng-disabled=\"form.readonly\"\r\n                 ng-model-options=\"form.ngModelOptions\"\r\n                 schema-validate=\"form\"\r\n                 ng-value=\"item.value\"\r\n                 ng-click=\"$$value$$ = item.value\"\r\n                 name=\"{{form.key.join('.')}}\">\r\n        <span ng-bind-html=\"item.name\"></span>\r\n      </md-button>\r\n    </md-input-container>\r\n  </section>\r\n</div>\r\n";
182 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
183 | module.exports = path;
184 | 
185 | /***/ },
186 | /* 12 */
187 | /***/ function(module, exports) {
188 | 
189 | var path = '/material/radios-inline.html';
190 | var html = "<div class=\"form-group schema-form-radios-inline {{::form.htmlClass}}\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess()}\" sf-layout sf-messages>\r\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\r\n  <md-radio-group layout=\"row\"\r\n                  sf-field-model=\"replaceAll\"\r\n                  ng-model=\"$$value$$\"\r\n                  class=\"{{::form.fieldHtmlClass}}\"\r\n                  ng-class=\"{ active: item.value === $$value$$ }\"\r\n                  sf-changed=\"form\"\r\n                  schema-validate=\"form\"\r\n                  ng-disabled=\"form.readonly\"\r\n                  name=\"{{form.key.join('.')}}\">\r\n    <md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\">\r\n      <span ng-bind-html=\"item.name\"></span>\r\n    </md-radio-button>\r\n  </md-radio-group>\r\n</div>\r\n";
191 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
192 | module.exports = path;
193 | 
194 | /***/ },
195 | /* 13 */
196 | /***/ function(module, exports) {
197 | 
198 | var path = '/material/radios.html';
199 | var html = "<div class=\"form-group schema-form-radios {{::form.htmlClass}}\"\r\n     ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess()}\">\r\n  <label class=\"control-label\" ng-show=\"showTitle()\" aria-label=\"{{form.title}}\" layout=\"row\">{{form.title}} {{form.titleMap | json}}</label>\r\n  <div>\r\n    <md-radio-group sf-field-model\r\n                    sf-changed=\"form\"\r\n                    ng-disabled=\"form.readonly\"\r\n                    name=\"{{form.key.join('.')}}\"\r\n                    sf-layout sf-messages>\r\n      <md-radio-button ng-repeat=\"item in form.titleMap\"\r\n                       ng-value=\"item.value\"\r\n                       class=\"{{::form.fieldHtmlClass}}\"\r\n                       sf-field-model=\"ng-class\"\r\n                       ng-class=\"{ active: item.value === $$value$$ }\">\r\n        <span ng-bind-html=\"item.name\"></span>\r\n      </md-radio-button>\r\n    </md-radio-group>\r\n  </div>\r\n</div>\r\n";
200 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
201 | module.exports = path;
202 | 
203 | /***/ },
204 | /* 14 */
205 | /***/ function(module, exports) {
206 | 
207 | var path = '/material/section.html';
208 | var html = "<md-content class=\"schema-form-section {{::form.htmlClass}}\" sf-layout>\r\n</md-content>\r\n";
209 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
210 | module.exports = path;
211 | 
212 | /***/ },
213 | /* 15 */
214 | /***/ function(module, exports) {
215 | 
216 | var path = '/material/select.html';
217 | var html = "<md-input-container\r\n    class=\"form-group {{::form.htmlClass}} schema-form-select\"\r\n    ng-class=\"{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}\"\r\n    sf-messages sf-layout>\r\n  <label ng-show=\"::showTitle()\">{{::form.title}}</label>\r\n  <md-select sf-field-model schema-validate=\"form\">\r\n    <md-optgroup ng-repeat-start=\"(key, opt) in form.getOptions(form, evalExpr) | orderBy:'group' as optGroups\"\r\n                 ng-if=\"opt.group && opt.group != optGroups[key-1].group\"\r\n                 label=\"{{::opt.group}}\"\r\n                 aria-label=\"{{::opt.group}}\">\r\n      <md-option ng-repeat=\"(key, filtered) in form.getOptions(form, evalExpr) | filter: {group: opt.group} | orderBy:'name' as opts\"\r\n                 ng-value=\"::filtered.value\"\r\n                 aria-label=\"{{::filtered.name}}\">{{::filtered.name}}</md-option>\r\n    </md-optgroup>\r\n    <md-option   ng-if=\"!opt.group\"\r\n                 ng-value=\"::opt.value\"\r\n                 ng-repeat-end>{{::opt.name}}</md-option>\r\n  </md-select>\r\n</md-input-container>\r\n";
218 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
219 | module.exports = path;
220 | 
221 | /***/ },
222 | /* 16 */
223 | /***/ function(module, exports) {
224 | 
225 | var path = '/material/switch.html';
226 | var html = "<md-input-container class=\"schema-form-switch {{::form.htmlClass}}\">\r\n  <md-switch sf-field-model\r\n             sf-changed=\"form\"\r\n             sf-type-parser=\"form.schema\"\r\n             sf-messages\r\n             schema-validate=\"form\"\r\n             id=\"{{::form.key|sfCamelKey}}\"\r\n             aria-label=\"{{form.title}}\"\r\n             ng-show=\"::form.key\"\r\n             ng-class=\"form.fieldHtmlClass\"\r\n             ng-disabled=\"::form.readonly\">\r\n    <span  ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</span>\r\n  </md-switch>\r\n</md-input-container>\r\n";
227 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
228 | module.exports = path;
229 | 
230 | /***/ },
231 | /* 17 */
232 | /***/ function(module, exports) {
233 | 
234 | var path = '/material/tabarray.html';
235 | var html = "\r\n<div sf-array=\"form\" ng-init=\"selected = { tab: 0 }\"\r\n     class=\"clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || 'left'}} {{::form.htmlClass}}\">\r\n  <div ng-if=\"!form.tabType || form.tabType !== 'right'\"\r\n       ng-class=\"{'col-xs-3': !form.tabType || form.tabType === 'left'}\">\r\n    <ul class=\"nav nav-tabs\"\r\n        ng-class=\"{ 'tabs-left': !form.tabType || form.tabType === 'left'}\">\r\n      <li ng-repeat=\"item in modelArray track by $index\"\r\n          ng-click=\"$event.preventDefault() || (selected.tab = $index)\"\r\n          ng-class=\"{active: selected.tab === $index}\">\r\n          <a href=\"#\">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>\r\n      </li>\r\n      <li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = appendToArray().length - 1)\">\r\n        <a href=\"#\">\r\n          <i class=\"glyphicon glyphicon-plus\"></i>\r\n          {{ form.add || 'Add'}}\r\n          </a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <div ng-class=\"{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}\">\r\n    <div class=\"tab-content {{::form.fieldHtmlClass}}\">\r\n      <div class=\"tab-pane clearfix\"\r\n           ng-repeat=\"item in modelArray track by $index\"\r\n           ng-show=\"selected.tab === $index\"\r\n           ng-class=\"{active: selected.tab === $index}\">\r\n           <sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator>\r\n\r\n\r\n           <button ng-hide=\"form.readonly\"\r\n                   ng-click=\"selected.tab = deleteFromArray($index).length - 1\"\r\n                   type=\"button\"\r\n                   class=\"btn {{ form.style.remove || 'btn-default' }} pull-right\">\r\n             <i class=\"glyphicon glyphicon-trash\"></i>\r\n             {{ form.remove || 'Remove'}}\r\n           </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div ng-if=\"form.tabType === 'right'\" class=\"col-xs-3\">\r\n    <ul class=\"nav nav-tabs tabs-right\">\r\n      <li ng-repeat=\"item in modelArray track by $index\"\r\n          ng-click=\"$event.preventDefault() || (selected.tab = $index)\"\r\n          ng-class=\"{active: selected.tab === $index}\">\r\n          <a href=\"#\">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>\r\n      </li>\r\n      <li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || appendToArray()\">\r\n        <a href=\"#\">\r\n          <i class=\"glyphicon glyphicon-plus\"></i>\r\n          {{ form.add || 'Add'}}\r\n          </a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n</div>\r\n";
236 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
237 | module.exports = path;
238 | 
239 | /***/ },
240 | /* 18 */
241 | /***/ function(module, exports) {
242 | 
243 | var path = '/material/tabs.html';
244 | var html = "<div sf-field-model class=\"schema-form-tabs {{::form.htmlClass}}\">\r\n  <md-tabs md-dynamic-height md-selected=\"selected\" md-autoselect ng-init=\"selected = 0\"></md-tabs>\r\n</div>\r\n";
245 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
246 | module.exports = path;
247 | 
248 | /***/ },
249 | /* 19 */
250 | /***/ function(module, exports) {
251 | 
252 | var path = '/material/textarea.html';
253 | var html = "<md-input-container class=\"{{::form.htmlClass}} schema-form-textarea\" sf-messages sf-layout>\r\n  <label ng-show=\"showTitle()\" for=\"{{::form.key|sfCamelKey}}\">{{::form.title}}</label>\r\n  <textarea ng-class=\"::form.fieldHtmlClass\"\r\n            id=\"{{::form.key|sfCamelKey}}\"\r\n            sf-changed=\"form\"\r\n            ng-disabled=\"::form.readonly\"\r\n            sf-field-model\r\n            schema-validate=\"form\"\r\n            name=\"{{::form.key|sfCamelKey}}\"></textarea>\r\n</md-input-container>\r\n";
254 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
255 | module.exports = path;
256 | 
257 | /***/ },
258 | /* 20 */
259 | /***/ function(module, exports) {
260 | 
261 | angular.module('schemaForm').directive('sfMaterialClass', sfMaterialClassDirective);
262 | 
263 | sfMaterialClassDirective.$inject = [
264 |   '$compile', '$timeout'
265 | ];
266 | 
267 | function sfMaterialClassDirective($compile, $timeout) {
268 |     return {
269 |         restrict : 'A',
270 |         scope    : false,
271 |         link     : function(scope, element, attrs, ngModel) {
272 |             function reduceHelper(obj, i) {return obj[i]}
273 | 
274 |             var modelValue;
275 |             try {
276 |                 modelValue = scope.form.key.reduce(reduceHelper, scope.model);
277 |             } catch (e) {
278 |                 modelValue = undefined;
279 |             }
280 | 
281 |             // Element class is not set in DOM if executed immediately.
282 |             // I don't understand exactly why but it's probably related to other directive job.
283 |             $timeout(function() {
284 |                 if (modelValue !== null && typeof modelValue !== 'undefined' && modelValue !== false) {
285 |                     element.addClass(attrs.sfMaterialClass);
286 |                 }
287 |             }, 0);
288 |         }
289 |     };
290 | }
291 | 
292 | 
293 | /***/ },
294 | /* 21 */
295 | /***/ function(module, exports, __webpack_require__) {
296 | 
297 | "use strict";
298 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_actions_html__ = __webpack_require__(4);
299 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_actions_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__material_actions_html__);
300 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__material_array_html__ = __webpack_require__(5);
301 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__material_array_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__material_array_html__);
302 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__material_autocomplete_html__ = __webpack_require__(6);
303 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__material_autocomplete_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__material_autocomplete_html__);
304 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__material_checkbox_html__ = __webpack_require__(1);
305 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__material_checkbox_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__material_checkbox_html__);
306 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__material_submit_html__ = __webpack_require__(2);
307 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__material_submit_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__material_submit_html__);
308 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__material_checkboxes_html__ = __webpack_require__(7);
309 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__material_checkboxes_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__material_checkboxes_html__);
310 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__material_date_html__ = __webpack_require__(8);
311 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__material_date_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6__material_date_html__);
312 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__material_default_html__ = __webpack_require__(0);
313 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__material_default_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7__material_default_html__);
314 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__material_fieldset_html__ = __webpack_require__(9);
315 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__material_fieldset_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8__material_fieldset_html__);
316 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__material_help_html__ = __webpack_require__(10);
317 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__material_help_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_9__material_help_html__);
318 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__material_radios_html__ = __webpack_require__(13);
319 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__material_radios_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_10__material_radios_html__);
320 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__material_radios_inline_html__ = __webpack_require__(12);
321 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__material_radios_inline_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_11__material_radios_inline_html__);
322 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__material_radio_buttons_html__ = __webpack_require__(11);
323 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__material_radio_buttons_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_12__material_radio_buttons_html__);
324 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__material_section_html__ = __webpack_require__(14);
325 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__material_section_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_13__material_section_html__);
326 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__material_select_html__ = __webpack_require__(15);
327 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__material_select_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_14__material_select_html__);
328 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__material_switch_html__ = __webpack_require__(16);
329 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__material_switch_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_15__material_switch_html__);
330 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__material_tabs_html__ = __webpack_require__(18);
331 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__material_tabs_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_16__material_tabs_html__);
332 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__material_tabarray_html__ = __webpack_require__(17);
333 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__material_tabarray_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_17__material_tabarray_html__);
334 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__material_textarea_html__ = __webpack_require__(19);
335 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__material_textarea_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_18__material_textarea_html__);
336 | // ngtemplate-loader embeds the html on build
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | angular
362 |   .module('schemaForm')
363 |   .config(materialDecoratorConfig)
364 |   .directive('sfmExternalOptions', sfmExternalOptionsDirective)
365 |   .filter('sfCamelKey', sfCamelKeyFilter);
366 | 
367 | materialDecoratorConfig.$inject = [
368 |   'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider', '$injector'
369 | ];
370 | 
371 | function materialDecoratorConfig(
372 |     schemaFormProvider, decoratorsProvider, sfBuilderProvider, sfPathProvider, $injector) {
373 |   var base = 'decorators/material/';
374 | 
375 |   var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
376 |   var ngModelOptions     = sfBuilderProvider.builders.ngModelOptions;
377 |   var ngModel            = sfBuilderProvider.builders.ngModel;
378 |   var sfField            = sfBuilderProvider.builders.sfField;
379 |   var condition          = sfBuilderProvider.builders.condition;
380 |   var array              = sfBuilderProvider.builders.array;
381 |   var numeric            = sfBuilderProvider.builders.numeric;
382 | 
383 |   var sfLayout           = sfLayout;
384 |   var sfMessagesNode     = sfMessagesNodeHandler();
385 |   var sfMessages         = sfMessagesBuilder;
386 |   var sfOptions          = sfOptionsBuilder;
387 |   var mdAutocomplete     = mdAutocompleteBuilder;
388 |   var mdSwitch           = mdSwitchBuilder;
389 |   var mdDatepicker       = mdDatepickerBuilder;
390 |   var mdTabs             = mdTabsBuilder;
391 |   var textarea           = textareaBuilder;
392 | 
393 |   var core = [ sfField, ngModel, ngModelOptions, condition, sfLayout ];
394 |   var defaults = core.concat(sfMessages);
395 |   var arrays = core.concat(array);
396 | 
397 |   schemaFormProvider.defaults.string.unshift(dateDefault);
398 | 
399 |   decoratorsProvider.defineDecorator('materialDecorator', {
400 |     actions: { template: __WEBPACK_IMPORTED_MODULE_0__material_actions_html___default.a, builder: [ sfField, simpleTransclusion, condition ] },
401 |     array: { template: __WEBPACK_IMPORTED_MODULE_1__material_array_html___default.a, builder: arrays },
402 |     autocomplete: { template: __WEBPACK_IMPORTED_MODULE_2__material_autocomplete_html___default.a, builder: defaults.concat(mdAutocomplete) },
403 |     boolean: { template: __WEBPACK_IMPORTED_MODULE_3__material_checkbox_html___default.a, builder: defaults },
404 |     button: { template: __WEBPACK_IMPORTED_MODULE_4__material_submit_html___default.a, builder: defaults },
405 |     checkbox: { template: __WEBPACK_IMPORTED_MODULE_3__material_checkbox_html___default.a, builder: defaults },
406 |     checkboxes: { template: __WEBPACK_IMPORTED_MODULE_5__material_checkboxes_html___default.a, builder: arrays },
407 |     date: { template: __WEBPACK_IMPORTED_MODULE_6__material_date_html___default.a, builder: defaults.concat(mdDatepicker) },
408 |     'default': { template: __WEBPACK_IMPORTED_MODULE_7__material_default_html___default.a, builder: defaults },
409 |     fieldset: { template: __WEBPACK_IMPORTED_MODULE_8__material_fieldset_html___default.a, builder: [ sfField, simpleTransclusion, condition ] },
410 |     help: { template: __WEBPACK_IMPORTED_MODULE_9__material_help_html___default.a, builder: defaults },
411 |     number: { template: __WEBPACK_IMPORTED_MODULE_7__material_default_html___default.a, builder: defaults.concat(numeric) },
412 |     password: { template: __WEBPACK_IMPORTED_MODULE_7__material_default_html___default.a, builder: defaults },
413 |     radios: { template: __WEBPACK_IMPORTED_MODULE_10__material_radios_html___default.a, builder: defaults },
414 |     'radios-inline': { template: __WEBPACK_IMPORTED_MODULE_11__material_radios_inline_html___default.a, builder: defaults },
415 |     radiobuttons: { template: __WEBPACK_IMPORTED_MODULE_12__material_radio_buttons_html___default.a, builder: defaults },
416 |     section: { template: __WEBPACK_IMPORTED_MODULE_13__material_section_html___default.a, builder: [ sfField, simpleTransclusion, condition, sfLayout ] },
417 |     select: { template: __WEBPACK_IMPORTED_MODULE_14__material_select_html___default.a, builder: defaults.concat(sfOptions) },
418 |     submit: { template: __WEBPACK_IMPORTED_MODULE_4__material_submit_html___default.a, builder: defaults },
419 |     tabs: { template: __WEBPACK_IMPORTED_MODULE_16__material_tabs_html___default.a, builder: [ sfField, mdTabs, condition ] },
420 |     tabarray: { template: __WEBPACK_IMPORTED_MODULE_17__material_tabarray_html___default.a, builder: arrays },
421 |     textarea: { template: __WEBPACK_IMPORTED_MODULE_18__material_textarea_html___default.a, builder: defaults.concat(textarea) },
422 |     'switch': { template: __WEBPACK_IMPORTED_MODULE_15__material_switch_html___default.a, builder: defaults.concat(mdSwitch) }
423 |   });
424 | 
425 |   function sfLayout(args) {
426 |     var layoutDiv = args.fieldFrag.querySelector('[sf-layout]');
427 | 
428 |     if (args.form.grid) {
429 |       Object.getOwnPropertyNames(args.form.grid).forEach(function(property, idx, array) {
430 |         layoutDiv.setAttribute(property, args.form.grid[property]);
431 |       });
432 |     };
433 |   };
434 | 
435 |   function sfMessagesNodeHandler() {
436 |     var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
437 |     var div = document.createElement('div');
438 |     div.innerHTML = html;
439 |     return div.firstChild;
440 |   };
441 | 
442 |   function sfMessagesBuilder(args) {
443 |     var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
444 |     if (messagesDiv && sfMessagesNode) {
445 |       var child = sfMessagesNode.cloneNode();
446 |       messagesDiv.appendChild(child);
447 |     }
448 |   };
449 | 
450 |   function textareaBuilder(args) {
451 |     var textareaFrag = args.fieldFrag.querySelector('textarea');
452 |     var maxLength = args.form.maxlength || false;
453 |     if (textareaFrag && maxLength) {
454 |       textareaFrag.setAttribute('md-maxlength', maxLength);
455 |     };
456 |   };
457 | 
458 |   function mdAutocompleteBuilder(args) {
459 |     var mdAutocompleteFrag = args.fieldFrag.querySelector('md-autocomplete');
460 |     var minLength = args.form.minLength || 1;
461 |     var maxLength = args.form.maxLength || false;
462 |     var title = args.form.title || args.form.placeholder || args.form.key.slice(-1)[0];
463 | 
464 |     if (mdAutocompleteFrag) {
465 |       if (args.form.onChange) {
466 |         mdAutocompleteFrag.setAttribute('md-selected-item-change', 'args.form.onChange()');
467 |         mdAutocompleteFrag.setAttribute('md-search-text-change', 'args.form.onChange(searchText)');
468 |       };
469 | 
470 |       // mdAutocompleteFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
471 |       mdAutocompleteFrag.setAttribute('md-min-length', minLength);
472 |       if (maxLength) {
473 |         mdAutocompleteFrag.setAttribute('md-max-length', maxLength);
474 |       };
475 | 
476 |       if (title) {
477 |         mdAutocompleteFrag.setAttribute('md-floating-label', title);
478 |       };
479 |     };
480 |   };
481 | 
482 |   function mdSwitchBuilder(args) {
483 |     var mdSwitchFrag = args.fieldFrag.querySelector('md-switch');
484 |     if (args.form.schema.titleMap) {
485 |       mdSwitchFrag.setAttribute('ng-true-value', args.form.schema.titleMap.true);
486 |       mdSwitchFrag.setAttribute('ng-false-value', args.form.schema.titleMap.false);
487 |     };
488 |   };
489 | 
490 |   function sfOptionsBuilder(args) {
491 |     var mdSelectFrag = args.fieldFrag.querySelector('md-select');
492 |     var enumTitleMap = [];
493 |     var i;
494 |     var mdSelectFrag;
495 | 
496 |     args.form.selectOptions = [];
497 |     args.form.getOptions = getOptionsHandler;
498 | 
499 |     if (args.form.schema.links && (typeof args.form.schema.links) === 'object') {
500 |       var link;
501 |       var related = /({)([^}]*)(})/gm;
502 |       var source = /{{([^}]*)}}/gm;
503 |       var matched;
504 | 
505 |       for (i = 0; i < args.form.schema.links.length; i++) {
506 |         link = args.form.schema.links[i];
507 |         if (link.rel === 'options') {
508 |           // TODO enable filter to allow processing results
509 |           // args.form.optionSource = link.href.replace(related, '$1$1 model.$2 | _externalOptionUri $3$3');
510 |           args.form.optionSource = link.href.replace(related, '$1$1 model.$2 $3$3');
511 |         };
512 |       };
513 | 
514 |       mdSelectFrag.setAttribute('sfm-external-options', args.form.optionSource);
515 |     }
516 |     else {
517 |       args.form.selectOptions = sfOptionsProcessor(args.form);
518 |     };
519 |   };
520 | 
521 |   function mdDatepickerBuilder(args) {
522 |     var mdDatepickerFrag = args.fieldFrag.querySelector('md-datepicker');
523 |     if (mdDatepickerFrag) {
524 |       if (args.form.onChange) {
525 |         mdDatepickerFrag.setAttribute('ng-change', 'args.form.onChange(searchText)');
526 |       }
527 |       // mdDatepickerFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
528 |       var minDate = args.form.minimum || false;
529 |       var maxDate = args.form.maximum || false;
530 |       if (minDate) {
531 |         mdDatepickerFrag.setAttribute('md-max-date', minDate);
532 |       }
533 |       if (maxDate) {
534 |         mdDatepickerFrag.setAttribute('md-max-date', maxDate);
535 |       }
536 |     }
537 |   };
538 | 
539 |   function mdTabsBuilder(args) {
540 |     if (args.form.tabs && args.form.tabs.length > 0) {
541 |       var mdTabsFrag = args.fieldFrag.querySelector('md-tabs');
542 | 
543 |       args.form.tabs.forEach(function(tab, index) {
544 |         var evalExpr = '(evalExpr(' + args.path + '.tabs[' + index + ']' +
545 |                        '.condition, { model: model, "arrayIndex": $index}))';
546 |         var mdTab = document.createElement('md-tab');
547 |         if(!!tab.condition) {
548 |           mdTab.setAttribute('ng-if', evalExpr);
549 |         };
550 |         mdTab.setAttribute('label', '{{' + args.path + '.tabs[' + index + '].title}}');
551 |         var mdTabBody = document.createElement('md-tab-body');
552 |         var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
553 |         mdTabBody.appendChild(childFrag);
554 |         mdTab.appendChild(mdTabBody);
555 |         mdTabsFrag.appendChild(mdTab);
556 |       });
557 |     }
558 |   };
559 | 
560 |   /**
561 |    * Material Datepicker
562 |    */
563 |   function dateDefault(name, schema, options) {
564 |     if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
565 |       var f = schemaFormProvider.stdFormObj(name, schema, options);
566 |       f.key  = options.path;
567 |       f.type = 'date';
568 |       options.lookup[sfPathProvider.stringify(options.path)] = f;
569 |       return f;
570 |     }
571 |   };
572 | };
573 | 
574 | function getOptionsHandler(form, evalExpr) {
575 |   if (form.optionData) {
576 |     return evalExpr(form.optionData);
577 |   };
578 | 
579 |   if (form.selectOptions) {
580 |     return form.selectOptions;
581 |   };
582 | 
583 |   return [];
584 | };
585 | 
586 | function sfOptionsProcessor(data) {
587 |   var enumTitleMap = [];
588 | 
589 |   if (data.titleMap) {
590 |     return data.titleMap;
591 |   }
592 |   else if (data.enum && data.enum.length) {
593 |     for (i = 0; i < data.enum.length; i++) {
594 |       if (data.enum[i] && data.enum[i].length) {
595 |         enumTitleMap.push({ name: data.enum[i], value: data.enum[i] });
596 |       };
597 |     };
598 |   };
599 | 
600 |   return enumTitleMap;
601 | };
602 | 
603 | sfmExternalOptionsDirective.$inject = [ '$http' ];
604 | 
605 | function sfmExternalOptionsDirective($http) {
606 |   var directive = {
607 |     link: link,
608 |     restrict: 'A'
609 |   };
610 | 
611 |   return directive;
612 | 
613 |   function link(scope, element, attrs) {
614 |     attrs.$observe('sfmExternalOptions', function(dataURI) {
615 |       $http.get(dataURI)
616 |         .then(function(response) {
617 |           scope.form.selectOptions = sfOptionsProcessor(response.data);
618 |         });
619 |     });
620 |   };
621 | };
622 | 
623 | /**
624 |  * sfCamelKey Filter
625 |  */
626 | function sfCamelKeyFilter() {
627 |   return function(formKey) {
628 |     if (!formKey) { return ''; };
629 |     var part, i, key;
630 |     key = formKey.slice();
631 |     for (i = 0; i < key.length; i++) {
632 |       part = key[i].toLowerCase().split('');
633 |       if (i && part.length) { part[0] = part[0].toUpperCase(); };
634 |       key[i] = part.join('');
635 |     };
636 |     return key.join('');
637 |   };
638 | };
639 | 
640 | /*
641 |   TODO add default filter for autocomplete which allows form.optionFilter or 'autocompleteFilter' to override
642 |   Something along the following lines...
643 |   if ($injector.has('autocompleteFilter')) {
644 |     result = $filter('autocomplete')(input);
645 |   }
646 |   else
647 |   if ($injector.has(args.form.optionFilter + 'Filter')) {
648 |     result = $filter(args.form.optionFilter)(input);
649 |   }
650 |   else {
651 |     if (args.form.optionFilter) {
652 |       mdAutocomplete.setAttribute('md-items',
653 |         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
654 |     }
655 |   }
656 | 
657 |   .filter('autocompleteMovieTest', function() {
658 |     function autocompleteMovieTestFilter(array, input){
659 |       var current = input;
660 |       // You could also call multiple filters here using:
661 |       // current = $filter('filterName')(input)
662 |       if(typeof current === 'string') {
663 |         current = current.replace(' ','-').toLowerCase();
664 |       }
665 |       current = (!current) ? '_undefined' : current;
666 |       return current;
667 |     }
668 | 
669 |     return externalOptionUriFilter;
670 |   })
671 | */
672 | 
673 | 
674 | /***/ },
675 | /* 22 */
676 | /***/ function(module, exports) {
677 | 
678 | /**
679 |  * It might be a bug, but currently input[type=number] does not add
680 |  * a parser, so the model gets populated with a string. It does however stop non numbers so it
681 |  * must have some preproccessing. Anyway, this adds parser before schema-validate hooks into it.
682 |  * FIXME: this is still not a complete solution. Inputting a string in an input[type=number] results
683 |  * in parsers never firing and ngModel value removed. So no validation from schema-validate either.
684 |  */
685 | angular.module('schemaForm').directive('sfTypeParser', function() {
686 |   return {
687 |     restrict: 'A',
688 |     scope: false,
689 |     require: 'ngModel',
690 |     link: function(scope, element, attrs, ngModel) {
691 |       var once = scope.$watch(attrs.sfTypeParser, function(schema) {
692 |         if (!schema) {
693 |           return;
694 |         }
695 | 
696 |         var isNumber  = schema.type.indexOf('number') !== -1;
697 |         var isInteger = schema.type.indexOf('integer') !== -1;
698 |         var numberRE  = /^[0-9]*$/;
699 |         // Use index of since type can be either an array with two values or a string.
700 |         if (isNumber || isInteger) {
701 |           // The timing here seems to work. i.e. we get in before schema-validate
702 |           ngModel.$parsers.push(function(viewValue) {
703 |             var value;
704 |             if (isNumber) {
705 |               value = parseFloat(viewValue);
706 |             } else if (numberRE.test(viewValue)) {
707 |               // We test the value to check that it's a valid integer, otherwise we can easily
708 |               // get float -> integer parsing behind the scenes.
709 |               value = parseInt(viewValue, 10);
710 |             }
711 |             console.log('parser', numberRE.test(viewValue), viewValue, value)
712 |             if (value === undefined || isNaN(value)) {
713 |               //Let the validation fail. @FIXME: it fails with "required" for some reason.
714 |               return viewValue;
715 |             }
716 |             return value;
717 |           });
718 |         }
719 | 
720 |         once();
721 |       });
722 |     }
723 |   };
724 | });
725 | 
726 | 
727 | /***/ },
728 | /* 23 */,
729 | /* 24 */
730 | /***/ function(module, exports, __webpack_require__) {
731 | 
732 | module.exports = __webpack_require__(3);
733 | 
734 | 
735 | /***/ }
736 | /******/ ]);


--------------------------------------------------------------------------------