refactor(material/core): remove mixin class usages

Replaces mixin class usages in the option and option group with input transforms.

Author: crisbeto

src/material/core/option/optgroup.ts

@@ -14,8 +14,8 @@ import {
   Inject,
   Optional,
   InjectionToken,
+  booleanAttribute,
 } from '@angular/core';
-import {CanDisable, mixinDisabled} from '../common-behaviors/disabled';
 import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-parent';
 
 // Notes on the accessibility pattern used for `mat-optgroup`.
@@ -38,10 +38,6 @@ import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-pa
 // 3. `<mat-option aria-labelledby="optionLabel groupLabel"` - This works on Chrome, but Safari
 //     doesn't read out the text at all. Furthermore, on
 
-// Boilerplate for applying mixins to MatOptgroup.
-/** @docs-private */
-const _MatOptgroupMixinBase = mixinDisabled(class {});
-
 // Counter for unique group ids.
 let _uniqueOptgroupIdCounter = 0;
 
@@ -61,7 +57,6 @@ export const MAT_OPTGROUP = new InjectionToken<MatOptgroup>('MatOptgroup');
   templateUrl: 'optgroup.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  inputs: ['disabled'],
   styleUrls: ['optgroup.css'],
   host: {
     'class': 'mat-mdc-optgroup',
@@ -71,18 +66,20 @@ export const MAT_OPTGROUP = new InjectionToken<MatOptgroup>('MatOptgroup');
   },
   providers: [{provide: MAT_OPTGROUP, useExisting: MatOptgroup}],
 })
-export class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable {
+export class MatOptgroup {
   /** Label for the option group. */
   @Input() label: string;
 
+  /** whether the option group is disabled. */
+  @Input({transform: booleanAttribute}) disabled: boolean = false;
+
   /** Unique id for the underlying label. */
   _labelId: string = `mat-optgroup-label-${_uniqueOptgroupIdCounter++}`;
 
   /** Whether the group is in inert a11y mode. */
   _inert: boolean;
 
   constructor(@Inject(MAT_OPTION_PARENT_COMPONENT) @Optional() parent?: MatOptionParentComponent) {
-    super();
     this._inert = parent?.inertGroups ?? false;
   }
 }

src/material/core/option/option.ts

@@ -7,7 +7,6 @@
  */
 
 import {FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
 import {
   Component,
@@ -24,6 +23,7 @@ import {
   EventEmitter,
   QueryList,
   ViewChild,
+  booleanAttribute,
 } from '@angular/core';
 import {Subject} from 'rxjs';
 import {MAT_OPTGROUP, MatOptgroup} from './optgroup';
@@ -101,12 +101,12 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
   @Input() id: string = `mat-option-${_uniqueIdCounter++}`;
 
   /** Whether the option is disabled. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get disabled(): boolean {
     return (this.group && this.group.disabled) || this._disabled;
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
   }
 
   /** Whether ripples for the option are disabled. */

tools/public_api_guard/material/core.md

@@ -4,12 +4,9 @@
 
 ```ts
 
-import { _AbstractConstructor as _AbstractConstructor_2 } from '@angular/material/core';
 import { AbstractControl } from '@angular/forms';
 import { AfterViewChecked } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor as _Constructor_2 } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
@@ -240,13 +237,16 @@ export class MatNativeDateModule {
 }
 
 // @public
-export class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable {
+export class MatOptgroup {
     constructor(parent?: MatOptionParentComponent);
+    disabled: boolean;
     _inert: boolean;
     label: string;
     _labelId: string;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOptgroup, [{ optional: true; }]>;
 }
@@ -259,7 +259,7 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
     _changeDetectorRef: ChangeDetectorRef;
     deselect(emitEvent?: boolean): void;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     get disableRipple(): boolean;
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     _getHostElement(): HTMLElement;
@@ -272,6 +272,8 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
     id: string;
     get multiple(): boolean | undefined;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngAfterViewChecked(): void;
     // (undocumented)
     ngOnDestroy(): void;