Merge 22ebf94c7b into f3f3f43805

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,22 +1,13 @@
 <div class="checkbox-demo-row">
   <div class="input-demo checkbox-demo row">
     <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
+      <ba-checkbox [(ngModel)]="value1" [label]="'Check 1'" [disabled]="false" [value]="option1" id="inlineCheckbox01"></ba-checkbox>
-        <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">
+      <ba-checkbox [(ngModel)]="value2" [label]="'Check 2'" [disabled]="false" [value]="option2" id="inlineCheckbox02"></ba-checkbox>
-        <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">
+      <ba-checkbox [(ngModel)]="value3" [label]="'Check 3'" [disabled]="false" [value]="option3" id="inlineCheckbox03"></ba-checkbox>
-        <input type="checkbox" id="inlineCheckbox03" value="option3">
-        <span>Check 3</span>
-      </label>
     </div>
   </div>
   <div class="input-demo radio-demo row">

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

@@ -0,0 +1,31 @@
+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 = false;
+  @Input() label:string = 'Checkbox';
+  @Input() value:string = '';
+  @Input() name:string = '';
+
+  private _state;
+
+  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,4 @@
+<label class="checkbox-inline custom-checkbox nowrap">
+  <input type="checkbox" (change)="onChange($event.target.checked)" [disabled]="disabled" [value]="value">
+  <span>{{label}}</span>
+</label>

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