Merge branch 'master' into bugFix/title

Author: dschnelldavis

src/demo/app/demo.component.html

@@ -70,7 +70,7 @@
   fxLayout.lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">
 
   <mat-card fxFlex="0 0 calc(50% - 12px)">
-    <h4 class="defualt-cursor" (click)="toggleVisible('options')">
+    <h4 class="default-cursor" (click)="toggleVisible('options')">
       {{visible.options ? '▼' : '▶'}} Selected Framework and Options
     </h4>
     <div *ngIf="visible.options" fxLayout="column" [@expandSection]="true">
@@ -86,6 +86,19 @@ <h4 class="defualt-cursor" (click)="toggleVisible('options')">
           </mat-option>
         </mat-select>
       </mat-form-field>
+      <mat-form-field>
+        <mat-select
+          [(ngModel)]="selectedLanguage"
+          (change)="loadSelectedLanguage()"
+          name="language"
+          placeholder="Language">
+          <mat-option
+            *ngFor="let language of languageList"
+            [value]="language">
+            {{languages[language]}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
       <div class="check-row">
         <mat-checkbox color="primary" [(ngModel)]="jsonFormOptions.returnEmptyFields">
           Return empty fields?
@@ -112,7 +125,7 @@ <h4 class="defualt-cursor" (click)="toggleVisible('options')">
       </div>
     </div>
     <hr>
-    <h4 class="defualt-cursor" (click)="toggleVisible('schema')">
+    <h4 class="default-cursor" (click)="toggleVisible('schema')">
       {{visible.schema ? '▼' : '▶'}} Input JSON Schema and Form Layout
     </h4>
     <div *ngIf="visible.schema" [@expandSection]="true"
@@ -128,7 +141,7 @@ <h4 class="defualt-cursor" (click)="toggleVisible('schema')">
   </mat-card>
 
   <mat-card fxFlex="0 0 calc(50% - 12px)">
-    <h4 class="defualt-cursor" (click)="toggleVisible('form')">
+    <h4 class="default-cursor" (click)="toggleVisible('form')">
       {{visible.form ? '▼' : '▶'}} Generated Form
     </h4>
     <div *ngIf="visible.form" class="json-schema-form" [@expandSection]="true">
@@ -149,7 +162,7 @@ <h4 class="defualt-cursor" (click)="toggleVisible('form')">
 
     </div>
     <hr>
-    <h4 class="defualt-cursor" (click)="toggleVisible('output')">
+    <h4 class="default-cursor" (click)="toggleVisible('output')">
       {{visible.output ? '▼' : '▶'}} Form Output
     </h4>
     <div *ngIf="visible.output" fxLayout="column" [@expandSection]="true">

src/demo/app/demo.component.ts

@@ -27,6 +27,11 @@ import { JsonPointer } from '../../lib/src/shared';
 })
 export class DemoComponent implements OnInit {
   examples: any = Examples;
+  languageList: any = ['en', 'fr'];
+  languages: any = {
+    'en': 'English',
+    'fr': 'French',
+  };
   frameworkList: any = ['material-design', 'bootstrap-3', 'bootstrap-4', 'no-framework'];
   frameworks: any = {
     'material-design': 'Material Design',
@@ -39,6 +44,7 @@ export class DemoComponent implements OnInit {
   selectedExample = 'ng-jsf-flex-layout';
   selectedExampleName = 'Flexbox layout';
   selectedFramework = 'material-design';
+  selectedLanguage = 'en';
   visible: { [item: string]: boolean } = {
     options: true,
     schema: true,
@@ -98,6 +104,9 @@ export class DemoComponent implements OnInit {
         if (params['framework']) {
           this.selectedFramework = params['framework'];
         }
+        if (params['language']) {
+          this.selectedLanguage = params['language'];
+        }
         this.loadSelectedExample();
       }
     );
@@ -163,7 +172,8 @@ export class DemoComponent implements OnInit {
       this.router.navigateByUrl(
         '/?set=' + selectedSet +
         '&example=' + selectedExample +
-        '&framework=' + this.selectedFramework
+        '&framework=' + this.selectedFramework +
+        '&language=' + this.selectedLanguage
       );
       this.liveFormData = {};
       this.submittedFormData = null;
@@ -179,13 +189,14 @@ export class DemoComponent implements OnInit {
       });
   }
 
-  loadSelectedFramework(selectedFramework: string) {
-    this.router.navigateByUrl(
+  loadSelectedLanguage() {
+    console.log('loadSelectedLanguage');
+    window.location.href =
       '/?set=' + this.selectedSet +
       '&example=' + this.selectedExample +
-      '&framework=' + selectedFramework
-    );
-    this.generateForm(this.jsonFormSchema);
+      '&framework=' + this.selectedFramework +
+      '&language=' + this.selectedLanguage;
+   // this.generateForm(this.jsonFormSchema);
   }
 
   // Display the form entered by the user

src/demo/app/demo.module.ts

@@ -11,6 +11,8 @@ import {
 import { RouterModule } from '@angular/router';
 
 import { JsonSchemaFormModule } from '../../lib/src/json-schema-form.module';
+import { JsonSchemaFormIntl } from '../../lib/src/json-schema-form-intl';
+import { JsonSchemaFormIntlFr } from '../../lib/src/i18n/json-schema-form-intl-fr';
 // To include JsonSchemaFormModule after downloading from NPM, use this instead:
 // import { JsonSchemaFormModule } from 'angular2-json-schema-form';
 
@@ -19,14 +21,55 @@ import { DemoComponent } from './demo.component';
 import { DemoRootComponent } from './demo-root.component';
 
 import { routes } from './demo.routes';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Framework } from '../../lib/src/framework-library/framework';
+
+import { FrameworkNoFramework } from '../../lib/src/framework-library/framework.no-framework';
+
+import { Bootstrap3FrameworkModule } from '../../lib/src/framework-library/bootstrap-3-framework/bootstrap-3-framework.module';
+import { FrameworkBootstrap3 } from '../../lib/src/framework-library/framework.bootstrap3';
+
+import { Bootstrap4FrameworkModule } from '../../lib/src/framework-library/bootstrap-4-framework/bootstrap-4-framework.module';
+import { FrameworkBootstrap4 } from '../../lib/src/framework-library/framework.bootstrap4';
+
+import { MaterialDesignFrameworkModule } from '../../lib/src/framework-library/material-design-framework/material-design-framework.module';
+import { FrameworkMaterialDesign } from '../../lib/src/framework-library/framework.material-design';
+
+let language = '';
 
 @NgModule({
   declarations: [ AceEditorDirective, DemoComponent, DemoRootComponent ],
   imports: [
     BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule,
     HttpClientModule, MatButtonModule, MatCardModule, MatCheckboxModule,
     MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
-    RouterModule.forRoot(routes), JsonSchemaFormModule
+    RouterModule.forRoot(routes), JsonSchemaFormModule,
+    Bootstrap3FrameworkModule,
+    Bootstrap4FrameworkModule,
+    MaterialDesignFrameworkModule
+  ],
+  providers: [
+    {
+        provide: JsonSchemaFormIntl,  useFactory:
+           function(route: ActivatedRoute) {
+              route.queryParams.subscribe(
+                params => {
+                  language = params['language'];
+                });
+                switch (language) {
+                  case 'fr':
+                    return new JsonSchemaFormIntlFr();
+                  default:
+                    return new JsonSchemaFormIntl();
+                }
+           },
+           deps: [ActivatedRoute]
+    },
+    { provide: Framework, useClass: FrameworkNoFramework, multi: true },
+    { provide: Framework, useClass: FrameworkBootstrap3, multi: true },
+    { provide: Framework, useClass: FrameworkBootstrap4, multi: true },
+    { provide: Framework, useClass: FrameworkMaterialDesign, multi: true }
   ],
   bootstrap: [ DemoRootComponent ]
 })

src/lib/src/framework-library/bootstrap-3-framework/bootstrap-3-framework.component.ts

@@ -159,12 +159,14 @@ export class Bootstrap3FrameworkComponent implements OnInit, OnChanges {
 
       this.options.htmlClass =
         addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);
-      this.options.htmlClass =
-        this.layoutNode.type === 'array' ?
-          addClasses(this.options.htmlClass, 'list-group') :
-        this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
-          addClasses(this.options.htmlClass, 'list-group-item') :
-          addClasses(this.options.htmlClass, 'form-group');
+      if (this.layoutNode.type !== 'flex')  {
+          this.options.htmlClass =
+            this.layoutNode.type === 'array' ?
+              addClasses(this.options.htmlClass, 'list-group') :
+            this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
+              addClasses(this.options.htmlClass, 'list-group-item') :
+              addClasses(this.options.htmlClass, 'form-group');
+      }
       this.widgetOptions.htmlClass = '';
       this.options.labelHtmlClass =
         addClasses(this.options.labelHtmlClass, 'control-label');
@@ -287,6 +289,9 @@ export class Bootstrap3FrameworkComponent implements OnInit, OnChanges {
         this.widgetOptions.expandable = true;
         this.widgetOptions.title = 'Authentication settings';
         return null;
+      case 'fieldset':
+        this.widgetOptions.title = this.options.title;
+        return null;
       default:
         this.widgetOptions.title = null;
         return this.jsf.setItemTitle(this);

src/lib/src/framework-library/bootstrap-3-framework/bootstrap-3-framework.module.ts

@@ -1,18 +1,23 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { WidgetLibraryModule } from '../../widget-library/widget-library.module';
 
-import { WidgetLibraryService } from '../../widget-library/widget-library.service';
-import { FrameworkLibraryService } from '../framework-library.service';
+import { JsonSchemaFormService } from '../../json-schema-form.service';
 
 import { Bootstrap3FrameworkComponent } from './bootstrap-3-framework.component';
 
 @NgModule({
   imports:         [ CommonModule, WidgetLibraryModule ],
   declarations:    [ Bootstrap3FrameworkComponent ],
   exports:         [ Bootstrap3FrameworkComponent ],
-  entryComponents: [ Bootstrap3FrameworkComponent ],
-  providers:       [ WidgetLibraryService, FrameworkLibraryService ]
+  entryComponents: [ Bootstrap3FrameworkComponent ]
 })
-export class Bootstrap3FrameworkModule { }
+export class Bootstrap3FrameworkModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: Bootstrap3FrameworkModule,
+      providers: [ JsonSchemaFormService ]
+    }
+  }
+}

src/lib/src/framework-library/bootstrap-4-framework/bootstrap-4-framework.component.ts

@@ -287,6 +287,9 @@ export class Bootstrap4FrameworkComponent implements OnInit, OnChanges {
         this.widgetOptions.expandable = true;
         this.widgetOptions.title = 'Authentication settings';
         return null;
+      case 'fieldset':
+        this.widgetOptions.title = this.options.title;
+        return null;
       default:
         this.widgetOptions.title = null;
         return this.jsf.setItemTitle(this);

src/lib/src/framework-library/bootstrap-4-framework/bootstrap-4-framework.module.ts

@@ -1,18 +1,23 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { WidgetLibraryModule } from '../../widget-library/widget-library.module';
 
-import { WidgetLibraryService } from '../../widget-library/widget-library.service';
-import { FrameworkLibraryService } from '../framework-library.service';
+import { JsonSchemaFormService } from '../../json-schema-form.service';
 
 import { Bootstrap4FrameworkComponent } from './bootstrap-4-framework.component';
 
 @NgModule({
   imports:         [ CommonModule, WidgetLibraryModule ],
   declarations:    [ Bootstrap4FrameworkComponent ],
   exports:         [ Bootstrap4FrameworkComponent ],
-  entryComponents: [ Bootstrap4FrameworkComponent ],
-  providers:       [ WidgetLibraryService, FrameworkLibraryService ]
+  entryComponents: [ Bootstrap4FrameworkComponent ]
 })
-export class Bootstrap4FrameworkModule { }
+export class Bootstrap4FrameworkModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: Bootstrap4FrameworkModule,
+      providers: [ JsonSchemaFormService ]
+    }
+  }
+}

