diff --git a/dist/ionic-decorator.js b/dist/ionic-decorator.js
new file mode 100644
index 000000000..482330b89
--- /dev/null
+++ b/dist/ionic-decorator.js
@@ -0,0 +1,92 @@
+angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/ionic/actions-trcl.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\" ng-transclude=\"\"></div>");
+$templateCache.put("directives/decorators/ionic/actions.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\"><input ng-repeat-start=\"item in form.items\" type=\"submit\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" value=\"{{item.title}}\" ng-if=\"item.type === \'submit\'\"> <button ng-repeat-end=\"\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" type=\"button\" ng-disabled=\"form.readonly\" ng-if=\"item.type !== \'submit\'\" ng-click=\"buttonClick($event,item)\">{{item.title}}</button></div>");
+$templateCache.put("directives/decorators/ionic/array.html","<div sf-array=\"form\" class=\"schema-form-array {{form.htmlClass}}\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\"><h3 ng-show=\"form.title && form.notitle !== true\">{{ form.title }}</h3><ol class=\"list-group\" ng-model=\"modelArray\" ui-sortable=\"\"><li class=\"list-group-item {{form.fieldHtmlClass}}\" ng-repeat=\"item in modelArray track by $index\"><button ng-hide=\"form.readonly\" ng-click=\"deleteFromArray($index)\" style=\"position: relative; z-index: 20;\" type=\"button\" class=\"close pull-right\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button><sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator></li></ol><div class=\"clearfix\" style=\"padding: 15px;\"><button ng-hide=\"form.readonly || form.add === null\" ng-click=\"appendToArray()\" type=\"button\" class=\"btn {{ form.style.add || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</button></div><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/checkbox.html","<div class=\"item item-checkbox schema-form-checkbox {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"checkbox\"><input type=\"checkbox\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" class=\"{{form.fieldHtmlClass}}\" name=\"{{form.key.slice(-1)[0]}}\"></label> <span ng-bind-html=\"form.title\"></span><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/checkboxes.html","<div sf-array=\"form\" ng-model=\"$$value$$\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><label><input type=\"checkbox\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"{{form.fieldHtmlClass}}\" ng-model=\"titleMapValues[$index]\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"form.titleMap[$index].name\"></span></label></div><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/default.html","<label class=\"item item-input {{form.htmlClass}}\" ng-show=\"showTitle()\"><span class=\"input-label\" ng-if=\"form.htmlClass == \'item-stacked-label\'\">{{form.title}}</span> <input ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" class=\"{{form.fieldHtmlClass}}\" ng-model-options=\"form.ngModelOptions\" ng-model=\"$$value$$\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-if=\"form.feedback !== false\" class=\"form-control-feedback\" ng-class=\"evalInScope(form.feedback) || {\'glyphicon\': true, \'glyphicon-ok\': hasSuccess(), \'glyphicon-remove\': hasError() }\"></span><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></label>");
+$templateCache.put("directives/decorators/ionic/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"schema-form-fieldset {{form.htmlClass}}\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div><div ng-transclude=\"\"></div></fieldset>");
+$templateCache.put("directives/decorators/ionic/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"schema-form-fieldset {{form.htmlClass}}\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></fieldset>");
+$templateCache.put("directives/decorators/ionic/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
+$templateCache.put("directives/decorators/ionic/radio-buttons.html","<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><div><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label></div><div class=\"btn-group\"><label class=\"btn {{ (item.value === $$value$$) ? form.style.selected || \'btn-default\' : form.style.unselected || \'btn-default\'; }}\" ng-class=\"{ active: item.value === $$value$$ }\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" style=\"display: none;\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" ng-value=\"item.value\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/radios-inline.html","<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><div><label class=\"radio-inline\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-value=\"item.value\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/radios.html","<label class=\"item item-radio\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" ng-value=\"item.value\" name=\"{{form.key.slice(-1)[0]}}\"><div class=\"item-content\" ng-bind-html=\"item.name\"></div><i class=\"radio-icon ion-checkmark\"></i><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></label>");
+$templateCache.put("directives/decorators/ionic/readonly.html","<div class=\"form-group\"><label ng-show=\"showTitle()\">{{form.title}}</label> <input ng-if=\"form.type !== \'textarea\'\" type=\"text\" disabled=\"\" class=\"form-control\" value=\"{{$$value$$}}\"> <textarea ng-if=\"form.type === \'textarea\'\" disabled=\"\" class=\"form-control\">{{$$value$$}}</textarea><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div></div>");
+$templateCache.put("directives/decorators/ionic/section.html","<div class=\"schema-form-section {{form.htmlClass}}\" ng-if=\"!form.condition || evalExpr(form.condition,{ model: model, \'arrayIndex\': arrayIndex })\"><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></div>");
+$templateCache.put("directives/decorators/ionic/select.html","<label class=\"item item-input item-select {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><label class=\"input-label\" ng-show=\"showTitle()\">{{form.title}}</label><select ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"{{form.fieldHtmlClass}}\" schema-validate=\"form\" ng-options=\"item.value as item.name for item in form.titleMap\" name=\"{{form.key.slice(-1)[0]}}\"></select><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></label>");
+$templateCache.put("directives/decorators/ionic/submit.html","<input type=\"submit\" class=\"button button-block button-positive {{ form.style || \'button-positive\' }} {{form.fieldHtmlClass}}\" value=\"{{form.title}}\" ng-disabled=\"form.readonly\" ng-if=\"form.type === \'submit\'\"> <button class=\"button button-block button-positive {{ form.style || \'button-positive\' }}\" type=\"submit\" ng-click=\"buttonClick($event,form)\" ng-disabled=\"form.readonly\" ng-if=\"form.type !== \'submit\'\">{{form.title}}</button>");
+$templateCache.put("directives/decorators/ionic/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=\"#\">{{evalExpr(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=\"#\">{{evalExpr(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>");
+$templateCache.put("directives/decorators/ionic/tabs.html","<div ng-init=\"selected = { tab: 0 }\" class=\"schema-form-tabs {{form.htmlClass}}\"><ul class=\"nav nav-tabs\"><li ng-repeat=\"tab in form.tabs\" ng-disabled=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{ tab.title }}</a></li></ul><div class=\"tab-content {{form.fieldHtmlClass}}\"><div class=\"tab-pane\" ng-disabled=\"form.readonly\" ng-repeat=\"tab in form.tabs\" ng-show=\"selected.tab === $index\" ng-class=\"{active: selected.tab === $index}\"><bootstrap-decorator ng-repeat=\"item in tab.items\" form=\"item\"></bootstrap-decorator></div></div></div>");
+$templateCache.put("directives/decorators/ionic/textarea.html","<div class=\"form-group has-feedback {{form.htmlClass}} schema-form-textarea\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label ng-show=\"showTitle()\">{{form.title}}</label> <textarea class=\"form-control {{form.fieldHtmlClass}}\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"></textarea> <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span></div>");}]);
+angular.module('schemaForm').config(['schemaFormDecoratorsProvider', function(decoratorsProvider) {
+  var base = 'directives/decorators/ionic/';
+
+  decoratorsProvider.createDecorator('ionicDecorator', {
+    textarea: base + 'textarea.html',
+    fieldset: base + 'fieldset.html',
+    array: base + 'array.html',
+    tabarray: base + 'tabarray.html',
+    tabs: base + 'tabs.html',
+    section: base + 'section.html',
+    conditional: base + 'section.html',
+    actions: base + 'actions.html',
+    select: base + 'select.html',
+    checkbox: base + 'checkbox.html',
+    checkboxes: base + 'checkboxes.html',
+    number: base + 'default.html',
+    password: base + 'default.html',
+    submit: base + 'submit.html',
+    button: base + 'submit.html',
+    radios: base + 'radios.html',
+    'radios-inline': base + 'radios-inline.html',
+    radiobuttons: base + 'radio-buttons.html',
+    help: base + 'help.html',
+    date: base + 'default.html',
+    'default': base + 'default.html'
+  }, [
+    // function(form) {
+    //   if (form.readonly && form.key && form.type !== 'fieldset') {
+    //     return base + 'readonly.html';
+    //   }
+    // }
+  ]);
+
+  //manual use directives
+  decoratorsProvider.createDirectives({
+    textarea: base + 'textarea.html',
+    select: base + 'select.html',
+    checkbox: base + 'checkbox.html',
+    checkboxes: base + 'checkboxes.html',
+    number: base + 'default.html',
+    submit: base + 'submit.html',
+    button: base + 'submit.html',
+    text: base + 'default.html',
+    date: base + 'default.html',
+    password: base + 'default.html',
+    datepicker: base + 'datepicker.html',
+    input: base + 'default.html',
+    radios: base + 'radios.html',
+    'radios-inline': base + 'radios-inline.html',
+    radiobuttons: base + 'radio-buttons.html',
+  });
+
+}]).directive('sfFieldset', function() {
+  return {
+    transclude: true,
+    scope: true,
+    templateUrl: 'directives/decorators/ionic/fieldset-trcl.html',
+    link: function(scope, element, attrs) {
+      scope.title = scope.$eval(attrs.title);
+    }
+  };
+});
+
+// .directive('formatDate',function (){
+//     return {
+//         require: 'ngModel',
+//         link: function(scope, elem, attr, modelCtrl) {
+//             modelCtrl.$formatters.push(function(modelValue){
+//                 return new Date(modelValue);
+//             });
+//         }
+//     };
+// });
diff --git a/dist/ionic-decorator.min.js b/dist/ionic-decorator.min.js
new file mode 100644
index 000000000..4505b009e
--- /dev/null
+++ b/dist/ionic-decorator.min.js
@@ -0,0 +1 @@
+angular.module("schemaForm").run(["$templateCache",function(e){e.put("directives/decorators/ionic/actions-trcl.html",'<div class="btn-group schema-form-actions {{form.htmlClass}}" ng-transclude=""></div>'),e.put("directives/decorators/ionic/actions.html",'<div class="btn-group schema-form-actions {{form.htmlClass}}"><input ng-repeat-start="item in form.items" type="submit" class="btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}" value="{{item.title}}" ng-if="item.type === \'submit\'"> <button ng-repeat-end="" class="btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}" type="button" ng-disabled="form.readonly" ng-if="item.type !== \'submit\'" ng-click="buttonClick($event,item)">{{item.title}}</button></div>'),e.put("directives/decorators/ionic/array.html",'<div sf-array="form" class="schema-form-array {{form.htmlClass}}" ng-model="$$value$$" ng-model-options="form.ngModelOptions"><h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3><ol class="list-group" ng-model="modelArray" ui-sortable=""><li class="list-group-item {{form.fieldHtmlClass}}" ng-repeat="item in modelArray track by $index"><div class="row"><div class="col-50 col-offset-50"><button ng-hide="form.readonly" ng-click="deleteFromArray($index)" style="position: relative; z-index: 20;" type="button" class="button button-assertive icon-left ion-close-round {{ form.style.close || \'button-outline\' }} close"><span class="sr-only">{{ form.close || \'Close\'}}</span></button></div></div><sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator></li></ol><div class="row"><div class="col-50 col-offset-50"><button ng-hide="form.readonly || form.add === null" ng-click="appendToArray()" type="button" class="button button-positive ion-plus-round icon-left {{ form.style.add || \'button-outline\' }}">{{ form.add || \'Add\'}}</button></div></div><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div></div>'),e.put("directives/decorators/ionic/checkbox.html",'<div class="item item-checkbox schema-form-checkbox {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"><label class="checkbox"><input type="checkbox" sf-changed="form" ng-disabled="form.readonly" ng-model="$$value$$" ng-model-options="form.ngModelOptions" schema-validate="form" class="{{form.fieldHtmlClass}}" name="{{form.key.slice(-1)[0]}}"></label> <span ng-bind-html="form.title"></span><div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div></div>'),e.put("directives/decorators/ionic/checkboxes.html",'<div sf-array="form" ng-model="$$value$$" class="form-group schema-form-checkboxes {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"><label class="control-label" ng-show="showTitle()">{{form.title}}</label><div class="checkbox" ng-repeat="val in titleMapValues track by $index"><label><input type="checkbox" ng-disabled="form.readonly" sf-changed="form" class="{{form.fieldHtmlClass}}" ng-model="titleMapValues[$index]" name="{{form.key.slice(-1)[0]}}"> <span ng-bind-html="form.titleMap[$index].name"></span></label></div><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div></div>'),e.put("directives/decorators/ionic/default.html",'<label class="item item-input {{form.htmlClass}}" ng-show="showTitle()"><span class="input-label" ng-if="form.htmlClass == \'item-stacked-label\'">{{form.title}}</span> <label class="item-input-wrapper" ng-if="form.htmlClass == \'item-input-inset\'"><input ng-if="form.format == \'date\'" ng-show="form.key" type="date" format-date="" placeholder="{{form.placeholder}}" class="{{form.fieldHtmlClass}}" ng-model="$$value$$" format="form.format"> <input ng-if="form.format == \'date\'" ng-show="form.key" style="display: none;" type="text" schema-validate="form" ng-model="$$value$$" format="form.format"> <input ng-if="form.format != \'date\'" ng-show="form.key" type="{{form.type}}" step="any" sf-changed="form" placeholder="{{form.placeholder}}" class="{{form.fieldHtmlClass}}" ng-model-options="form.ngModelOptions" ng-model="$$value$$" ng-disabled="form.readonly" schema-validate="form" name="{{form.key.slice(-1)[0]}}"></label> <span ng-if="form.htmlClass != \'item-input-inset\' && form.format != \'date\'"><input ng-show="form.key" type="{{form.type}}" step="any" sf-changed="form" placeholder="{{form.placeholder}}" class="{{form.fieldHtmlClass}}" ng-model-options="form.ngModelOptions" ng-model="$$value$$" ng-disabled="form.readonly" schema-validate="form" name="{{form.key.slice(-1)[0]}}"></span> <span ng-if="form.htmlClass != \'item-input-inset\' && form.format == \'date\'"><input ng-if="form.format == \'date\'" ng-show="form.key" type="date" format-date="" placeholder="{{form.placeholder}}" class="{{form.fieldHtmlClass}}" ng-model="$$value$$" format="form.format"> <input ng-if="form.format == \'date\'" ng-show="form.key" style="display: none;" type="text" schema-validate="form" ng-model="$$value$$" format="form.format"></span> <span ng-if="form.feedback !== false" class="form-control-feedback" ng-class="evalInScope(form.feedback) || {\'glyphicon\': true, \'glyphicon-ok\': hasSuccess(), \'glyphicon-remove\': hasError() }"></span><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div><button class="button button-small" ng-if="form.htmlClass == \'item-input-inset\'" ng-click="buttonClick($event,form)">{{form.insetButtonBody}}</button></label>'),e.put("directives/decorators/ionic/fieldset-trcl.html",'<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}"><legend ng-show="form.title">{{ form.title }}</legend><div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div><div ng-transclude=""></div></fieldset>'),e.put("directives/decorators/ionic/fieldset.html",'<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}"><legend ng-show="form.title">{{ form.title }}</legend><div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div><sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator></fieldset>'),e.put("directives/decorators/ionic/help.html",'<div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>'),e.put("directives/decorators/ionic/radio-buttons.html",'<div class="form-group schema-form-radiobuttons {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"><div><label class="control-label" ng-show="showTitle()">{{form.title}}</label></div><div class="btn-group"><label class="btn {{ (item.value === $$value$$) ? form.style.selected || \'btn-default\' : form.style.unselected || \'btn-default\'; }}" ng-class="{ active: item.value === $$value$$ }" ng-repeat="item in form.titleMap"><input type="radio" class="{{form.fieldHtmlClass}}" sf-changed="form" style="display: none;" ng-disabled="form.readonly" ng-model="$$value$$" ng-model-options="form.ngModelOptions" ng-value="item.value" name="{{form.key.slice(-1)[0]}}"> <span ng-bind-html="item.name"></span></label></div><div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div></div>'),e.put("directives/decorators/ionic/radios-inline.html",'<div class="form-group schema-form-radios-inline {{form.htmlClass}}" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"><label class="control-label" ng-show="showTitle()">{{form.title}}</label><div><label class="radio-inline" ng-repeat="item in form.titleMap"><input type="radio" class="{{form.fieldHtmlClass}}" sf-changed="form" ng-disabled="form.readonly" ng-model="$$value$$" ng-value="item.value" name="{{form.key.slice(-1)[0]}}"> <span ng-bind-html="item.name"></span></label></div><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div></div>'),e.put("directives/decorators/ionic/radios.html",'<label class="item item-radio" ng-repeat="item in form.titleMap"><input type="radio" class="{{form.fieldHtmlClass}}" sf-changed="form" ng-disabled="form.readonly" ng-model="$$value$$" ng-model-options="form.ngModelOptions" ng-value="item.value" name="{{form.key.slice(-1)[0]}}"><div class="item-content" ng-bind-html="item.name"></div><i class="radio-icon ion-checkmark"></i><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div></label>'),e.put("directives/decorators/ionic/readonly.html",'<div class="form-group"><label ng-show="showTitle()">{{form.title}}</label> <input ng-if="form.type !== \'textarea\'" type="text" disabled="" class="form-control" value="{{$$value$$}}"> <textarea ng-if="form.type === \'textarea\'" disabled="" class="form-control">{{$$value$$}}</textarea><div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div></div>'),e.put("directives/decorators/ionic/section.html",'<div class="schema-form-section {{form.htmlClass}}" ng-if="!form.condition || evalExpr(form.condition,{ model: model, \'arrayIndex\': arrayIndex })"><sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator></div>'),e.put("directives/decorators/ionic/select.html",'<label class="item item-input item-select {{form.htmlClass}} schema-form-select" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}"><label class="input-label" ng-show="showTitle()">{{form.title}}</label><select ng-model="$$value$$" ng-model-options="form.ngModelOptions" ng-disabled="form.readonly" sf-changed="form" class="{{form.fieldHtmlClass}}" schema-validate="form" ng-options="item.value as item.name for item in form.titleMap" name="{{form.key.slice(-1)[0]}}"></select><div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div></label>'),e.put("directives/decorators/ionic/submit.html",'<input type="submit" class="button button-block button-positive {{ form.style || \'button-positive\' }} {{form.fieldHtmlClass}}" value="{{form.title}}" ng-disabled="form.readonly" ng-if="form.type === \'submit\'"> <button class="button button-block button-positive {{ form.style || \'button-positive\' }}" type="submit" ng-click="buttonClick($event,form)" ng-disabled="form.readonly" ng-if="form.type !== \'submit\'">{{form.title}}</button>'),e.put("directives/decorators/ionic/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="#">{{evalExpr(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="#">{{evalExpr(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("directives/decorators/ionic/tabs.html",'<div ng-init="selected = { tab: 0 }" class="schema-form-tabs {{form.htmlClass}}"><ul class="nav nav-tabs"><li ng-repeat="tab in form.tabs" ng-disabled="form.readonly" ng-click="$event.preventDefault() || (selected.tab = $index)" ng-class="{active: selected.tab === $index}"><a href="#">{{ tab.title }}</a></li></ul><div class="tab-content {{form.fieldHtmlClass}}"><div class="tab-pane" ng-disabled="form.readonly" ng-repeat="tab in form.tabs" ng-show="selected.tab === $index" ng-class="{active: selected.tab === $index}"><bootstrap-decorator ng-repeat="item in tab.items" form="item"></bootstrap-decorator></div></div></div>'),e.put("directives/decorators/ionic/textarea.html",'<div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess()}"><label ng-show="showTitle()">{{form.title}}</label> <textarea class="form-control {{form.fieldHtmlClass}}" sf-changed="form" placeholder="{{form.placeholder}}" ng-disabled="form.readonly" ng-model="$$value$$" ng-model-options="form.ngModelOptions" schema-validate="form" name="{{form.key.slice(-1)[0]}}"></textarea> <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span></div>')}]),angular.module("schemaForm").config(["schemaFormDecoratorsProvider",function(e){var t="directives/decorators/ionic/";e.createDecorator("ionicDecorator",{textarea:t+"textarea.html",fieldset:t+"fieldset.html",array:t+"array.html",tabarray:t+"tabarray.html",tabs:t+"tabs.html",section:t+"section.html",conditional:t+"section.html",actions:t+"actions.html",select:t+"select.html",checkbox:t+"checkbox.html",checkboxes:t+"checkboxes.html",number:t+"default.html",password:t+"default.html",submit:t+"submit.html",button:t+"submit.html",radios:t+"radios.html","radios-inline":t+"radios-inline.html",radiobuttons:t+"radio-buttons.html",help:t+"help.html","default":t+"default.html"},[]),e.createDirectives({textarea:t+"textarea.html",select:t+"select.html",checkbox:t+"checkbox.html",checkboxes:t+"checkboxes.html",number:t+"default.html",submit:t+"submit.html",button:t+"submit.html",text:t+"default.html",date:t+"default.html",password:t+"default.html",datepicker:t+"datepicker.html",input:t+"default.html",radios:t+"radios.html","radios-inline":t+"radios-inline.html",radiobuttons:t+"radio-buttons.html"})}]).directive("sfFieldset",function(){return{transclude:!0,scope:!0,templateUrl:"directives/decorators/ionic/fieldset-trcl.html",link:function(e,t,o){e.title=e.$eval(o.title)}}}).directive("formatDate",function(){return{require:"ngModel",link:function(e,t,o,s){s.$formatters.push(function(e){return angular.isString(e)||angular.isNumber(e)?new Date(e):e}),s.$parsers.push(function(e){return e?e.toString():void 0})}}});
\ No newline at end of file
diff --git a/gulp/tasks/default.js b/gulp/tasks/default.js
index b5ee304c8..f333cb59c 100644
--- a/gulp/tasks/default.js
+++ b/gulp/tasks/default.js
@@ -2,6 +2,7 @@ var gulp = require('gulp');
 
 gulp.task('default', [
   'minify',
+  'ionic',
   'bootstrap',
   'bootstrap-datepicker'
 ]);
diff --git a/gulp/tasks/ionic.js b/gulp/tasks/ionic.js
new file mode 100644
index 000000000..9dcfc55a7
--- /dev/null
+++ b/gulp/tasks/ionic.js
@@ -0,0 +1,29 @@
+var gulp = require('gulp'),
+  streamqueue = require('streamqueue'),
+  minifyHtml = require('gulp-minify-html'),
+  templateCache = require('gulp-angular-templatecache'),
+  concat = require('gulp-concat'),
+  uglify = require('gulp-uglify');
+
+gulp.task('ionic', function() {
+  var stream = streamqueue({objectMode: true});
+  stream.queue(
+    gulp.src('./src/directives/decorators/ionic/*.html')
+    .pipe(minifyHtml({
+      empty: true,
+      spare: true,
+      quotes: true
+    }))
+    .pipe(templateCache({
+      module: 'schemaForm',
+      root: 'directives/decorators/ionic/'
+    }))
+    );
+  stream.queue(gulp.src('./src/directives/decorators/ionic/*.js'));
+
+  stream.done()
+  .pipe(concat('ionic-decorator.min.js'))
+  .pipe(uglify())
+  .pipe(gulp.dest('./dist/'));
+
+});
\ No newline at end of file
diff --git a/src/directives/decorators/ionic/actions-trcl.html b/src/directives/decorators/ionic/actions-trcl.html
new file mode 100644
index 000000000..0b32cbc2f
--- /dev/null
+++ b/src/directives/decorators/ionic/actions-trcl.html
@@ -0,0 +1 @@
+<div class="btn-group schema-form-actions {{form.htmlClass}}" ng-transclude></div>
diff --git a/src/directives/decorators/ionic/actions.html b/src/directives/decorators/ionic/actions.html
new file mode 100644
index 000000000..31c4df472
--- /dev/null
+++ b/src/directives/decorators/ionic/actions.html
@@ -0,0 +1,13 @@
+<div class="btn-group schema-form-actions {{form.htmlClass}}">
+  <input ng-repeat-start="item in form.items"
+         type="submit"
+         class="btn {{ item.style || 'btn-default' }} {{form.fieldHtmlClass}}"
+         value="{{item.title}}"
+         ng-if="item.type === 'submit'">
+  <button ng-repeat-end
+          class="btn {{ item.style || 'btn-default' }} {{form.fieldHtmlClass}}"
+          type="button"
+          ng-disabled="form.readonly"
+          ng-if="item.type !== 'submit'"
+          ng-click="buttonClick($event,item)">{{item.title}}</button>
+</div>
diff --git a/src/directives/decorators/ionic/array.html b/src/directives/decorators/ionic/array.html
new file mode 100644
index 000000000..be0686245
--- /dev/null
+++ b/src/directives/decorators/ionic/array.html
@@ -0,0 +1,37 @@
+<div sf-array="form" class="schema-form-array {{form.htmlClass}}"
+     ng-model="$$value$$" ng-model-options="form.ngModelOptions">
+  <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
+  <ol class="list-group" ng-model="modelArray" ui-sortable>
+    <li class="list-group-item {{form.fieldHtmlClass}}"
+        ng-repeat="item in modelArray track by $index">
+
+      <div class="row">
+      <div class="col-50 col-offset-50">
+        <button ng-hide="form.readonly"
+                ng-click="deleteFromArray($index)"
+                style="position: relative; z-index: 20;"
+                type="button"
+                class="button button-assertive icon-left ion-close-round {{ form.style.close || 'button-outline' }} close">
+                <span class="sr-only">{{ form.close || 'Close'}}</span>
+        </button>
+      </div>
+      </div>
+
+      <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
+    </li>
+  </ol>
+
+  <div class="row">
+  <div class="col-50 col-offset-50">
+    <button ng-hide="form.readonly || form.add === null"
+            ng-click="appendToArray()"
+            type="button"
+            class="button button-positive ion-plus-round icon-left {{ form.style.add || 'button-outline' }}">
+      {{ form.add || 'Add'}}
+    </button>
+  </div>
+  </div>
+  <div class="help-block"
+       ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+       ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+</div>
diff --git a/src/directives/decorators/ionic/checkbox.html b/src/directives/decorators/ionic/checkbox.html
new file mode 100644
index 000000000..03455c10a
--- /dev/null
+++ b/src/directives/decorators/ionic/checkbox.html
@@ -0,0 +1,33 @@
+<!-- <div class="checkbox schema-form-checkbox {{form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <label>
+    <input type="checkbox"
+           sf-changed="form"
+           ng-disabled="form.readonly"
+           ng-model="$$value$$"
+           ng-model-options="form.ngModelOptions"
+           schema-validate="form"
+           class="{{form.fieldHtmlClass}}"
+           name="{{form.key.slice(-1)[0]}}">
+    <span ng-bind-html="form.title"></span>
+  </label>
+
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+</div> -->
+
+
+<div class="item item-checkbox schema-form-checkbox {{form.htmlClass}}"
+  ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+     <label class="checkbox">
+        <input type="checkbox"
+                 sf-changed="form"
+                 ng-disabled="form.readonly"
+                 ng-model="$$value$$"
+                 ng-model-options="form.ngModelOptions"
+                 schema-validate="form"
+                 class="{{form.fieldHtmlClass}}"
+                 name="{{form.key.slice(-1)[0]}}">
+     </label>
+      <span ng-bind-html="form.title"></span>
+     <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+  </div>
diff --git a/src/directives/decorators/ionic/checkboxes.html b/src/directives/decorators/ionic/checkboxes.html
new file mode 100644
index 000000000..f926ee2e0
--- /dev/null
+++ b/src/directives/decorators/ionic/checkboxes.html
@@ -0,0 +1,20 @@
+<div sf-array="form" ng-model="$$value$$"
+     class="form-group schema-form-checkboxes {{form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+  <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
+    <label>
+      <input type="checkbox"
+             ng-disabled="form.readonly"
+             sf-changed="form"
+             class="{{form.fieldHtmlClass}}"
+             ng-model="titleMapValues[$index]"
+             name="{{form.key.slice(-1)[0]}}">
+      <span ng-bind-html="form.titleMap[$index].name"></span>
+    </label>
+
+  </div>
+  <div class="help-block"
+       ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+       ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+</div>
diff --git a/src/directives/decorators/ionic/default.html b/src/directives/decorators/ionic/default.html
new file mode 100644
index 000000000..2743d373b
--- /dev/null
+++ b/src/directives/decorators/ionic/default.html
@@ -0,0 +1,143 @@
+
+<label class="item item-input {{form.htmlClass}}" ng-show="showTitle()">
+
+  <span class="input-label" ng-if="form.htmlClass == 'item-stacked-label'">{{form.title}}</span>
+
+  <label class="item-input-wrapper" ng-if="form.htmlClass == 'item-input-inset'">
+
+<!--     <input
+      ng-if="form.format == 'date'"
+      ng-show="form.key"
+      type="date"
+      step="any"
+      sf-changed="form"
+      placeholder="{{form.placeholder}}"
+      class="{{form.fieldHtmlClass}}"
+      ng-model-options="form.ngModelOptions"
+      ng-model="$$value$$"
+      ng-disabled="form.readonly"
+      name="{{form.key.slice(-1)[0]}}"
+      format-date
+      > -->
+
+    <input
+     ng-if="form.format == 'date'"
+     ng-show="form.key"
+     type="date"
+     format-date
+     placeholder="{{form.placeholder}}"
+     class="{{form.fieldHtmlClass}}"
+     ng-model="$$value$$"
+     format="form.format" />
+
+     <input
+     ng-if="form.format == 'date'"
+     ng-show="form.key"
+     style="display: none;"
+     type="text"
+     schema-validate="form"
+     ng-model="$$value$$"
+     format="form.format" />
+
+
+
+    <input
+      ng-if="form.format != 'date'"
+      ng-show="form.key"
+      type="{{form.type}}"
+      step="any"
+      sf-changed="form"
+      placeholder="{{form.placeholder}}"
+      class="{{form.fieldHtmlClass}}"
+      ng-model-options="form.ngModelOptions"
+      ng-model="$$value$$"
+      ng-disabled="form.readonly"
+      schema-validate="form"
+      name="{{form.key.slice(-1)[0]}}"
+      >
+
+
+  </label>
+
+  <span ng-if="form.htmlClass != 'item-input-inset' && form.format != 'date'">
+
+    <input
+        ng-show="form.key"
+        type="{{form.type}}"
+        step="any"
+        sf-changed="form"
+        placeholder="{{form.placeholder}}"
+        class="{{form.fieldHtmlClass}}"
+        ng-model-options="form.ngModelOptions"
+        ng-model="$$value$$"
+        ng-disabled="form.readonly"
+        schema-validate="form"
+        name="{{form.key.slice(-1)[0]}}"
+        >
+
+  </span>
+
+  <span ng-if="form.htmlClass != 'item-input-inset' && form.format == 'date'">
+
+    <input
+     ng-if="form.format == 'date'"
+     ng-show="form.key"
+     type="date"
+     format-date
+     placeholder="{{form.placeholder}}"
+     class="{{form.fieldHtmlClass}}"
+     ng-model="$$value$$"
+     format="form.format" />
+
+     <input
+     ng-if="form.format == 'date'"
+     ng-show="form.key"
+     style="display: none;"
+     type="text"
+     schema-validate="form"
+     ng-model="$$value$$"
+     format="form.format" />
+
+
+
+<!--     <input
+        ng-show="form.key"
+        type="date"
+        step="any"
+        sf-changed="form"
+        placeholder="{{form.placeholder}}"
+        class="{{form.fieldHtmlClass}}"
+        ng-model-options="form.ngModelOptions"
+        ng-model="$$value$$"
+        ng-disabled="form.readonly"
+        name="{{form.key.slice(-1)[0]}}"
+        format-date
+        >
+ -->
+  </span>
+
+
+
+  <span ng-if="form.feedback !== false"
+        class="form-control-feedback"
+        ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
+
+  <div class="help-block"
+       ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+       ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+
+<!--   <a class="button button-small" ng-if="form.htmlClass == 'item-input-inset'" ng-click="{{form.insetButtonAction}}"  data-click="{{form.insetButtonAction}}">
+      {{form.insetButtonBody}}
+  </a>
+ -->
+<!--   <a class="button button-small" ng-if="form.htmlClass == 'item-input-inset'" ng-click="buttonClick($event,form)" >
+      {{form.insetButtonBody}}
+  </a>
+ -->
+
+  <button class="button button-small"
+        ng-if="form.htmlClass == 'item-input-inset'"
+        ng-click="buttonClick($event,form)"
+        > {{form.insetButtonBody}}</button>
+
+</label>
diff --git a/src/directives/decorators/ionic/fieldset-trcl.html b/src/directives/decorators/ionic/fieldset-trcl.html
new file mode 100644
index 000000000..eb0516bfb
--- /dev/null
+++ b/src/directives/decorators/ionic/fieldset-trcl.html
@@ -0,0 +1,5 @@
+<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}">
+  <legend ng-show="form.title">{{ form.title }}</legend>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+  <div ng-transclude></div>
+</fieldset>
diff --git a/src/directives/decorators/ionic/fieldset.html b/src/directives/decorators/ionic/fieldset.html
new file mode 100644
index 000000000..2276d67c3
--- /dev/null
+++ b/src/directives/decorators/ionic/fieldset.html
@@ -0,0 +1,5 @@
+<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}">
+  <legend ng-show="form.title">{{ form.title }}</legend>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+  <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
+</fieldset>
diff --git a/src/directives/decorators/ionic/help.html b/src/directives/decorators/ionic/help.html
new file mode 100644
index 000000000..aca5bb56a
--- /dev/null
+++ b/src/directives/decorators/ionic/help.html
@@ -0,0 +1 @@
+<div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>
diff --git a/src/directives/decorators/ionic/ionic-decorator.js b/src/directives/decorators/ionic/ionic-decorator.js
new file mode 100644
index 000000000..d2fecccc0
--- /dev/null
+++ b/src/directives/decorators/ionic/ionic-decorator.js
@@ -0,0 +1,80 @@
+angular.module('schemaForm').config(['schemaFormDecoratorsProvider', function(decoratorsProvider) {
+  var base = 'directives/decorators/ionic/';
+
+  decoratorsProvider.createDecorator('ionicDecorator', {
+    textarea: base + 'textarea.html',
+    fieldset: base + 'fieldset.html',
+    array: base + 'array.html',
+    tabarray: base + 'tabarray.html',
+    tabs: base + 'tabs.html',
+    section: base + 'section.html',
+    conditional: base + 'section.html',
+    actions: base + 'actions.html',
+    select: base + 'select.html',
+    checkbox: base + 'checkbox.html',
+    checkboxes: base + 'checkboxes.html',
+    number: base + 'default.html',
+    password: base + 'default.html',
+    submit: base + 'submit.html',
+    button: base + 'submit.html',
+    radios: base + 'radios.html',
+    'radios-inline': base + 'radios-inline.html',
+    radiobuttons: base + 'radio-buttons.html',
+    help: base + 'help.html',
+    'default': base + 'default.html'
+  }, [
+    // function(form) {
+    //   if (form.readonly && form.key && form.type !== 'fieldset') {
+    //     return base + 'readonly.html';
+    //   }
+    // }
+  ]);
+
+  //manual use directives
+  decoratorsProvider.createDirectives({
+    textarea: base + 'textarea.html',
+    select: base + 'select.html',
+    checkbox: base + 'checkbox.html',
+    checkboxes: base + 'checkboxes.html',
+    number: base + 'default.html',
+    submit: base + 'submit.html',
+    button: base + 'submit.html',
+    text: base + 'default.html',
+    date: base + 'default.html',
+    password: base + 'default.html',
+    datepicker: base + 'datepicker.html',
+    input: base + 'default.html',
+    radios: base + 'radios.html',
+    'radios-inline': base + 'radios-inline.html',
+    radiobuttons: base + 'radio-buttons.html',
+  });
+
+}]).directive('sfFieldset', function() {
+  return {
+    transclude: true,
+    scope: true,
+    templateUrl: 'directives/decorators/ionic/fieldset-trcl.html',
+    link: function(scope, element, attrs) {
+      scope.title = scope.$eval(attrs.title);
+    }
+  };
+})
+
+.directive('formatDate',function (){
+ return {
+   require: 'ngModel',
+   link: function(scope, elem, attr, modelCtrl) {
+     modelCtrl.$formatters.push(function(value){
+       if (angular.isString(value) || angular.isNumber(value)) {
+         return new Date(value);
+       }
+       return value;
+     })
+     modelCtrl.$parsers.push(function(value){
+       if(value){
+         return value.toString();
+       }
+     })
+   }
+ }
+});
diff --git a/src/directives/decorators/ionic/radio-buttons.html b/src/directives/decorators/ionic/radio-buttons.html
new file mode 100644
index 000000000..97fa41b65
--- /dev/null
+++ b/src/directives/decorators/ionic/radio-buttons.html
@@ -0,0 +1,23 @@
+<div class="form-group schema-form-radiobuttons {{form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <div>
+    <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+  </div>
+  <div class="btn-group">
+    <label class="btn {{ (item.value === $$value$$) ? form.style.selected || 'btn-default' : form.style.unselected || 'btn-default'; }}"
+           ng-class="{ active: item.value === $$value$$ }"
+           ng-repeat="item in form.titleMap">
+      <input type="radio"
+             class="{{form.fieldHtmlClass}}"
+             sf-changed="form"
+             style="display: none;"
+             ng-disabled="form.readonly"
+             ng-model="$$value$$"
+             ng-model-options="form.ngModelOptions"
+             ng-value="item.value"
+             name="{{form.key.slice(-1)[0]}}">
+      <span ng-bind-html="item.name"></span>
+    </label>
+  </div>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+</div>
diff --git a/src/directives/decorators/ionic/radios-inline.html b/src/directives/decorators/ionic/radios-inline.html
new file mode 100644
index 000000000..f46cd8fd5
--- /dev/null
+++ b/src/directives/decorators/ionic/radios-inline.html
@@ -0,0 +1,17 @@
+<div class="form-group schema-form-radios-inline {{form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+  <div>
+      <label class="radio-inline" ng-repeat="item in form.titleMap" >
+      <input type="radio"
+             class="{{form.fieldHtmlClass}}"
+             sf-changed="form"
+             ng-disabled="form.readonly"
+             ng-model="$$value$$"
+             ng-value="item.value"
+             name="{{form.key.slice(-1)[0]}}">
+      <span ng-bind-html="item.name"></span>
+    </label>
+  </div>
+  <div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+</div>
diff --git a/src/directives/decorators/ionic/radios.html b/src/directives/decorators/ionic/radios.html
new file mode 100644
index 000000000..b16402708
--- /dev/null
+++ b/src/directives/decorators/ionic/radios.html
@@ -0,0 +1,36 @@
+<!-- <div class="form-group schema-form-radios {{form.htmlClass}}" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+  <div class="radio" ng-repeat="item in form.titleMap" >
+    <label>
+      <input type="radio"
+             class="{{form.fieldHtmlClass}}"
+             sf-changed="form"
+             ng-disabled="form.readonly"
+             ng-model="$$value$$"
+             ng-model-options="form.ngModelOptions"
+             ng-value="item.value"
+             name="{{form.key.slice(-1)[0]}}">
+      <span ng-bind-html="item.name"></span>
+    </label>
+  </div>
+</div>
+
+ -->
+
+<label class="item item-radio" ng-repeat="item in form.titleMap" >
+    <input type="radio"
+           class="{{form.fieldHtmlClass}}"
+           sf-changed="form"
+           ng-disabled="form.readonly"
+           ng-model="$$value$$"
+           ng-model-options="form.ngModelOptions"
+           ng-value="item.value"
+           name="{{form.key.slice(-1)[0]}}">
+    <div class="item-content" ng-bind-html="item.name"></div>
+    <i class="radio-icon ion-checkmark"></i>
+
+    <div class="help-block" ng-show="(hasError() && errorMessage(schemaError())) || form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+
+</label>
+
+
diff --git a/src/directives/decorators/ionic/readonly.html b/src/directives/decorators/ionic/readonly.html
new file mode 100644
index 000000000..4f0b1d126
--- /dev/null
+++ b/src/directives/decorators/ionic/readonly.html
@@ -0,0 +1,6 @@
+<div class="form-group">
+  <label ng-show="showTitle()">{{form.title}}</label>
+  <input ng-if="form.type !== 'textarea'" type="text" disabled class="form-control" value="{{$$value$$}}">
+  <textarea ng-if="form.type === 'textarea'"  disabled class="form-control">{{$$value$$}}</textarea>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+</div>
diff --git a/src/directives/decorators/ionic/section.html b/src/directives/decorators/ionic/section.html
new file mode 100644
index 000000000..a11c5d817
--- /dev/null
+++ b/src/directives/decorators/ionic/section.html
@@ -0,0 +1,4 @@
+<div class="schema-form-section {{form.htmlClass}}" 
+     ng-if="!form.condition || evalExpr(form.condition,{ model: model, 'arrayIndex': arrayIndex })">
+  <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
+</div>
diff --git a/src/directives/decorators/ionic/select.html b/src/directives/decorators/ionic/select.html
new file mode 100644
index 000000000..29dac6ece
--- /dev/null
+++ b/src/directives/decorators/ionic/select.html
@@ -0,0 +1,39 @@
+<!-- <div class="form-group {{form.htmlClass}} schema-form-select"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
+  <label class="control-label" ng-show="showTitle()">
+    {{form.title}}
+  </label>
+  <select ng-model="$$value$$"
+          ng-model-options="form.ngModelOptions"
+          ng-disabled="form.readonly"
+          sf-changed="form"
+          class="form-control {{form.fieldHtmlClass}}"
+          schema-validate="form"
+          ng-options="item.value as item.name for item in form.titleMap"
+          name="{{form.key.slice(-1)[0]}}">
+  </select>
+  <div class="help-block"
+       ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+       ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+</div>
+ -->
+
+ <label class="item item-input item-select {{form.htmlClass}} schema-form-select"
+    ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
+    <label class="input-label" ng-show="showTitle()">
+    {{form.title}}
+  </label>
+     <select ng-model="$$value$$"
+              ng-model-options="form.ngModelOptions"
+              ng-disabled="form.readonly"
+              sf-changed="form"
+              class="{{form.fieldHtmlClass}}"
+              schema-validate="form"
+              ng-options="item.value as item.name for item in form.titleMap"
+              name="{{form.key.slice(-1)[0]}}">
+      </select>
+
+      <div class="help-block"
+             ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+             ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+  </label>
\ No newline at end of file
diff --git a/src/directives/decorators/ionic/submit.html b/src/directives/decorators/ionic/submit.html
new file mode 100644
index 000000000..f8cddc032
--- /dev/null
+++ b/src/directives/decorators/ionic/submit.html
@@ -0,0 +1,10 @@
+<input type="submit"
+       class="button button-block button-positive {{ form.style || 'button-positive' }} {{form.fieldHtmlClass}}"
+       value="{{form.title}}"
+       ng-disabled="form.readonly"
+       ng-if="form.type === 'submit'">
+<button class="button button-block button-positive {{ form.style || 'button-positive' }}"
+        type="submit"
+        ng-click="buttonClick($event,form)"
+        ng-disabled="form.readonly"
+        ng-if="form.type !== 'submit'">{{form.title}}</button>
diff --git a/src/directives/decorators/ionic/tabarray.html b/src/directives/decorators/ionic/tabarray.html
new file mode 100644
index 000000000..44d33ee51
--- /dev/null
+++ b/src/directives/decorators/ionic/tabarray.html
@@ -0,0 +1,58 @@
+
+<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="#">{{evalExpr(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="#">{{evalExpr(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>
diff --git a/src/directives/decorators/ionic/tabs.html b/src/directives/decorators/ionic/tabs.html
new file mode 100644
index 000000000..747a358bd
--- /dev/null
+++ b/src/directives/decorators/ionic/tabs.html
@@ -0,0 +1,21 @@
+<div ng-init="selected = { tab: 0 }" class="schema-form-tabs {{form.htmlClass}}">
+  <ul class="nav nav-tabs">
+    <li ng-repeat="tab in form.tabs"
+        ng-disabled="form.readonly"
+        ng-click="$event.preventDefault() || (selected.tab = $index)"
+        ng-class="{active: selected.tab === $index}">
+        <a href="#">{{ tab.title }}</a>
+    </li>
+  </ul>
+
+  <div class="tab-content {{form.fieldHtmlClass}}">
+    <div class="tab-pane"
+         ng-disabled="form.readonly"
+         ng-repeat="tab in form.tabs"
+         ng-show="selected.tab === $index"
+         ng-class="{active: selected.tab === $index}">
+         <bootstrap-decorator ng-repeat="item in tab.items" form="item">
+         </bootstrap-decorator>
+    </div>
+  </div>
+</div>
diff --git a/src/directives/decorators/ionic/textarea.html b/src/directives/decorators/ionic/textarea.html
new file mode 100644
index 000000000..9a0f29d74
--- /dev/null
+++ b/src/directives/decorators/ionic/textarea.html
@@ -0,0 +1,12 @@
+<div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+  <label ng-show="showTitle()">{{form.title}}</label>
+  <textarea class="form-control {{form.fieldHtmlClass}}"
+            sf-changed="form"
+            placeholder="{{form.placeholder}}"
+            ng-disabled="form.readonly"
+            ng-model="$$value$$"
+            ng-model-options="form.ngModelOptions"
+            schema-validate="form"
+            name="{{form.key.slice(-1)[0]}}"></textarea>
+  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
+</div>