diff --git a/src/material-experimental/mdc-slider/slider.html b/src/material-experimental/mdc-slider/slider.html index 037735923859..caa46f348407 100644 --- a/src/material-experimental/mdc-slider/slider.html +++ b/src/material-experimental/mdc-slider/slider.html @@ -16,6 +16,7 @@ diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index 0568077ee4d5..3b86bebc857c 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -40,9 +40,14 @@ import { import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { CanColorCtor, + CanDisableRipple, + CanDisableRippleCtor, MatRipple, + MAT_RIPPLE_GLOBAL_OPTIONS, mixinColor, + mixinDisableRipple, RippleAnimationConfig, + RippleGlobalOptions, RippleRef, RippleState, } from '@angular/material/core'; @@ -89,6 +94,9 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { /** The display value of the slider thumb. */ @Input() valueIndicatorText: string; + /** Whether ripples on the slider thumb should be disabled. */ + @Input() disableRipple: boolean = false; + /** The MatRipple for this slider thumb. */ @ViewChild(MatRipple) private readonly _ripple: MatRipple; @@ -99,13 +107,13 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { private _sliderInput: MatSliderThumb; /** The RippleRef for the slider thumbs hover state. */ - private _hoverRippleRef: RippleRef; + private _hoverRippleRef: RippleRef | undefined; /** The RippleRef for the slider thumbs focus state. */ - private _focusRippleRef: RippleRef; + private _focusRippleRef: RippleRef | undefined; /** The RippleRef for the slider thumbs active state. */ - private _activeRippleRef: RippleRef; + private _activeRippleRef: RippleRef | undefined; /** Whether the slider thumb is currently being pressed. */ private _isActive: boolean = false; @@ -199,7 +207,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { private _showHoverRipple(): void { if (!this._isShowingRipple(this._hoverRippleRef)) { this._hoverRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 }); - this._hoverRippleRef.element.classList.add('mat-mdc-slider-hover-ripple'); + this._hoverRippleRef?.element.classList.add('mat-mdc-slider-hover-ripple'); } } @@ -207,7 +215,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { private _showFocusRipple(): void { if (!this._isShowingRipple(this._focusRippleRef)) { this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 }); - this._focusRippleRef.element.classList.add('mat-mdc-slider-focus-ripple'); + this._focusRippleRef?.element.classList.add('mat-mdc-slider-focus-ripple'); } } @@ -215,7 +223,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { private _showActiveRipple(): void { if (!this._isShowingRipple(this._activeRippleRef)) { this._activeRippleRef = this._showRipple({ enterDuration: 225, exitDuration: 400 }); - this._activeRippleRef.element.classList.add('mat-mdc-slider-active-ripple'); + this._activeRippleRef?.element.classList.add('mat-mdc-slider-active-ripple'); } } @@ -225,7 +233,10 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy { } /** Manually launches the slider thumb ripple using the specified ripple animation config. */ - private _showRipple(animation: RippleAnimationConfig): RippleRef { + private _showRipple(animation: RippleAnimationConfig): RippleRef | undefined { + if (this.disableRipple) { + return; + } return this._ripple.launch( {animation, centered: true, persistent: true}, ); @@ -466,8 +477,9 @@ class MatSliderBase { } const _MatSliderMixinBase: CanColorCtor & + CanDisableRippleCtor & typeof MatSliderBase = - mixinColor(MatSliderBase, 'primary'); + mixinColor(mixinDisableRipple(MatSliderBase), 'primary'); /** * Allows users to select from a range of values by moving the slider thumb. It is similar in @@ -487,9 +499,10 @@ const _MatSliderMixinBase: exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - inputs: ['color'], + inputs: ['color', 'disableRipple'], }) -export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnDestroy { +export class MatSlider extends _MatSliderMixinBase + implements AfterViewInit, CanDisableRipple, OnDestroy { /** The slider thumb(s). */ @ViewChildren(MatSliderVisualThumb) _thumbs: QueryList; @@ -592,8 +605,10 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD readonly _cdr: ChangeDetectorRef, readonly _elementRef: ElementRef, private readonly _platform: Platform, + @Inject(DOCUMENT) document: any, @Optional() private _dir: Directionality, - @Inject(DOCUMENT) document: any) { + @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) + readonly _globalRippleOptions?: RippleGlobalOptions) { super(_elementRef); this._document = document; this._window = this._document.defaultView || window; @@ -724,12 +739,18 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD : 'mdc-slider__tick-mark--inactive'; } + /** Whether the slider thumb ripples should be disabled. */ + _isRippleDisabled(): boolean { + return this.disabled || this.disableRipple || !!this._globalRippleOptions?.disabled; + } + static ngAcceptInputType_disabled: BooleanInput; static ngAcceptInputType_discrete: BooleanInput; static ngAcceptInputType_showTickMarks: BooleanInput; static ngAcceptInputType_min: NumberInput; static ngAcceptInputType_max: NumberInput; static ngAcceptInputType_step: NumberInput; + static ngAcceptInputType_disableRipple: BooleanInput; } /** The MDCSliderAdapter implementation. */