src/lib/src/framework-library/framework-library.module.ts

@@ -1,28 +1,27 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { WidgetLibraryModule } from '../widget-library/widget-library.module';
 import { WidgetLibraryService } from '../widget-library/widget-library.service';
+import { WidgetLibraryModule } from '../widget-library/widget-library.module';
 
 import { FrameworkLibraryService } from './framework-library.service';
-
-import { Bootstrap3FrameworkModule } from './bootstrap-3-framework/bootstrap-3-framework.module';
-import { MaterialDesignFrameworkModule } from './material-design-framework/material-design-framework.module';
-
 import { NoFrameworkComponent } from './no-framework.component';
-import { Bootstrap4FrameworkModule } from './bootstrap-4-framework/bootstrap-4-framework.module';
 
 @NgModule({
   imports:         [
     CommonModule, WidgetLibraryModule,
-    Bootstrap3FrameworkModule, MaterialDesignFrameworkModule, Bootstrap4FrameworkModule
   ],
   declarations:    [ NoFrameworkComponent ],
   exports:         [
     NoFrameworkComponent,
-    Bootstrap3FrameworkModule, MaterialDesignFrameworkModule, Bootstrap4FrameworkModule
   ],
-  entryComponents: [ NoFrameworkComponent ],
-  providers:       [ WidgetLibraryService, FrameworkLibraryService ]
+  entryComponents: [ NoFrameworkComponent ]
 })
-export class FrameworkLibraryModule { }
+export class FrameworkLibraryModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: FrameworkLibraryModule,
+      providers: [ WidgetLibraryService, FrameworkLibraryService ]
+    }
+  }
+}