event handler and DynamicCheckboxGroup templates refactored (closes #172

, closes #189)

example/app/app.component.html

@@ -13,7 +13,7 @@ <h1 class="text-center">
         <a routerLink="/example-bootstrap">Bootstrap UI</a>
         <a routerLink="/example-foundation">Foundation UI</a>
         <a routerLink="/example-material">Material UI</a>
-        <!--<a routerLink="/example-kendo">Kendo UI</a>-->
+        <a routerLink="/example-kendo">Kendo UI</a>
         <a routerLink="/example-primeng">PrimeNG UI</a>
 
     </nav>

example/app/app.module.ts

@@ -9,14 +9,14 @@ import {DynamicFormsCoreModule} from "@ng2-dynamic-forms/core";
 import {DynamicFormsBasicUIModule} from "@ng2-dynamic-forms/ui-basic";
 import {DynamicFormsBootstrapUIModule} from "@ng2-dynamic-forms/ui-bootstrap";
 import {DynamicFormsFoundationUIModule} from "@ng2-dynamic-forms/ui-foundation";
-//import {DynamicFormsKendoUIModule} from "@ng2-dynamic-forms/ui-kendo";
+import {DynamicFormsKendoUIModule} from "@ng2-dynamic-forms/ui-kendo";
 import {DynamicFormsMaterialUIModule} from "@ng2-dynamic-forms/ui-material";
 import {DynamicFormsPrimeNGUIModule} from "@ng2-dynamic-forms/ui-primeng";
 
 import {BasicExampleComponent} from "./basic/basic-example.component";
 import {BootstrapExampleComponent} from "./bootstrap/bootstrap-example.component";
 import {FoundationExampleComponent} from "./foundation/foundation-example.component";
-//import {KendoExampleComponent} from "./kendo/kendo-example.component";
+import {KendoExampleComponent} from "./kendo/kendo-example.component";
 import {MaterialExampleComponent} from "./material/material-example.component";
 import {PrimeNGExampleComponent} from "./primeng/primeng-example.component";
 
@@ -34,7 +34,7 @@ import {AppComponent} from './app.component';
         DynamicFormsBasicUIModule,
         DynamicFormsBootstrapUIModule,
         DynamicFormsFoundationUIModule,
-        //DynamicFormsKendoUIModule,
+        DynamicFormsKendoUIModule,
         DynamicFormsMaterialUIModule,
         DynamicFormsPrimeNGUIModule,
         MaterialModule.forRoot()
@@ -43,7 +43,7 @@ import {AppComponent} from './app.component';
         BasicExampleComponent,
         BootstrapExampleComponent,
         FoundationExampleComponent,
-        //KendoExampleComponent,
+        KendoExampleComponent,
         MaterialExampleComponent,
         PrimeNGExampleComponent,
         AppComponent

example/app/app.routing.ts

@@ -2,7 +2,7 @@ import {RouterModule, Routes} from "@angular/router";
 import {BasicExampleComponent} from "./basic/basic-example.component";
 import {BootstrapExampleComponent} from "./bootstrap/bootstrap-example.component";
 import {FoundationExampleComponent} from "./foundation/foundation-example.component";
-//import {KendoExampleComponent} from "./kendo/kendo-example.component";
+import {KendoExampleComponent} from "./kendo/kendo-example.component";
 import {MaterialExampleComponent} from "./material/material-example.component";
 import {PrimeNGExampleComponent} from "./primeng/primeng-example.component";
 
@@ -48,7 +48,7 @@ export const appRoutes: Routes = [
             bgColor: "#009688"
         }
     },
