fix(material/slide-toggle): disable ripples when animations are disabled (#22713)

Fixes that the ripples of the slide toggle weren't being disabled when all animations are disabled.

Author: crisbeto

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

@@ -49,6 +49,12 @@ const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
   exitDuration: numbers.FG_DEACTIVATION_MS,
 };
 
+/** Configuration for ripples when animations are disabled. */
+const NOOP_RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
+  enterDuration: 0,
+  exitDuration: 0
+};
+
 /** @docs-private */
 export const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -81,7 +87,7 @@ export class MatSlideToggleChange {
     '[class.mat-warn]': 'color === "warn"',
     '[class.mat-mdc-slide-toggle-focused]': '_focused',
     '[class.mat-mdc-slide-toggle-checked]': 'checked',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    '[class._mat-animation-noopable]': '_noopAnimations',
   },
   exportAs: 'matSlideToggle',
   encapsulation: ViewEncapsulation.None,
@@ -111,7 +117,10 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   _focused: boolean;
 
   /** Configuration for the underlying ripple. */
-  _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
+  _rippleAnimation: RippleAnimationConfig;
+
+  /** Whether noop animations are enabled. */
+  _noopAnimations: boolean;
 
   /** The color palette  for this slide toggle. */
   @Input() color: ThemePalette;
@@ -201,9 +210,12 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
               @Attribute('tabindex') tabIndex: string,
               @Inject(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS)
                   public defaults: MatSlideToggleDefaultOptions,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     this.tabIndex = parseInt(tabIndex) || 0;
     this.color = defaults.color || 'accent';
+    this._noopAnimations = animationMode === 'NoopAnimations';
+    this._rippleAnimation = this._noopAnimations ?
+      NOOP_RIPPLE_ANIMATION_CONFIG : RIPPLE_ANIMATION_CONFIG;
   }
 
   ngAfterViewInit() {

src/material/slide-toggle/slide-toggle.html

@@ -23,7 +23,7 @@
            [matRippleDisabled]="disableRipple || disabled"
            [matRippleCentered]="true"
            [matRippleRadius]="20"
-           [matRippleAnimation]="{enterDuration: 150}">
+           [matRippleAnimation]="{enterDuration: _noopAnimations ? 0 : 150}">
 
         <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
       </div>

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

@@ -88,7 +88,7 @@ const _MatSlideToggleMixinBase:
     '[class.mat-checked]': 'checked',
     '[class.mat-disabled]': 'disabled',
     '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    '[class._mat-animation-noopable]': '_noopAnimations',
   },
   templateUrl: 'slide-toggle.html',
   styleUrls: ['slide-toggle.css'],
@@ -109,6 +109,9 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   private _required: boolean = false;
   private _checked: boolean = false;
 
+  /** Whether noop animations are enabled. */
+  _noopAnimations: boolean;
+
   /** Reference to the thumb HTMLElement. */
   @ViewChild('thumbContainer') _thumbEl: ElementRef;
 
@@ -165,10 +168,11 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
               @Attribute('tabindex') tabIndex: string,
               @Inject(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS)
                   public defaults: MatSlideToggleDefaultOptions,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef);
     this.tabIndex = parseInt(tabIndex) || 0;
     this.color = this.defaultColor = defaults.color || 'accent';
+    this._noopAnimations = animationMode === 'NoopAnimations';
   }
 
   ngAfterContentInit() {

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

@@ -11,8 +11,8 @@ export declare const MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR: Provider;
 export declare const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: any;
 
 export declare class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple {
-    _animationMode?: string | undefined;
     _inputElement: ElementRef<HTMLInputElement>;
+    _noopAnimations: boolean;
     _thumbBarEl: ElementRef;
     _thumbEl: ElementRef;
     ariaLabel: string | null;
@@ -28,7 +28,7 @@ export declare class MatSlideToggle extends _MatSlideToggleMixinBase implements
     get required(): boolean;
     set required(value: boolean);
     readonly toggleChange: EventEmitter<void>;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, tabIndex: string, defaults: MatSlideToggleDefaultOptions, _animationMode?: string | undefined);
+    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, tabIndex: string, defaults: MatSlideToggleDefaultOptions, animationMode?: string);
     _onChangeEvent(event: Event): void;
     _onInputClick(event: Event): void;
     _onLabelTextChange(): void;