Merge pull request #31 from skynetigor/new_approach

New approach

package.json

@@ -5,6 +5,7 @@
         "ng": "ng",
         "start": "ng serve",
         "build": "ng build",
+        "build-prod": "ng build dynamic-form",
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e",
@@ -21,6 +22,8 @@
         "@angular/platform-browser": "~7.0.0",
         "@angular/platform-browser-dynamic": "~7.0.0",
         "@angular/router": "~7.0.0",
+        "@angular/cdk": "7.3.7",
+        "@angular/material": "7.3.7",
         "@ng-bootstrap/ng-bootstrap": "^4.0.1",
         "ang-jsoneditor": "^1.7.5",
         "angular2-prettyjson": "^3.0.1",

projects/bootstrap-controls/src/lib/components/dropdown/bootstrap-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Injector, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
 
 import { AbstractValueAccessor, MakeProvider } from '../../abstractions';
 import { IBootstrapDropdownInputs } from '../../interfaces';
@@ -9,15 +9,15 @@ import { IBootstrapDropdownInputs } from '../../interfaces';
     styleUrls: ['./bootstrap-dropdown.component.scss', '../common-styles.scss'],
     providers: [MakeProvider(BootstrapDropdownComponent)]
 })
-export class BootstrapDropdownComponent extends AbstractValueAccessor implements OnInit, IBootstrapDropdownInputs {
+export class BootstrapDropdownComponent extends AbstractValueAccessor implements OnInit, IBootstrapDropdownInputs, OnChanges {
     private _options = [];
 
     isDropdownOpened = false;
 
     @Input()
     set options(value) {
         if (this._options !== value) {
-            this._options = value;
+            // this._options = value;
             this.dirty = false;
             this.value = null;
 
@@ -42,6 +42,12 @@ export class BootstrapDropdownComponent extends AbstractValueAccessor implements
         super(injector);
     }
 
+    ngOnChanges(obj: SimpleChanges) {
+        if ('options' in obj) {
+            this._options = obj['options'].currentValue;
+        }
+    }
+
     toggleDropdown() {
         if (!this.isDisabled) {
             this.isDropdownOpened = !this.isDropdownOpened;

projects/bootstrap-controls/src/lib/models/bootstrap-textfield.model.ts

@@ -1,10 +1,10 @@
-import { AbstractDynamicControl, IControlConfiguration } from 'dynamic-form';
+import { AbstractDynamicControl, ControlConfiguration } from 'dynamic-form';
 
 import { BootstrapTextfieldComponent } from '../components';
 import { IBootstrapTextfieldInputs } from '../interfaces';
 
 export class BootstrapTextFieldModel extends AbstractDynamicControl<BootstrapTextfieldComponent, IBootstrapTextfieldInputs, any, string> {
-    constructor(config: IControlConfiguration<IBootstrapTextfieldInputs, any, string>) {
+    constructor(config: ControlConfiguration<IBootstrapTextfieldInputs, any, string>) {
         super(config, BootstrapTextfieldComponent);
     }
 }

projects/dynamic-form/karma.conf.js

@@ -4,18 +4,21 @@
 module.exports = function(config) {
     config.set({
         basePath: '',
-        frameworks: ['parallel', 'jasmine', '@angular-devkit/build-angular'],
+        frameworks: [, /*'parallel'*/ 'jasmine', '@angular-devkit/build-angular'],
         plugins: [
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
             require('karma-jasmine-html-reporter'),
             require('karma-coverage-istanbul-reporter'),
-            require('@angular-devkit/build-angular/plugins/karma'),
-            require('karma-parallel')
+            require('@angular-devkit/build-angular/plugins/karma')
+            // require('karma-parallel')
         ],
         client: {
             clearContext: false // leave Jasmine Spec Runner output visible in browser
         },
+        parallelOptions: {
+            executors: 1
+        },
         coverageIstanbulReporter: {
             dir: require('path').join(__dirname, '../../coverage'),
             reports: ['html', 'lcovonly'],

projects/dynamic-form/ng-package.json

@@ -2,6 +2,9 @@
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/form-renderer",
     "lib": {
-        "entryFile": "src/index.ts"
+        "entryFile": "src/index.ts",
+        "umdModuleIds": {
+            "util": "util"
+        }
     }
 }

projects/dynamic-form/package.json

@@ -1,10 +1,12 @@
 {
-  "name": "dynamic-form",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "~7.0.0",
-    "rxjs": "~6.3.3"
-  }
+    "name": "dynamic-form",
+    "version": "0.0.1",
+    "peerDependencies": {
+        "@angular/common": "^7.0.0",
+        "@angular/core": "^7.0.0",
+        "@angular/forms": "~7.0.0",
+        "@angular/cdk": "~8.0.0",
+        "@angular/material": "7.3.7",
+        "rxjs": "~6.3.3"
+    }
 }

projects/dynamic-form/src/lib/dynamic-form-wizard/components/abstract-value-accessor.ts

@@ -0,0 +1,126 @@
+import { AfterViewInit, ElementRef, forwardRef, Injectable, Injector, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { BehaviorSubject, Subscription } from 'rxjs';
+
+@Injectable()
+export abstract class AbstractValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy, OnChanges {
+    private _isDisabled = false;
+    private _value: any = null;
+
+    protected hostNativeElement: HTMLElement;
+    protected formControl: AbstractControl;
+
+    @Input()
+    label = '';
+    @Input()
+    required: boolean;
+    @Input()
+    placeholder = '';
+    @Input()
+    tooltipText = '';
+
+    @Input()
+    set isDisabled(value: boolean) {
+        if (this._isDisabled !== value) {
+            if (value && this.formControl && this.formControl.enabled) {
+                this.formControl.disable();
+            } else if (!value && this.formControl && this.formControl.disabled) {
+                this.formControl.enable();
+            }
+
+            this._isDisabled = value;
+            this.isDisabled$.next(value);
+        }
+    }
+
+    get isDisabled() {
+        return this._isDisabled;
+    }
+
+    get dirty() {
+        return this.formControl ? this.formControl.dirty : false;
+    }
+
+    get fieldName(): string {
+        return this.hostNativeElement.id;
+    }
+
+    isDisabled$ = new BehaviorSubject<boolean>(this.isDisabled);
+
+    subscriptions: Subscription[] = [];
+
+    constructor(protected injector: Injector) {
+        this.hostNativeElement = injector.get<ElementRef<HTMLElement>>(ElementRef as any).nativeElement;
+    }
+
+    get value(): any {
+        return this._value;
+    }
+    set value(v: any) {
+        if (v !== this._value) {
+            this._value = v;
+            this.onChange(v);
+        }
+    }
+
+    markAsDirty() {
+        if (!this.dirty) {
+            this.formControl.markAsDirty();
+            this.onTouch();
+        }
+    }
+
+    writeValue(value: any) {
+        this._value = value;
+    }
+
+    onChange = _ => {};
+
+    onTouch = () => {};
+
+    registerOnChange(fn: (_: any) => void): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: () => void): void {
+        this.onTouch = fn;
+    }
+
+    setDisabledState(isDisabled: boolean) {
+        this.isDisabled = isDisabled;
+    }
+
+    ngOnChanges(simpleChanges: SimpleChanges) {
+        const reqAttrName = 'required';
+
+        if (reqAttrName in simpleChanges) {
+            if (simpleChanges.required.currentValue) {
+                const attr = document.createAttribute(reqAttrName);
+                this.hostNativeElement.attributes.setNamedItem(attr);
+            } else {
+                if (this.hostNativeElement.getAttribute(reqAttrName)) {
+                    this.hostNativeElement.attributes.removeNamedItem(reqAttrName);
+                }
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(t => t.unsubscribe());
+    }
+
+    ngAfterViewInit() {
+        // It is used like this since we are not able to use abstract type as argument for get method of injector
+        const ngControl = this.injector.get<NgControl>(NgControl as any);
+
+        this.formControl = ngControl.control;
+    }
+}
+
+export function MakeProvider(type: any) {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => type),
+        multi: true
+    };
+}

projects/dynamic-form/src/lib/dynamic-form-wizard/components/control-configuration/control-configuration.component.html

@@ -0,0 +1,4 @@
+<lib-dynamic-form-outlet [dynamicFormGroup]="formGroup"></lib-dynamic-form-outlet>
+<div class="flexbox"><button [disabled]="!formGroup.valid" mat-raised-button color="primary" (click)="submitForm()">Submit</button></div>
+
+<ng-template #section let-name="name">{{ name }}</ng-template>