-    /*
+
     {
         path: "example-kendo",
         component: KendoExampleComponent,
@@ -58,7 +58,7 @@ export const appRoutes: Routes = [
             bgColor: "#ff5747"
         }
     },
-    */
+
     {
         path: "example-primeng",
         component: PrimeNGExampleComponent,

example/app/bootstrap/bootstrap-example.model.ts

@@ -89,13 +89,23 @@ export const BOOTSTRAP_EXAMPLE_MODEL = [
                                 id: "checkboxGroup1",
                                 label: "Checkbox 1",
                                 value: true
+                            },
+                            {
+                                grid: {
+                                    control: "col-sm-12"
+                                }
                             }
                         ),
                         new DynamicCheckboxModel(
                             {
                                 id: "checkboxGroup2",
                                 label: "Checkbox 2",
                                 value: true
+                            },
+                            {
+                                grid: {
+                                    control: "col-sm-12"
+                                }
                             }
                         )
                     ]

example/app/kendo/kendo-example.model.ts

@@ -3,6 +3,7 @@ import {
     DynamicCheckboxGroupModel,
     DynamicInputModel,
     DynamicSelectModel,
+    DynamicSwitchModel,
     DynamicRadioGroupModel,
     DynamicTextAreaModel,
     DynamicFormArrayModel,
@@ -36,4 +37,11 @@ export const KENDO_EXAMPLE_MODEL = [
             value: "option-3"
         }
     ),
+
+    new DynamicSwitchModel({
+
+        id: "kendoSwitch",
+        label: "Get it on",
+        value: true
+    }),
 ];

modules/core/src/component/dynamic-form-control.component.ts

@@ -1,10 +1,10 @@
 import {EventEmitter, TemplateRef, OnInit, OnDestroy} from "@angular/core";
 import {FormControl, FormGroup} from "@angular/forms";
+import {MdCheckboxChange, MdSlideToggleChange, MdRadioChange} from "@angular/material";
 import {Subscription} from "rxjs/Subscription";
 import {DynamicFormControlModel} from "../model/dynamic-form-control.model";
 import {DynamicFormValueControlModel} from "../model/dynamic-form-value-control.model";
 import {DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX} from "../model/checkbox/dynamic-checkbox.model";
