fix(core): allow for default color and tabindex to be set per instance (#20125)

This is something that came up in #18467. Currently the default values in the `mixinColor` and `mixinTabIndex` are set when the mixin class is created, however we have some components where the default color can be configured through an injection token. These changes add a default field on each instance so that it can be updated after the class is instantiated.

Author: crisbeto

src/material/checkbox/checkbox.ts

@@ -216,7 +216,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     this._options = this._options || {};
 
     if (this._options.color) {
-      this.color = this._options.color;
+      this.color = this.defaultColor = this._options.color;
     }
 
     this.tabIndex = parseInt(tabIndex) || 0;

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

@@ -67,6 +67,18 @@ describe('MixinColor', () => {
       .toContain('mat-accent', 'Expected the default color "mat-accent" to be set.');
   });
 
+  it('should allow for the default color to change after init', () => {
+    const classWithColor = mixinColor(TestClass, 'accent');
+    const instance = new classWithColor();
+
+    expect(instance.testElement.classList).toContain('mat-accent');
+
+    instance.defaultColor = 'warn';
+    instance.color = undefined;
+
+    expect(instance.testElement.classList).toContain('mat-warn');
+  });
+
 });
 
 class TestClass {

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

@@ -13,6 +13,9 @@ import {ElementRef} from '@angular/core';
 export interface CanColor {
   /** Theme color palette for the component. */
   color: ThemePalette;
+
+  /** Default color to fall back to if no value is set. */
+  defaultColor: ThemePalette | undefined;
 }
 
 /** @docs-private */
@@ -31,10 +34,11 @@ export function mixinColor<T extends Constructor<HasElementRef>>(
     base: T, defaultColor?: ThemePalette): CanColorCtor & T {
   return class extends base {
     private _color: ThemePalette;
+    defaultColor = defaultColor;
 
     get color(): ThemePalette { return this._color; }
     set color(value: ThemePalette) {
-      const colorPalette = value || defaultColor;
+      const colorPalette = value || this.defaultColor;
 
       if (colorPalette !== this._color) {
         if (this._color) {

src/material/core/common-behaviors/tabindex.spec.ts

@@ -41,6 +41,18 @@ describe('mixinTabIndex', () => {
       .toBe(0, 'Expected tabIndex to still support 0 as value');
   });
 
+  it('should allow for the default tabIndex to change after init', () => {
+    const classWithMixin = mixinTabIndex(TestClass, 20);
+    const instance = new classWithMixin();
+
+    expect(instance.tabIndex).toBe(20);
+
+    instance.defaultTabIndex = 50;
+    instance.tabIndex = undefined!;
+
+    expect(instance.tabIndex).toBe(50);
+  });
+
 });
 
 class TestClass {

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

@@ -15,6 +15,9 @@ import {CanDisable} from './disabled';
 export interface HasTabIndex {
   /** Tabindex of the component. */
   tabIndex: number;
+
+  /** Tabindex to which to fall back to if no value is set. */
+  defaultTabIndex: number;
 }
 
 /** @docs-private */
@@ -25,11 +28,12 @@ export function mixinTabIndex<T extends Constructor<CanDisable>>(base: T, defaul
     : HasTabIndexCtor & T {
   return class extends base {
     private _tabIndex: number = defaultTabIndex;
+    defaultTabIndex = defaultTabIndex;
 
     get tabIndex(): number { return this.disabled ? -1 : this._tabIndex; }
     set tabIndex(value: number) {
       // If the specified tabIndex value is null or undefined, fall back to the default value.
-      this._tabIndex = value != null ? coerceNumberProperty(value) : defaultTabIndex;
+      this._tabIndex = value != null ? coerceNumberProperty(value) : this.defaultTabIndex;
     }
 
     constructor(...args: any[]) {

src/material/datepicker/datepicker-base.ts

@@ -238,7 +238,7 @@ export interface MatDatepickerControl<D> {
 /** Base class for a datepicker. */
 @Directive()
 export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
-  D = ExtractDateTypeFromSelection<S>> implements OnDestroy, CanColor, OnChanges {
+  D = ExtractDateTypeFromSelection<S>> implements OnDestroy, OnChanges {
   private _scrollStrategy: () => ScrollStrategy;
   private _inputStateChanges = Subscription.EMPTY;
 

tools/public_api_guard/material/core.d.ts

@@ -61,6 +61,7 @@ export declare const JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL =
 
 export interface CanColor {
     color: ThemePalette;
+    defaultColor: ThemePalette | undefined;
 }
 
 export declare type CanColorCtor = Constructor<CanColor>;
@@ -152,6 +153,7 @@ export interface HasInitialized {
 export declare type HasInitializedCtor = Constructor<HasInitialized>;
 
 export interface HasTabIndex {
+    defaultTabIndex: number;
     tabIndex: number;
 }