refactor(material/button-toggle): remove mixin class usages

Replaces mixin class usages in the button toggle with input transforms.

Author: crisbeto

src/material/button-toggle/BUILD.bazel

@@ -20,7 +20,6 @@ ng_module(
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
-        "//src/cdk/coercion",
         "//src/cdk/collections",
         "//src/material/core",
         "@npm//@angular/core",

src/material/button-toggle/button-toggle.ts

@@ -7,7 +7,6 @@
  */
 
 import {FocusMonitor} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {
   AfterContentInit,
@@ -31,9 +30,9 @@ import {
   InjectionToken,
   Inject,
   AfterViewInit,
+  booleanAttribute,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 
 /**
  * @deprecated No longer used.
@@ -115,7 +114,6 @@ export class MatButtonToggleChange {
   exportAs: 'matButtonToggleGroup',
 })
 export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
-  private _vertical = false;
   private _multiple = false;
   private _disabled = false;
   private _selectionModel: SelectionModel<MatButtonToggle>;
@@ -160,13 +158,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
   private _name = `mat-button-toggle-group-${uniqueIdCounter++}`;
 
   /** Whether the toggle group is vertical. */
-  @Input()
-  get vertical(): boolean {
-    return this._vertical;
-  }
-  set vertical(value: BooleanInput) {
-    this._vertical = coerceBooleanProperty(value);
-  }
+  @Input({transform: booleanAttribute}) vertical: boolean;
 
   /** Value of the toggle group. */
   @Input()
@@ -198,22 +190,22 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
   }
 
   /** Whether multiple button toggles can be selected. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get multiple(): boolean {
     return this._multiple;
   }
-  set multiple(value: BooleanInput) {
-    this._multiple = coerceBooleanProperty(value);
+  set multiple(value: boolean) {
+    this._multiple = value;
     this._markButtonsForCheck();
   }
 
   /** Whether multiple button toggle group is disabled. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get disabled(): boolean {
     return this._disabled;
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
     this._markButtonsForCheck();
   }
 
@@ -385,10 +377,6 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
   }
 }
 
-// Boilerplate for applying mixins to the MatButtonToggle class.
-/** @docs-private */
-const _MatButtonToggleBase = mixinDisableRipple(class {});
-
 /** Single button inside of a toggle group. */
 @Component({
   selector: 'mat-button-toggle',
@@ -397,7 +385,6 @@ const _MatButtonToggleBase = mixinDisableRipple(class {});
   encapsulation: ViewEncapsulation.None,
   exportAs: 'matButtonToggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  inputs: ['disableRipple'],
   host: {
     '[class.mat-button-toggle-standalone]': '!buttonToggleGroup',
     '[class.mat-button-toggle-checked]': 'checked',
@@ -412,10 +399,7 @@ const _MatButtonToggleBase = mixinDisableRipple(class {});
     'role': 'presentation',
   },
 })
-export class MatButtonToggle
-  extends _MatButtonToggleBase
-  implements OnInit, AfterViewInit, CanDisableRipple, OnDestroy
-{
+export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   private _checked = false;
 
   /**
@@ -452,6 +436,9 @@ export class MatButtonToggle
   /** Tabindex for the toggle. */
   @Input() tabIndex: number | null;
 
+  /** Whether ripples are disabled on the button toggle. */
+  @Input({transform: booleanAttribute}) disableRipple: boolean;
+
   /** The appearance style of the button. */
   @Input()
   get appearance(): MatButtonToggleAppearance {
@@ -463,15 +450,13 @@ export class MatButtonToggle
   private _appearance: MatButtonToggleAppearance;
 
   /** Whether the button is checked. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get checked(): boolean {
     return this.buttonToggleGroup ? this.buttonToggleGroup._isSelected(this) : this._checked;
   }
-  set checked(value: BooleanInput) {
-    const newValue = coerceBooleanProperty(value);
-
-    if (newValue !== this._checked) {
-      this._checked = newValue;
+  set checked(value: boolean) {
+    if (value !== this._checked) {
+      this._checked = value;
 
       if (this.buttonToggleGroup) {
         this.buttonToggleGroup._syncButtonToggle(this, this._checked);
@@ -482,12 +467,12 @@ export class MatButtonToggle
   }
 
   /** Whether the button is disabled. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get disabled(): boolean {
     return this._disabled || (this.buttonToggleGroup && this.buttonToggleGroup.disabled);
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
   }
   private _disabled: boolean = false;
 
@@ -505,8 +490,6 @@ export class MatButtonToggle
     @Inject(MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS)
     defaultOptions?: MatButtonToggleDefaultOptions,
   ) {
-    super();
-
     const parsedTabIndex = Number(defaultTabIndex);
     this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
     this.buttonToggleGroup = toggleGroup;

tools/public_api_guard/material/button-toggle.md

@@ -4,13 +4,9 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
@@ -32,7 +28,7 @@ export const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;
 export const MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any;
 
 // @public
-export class MatButtonToggle extends _MatButtonToggleBase implements OnInit, AfterViewInit, CanDisableRipple, OnDestroy {
+export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _focusMonitor: FocusMonitor, defaultTabIndex: string, defaultOptions?: MatButtonToggleDefaultOptions);
     get appearance(): MatButtonToggleAppearance;
     set appearance(value: MatButtonToggleAppearance);
@@ -43,15 +39,22 @@ export class MatButtonToggle extends _MatButtonToggleBase implements OnInit, Aft
     buttonToggleGroup: MatButtonToggleGroup;
     readonly change: EventEmitter<MatButtonToggleChange>;
     get checked(): boolean;
-    set checked(value: BooleanInput);
+    set checked(value: boolean);
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
+    disableRipple: boolean;
     focus(options?: FocusOptions): void;
     _getButtonName(): string | null;
     id: string;
     _markForCheck(): void;
     name: string;
     // (undocumented)
+    static ngAcceptInputType_checked: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disableRipple: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -61,7 +64,7 @@ export class MatButtonToggle extends _MatButtonToggleBase implements OnInit, Aft
     tabIndex: number | null;
     value: any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, [{ optional: true; }, null, null, null, { attribute: "tabindex"; }, { optional: true; }]>;
 }
@@ -91,15 +94,21 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     readonly change: EventEmitter<MatButtonToggleChange>;
     _controlValueAccessorChangeFn: (value: any) => void;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     _emitChangeEvent(toggle: MatButtonToggle): void;
     _isPrechecked(toggle: MatButtonToggle): boolean;
     _isSelected(toggle: MatButtonToggle): boolean;
     get multiple(): boolean;
-    set multiple(value: BooleanInput);
+    set multiple(value: boolean);
     get name(): string;
     set name(value: string);
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_multiple: unknown;
+    // (undocumented)
+    static ngAcceptInputType_vertical: unknown;
+    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnInit(): void;
@@ -115,8 +124,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     get value(): any;
     set value(newValue: any);
     readonly valueChange: EventEmitter<any>;
-    get vertical(): boolean;
-    set vertical(value: BooleanInput);
+    vertical: boolean;
     writeValue(value: any): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, false, never>;