feat(ba-checkbox): create checkbox component

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() {
   }
+  
 }

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">

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; }
+}

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>

src/app/theme/components/baCheckbox/index.ts

@@ -0,0 +1 @@
+export * from './baCheckbox.component';

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';