import { Directionality } from '@angular/cdk/bidi';
import { Platform } from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { InjectionToken, inject, ChangeDetectorRef, NgZone, Renderer2, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ANIMATION_MODULE_TYPE, booleanAttribute, numberAttribute, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, signal, Directive, Output, NgModule } from '@angular/core';
import { b as RippleState, M as MatRipple, a as MAT_RIPPLE_GLOBAL_OPTIONS } from './ripple-BT3tzh6F.mjs';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { _ as _StructuralStylesLoader } from './structural-styles-BQUT6wsL.mjs';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { M as MatCommonModule } from './common-module-WayjW0Pb.mjs';
import { M as MatRippleModule } from './index-SYVYjXwK.mjs';
import '@angular/cdk/a11y';
import '@angular/cdk/coercion';
/**
* Thumb types: range slider has two thumbs (START, END) whereas single point
* slider only has one thumb (END).
*/
var _MatThumb;
(function (_MatThumb) {
_MatThumb[_MatThumb["START"] = 1] = "START";
_MatThumb[_MatThumb["END"] = 2] = "END";
})(_MatThumb || (_MatThumb = {}));
/** Tick mark enum, for discrete sliders. */
var _MatTickMark;
(function (_MatTickMark) {
_MatTickMark[_MatTickMark["ACTIVE"] = 0] = "ACTIVE";
_MatTickMark[_MatTickMark["INACTIVE"] = 1] = "INACTIVE";
})(_MatTickMark || (_MatTickMark = {}));
/**
* 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://v17.material.angular.dev/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
class MatSliderChange {
/** The MatSliderThumb that was interacted with. */
source;
/** The MatSlider that was interacted with. */
parent;
/** The new value of the source slider. */
value;
}
/**
* 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 {
_cdr = inject(ChangeDetectorRef);
_ngZone = inject(NgZone);
_slider = inject(MAT_SLIDER);
_renderer = inject(Renderer2);
_listenerCleanups;
/** Whether the slider displays a numeric value label upon pressing the thumb. */
discrete;
/** Indicates which slider thumb this input corresponds to. */
thumbPosition;
/** The display value of the slider thumb. */
valueIndicatorText;
/** The MatRipple for this slider thumb. */
_ripple;
/** The slider thumb knob. */
_knob;
/** The slider thumb value indicator container. */
_valueIndicatorContainer;
/** The slider input corresponding to this slider thumb. */
_sliderInput;
/** The native html element of the slider input corresponding to this thumb. */
_sliderInputEl;
/** The RippleRef for the slider thumbs hover state. */
_hoverRippleRef;
/** The RippleRef for the slider thumbs focus state. */
_focusRippleRef;
/** The RippleRef for the slider thumbs active state. */
_activeRippleRef;
/** Whether the slider thumb is currently being hovered. */
_isHovered = false;
/** Whether the slider thumb is currently being pressed. */
_isActive = false;
/** Whether the value indicator tooltip is visible. */
_isValueIndicatorVisible = false;
/** The host native HTML input element. */
_hostElement = inject(ElementRef).nativeElement;
_platform = inject(Platform);
constructor() { }
ngAfterViewInit() {
const sliderInput = this._slider._getInput(this.thumbPosition);
// No-op if the slider isn't configured properly. `MatSlider` will
// throw an error instructing the user how to set up the slider.
if (!sliderInput) {
return;
}
this._ripple.radius = 24;
this._sliderInput = sliderInput;
this._sliderInputEl = this._sliderInput._hostElement;
// 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(() => {
const input = this._sliderInputEl;
const renderer = this._renderer;
this._listenerCleanups = [
renderer.listen(input, 'pointermove', this._onPointerMove),
renderer.listen(input, 'pointerdown', this._onDragStart),
renderer.listen(input, 'pointerup', this._onDragEnd),
renderer.listen(input, 'pointerleave', this._onMouseLeave),
renderer.listen(input, 'focus', this._onFocus),
renderer.listen(input, 'blur', this._onBlur),
];
});
}
ngOnDestroy() {
this._listenerCleanups?.forEach(cleanup => cleanup());
}
_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);
}
};
_onMouseLeave = () => {
this._isHovered = false;
this._hideRipple(this._hoverRippleRef);
};
_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');
};
_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');
};
_onDragStart = (event) => {
if (event.button !== 0) {
return;
}
this._isActive = true;
this._showActiveRipple();
};
_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);
}
// On Safari we need to immediately re-show the hover ripple because
// sliders do not retain focus from pointer events on that platform.
if (this._platform.SAFARI) {
this._showHoverRipple();
}
};
/** 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 === RippleState.FADING_IN || rippleRef?.state === 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 === _MatThumb.START ? _MatThumb.END : _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 === _MatThumb.START ? _MatThumb.END : _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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatSliderVisualThumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MatSliderVisualThumb, isStandalone: true, 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: "@if (discrete) {\n