diff --git a/.gitignore b/.gitignore index 700be20c..ccbaa75e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,28 +1,21 @@ +# Generated +compiled +dist +docs + # Node -node_modules/* -dist/* -docs/* +node_modules npm-debug.log -# TypeScript -*.js -!./index.js -!./systemjs.config.js -*.map -*.d.ts -!./typings/*.ts - -# JetBrains +# IDE .idea .project .settings .idea/* *.iml +*.swp -# Windows +# OS Thumbs.db Desktop.ini - -# Mac .DS_Store -**/.DS_Store diff --git a/.npmignore b/.npmignore index 19ecf34e..3428d2ec 100644 --- a/.npmignore +++ b/.npmignore @@ -1,28 +1,31 @@ +# Development +compiled +dist/playground +docs +src + +# TypeScript +tsconfig.json +tslint.json +typedoc.json +typings.json +typings +*.ts +!*.d.ts + # Node -node_modules/* -# dist/* -docs/* +node_modules npm-debug.log -# Include compiled TypeScript files in NPM bundle -# *.js -# !index.js -# !systemjs.config.js -# *.map -# *.d.ts -# !typings/*.ts - -# JetBrains +# IDE .idea .project .settings .idea/* *.iml +*.swp -# Windows +# OS Thumbs.db Desktop.ini - -# Mac .DS_Store -**/.DS_Store diff --git a/README.md b/README.md index 22dedd8a..63fe7a26 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Angular 2 JSON Schema Form +[![npm version](https://badge.fury.io/js/angular2-json-schema-form.svg)](https://www.npmjs.com/package/angular2-json-schema-form) [![MIT Licence](https://img.shields.io/github/license/dschnelldavis/angular2-json-schema-form.svg)](https://opensource.org/licenses/mit-license.php) + A [JSON Schema](http://json-schema.org) Form builder for Angular 2, similar to, and mostly API compatible with, * [JSON Schema Form](https://github.com/json-schema-form)'s [Angular Schema Form](http://schemaform.io) for [Angular 1](https://angularjs.org) ([examples](http://schemaform.io/examples/bootstrap-example.html)) @@ -12,7 +14,7 @@ Note: This is a personal proof-of-concept project, and is NOT currently affiliat ### To install from GitHub and play with the examples -The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which works, but is usually pretty ugly). +The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which is functional, but usually pretty ugly). To install both the library and the example playground, clone `https://github.com/dschnelldavis/angular2-json-schema-form.git` with your favorite git program, or enter the following in your terminal: @@ -30,42 +32,58 @@ All the source code is in the `/src` folder. Inside that folder, you will find t * `library` contains the Angular 2 JSON Schema Form library. * `playground` contains the example playground. * `playground/examples` contains the JSON Schema examples. -* `frameworks` contains the widget library (described below). -* `widgets` contains the framework library. +* `frameworks` contains the framework library (described below). +* `widgets` contains the widget library. If you want additional documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the newly generated `/docs` folder. ### To install from NPM and use in your own project -If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com) with: +If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com) by running the following from your terminal: ``` npm install angular2-json-schema-form -save ``` -Then add these two lines to your main application module: +Then add this line to your main application module: ```javascript -import { ReactiveFormsModule } from '@angular/forms'; import { JsonSchemaFormModule } from 'angular2-json-schema-form'; ``` -And finally, add `'ReactiveFormsModule'` and `'JsonSchemaFormModule'` to the 'imports' array in your @NgModule declaration. +And finally, add `JsonSchemaFormModule` to the `imports` array in your @NgModule declaration. + +Your final app.module.ts should look something like this: + +```javascript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { JsonSchemaFormModule } from 'angular2-json-schema-form'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule, JsonSchemaFormModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } +``` Also, if you use SystemJS, you will also need to make the following changes to your systemjs.config.js file. -Add three lines to the 'map' section: +Add these three lines to the 'map' section: ```javascript 'angular2-json-schema-form': 'npm:angular2-json-schema-form', -'ajv': 'npm:ajv/dist/ajv.min.js', -'lodash': 'npm:lodash/lodash.min.js', +'ajv': 'npm:ajv/dist/ajv.min.js', +'lodash': 'npm:lodash/lodash.min.js', ``` -And add one line to the 'packages' section: +And add this line to the 'packages' section: ```javascript -'angular2-json-schema-form': { main: './index.js', defaultExtension: 'js' }, +'angular2-json-schema-form': { main: './dist/index.js', defaultExtension: 'js' }, ``` - (For a complete example of how to install and use the library, clone the GitHub repository and look at how the library is imported into the example playground.) ## Using Angular 2 JSON Schema Form @@ -81,17 +99,17 @@ For basic use, after loading the JsonSchemaFormModule as described above, to add ``` -Where the 'schema' input is a valid JSON schema object (either v3 or v4), and the 'onSubmit' output is a function that will be called when the form is submitted, with the results of the form as a JSON object. +Where the `schema` input is a valid JSON schema object (either v3 or v4), and the `onSubmit` output is a function that will be called when the form is submitted, with the results of the form as a JSON object. ### Advanced use For more advanced cases, you may also provide three additional inputs: -* 'layout' with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout) -* 'data' to populate the form with defaults or previously submitted values, and -* 'options' to set any global options for the form. +* `layout` with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout) +* `data` to populate the form with defaults or previously submitted values, and +* `options` to set any global options for the form. -If you want more detailed output, you may provide additional functions for 'onChanges' to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean 'isValid' or the detailed 'validationErrors' outputs. +If you want more detailed output, you may provide additional functions for `onChanges` to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean `isValid` or the detailed `validationErrors` outputs. Here is an example: @@ -108,14 +126,14 @@ Here is an example: ``` -Alternately, you may also combine all your inputs into one compound object and include it as a 'form' input, like so: +Alternately, you may also combine all your inputs into one compound object and include it as a `form` input, like so: ```javascript let yourCompoundInputObject = { - schema: {...}, // required - layout: [...], // optional - data: {...}, // optional - options: {...} // optional + schema: {...}, // required + layout: [...], // optional + data: {...}, // optional + options: {...} // optional } ``` @@ -167,7 +185,7 @@ import { WidgetLibraryService } from 'angular2-json-schema-form'; import { YourInputWidgetComponent } from './your-input-widget.component'; import { YourCustomWidgetComponent } from './your-custom-widget.component'; ... -constructor(private widgetLibrary: WidgetLibraryService) {} +constructor(private widgetLibrary: WidgetLibraryService) { } ... // Replace existing 'input' widget: widgetLibrary.registerWidget('input', YourInputWidgetComponent); @@ -184,26 +202,26 @@ To change the active framework, load the `FrameworkLibraryService` and call `set ```javascript import { FrameworkLibraryService } from 'angular2-json-schema-form'; ... -constructor(private frameworkLibrary: FrameworkLibraryService) {} +constructor(private frameworkLibrary: FrameworkLibraryService) { } ... let yourCustomFramework = { framework: YourFrameworkComponent, // required - widgets: { 'your-widget-name': YourWidgetComponent }, // optional - stylesheets: [ '//url-to-your-external-style-sheet' ], // optional - scripts: [ '//url-to-your-external-script' ] // optional + widgets: { 'your-widget-name': YourWidgetComponent }, // optional + stylesheets: [ '//url-to-your-external-style-sheet' ], // optional + scripts: [ '//url-to-your-external-script' ] // optional } frameworkLibrary.setFramework(yourCustomFramework); ``` -The value of the required 'framework' key is an Angular 2 component which will be called to format each widget before it is displayed. The optional 'widgets' object contains any custom widgets which will override or supplement the built-in widgets, and the 'stylesheets' and 'scripts' arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load. +The value of the required `framework` key is an Angular 2 component which will be called to format each widget before it is displayed. The optional `widgets` object contains any custom widgets which will override or supplement the built-in widgets, and the `stylesheets` and `scripts` arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load. -The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library (which must be loaded separately in the Angular 2 application module) to replace most of the default form control widgets with custom widgets from that library. +The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library to replace most of the default form control widgets with custom widgets from that library. ## Contributions and future development I wrote this library because I needed a JSON Schema Form builder to use in a large Angular 2 project I am currently working on. Though I found excellent libraries for Angular 1, React, and jQuery (all linked above), I could not find anything similar for Angular 2—so I wrote this library to fill that gap. -The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like 'oneOf', 'allOf', and '$ref' links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all. +The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like `oneOf`, `allOf`, and `$ref` links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all. So if you find this library useful, I encourage you to fork it and send back pull requests for any improvements you make. (I would _love_ some tests...) You are also welcome to submit bug reports, however, as I am just a single busy developer, I can't guarantee how long it might take to fix any individual bugs. So if you want a change or fix to be implemented quickly, your best bet is to do it yourself and send a pull request. diff --git a/index.ts b/index.ts deleted file mode 100644 index 603b3f48..00000000 --- a/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { WidgetLibraryService } from './src/widgets/widget-library.service'; -export { FrameworkLibraryService } from './src/frameworks/framework-library.service'; -export { JsonSchemaFormComponent } from './src/library/json-schema-form.component'; -export { JsonSchemaFormService } from './src/library/json-schema-form.service'; -export { JsonSchemaFormModule } from './src/library/json-schema-form.module'; diff --git a/package.json b/package.json index d7840e0c..97b0b7b1 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,17 @@ { "name": "angular2-json-schema-form", + "version": "0.3.0-alpha.1", + "author": { + "name": "dschnelldavis", + "email": "dschnelldavis@gmail.com" + }, "description": "Angular 2 JSON Schema Form builder", - "author": "David Schnell-Davis", "keywords": [ "Angular 2", "JSON Schema", "Form builder" ], "license": "MIT", - "version": "0.2.0-alpha.1", - "scripts": { - "start": "npm run cleandist && npm run syncassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ", - "lint": "tslint src/**/*.ts", - "test": "tsc && karma start", - "postinstall": "typings install", - "prepublish": "tsc", - "tsc": "tsc", - "typings": "typings", - "docs": "typedoc --options typedoc.json index.ts", - "cleandist": "rm -rf dist/*", - "syncassets": "rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' ./src/ ./dist/src/", - "watchassets": "onchange 'src/**/*.css' 'src/**/*.html' 'src/**/*.json' -e 'dist/src/*' -v -- rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' --delete ./src/ ./dist/src/" - }, "repository": { "type": "git", "url": "https://github.com/dschnelldavis/angular2-json-schema-form" @@ -29,39 +19,52 @@ "bugs": { "url": "https://github.com/dschnelldavis/angular2-json-schema-form/issues" }, - "main": "./dist/src/library/json-schema-form.module.js", - "types": "./dist/src/library/json-schema-form.module.d.ts", + "files": [ + "dist/" + ], + "main": "dist/library/json-schema-form.module.js", + "typings": "dist/library/json-schema-form.module.d.ts", + "scripts": { + "clean:dist": "rimraf compiled && rimraf dist", + "clean:all": "npm run clean:dist && rimraf node_modules && npm cache clean", + "prepublish": "npm run clean:dist && ./node_modules/.bin/ngc && rimraf compiled && rimraf dist/playground", + "lint": "tslint src/**/*.ts", + "test": "tsc && karma start", + "ngc": "./node_modules/.bin/ngc", + "tsc": "tsc", + "typings": "typings", + "docs": "typedoc --options typedoc.json src/index.ts", + "start": "npm run clean:dist && npm run syncassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ", + "syncassets": "rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' ./src/ ./dist/", + "watchassets": "onchange 'src/**/*.css' 'src/**/*.html' 'src/**/*.json' -e 'dist/*' -v -- rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' --delete ./src/ ./dist/" + }, "dependencies": { - "@angular/common": "~2.2.4", - "@angular/compiler": "~2.2.4", - "@angular/core": "~2.2.4", - "@angular/forms": "~2.2.4", - "@angular/http": "~2.2.4", - "@angular/material": "^2.0.0-alpha.11-3", - "@angular/platform-browser": "~2.2.4", - "@angular/platform-browser-dynamic": "~2.2.4", - "@angular/router": "~3.2.4", - "ajv": "^4.7.7", - "bootstrap": "^3.3.7", - "brace": "^0.8.0", - "buffer": "^5.0.0", - "core-js": "^2.4.1", - "lodash": "^4.17.2", - "ng2-bootstrap": "^1.1.16", - "reflect-metadata": "^0.1.8", - "rxjs": "5.0.0-beta.12", - "systemjs": "0.19.38", - "zone.js": "~0.6.25" + "@angular/common": "^2.0.0", + "@angular/compiler": "^2.0.0", + "@angular/core": "^2.0.0", + "@angular/forms": "^2.0.0", + "@angular/material": "2.0.0-alpha.11-3", + "@angular/platform-browser": "^2.0.0", + "@angular/platform-browser-dynamic": "^2.0.0", + "ajv": "^4.7.0", + "lodash": "^4.17.0" }, "devDependencies": { - "@types/ace": "0.0.32", - "@types/ajv": "0.0.3", + "@angular/compiler-cli": "^2.0.0", + "@angular/http": "^2.0.0", + "@angular/platform-server": "^2.0.0", + "@angular/router": "^3.0.0", + "@types/ace": "^0.0.32", + "@types/ajv": "^0.0.5", "@types/jasmine": "^2.5.38", "@types/lodash": "^4.14.42", "@types/node": "^6.0.51", + "brace": "^0.9.1", + "buffer": "^5.0.0", "canonical-path": "0.0.2", "codelyzer": "2.0.0-beta.3", "concurrently": "^3.0.0", + "core-js": "^2.4.1", "http-server": "^0.9.0", "jasmine-core": "~2.5.2", "karma": "^1.3.0", @@ -72,11 +75,15 @@ "karma-jasmine-html-reporter": "^0.2.2", "lite-server": "^2.2.2", "onchange": "^3.2.0", - "protractor": "^3.3.0", + "protractor": "^4.0.13", + "reflect-metadata": "^0.1.8", "rimraf": "^2.5.4", - "tslint": "^4.0.2", + "rxjs": "5.0.0-rc.4", + "systemjs": "^0.19.41", + "tslint": "~4.0.2", "typedoc": "^0.5.1", - "typescript": "^2.1.4", - "typings": "^1.3.1" + "typescript": "~2.0.10", + "typings": "^1.3.1", + "zone.js": "~0.7.2" } } diff --git a/src/frameworks/bootstrap-3.component.css b/src/frameworks/bootstrap-3.component.css deleted file mode 100755 index b8eaecfc..00000000 --- a/src/frameworks/bootstrap-3.component.css +++ /dev/null @@ -1,21 +0,0 @@ -:host /deep/ .list-group-item .form-control-feedback { - top: 40; -} -:host /deep/ .checkbox, -:host /deep/ .radio { - margin-top: 0; - margin-bottom: 0; -} -:host /deep/ .checkbox-inline, -:host /deep/ .checkbox-inline + .checkbox-inline, -:host /deep/ .checkbox-inline + .radio-inline, -:host /deep/ .radio-inline, -:host /deep/ .radio-inline + .radio-inline, -:host /deep/ .radio-inline + .checkbox-inline { - margin-left: 0; - margin-right: 10px; -} -:host /deep/ .checkbox-inline:last-child, -:host /deep/ .radio-inline:last-child { - margin-right: 0; -} diff --git a/src/frameworks/bootstrap-3.component.html b/src/frameworks/bootstrap-3.component.html deleted file mode 100755 index 577eba81..00000000 --- a/src/frameworks/bootstrap-3.component.html +++ /dev/null @@ -1,82 +0,0 @@ -
- - -
-

