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

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

@@ -1,32 +1,36 @@
-import {Component, Provider, forwardRef, Input} from "@angular/core";
+import {Component, Input, Self} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
+import {ControlValueAccessor, NgModel} from '@angular/forms';
-
-const BA_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
-  NG_VALUE_ACCESSOR, {
-    useExisting: forwardRef(() => BaCheckbox),
-    multi: true
-  });
 
 @Component({
-  selector: 'ba-checkbox',
+  selector: 'ba-checkbox[ngModel]',
-  template: require('./baCheckbox.html'),
+  styles: [require('./baCheckbox.scss')],
-  providers: [BA_CHECKBOX_CONTROL_VALUE_ACCESSOR]
+  template: require('./baCheckbox.html')
 })
 export class BaCheckbox implements ControlValueAccessor {
   @Input() disabled:boolean;
   @Input() label:string;
   @Input() value:string;
-  @Input() name:string;
   @Input() baCheckboxClass:string;
 
+  public model: NgModel;
   public state: boolean;
 
-  onChange(value: any): void {}
+  public constructor(@Self() state:NgModel) {
-  onTouch(value: any): void {}
+    this.model = state;
-  writeValue(value: any): void {
+    state.valueAccessor = this;
-    this.state = value;
   }
 
-  registerOnChange(fn: any): void { this.onChange = fn; }
+  public onChange(value: any): void {}
-  registerOnTouched(fn: any): void { this.onTouch = fn; }
+  public onTouch(value: any): void {}
+  public writeValue(state: any): void {
+    this.state = state;
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = function(state: boolean) {
+      this.writeValue(state);
+      this.model.viewToModelUpdate(state);
+    }
+  }
+  public registerOnTouched(fn: any): void { this.onTouch = fn; }
 }

src/app/theme/components/baCheckbox/baCheckbox.html

@@ -1,6 +1,6 @@
 <div class="{{baCheckboxClass}}">
   <label class="checkbox-inline custom-checkbox nowrap">
-    <input type="checkbox" [name]="name" [checked]=state
+    <input type="checkbox" [checked]=state
            (change)="onChange($event.target.checked)"
            [disabled]="disabled" [value]="value">
     <span>{{label}}</span>

src/app/theme/components/baCheckbox/baCheckbox.scss

@@ -0,0 +1,128 @@
+@import '../../sass/conf/conf';
+
+@mixin validationState($color, $focusColor) {
+  .control-label {
+    color: $content-text;
+  }
+  .form-control {
+    border: 1px solid $color;
+    &:focus {
+      box-shadow: none;
+      border-color: $focusColor;
+    }
+  }
+  label.custom-checkbox {
+    color: $color;
+    & > span {
+      &:before {
+        color: $color;
+      }
+      &:hover {
+        &:before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+  .form-control-feedback {
+    color: $color;
+  }
+  .input-group-addon {
+    background-color: $color;
+    color: $label-text;
+  }
+}
+
+.has-success {
+  @include validationState($success-bg, $success);
+  position: relative;
+}
+
+.has-warning {
+  @include validationState($warning-bg, $warning);
+  position: relative;
+}
+
+.has-error {
+  @include validationState($danger-bg, $danger);
+  position: relative;
+}
+
+label.custom-checkbox > span {
+  display: block;
+  margin-top: -13px;
+  margin-right: 10px;
+}
+
+label.custom-checkbox {
+  padding-right: 0;
+  padding-left: 0;
+  margin-bottom: 0;
+  & > input {
+    height: 0;
+    z-index: -100 !important;
+    opacity: 0;
+    position: absolute;
+    &:checked {
+      & + span {
+        &:before {
+          content: "\f00c";
+          font-weight: $font-light;
+        }
+      }
+    }
+    &:disabled {
+      & + span {
+        color: $disabled;
+        cursor: not-allowed;
+        &:before {
+          border-color: $disabled !important;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+  & > span {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    line-height: 16px;
+    font-weight: $font-light;
+    cursor: pointer;
+    padding-left: 22px;
+    width: 100%;
+    &:before {
+      cursor: pointer;
+      font-family: fontAwesome;
+      font-weight: $font-light;
+      font-size: 12px;
+      color: $content-text;
+      content: "\a0";
+      background-color: transparent;
+      border: 1px solid $border;
+      border-radius: 0;
+      display: inline-block;
+      text-align: center;
+      height: 16px;
+      line-height: 14px;
+      min-width: 16px;
+      margin-right: 6px;
+      position: relative;
+      top: 0;
+      margin-left: -22px;
+      float: left;
+    }
+    &:hover {
+      &:before {
+        border-color: $primary-bg;
+      }
+    }
+  }
+}
+
+.form-horizontal {
+  .checkbox, .checkbox-inline{
+    padding-top: 0;
+  }
+}
+

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

@@ -0,0 +1,45 @@
+import {Component, Input, Self} from '@angular/core';
+import {ControlValueAccessor, NgModel} from '@angular/forms';
+import {BaCheckbox} from '../baCheckbox';
+
+@Component({
+  selector: 'ba-multi-checkbox[ngModel]',
+  template: require('./baMultiCheckbox.html'),
+  directives: [BaCheckbox]
+})
+export class BaMultiCheckbox implements ControlValueAccessor {
+  @Input() baMultiCheckboxClass:string;
+  @Input() propertiesMapping:any;
+
+  public model: NgModel;
+  public state: boolean;
+
+  public constructor(@Self() state:NgModel) {
+    this.model = state;
+    state.valueAccessor = this;
+  }
+
+  public getProp(item: any, propName: string): string {
+    const prop = this.propertiesMapping[propName];
+
+    if (!prop) {
+      return item[propName];
+    } else if (typeof prop === 'function') {
+      return prop(item);
+    }
+    return item[prop];
+  }
+  public onChange(value: any): void {}
+  public onTouch(value: any): void {}
+  public writeValue(state: any): void {
+    this.state = state;
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = function(state: boolean) {
+      this.writeValue(state);
+      this.model.viewToModelUpdate(state);
+    }
+  }
+  public registerOnTouched(fn: any): void { this.onTouch = fn; }
+}

src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html

@@ -0,0 +1,10 @@
+<div class="{{baMultiCheckboxClass}}">
+  <ba-checkbox *ngFor="let item of state"
+               [(ngModel)]="item[propertiesMapping.model]"
+               [baCheckboxClass]="getProp(item, 'baCheckboxClass')"
+               [label]="getProp(item, 'label')"
+               [disabled]="getProp(item, 'disabled')"
+               [value]="getProp(item, 'value')"
+               id="{{getProp(item, 'id')}}">
+  </ba-checkbox>
+</div>

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

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

src/app/theme/components/index.ts

@@ -10,4 +10,4 @@ export * from './baBackTop';
 export * from './baFullCalendar';
 export * from './baPictureUploader';
 export * from './baCheckbox';
-
+export * from './baMultiCheckbox';

src/app/theme/sass/_form.scss

@@ -75,12 +75,6 @@ textarea.form-control {
   button[type="submit"] {
     margin-left: 12px;
   }
-
-  label.custom-checkbox > span {
-    display: block;
-    margin-top: -13px;
-    margin-right: 10px;
-  }
 }
 
 @mixin setSwitchBorder($color) {
@@ -182,8 +176,19 @@ textarea.form-control {
   }
 }
 
-label.custom-checkbox {
+
-  padding-right: 0;
+.nowrap {
+  white-space: nowrap;
+}
+
+.cut-with-dots {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+label.custom-radio {
+  @padding-right: 0;
   padding-left: 0;
   margin-bottom: 0;
   & > input {
@@ -246,20 +251,6 @@ label.custom-checkbox {
       }
     }
   }
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.cut-with-dots {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-}
-
-label.custom-radio {
-  @extend .custom-checkbox;
   & > input {
     &:checked {
       & + span {
@@ -307,7 +298,7 @@ label.custom-input-danger {
 }
 
 .form-horizontal {
-  .radio, .checkbox, .radio-inline, .checkbox-inline {
+  .radio, .radio-inline {
     padding-top: 0;
   }
 }
@@ -327,7 +318,6 @@ label.custom-input-danger {
       border-color: $focusColor;
     }
   }
-
   label.custom-checkbox {
     color: $color;
     & > span {
@@ -363,21 +353,6 @@ label.custom-input-danger {
   pointer-events: none;
 }
 
-.has-success {
-  @include validationState($success-bg, $success);
-  position: relative;
-}
-
-.has-warning {
-  @include validationState($warning-bg, $warning);
-  position: relative;
-}
-
-.has-error {
-  @include validationState($danger-bg, $danger);
-  position: relative;
-}
-
 .has-feedback {
   .form-control {
     padding-right: 42.5px;