feat(core): Added CheckboxControlValueAccessor

relates #14

Author: Airblader

projects/ngqp/core/src/lib/accessors/accessors.ts

@@ -1,4 +1,5 @@
 export { DefaultControlValueAccessorDirective } from './default-control-value-accessor.directive';
 export { NumberControlValueAccessorDirective } from './number-control-value-accessor.directive';
 export { RangeControlValueAccessorDirective } from './range-control-value-accessor.directive';
+export { CheckboxControlValueAccessorDirective } from './checkbox-control-value-accessor.directive';
 export { SelectControlValueAccessorDirective, NgqpSelectOptionDirective } from './select-control-value-accessor.directive';

projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts

@@ -0,0 +1,48 @@
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core';
+
+export const NGQP_CHECKBOX_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckboxControlValueAccessorDirective),
+    multi: true
+};
+
+@Directive({
+    selector: 'input[type=checkbox][queryParamName]',
+    providers: [NGQP_CHECKBOX_VALUE_ACCESSOR],
+})
+export class CheckboxControlValueAccessorDirective implements ControlValueAccessor {
+
+    private fnChange = (_: boolean) => {};
+    private fnTouched = () => {};
+
+    @HostListener('change', ['$event'])
+    public onInput(event: UIEvent) {
+        this.fnChange((event.target as HTMLInputElement).checked);
+    }
+
+    @HostListener('blur')
+    public onBlur() {
+        this.fnTouched();
+    }
+
+    constructor(private renderer: Renderer2, private elementRef: ElementRef) {
+    }
+
+    public writeValue(value: any) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'checked', value);
+    }
+
+    public registerOnChange(fn: any) {
+        this.fnChange = fn;
+    }
+
+    public registerOnTouched(fn: any) {
+        this.fnTouched = fn;
+    }
+
+    public setDisabledState(isDisabled: boolean) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+    }
+
+}

projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts

@@ -17,6 +17,7 @@ export class RangeControlValueAccessorDirective implements ControlValueAccessor
     private fnTouched = () => {};
 
     @HostListener('input', ['$event'])
+    @HostListener('change', ['$event'])
     public onInput(event: UIEvent) {
         const value = (event.target as HTMLInputElement).value;
         this.fnChange(value === '' ? null : parseFloat(value));

projects/ngqp/core/src/lib/query-param.module.ts

@@ -2,6 +2,7 @@ import { NgModule, Type } from '@angular/core';
 import { QueryParamNameDirective } from './query-param-name.directive';
 import { QueryParamGroupDirective } from './query-param-group.directive';
 import {
+    CheckboxControlValueAccessorDirective,
     DefaultControlValueAccessorDirective,
     NgqpSelectOptionDirective,
     NumberControlValueAccessorDirective,
@@ -17,6 +18,7 @@ const DIRECTIVES: Type<any>[] = [
     DefaultControlValueAccessorDirective,
     NumberControlValueAccessorDirective,
     RangeControlValueAccessorDirective,
+    CheckboxControlValueAccessorDirective,
     SelectControlValueAccessorDirective,
     NgqpSelectOptionDirective,
 ];