refactor(material/checkbox): remove mixin class usages

Replaces mixin class usages in the checkbox with input transforms.

Author: crisbeto

src/dev-app/slider/slider-demo.ts

@@ -14,6 +14,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDialog, MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
+import {ThemePalette} from '@angular/material/core';
 
 interface DialogData {
   color: string;
@@ -40,7 +41,7 @@ interface DialogData {
 export class SliderDemo {
   discrete = true;
   showTickMarks = true;
-  colorModel = 'primary';
+  colorModel: ThemePalette = 'primary';
 
   noop = () => {};
   min = '0';

src/material/checkbox/BUILD.bazel

@@ -20,7 +20,6 @@ ng_module(
     ),
     assets = [":checkbox_scss"] + glob(["**/*.html"]),
     deps = [
-        "//src/cdk/coercion",
         "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/core",

src/material/checkbox/checkbox.html

@@ -18,7 +18,7 @@
            [disabled]="disabled"
            [id]="inputId"
            [required]="required"
-           [tabIndex]="tabIndex"
+           [tabIndex]="disabled ? -1 : tabIndex"
            (blur)="_onBlur()"
            (click)="_onInputClick()"
            (change)="_onInteractionEvent($event)"/>

src/material/checkbox/checkbox.ts

@@ -9,6 +9,7 @@
 import {
   AfterViewInit,
   Attribute,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -18,26 +19,16 @@ import {
   Inject,
   Input,
   NgZone,
+  numberAttribute,
   Optional,
   Output,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {
-  CanColor,
-  CanDisable,
-  CanDisableRipple,
-  HasTabIndex,
-  MatRipple,
-  mixinColor,
-  mixinDisabled,
-  mixinDisableRipple,
-  mixinTabIndex,
-} from '@angular/material/core';
+import {MatRipple} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {FocusableOption} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   MAT_CHECKBOX_DEFAULT_OPTIONS,
   MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
@@ -79,20 +70,6 @@ let nextUniqueId = 0;
 // Default checkbox configuration.
 const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
 
-// Boilerplate for applying mixins to MatCheckbox.
-/** @docs-private */
-const _MatCheckboxMixinBase = mixinTabIndex(
-  mixinColor(
-    mixinDisableRipple(
-      mixinDisabled(
-        class {
-          constructor(public _elementRef: ElementRef) {}
-        },
-      ),
-    ),
-  ),
-);
-
 @Component({
   selector: 'mat-checkbox',
   templateUrl: 'checkbox.html',
@@ -108,24 +85,14 @@ const _MatCheckboxMixinBase = mixinTabIndex(
     // Add classes that users can use to more easily target disabled or checked checkboxes.
     '[class.mat-mdc-checkbox-disabled]': 'disabled',
     '[class.mat-mdc-checkbox-checked]': 'checked',
+    '[class]': 'color ? "mat-" + color : "mat-accent"',
   },
   providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR],
-  inputs: ['disableRipple', 'color', 'tabIndex'],
   exportAs: 'matCheckbox',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatCheckbox
-  extends _MatCheckboxMixinBase
-  implements
-    AfterViewInit,
-    ControlValueAccessor,
-    CanColor,
-    CanDisable,
-    HasTabIndex,
-    CanDisableRipple,
-    FocusableOption
-{
+export class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
   /** Focuses the checkbox. */
   focus() {
     this._inputElement.nativeElement.focus();
@@ -179,14 +146,7 @@ export class MatCheckbox
   }
 
   /** Whether the checkbox is required. */
-  @Input()
-  get required(): boolean {
-    return this._required;
-  }
-  set required(value: BooleanInput) {
-    this._required = coerceBooleanProperty(value);
-  }
-  private _required: boolean;
+  @Input({transform: booleanAttribute}) required: boolean;
 
   /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
   @Input() labelPosition: 'before' | 'after' = 'after';
@@ -203,12 +163,24 @@ export class MatCheckbox
   /** The value attribute of the native input element */
   @Input() value: string;
 
+  /** Whether the checkbox has a ripple. */
+  @Input({transform: booleanAttribute}) disableRipple: boolean;
+
   /** The native `<input type="checkbox">` element */
   @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
   /** The native `<label>` element */
   @ViewChild('label') _labelElement: ElementRef<HTMLInputElement>;
 
+  /** Tabindex for the checkbox. */
+  @Input({transform: (value: unknown) => (value == null ? undefined : numberAttribute(value))})
+  tabIndex: number;
+
+  // TODO(crisbeto): this should be a ThemePalette, but some internal apps were abusing
+  // the lack of type checking previously and assigning random strings.
+  /** Palette color of the checkbox. */
+  @Input() color: string | undefined;
+
   /**
    * Reference to the MatRipple instance of the checkbox.
    * @deprecated Considered an implementation detail. To be removed.
@@ -229,16 +201,15 @@ export class MatCheckbox
   private _controlValueAccessorChangeFn: (value: any) => void = () => {};
 
   constructor(
-    elementRef: ElementRef<HTMLElement>,
+    public _elementRef: ElementRef<HTMLElement>,
     private _changeDetectorRef: ChangeDetectorRef,
     private _ngZone: NgZone,
     @Attribute('tabindex') tabIndex: string,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
     @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) private _options?: MatCheckboxDefaultOptions,
   ) {
-    super(elementRef);
     this._options = this._options || defaults;
-    this.color = this.defaultColor = this._options.color || defaults.color;
+    this.color = this._options.color || defaults.color;
     this.tabIndex = parseInt(tabIndex) || 0;
     this.id = this._uniqueId = `mat-mdc-checkbox-${++nextUniqueId}`;
   }
@@ -248,33 +219,26 @@ export class MatCheckbox
   }
 
   /** Whether the checkbox is checked. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get checked(): boolean {
     return this._checked;
   }
-  set checked(value: BooleanInput) {
-    const checked = coerceBooleanProperty(value);
-
-    if (checked != this.checked) {
-      this._checked = checked;
+  set checked(value: boolean) {
+    if (value != this.checked) {
+      this._checked = value;
       this._changeDetectorRef.markForCheck();
     }
   }
   private _checked: boolean = false;
 
-  /**
-   * Whether the checkbox is disabled. This fully overrides the implementation provided by
-   * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
-   */
-  @Input()
-  override get disabled(): boolean {
+  /** Whether the checkbox is disabled. */
+  @Input({transform: booleanAttribute})
+  get disabled(): boolean {
     return this._disabled;
   }
-  override set disabled(value: BooleanInput) {
-    const newValue = coerceBooleanProperty(value);
-
-    if (newValue !== this.disabled) {
-      this._disabled = newValue;
+  set disabled(value: boolean) {
+    if (value !== this.disabled) {
+      this._disabled = value;
       this._changeDetectorRef.markForCheck();
     }
   }
@@ -286,13 +250,13 @@ export class MatCheckbox
    * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
    * set to false.
    */
-  @Input()
+  @Input({transform: booleanAttribute})
   get indeterminate(): boolean {
     return this._indeterminate;
   }
-  set indeterminate(value: BooleanInput) {
+  set indeterminate(value: boolean) {
     const changed = value != this._indeterminate;
-    this._indeterminate = coerceBooleanProperty(value);
+    this._indeterminate = value;
 
     if (changed) {
       if (this._indeterminate) {

tools/public_api_guard/material/checkbox.md

@@ -4,20 +4,13 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { CheckboxRequiredValidator } from '@angular/forms';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
-import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i3 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
@@ -39,8 +32,8 @@ export function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOption
 export const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
 // @public (undocumented)
-export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit, ControlValueAccessor, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
-    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
+export class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
+    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
     protected _animationClasses: {
         uncheckedToChecked: string;
         uncheckedToIndeterminate: string;
@@ -56,17 +49,21 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
     ariaLabelledby: string | null;
     readonly change: EventEmitter<MatCheckboxChange>;
     get checked(): boolean;
-    set checked(value: BooleanInput);
+    set checked(value: boolean);
+    color: string | undefined;
     protected _createChangeEvent(isChecked: boolean): MatCheckboxChange;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
+    disableRipple: boolean;
+    // (undocumented)
+    _elementRef: ElementRef<HTMLElement>;
     focus(): void;
     protected _getAnimationTargetElement(): HTMLInputElement;
     // (undocumented)
     protected _handleInputClick(): void;
     id: string;
     get indeterminate(): boolean;
-    set indeterminate(value: BooleanInput);
+    set indeterminate(value: boolean);
     readonly indeterminateChange: EventEmitter<boolean>;
     _inputElement: ElementRef<HTMLInputElement>;
     get inputId(): string;
@@ -76,6 +73,18 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
     labelPosition: 'before' | 'after';
     name: string | null;
     // (undocumented)
+    static ngAcceptInputType_checked: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disableRipple: unknown;
+    // (undocumented)
+    static ngAcceptInputType_indeterminate: unknown;
+    // (undocumented)
+    static ngAcceptInputType_required: unknown;
+    // (undocumented)
+    static ngAcceptInputType_tabIndex: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     _onBlur(): void;
@@ -92,18 +101,18 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
     registerOnChange(fn: (value: any) => void): void;
     // (undocumented)
     registerOnTouched(fn: any): void;
-    get required(): boolean;
-    set required(value: BooleanInput);
+    required: boolean;
     // @deprecated
     ripple: MatRipple;
     // (undocumented)
     setDisabledState(isDisabled: boolean): void;
+    tabIndex: number;
     toggle(): void;
     value: string;
     // (undocumented)
     writeValue(value: any): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
 }