Improve flexbox and Angular flex-layout support.

Author: dschnelldavis

.angular-cli.json

@@ -7,9 +7,7 @@
     {
       "root": "src/demo",
       "outDir": "dist/demo",
-      "assets": [
-        "assets"
-      ],
+      "assets": [ "assets", "favicon.ico" ],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-json-schema-form",
-  "version": "0.4.0-alpha.14",
+  "version": "0.4.0-alpha.15",
   "author": {
     "name": "David Schnell-Davis",
     "email": "[email protected]"
@@ -48,8 +48,10 @@
     "postbuild": "rimraf out-ngc",
     "prepublish": "npm run build",
     "publish": "cd dist && npm publish",
-    "deploy:app": "ng build && firebase deploy",
+    "preng-build": "rimraf dist/*",
     "ng-build": "ng build",
+    "predeploy": "npm run ng-build",
+    "deploy": "firebase deploy",
     "old-build-demo": "tsc -p src/demo/",
     "old-build-demo:watch": "tsc -p src/demo/ -w",
     "old-prestart": "npm run build-demo",

src/demo/app/ace-editor.directive.ts

@@ -12,9 +12,7 @@ declare var ace: any;
   selector: '[ace-editor]'
 })
 export class AceEditorDirective {
-  _options: any = {
-    basePath: '/node_modules/brace',
-  };
+  _options: any = {};
   _highlightActiveLine: boolean = false;
   _showGutter: boolean = false;
   _readOnly: boolean = false;

src/demo/app/bootstrap-demo.component.html

@@ -3,8 +3,8 @@
     Angular JSON Schema Form — Demonstration Playground
   </md-toolbar>
   <div class="header-content">
-    An Angular <a href="http://json-schema.org/">JSON Schema</a> Form builder,
-    similar to, and mostly API compatible with,
+    An Angular <a href="http://json-schema.org/">JSON Schema</a> Form builder
+    for Angular 2 and above, similar to, and mostly API compatible with,
     <span class="avoidwrap">
       <!-- JSON Schema Form's Angular Schema Form -->
       <!-- https://github.com/json-schema-form -->
@@ -19,7 +19,7 @@
       <!-- http://github.com/joshfire/jsonform/wiki -->
       <a href="http://ulion.github.io/jsonform/playground/">JSON Form</a>.
     </span><br>
-    Choose an example, or create your own, and check out the generated form.<br><br>
+    Choose an example, or create your own, and check out the generated form.<br>
 
     <span class="menu-label">Current example:</span>
     <button md-raised-button

src/demo/app/demo.component.html

@@ -30,40 +30,38 @@
       }
     }
   },
