Configure typings for external use

.gitignore

@@ -1,6 +1,9 @@
 # generated files
 dist/
 !dist/LICENSE
+components/
+jsonforms.d.ts
+jsonforms.js
 temp/
 coverage/
 reports/

package.json

@@ -6,8 +6,10 @@
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
   "homepage": "http://github.eclipsesource.com/jsonforms/",
   "license": "MIT",
-  "main": "/",
+  "main":    "jsonforms.js",
+  "typings": "jsonforms.d.ts",
   "scripts": {
+    "tsc": "tsc",
     "dev":           "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --NODE_ENV=dev --inline",
     "dev-bootstrap": "webpack --config webpack/webpack.dev-bootstrap.js && webpack-dev-server --config webpack/webpack.dev-bootstrap.js --NODE_ENV=dev --inline",
     "test": "karma start --NODE_ENV=test",

src/bootstrap/controls/boolean/boolean-directive.ts

@@ -1,7 +1,16 @@
+const booleanTemplate = `<jsonforms-control>
+  <input type="checkbox"
+         id="{{vm.id}}"
+         class="jsf-control-boolean"
+         ng-model="vm.modelValue[vm.fragment]"
+         ng-change='vm.modelChanged()'
+         ng-disabled="vm.uiSchema.readOnly"/>
+</jsonforms-control>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.controls.boolean',
         ['jsonforms-bootstrap.renderers.controls'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('boolean.html', require('./boolean.html'));
+        $templateCache.put('boolean.html', booleanTemplate);
     }])
     .name;

src/bootstrap/controls/bootstrap-controls-directive.ts

@@ -1,6 +1,17 @@
+const controlTemplate = `<div class="jsf-control form-group top-buffer" ng-hide="vm.hide">
+    <div>
+        <label ng-if="vm.showLabel" for="{{vm.id}}">{{vm.label}}</label>
+    </div>
+    <div ng-transclude>
+    </div>
+    <div>
+        <uib-alert ng-repeat="alert in vm.alerts" type="{{alert.type}}" >{{alert.msg}}</uib-alert>
+    </div>
+</div>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.controls', ['jsonforms-bootstrap'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('control.html', require('./control.html'));
+        $templateCache.put('control.html', controlTemplate);
     }])
     .name;

src/bootstrap/controls/datetime/datetime-directive.ts

@@ -1,8 +1,8 @@
 import {RendererTester, NOT_FITTING} from '../../../components/renderers/renderer-service';
-import {IUISchemaElement} from '../../../jsonforms';
 import {IPathResolver} from '../../../components/services/pathresolver/jsonforms-pathresolver';
 import {DateTimeController, DateTimeControllerScope} from
     '../../../components/renderers/controls/datetime/datetime-directive';
+import {IUISchemaElement} from "../../../../uischema";
 
 class DateTimeDirective implements ng.IDirective {
     restrict = 'E';
@@ -46,6 +46,27 @@ const DateTimeControlBootstrapRendererTester: RendererTester = function(element:
     }
     return NOT_FITTING;
 };
+
+const datetimeTemplate = `<jsonforms-control>
+    <div class="input-group">
+      <input type="text"
+             uib-datepicker-popup="dd.MM.yyyy"
+             close-text="Close"
+             is-open="vm.isOpen"
+             id="{{vm.id}}"
+             class="form-control jsf-control-datetime"
+             ng-change='vm.modelChanged()'
+             ng-model="vm.dt"
+             ng-model-options="{timezone:'UTC'}"
+             ng-readonly="vm.uiSchema.readOnly"/>
+         <span class="input-group-btn">
+           <button type="button" class="btn btn-default" ng-click="vm.openDate()">
+             <i class="glyphicon glyphicon-calendar"></i>
+           </button>
+         </span>
+    </div>
+</jsonforms-control>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.controls.datetime',
         ['jsonforms-bootstrap.renderers.controls'])
@@ -55,6 +76,6 @@ export default angular
                 DateTimeControlBootstrapRendererTester)
     ])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('datetimeBootstrap.html', require('./datetimeBootstrap.html'));
+        $templateCache.put('datetimeBootstrap.html', datetimeTemplate);
     }])
     .name;

src/bootstrap/layouts/categories/categorization-directive.ts

@@ -1,7 +1,26 @@
+const categorizationTemplate = `<jsonforms-layout>        
+     <div class="row jsf-categorization">
+          <div class="col-sm-100">
+               <uib-tabset>
+                    <uib-tab
+                        heading="{{category.label}}"
+                        ng-repeat="category in vm.uiSchema.elements"
+                        select="vm.changeSelectedCategory(category)">
+                        <fieldset ng-if="vm.selectedCategory===category">
+                            <jsonforms-inner ng-repeat="child in category.elements"
+                                             uischema="child" >
+                            </jsonforms-inner>
+                        </fieldset>
+                    </uib-tab>
+               </uib-tabset>
+           </div>
+     </div>
+</jsonforms-layout>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.layouts.categories',
         ['jsonforms.renderers.layouts', 'jsonforms-bootstrap'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('categorization.html', require('./categorization.html'));
+        $templateCache.put('categorization.html', categorizationTemplate);
     }])
     .name;

src/bootstrap/layouts/group/group-directive.ts

