chore: use computed radius size for checkbox ripple during 2018 material spec update transition

Author: josephperrott

src/lib/checkbox/checkbox.spec.ts

@@ -794,6 +794,7 @@ describe('MatCheckbox', () => {
     it('should properly detect native tabindex attribute', fakeAsync(() => {
       fixture = createComponent(CheckboxWithTabindexAttr);
       fixture.detectChanges();
+      flush();
 
       const checkbox = fixture.debugElement
         .query(By.directive(MatCheckbox)).componentInstance as MatCheckbox;

src/lib/checkbox/checkbox.ts

@@ -50,6 +50,9 @@ import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-conf
 // Increasing integer for generating unique ids for checkbox components.
 let nextUniqueId = 0;
 
+// The radius for the checkbox's ripple, in pixels.
+let calculatedRippleRadius = 0;
+
 /**
  * Provider Expression that allows mat-checkbox to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
@@ -208,6 +211,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     this._focusMonitor
       .monitor(this._inputElement)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
+    this._calculateRippleRadius();
   }
 
   ngOnDestroy() {
@@ -457,4 +461,20 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
     return `mat-checkbox-anim-${animSuffix}`;
   }
+
+  /**
+   * Calculate the radius for the ripple based on the ripple elements width.  Only calculated once
+   * for the application.
+   */
+  private _calculateRippleRadius() {
+    // setTimeout is used to ensure we delay until the checkbox's ripple is placed in the DOM.
+    setTimeout(() => {
+      if (!calculatedRippleRadius) {
+        const rippleWidth = parseInt(getComputedStyle(
+          this._elementRef.nativeElement.querySelector('.mat-checkbox-ripple')).width!, 10)  || 0;
+        calculatedRippleRadius = rippleWidth / 2;
+      }
+      this.ripple.radius = calculatedRippleRadius;
+    });
+  }
 }