refactor(material/core): reduce mixin function boilerplate (#22637)

It seems like the various `*Ctor` interfaces for mixins aren't necessary anymore, because TS infers the type correctly without them. These changes clean up all the usages.

Author: crisbeto

src/material-experimental/mdc-button/button-base.ts

@@ -11,11 +11,8 @@ import {Platform} from '@angular/cdk/platform';
 import {Directive, ElementRef, HostListener, NgZone, ViewChild} from '@angular/core';
 import {
   CanColor,
-  CanColorCtor,
   CanDisable,
-  CanDisableCtor,
   CanDisableRipple,
-  CanDisableRippleCtor,
   MatRipple,
   mixinColor,
   mixinDisabled,
@@ -81,17 +78,14 @@ const HOST_SELECTOR_MDC_CLASS_PAIR: {selector: string, mdcClasses: string[]}[] =
 
 // Boilerplate for applying mixins to MatButton.
 /** @docs-private */
-export class MatButtonMixinCore {
+export const _MatButtonMixin = mixinColor(mixinDisabled(mixinDisableRipple(class {
   constructor(public _elementRef: ElementRef) {}
-}
-
-export const _MatButtonBaseMixin: CanDisableRippleCtor&CanDisableCtor&CanColorCtor&
-    typeof MatButtonMixinCore = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonMixinCore)));
+})));
 
 /** Base class for all buttons.  */
 @Directive()
