feat(inputs\multi-checkbox): add multi-checkbox directive

src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts

@@ -1,14 +1,34 @@
 import {Component} from '@angular/core';
-import {BaCheckbox} from '../../../../../../theme/components';
+import {BaMultiCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'checkbox-inputs',
   template: require('./checkboxInputs.html'),
-  directives: [BaCheckbox]
+  directives: [BaMultiCheckbox]
 })
 export class CheckboxInputs {
+  public checkboxModel = [{
+    name: 'Check 1',
+    checked: false,
+    class: 'col-md-4'
+  }, {
+    name: 'Check 2',
+    checked: true,
+    class: 'col-md-4'
+  }, {
+    name: 'Check 3',
+    checked: false,
+    class: 'col-md-4'
+  }];
 
+  public checkboxPropertiesMapping = {
+    model: 'checked',
+    value: 'name',
+    label: 'name',
+    baCheckboxClass: 'class'
+  };
+  
   constructor() {
   }
-  
+
 }

src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html

@@ -1,8 +1,6 @@
 <div class="checkbox-demo-row">
   <div class="input-demo checkbox-demo row">
-    <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>
+    <ba-multi-checkbox [(ngModel)]="checkboxModel" [propertiesMapping]="checkboxPropertiesMapping"></ba-multi-checkbox>
   </div>
   <div class="input-demo radio-demo row">
     <div class="col-md-4">
@@ -27,10 +25,7 @@
 </div>
 <div>
   <div class="checkbox disabled">
-    <label class="custom-checkbox nowrap">
-      <input type="checkbox" value="" disabled>
-      <span>Checkbox is disabled</span>
-    </label>
+    <ba-checkbox [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
   </div>
   <div class="radio disabled">
     <label class="custom-radio nowrap">

src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts

@@ -1,11 +1,33 @@
 import {Component} from '@angular/core';
+import {BaMultiCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'validation-inputs',
+  directives: [BaMultiCheckbox],
   template: require('./validationInputs.html'),
 })
 export class ValidationInputs {
+  public checkboxModel = [{
+    name: 'Checkbox with success',
+    state: false,
+    class: 'has-success checkbox'
+  }, {
+    name: 'Checkbox with warning',
+    state: false,
+    class: 'has-warning checkbox',
+  }, {
+    name: 'Checkbox with error',
+    state: false,
+    class: 'has-error checkbox'
+  }];
 
+  public checkboxPropertiesMapping = {
+    model: 'state',
+    value: 'name',
+    label: 'name',
+    baCheckboxClass: 'class'
+  };
+  
   constructor() {
   }
 }

src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.html

@@ -10,31 +10,7 @@
   <label class="control-label" for="inputError1">Input with error</label>
   <input type="text" class="form-control" id="inputError1">
 </div>
-<div class="has-success">
-  <div class="checkbox">
-    <label class="custom-checkbox">
-      <input type="checkbox" id="checkboxSuccess" value="option1">
-      <span>Checkbox with success</span>
-    </label>
-  </div>
-</div>
-<div class="has-warning">
-  <div class="checkbox">
-    <label class="custom-checkbox">
-      <input type="checkbox" id="checkboxWarning" value="option1">
-      <span>Checkbox with warning</span>
-    </label>
-  </div>
-</div>
-<div class="has-error">
-  <div class="checkbox">
-    <label class="custom-checkbox">
-      <input type="checkbox" id="checkboxError" value="option1">
-      <span>Checkbox with error</span>
-    </label>
-  </div>
-</div>
-
+  <ba-multi-checkbox [(ngModel)]="checkboxModel" [propertiesMapping]="checkboxPropertiesMapping"></ba-multi-checkbox>
 <div class="form-group has-success has-feedback">
   <label class="control-label" for="inputSuccess2">Input with success</label>
   <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">