import * as i1 from '@angular/cdk/bidi';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, inject, Optional, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, Directive, Output, NgModule } from '@angular/core';
import * as i2$1 from '@angular/material/core';
import { MatRipple, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatRippleModule } from '@angular/material/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
/**
* Injection token that can be used for a `MatSlider` to provide itself as a
* parent to the `MatSliderThumb` and `MatSliderRangeThumb`.
* Used primarily to avoid circular imports.
* @docs-private
*/
const MAT_SLIDER = new InjectionToken('_MatSlider');
/**
* Injection token that can be used to query for a `MatSliderThumb`.
* Used primarily to avoid circular imports.
* @docs-private
*/
const MAT_SLIDER_THUMB = new InjectionToken('_MatSliderThumb');
/**
* Injection token that can be used to query for a `MatSliderRangeThumb`.
* Used primarily to avoid circular imports.
* @docs-private
*/
const MAT_SLIDER_RANGE_THUMB = new InjectionToken('_MatSliderRangeThumb');
/**
* Injection token that can be used to query for a `MatSliderVisualThumb`.
* Used primarily to avoid circular imports.
* @docs-private
*/
const MAT_SLIDER_VISUAL_THUMB = new InjectionToken('_MatSliderVisualThumb');
/**
* A simple change event emitted by the MatSlider component.
* @deprecated Use event bindings directly on the MatSliderThumbs for `change` and `input` events. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
class MatSliderChange {
}
/**
* The visual slider thumb.
*
* Handles the slider thumb ripple states (hover, focus, and active),
* and displaying the value tooltip on discrete sliders.
* @docs-private
*/
class MatSliderVisualThumb {
constructor(_cdr, _ngZone, _elementRef, _slider) {
this._cdr = _cdr;
this._ngZone = _ngZone;
this._slider = _slider;
/** Whether the slider thumb is currently being hovered. */
this._isHovered = false;
/** Whether the slider thumb is currently being pressed. */
this._isActive = false;
/** Whether the value indicator tooltip is visible. */
this._isValueIndicatorVisible = false;
this._onPointerMove = (event) => {
if (this._sliderInput._isFocused) {
return;
}
const rect = this._hostElement.getBoundingClientRect();
const isHovered = this._slider._isCursorOnSliderThumb(event, rect);
this._isHovered = isHovered;
if (isHovered) {
this._showHoverRipple();
}
else {
this._hideRipple(this._hoverRippleRef);
}
};
this._onMouseLeave = () => {
this._isHovered = false;
this._hideRipple(this._hoverRippleRef);
};
this._onFocus = () => {
// We don't want to show the hover ripple on top of the focus ripple.
// Happen when the users cursor is over a thumb and then the user tabs to it.
this._hideRipple(this._hoverRippleRef);
this._showFocusRipple();
this._hostElement.classList.add('mdc-slider__thumb--focused');
};
this._onBlur = () => {
// Happens when the user tabs away while still dragging a thumb.
if (!this._isActive) {
this._hideRipple(this._focusRippleRef);
}
// Happens when the user tabs away from a thumb but their cursor is still over it.
if (this._isHovered) {
this._showHoverRipple();
}
this._hostElement.classList.remove('mdc-slider__thumb--focused');
};
this._onDragStart = (event) => {
if (event.button !== 0) {
return;
}
this._isActive = true;
this._showActiveRipple();
};
this._onDragEnd = () => {
this._isActive = false;
this._hideRipple(this._activeRippleRef);
// Happens when the user starts dragging a thumb, tabs away, and then stops dragging.
if (!this._sliderInput._isFocused) {
this._hideRipple(this._focusRippleRef);
}
};
this._hostElement = _elementRef.nativeElement;
}
ngAfterViewInit() {
this._ripple.radius = 24;
this._sliderInput = this._slider._getInput(this.thumbPosition);
this._sliderInputEl = this._sliderInput._hostElement;
const input = this._sliderInputEl;
// These listeners don't update any data bindings so we bind them outside
// of the NgZone to prevent Angular from needlessly running change detection.
this._ngZone.runOutsideAngular(() => {
input.addEventListener('pointermove', this._onPointerMove);
input.addEventListener('pointerdown', this._onDragStart);
input.addEventListener('pointerup', this._onDragEnd);
input.addEventListener('pointerleave', this._onMouseLeave);
input.addEventListener('focus', this._onFocus);
input.addEventListener('blur', this._onBlur);
});
}
ngOnDestroy() {
const input = this._sliderInputEl;
input.removeEventListener('pointermove', this._onPointerMove);
input.removeEventListener('pointerdown', this._onDragStart);
input.removeEventListener('pointerup', this._onDragEnd);
input.removeEventListener('pointerleave', this._onMouseLeave);
input.removeEventListener('focus', this._onFocus);
input.removeEventListener('blur', this._onBlur);
}
/** Handles displaying the hover ripple. */
_showHoverRipple() {
if (!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. */
_showFocusRipple() {
// Show the focus ripple event if noop animations are enabled.
if (!this._isShowingRipple(this._focusRippleRef)) {
this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 }, true);
this._focusRippleRef?.element.classList.add('mat-mdc-slider-focus-ripple');
}
}
/** Handles displaying the active ripple. */
_showActiveRipple() {
if (!this._isShowingRipple(this._activeRippleRef)) {
this._activeRippleRef = this._showRipple({ enterDuration: 225, exitDuration: 400 });
this._activeRippleRef?.element.classList.add('mat-mdc-slider-active-ripple');
}
}
/** Whether the given rippleRef is currently fading in or visible. */
_isShowingRipple(rippleRef) {
return rippleRef?.state === 0 /* RippleState.FADING_IN */ || rippleRef?.state === 1 /* RippleState.VISIBLE */;
}
/** Manually launches the slider thumb ripple using the specified ripple animation config. */
_showRipple(animation, ignoreGlobalRippleConfig) {
if (this._slider.disabled) {
return;
}
this._showValueIndicator();
if (this._slider._isRange) {
const sibling = this._slider._getThumb(this.thumbPosition === 1 /* _MatThumb.START */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
sibling._showValueIndicator();
}
if (this._slider._globalRippleOptions?.disabled && !ignoreGlobalRippleConfig) {
return;
}
return this._ripple.launch({
animation: this._slider._noopAnimations ? { enterDuration: 0, exitDuration: 0 } : animation,
centered: true,
persistent: true,
});
}
/**
* Fades out the given ripple.
* Also hides the value indicator if no ripple is showing.
*/
_hideRipple(rippleRef) {
rippleRef?.fadeOut();
if (this._isShowingAnyRipple()) {
return;
}
if (!this._slider._isRange) {
this._hideValueIndicator();
}
const sibling = this._getSibling();
if (!sibling._isShowingAnyRipple()) {
this._hideValueIndicator();
sibling._hideValueIndicator();
}
}
/** Shows the value indicator ui. */
_showValueIndicator() {
this._hostElement.classList.add('mdc-slider__thumb--with-indicator');
}
/** Hides the value indicator ui. */
_hideValueIndicator() {
this._hostElement.classList.remove('mdc-slider__thumb--with-indicator');
}
_getSibling() {
return this._slider._getThumb(this.thumbPosition === 1 /* _MatThumb.START */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
}
/** Gets the value indicator container's native HTML element. */
_getValueIndicatorContainer() {
return this._valueIndicatorContainer?.nativeElement;
}
/** Gets the native HTML element of the slider thumb knob. */
_getKnob() {
return this._knob.nativeElement;
}
_isShowingAnyRipple() {
return (this._isShowingRipple(this._hoverRippleRef) ||
this._isShowingRipple(this._focusRippleRef) ||
this._isShowingRipple(this._activeRippleRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText" }, host: { classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "