From 19df3e7cd0fa9cecaf8ebd58efb9eaf755fa2213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ingo=20B=C3=BCrk?= <ingo.buerk@tngtech.com>
Date: Sun, 16 Dec 2018 17:51:34 +0100
Subject: [PATCH] feat(core): Added CheckboxControlValueAccessor

relates #14
---
 .../ngqp/core/src/lib/accessors/accessors.ts  |  1 +
 ...eckbox-control-value-accessor.directive.ts | 48 +++++++++++++++++++
 .../range-control-value-accessor.directive.ts |  1 +
 .../ngqp/core/src/lib/query-param.module.ts   |  2 +
 4 files changed, 52 insertions(+)
 create mode 100644 projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts

diff --git a/projects/ngqp/core/src/lib/accessors/accessors.ts b/projects/ngqp/core/src/lib/accessors/accessors.ts
index 65ec066..07d7774 100644
--- a/projects/ngqp/core/src/lib/accessors/accessors.ts
+++ b/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';
\ No newline at end of file
diff --git a/projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts
new file mode 100644
index 0000000..9b026a1
--- /dev/null
+++ b/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);
+    }
+
+}
\ No newline at end of file
diff --git a/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts
index db8bb66..b29c596 100644
--- a/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts
+++ b/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));
diff --git a/projects/ngqp/core/src/lib/query-param.module.ts b/projects/ngqp/core/src/lib/query-param.module.ts
index 7b74569..67411a2 100644
--- a/projects/ngqp/core/src/lib/query-param.module.ts
+++ b/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,
 ];