Refactor(ajsf/core): doc, imports, methods

README.md

@@ -1,6 +1,6 @@
 # AJSF (Angular JSON Schema Form)
 
-**N.B:** For Angular 6 JSON Schema Form old versions please check [this documentation](https://github.com/hamzahamidi/ajsf/tree/angular6-json-schema-form).
+**N.B:** For Angular6-json-schema-form please check [this documentation](https://github.com/hamzahamidi/ajsf/tree/angular6-json-schema-form).
 
 [![Build Status](https://travis-ci.com/hamzahamidi/ajsf.svg?branch=master)](https://travis-ci.com/hamzahamidi/ajsf)
 [![Maintainability](https://api.codeclimate.com/v1/badges/daec00f786b6ab6066c2/maintainability)](https://codeclimate.com/github/hamzahamidi/ajsf/maintainability)
@@ -30,36 +30,9 @@ This example playground features over 70 different JSON Schemas for you to try (
 
 ## Installation
 
-### To install from GitHub
-
-To install [the library and the example playground from GitHub](https://github.com/hamzahamidi/ajsf), clone `https://github.com/hamzahamidi/ajsf.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/YARN](https://nodejs.org/en/download/) installed, enter the following in your terminal:
-
-```shell
-git clone https://github.com/hamzahamidi/ajsf.git ajsf
-cd ajsf
-yarn install
-yarn start
-```
-
-This should start a server with the example playground, which you can view in your browser at `http://localhost:4200`
-
-The source code is composed as the following:
-
-* `projects/ajsf-core` - Angular JSON Schema Form main library
-* `projects/ajsf-bootstrap3` - Framework for Bootstrap 3
-* `projects/ajsf-bootstrap4` - Framework for Bootstrap 4
-* `projects/ajsf-material` - Framework for Angular Material
-* `projects/ajsf-core/src/lib/framework-library` - framework library
-* `projects/ajsf-core/src/lib/widget-library` - widget library
-* `projects/ajsf-core/src/lib/shared` - various utilities and helper functions
-* `demo` - the demonstration playground example application
-* `demo/assets/example-schemas` - JSON Schema examples used in the playground
-
-If you want detailed documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the generated `/docs/api` folder. (Angular JSON Schema Form is still a work in progress, so right now this documentation varies from highly detailed to completely missing.)
-
 ### To install from NPM/YARN 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 for example [install @ajsf/material package from NPM](https://www.npmjs.com/package/@ajsf/material) using either [NPM](https://www.npmjs.com) or [Yarn](https://yarnpkg.com). To install with NPM, run the following from your terminal:
+If you want to try out the libraries, you can for example [install @ajsf/material package from NPM](https://www.npmjs.com/package/@ajsf/material) which uses `material-angular` UI. You can use either [NPM](https://www.npmjs.com) or [Yarn](https://yarnpkg.com). To install with NPM, run the following from your terminal:
 
 ```shell
 npm install @ajsf/material
@@ -71,7 +44,7 @@ With YARN, run the following:
 yarn add @ajsf/material
 ```
 
-Then import `MaterialDesignFrameworkModule` in your main application module if you want to use `material-angular` UI, like this:
+Then import `MaterialDesignFrameworkModule` in your main application module like this:
 
 ```javascript
 import { BrowserModule } from '@angular/platform-browser';
@@ -101,6 +74,33 @@ Four framework modules are currently included, the import is the same as above :
 
 It is also possible to load multiple frameworks and switch between them at runtime, like the example playground on GitHub. But most typical sites will just load one framework.
 
+### To install from GitHub
+
+To install [the library and the example playground from GitHub](https://github.com/hamzahamidi/ajsf), clone `https://github.com/hamzahamidi/ajsf.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/YARN](https://nodejs.org/en/download/) installed, enter the following in your terminal:
+
+```shell
+git clone https://github.com/hamzahamidi/ajsf.git ajsf
+cd ajsf
+yarn install
+yarn start
+```
+
+This should start a server with the example playground, which you can view in your browser at `http://localhost:4200`
+
+The source code is composed as the following:
+
+* `projects/ajsf-core` - Angular JSON Schema Form main library
+* `projects/ajsf-bootstrap3` - Framework for Bootstrap 3
+* `projects/ajsf-bootstrap4` - Framework for Bootstrap 4
+* `projects/ajsf-material` - Framework for Angular Material
+* `projects/ajsf-core/src/lib/framework-library` - framework library
+* `projects/ajsf-core/src/lib/widget-library` - widget library
+* `projects/ajsf-core/src/lib/shared` - various utilities and helper functions
+* `demo` - the demonstration playground example application
+* `demo/assets/example-schemas` - JSON Schema examples used in the playground
+
+If you want detailed documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the generated `/docs/api` folder. (Angular JSON Schema Form is still a work in progress, so right now this documentation varies from highly detailed to completely missing.)
+
 ## Using Angular JSON Schema Form
 
 ### Basic use

projects/ajsf-core/src/lib/framework-library/framework-library.service.ts

@@ -11,7 +11,9 @@ import { WidgetLibraryService } from '../widget-library/widget-library.service';
 //   https://github.com/edcarroll/ng2-semantic-ui
 //   https://github.com/vladotesanovic/ngSemantic
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class FrameworkLibraryService {
   activeFramework: Framework = null;
   stylesheets: (HTMLStyleElement|HTMLLinkElement)[];

projects/ajsf-core/src/lib/framework-library/no-framework.component.html

@@ -0,0 +1,2 @@
+<select-widget-widget [dataIndex]="dataIndex" [layoutIndex]="layoutIndex" [layoutNode]="layoutNode">
+</select-widget-widget>

projects/ajsf-core/src/lib/framework-library/no-framework/no-framework.component.ts → projects/ajsf-core/src/lib/framework-library/no-framework.component.ts

@@ -1,13 +1,8 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  // tslint:disable-next-line:component-selector
   selector: 'no-framework',
-  template: `
-    <select-widget-widget
-      [dataIndex]="dataIndex"
-      [layoutIndex]="layoutIndex"
-      [layoutNode]="layoutNode"></select-widget-widget>`,
+  templateUrl: './no-framework.component.html',
 })
 export class NoFrameworkComponent {
   @Input() layoutNode: any;

projects/ajsf-core/src/lib/framework-library/no-framework/no-framework.module.ts → projects/ajsf-core/src/lib/framework-library/no-framework.module.ts

@@ -1,20 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { Framework } from '../framework';
-import { FrameworkLibraryService } from '../framework-library.service';
-import { JsonSchemaFormService } from '../../json-schema-form.service';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Framework } from './framework';
+import { NgModule } from '@angular/core';
 import { NoFramework } from './no.framework';
 import { NoFrameworkComponent } from './no-framework.component';
-import { WidgetLibraryModule } from '../../widget-library/widget-library.module';
-import { WidgetLibraryService } from '../../widget-library/widget-library.service';
+import { WidgetLibraryModule } from '../widget-library/widget-library.module';
 
 // No framework - plain HTML controls (styles from form layout only)
 
 @NgModule({
   imports: [CommonModule, WidgetLibraryModule],
   declarations: [NoFrameworkComponent],
   exports: [NoFrameworkComponent],
-  providers: [JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService,
+  providers: [
     { provide: Framework, useClass: NoFramework, multi: true }
   ],
   entryComponents: [NoFrameworkComponent]

projects/ajsf-core/src/lib/framework-library/no-framework/no.framework.ts → projects/ajsf-core/src/lib/framework-library/no.framework.ts

@@ -1,5 +1,5 @@
-import { Framework } from '../framework';
 import { Injectable } from '@angular/core';
+import { Framework } from './framework';
 import { NoFrameworkComponent } from './no-framework.component';
 // No framework - plain HTML controls (styles from form layout only)
 

projects/ajsf-core/src/lib/json-schema-form.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { JsonSchemaFormComponent } from './json-schema-form.component';
-import { NoFrameworkModule } from './framework-library/public_api';
+import { NoFrameworkModule } from './framework-library/no-framework.module';
 import { WidgetLibraryModule } from './widget-library/widget-library.module';
 
 @NgModule({

projects/ajsf-core/src/lib/json-schema-form.service.ts

@@ -25,10 +25,13 @@ import {
   isObject,
   JsonPointer
 } from './shared';
-import { enValidationMessages } from './locale/en-validation-messages';
-import { frValidationMessages } from './locale/fr-validation-messages';
-import { zhValidationMessages } from './locale/zh-validation-messages';
-import { itValidationMessages } from './locale/it-validation-messages';
+import {
+  enValidationMessages,
+  frValidationMessages,
+  zhValidationMessages,
+  itValidationMessages,
+} from './locale';
+
 
 export interface TitleMapItem {
   name?: string;
@@ -44,7 +47,9 @@ export interface ErrorMessages {
   }[];
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class JsonSchemaFormService {
   JsonFormCompatibility = false;
   ReactJsonSchemaFormCompatibility = false;

projects/ajsf-core/src/lib/locale/index.ts

@@ -0,0 +1,4 @@
+export { enValidationMessages } from './en-validation-messages';
+export { frValidationMessages } from './fr-validation-messages';
+export { zhValidationMessages } from './zh-validation-messages';
+export { itValidationMessages } from './it-validation-messages';

projects/ajsf-core/src/lib/shared/validator.functions.ts

@@ -232,28 +232,23 @@ export function isFunction(item: any): boolean {
 }
 
 export function isObject(item: any): boolean {
-  return item !== null && typeof item === 'object' &&
-    Object.prototype.toString.call(item) === '[object Object]';
+  return item !== null && typeof item === 'object';
 }
 
 export function isArray(item: any): boolean {
-  return Array.isArray(item) ||
-    Object.prototype.toString.call(item) === '[object Array]';
+  return Array.isArray(item);
 }
 
 export function isDate(item: any): boolean {
-  return typeof item === 'object' &&
-    Object.prototype.toString.call(item) === '[object Date]';
+  return !!item && Object.prototype.toString.call(item) === '[object Date]';
 }
 
 export function isMap(item: any): boolean {
-  return typeof item === 'object' &&
-    Object.prototype.toString.call(item) === '[object Map]';
+  return !!item && Object.prototype.toString.call(item) === '[object Map]';
 }
 
 export function isSet(item: any): boolean {
-  return typeof item === 'object' &&
-    Object.prototype.toString.call(item) === '[object Set]';
+  return !!item && Object.prototype.toString.call(item) === '[object Set]';
 }
 
 export function isSymbol(item: any): boolean {

projects/ajsf-core/src/lib/widget-library/widget-library.module.ts

@@ -1,22 +1,14 @@
 import { BASIC_WIDGETS } from './index';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { OrderableDirective } from './orderable.directive';
 
 @NgModule({
-  imports:         [ CommonModule, FormsModule, ReactiveFormsModule ],
-  declarations:    [ ...BASIC_WIDGETS, OrderableDirective ],
-  exports:         [ ...BASIC_WIDGETS, OrderableDirective ],
-  entryComponents: [ ...BASIC_WIDGETS ],
-  providers:       [ JsonSchemaFormService ]
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  declarations: [...BASIC_WIDGETS, OrderableDirective],
+  exports: [...BASIC_WIDGETS, OrderableDirective],
+  entryComponents: [...BASIC_WIDGETS]
 })
 export class WidgetLibraryModule {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: WidgetLibraryModule,
-      providers: [ JsonSchemaFormService ]
-    };
-  }
 }

projects/ajsf-core/src/lib/widget-library/widget-library.service.ts

@@ -21,7 +21,9 @@ import { TabsComponent } from './tabs.component';
 import { TemplateComponent } from './template.component';
 import { TextareaComponent } from './textarea.component';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class WidgetLibraryService {
 
   defaultWidget = 'text';

projects/ajsf-core/src/public_api.ts

@@ -2,10 +2,17 @@
  * Public API Surface of json-schema-form
  */
 
-export * from './lib/json-schema-form.module';
-export * from './lib/json-schema-form.service';
-export * from './lib/json-schema-form.component';
-export * from './lib/framework-library/public_api';
+export { JsonSchemaFormModule } from './lib/json-schema-form.module';
+export { TitleMapItem, ErrorMessages, JsonSchemaFormService } from './lib/json-schema-form.service';
+export { JsonSchemaFormComponent } from './lib/json-schema-form.component';
+export { Framework } from './lib/framework-library/framework';
+export { FrameworkLibraryService } from './lib/framework-library/framework-library.service';
+export {
+    enValidationMessages,
+    frValidationMessages,
+    zhValidationMessages,
+    itValidationMessages,
+  } from './lib/locale';
 export * from './lib/widget-library';
 export * from './lib/widget-library/widget-library.module';
 export * from './lib/shared';

projects/ajsf-material/src/lib/widgets/flex-layout-root.component.html

@@ -0,0 +1,11 @@
+<div *ngFor="let layoutNode of layout; let i = index" [class.form-flex-item]="isFlexItem"
+  [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
+  [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
+  [style.flex-basis]="getFlexAttribute(layoutNode, 'flex-basis')"
+  [style.align-self]="(layoutNode?.options || {})['align-self']" [style.order]="layoutNode?.options?.order"
+  [fxFlex]="layoutNode?.options?.fxFlex" [fxFlexOrder]="layoutNode?.options?.fxFlexOrder"
+  [fxFlexOffset]="layoutNode?.options?.fxFlexOffset" [fxFlexAlign]="layoutNode?.options?.fxFlexAlign">
+  <select-framework-widget *ngIf="showWidget(layoutNode)"
+    [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
+    [layoutIndex]="(layoutIndex || []).concat(i)" [layoutNode]="layoutNode"></select-framework-widget>
+  <div>