@@ -1,7 +1,19 @@
+const groupTemplate = `<jsonforms-layout class="jsf-group">
+    <div class="jsf-group">
+        <fieldset class="row">
+            <legend ng-if="vm.label">{{vm.label}}</legend>
+            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements"
+                             uischema="child"
+                             class="col-sm-100">
+            </jsonforms-inner>
+        </fieldset>
+    </div>
+</jsonforms-layout>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.layouts.group',
         ['jsonforms.renderers.layouts', 'jsonforms-bootstrap'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('group.html', require('./group.html'));
+        $templateCache.put('group.html', groupTemplate);
     }])
     .name;

src/bootstrap/layouts/horizontal/horizontal-directive.ts

@@ -34,6 +34,17 @@ const BootstrapHorizontalLayoutRendererTester: RendererTester = function(element
     }
     return 3;
 };
+
+const horizontalTemplate = `<jsonforms-layout class="jsf-horizontal-layout">
+    <div class="jsf-horizontal-layout">
+        <fieldset class="row">
+            <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
+                <jsonforms-inner uischema="child"></jsonforms-inner>
+            </div>
+        </fieldset>
+    </div>
+</jsonforms-layout>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.layouts.horizontal',
         ['jsonforms.renderers.layouts', 'jsonforms-bootstrap'])
@@ -43,6 +54,6 @@ export default angular
             BootstrapHorizontalLayoutRendererTester)
     ])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('horizontal.html', require('./horizontal.html'));
+        $templateCache.put('horizontal.html', horizontalTemplate);
     }])
     .name;

src/bootstrap/layouts/masterdetail/masterdetail-directives.ts

@@ -1,11 +1,64 @@
+const masterDetailTemplate = `
+<div class="row">
+    <!-- Master -->
+    <div class="col-sm-30 jsf-masterdetail">
+        <jsonforms-masterdetail-collection properties="vm.subSchema.properties"
+                                           instance="vm.data">
+        </jsonforms-masterdetail-collection>
+    </div>
+    <!-- Detail -->
+    <div class="col-sm-70">
+        <jsonforms schema="vm.selectedSchema"
+                   data="vm.selectedChild"
+                   ng-if="vm.selectedChild"></jsonforms>
+    </div>
+</div>`;
+
+const masterDetailCollectionTemplate = `
+<div>
+    <uib-accordion close-others="false">
+        <uib-accordion-group is-open="vm.attribute_open[$index]"
+                         ng-repeat="(key, value) in vm.filter(vm.properties)"> <!--class="{{isEmptyInstance(key)?'jsf-masterdetail-empty':''}}"-->
+            <uib-accordion-heading class="jsf-masterdetail-header">
+                <span class="jsf-masterdetail-property">{{key}}</span>
+                <i
+                   ng-class="{'glyphicon glyphicon-chevron-down': vm.attribute_open[$index],'glyphicon glyphicon-chevron-right': !vm.attribute_open[$index]}"
+                   ng-show="!vm.isEmptyInstance(vm.instance,key)" > <!--ng-click="vm.attribute_open[$index]=!vm.attribute_open[$index]"-->
+                </i>
+            </uib-accordion-heading>
+
+            <uib-accordion close-others="false" ng-if="!vm.isEmptyInstance(vm.instance,key)" ng-show="vm.attribute_open[$index]">
+                <uib-accordion-group
+                    is-open="vm.object_open[$index]"
+                    ng-repeat="child in vm.instance[key]"
+                    class="{{vm.isEmptyInstance(vm.instance,key)?'jsf-masterdetail-empty':''}}">
+                    <uib-accordion-heading>
+                        <span ng-click="vm.selectElement(child,value)"
+                              ng-class="{
+                                 'jsf-masterdetail-selected':selectedChild==child
+                              }">
+                              {{child.name!=undefined?child.name:child}}
+                        </span>
+                        <i
+                           ng-class="{'glyphicon glyphicon-chevron-down': vm.object_open[$index],'glyphicon glyphicon-chevron-right': !vm.object_open[$index]}"
+                           ng-if="vm.hasKeys(value.items)"></i> <!--ng-click="vm.object_open[$index]=!vm.object_open[$index]"-->
+                    </uib-accordion-heading>
+                    <div ng-show="vm.object_open[$index]"  ng-if="vm.hasKeys(value.items)" > <!--ng-include="'masterdetail-master-template.html'"-->
+                        <jsonforms-masterdetail-member child-schema="value.items" child-data="child"></jsonforms-masterdetail-member>
+                    </div>
+                </uib-accordion-group>
+            </uib-accordion>
+        </uib-accordion-group>
+    </uib-accordion>
+</div>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.layouts.masterdetail',
         ['jsonforms.renderers.layouts', 'jsonforms-bootstrap'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('masterdetail.html', require('./masterdetail.html'));
+        $templateCache.put('masterdetail.html', masterDetailTemplate);
     }])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('masterdetail-collection.html',
-            require('./masterdetail-collection.html'));
+        $templateCache.put('masterdetail-collection.html', masterDetailCollectionTemplate);
     }])
     .name;

src/bootstrap/layouts/vertical/vertical-directive.ts

@@ -1,7 +1,16 @@
+const verticalTemplate = `
+<jsonforms-layout>
+    <div class="jsf-vertical-layout">
+        <fieldset class="row">
+            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" uischema="child" class="col-sm-100"></jsonforms-inner>
+        </fieldset>
+    </div>
+</jsonforms-layout>`;
+
 export default angular
     .module('jsonforms-bootstrap.renderers.layouts.vertical',
         ['jsonforms.renderers.layouts', 'jsonforms-bootstrap'])
     .run(['$templateCache', $templateCache => {
-        $templateCache.put('vertical.html', require('./vertical.html'));
+        $templateCache.put('vertical.html', verticalTemplate);
     }])
     .name;