perf(material-experimental/mdc-checkbox): reduce bundle size

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -25,7 +25,6 @@ ng_module(
         "//src/material-experimental/mdc-core",
         "//src/material/checkbox",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@material/checkbox",

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -13,28 +13,21 @@
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
-@mixin private-checkbox-styles-with-color($color, $mdcColor) {
+@mixin private-checkbox-styles-with-color($color, $mdc-color) {
   $on-surface: mdc-theme-color.prop-value(on-surface);
   $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
   $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
 
   @include mdc-checkbox-theme.theme((
-    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdcColor}),
+    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
 
     selected-focus-icon-color: $color,
     selected-hover-icon-color: $color,
-    selected-hover-state-layer-color: $color,
     selected-icon-color: $color,
     selected-pressed-icon-color: $color,
     unselected-focus-icon-color: $color,
     unselected-hover-icon-color: $color,
 
-    selected-focus-state-layer-color: $on-surface,
-    selected-pressed-state-layer-color: $on-surface,
-    unselected-focus-state-layer-color: $on-surface,
-    unselected-hover-state-layer-color: $on-surface,
-    unselected-pressed-state-layer-color: $on-surface,
-
     disabled-selected-icon-color: $disabled-color,
     disabled-unselected-icon-color: $disabled-color,
 
@@ -45,12 +38,12 @@
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
 // checkbox is selected.
-@mixin _selected-ripple-colors($theme, $mdcColor) {
+@mixin _selected-ripple-colors($theme, $mdc-color) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
       @include ripple-theme.color((
           foreground: (
-              base: mdc-theme-color.prop-value($mdcColor)
+              base: mdc-theme-color.prop-value($mdc-color)
           ),
       ));
     }

src/material-experimental/mdc-checkbox/checkbox.html

@@ -5,7 +5,7 @@
     <div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
     <input #nativeCheckbox
            type="checkbox"
-           [ngClass]="_classes"
+           class="mdc-checkbox__native-control"
            [attr.aria-checked]="_getAriaChecked()"
            [attr.aria-label]="ariaLabel || null"
            [attr.aria-labelledby]="ariaLabelledby"

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-@use '@material/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
@@ -9,8 +9,10 @@
 @use '../../material/core/style/layout-common';
 @use '../../material/core/style/vendor-prefixes';
 
-@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-checkbox.static-styles($query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 // Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
 @mixin _ripple-base-styles() {
@@ -27,7 +29,23 @@
   .mdc-checkbox {
     // MDC theme styles also include structural styles so we have to include the theme at least
     // once here. The values will be overwritten by our own theme file afterwards.
-    @include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
+    @include mdc-helpers.disable-fallback-declarations {
+      @include mdc-checkbox-theme.theme-styles(map.merge(mdc-checkbox-theme.$light-theme, (
+        // Exclude all of the ripple-related styles.
+        selected-focus-state-layer-color: null,
+        selected-focus-state-layer-opacity: null,
+        selected-hover-state-layer-color: null,
+        selected-hover-state-layer-opacity: null,
+        selected-pressed-state-layer-color: null,
+        selected-pressed-state-layer-opacity: null,
+        unselected-focus-state-layer-color: null,
+        unselected-focus-state-layer-opacity: null,
+        unselected-hover-state-layer-color: null,
+        unselected-hover-state-layer-opacity: null,
+        unselected-pressed-state-layer-color: null,
+        unselected-pressed-state-layer-opacity: null,
+      )));
+    }
 
     // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple
     // styles. We currently don't use the MDC ripple due to size concerns, therefore we need to

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -126,6 +126,7 @@ export class MatCheckbox
   }
   set checked(checked: BooleanInput) {
     this._checked = coerceBooleanProperty(checked);
+    this._changeDetectorRef.markForCheck();
   }
   private _checked = false;
 
@@ -192,9 +193,6 @@ export class MatCheckbox
   /** The `MDCCheckboxFoundation` instance for this checkbox. */
   _checkboxFoundation: MDCCheckboxFoundation;
 
-  /** The set of classes that should be applied to the native input. */
-  _classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};
-
   /** ControlValueAccessor onChange */
   private _cvaOnChange = (_: boolean) => {};
 
@@ -211,8 +209,8 @@ export class MatCheckbox
 
   /** The `MDCCheckboxAdapter` instance for this checkbox. */
   private _checkboxAdapter: MDCCheckboxAdapter = {
-    addClass: className => this._setClass(className, true),
-    removeClass: className => this._setClass(className, false),
+    addClass: className => this._nativeCheckbox.nativeElement.classList.add(className),
+    removeClass: className => this._nativeCheckbox.nativeElement.classList.remove(className),
     forceLayout: () => this._checkbox.nativeElement.offsetWidth,
     hasNativeControl: () => !!this._nativeCheckbox,
     isAttachedToDOM: () => !!this._checkbox.nativeElement.parentNode,
@@ -371,12 +369,6 @@ export class MatCheckbox
     return this.indeterminate ? 'mixed' : 'false';
   }
 
-  /** Sets whether the given CSS class should be applied to the native input. */
-  private _setClass(cssClass: string, active: boolean) {
-    this._classes[cssClass] = active;
-    this._changeDetectorRef.markForCheck();
-  }
-
   /**
    * Syncs the indeterminate value with the checkbox DOM node.
    *

src/material-experimental/mdc-checkbox/module.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {_MatCheckboxRequiredValidatorModule} from '@angular/material/checkbox';
 import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
 import {MatCheckbox} from './checkbox';
 
 @NgModule({
-  imports: [MatCommonModule, MatRippleModule, CommonModule, _MatCheckboxRequiredValidatorModule],
+  imports: [MatCommonModule, MatRippleModule, _MatCheckboxRequiredValidatorModule],
   exports: [MatCheckbox, MatCommonModule, _MatCheckboxRequiredValidatorModule],
   declarations: [MatCheckbox],
 })