feat(material/slide-toggle): allow for default color to be configured globally (#22047)

Allows for the `color` of a slide toggle to be configured through a provider.

Fixes #22012.

Author: crisbeto

src/material-experimental/mdc-slide-toggle/slide-toggle-config.ts

@@ -6,17 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {InjectionToken} from '@angular/core';
+import {ThemePalette} from '@angular/material-experimental/mdc-core';
 
 
 /** Default `mat-slide-toggle` options that can be overridden. */
 export interface MatSlideToggleDefaultOptions {
   /** Whether toggle action triggers value changes in slide toggle. */
   disableToggleValue?: boolean;
+
+  /** Default color for slide toggles. */
+  color?: ThemePalette;
 }
 
 /** Injection token to be used to override the default options for `mat-slide-toggle`. */
 export const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS =
   new InjectionToken<MatSlideToggleDefaultOptions>('mat-slide-toggle-default-options', {
     providedIn: 'root',
-    factory: () => ({disableToggleValue: false, disableDragValue: false})
+    factory: () => ({disableToggleValue: false})
   });

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -456,6 +456,22 @@ describe('MDC-based MatSlideToggle without forms', () => {
       expect(testComponent.dragTriggered).toBe(0);
     }));
 
+  it('should be able to change the default color', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [MatSlideToggleModule],
+        declarations: [SlideToggleWithForm],
+        providers: [
+          {provide: MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS, useValue: {color: 'warn'}},
+        ]
+      });
+    const fixture = TestBed.createComponent(SlideToggleWithForm);
+    fixture.detectChanges();
+    const slideToggle = fixture.nativeElement.querySelector('.mat-mdc-slide-toggle');
+    expect(slideToggle.classList).toContain('mat-warn');
+  });
+
   it('should clear static aria attributes from the host node', () => {
     const fixture = TestBed.createComponent(SlideToggleWithStaticAriaAttributes);
     fixture.detectChanges();

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -114,7 +114,7 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
 
   /** The color palette  for this slide toggle. */
-  @Input() color: ThemePalette = 'accent';
+  @Input() color: ThemePalette;
 
   /** Name value will be applied to the input element if present. */
   @Input() name: string | null = null;
@@ -203,6 +203,7 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
                   public defaults: MatSlideToggleDefaultOptions,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     this.tabIndex = parseInt(tabIndex) || 0;
+    this.color = defaults.color || 'accent';
   }
 
   ngAfterViewInit() {

src/material/slide-toggle/slide-toggle-config.ts

@@ -6,12 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {InjectionToken} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 
 /** Default `mat-slide-toggle` options that can be overridden. */
 export interface MatSlideToggleDefaultOptions {
   /** Whether toggle action triggers value changes in slide toggle. */
   disableToggleValue?: boolean;
+
+  /** Default color for slide toggles. */
+  color?: ThemePalette;
 }
 
 /** Injection token to be used to override the default options for `mat-slide-toggle`. */

src/material/slide-toggle/slide-toggle.spec.ts

@@ -407,7 +407,7 @@ describe('MatSlideToggle without forms', () => {
     }));
   });
 
-  describe('custom action configuration', () => {
+  describe('default options', () => {
     it('should not change value on click when click action is noop when using custom a ' +
       'action configuration', () => {
       TestBed
@@ -448,6 +448,22 @@ describe('MatSlideToggle without forms', () => {
       expect(testComponent.dragTriggered).toBe(0);
     });
 
+    it('should be able to change the default color', () => {
+      TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+          imports: [MatSlideToggleModule],
+          declarations: [SlideToggleWithForm],
+          providers: [
+            {provide: MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS, useValue: {color: 'warn'}},
+          ]
+        });
+      const fixture = TestBed.createComponent(SlideToggleWithForm);
+      fixture.detectChanges();
+      const slideToggle = fixture.nativeElement.querySelector('.mat-slide-toggle');
+      expect(slideToggle.classList).toContain('mat-warn');
+    });
+
   });
 
   describe('without label', () => {

src/material/slide-toggle/slide-toggle.ts

@@ -72,7 +72,7 @@ const _MatSlideToggleMixinBase:
     CanDisableRippleCtor &
     CanDisableCtor &
     typeof MatSlideToggleBase =
-        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent'));
+        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase))));
 
 /** Represents a slidable "switch" toggle that can be moved between on and off. */
 @Component({
@@ -168,6 +168,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
     this.tabIndex = parseInt(tabIndex) || 0;
+    this.color = this.defaultColor = defaults.color || 'accent';
   }
 
   ngAfterContentInit() {

tools/public_api_guard/material/slide-toggle.d.ts

@@ -57,6 +57,7 @@ export declare class MatSlideToggleChange {
 }
 
 export interface MatSlideToggleDefaultOptions {
+    color?: ThemePalette;
     disableToggleValue?: boolean;
 }