@angular/material
Version:
Angular Material
927 lines (924 loc) • 102 kB
JavaScript
import * as i2$1 from '@angular/cdk/bidi';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import * as i1 from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, Optional, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, Directive, Output, NgModule } from '@angular/core';
import * as i2 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 { take } from 'rxjs/operators';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* 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 {
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* 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._isSliderThumbHovered(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 = () => {
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));
}
_isSliderThumbHovered(event, rect) {
const radius = rect.width / 2;
const centerX = rect.x + radius;
const centerY = rect.y + radius;
const dx = event.clientX - centerX;
const dy = event.clientY - centerY;
return Math.pow(dx, 2) + Math.pow(dy, 2) < Math.pow(radius, 2);
}
}
MatSliderVisualThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Component });
MatSliderVisualThumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.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: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSliderVisualThumb, decorators: [{
type: Component,
args: [{ selector: 'mat-slider-visual-thumb', host: {
'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_SLIDER]
}] }]; }, propDecorators: { discrete: [{
type: Input
}], thumbPosition: [{
type: Input
}], valueIndicatorText: [{
type: Input
}], _ripple: [{
type: ViewChild,
args: [MatRipple]
}], _knob: [{
type: ViewChild,
args: ['knob']
}], _valueIndicatorContainer: [{
type: ViewChild,
args: ['valueIndicatorContainer']
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// TODO(wagnermaciel): maybe handle the following edge case:
// 1. start dragging discrete slider
// 2. tab to disable checkbox
// 3. without ending drag, disable the slider
// Boilerplate for applying mixins to MatSlider.
const _MatSliderMixinBase = mixinColor(mixinDisableRipple(class {
constructor(_elementRef) {
this._elementRef = _elementRef;
}
}), 'primary');
/**
* Allows users to select from a range of values by moving the slider thumb. It is similar in
* behavior to the native `<input type="range">` element.
*/
class MatSlider extends _MatSliderMixinBase {
constructor(_ngZone, _cdr, _platform, elementRef, _dir, _globalRippleOptions, animationMode) {
super(elementRef);
this._ngZone = _ngZone;
this._cdr = _cdr;
this._platform = _platform;
this._dir = _dir;
this._globalRippleOptions = _globalRippleOptions;
this._disabled = false;
this._discrete = false;
this._showTickMarks = false;
this._min = 0;
this._max = 100;
this._step = 0;
/**
* Function that will be used to format the value before it is displayed
* in the thumb label. Can be used to format very large number in order
* for them to fit into the slider thumb.
*/
this.displayWith = (value) => `${value}`;
this._rippleRadius = 24;
// The value indicator tooltip text for the visual slider thumb(s).
/** @docs-private */
this.startValueIndicatorText = '';
/** @docs-private */
this.endValueIndicatorText = '';
this._isRange = false;
/** Whether the slider is rtl. */
this._isRtl = false;
this._hasViewInitialized = false;
/**
* The width of the tick mark track.
* The tick mark track width is different from full track width
*/
this._tickMarkTrackWidth = 0;
this._hasAnimation = false;
this._resizeTimer = null;
/** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
this._knobRadius = 8;
/** Whether or not the slider thumbs overlap. */
this._thumbsOverlap = false;
this._noopAnimations = animationMode === 'NoopAnimations';
this._dirChangeSubscription = this._dir.change.subscribe(() => this._onDirChange());
this._isRtl = this._dir.value === 'rtl';
}
/** Whether the slider is disabled. */
get disabled() {
return this._disabled;
}
set disabled(v) {
this._disabled = coerceBooleanProperty(v);
const endInput = this._getInput(2 /* _MatThumb.END */);
const startInput = this._getInput(1 /* _MatThumb.START */);
if (endInput) {
endInput.disabled = this._disabled;
}
if (startInput) {
startInput.disabled = this._disabled;
}
}
/** Whether the slider displays a numeric value label upon pressing the thumb. */
get discrete() {
return this._discrete;
}
set discrete(v) {
this._discrete = coerceBooleanProperty(v);
}
/** Whether the slider displays tick marks along the slider track. */
get showTickMarks() {
return this._showTickMarks;
}
set showTickMarks(v) {
this._showTickMarks = coerceBooleanProperty(v);
}
/** The minimum value that the slider can have. */
get min() {
return this._min;
}
set min(v) {
const min = coerceNumberProperty(v, this._min);
if (this._min !== min) {
this._updateMin(min);
}
}
_updateMin(min) {
const prevMin = this._min;
this._min = min;
this._isRange ? this._updateMinRange({ old: prevMin, new: min }) : this._updateMinNonRange(min);
this._onMinMaxOrStepChange();
}
_updateMinRange(min) {
const endInput = this._getInput(2 /* _MatThumb.END */);
const startInput = this._getInput(1 /* _MatThumb.START */);
const oldEndValue = endInput.value;
const oldStartValue = startInput.value;
startInput.min = min.new;
endInput.min = Math.max(min.new, startInput.value);
startInput.max = Math.min(endInput.max, endInput.value);
startInput._updateWidthInactive();
endInput._updateWidthInactive();
min.new < min.old
? this._onTranslateXChangeBySideEffect(endInput, startInput)
: this._onTranslateXChangeBySideEffect(startInput, endInput);
if (oldEndValue !== endInput.value) {
this._onValueChange(endInput);
}
if (oldStartValue !== startInput.value) {
this._onValueChange(startInput);
}
}
_updateMinNonRange(min) {
const input = this._getInput(2 /* _MatThumb.END */);
if (input) {
const oldValue = input.value;
input.min = min;
input._updateThumbUIByValue();
this._updateTrackUI(input);
if (oldValue !== input.value) {
this._onValueChange(input);
}
}
}
/** The maximum value that the slider can have. */
get max() {
return this._max;
}
set max(v) {
const max = coerceNumberProperty(v, this._max);
if (this._max !== max) {
this._updateMax(max);
}
}
_updateMax(max) {
const prevMax = this._max;
this._max = max;
this._isRange ? this._updateMaxRange({ old: prevMax, new: max }) : this._updateMaxNonRange(max);
this._onMinMaxOrStepChange();
}
_updateMaxRange(max) {
const endInput = this._getInput(2 /* _MatThumb.END */);
const startInput = this._getInput(1 /* _MatThumb.START */);
const oldEndValue = endInput.value;
const oldStartValue = startInput.value;
endInput.max = max.new;
startInput.max = Math.min(max.new, endInput.value);
endInput.min = startInput.value;
endInput._updateWidthInactive();
startInput._updateWidthInactive();
max.new > max.old
? this._onTranslateXChangeBySideEffect(startInput, endInput)
: this._onTranslateXChangeBySideEffect(endInput, startInput);
if (oldEndValue !== endInput.value) {
this._onValueChange(endInput);
}
if (oldStartValue !== startInput.value) {
this._onValueChange(startInput);
}
}
_updateMaxNonRange(max) {
const input = this._getInput(2 /* _MatThumb.END */);
if (input) {
const oldValue = input.value;
input.max = max;
input._updateThumbUIByValue();
this._updateTrackUI(input);
if (oldValue !== input.value) {
this._onValueChange(input);
}
}
}
/** The values at which the thumb will snap. */
get step() {
return this._step;
}
set step(v) {
const step = coerceNumberProperty(v, this._step);
if (this._step !== step) {
this._updateStep(step);
}
}
_updateStep(step) {
this._step = step;
this._isRange ? this._updateStepRange() : this._updateStepNonRange();
this._onMinMaxOrStepChange();
}
_updateStepRange() {
const endInput = this._getInput(2 /* _MatThumb.END */);
const startInput = this._getInput(1 /* _MatThumb.START */);
const oldEndValue = endInput.value;
const oldStartValue = startInput.value;
const prevStartValue = startInput.value;
endInput.min = this._min;
startInput.max = this._max;
endInput.step = this._step;
startInput.step = this._step;
if (this._platform.SAFARI) {
endInput.value = endInput.value;
startInput.value = startInput.value;
}
endInput.min = Math.max(this._min, startInput.value);
startInput.max = Math.min(this._max, endInput.value);
startInput._updateWidthInactive();
endInput._updateWidthInactive();
endInput.value < prevStartValue
? this._onTranslateXChangeBySideEffect(startInput, endInput)
: this._onTranslateXChangeBySideEffect(endInput, startInput);
if (oldEndValue !== endInput.value) {
this._onValueChange(endInput);
}
if (oldStartValue !== startInput.value) {
this._onValueChange(startInput);
}
}
_updateStepNonRange() {
const input = this._getInput(2 /* _MatThumb.END */);
if (input) {
const oldValue = input.value;
input.step = this._step;
if (this._platform.SAFARI) {
input.value = input.value;
}
input._updateThumbUIByValue();
if (oldValue !== input.value) {
this._onValueChange(input);
}
}
}
ngAfterViewInit() {
if (this._platform.isBrowser) {
this._updateDimensions();
}
const eInput = this._getInput(2 /* _MatThumb.END */);
const sInput = this._getInput(1 /* _MatThumb.START */);
this._isRange = !!eInput && !!sInput;
this._cdr.detectChanges();
if (typeof ngDevMode === 'undefined' || ngDevMode) {
_validateInputs(this._isRange, this._getInput(2 /* _MatThumb.END */), this._getInput(1 /* _MatThumb.START */));
}
const thumb = this._getThumb(2 /* _MatThumb.END */);
this._rippleRadius = thumb._ripple.radius;
this._inputPadding = this._rippleRadius - this._knobRadius;
this._inputOffset = this._knobRadius;
this._isRange
? this._initUIRange(eInput, sInput)
: this._initUINonRange(eInput);
this._updateTrackUI(eInput);
this._updateTickMarkUI();
this._updateTickMarkTrackUI();
this._observeHostResize();
this._cdr.detectChanges();
}
_initUINonRange(eInput) {
eInput.initProps();
eInput.initUI();
this._updateValueIndicatorUI(eInput);
this._hasViewInitialized = true;
eInput._updateThumbUIByValue();
}
_initUIRange(eInput, sInput) {
eInput.initProps();
eInput.initUI();
sInput.initProps();
sInput.initUI();
eInput._updateMinMax();
sInput._updateMinMax();
eInput._updateStaticStyles();
sInput._updateStaticStyles();
this._updateValueIndicatorUI(eInput);
this._updateValueIndicatorUI(sInput);
this._hasViewInitialized = true;
eInput._updateThumbUIByValue();
sInput._updateThumbUIByValue();
}
ngOnDestroy() {
this._dirChangeSubscription.unsubscribe();
this._resizeObserver?.disconnect();
this._resizeObserver = null;
}
/** Handles updating the slider ui after a dir change. */
_onDirChange() {
this._isRtl = this._dir.value === 'rtl';
this._isRange ? this._onDirChangeRange() : this._onDirChangeNonRange();
this._updateTickMarkUI();
}
_onDirChangeRange() {
const endInput = this._getInput(2 /* _MatThumb.END */);
const startInput = this._getInput(1 /* _MatThumb.START */);
endInput._setIsLeftThumb();
startInput._setIsLeftThumb();
endInput.translateX = endInput._calcTranslateXByValue();
startInput.translateX = startInput._calcTranslateXByValue();
endInput._updateStaticStyles();
startInput._updateStaticStyles();
endInput._updateWidthInactive();
startInput._updateWidthInactive();
endInput._updateThumbUIByValue();
startInput._updateThumbUIByValue();
}
_onDirChangeNonRange() {
const input = this._getInput(2 /* _MatThumb.END */);
input._updateThumbUIByValue();
}
/** Starts observing and updating the slider if the host changes its size. */
_observeHostResize() {
if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
return;
}
this._ngZone.runOutsideAngular(() => {
this._resizeObserver = new ResizeObserver(() => {
if (this._isActive()) {
return;
}
if (this._resizeTimer) {
clearTimeout(this._resizeTimer);
}
this._onResize();
});
this._resizeObserver.observe(this._elementRef.nativeElement);
});
}
/** Whether any of the thumbs are currently active. */
_isActive() {
return this._getThumb(1 /* _MatThumb.START */)._isActive || this._getThumb(2 /* _MatThumb.END */)._isActive;
}
_getValue(thumbPosition = 2 /* _MatThumb.END */) {
const input = this._getInput(thumbPosition);
if (!input) {
return this.min;
}
return input.value;
}
_skipUpdate() {
return !!(this._getInput(1 /* _MatThumb.START */)?._skipUIUpdate || this._getInput(2 /* _MatThumb.END */)?._skipUIUpdate);
}
/** Stores the slider dimensions. */
_updateDimensions() {
const rect = this._elementRef.nativeElement.getBoundingClientRect();
this._cachedWidth = rect.width;
this._cachedLeft = rect.left;
}
/** Sets the styles for the active portion of the track. */
_setTrackActiveStyles(styles) {
const trackStyle = this._trackActive.nativeElement.style;
const animationOriginChanged = styles.left !== trackStyle.left && styles.right !== trackStyle.right;
trackStyle.left = styles.left;
trackStyle.right = styles.right;
trackStyle.transformOrigin = styles.transformOrigin;
if (animationOriginChanged) {
this._elementRef.nativeElement.classList.add('mat-mdc-slider-disable-track-animation');
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
this._elementRef.nativeElement.classList.remove('mat-mdc-slider-disable-track-animation');
trackStyle.transform = styles.transform;
});
}
else {
trackStyle.transform = styles.transform;
}
}
/** Returns the translateX positioning for a tick mark based on it's index. */
_calcTickMarkTransform(index) {
// TODO(wagnermaciel): See if we can avoid doing this and just using flex to position these.
const translateX = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1));
return `translateX(${translateX}px`;
}
// Handlers for updating the slider ui.
_onTranslateXChange(source) {
if (!this._hasViewInitialized) {
return;
}
this._updateThumbUI(source);
this._updateTrackUI(source);
this._updateOverlappingThumbUI(source);
}
_onTranslateXChangeBySideEffect(input1, input2) {
if (!this._hasViewInitialized) {
return;
}
input1._updateThumbUIByValue();
input2._updateThumbUIByValue();
}
_onValueChange(source) {
if (!this._hasViewInitialized) {
return;
}
this._updateValueIndicatorUI(source);
this._updateTickMarkUI();
this._cdr.detectChanges();
}
_onMinMaxOrStepChange() {
if (!this._hasViewInitialized) {
return;
}
this._updateTickMarkUI();
this._updateTickMarkTrackUI();
this._cdr.markForCheck();
}
_onResize() {
if (!this._hasViewInitialized) {
return;
}
this._updateDimensions();
if (this._isRange) {
const eInput = this._getInput(2 /* _MatThumb.END */);
const sInput = this._getInput(1 /* _MatThumb.START */);
eInput._updateThumbUIByValue();
sInput._updateThumbUIByValue();
eInput._updateStaticStyles();
sInput._updateStaticStyles();
eInput._updateMinMax();
sInput._updateMinMax();
eInput._updateWidthInactive();
sInput._updateWidthInactive();
}
else {
const eInput = this._getInput(2 /* _MatThumb.END */);
if (eInput) {
eInput._updateThumbUIByValue();
}
}
this._updateTickMarkUI();
this._updateTickMarkTrackUI();
this._cdr.detectChanges();
}
/** Returns true if the slider knobs are overlapping one another. */
_areThumbsOverlapping() {
const startInput = this._getInput(1 /* _MatThumb.START */);
const endInput = this._getInput(2 /* _MatThumb.END */);
if (!startInput || !endInput) {
return false;
}
return endInput.translateX - startInput.translateX < 20;
}
/**
* Updates the class names of overlapping slider thumbs so
* that the current active thumb is styled to be on "top".
*/
_updateOverlappingThumbClassNames(source) {
const sibling = source.getSibling();
const sourceThumb = this._getThumb(source.thumbPosition);
const siblingThumb = this._getThumb(sibling.thumbPosition);
siblingThumb._hostElement.classList.remove('mdc-slider__thumb--top');
sourceThumb._hostElement.classList.toggle('mdc-slider__thumb--top', this._thumbsOverlap);
}
/** Updates the UI of slider thumbs when they begin or stop overlapping. */
_updateOverlappingThumbUI(source) {
if (!this._isRange || this._skipUpdate()) {
return;
}
if (this._thumbsOverlap !== this._areThumbsOverlapping()) {
this._thumbsOverlap = !this._thumbsOverlap;
this._updateOverlappingThumbClassNames(source);
}
}
// _MatThumb styles update conditions
//
// 1. TranslateX, resize, or dir change
// - Reason: The thumb styles need to be updated according to the new translateX.
// 2. Min, max, or step
// - Reason: The value may have silently changed.
/** Updates the translateX of the given thumb. */
_updateThumbUI(source) {
if (this._skipUpdate()) {
return;
}
const thumb = this._getThumb(source.thumbPosition === 2 /* _MatThumb.END */ ? 2 /* _MatThumb.END */ : 1 /* _MatThumb.START */);
thumb._hostElement.style.transform = `translateX(${source.translateX}px)`;
}
// Value indicator text update conditions
//
// 1. Value
// - Reason: The value displayed needs to be updated.
// 2. Min, max, or step
// - Reason: The value may have silently changed.
/** Updates the value indicator tooltip ui for the given thumb. */
_updateValueIndicatorUI(source) {
if (this._skipUpdate()) {
return;
}
const valuetext = this.displayWith(source.value);
this._hasViewInitialized
? (source._valuetext = valuetext)
: source._hostElement.setAttribute('aria-valuetext', valuetext);
if (this.discrete) {
source.thumbPosition === 1 /* _MatThumb.START */
? (this.startValueIndicatorText = valuetext)
: (this.endValueIndicatorText = valuetext);
const visualThumb = this._getThumb(source.thumbPosition);
valuetext.length < 3
? visualThumb._hostElement.classList.add('mdc-slider__thumb--short-value')
: visualThumb._hostElement.classList.remove('mdc-slider__thumb--short-value');
}
}
// Update Tick Mark Track Width
//
// 1. Min, max, or step
// - Reason: The maximum reachable value may have changed.
// - Side note: The maximum reachable value is different from the maximum value set by the
// user. For example, a slider with [min: 5, max: 100, step: 10] would have a maximum
// reachable value of 95.
// 2. Resize
// - Reason: The position for the maximum reachable value needs to be recalculated.
/** Updates the width of the tick mark track. */
_updateTickMarkTrackUI() {
if (this._skipUpdate()) {
return;
}
const step = this._step && this._step > 0 ? this._step : 1;
const maxValue = Math.floor(this.max / step) * step;
const percentage = (maxValue - this.min) / (this.max - this.min);
this._tickMarkTrackWidth = this._cachedWidth * percentage - 6;
}
// Track active update conditions
//
// 1. TranslateX
// - Reason: The track active should line up with the new thumb position.
// 2. Min or max
// - Reason #1: The 'active' percentage needs to be recalculated.
// - Reason #2: The value may have silently changed.
// 3. Step
// - Reason: The value may have silently changed causing the thumb(s) to shift.
// 4. Dir change
// - Reason: The track active will need to be updated according to the new thumb position(s).
// 5. Resize
// - Reason: The total width the 'active' tracks translateX is based on has changed.
/** Updates the scale on the active portion of the track. */
_updateTrackUI(source) {
if (this._skipUpdate()) {
return;
}
this._isRange
? this._updateTrackUIRange(source)
: this._updateTrackUINonRange(source);
}
_updateTrackUIRange(source) {
const sibling = source.getSibling();
if (!sibling || !this._cachedWidth) {
return;
}
const activePercentage = Math.abs(sibling.translateX - source.translateX) / this._cachedWidth;
if (source._isLeftThumb && this._cachedWidth) {
this._setTrackActiveStyles({
left: 'auto',
right: `${this._cachedWidth - sibling.translateX}px`,
transformOrigin: 'right',
transform: `scaleX(${activePercentage})`,
});
}
else {
this._setTrackActiveStyles({
left: `${sibling.translateX}px`,
right: 'auto',
transformOrigin: 'left',
transform: `scaleX(${activePercentage})`,
});
}
}
_updateTrackUINonRange(source) {
this._isRtl
? this._setTrackActiveStyles({
left: 'auto',
right: '0px',
transformOrigin: 'right',
transform: `scaleX(${1 - source.fillPercentage})`,
})
: this._setTrackActiveStyles({
left: '0px',
right: 'auto',
transformOrigin: 'left',
transform: `scaleX(${source.fillPercentage})`,
});
}
// Tick mark update conditions
//
// 1. Value
// - Reason: a tick mark which was once active might now be inactive or vice versa.
// 2. Min, max, or step
// - Reason #1: the number of tick marks may have changed.
// - Reason #2: The value may have silently changed.
/** Updates the dots along the slider track. */
_updateTickMarkUI() {
if (this.step === undefined || this.min === undefined || this.max === undefined) {
return;
}
const step = this.step > 0 ? this.step : 1;
this._isRange ? this._updateTickMarkUIRange(step) : this._updateTickMarkUINonRange(step);
if (this._isRtl) {
this._tickMarks.reverse();
}
}
_updateTickMarkUINonRange(step) {
const value = this._getValue();
let numActive = Math.max(Math.round((value - this.min) / step), 0);
let numInactive = Math.max(Math.round((this.max - value) / step), 0);
this._isRtl ? numActive++ : numInactive++;
this._tickMarks = Array(numActive)
.fill(0 /* _MatTickMark.ACTIVE */)
.concat(Array(numInactive).fill(1 /* _MatTickMark.INACTIVE */));
}
_updateTickMarkUIRange(step) {
const endValue = this._getValue();
const startValue = this._getValue(1 /* _MatThumb.START */);
const numInactiveBeforeStartThumb = Math.max(Math.floor((startValue - this.min) / step), 0);
const numActive = Math.max(Math.floor((endValue - startValue) / step) + 1, 0);
const numInactiveAfterEndThumb = Math.max(Math.floor((this.max - endValue) / step), 0);
this._tickMarks = Array(numInactiveBeforeStartThumb)
.fill(1 /* _MatTickMark.INACTIVE */)
.concat(Array(numActive).fill(0 /* _MatTickMark.ACTIVE */), Array(numInactiveAfterEndThumb).fill(1 /* _MatTickMark.INACTIVE */));
}
/** Gets the slider thumb input of the given thumb position. */
_getInput(thumbPosition) {
if (thumbPosition === 2 /* _MatThumb.END */ && this._input) {
return this._input;
}
if (this._inputs?.length) {
return thumbPosition === 1 /* _MatThumb.START */ ? this._inputs.first : this._inputs.last;
}
return;
}
/** Gets the slider thumb HTML input element of the given thumb position. */
_getThumb(thumbPosition) {
return thumbPosition === 2 /* _MatThumb.END */ ? this._thumbs?.last : this._thumbs?.first;
}
_setTransition(withAnimation) {
this._hasAnimation = withAnimation && !this._noopAnimations;
this._elementRef.nativeElement.classList.toggle('mat-mdc-slider-with-animation', this._hasAnimation);
}
}
MatSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.Platform }, { token: i0.ElementRef }, { token: i2$1.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
MatSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSlider, selector: "mat-slider", inputs: { color: "color", disableRipple: "disableRipple", disabled: "disabled", discrete: "discrete", showTickMarks: "showTickMarks", min: "min", max: "max", step: "step", displayWith: "displayWith" }, host: { properties: { "class.mdc-slider--range": "_isRange", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], queries: [{ propertyName: "_input", first: true, predicate: MAT_SLIDER_THUMB, descendants: true }, { propertyName: "_inputs", predicate: MAT_SLIDER_RANGE_THUMB }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MAT_SLIDER_VISUAL_THUMB, descendants: true }], exportAs: ["matSlider"], usesInheritance: true, ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n </div>\n <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n <ng-container *ngIf=\"_cachedWidth\">\n <div\n *ngFor=\"let tickMark of _tickMarks; let i = index\"\n [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n </ng-container>\n </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n *ngIf=\"_isRange\"\n [discrete]=\"discrete\"\n [thumbPosition]=\"1\"\n [valueIndicatorText]=\"startValueIndicatorText\">\n</mat-slider-visual-thumb>\n\n<mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"2\"\n [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));border-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));border-color:var(--mdc-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color, var(--mdc-theme-primary, #6200ee))}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color, var(--mdc-theme-on-surface, #000))}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color, var(--mdc-theme-primary, #6200ee));opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));opacity:var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--ac