Merge branch 'master' into calendar

docs/articles/concept-theme-system.md

@@ -91,7 +91,7 @@ Depending on the currently enabled theme and the way `card-bg` inherited in your
 
 ## Built-in themes
 
-Currently, there are 2 built-in themes: 
+Currently, there are 3 built-in themes: 
 - `default` - clean white theme
 - `cosmic` - dark theme
 - `corporate` - firm business theme

src/framework/theme/components/checkbox/checkbox.component.ts

@@ -122,4 +122,8 @@ export class NbCheckboxComponent implements ControlValueAccessor {
   writeValue(val: any) {
     this.value = val;
   }
+
+  setDisabledState(val: boolean) {
+    this.disabled = convertToBoolProperty(val);
+  }
 }

src/framework/theme/components/checkbox/checkbox.spec.ts

@@ -1,7 +1,8 @@
 import { NbCheckboxComponent } from './checkbox.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
 
 describe('Component: NbCheckbox', () => {
 
@@ -67,3 +68,55 @@ describe('Component: NbCheckbox', () => {
     expect(testContainerEl.classList.contains('danger')).toBeTruthy();
   });
 });
+
+/** Test component with reactive forms */
+@Component({
+  template: `<nb-checkbox [formControl]="formControl"></nb-checkbox>`,
+})
+class CheckboxWithFormControlComponent {
+  formControl = new FormControl();
+}
+
+describe('Component: NbCheckbox with form control', () => {
+
+  let fixture: ComponentFixture<CheckboxWithFormControlComponent>;
+  let checkboxComponent: DebugElement;
+  let checkboxInstance: NbCheckboxComponent;
+  let testComponent: CheckboxWithFormControlComponent;
+  let inputElement: HTMLInputElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
+      declarations: [NbCheckboxComponent, CheckboxWithFormControlComponent],
+    });
+
+      fixture = TestBed.createComponent(CheckboxWithFormControlComponent);
+      fixture.detectChanges();
+
+      checkboxComponent = fixture.debugElement.query(
+        By.directive(NbCheckboxComponent),
+      );
+      checkboxInstance = checkboxComponent.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
+      inputElement = <HTMLInputElement>(
+        checkboxComponent.nativeElement.querySelector('input')
+      );
+  });
+
+  it('Toggling form control disabled state properly toggles checkbox input', () => {
+      expect(checkboxInstance.disabled).toBeFalsy();
+
+      testComponent.formControl.disable();
+      fixture.detectChanges();
+
+      expect(checkboxInstance.disabled).toBeTruthy();
+      expect(inputElement.disabled).toBeTruthy();
+
+      testComponent.formControl.enable();
+      fixture.detectChanges();
+
+      expect(checkboxInstance.disabled).toBeFalsy();
+      expect(inputElement.disabled).toBeFalsy();
+  });
+});