From 73cec2fceb9918b560c1b321df188086f3595cce Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Thu, 7 Jul 2016 15:25:08 +0300
Subject: [PATCH] feat(ba-checkbox): create checkbox component

---
 .../checkboxInputs.component.ts               |  3 ++
 .../checkboxInputs/checkboxInputs.html        | 21 ++----------
 .../baCheckbox/baCheckbox.component.ts        | 32 +++++++++++++++++++
 .../components/baCheckbox/baCheckbox.html     |  8 +++++
 src/app/theme/components/baCheckbox/index.ts  |  1 +
 src/app/theme/components/index.ts             |  1 +
 6 files changed, 48 insertions(+), 18 deletions(-)
 create mode 100644 src/app/theme/components/baCheckbox/baCheckbox.component.ts
 create mode 100644 src/app/theme/components/baCheckbox/baCheckbox.html
 create mode 100644 src/app/theme/components/baCheckbox/index.ts

diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
index c6a0194d..0b2f4c1d 100644
--- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
+++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
@@ -1,11 +1,14 @@
 import {Component} from '@angular/core';
+import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'checkbox-inputs',
   template: require('./checkboxInputs.html'),
+  directives: [BaCheckbox]
 })
 export class CheckboxInputs {
 
   constructor() {
   }
+  
 }
diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
index 04ae9ab1..5e5f3c69 100644
--- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
+++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
@@ -1,23 +1,8 @@
 <div class="checkbox-demo-row">
   <div class="input-demo checkbox-demo row">
-    <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox01" value="option1">
-        <span>Check 1</span>
-      </label>
-    </div>
-    <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox02" value="option2">
-        <span>Check 2</span>
-      </label>
-    </div>
-    <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox03" value="option3">
-        <span>Check 3</span>
-      </label>
-    </div>
+    <ba-checkbox [(ngModel)]="value1" [baCheckboxClass]="'col-md-4'" [label]="'Check 1'" [disabled]="false" [value]="option1" id="inlineCheckbox01"></ba-checkbox>
+    <ba-checkbox [(ngModel)]="value2" [baCheckboxClass]="'col-md-4'" [label]="'Check 2'" [disabled]="false" [value]="option2" id="inlineCheckbox02"></ba-checkbox>
+    <ba-checkbox [(ngModel)]="value3" [baCheckboxClass]="'col-md-4'" [label]="'Check 3'" [disabled]="false" [value]="option3" id="inlineCheckbox03"></ba-checkbox>
   </div>
   <div class="input-demo radio-demo row">
     <div class="col-md-4">
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.component.ts b/src/app/theme/components/baCheckbox/baCheckbox.component.ts
new file mode 100644
index 00000000..fcdd6b66
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/baCheckbox.component.ts
@@ -0,0 +1,32 @@
+import {Component, Provider, forwardRef, Input} from "@angular/core";
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
+
+const BA_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
+  NG_VALUE_ACCESSOR, {
+    useExisting: forwardRef(() => BaCheckbox),
+    multi: true
+  });
+
+@Component({
+  selector: 'ba-checkbox',
+  template: require('./baCheckbox.html'),
+  providers: [BA_CHECKBOX_CONTROL_VALUE_ACCESSOR]
+})
+export class BaCheckbox implements ControlValueAccessor {
+  @Input() disabled:boolean;
+  @Input() label:string;
+  @Input() value:string;
+  @Input() name:string;
+  @Input() baCheckboxClass:string;
+
+  public state: boolean;
+
+  onChange(value: any): void {}
+  onTouch(value: any): void {}
+  writeValue(value: any): void {
+    this.state = value;
+  }
+
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouch = fn; }
+}
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.html b/src/app/theme/components/baCheckbox/baCheckbox.html
new file mode 100644
index 00000000..7ed7e5a3
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/baCheckbox.html
@@ -0,0 +1,8 @@
+<div class="{{baCheckboxClass}}">
+  <label class="checkbox-inline custom-checkbox nowrap">
+    <input type="checkbox" [name]="name" [checked]=state
+           (change)="onChange($event.target.checked)"
+           [disabled]="disabled" [value]="value">
+    <span>{{label}}</span>
+  </label>
+</div>
diff --git a/src/app/theme/components/baCheckbox/index.ts b/src/app/theme/components/baCheckbox/index.ts
new file mode 100644
index 00000000..5bd11d98
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/index.ts
@@ -0,0 +1 @@
+export * from './baCheckbox.component';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 4d80824e..9d4c20f7 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -7,3 +7,4 @@ export * from './baAmChart';
 export * from './baChartistChart';
 export * from './baBackTop';
 export * from './baFullCalendar';
+export * from './baCheckbox';