fix(checkbox): remove native control from getters/setters of foundation

packages/mdc-checkbox/README.md

@@ -162,18 +162,17 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|
 | `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |
 | `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |
+| `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state. |
+| `isChecked() => boolean` | Returns true if the component is checked. |
+| `hasNativeControl() => boolean` | Returns true if the input is present in the component. |
+| `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled. |
 
 ### `MDCCheckboxFoundation`
 
 Method Signature | Description
 --- | ---
 `isChecked() => boolean` | Returns whether or not the underlying input is checked. Returns false when no input is available.
 `setChecked(checked: boolean) => void` | Updates the `checked` property on the underlying input. Does nothing when the underlying input is not present.
-`isIndeterminate() => boolean` | Returns whether or not the underlying input is indeterminate. Returns false when no input is available.
-`setIndeterminate(indeterminate: boolean) => void` | Updates the `indeterminate` property on the underlying input. Does nothing when the underlying input is not present.
-`isDisabled() => boolean` | Returns whether or not the underlying input is disabled. Returns false when no input is available.
 `setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.
-`getValue() => string` | Returns the value of `MDCCheckboxAdapter.getNativeControl().value`. Returns `null` if `getNativeControl()` does not return an object.
-`setValue(value: string) => void` | Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does not return an object.
 `handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.
 `handleChange() => void` | `change` event handler that should be applied to the checkbox element.

packages/mdc-checkbox/adapter.js

@@ -69,6 +69,18 @@ class MDCCheckboxAdapter {
 
   /** @return {boolean} */
   isAttachedToDOM() {}
+
+  /** @return {boolean} */
+  isIndeterminate() {}
+
+  /** @return {boolean} */
+  isChecked() {}
+
+  /** @return {boolean} */
+  hasNativeControl() {}
+
+  /** @param {boolean} disabled */
+  setNativeControlDisabled(disabled) {}
 }
 
 export default MDCCheckboxAdapter;

packages/mdc-checkbox/foundation.js

@@ -60,6 +60,10 @@ class MDCCheckboxFoundation extends MDCFoundation {
       getNativeControl: () => /* !MDCSelectionControlState */ {},
       forceLayout: () => {},
       isAttachedToDOM: () => /* boolean */ {},
+      isIndeterminate: () => /* boolean */ {},
+      isChecked: () => /* boolean */ {},
+      hasNativeControl: () => /* boolean */ {},
+      setNativeControlDisabled: (/* disabled: boolean */) => {},
     });
   }
 
@@ -81,7 +85,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @override */
   init() {
-    this.currentCheckState_ = this.determineCheckState_(this.getNativeControl_());
+    this.currentCheckState_ = this.determineCheckState_();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
     this.installPropertyChangeHooks_();
@@ -92,51 +96,16 @@ class MDCCheckboxFoundation extends MDCFoundation {
     this.uninstallPropertyChangeHooks_();
   }
 
-  /** @return {boolean} */
-  isChecked() {
-    return this.getNativeControl_().checked;
-  }
-
-  /** @param {boolean} checked */
-  setChecked(checked) {
-    this.getNativeControl_().checked = checked;
-  }
-
-  /** @return {boolean} */
-  isIndeterminate() {
-    return this.getNativeControl_().indeterminate;
-  }
-
-  /** @param {boolean} indeterminate */
-  setIndeterminate(indeterminate) {
-    this.getNativeControl_().indeterminate = indeterminate;
-  }
-
-  /** @return {boolean} */
-  isDisabled() {
-    return this.getNativeControl_().disabled;
-  }
-
   /** @param {boolean} disabled */
   setDisabled(disabled) {
-    this.getNativeControl_().disabled = disabled;
+    this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(cssClasses.DISABLED);
     } else {
       this.adapter_.removeClass(cssClasses.DISABLED);
     }
   }
 
-  /** @return {?string} */
-  getValue() {
-    return this.getNativeControl_().value;
-  }
-
-  /** @param {?string} value */
-  setValue(value) {
-    this.getNativeControl_().value = value;
-  }
-
   /**
    * Handles the animationend event for the checkbox
    */
@@ -198,12 +167,12 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @private */
   transitionCheckState_() {
-    const nativeCb = this.adapter_.getNativeControl();
-    if (!nativeCb) {
+    if (!this.adapter_.hasNativeControl()) {
       return;
     }
     const oldState = this.currentCheckState_;
-    const newState = this.determineCheckState_(nativeCb);
+    const newState = this.determineCheckState_();
+
     if (oldState === newState) {
       return;
     }
@@ -230,21 +199,20 @@ class MDCCheckboxFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCSelectionControlState} nativeCb
    * @return {string}
    * @private
    */
-  determineCheckState_(nativeCb) {
+  determineCheckState_() {
     const {
       TRANSITION_STATE_INDETERMINATE,
       TRANSITION_STATE_CHECKED,
       TRANSITION_STATE_UNCHECKED,
     } = strings;
 
-    if (nativeCb.indeterminate) {
+    if (this.adapter_.isIndeterminate()) {
       return TRANSITION_STATE_INDETERMINATE;
     }
-    return nativeCb.checked ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
+    return this.adapter_.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
   }
 
   /**
@@ -287,7 +255,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   updateAriaChecked_() {
     // Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
-    if (this.isIndeterminate()) {
+    if (this.adapter_.isIndeterminate()) {
       this.adapter_.setNativeControlAttr(
         strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
     } else {

packages/mdc-checkbox/index.js

@@ -93,6 +93,10 @@ class MDCCheckbox extends MDCComponent {
       setNativeControlAttr: (attr, value) => this.nativeCb_.setAttribute(attr, value),
       removeNativeControlAttr: (attr) => this.nativeCb_.removeAttribute(attr),
       getNativeControl: () => this.nativeCb_,
+      isIndeterminate: () => this.indeterminate,
+      isChecked: () => this.checked,
+      hasNativeControl: () => !!this.nativeCb_,
+      setNativeControlDisabled: (disabled) => this.nativeCb_.disabled = disabled,
       forceLayout: () => this.root_.offsetWidth,
       isAttachedToDOM: () => Boolean(this.root_.parentNode),
     });
@@ -105,27 +109,27 @@ class MDCCheckbox extends MDCComponent {
 
   /** @return {boolean} */
   get checked() {
-    return this.foundation_.isChecked();
+    return this.nativeCb_.checked;
   }
 
   /** @param {boolean} checked */
   set checked(checked) {
-    this.foundation_.setChecked(checked);
+    this.nativeCb_.checked = checked;
   }
 
   /** @return {boolean} */
   get indeterminate() {
-    return this.foundation_.isIndeterminate();
+    return this.nativeCb_.indeterminate;
   }
 
   /** @param {boolean} indeterminate */
   set indeterminate(indeterminate) {
-    this.foundation_.setIndeterminate(indeterminate);
+    this.nativeCb_.indeterminate = indeterminate;
   }
 
   /** @return {boolean} */
   get disabled() {
-    return this.foundation_.isDisabled();
+    return this.nativeCb_.disabled;
   }
 
   /** @param {boolean} disabled */
@@ -135,12 +139,12 @@ class MDCCheckbox extends MDCComponent {
 
   /** @return {?string} */
   get value() {
-    return this.foundation_.getValue();
+    return this.nativeCb_.value;
   }
 
   /** @param {?string} value */
   set value(value) {
-    this.foundation_.setValue(value);
+    this.nativeCb_.value = value;
   }
 
   destroy() {