-import {DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP} from "../model/checkbox/dynamic-checkbox-group.model";
 import {DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP} from "../model/radio/dynamic-radio-group.model";
 import {DYNAMIC_FORM_CONTROL_TYPE_SWITCH} from "../model/switch/dynamic-switch.model";
 import {
@@ -15,9 +15,11 @@ import {
 import {findIds, findActivationRelation, toBeDisabled} from "../model/dynamic-form-control-relation.model";
 import {isDefined} from "../utils";
 
+export type MdFormControlChangeEvent = MdCheckboxChange | MdRadioChange | MdSlideToggleChange;
+
 export interface DynamicFormControlEvent {
 
-    $event: Event | FocusEvent;
+    $event: Event | FocusEvent | MdFormControlChangeEvent;
     control: FormControl;
     model: DynamicFormControlModel;
 }
@@ -40,7 +42,8 @@ export abstract class DynamicFormControlComponent implements OnInit, OnDestroy {
 
     abstract readonly type: string;
 
-    constructor() {}
+    constructor() {
+    }
 
     ngOnInit() {
 
@@ -97,10 +100,6 @@ export abstract class DynamicFormControlComponent implements OnInit, OnDestroy {
         return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX;
     }
 
-    get isCheckboxGroup(): boolean {
-        return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP;
-    }
-
     get isRadioGroup(): boolean {
         return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP;
     }
@@ -162,9 +161,6 @@ export abstract class DynamicFormControlComponent implements OnInit, OnDestroy {
                 model.valueUpdates.next(value);
             }
         }
-        //@exclude
-        //console.log(`valueChanges on ${this.model.id}: `, value, typeof value, this.control.valid, this.model);
-        //@endexclude
     }
 
     onModelDisabledUpdates(value: boolean): void {
@@ -178,32 +174,12 @@ export abstract class DynamicFormControlComponent implements OnInit, OnDestroy {
         }
     }
 
-    onBlur($event: FocusEvent | DynamicFormControlEvent): void {
-
-        this.hasFocus = false;
-
-        if ($event instanceof FocusEvent) {
-
-            $event.stopImmediatePropagation();
-
-            this.blur.emit({$event: $event, control: this.control, model: this.model});
-
-        } else {
-            this.blur.emit($event as DynamicFormControlEvent);
-        }
-        //@exclude
-        console.log(`Blur event on ${this.model.id}: `, $event);
-        //@endexclude
-    }
-
-    onChange($event: Event | DynamicFormControlEvent): void {
+    onChange($event: Event | MdFormControlChangeEvent | DynamicFormControlEvent): void {
 
         if ($event instanceof Event) {
 
             $event.stopImmediatePropagation();
 
-            this.change.emit({$event: $event, control: this.control, model: this.model});
-
             if (this.model.type === DYNAMIC_FORM_CONTROL_TYPE_INPUT) {
 
                 let model = <DynamicInputModel> this.model;
@@ -212,29 +188,31 @@ export abstract class DynamicFormControlComponent implements OnInit, OnDestroy {
                     model.files = $event.srcElement["files"];
                 }
             }
-        } else {
+
+            this.change.emit({$event: $event as Event, control: this.control, model: this.model});
+
+        } else if ((<DynamicFormControlEvent> $event).$event instanceof Event) {
+
             this.change.emit($event as DynamicFormControlEvent);
+
+        } else {
+
+            this.change.emit({$event: $event as MdFormControlChangeEvent, control: this.control, model: this.model});
         }
-        //@exclude
-        console.log(`Change event on ${this.model.id}: `, $event);
-        //@endexclude
     }
 
-    onFocus($event: FocusEvent | DynamicFormControlEvent): void {
-
-        this.hasFocus = true;
+    onFocusChange($event: FocusEvent | DynamicFormControlEvent): void {
 
         if ($event instanceof FocusEvent) {
 
             $event.stopImmediatePropagation();
 
-            this.focus.emit({$event: $event, control: this.control, model: this.model});
+            this.hasFocus = $event.type === "focus";
+
+            this[$event.type].emit({$event: $event, control: this.control, model: this.model});
 
         } else {
-            this.focus.emit($event as DynamicFormControlEvent);
+            this[(<FocusEvent> (<DynamicFormControlEvent> $event).$event).type].emit($event as DynamicFormControlEvent);
         }
-        //@exclude
-        console.log(`Focus event on ${this.model.id}: `, $event);
-        //@endexclude
     }
 }

modules/core/src/core.module.ts

@@ -7,10 +7,7 @@ import {DynamicIdDirective} from "./directive/dynamic-id.directive";
 
 @NgModule({
 
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-    ],
+    imports: [CommonModule, ReactiveFormsModule],
     declarations: [DynamicIdDirective],
     exports: [DynamicIdDirective]
 })

modules/ui-basic/src/dynamic-form-basic.component.html

@@ -11,9 +11,9 @@
            [ngClass]="model.cls.element.control"
            [required]="model.required"
            [value]="model.value"
-           (blur)="onBlur($event)"
+           (blur)="onFocusChange($event)"
            (change)="onChange($event)"
-           (focus)="onFocus($event)"/>
+           (focus)="onFocusChange($event)"/>
 
 
     <label *ngIf="model.label"
@@ -35,9 +35,9 @@
                                         [hasErrorMessaging]="controlModel.hasErrorMessages"
                                         [model]="controlModel"
                                         [nestedTemplate]="nestedTemplate"
-                                        (blur)="onBlur($event)"
+                                        (blur)="onFocusChange($event)"
                                         (change)="onChange($event)"
-                                        (focus)="onFocus($event)"></dynamic-form-basic-control>
+                                        (focus)="onFocusChange($event)"></dynamic-form-basic-control>
 
             <template [ngTemplateOutlet]="customTemplate || nestedTemplate"
                       [ngOutletContext]="groupModel"></template>
@@ -60,9 +60,9 @@
                                     [hasErrorMessaging]="controlModel.hasErrorMessages"
                                     [model]="controlModel"
                                     [nestedTemplate]="customTemplate"
-                                    (blur)="onBlur($event)"
+                                    (blur)="onFocusChange($event)"
                                     (change)="onChange($event)"
-                                    (focus)="onFocus($event)"></dynamic-form-basic-control>
+                                    (focus)="onFocusChange($event)"></dynamic-form-basic-control>
     </fieldset>
 
 
@@ -74,23 +74,14 @@
 
         <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>
 
-        <label *ngFor="let item of model.group" [attr.for]="item.id" [ngClass]="item.cls.element.label">
-
-            <input type="checkbox"
-                   [attr.tabindex]="item.tabIndex"
-                   [checked]="item.checked"
-                   [dynamicId]="bindId && item.id"
-                   [formControlName]="item.id"
-                   [name]="item.name"
-                   [ngClass]="item.cls.element.control"
-                   [required]="item.required"
-                   [value]="item.value"
-                   (blur)="onBlur($event)"
-                   (change)="onChange($event)"
-                   (focus)="onFocus($event)"/><span [innerHTML]="item.label"></span>
-
-        </label>
-
+        <dynamic-form-basic-control *ngFor="let controlModel of model.group"
+                                    [controlGroup]="control"
+                                    [hasErrorMessaging]="controlModel.hasErrorMessages"
+                                    [model]="controlModel"
+                                    [nestedTemplate]="customTemplate"
+                                    (blur)="onFocusChange($event)"
+                                    (change)="onChange($event)"
+                                    (focus)="onFocusChange($event)"></dynamic-form-basic-control>
     </fieldset>
 
 
@@ -116,9 +107,9 @@
            [required]="model.required"
            [spellcheck]="model.spellCheck"
            [type]="model.inputType"
-           (blur)="onBlur($event)"
+           (blur)="onFocusChange($event)"
            (change)="onChange($event)"
-           (focus)="onFocus($event)"/>
+           (focus)="onFocusChange($event)"/>
 
     <datalist *ngIf="model.list" [id]="model.listId">
 
@@ -142,8 +133,8 @@
                    [name]="model.name"
                    [ngClass]="model.cls.element.control"
                    [value]="option.value"
-                   (blur)="onBlur($event)"
-                   (focus)="onFocus($event)"/><span [innerHTML]="option.label"></span>
+                   (blur)="onFocusChange($event)"
+                   (focus)="onFocusChange($event)"/><span [innerHTML]="option.label"></span>
 
         </label>
 
@@ -157,9 +148,9 @@
             [name]="model.name"
             [ngClass]="model.cls.element.control"
             [required]="model.required"
-            (blur)="onBlur($event)"
+            (blur)="onFocusChange($event)"
             (change)="onChange($event)"
-            (focus)="onFocus($event)">
+            (focus)="onFocusChange($event)">
 
         <option *ngFor="let option of model.options"
                 [attr.name]="model.name"
@@ -185,9 +176,9 @@
               [rows]="model.rows"
               [spellcheck]="model.spellCheck"
               [wrap]="model.wrap"
-              (blur)="onBlur($event)"
+              (blur)="onFocusChange($event)"
               (change)="onChange($event)"
-              (focus)="onFocus($event)"></textarea>
+              (focus)="onFocusChange($event)"></textarea>
 
 
     <div *ngIf="hasErrorMessaging && control.touched && !hasFocus && isInvalid" [ngClass]="model.cls.element.errors">

modules/ui-basic/src/dynamic-form-basic.component.spec.ts

@@ -62,12 +62,10 @@ describe("DynamicFormBasicComponent test suite", () => {
         expect(component.change).toBeDefined();
         expect(component.focus).toBeDefined();
 
-        expect(component.onBlur).toBeDefined();
         expect(component.onChange).toBeDefined();
-        expect(component.onFocus).toBeDefined();
+        expect(component.onFocusChange).toBeDefined();
 
         expect(component.isCheckbox).toBe(false);
-        expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isSwitch).toBe(false);
         expect(component.isValid).toBe(true);