-export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, CanColor,
-                                                                  CanDisableRipple {
+export class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor,
+                                                              CanDisableRipple {
   /** The ripple animation configuration to use for the buttons. */
   _rippleAnimation: RippleAnimationConfig =
       this._animationMode === 'NoopAnimations' ?

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

@@ -32,8 +32,6 @@ import {
 import {
   ThemePalette,
   RippleAnimationConfig,
-  CanColorCtor,
-  CanDisableCtor,
   mixinColor,
   mixinDisabled,
   CanColor,
@@ -65,14 +63,9 @@ export class MatCheckboxChange {
 
 // Boilerplate for applying mixins to MatCheckbox.
 /** @docs-private */
-class MatCheckboxBase {
+const _MatCheckboxBase = mixinColor(mixinDisabled(class {
   constructor(public _elementRef: ElementRef) {}
-}
-const _MatCheckboxMixinBase:
-    CanColorCtor &
-    CanDisableCtor &
-    typeof MatCheckboxBase =
-        mixinColor(mixinDisabled(MatCheckboxBase));
+}));
 
 
 /** Configuration for the ripple animation. */
@@ -98,7 +91,7 @@ const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit, OnDestroy,
+export class MatCheckbox extends _MatCheckboxBase implements AfterViewInit, OnDestroy,
   ControlValueAccessor, CanColor, CanDisable {
   /**
    * The `aria-label` attribute to use for the input element. In most cases, `aria-labelledby` will

src/material-experimental/mdc-chips/chip.ts

@@ -31,12 +31,9 @@ import {
 } from '@angular/core';
 import {
   CanColor,
-  CanColorCtor,
   CanDisable,
   CanDisableRipple,
-  CanDisableRippleCtor,
   HasTabIndex,
-  HasTabIndexCtor,
   MatRipple,
   MAT_RIPPLE_GLOBAL_OPTIONS,
   mixinColor,
@@ -93,12 +90,7 @@ abstract class MatChipBase {
   constructor(public _elementRef: ElementRef) {}
 }
 
-const _MatChipMixinBase:
-  CanColorCtor &
-  CanDisableRippleCtor &
-  HasTabIndexCtor &
-  typeof MatChipBase =
-    mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);
+const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);
 
 /**
  * Material design styled Chip base component. Used inside the MatChipSet component.

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -20,7 +20,7 @@ import {
   AfterViewInit,
   OnDestroy,
 } from '@angular/core';
-import {CanColor, CanColorCtor, mixinColor} from '@angular/material-experimental/mdc-core';
+import {CanColor, mixinColor} from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {ProgressAnimationEnd} from '@angular/material/progress-bar';
 import {
@@ -34,12 +34,9 @@ import {Directionality} from '@angular/cdk/bidi';
 
 // Boilerplate for applying mixins to MatProgressBar.
 /** @docs-private */
-class MatProgressBarBase {
-  constructor(public _elementRef: ElementRef) { }
-}
-
-const _MatProgressBarMixinBase: CanColorCtor & typeof MatProgressBarBase =
-    mixinColor(MatProgressBarBase, 'primary');
+const _MatProgressBarBase = mixinColor(class {
+  constructor(public _elementRef: ElementRef) {}
+}, 'primary');
 
 export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
 
@@ -64,7 +61,7 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressBar extends _MatProgressBarMixinBase implements AfterViewInit, OnDestroy,
+export class MatProgressBar extends _MatProgressBarBase implements AfterViewInit, OnDestroy,
   CanColor {
 
   constructor(public _elementRef: ElementRef<HTMLElement>,

src/material-experimental/mdc-progress-spinner/progress-spinner.ts

@@ -22,7 +22,7 @@ import {
   MDCCircularProgressAdapter,
   MDCCircularProgressFoundation
 } from '@material/circular-progress';
-import {CanColor, CanColorCtor, mixinColor} from '@angular/material-experimental/mdc-core';
+import {CanColor, mixinColor} from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {
   MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
@@ -31,13 +31,10 @@ import {
 import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 
 // Boilerplate for applying mixins to MatProgressBar.
-class MatProgressSpinnerBase {
+const _MatProgressSpinnerBase = mixinColor(class {
   constructor(public _elementRef: ElementRef) {
   }
-}
-
-const _MatProgressSpinnerMixinBase: CanColorCtor & typeof MatProgressSpinnerBase =
-  mixinColor(MatProgressSpinnerBase, 'primary');
+}, 'primary');
 
 /** Possible mode for a progress spinner. */
 export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
@@ -75,7 +72,7 @@ const BASE_STROKE_WIDTH = 10;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
+export class MatProgressSpinner extends _MatProgressSpinnerBase implements AfterViewInit,
   OnDestroy, CanColor {
 
   /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */

src/material/autocomplete/autocomplete.ts

@@ -30,7 +30,6 @@ import {
 } from '@angular/core';
 import {
   CanDisableRipple,
-  CanDisableRippleCtor,
   MAT_OPTGROUP,
   MAT_OPTION_PARENT_COMPONENT,
   _MatOptgroupBase,
@@ -68,9 +67,7 @@ export interface MatAutocompleteActivatedEvent {
 
 // Boilerplate for applying mixins to MatAutocomplete.
 /** @docs-private */
-class MatAutocompleteBase {}
-const _MatAutocompleteMixinBase: CanDisableRippleCtor & typeof MatAutocompleteBase =
-    mixinDisableRipple(MatAutocompleteBase);
+const _MatAutocompleteMixinBase = mixinDisableRipple(class {});
 
 /** Default `mat-autocomplete` options that can be overridden. */
 export interface MatAutocompleteDefaultOptions {

src/material/badge/badge.ts

@@ -20,18 +20,15 @@ import {
   Renderer2,
   SimpleChanges,
 } from '@angular/core';
-import {CanDisable, CanDisableCtor, mixinDisabled, ThemePalette} from '@angular/material/core';
+import {CanDisable, mixinDisabled, ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 let nextId = 0;
 
 // Boilerplate for applying mixins to MatBadge.
 /** @docs-private */
-class MatBadgeBase {}
-
-const _MatBadgeMixinBase:
-    CanDisableCtor & typeof MatBadgeBase = mixinDisabled(MatBadgeBase);
+const _MatBadgeBase = mixinDisabled(class {});
 
 /** Allowed position options for matBadgePosition */
 export type MatBadgePosition =
@@ -59,7 +56,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
     '[class.mat-badge-disabled]': 'disabled',
   },
 })
-export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
+export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, CanDisable {
   /** Whether the badge has any content. */
   _hasContent = false;
 

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

@@ -36,7 +36,6 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanDisableRipple,
   mixinDisableRipple,
-  CanDisableRippleCtor,
 } from '@angular/material/core';
 
 
@@ -381,9 +380,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
 
 // Boilerplate for applying mixins to the MatButtonToggle class.
 /** @docs-private */
-class MatButtonToggleBase {}
-const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBase =
-    mixinDisableRipple(MatButtonToggleBase);
+const _MatButtonToggleBase = mixinDisableRipple(class {});
 
 /** Single button inside of a toggle group. */
 @Component({
@@ -408,7 +405,7 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
     'role': 'presentation',
   }
 })
-export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit, AfterViewInit,
+export class MatButtonToggle extends _MatButtonToggleBase implements OnInit, AfterViewInit,
   CanDisableRipple, OnDestroy {
 
   private _isSingleSelector = false;

src/material/button/button.ts

@@ -24,9 +24,6 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
-  CanColorCtor,
-  CanDisableCtor,
-  CanDisableRippleCtor,
   MatRipple,
   mixinColor,
   mixinDisabled,
@@ -52,13 +49,9 @@ const BUTTON_HOST_ATTRIBUTES = [
 ];
 
 // Boilerplate for applying mixins to MatButton.
-/** @docs-private */
-class MatButtonBase {
+const _MatButtonBase = mixinColor(mixinDisabled(mixinDisableRipple(class {
   constructor(public _elementRef: ElementRef) {}
-}
-
-const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor &
-    typeof MatButtonBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
+})));
 
 /**
  * Material design button.
@@ -83,7 +76,7 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatButton extends _MatButtonMixinBase
+export class MatButton extends _MatButtonBase
     implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
 
   /** Whether the button is round. */

src/material/checkbox/checkbox.ts

@@ -30,13 +30,9 @@ import {
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanColor,
-  CanColorCtor,
   CanDisable,
-  CanDisableCtor,
   CanDisableRipple,
-  CanDisableRippleCtor,
   HasTabIndex,
-  HasTabIndexCtor,
   MatRipple,
   mixinColor,
   mixinDisabled,
@@ -93,16 +89,9 @@ export class MatCheckboxChange {
 
 // Boilerplate for applying mixins to MatCheckbox.
 /** @docs-private */
-class MatCheckboxBase {
+const _MatCheckboxBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(class {
   constructor(public _elementRef: ElementRef) {}
-}
-const _MatCheckboxMixinBase:
-    HasTabIndexCtor &
-    CanColorCtor &
-    CanDisableRippleCtor &
-    CanDisableCtor &
-    typeof MatCheckboxBase =
-        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase))));
+}))));
 
 
 /**
@@ -133,7 +122,7 @@ const _MatCheckboxMixinBase:
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
+export class MatCheckbox extends _MatCheckboxBase implements ControlValueAccessor,
     AfterViewInit, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
     FocusableOption {
 

src/material/chips/chip-list.ts

@@ -31,7 +31,6 @@ import {
 import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {
   CanUpdateErrorState,
-  CanUpdateErrorStateCtor,
   ErrorStateMatcher,
   mixinErrorState,
 } from '@angular/material/core';
@@ -43,15 +42,13 @@ import {MatChipTextControl} from './chip-text-control';
 
 // Boilerplate for applying mixins to MatChipList.
 /** @docs-private */
-class MatChipListBase {
+const _MatChipListBase = mixinErrorState(class {
   constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
               public _parentForm: NgForm,
               public _parentFormGroup: FormGroupDirective,
               /** @docs-private */
               public ngControl: NgControl) {}
-}
-const _MatChipListMixinBase: CanUpdateErrorStateCtor & typeof MatChipListBase =
-    mixinErrorState(MatChipListBase);
+});
 
 
 // Increasing integer for generating unique ids for chip-list components.
@@ -96,7 +93,7 @@ export class MatChipListChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MatChipList extends _MatChipListMixinBase implements MatFormFieldControl<any>,
+export class MatChipList extends _MatChipListBase implements MatFormFieldControl<any>,
   ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
   /**
    * Implemented as part of MatFormFieldControl.

src/material/chips/chip.ts

@@ -28,12 +28,9 @@ import {
 } from '@angular/core';
 import {
   CanColor,
-  CanColorCtor,
   CanDisable,
   CanDisableRipple,
-  CanDisableRippleCtor,
   HasTabIndex,
-  HasTabIndexCtor,
   MAT_RIPPLE_GLOBAL_OPTIONS,
   mixinColor,
   mixinDisableRipple,
@@ -94,9 +91,7 @@ abstract class MatChipBase {
   constructor(public _elementRef: ElementRef) {}
 }
 
-const _MatChipMixinBase: CanColorCtor & CanDisableRippleCtor &
-    HasTabIndexCtor & typeof MatChipBase =
-      mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);
+const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);
 
 /**
  * Dummy directive to add CSS class to chip avatar.

src/material/core/common-behaviors/color.ts

@@ -18,7 +18,11 @@ export interface CanColor {
   defaultColor: ThemePalette | undefined;
 }
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated No longer necessary to apply to mixin classes. To be made private.
+ * @breaking-change 13.0.0
+ */
 export type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;
 
 /** @docs-private */