fix(material-experimental/mdc-slider): disable animations when noop module is included (#22649)

Fixes that the MDC-based slider wasn't disabling its animations when noop animations are enabled.

Author: crisbeto

src/material-experimental/mdc-slider/slider.scss

@@ -1,15 +1,11 @@
 @use '@material/slider/slider' as mdc-slider;
-@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
 @include mdc-slider.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 $mat-slider-min-size: 128px !default;
 $mat-slider-horizontal-margin: 8px !default;
 
-// TODO: disabled until we implement the new MDC slider.
-// @include mdc-slider-core-styles($query: $mat-base-styles-without-animation-query);
-
 // Overwrites the mdc-slider default styles to match the visual appearance of the
 // Angular Material standard slider. This involves making the slider an inline-block
 // element, aligning it in the vertical middle of a line, specifying a default minimum
@@ -29,32 +25,11 @@ $mat-slider-horizontal-margin: 8px !default;
   width: auto;
   min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
 
-  @include a11y.high-contrast(active, off) {
-    // The slider track isn't visible in high contrast mode so we work
-    // around it by setting an outline and removing the height to make it look solid.
-    .mdc-slider__track-container {
-      height: 0;
-      outline: solid 2px;
-      margin-top: 1px;
-    }
-
-    // Adds an outline around the thumb label so it doesn't just float on top of the slider.
-    .mdc-slider__pin-value-marker {
-      outline: solid 1px;
+  &._mat-animation-noopable {
+    &.mdc-slider--discrete .mdc-slider__thumb,
+    &.mdc-slider--discrete .mdc-slider__track--active_fill,
+    .mdc-slider__value-indicator {
+      transition: none;
     }
   }
 }
-
-// In order to make it possible for developers to disable animations for a  slider,
-// we only activate the MDC slider animation styles if animations are enabled.
-.mat-mdc-slider:not(._mat-animation-noopable) {
-  // TODO: disabled until we implement the new MDC slider.
-  // @include mdc-slider-core-styles($query: animation);
-}
-
-// Sliders without a thumb label (aka non-discrete) currently cannot have ticks
-// enabled. This breaks backwards compatibility with the standard Angular Material
-// slider, so we manually ensure that ticks can be rendered.
-.mat-slider-has-ticks:not(.mat-slider-disabled) .mdc-slider__track-marker-container {
-  visibility: visible;
-}

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

@@ -51,6 +51,7 @@ import {
   RippleRef,
   RippleState,
 } from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {SpecificEventListener, EventType} from '@material/base/types';
 import {MDCSliderAdapter, MDCSliderFoundation, Thumb, TickMark} from '@material/slider';
 import {Subscription} from 'rxjs';
@@ -206,14 +207,15 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
 
   /** Handles displaying the hover ripple. */
   private _showHoverRipple(): void {
-    if (!this._isShowingRipple(this._hoverRippleRef)) {
+    if (!this._slider._noopAnimations && !this._isShowingRipple(this._hoverRippleRef)) {
       this._hoverRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 });
       this._hoverRippleRef?.element.classList.add('mat-mdc-slider-hover-ripple');
     }
   }
 
   /** Handles displaying the focus ripple. */
   private _showFocusRipple(): void {
+    // Show the focus ripple event if noop animations are enabled.
     if (!this._isShowingRipple(this._focusRippleRef)) {
       this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 });
       this._focusRippleRef?.element.classList.add('mat-mdc-slider-focus-ripple');
@@ -222,7 +224,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
 
   /** Handles displaying the active ripple. */
   private _showActiveRipple(): void {
-    if (!this._isShowingRipple(this._activeRippleRef)) {
+    if (!this._slider._noopAnimations && !this._isShowingRipple(this._activeRippleRef)) {
       this._activeRippleRef = this._showRipple({ enterDuration: 225, exitDuration: 400 });
       this._activeRippleRef?.element.classList.add('mat-mdc-slider-active-ripple');
     }
@@ -529,6 +531,7 @@ const _MatSliderMixinBase:
     '[class.mdc-slider--disabled]': 'disabled',
     '[class.mdc-slider--discrete]': 'discrete',
     '[class.mdc-slider--tick-marks]': 'showTickMarks',
+    '[class._mat-animation-noopable]': '_noopAnimations',
   },
   exportAs: 'matSlider',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -626,6 +629,9 @@ export class MatSlider extends _MatSliderMixinBase
   /** The display value of the end thumb. */
   _endValueIndicatorText: string;
 
+  /** Whether animations have been disabled. */
+  _noopAnimations: boolean;
+
   /**
    * Whether the browser supports pointer events.
    *
@@ -648,10 +654,12 @@ export class MatSlider extends _MatSliderMixinBase
     @Inject(DOCUMENT) document: any,
     @Optional() private _dir: Directionality,
     @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
-    readonly _globalRippleOptions?: RippleGlobalOptions) {
+      readonly _globalRippleOptions?: RippleGlobalOptions,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
       super(_elementRef);
       this._document = document;
       this._window = this._document.defaultView || window;
+      this._noopAnimations = animationMode === 'NoopAnimations';
       this._dirChangeSubscription = this._dir.change.subscribe(() => this._onDirChange());
       this._attachUISyncEventListener();
     }