-  "layout": [ {
-    "type": "flex",
-    "flex-direction": "column",
-    "items": [
-      { "type": "flex",
-        "flex-flow": "row wrap",
-        "items": [ "first_name", "last_name" ]
-      },
-      { "key": "address.street_1", "title": "Address", "placeholder": "Street" },
-      { "key": "address.street_2", "notitle": true },
-      { "type": "flex",
+  "layout": [
+    { "type": "flex",
+      "flex-flow": "row wrap",
+      "items": [ "first_name", "last_name" ]
+    },
+    { "key": "address.street_1", "title": "Address", "placeholder": "Street" },
+    { "key": "address.street_2", "notitle": true },
+    { "type": "div",
+      "display": "flex",
+      "flex-direction": "row",
+      "items": [
+        { "key": "address.city", "flex": "3 3 150px",
+          "notitle": true, "placeholder": "City" },
+        { "key": "address.state", "flex": "1 1 50px",
+          "notitle": true, "placeholder": "State" },
+        { "key": "address.zip_code", "flex": "2 2 100px",
+          "notitle": true, "placeholder": "Zip Code" }
+      ]
+    },
+    { "key": "phone_numbers",
+      "type": "array",
+      "items": [ {
+        "type": "div",
+        "displayFlex": true,
         "flex-direction": "row",
         "items": [
-          { "key": "address.city", "flex": "3 3 150px",
-            "notitle": true, "placeholder": "City" },
-          { "key": "address.state", "flex": "1 1 50px",
-            "notitle": true, "placeholder": "State" },
-          { "key": "address.zip_code", "flex": "2 2 100px",
-            "notitle": true, "placeholder": "Zip Code" }
+          { "key": "phone_numbers[].type", "flex": "1 1 50px", "notitle": true, "required": true },
+          { "key": "phone_numbers[].number", "flex": "4 4 200px", "notitle": true }
         ]
-      },
-      { "key": "phone_numbers",
-        "type": "array",
-        "items": [ {
-          "type": "flex",
-          "flex-direction": "row",
-          "items": [
-            { "key": "phone_numbers[].type", "flex": "1 1 50px", "notitle": true, "required": true },
-            { "key": "phone_numbers[].number", "flex": "4 4 200px", "notitle": true }
-          ]
-        } ]
-      }
-    ]
-  } ],
+      } ]
+    }
+  ],
   "data": {
     "first_name": "Jane",
     "last_name": "Doe",

src/demo/assets/example-schemas/ng2jsf-flex-layout.json

@@ -30,9 +30,7 @@ import { AddReferenceComponent }            from './src/widget-library/add-refer
 import { ButtonComponent }                  from './src/widget-library/button.component';
 import { CheckboxComponent }                from './src/widget-library/checkbox.component';
 import { CheckboxesComponent }              from './src/widget-library/checkboxes.component';
-import { FieldsetComponent }                from './src/widget-library/fieldset.component';
 import { FileComponent }                    from './src/widget-library/file.component';
-import { FlexComponent }                    from './src/widget-library/flex.component';
 import { HiddenComponent }                  from './src/widget-library/hidden.component';
 import { InputComponent }                   from './src/widget-library/input.component';
 import { MessageComponent }                 from './src/widget-library/message.component';
@@ -53,6 +51,8 @@ import { OrderableDirective }               from './src/widget-library/orderable
 import { WidgetLibraryModule }              from './src/widget-library/widget-library.module';
 import { WidgetLibraryService }             from './src/widget-library/widget-library.service';
 
+import { FlexLayoutRootComponent }          from './src/framework-library/material-design-framework/flex-layout-root.component';
+import { FlexLayoutSectionComponent }       from './src/framework-library/material-design-framework/flex-layout-section.component';
 import { MaterialAddReferenceComponent }    from './src/framework-library/material-design-framework/material-add-reference.component';
 import { MaterialButtonComponent }          from './src/framework-library/material-design-framework/material-button.component';
 import { MaterialButtonGroupComponent }     from './src/framework-library/material-design-framework/material-button-group.component';

src/lib/index.ts

@@ -7,6 +7,8 @@ import { NoFrameworkComponent }             from './no-framework.component';
 
 // Material Design Framework
 // https://github.com/angular/material2
+import { FlexLayoutRootComponent }          from './material-design-framework/flex-layout-root.component';
+import { FlexLayoutSectionComponent }       from './material-design-framework/flex-layout-section.component';
 import { MaterialAddReferenceComponent }    from './material-design-framework/material-add-reference.component';
 import { MaterialButtonComponent }          from './material-design-framework/material-button.component';
 import { MaterialButtonGroupComponent }     from './material-design-framework/material-button-group.component';
@@ -62,6 +64,8 @@ export class FrameworkLibraryService {
       framework: MaterialDesignFrameworkComponent,
       widgets: {
         '$ref':         MaterialAddReferenceComponent,
+        'root':         FlexLayoutRootComponent,
+        'section':      FlexLayoutSectionComponent,
         'number':       MaterialNumberComponent,
         'slider':       MaterialSliderComponent,
         'text':         MaterialInputComponent,