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

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

@@ -1,12 +1,32 @@
 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,10 +1,32 @@
 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

@@ -16,7 +16,6 @@ export class BaCheckbox implements ControlValueAccessor {
   @Input() disabled:boolean;
   @Input() label:string;
   @Input() value:string;
-  @Input() name:string;
   @Input() baCheckboxClass:string;
   
   public state: boolean;

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,78 @@
+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,40 @@
+import {Component, Provider, forwardRef, Input} from "@angular/core";
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
+import {BaCheckbox} from '../baCheckbox';
+
+const BA_MULTI_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
+  NG_VALUE_ACCESSOR, {
+    useExisting: forwardRef(() => BaMultiCheckbox),
+    multi: true
+  });
+
+@Component({
+  selector: 'ba-multi-checkbox',
+  template: require('./baMultiCheckbox.html'),
+  directives: [BaCheckbox],
+  providers: [BA_MULTI_CHECKBOX_CONTROL_VALUE_ACCESSOR]
+})
+export class BaMultiCheckbox implements ControlValueAccessor {
+  @Input() baMultiCheckboxClass:string;
+  @Input() propertiesMapping:any;
+  private _model;
+
+  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];
+  }
+  onChange(value: any): void {}
+  onTouch(value: any): void {}
+  writeValue(value: any): void {
+    this._model = value;
+  }
+
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  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 _model"
+               [(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

@@ -8,3 +8,4 @@ export * from './baChartistChart';
 export * from './baBackTop';
 export * from './baFullCalendar';
 export * from './baCheckbox';
+export * from './baMultiCheckbox';

src/app/theme/sass/_form.scss

@@ -1,3 +1,5 @@
+@import "../components/baCheckbox/baCheckbox";
+
 .label {
   border-radius: 0;
 }
@@ -75,12 +77,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,71 +178,6 @@ textarea.form-control {
   }
 }
 
-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;
-      }
-    }
-  }
-}
 
 .nowrap {
   white-space: nowrap;
@@ -307,7 +238,7 @@ label.custom-input-danger {
 }
 
 .form-horizontal {
-  .radio, .checkbox, .radio-inline, .checkbox-inline {
+  .radio, .radio-inline {
     padding-top: 0;
   }
 }
@@ -327,7 +258,6 @@ label.custom-input-danger {
       border-color: $focusColor;
     }
   }
-
   label.custom-checkbox {
     color: $color;
     & > span {
@@ -582,3 +512,11 @@ label.custom-input-danger {
 .sub-little-text {
   font-size: 12px;
 }
+
+.rating {
+  font-size: 20px;
+}
+
+rating-inputs span {
+  vertical-align: middle;
+}