From 08259b87bae460a73e092ace1bc5d724dcade29f 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:22:57 +0100
Subject: [PATCH] feat(core): Added RangeControlValueAccessor

relates #14
---
 .../ngqp/core/src/lib/accessors/accessors.ts  |  1 +
 ...number-control-value-accessor.directive.ts |  2 +-
 .../range-control-value-accessor.directive.ts | 49 +++++++++++++++++++
 .../ngqp/core/src/lib/query-param.module.ts   |  2 +
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 projects/ngqp/core/src/lib/accessors/range-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 c607a85..65ec066 100644
--- a/projects/ngqp/core/src/lib/accessors/accessors.ts
+++ b/projects/ngqp/core/src/lib/accessors/accessors.ts
@@ -1,3 +1,4 @@
 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 { SelectControlValueAccessorDirective, NgqpSelectOptionDirective } from './select-control-value-accessor.directive';
\ No newline at end of file
diff --git a/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts
index 758d5e6..0efaec0 100644
--- a/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts
+++ b/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts
@@ -31,7 +31,7 @@ export class NumberControlValueAccessorDirective implements ControlValueAccessor
     constructor(private renderer: Renderer2, private elementRef: ElementRef) {
     }
 
-    public writeValue(value: string) {
+    public writeValue(value: any) {
         const normalizedValue = value === null ? '' : value;
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', normalizedValue);
     }
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
new file mode 100644
index 0000000..db8bb66
--- /dev/null
+++ b/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts
@@ -0,0 +1,49 @@
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core';
+
+export const NGQP_RANGE_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => RangeControlValueAccessorDirective),
+    multi: true
+};
+
+@Directive({
+    selector: 'input[type=range][queryParamName]',
+    providers: [NGQP_RANGE_VALUE_ACCESSOR],
+})
+export class RangeControlValueAccessorDirective implements ControlValueAccessor {
+
+    private fnChange = (_: number) => {};
+    private fnTouched = () => {};
+
+    @HostListener('input', ['$event'])
+    public onInput(event: UIEvent) {
+        const value = (event.target as HTMLInputElement).value;
+        this.fnChange(value === '' ? null : parseFloat(value));
+    }
+
+    @HostListener('blur')
+    public onBlur() {
+        this.fnTouched();
+    }
+
+    constructor(private renderer: Renderer2, private elementRef: ElementRef) {
+    }
+
+    public writeValue(value: any) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', parseFloat(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/query-param.module.ts b/projects/ngqp/core/src/lib/query-param.module.ts
index 88e1fb0..7b74569 100644
--- a/projects/ngqp/core/src/lib/query-param.module.ts
+++ b/projects/ngqp/core/src/lib/query-param.module.ts
@@ -5,6 +5,7 @@ import {
     DefaultControlValueAccessorDirective,
     NgqpSelectOptionDirective,
     NumberControlValueAccessorDirective,
+    RangeControlValueAccessorDirective,
     SelectControlValueAccessorDirective
 } from './accessors/accessors';
 
@@ -15,6 +16,7 @@ const DIRECTIVES: Type<any>[] = [
     // Accessors
     DefaultControlValueAccessorDirective,
     NumberControlValueAccessorDirective,
+    RangeControlValueAccessorDirective,
     SelectControlValueAccessorDirective,
     NgqpSelectOptionDirective,
 ];