feat(checkbox): Checkbox Improvements - Complete overhaul

* Clicking checkbox label now toggles checkbox! * Removed mdc-checkbox-label * mdc-form-field wrapper around checkbox automatically adds htmlFor attribute. BREAKING CHANGE: Removed mdc-checkbox-label directive
trimox · Jun 15, 2017 · a9324ae · a9324ae
1 parent 28af9a8
commit a9324ae
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 50 deletions.
diff --git a/src/lib/checkbox/checkbox-label.ts b/src/lib/checkbox/checkbox-label.ts
diff --git a/src/lib/checkbox/checkbox.html → src/lib/checkbox/checkbox.component.html b/src/lib/checkbox/checkbox.html → src/lib/checkbox/checkbox.component.html
@@ -1,10 +1,13 @@
-<input #nativeCb type="checkbox"
-       class="mdc-checkbox__native-control"
-       [attr.aria-labelledby]="labelId"
-       [(ngModel)]="ngModel"
-       [checked]="checked"
-       [indeterminate]="indeterminate"
-       (change)="handleChange($event)"/>
+<input type="checkbox"
+  #nativeCb    
+  class="mdc-checkbox__native-control"
+  [id]="inputId"
+  [tabindex]="tabindex"
+  [attr.aria-labelledby]="labelId"
+  [(ngModel)]="ngModel"
+  [checked]="checked"
+  [indeterminate]="indeterminate"
+  (change)="handleChange($event)"/>
 <div class="mdc-checkbox__background">
   <svg class="mdc-checkbox__checkmark"
     viewBox="0 0 24 24">
@@ -14,4 +17,4 @@
           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
   </svg>
   <div class="mdc-checkbox__mixedmark"></div>
-</div>
+</div>
diff --git a/src/lib/checkbox/checkbox.ts → src/lib/checkbox/checkbox.component.ts b/src/lib/checkbox/checkbox.ts → src/lib/checkbox/checkbox.component.ts
@@ -15,12 +15,15 @@ import {
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { MDCCheckboxAdapter } from './checkbox-adapter';
+import { Ripple } from '.././ripple/ripple.directive';
 
-import { Ripple } from '.././ripple/ripple';
-
+const { MDCFormField } = require('@material/form-field');
 const { MDCCheckboxFoundation } = require('@material/checkbox');
 const MDC_CHECKBOX_STYLES = require('@material/checkbox/mdc-checkbox.scss');
 
+let _formField = null;
+let nextElId = 0;
+
 export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: Provider = {
   provide: NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => CheckboxComponent),
@@ -31,30 +34,44 @@ type UnlistenerMap = WeakMap<EventListener, Function>;
 
 @Component({
   selector: 'mdc-checkbox',
-  templateUrl: './checkbox.html',
+  templateUrl: './checkbox.component.html',
   styles: [String(MDC_CHECKBOX_STYLES)],
   encapsulation: ViewEncapsulation.None,
   providers: [
-    MD_CHECKBOX_CONTROL_VALUE_ACCESSOR,
-    Ripple
+    MD_CHECKBOX_CONTROL_VALUE_ACCESSOR
   ]
 })
+
 export class CheckboxComponent implements AfterViewInit, OnDestroy {
-  @Input() checked: boolean = false;
-  @Input() indeterminate: boolean = false;
-  @Input() labelId: string;
+  private disabled_: boolean = false;
+  ripple: Ripple;
+
+  @Input() id: string = `mdc-checkbox-${++nextElId}`;
+  get inputId(): string {
+    return `input-${this.id}`;
+  }
+  @Input() checked: boolean;
+  @Input() indeterminate: boolean;
   @Input() disabled: boolean;
+  @Input() tabindex: number = 0;
+  @Input('aria-labelledby') ariaLabelledby: string = null;
   @Output() change: EventEmitter<Event> = new EventEmitter<Event>();
   @HostBinding('class') className: string = 'mdc-checkbox';
   @HostBinding('class.mdc-checkbox--disabled') get classDisabled(): string {
     if (this.disabled) {
-      this._renderer.setAttribute(this.nativeCb.nativeElement, 'disabled', '');
+      if (_formField) {
+        _formField.input = null;
+      }
+      this._renderer.setAttribute(this.inputEl.nativeElement, 'disabled', '');
     } else {
-      this._renderer.removeAttribute(this.nativeCb.nativeElement, 'disabled');
+      if (_formField) {
+        _formField.input = this;
+      }
+      this._renderer.removeAttribute(this.inputEl.nativeElement, 'disabled');
     }
     return this.disabled ? 'mdc-checkbox--disabled' : '';
   }
-  @ViewChild('nativeCb') nativeCb: ElementRef;
+  @ViewChild('nativeCb') inputEl: ElementRef;
 
   onTouched: () => any = () => { };
 
@@ -80,18 +97,14 @@ export class CheckboxComponent implements AfterViewInit, OnDestroy {
     },
     registerChangeHandler: (handler: EventListener) => {
       if (this._root) {
-        this.listen_('change', handler, this.nativeCb);
+        this.listen_('change', handler, this.inputEl);
       }
     },
     deregisterChangeHandler: (handler: EventListener) => {
       this.unlisten_('change', handler);
     },
     getNativeControl: () => {
-      const { nativeCb } = this;
-      if (!nativeCb) {
-        throw new Error('Invalid state');
-      }
-      return nativeCb.nativeElement;
+      return this.inputEl.nativeElement;
     },
     forceLayout: () => {
       if (this._root) {
@@ -108,12 +121,17 @@ export class CheckboxComponent implements AfterViewInit, OnDestroy {
 
   constructor(
     private _renderer: Renderer2,
-    private _root: ElementRef,
-    private _ripple: Ripple) { }
+    private _root: ElementRef) {
+    this.ripple = new Ripple(this._renderer, this._root);
+  }
 
   ngAfterViewInit() {
     this._foundation.init();
-    this._ripple.unbounded = true;
+    this.ripple.unbounded = true;
+
+    _formField = new MDCFormField(this._root.nativeElement.parentElement)
+    _formField.input = this;
+    this._renderer.setAttribute(_formField.label_, 'for', this.inputId)
   }
   ngOnDestroy() {
     this._foundation.destroy();

diff --git a/src/lib/checkbox/index.ts b/src/lib/checkbox/index.ts
@@ -1,17 +1,11 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { CheckboxComponent } from './checkbox';
-import { CheckboxLabelDirective } from './checkbox-label';
-
-const CHECKBOX_COMPONENTS = [
-  CheckboxComponent,
-  CheckboxLabelDirective
-];
+import { CheckboxComponent } from './checkbox.component';
 
 @NgModule({
   imports: [FormsModule],
-  exports: [CHECKBOX_COMPONENTS],
-  declarations: [CHECKBOX_COMPONENTS],
+  exports: [CheckboxComponent],
+  declarations: [CheckboxComponent]
 })
 export class CheckboxModule { }