-

-

-

-
- - - * -

- * = required fields -

-
- - - - - -
- - -
-

-

-

-

-
-
- -
debug: 
{{debugOutput}}
diff --git a/src/frameworks/bootstrap-3.component.ts b/src/frameworks/bootstrap-3.component.ts index 0ccec91f..5db17099 100755 --- a/src/frameworks/bootstrap-3.component.ts +++ b/src/frameworks/bootstrap-3.component.ts @@ -14,10 +14,104 @@ import { * */ @Component({ - moduleId: module.id, selector: 'bootstrap-3-framework', - templateUrl: './bootstrap-3.component.html', - styleUrls: ['./bootstrap-3.component.css'], + template: ` +
+ + +
+

+

+

+

+
+ + + * +

+ * = required fields +

+
+ + + + + +
+ + +
+

+

+

+

+
+
+ +
debug: 
{{debugOutput}}
+ `, + styleUrls: [` + :host /deep/ .list-group-item .form-control-feedback { top: 40; } + :host /deep/ .checkbox, + :host /deep/ .radio { margin-top: 0; margin-bottom: 0; } + :host /deep/ .checkbox-inline, + :host /deep/ .checkbox-inline + .checkbox-inline, + :host /deep/ .checkbox-inline + .radio-inline, + :host /deep/ .radio-inline, + :host /deep/ .radio-inline + .radio-inline, + :host /deep/ .radio-inline + .checkbox-inline { margin-left: 0; margin-right: 10px; } + :host /deep/ .checkbox-inline:last-child, + :host /deep/ .radio-inline:last-child { margin-right: 0; } + `], }) export class Bootstrap3Component implements OnInit, OnChanges { private controlInitialized: boolean = false; @@ -34,7 +128,7 @@ export class Bootstrap3Component implements OnInit, OnChanges { constructor( public changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.initializeControl(); @@ -49,7 +143,7 @@ export class Bootstrap3Component implements OnInit, OnChanges { if (this.layoutNode) { this.options = _.cloneDeep(this.layoutNode.options); this.widgetLayoutNode = Object.assign( - {}, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) } + { }, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) } ); this.widgetOptions = this.widgetLayoutNode.options; this.layoutPointer = this.jsf.getLayoutPointer(this); diff --git a/src/frameworks/bootstrap-4.component.ts b/src/frameworks/bootstrap-4.component.ts index 044b7f49..81e4231e 100755 --- a/src/frameworks/bootstrap-4.component.ts +++ b/src/frameworks/bootstrap-4.component.ts @@ -20,9 +20,9 @@ export class Bootstrap4Component implements OnInit, OnChanges { constructor( private changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } - ngOnInit() {} + ngOnInit() { } - ngOnChanges() {} + ngOnChanges() { } } diff --git a/src/frameworks/foundation-6.component.ts b/src/frameworks/foundation-6.component.ts index 73044df7..791900a0 100755 --- a/src/frameworks/foundation-6.component.ts +++ b/src/frameworks/foundation-6.component.ts @@ -20,9 +20,9 @@ export class Foundation6Component implements OnInit, OnChanges { constructor( private changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } - ngOnInit() {} + ngOnInit() { } - ngOnChanges() {} + ngOnChanges() { } } diff --git a/src/frameworks/framework-library.service.ts b/src/frameworks/framework-library.service.ts index 0a1faf47..c0f05f60 100755 --- a/src/frameworks/framework-library.service.ts +++ b/src/frameworks/framework-library.service.ts @@ -118,18 +118,35 @@ export class FrameworkLibraryService { } private loadFrameworkExternalAssets(framework: Framework): boolean { - for (let node of [...(this.stylesheets || []), ...(this.scripts || [])]) { + for (let node of [...(this.scripts || []), ...(this.stylesheets || [])]) { node.parentNode.removeChild(node); } + this.scripts = []; this.stylesheets = []; + if (framework.hasOwnProperty('scripts')) { + for (let script of framework.scripts) { + let newScript: HTMLScriptElement = document.createElement('script'); + if (script.slice(0, 1) === '/' || script.slice(0, 2) === './' + || script.slice(0, 4) === 'http' + ) { // Attach URL to remote javascript + newScript.src = script; + } else { // Attach content of given javascript + newScript.innerHTML = script; + } + this.scripts.push(newScript); + document.head.appendChild(newScript); + } + } if (framework.hasOwnProperty('stylesheets')) { for (let stylesheet of framework.stylesheets) { let newStylesheet: HTMLStyleElement|HTMLLinkElement; - if (stylesheet.slice(0, 1) === '/' || stylesheet.slice(0, 4) === 'http') { + if (stylesheet.slice(0, 1) === '/' || stylesheet.slice(0, 2) === './' + || stylesheet.slice(0, 4) === 'http' + ) { // Attach URL to remote stylesheet newStylesheet = document.createElement('link'); (newStylesheet).rel = 'stylesheet'; (newStylesheet).href = stylesheet; - } else { + } else { // Attach content of given stylesheet newStylesheet = document.createElement('style'); newStylesheet.innerHTML = stylesheet; } @@ -137,21 +154,7 @@ export class FrameworkLibraryService { document.head.appendChild(newStylesheet); } } - this.scripts = []; - if (framework.hasOwnProperty('scripts')) { - for (let script of framework.scripts) { - let newScript: HTMLScriptElement = document.createElement('script'); - if (script.slice(0, 2) === '//' || script.slice(0, 4) === 'http') { - newScript.src = script; - } else { - newScript.innerHTML = script; - } - this.scripts.push(newScript); - document.head.appendChild(newScript); - } - } - if (framework.stylesheets || framework.scripts) { return true; } - return false; + return !!(framework.stylesheets || framework.scripts); } public setFramework(framework?: string|Framework): boolean { @@ -182,7 +185,7 @@ export class FrameworkLibraryService { } public getFrameworkWidgets(): any { - return this.activeFramework.widgets || {}; + return this.activeFramework.widgets || { }; } public getFrameworkStylesheets(): string[] { diff --git a/src/frameworks/material-design/material-add-reference.component.ts b/src/frameworks/material-design/material-add-reference.component.ts index 201de7f7..bf4118aa 100755 --- a/src/frameworks/material-design/material-add-reference.component.ts +++ b/src/frameworks/material-design/material-add-reference.component.ts @@ -27,7 +27,7 @@ export class MaterialAddReferenceComponent implements OnInit, OnChanges { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-button.component.ts b/src/frameworks/material-design/material-button.component.ts index 5dff5407..25a139f3 100755 --- a/src/frameworks/material-design/material-button.component.ts +++ b/src/frameworks/material-design/material-button.component.ts @@ -36,7 +36,7 @@ export class MaterialButtonComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-card.component.ts b/src/frameworks/material-design/material-card.component.ts index d02f04b2..f9315f79 100755 --- a/src/frameworks/material-design/material-card.component.ts +++ b/src/frameworks/material-design/material-card.component.ts @@ -40,7 +40,7 @@ export class MaterialCardComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-checkbox.component.ts b/src/frameworks/material-design/material-checkbox.component.ts index c5b7bac3..07e51c04 100755 --- a/src/frameworks/material-design/material-checkbox.component.ts +++ b/src/frameworks/material-design/material-checkbox.component.ts @@ -42,7 +42,7 @@ export class MaterialCheckboxComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-checkboxes.component.ts b/src/frameworks/material-design/material-checkboxes.component.ts index a2d9d5ba..0001dfeb 100755 --- a/src/frameworks/material-design/material-checkboxes.component.ts +++ b/src/frameworks/material-design/material-checkboxes.component.ts @@ -76,7 +76,7 @@ export class MaterialCheckboxesComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-design.component.css b/src/frameworks/material-design/material-design.component.css deleted file mode 100755 index e69de29b..00000000 diff --git a/src/frameworks/material-design/material-design.component.html b/src/frameworks/material-design/material-design.component.html deleted file mode 100755 index 600b3945..00000000 --- a/src/frameworks/material-design/material-design.component.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/src/frameworks/material-design/material-design.component.ts b/src/frameworks/material-design/material-design.component.ts index 3260c4aa..0360deb4 100755 --- a/src/frameworks/material-design/material-design.component.ts +++ b/src/frameworks/material-design/material-design.component.ts @@ -8,10 +8,13 @@ import { JsonSchemaFormService } from '../../library/json-schema-form.service'; import { parseText, toTitleCase } from '../../library/utilities/index'; @Component({ - moduleId: module.id, selector: 'material-design-framework', - templateUrl: './material-design.component.html', - styleUrls: ['./material-design.component.css'], + template: ` + + ` }) export class MaterialDesignComponent implements OnInit, OnChanges { private controlInitialized: boolean = false; @@ -29,7 +32,7 @@ export class MaterialDesignComponent implements OnInit, OnChanges { constructor( private changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.initializeControl(); @@ -43,7 +46,7 @@ export class MaterialDesignComponent implements OnInit, OnChanges { if (this.layoutNode) { this.options = _.cloneDeep(this.layoutNode.options); this.widgetLayoutNode = Object.assign( - {}, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) } + { }, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) } ); this.widgetOptions = this.widgetLayoutNode.options; this.layoutPointer = this.jsf.getLayoutPointer(this); diff --git a/src/frameworks/material-design/material-file.component.ts b/src/frameworks/material-design/material-file.component.ts index 585635b9..b68bb55e 100755 --- a/src/frameworks/material-design/material-file.component.ts +++ b/src/frameworks/material-design/material-file.component.ts @@ -20,7 +20,7 @@ export class MaterialFileComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-input.component.ts b/src/frameworks/material-design/material-input.component.ts index c644ecfb..b9927df0 100755 --- a/src/frameworks/material-design/material-input.component.ts +++ b/src/frameworks/material-design/material-input.component.ts @@ -50,7 +50,7 @@ export class MaterialInputComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-number.component.ts b/src/frameworks/material-design/material-number.component.ts index 697ce454..90d0b0cb 100755 --- a/src/frameworks/material-design/material-number.component.ts +++ b/src/frameworks/material-design/material-number.component.ts @@ -59,7 +59,7 @@ export class MaterialNumberComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-radios.component.ts b/src/frameworks/material-design/material-radios.component.ts index 074517e8..555bf089 100755 --- a/src/frameworks/material-design/material-radios.component.ts +++ b/src/frameworks/material-design/material-radios.component.ts @@ -81,7 +81,7 @@ export class MaterialRadiosComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-select.component.ts b/src/frameworks/material-design/material-select.component.ts index 20c38379..18e30b5c 100755 --- a/src/frameworks/material-design/material-select.component.ts +++ b/src/frameworks/material-design/material-select.component.ts @@ -43,7 +43,7 @@ export class MaterialSelectComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-tabs.component.ts b/src/frameworks/material-design/material-tabs.component.ts index b70bb392..05eaf296 100755 --- a/src/frameworks/material-design/material-tabs.component.ts +++ b/src/frameworks/material-design/material-tabs.component.ts @@ -43,7 +43,7 @@ export class MaterialTabsComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/material-design/material-textarea.component.ts b/src/frameworks/material-design/material-textarea.component.ts index 1b528ae3..79aacf39 100755 --- a/src/frameworks/material-design/material-textarea.component.ts +++ b/src/frameworks/material-design/material-textarea.component.ts @@ -67,7 +67,7 @@ export class MaterialTextareaComponent implements OnInit { constructor( private jsf: JsonSchemaFormService, - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/frameworks/no-framework.component.ts b/src/frameworks/no-framework.component.ts index fd015624..534aadad 100755 --- a/src/frameworks/no-framework.component.ts +++ b/src/frameworks/no-framework.component.ts @@ -20,9 +20,9 @@ export class NoFrameworkComponent implements OnInit, OnChanges { constructor( private changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } - ngOnInit() {} + ngOnInit() { } - ngOnChanges() {} + ngOnChanges() { } } diff --git a/src/frameworks/semantic-ui.component.ts b/src/frameworks/semantic-ui.component.ts index faa5ae61..cd74b660 100755 --- a/src/frameworks/semantic-ui.component.ts +++ b/src/frameworks/semantic-ui.component.ts @@ -20,9 +20,9 @@ export class SemanticUIComponent implements OnInit, OnChanges { constructor( private changeDetector: ChangeDetectorRef, private jsf: JsonSchemaFormService - ) {} + ) { } - ngOnInit() {} + ngOnInit() { } - ngOnChanges() {} + ngOnChanges() { } } diff --git a/src/index.ts b/src/index.ts index a292c37d..5f189acb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1 @@ -export { JsonSchemaFormComponent } from './json-schema-form.component'; -export { JsonSchemaFormService } from './json-schema-form.service'; -export { JsonSchemaFormModule } from './json-schema-form.module'; -export { FrameworkLibraryService } from './frameworks/framework-library.service'; -export { WidgetLibraryService } from './widgets/widget-library.service'; -export { PlaygroundModule } from './playground/playground.module'; +export * from './library/json-schema-form.module'; diff --git a/src/library/json-schema-form.component.ts b/src/library/json-schema-form.component.ts index f9e368e6..0dc7a8f6 100755 --- a/src/library/json-schema-form.component.ts +++ b/src/library/json-schema-form.component.ts @@ -47,11 +47,10 @@ import { * - Angular 2 (obviously) https://angular.io * - lodash, JavaScript utility library https://github.com/lodash/lodash * - ajv, Another JSON Schema validator https://github.com/epoberezkin/ajv + * In addition, the testing playground also depends on: * - brace, Browserified Ace editor http://thlorenz.github.io/brace - * note: brace is needed by the testing playground only, not the library itself */ @Component({ - moduleId: module.id, selector: 'json-schema-form', template: `
@@ -87,7 +86,7 @@ export class JsonSchemaFormComponent implements DoCheck, OnChanges, OnInit { private frameworkLibrary: FrameworkLibraryService, private widgetLibrary: WidgetLibraryService, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.initializeForm(); @@ -120,13 +119,13 @@ export class JsonSchemaFormComponent implements DoCheck, OnChanges, OnInit { this.form || this.JSONSchema || this.UISchema ) { this.formInitialized = false; - this.jsf.schema = {}; + this.jsf.schema = { }; this.jsf.layout = []; - this.jsf.initialValues = {}; + this.jsf.initialValues = { }; this.jsf.dataMap = new Map(); - this.jsf.schemaRefLibrary = {}; - this.jsf.layoutRefLibrary = {}; - this.jsf.formGroupTemplate = {}; + this.jsf.schemaRefLibrary = { }; + this.jsf.layoutRefLibrary = { }; + this.jsf.formGroupTemplate = { }; this.jsf.formGroup = null; this.jsf.framework = this.frameworkLibrary.getFramework(); if (isObject(this.options)) { diff --git a/src/library/json-schema-form.module.ts b/src/library/json-schema-form.module.ts index 51f7f6d4..bd652bb4 100755 --- a/src/library/json-schema-form.module.ts +++ b/src/library/json-schema-form.module.ts @@ -1,4 +1,4 @@ -import { enableProdMode, NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MaterialModule } from '@angular/material'; @@ -17,7 +17,13 @@ import { JsonSchemaFormService } from './json-schema-form.service'; import 'ajv'; import 'lodash'; -enableProdMode(); +export { + WidgetLibraryService, + FrameworkLibraryService, + JsonSchemaFormService, + JsonSchemaFormComponent +}; + @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, MaterialModule.forRoot() @@ -36,11 +42,5 @@ enableProdMode(); FrameworkLibraryService, WidgetLibraryService, JsonSchemaFormService ], }) -export class JsonSchemaFormModule { - static forRoot(): ModuleWithProviders { return { - ngModule: JsonSchemaFormModule, - providers: [ - FrameworkLibraryService, WidgetLibraryService, JsonSchemaFormService - ] - }; } -} +export class JsonSchemaFormModule { } +export default JsonSchemaFormModule; diff --git a/src/library/json-schema-form.service.ts b/src/library/json-schema-form.service.ts index 6b32418d..75ab1802 100755 --- a/src/library/json-schema-form.service.ts +++ b/src/library/json-schema-form.service.ts @@ -35,10 +35,10 @@ export class JsonSchemaFormService { }, }; - public initialValues: any = {}; // The initial data model (e.g. previously submitted data) - public schema: any = {}; // The internal JSON Schema + public initialValues: any = { }; // The initial data model (e.g. previously submitted data) + public schema: any = { }; // The internal JSON Schema public layout: any[] = []; // The internal Form layout - public formGroupTemplate: any = {}; // The template used to create formGroup + public formGroupTemplate: any = { }; // The template used to create formGroup public formGroup: any = null; // The Angular 2 formGroup, which powers the reactive form public framework: any = null; // The active framework component @@ -47,11 +47,11 @@ export class JsonSchemaFormService { public dataMap: Map = new Map(); // Maps paths in data model to schema and formGroup paths public dataCircularRefMap: Map = new Map(); // Maps circular reference points in data model public schemaCircularRefMap: Map = new Map(); // Maps circular reference points in schema - public layoutRefLibrary: any = {}; // Library of layout nodes for adding to form - public schemaRefLibrary: any = {}; // Library of schemas for resolving schema $refs - public templateRefLibrary: any = {}; // Library of formGroup templates for adding to form + public layoutRefLibrary: any = { }; // Library of layout nodes for adding to form + public schemaRefLibrary: any = { }; // Library of schemas for resolving schema $refs + public templateRefLibrary: any = { }; // Library of formGroup templates for adding to form - constructor() {} + constructor() { } public initializeControl(ctx): boolean { ctx.formControl = this.getControl(ctx); diff --git a/src/library/utilities/convert-json-schema.functions.ts b/src/library/utilities/convert-json-schema.functions.ts index 584d08c4..0bc05d16 100755 --- a/src/library/utilities/convert-json-schema.functions.ts +++ b/src/library/utilities/convert-json-schema.functions.ts @@ -28,7 +28,7 @@ export function convertJsonSchema3to4(schema: any): any { }; if (typeof schema !== 'object') return schema; - let newSchema = isArray(schema) ? [].concat(schema) : Object.assign({}, schema); + let newSchema = isArray(schema) ? [].concat(schema) : Object.assign({ }, schema); let converted: boolean = false; // convert multiple types to anyOf diff --git a/src/library/utilities/form-group.functions.ts b/src/library/utilities/form-group.functions.ts index 7820b4d7..8226a4f0 100755 --- a/src/library/utilities/form-group.functions.ts +++ b/src/library/utilities/form-group.functions.ts @@ -88,7 +88,7 @@ export function buildFormGroupTemplate( let validators: any = getControlValidators(schema); switch (controlType) { case 'FormGroup': - controls = {}; + controls = { }; if (jsf.globalOptions.setSchemaDefaults) { useValues = mergeValues( JsonPointer.get(schema, '/properties/default'), useValues); @@ -256,7 +256,7 @@ export function buildFormGroup(template: any): AbstractControl { if (hasOwn(template, 'controlType')) { switch (template.controlType) { case 'FormGroup': - let groupControls: { [key: string]: AbstractControl } = {}; + let groupControls: { [key: string]: AbstractControl } = { }; forEach(template.controls, (controls, key) => { let newControl: AbstractControl = buildFormGroup(controls); if (newControl) groupControls[key] = newControl; @@ -290,7 +290,7 @@ export function mergeValues(...valuesToMerge) { if (isArray(currentValue)) { mergedValues = [].concat(currentValue); } else if (isObject(currentValue)) { - mergedValues = Object.assign({}, currentValue); + mergedValues = Object.assign({ }, currentValue); } } else if (typeof currentValue !== 'object') { mergedValues = currentValue; @@ -364,7 +364,7 @@ export function formatFormData( formData: any, dataMap: Map, circularRefMap: Map, arrayMap: Map, fixErrors: boolean = false ): any { - let formattedData = {}; + let formattedData = { }; JsonPointer.forEachDeep(formData, (value, dataPointer) => { if (typeof value !== 'object') { let genericPointer: string = dataPointer; diff --git a/src/library/utilities/json-schema.functions.ts b/src/library/utilities/json-schema.functions.ts index fe6fc244..8649560a 100755 --- a/src/library/utilities/json-schema.functions.ts +++ b/src/library/utilities/json-schema.functions.ts @@ -35,7 +35,7 @@ import { JsonValidators } from './json.validators'; */ export function buildSchemaFromLayout(layout: any[]): any { return; - // let newSchema: any = {}; + // let newSchema: any = { }; // const walkLayout = (layoutItems: any[], callback: Function): any[] => { // let returnArray: any[] = []; // for (let layoutItem of layoutItems) { @@ -70,24 +70,17 @@ export function buildSchemaFromLayout(layout: any[]): any { export function buildSchemaFromData( data: any, isRoot: boolean = true ): any { - let newSchema: any = {}; + let newSchema: any = { }; if (isRoot) newSchema.$schema = 'http://json-schema.org/draft-04/schema#'; const getSafeType = (value: any): string => { - let safeType = getType(value); - if (safeType === 'integer') { - safeType = 'number'; - } else if (safeType === 'null') { - safeType = 'string'; - } + let safeType = getType(value, 'strict'); + if (safeType === 'integer') return 'number'; + if (safeType === 'null') return 'string'; return safeType; }; newSchema.type = getSafeType(data); - if (newSchema.type === 'integer') { - newSchema.type = 'number'; - } else if (newSchema.type === 'null') { - newSchema.type = 'string'; - } else if (newSchema.type === 'object') { - newSchema.properties = {}; + if (newSchema.type === 'object') { + newSchema.properties = { }; for (let key of Object.keys(data)) { newSchema.properties[key] = buildSchemaFromData(data[key], false); } @@ -99,7 +92,7 @@ export function buildSchemaFromData( if (itemTypes.length === 1) { newSchema.items = data.map(buildSubSchemaFromData).reduce( (combined, item) => Object.assign(combined, item) - , {}); + , { }); } else { newSchema.items = data.map(buildSubSchemaFromData); } @@ -152,7 +145,7 @@ export function getFromSchema( if (!subSchemaArray || !subSchemaObject) { if (subSchemaArray && key === '-') { subSchema = (parentSchema.hasOwnProperty('additionalItems')) ? - parentSchema.additionalItems : {}; + parentSchema.additionalItems : { }; } else if (typeof subSchema === 'object' && subSchema.hasOwnProperty(key)) { subSchema = subSchema[key]; } else { @@ -215,7 +208,7 @@ export function getSchemaReference( ) { newSchema = newSchema.allOf .map(object => getSchemaReference(schema, object, schemaRefLibrary)) - .reduce((schema1, schema2) => Object.assign(schema1, schema2), {}); + .reduce((schema1, schema2) => Object.assign(schema1, schema2), { }); } if (schemaRefLibrary) schemaRefLibrary[schemaPointer] = newSchema; return newSchema; @@ -434,7 +427,7 @@ export function updateInputOptions(layoutNode: any, schema: any, jsf: any) { }); // Set all option values in layoutNode.options - let newOptions: any = {}; + let newOptions: any = { }; const fixUiKeys = (key) => key.slice(0, 3) === 'ui:' ? key.slice(3) : key; mergeFilteredObject(newOptions, jsf.globalOptions.formDefaults, [], fixUiKeys); @@ -498,7 +491,7 @@ export function updateInputOptions(layoutNode: any, schema: any, jsf: any) { */ export function getControlValidators(schema: any) { if (!isObject(schema)) return null; - let validators: any = {}; + let validators: any = { }; if (hasOwn(schema, 'type')) { switch (schema.type) { case 'string': diff --git a/src/library/utilities/json.validators.ts b/src/library/utilities/json.validators.ts index c0896cce..1fbc2f17 100755 --- a/src/library/utilities/json.validators.ts +++ b/src/library/utilities/json.validators.ts @@ -455,14 +455,14 @@ export class JsonValidators { let allErrors: PlainObject = _mergeObjects( forEachCopy(dependencies, (value, requiringField) => { if (!hasValue(control.value[requiringField])) return null; - let requiringFieldErrors: PlainObject = {}; + let requiringFieldErrors: PlainObject = { }; let requiredFields: string[]; - let properties: PlainObject = {}; + let properties: PlainObject = { }; if (getType(dependencies[requiringField]) === 'array') { requiredFields = dependencies[requiringField]; } else if (getType(dependencies[requiringField]) === 'object') { requiredFields = dependencies[requiringField]['required'] || []; - properties = dependencies[requiringField]['properties'] || {}; + properties = dependencies[requiringField]['properties'] || { }; } // Validate property dependencies diff --git a/src/library/utilities/jsonpointer.functions.ts b/src/library/utilities/jsonpointer.functions.ts index 28381c17..d1f3e8a9 100755 --- a/src/library/utilities/jsonpointer.functions.ts +++ b/src/library/utilities/jsonpointer.functions.ts @@ -140,7 +140,7 @@ export class JsonPointer { subObject = subObject.get(key); } else { if (!hasOwn(subObject, key)) { - subObject[key] = (keyArray[i + 1].match(/^(\d+|-)$/)) ? [] : {}; + subObject[key] = (keyArray[i + 1].match(/^(\d+|-)$/)) ? [] : { }; } subObject = subObject[key]; } @@ -190,7 +190,7 @@ export class JsonPointer { subObject = subObject.get(key); } else { if (!hasOwn(subObject, key)) { - subObject[key] = (keyArray[i + 1].match(/^(\d+|-)$/)) ? [] : {}; + subObject[key] = (keyArray[i + 1].match(/^(\d+|-)$/)) ? [] : { }; } subObject[key] = copy(subObject[key]); subObject = subObject[key]; @@ -286,7 +286,7 @@ export class JsonPointer { * @return {Object} - The resulting dictionary object */ static dict(object: any): any { - let results: any = {}; + let results: any = { }; this.forEachDeep(object, (value, pointer) => { if (typeof value !== 'object') results[pointer] = value; }); @@ -357,7 +357,7 @@ export class JsonPointer { ): void { if (typeof fn === 'function') { if (isObject(object) || isArray(object)) { - let newObject = Object.assign(isArray(object) ? [] : {}, object); + let newObject = Object.assign(isArray(object) ? [] : { }, object); if (!bottomUp) fn(newObject, pointer, rootObject); for (let key of Object.keys(newObject)) { const newPointer: string = pointer + '/' + this.escape(key); diff --git a/src/library/utilities/layout.functions.ts b/src/library/utilities/layout.functions.ts index b0edbba0..b414aaef 100755 --- a/src/library/utilities/layout.functions.ts +++ b/src/library/utilities/layout.functions.ts @@ -34,7 +34,7 @@ export function buildLayout(jsf: any, widgetLibrary: any): any[] { mapLayout(jsf.layout, (layoutItem, index, layoutPointer) => { let currentIndex: number = index; - let newNode: any = {}; + let newNode: any = { }; if (isObject(layoutItem)) { newNode = layoutItem; } else if (JsonPointer.isJsonPointer(layoutItem)) { @@ -49,7 +49,7 @@ export function buildLayout(jsf: any, widgetLibrary: any): any[] { Object.assign(newNode, { _id: _.uniqueId(), layoutPointer: layoutPointer.replace(/\/\d+/g, '/-'), - options: {}, + options: { }, }); let itemSchema: any = null; @@ -159,7 +159,7 @@ export function buildLayout(jsf: any, widgetLibrary: any): any[] { } } else { // TODO: create item in FormGroup model from layout key (?) - updateInputOptions(newNode, {}, jsf); + updateInputOptions(newNode, { }, jsf); } newNode.widget = widgetLibrary.getWidget(newNode.type); @@ -294,7 +294,7 @@ export function buildLayout(jsf: any, widgetLibrary: any): any[] { } else if (hasOwn(newNode, 'type')) { newNode.arrayItem = false; newNode.widget = widgetLibrary.getWidget(newNode.type); - updateInputOptions(newNode, {}, jsf); + updateInputOptions(newNode, { }, jsf); } if (newNode.type === 'submit') hasSubmitButton = true; return newNode; @@ -341,7 +341,7 @@ export function buildLayoutFromSchema( dataPointer: JsonPointer.toGenericPointer(dataPointer, jsf.arrayMap), dataType: schema.type || (hasOwn(schema, '$ref') ? '$ref' : null), layoutPointer: layoutPointer.replace(/\/\d+/g, '/-') || '/-', - options: {}, + options: { }, type: newNodeType, widget: widgetLibrary.getWidget(newNodeType), }; diff --git a/src/library/utilities/orderable.directive.ts b/src/library/utilities/orderable.directive.ts index e4934b51..485a0e85 100755 --- a/src/library/utilities/orderable.directive.ts +++ b/src/library/utilities/orderable.directive.ts @@ -22,7 +22,7 @@ export class OrderableDirective implements OnInit { constructor( private elementRef: ElementRef, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) { diff --git a/src/library/utilities/utility.functions.ts b/src/library/utilities/utility.functions.ts index b3cf0270..8dc99e40 100755 --- a/src/library/utilities/utility.functions.ts +++ b/src/library/utilities/utility.functions.ts @@ -45,7 +45,7 @@ export function addClasses( */ export function copy(object: any): any { if (typeof object !== 'object' || object === null) return object; - if (isObject(object)) return Object.assign({}, object); + if (isObject(object)) return Object.assign({ }, object); if (isArray(object)) return [].concat(object); if (isMap(object)) return new Map(object); if (isSet(object)) return new Set(object); @@ -111,7 +111,7 @@ export function forEachCopy( ): any { if (!hasValue(object)) return; if ((isObject(object) || isArray(object)) && typeof fn !== 'function') { - let newObject: any = isArray(object) ? [] : {}; + let newObject: any = isArray(object) ? [] : { }; for (let key of Object.keys(object)) { newObject[key] = fn(object[key], key, object); } @@ -161,7 +161,7 @@ export function mergeFilteredObject( keyFn: (string) => string = (k) => k, valueFn: (any) => any = (v) => v ): PlainObject { if (!isObject(sourceObject)) return targetObject; - if (!isObject(targetObject)) targetObject = {}; + if (!isObject(targetObject)) targetObject = { }; for (let key of Object.keys(sourceObject)) { if (!inArray(key, excludeKeys) && isDefined(sourceObject[key])) { targetObject[keyFn(key)] = valueFn(sourceObject[key]); @@ -174,12 +174,12 @@ export function mergeFilteredObject( * 'parseText' function * * @param {string = ''} text - - * @param {any = {}} value - + * @param {any = { }} value - * @param {number = null} index - * @return {string} - */ export function parseText( - text: string = '', value: any = {}, values: any = {}, index: number = null + text: string = '', value: any = { }, values: any = { }, index: number = null ): string { if (!text) return text; try { diff --git a/src/library/utilities/validator.functions.ts b/src/library/utilities/validator.functions.ts index bd1e909d..8c740b99 100755 --- a/src/library/utilities/validator.functions.ts +++ b/src/library/utilities/validator.functions.ts @@ -91,7 +91,7 @@ export function _executeAsyncValidators( * @return {PlainObject} - merged object */ export function _mergeObjects(...object: PlainObject[]): PlainObject { - let mergedObject: PlainObject = {}; + let mergedObject: PlainObject = { }; for (let i = 0, l = arguments.length; i < l; i++) { const currentObject = arguments[i]; if (isObject(currentObject)) { @@ -201,7 +201,7 @@ export function isString(value: any): value is string { */ export function isNumber(value: any, strict: any = false): boolean { if (strict && typeof value !== 'number') return false; - return !isNaN(value) && value !== value / 0; + return !isNaN(value) && value !== value / 0; } /** @@ -282,7 +282,7 @@ export function isSet(item: any): boolean { * getType('true') = 'string' * getType(true) = 'boolean' * getType(null) = 'null' - * getType({}) = 'object' + * getType({ }) = 'object' * getType([]) = 'array' * * getType('10.5', 'strict') = 'string' diff --git a/src/playground/ace-editor.directive.ts b/src/playground/ace-editor.directive.ts index c9555f58..62dd5dd1 100755 --- a/src/playground/ace-editor.directive.ts +++ b/src/playground/ace-editor.directive.ts @@ -13,7 +13,7 @@ declare var ace: any; selector: '[ace-editor]' }) export class AceEditorDirective { - private _options: any = {}; + private _options: any = { }; private _readOnly: boolean = false; private _theme: string = 'chrome'; private _mode: string = 'javascript'; @@ -52,7 +52,7 @@ export class AceEditorDirective { @Input() set options( options: any ) { this._options = options; - this.editor.setOptions( options || {} ); + this.editor.setOptions( options || { } ); } @Input() set readOnly( readOnly: any ) { diff --git a/src/playground/examples/ng2jsf-json-schema-draft03.json b/src/playground/examples/ng2jsf-json-schema-draft03.json index d1525d45..11e57d5d 100755 --- a/src/playground/examples/ng2jsf-json-schema-draft03.json +++ b/src/playground/examples/ng2jsf-json-schema-draft03.json @@ -12,25 +12,25 @@ "properties": { "type": "object", "additionalProperties": { "$ref": "#" }, - "default": {} + "default": { } }, "patternProperties": { "type": "object", "additionalProperties": { "$ref": "#" }, - "default": {} + "default": { } }, "additionalProperties": { "type": [ { "$ref": "#" }, "boolean" ], - "default": {} + "default": { } }, "items": { "type": [ { "$ref": "#" }, "array" ], "items": { "$ref": "#" }, - "default": {} + "default": { } }, "additionalItems": { "type": [ { "$ref": "#" }, "boolean" ], - "default": {} + "default": { } }, "required": { "type": "boolean", "default": false }, "dependencies": { @@ -39,7 +39,7 @@ "type": [ "string", "array", { "$ref": "#" } ], "items": { "type": "string" } }, - "default": {} + "default": { } }, "minimum": { "type": "number" }, "maximum": { "type": "number" }, @@ -70,7 +70,7 @@ "extends": { "type": [ { "$ref": "#" }, "array" ], "items": { "$ref": "#" }, - "default": {} + "default": { } }, "id": { "type": "string", "format": "uri" }, "$ref": { "type": "string", "format": "uri" }, @@ -80,5 +80,5 @@ "exclusiveMinimum": "minimum", "exclusiveMaximum": "maximum" }, - "default": {} + "default": { } } diff --git a/src/playground/examples/ng2jsf-json-schema-draft04.json b/src/playground/examples/ng2jsf-json-schema-draft04.json index 2da997f7..267b5e09 100755 --- a/src/playground/examples/ng2jsf-json-schema-draft04.json +++ b/src/playground/examples/ng2jsf-json-schema-draft04.json @@ -24,7 +24,7 @@ "$schema": { "type": "string", "format": "uri" }, "title": { "type": "string" }, "description": { "type": "string" }, - "default": {}, + "default": { }, "multipleOf": { "type": "number", "minimum": 0, "exclusiveMinimum": true }, "maximum": { "type": "number" }, "exclusiveMaximum": { "type": "boolean", "default": false }, @@ -34,11 +34,11 @@ "minLength": { "$ref": "#/definitions/positiveIntegerDefault0" }, "pattern": { "type": "string", "format": "regex" }, "additionalItems": { - "anyOf": [ { "type": "boolean" }, { "$ref": "#" } ], "default": {} + "anyOf": [ { "type": "boolean" }, { "$ref": "#" } ], "default": { } }, "items": { "anyOf": [ { "$ref": "#" }, { "$ref": "#/definitions/schemaArray" } ], - "default": {} + "default": { } }, "maxItems": { "$ref": "#/definitions/positiveInteger" }, "minItems": { "$ref": "#/definitions/positiveIntegerDefault0" }, @@ -47,16 +47,16 @@ "minProperties": { "$ref": "#/definitions/positiveIntegerDefault0" }, "required": { "$ref": "#/definitions/stringArray" }, "additionalProperties": { - "anyOf": [ { "type": "boolean" }, { "$ref": "#" } ], "default": {} + "anyOf": [ { "type": "boolean" }, { "$ref": "#" } ], "default": { } }, "definitions": { - "type": "object", "additionalProperties": { "$ref": "#" }, "default": {} + "type": "object", "additionalProperties": { "$ref": "#" }, "default": { } }, "properties": { - "type": "object", "additionalProperties": { "$ref": "#" }, "default": {} + "type": "object", "additionalProperties": { "$ref": "#" }, "default": { } }, "patternProperties": { - "type": "object", "additionalProperties": { "$ref": "#" }, "default": {} + "type": "object", "additionalProperties": { "$ref": "#" }, "default": { } }, "dependencies": { "type": "object", @@ -84,5 +84,5 @@ "exclusiveMaximum": [ "maximum" ], "exclusiveMinimum": [ "minimum" ] }, - "default": {} + "default": { } } diff --git a/src/playground/examples/rjsf-date-and-time.json b/src/playground/examples/rjsf-date-and-time.json index 819018ad..950de15a 100755 --- a/src/playground/examples/rjsf-date-and-time.json +++ b/src/playground/examples/rjsf-date-and-time.json @@ -45,5 +45,5 @@ } } }, - "formData": {} + "formData": { } } diff --git a/src/playground/examples/rjsf-errors.json b/src/playground/examples/rjsf-errors.json index 2ce400dc..590a77ac 100755 --- a/src/playground/examples/rjsf-errors.json +++ b/src/playground/examples/rjsf-errors.json @@ -32,7 +32,7 @@ } } }, - "UISchema": {}, + "UISchema": { }, "formData": { "firstName": "Chuck", "active": "wrong", diff --git a/src/playground/examples/rjsf-files.json b/src/playground/examples/rjsf-files.json index cad48dda..880189cf 100755 --- a/src/playground/examples/rjsf-files.json +++ b/src/playground/examples/rjsf-files.json @@ -18,6 +18,6 @@ } } }, - "UISchema": {}, - "formData": {} + "UISchema": { }, + "formData": { } } diff --git a/src/playground/examples/rjsf-large.json b/src/playground/examples/rjsf-large.json index c36f2e65..5949d407 100755 --- a/src/playground/examples/rjsf-large.json +++ b/src/playground/examples/rjsf-large.json @@ -41,6 +41,6 @@ "choice10": { "$ref": "#/definitions/largeEnum" } } }, - "UISchema": {}, - "formData": {} + "UISchema": { }, + "formData": { } } diff --git a/src/playground/examples/rjsf-validation.json b/src/playground/examples/rjsf-validation.json index 186439b4..00d4f63e 100755 --- a/src/playground/examples/rjsf-validation.json +++ b/src/playground/examples/rjsf-validation.json @@ -24,5 +24,5 @@ "ui:widget": "password" } }, - "formData": {} + "formData": { } } diff --git a/src/playground/playground-container.component.ts b/src/playground/playground-container.component.ts index 6b1f08f1..d42db96e 100755 --- a/src/playground/playground-container.component.ts +++ b/src/playground/playground-container.component.ts @@ -4,4 +4,4 @@ import { Component } from '@angular/core'; selector: 'playground-container', template: `` }) -export class PlaygroundContainerComponent {} +export class PlaygroundContainerComponent { } diff --git a/src/playground/playground.component.html b/src/playground/playground.component.html index 8af3371d..f83d0f18 100755 --- a/src/playground/playground.component.html +++ b/src/playground/playground.component.html @@ -129,11 +129,11 @@

Generated Form

{{prettyValidationErrors}}
Live data — from onChanges(): - 
{{prettyLiveFormData}}
Submitted data — from onSubmit(): - 
{{prettySubmittedFormData}}
+ 
{{prettySubmittedFormData}}
diff --git a/src/playground/playground.component.ts b/src/playground/playground.component.ts index c662132f..b8be5319 100755 --- a/src/playground/playground.component.ts +++ b/src/playground/playground.component.ts @@ -10,8 +10,8 @@ import { @Component({ moduleId: module.id, selector: 'playground', - templateUrl: './playground.component.html', - styleUrls: [ './playground.component.css' ] + templateUrl: 'playground.component.html', + styleUrls: [ 'playground.component.css' ] }) export class PlaygroundComponent implements OnInit, AfterViewInit { @@ -222,10 +222,10 @@ export class PlaygroundComponent implements OnInit, AfterViewInit { private jsonFormValid: boolean = false; private jsonFormErrorMessage: string = 'Loading form...'; private jsonFormObject: any; - private liveFormData: any = {}; + private liveFormData: any = { }; private formValidationErrors: any; private formIsValid: any; - private submittedFormData: any = {}; + private submittedFormData: any = { }; private aceEditorOptions: any = { highlightActiveLine: true, maxLines: 1000, @@ -318,8 +318,8 @@ export class PlaygroundComponent implements OnInit, AfterViewInit { '&example=' + selectedExample + '&framework=' + this.selectedFramework ); - this.liveFormData = {}; - this.submittedFormData = {}; + this.liveFormData = { }; + this.submittedFormData = { }; this.formIsValid = null; this.formValidationErrors = null; } @@ -347,8 +347,8 @@ export class PlaygroundComponent implements OnInit, AfterViewInit { private generateForm(newFormString: string) { if (!newFormString) { return; } this.formActive = false; - this.liveFormData = {}; - this.submittedFormData = {}; + this.liveFormData = { }; + this.submittedFormData = { }; // Most examples should be written in pure JSON, but if a schema includes // a function, the playground will compile it as Javascript instead diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index 19f332cd..345d950e 100755 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -1,10 +1,9 @@ -import { enableProdMode, NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; -import { ReactiveFormsModule } from '@angular/forms'; -import { JsonSchemaFormModule } from '../library/json-schema-form.module'; +import { JsonSchemaFormModule } from '../index'; // To include JsonSchemaFormModule after downloading from NPM, use this instead: // import { JsonSchemaFormModule } from 'angular2-json-schema-form'; @@ -13,16 +12,12 @@ import { PlaygroundContainerComponent } from './playground-container.component'; import { AceEditorDirective } from './ace-editor.directive'; import { routing, appRoutingProviders } from './playground.routing'; -enableProdMode(); @NgModule({ - imports: [ - BrowserModule, HttpModule, ReactiveFormsModule, - routing, JsonSchemaFormModule - ], + imports: [ BrowserModule, HttpModule, routing, JsonSchemaFormModule ], declarations: [ PlaygroundContainerComponent, PlaygroundComponent, AceEditorDirective ], providers: [ appRoutingProviders ], bootstrap: [ PlaygroundContainerComponent ] }) -export class PlaygroundModule {} +export class PlaygroundModule { } diff --git a/src/widgets/add-reference.component.ts b/src/widgets/add-reference.component.ts index 6a46c504..0cb16164 100755 --- a/src/widgets/add-reference.component.ts +++ b/src/widgets/add-reference.component.ts @@ -24,7 +24,7 @@ export class AddReferenceComponent implements OnInit, OnChanges { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/button.component.ts b/src/widgets/button.component.ts index a8ec3a95..6f8b337e 100755 --- a/src/widgets/button.component.ts +++ b/src/widgets/button.component.ts @@ -36,7 +36,7 @@ export class ButtonComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/checkbox.component.ts b/src/widgets/checkbox.component.ts index 8e4981df..3a77a4a1 100755 --- a/src/widgets/checkbox.component.ts +++ b/src/widgets/checkbox.component.ts @@ -42,7 +42,7 @@ export class CheckboxComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; @@ -53,7 +53,7 @@ export class CheckboxComponent implements OnInit { } private updateValue(event) { - event.preventDefault; + event.preventDefault(); this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue); } diff --git a/src/widgets/checkboxes.component.ts b/src/widgets/checkboxes.component.ts index 50db77b6..5117c422 100755 --- a/src/widgets/checkboxes.component.ts +++ b/src/widgets/checkboxes.component.ts @@ -76,7 +76,7 @@ export class CheckboxesComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/fieldset.component.ts b/src/widgets/fieldset.component.ts index c8367fa2..4fb93ceb 100755 --- a/src/widgets/fieldset.component.ts +++ b/src/widgets/fieldset.component.ts @@ -37,7 +37,7 @@ export class FieldsetComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/file.component.ts b/src/widgets/file.component.ts index cba9ea89..325a65c0 100755 --- a/src/widgets/file.component.ts +++ b/src/widgets/file.component.ts @@ -20,7 +20,7 @@ export class FileComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/hidden.component.ts b/src/widgets/hidden.component.ts index 2a5d91a9..4e5354f7 100755 --- a/src/widgets/hidden.component.ts +++ b/src/widgets/hidden.component.ts @@ -25,7 +25,7 @@ export class HiddenComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.jsf.initializeControl(this); diff --git a/src/widgets/input.component.ts b/src/widgets/input.component.ts index b01cfa7a..525da6de 100755 --- a/src/widgets/input.component.ts +++ b/src/widgets/input.component.ts @@ -50,7 +50,7 @@ export class InputComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/message.component.ts b/src/widgets/message.component.ts index 2b02d6ae..951b8857 100755 --- a/src/widgets/message.component.ts +++ b/src/widgets/message.component.ts @@ -21,7 +21,7 @@ export class MessageComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/number.component.ts b/src/widgets/number.component.ts index 3f153b24..e2d40438 100755 --- a/src/widgets/number.component.ts +++ b/src/widgets/number.component.ts @@ -53,7 +53,7 @@ export class NumberComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/radios.component.ts b/src/widgets/radios.component.ts index b908b3cc..97978fbe 100755 --- a/src/widgets/radios.component.ts +++ b/src/widgets/radios.component.ts @@ -81,7 +81,7 @@ export class RadiosComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/section.component.ts b/src/widgets/section.component.ts index 20cedddc..7cab7632 100755 --- a/src/widgets/section.component.ts +++ b/src/widgets/section.component.ts @@ -36,7 +36,7 @@ export class SectionComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/select-framework.component.ts b/src/widgets/select-framework.component.ts index c6d1f7d4..5aa2c565 100755 --- a/src/widgets/select-framework.component.ts +++ b/src/widgets/select-framework.component.ts @@ -20,7 +20,7 @@ export class SelectFrameworkComponent implements OnChanges, OnInit { constructor( private componentFactory: ComponentFactoryResolver, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.updateComponent(); diff --git a/src/widgets/select-widget.component.ts b/src/widgets/select-widget.component.ts index 73b50030..4f47f360 100755 --- a/src/widgets/select-widget.component.ts +++ b/src/widgets/select-widget.component.ts @@ -20,7 +20,7 @@ export class SelectWidgetComponent implements OnChanges, OnInit { constructor( private componentFactory: ComponentFactoryResolver, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.updateComponent(); diff --git a/src/widgets/select.component.ts b/src/widgets/select.component.ts index 5177c3cf..eaa31e0b 100755 --- a/src/widgets/select.component.ts +++ b/src/widgets/select.component.ts @@ -43,7 +43,7 @@ export class SelectComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/submit.component.ts b/src/widgets/submit.component.ts index 09830532..1d3d3c57 100755 --- a/src/widgets/submit.component.ts +++ b/src/widgets/submit.component.ts @@ -34,7 +34,7 @@ export class SubmitComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/tab.component.ts b/src/widgets/tab.component.ts index 0a1e4a95..85ca1dd2 100755 --- a/src/widgets/tab.component.ts +++ b/src/widgets/tab.component.ts @@ -21,7 +21,7 @@ export class TabComponent implements OnInit { constructor( private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.options = this.layoutNode.options; diff --git a/src/widgets/tabs.component.ts b/src/widgets/tabs.component.ts index b3df70dd..671a70fa 100755 --- a/src/widgets/tabs.component.ts +++ b/src/widgets/tabs.component.ts @@ -4,6 +4,7 @@ import { JsonSchemaFormService } from '../library/json-schema-form.service'; import { JsonPointer, parseText } from '../library/utilities/index'; @Component({ + moduleId: module.id, selector: 'tabs-widget', template: `
    `, }) @@ -20,7 +21,7 @@ export class TemplateComponent implements OnInit, OnChanges { constructor( private componentFactory: ComponentFactoryResolver, private jsf: JsonSchemaFormService - ) {} + ) { } ngOnInit() { this.updateComponent(); diff --git a/src/widgets/textarea.component.ts b/src/widgets/textarea.component.ts index 284a76b4..faf322fb 100755 --- a/src/widgets/textarea.component.ts +++ b/src/widgets/textarea.component.ts @@ -4,6 +4,7 @@ import { AbstractControl } from '@angular/forms'; import { JsonSchemaFormService } from '../library/json-schema-form.service'; @Component({ + moduleId: module.id, selector: 'textarea-widget', template: `