fix(dashboard\todo\checkbox): checkboxes was rendering uncorrectly

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

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BaMultiCheckbox} from '../../../../../../theme/components';
+import {BaMultiCheckbox, BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'checkbox-inputs',
   template: require('./checkboxInputs.html'),
-  directives: [BaMultiCheckbox]
+  directives: [BaMultiCheckbox, BaCheckbox]
 })
 export class CheckboxInputs {
   public checkboxModel = [{
@@ -27,7 +27,7 @@ export class CheckboxInputs {
     label: 'name',
     baCheckboxClass: 'class'
   };
-  
+
   constructor() {
   }
 

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

@@ -24,9 +24,7 @@
   </div>
 </div>
 <div>
-  <div class="checkbox disabled">
+  <ba-checkbox [(ngModel)]="isDisabled" [baCheckboxClass]="'disabled'" [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
-    <ba-checkbox [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
-  </div>
   <div class="radio disabled">
     <label class="custom-radio nowrap">
       <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>

src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts

@@ -1,7 +1,9 @@
 import {Component} from '@angular/core';
+import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'basic-form',
+  directives: [BaCheckbox],
   template: require('./basicForm.html'),
 })
 export class BasicForm {

src/app/pages/forms/components/layouts/components/basicForm/basicForm.html

@@ -8,10 +8,7 @@
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
   </div>
   <div class="checkbox">
-    <label class="custom-checkbox">
+    <ba-checkbox [(ngModel)]="isChecked" [label]="'Check me out'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
-      <input type="checkbox">
-      <span>Check me out</span>
-    </label>
   </div>
   <button type="submit" class="btn btn-danger">Submit</button>
 </form>

src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts

@@ -1,7 +1,9 @@
 import {Component} from '@angular/core';
+import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'horizontal-form',
+  directives: [BaCheckbox],
   template: require('./horizontalForm.html'),
 })
 export class HorizontalForm {

src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html

@@ -14,10 +14,7 @@
   <div class="form-group row">
     <div class="col-sm-offset-2 col-sm-10">
       <div class="checkbox">
-        <label class="custom-checkbox">
+        <ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
-          <input type="checkbox">
-          <span>Remember me</span>
-        </label>
       </div>
     </div>
   </div>

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts

@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
+import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'inline-form',
+  directives: [BaCheckbox],
   template: require('./inlineForm.html'),
 })
 export class InlineForm {
-
+  
   constructor() {
   }
 }

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html

@@ -6,10 +6,7 @@
     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
   </div>
   <div class="checkbox">
-    <label class="custom-checkbox">
+    <ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
-      <input type="checkbox">
-      <span>Remember me</span>
-    </label>
   </div>
   <button type="submit" class="btn btn-primary">Send invitation</button>
 </form>

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

@@ -54,72 +54,6 @@ label.custom-checkbox > span {
   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/sass/_form.scss

@@ -580,3 +580,69 @@ label.custom-input-danger {
 rating-inputs span {
   vertical-align: middle;
 }
+
+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;
+      }
+    }
+  }
+}