| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283 |
- /**
- * @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
- */
- (function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/platform-browser/animations'), require('rxjs'), require('@angular/common'), require('@angular/platform-browser')) :
- typeof define === 'function' && define.amd ? define('@angular/material/slider', ['exports', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/platform-browser/animations', 'rxjs', '@angular/common', '@angular/platform-browser'], factory) :
- (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.slider = {}),global.ng.cdk.a11y,global.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.cdk.keycodes,global.ng.core,global.ng.forms,global.ng.material.core,global.ng.platformBrowser.animations,global.rxjs,global.ng.common,global.ng.platformBrowser));
- }(this, (function (exports,a11y,bidi,coercion,keycodes,core,forms,core$1,animations,rxjs,common,platformBrowser) { 'use strict';
- /*! *****************************************************************************
- Copyright (c) Microsoft Corporation. All rights reserved.
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
- this file except in compliance with the License. You may obtain a copy of the
- License at http://www.apache.org/licenses/LICENSE-2.0
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
- MERCHANTABLITY OR NON-INFRINGEMENT.
- See the Apache Version 2.0 License for specific language governing permissions
- and limitations under the License.
- ***************************************************************************** */
- /* global Reflect, Promise */
- var extendStatics = function(d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- function __extends(d, b) {
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- }
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- /**
- * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
- * the default separation we chose.
- * @type {?}
- */
- var MIN_AUTO_TICK_SEPARATION = 30;
- /**
- * The thumb gap size for a disabled slider.
- * @type {?}
- */
- var DISABLED_THUMB_GAP = 7;
- /**
- * The thumb gap size for a non-active slider at its minimum value.
- * @type {?}
- */
- var MIN_VALUE_NONACTIVE_THUMB_GAP = 7;
- /**
- * The thumb gap size for an active slider at its minimum value.
- * @type {?}
- */
- var MIN_VALUE_ACTIVE_THUMB_GAP = 10;
- /**
- * Provider Expression that allows mat-slider to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)] and [formControl].
- * \@docs-private
- * @type {?}
- */
- var MAT_SLIDER_VALUE_ACCESSOR = {
- provide: forms.NG_VALUE_ACCESSOR,
- useExisting: core.forwardRef((/**
- * @return {?}
- */
- function () { return MatSlider; })),
- multi: true
- };
- /**
- * A simple change event emitted by the MatSlider component.
- */
- var /**
- * A simple change event emitted by the MatSlider component.
- */
- MatSliderChange = /** @class */ (function () {
- function MatSliderChange() {
- }
- return MatSliderChange;
- }());
- // Boilerplate for applying mixins to MatSlider.
- /**
- * \@docs-private
- */
- var
- // Boilerplate for applying mixins to MatSlider.
- /**
- * \@docs-private
- */
- MatSliderBase = /** @class */ (function () {
- function MatSliderBase(_elementRef) {
- this._elementRef = _elementRef;
- }
- return MatSliderBase;
- }());
- /** @type {?} */
- var _MatSliderMixinBase = core$1.mixinTabIndex(core$1.mixinColor(core$1.mixinDisabled(MatSliderBase), 'accent'));
- /**
- * 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.
- */
- var MatSlider = /** @class */ (function (_super) {
- __extends(MatSlider, _super);
- function MatSlider(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex, _animationMode) {
- var _this = _super.call(this, elementRef) || this;
- _this._focusMonitor = _focusMonitor;
- _this._changeDetectorRef = _changeDetectorRef;
- _this._dir = _dir;
- _this._animationMode = _animationMode;
- _this._invert = false;
- _this._max = 100;
- _this._min = 0;
- _this._step = 1;
- _this._thumbLabel = false;
- _this._tickInterval = 0;
- _this._value = null;
- _this._vertical = false;
- /**
- * Event emitted when the slider value has changed.
- */
- _this.change = new core.EventEmitter();
- /**
- * Event emitted when the slider thumb moves.
- */
- _this.input = new core.EventEmitter();
- /**
- * Emits when the raw value of the slider changes. This is here primarily
- * to facilitate the two-way binding for the `value` input.
- * \@docs-private
- */
- _this.valueChange = new core.EventEmitter();
- /**
- * onTouch function registered via registerOnTouch (ControlValueAccessor).
- */
- _this.onTouched = (/**
- * @return {?}
- */
- function () { });
- _this._percent = 0;
- /**
- * Whether or not the thumb is sliding.
- * Used to determine if there should be a transition for the thumb and fill track.
- */
- _this._isSliding = false;
- /**
- * Whether or not the slider is active (clicked or sliding).
- * Used to shrink and grow the thumb as according to the Material Design spec.
- */
- _this._isActive = false;
- /**
- * The size of a tick interval as a percentage of the size of the track.
- */
- _this._tickIntervalPercent = 0;
- /**
- * The dimensions of the slider.
- */
- _this._sliderDimensions = null;
- _this._controlValueAccessorChangeFn = (/**
- * @return {?}
- */
- function () { });
- /**
- * Subscription to the Directionality change EventEmitter.
- */
- _this._dirChangeSubscription = rxjs.Subscription.EMPTY;
- _this.tabIndex = parseInt(tabIndex) || 0;
- return _this;
- }
- Object.defineProperty(MatSlider.prototype, "invert", {
- /** Whether the slider is inverted. */
- get: /**
- * Whether the slider is inverted.
- * @return {?}
- */
- function () { return this._invert; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this._invert = coercion.coerceBooleanProperty(value);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "max", {
- /** The maximum value that the slider can have. */
- get: /**
- * The maximum value that the slider can have.
- * @return {?}
- */
- function () { return this._max; },
- set: /**
- * @param {?} v
- * @return {?}
- */
- function (v) {
- this._max = coercion.coerceNumberProperty(v, this._max);
- this._percent = this._calculatePercentage(this._value);
- // Since this also modifies the percentage, we need to let the change detection know.
- this._changeDetectorRef.markForCheck();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "min", {
- /** The minimum value that the slider can have. */
- get: /**
- * The minimum value that the slider can have.
- * @return {?}
- */
- function () { return this._min; },
- set: /**
- * @param {?} v
- * @return {?}
- */
- function (v) {
- this._min = coercion.coerceNumberProperty(v, this._min);
- // If the value wasn't explicitly set by the user, set it to the min.
- if (this._value === null) {
- this.value = this._min;
- }
- this._percent = this._calculatePercentage(this._value);
- // Since this also modifies the percentage, we need to let the change detection know.
- this._changeDetectorRef.markForCheck();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "step", {
- /** The values at which the thumb will snap. */
- get: /**
- * The values at which the thumb will snap.
- * @return {?}
- */
- function () { return this._step; },
- set: /**
- * @param {?} v
- * @return {?}
- */
- function (v) {
- this._step = coercion.coerceNumberProperty(v, this._step);
- if (this._step % 1 !== 0) {
- this._roundToDecimal = (/** @type {?} */ (this._step.toString().split('.').pop())).length;
- }
- // Since this could modify the label, we need to notify the change detection.
- this._changeDetectorRef.markForCheck();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "thumbLabel", {
- /** Whether or not to show the thumb label. */
- get: /**
- * Whether or not to show the thumb label.
- * @return {?}
- */
- function () { return this._thumbLabel; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) { this._thumbLabel = coercion.coerceBooleanProperty(value); },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "tickInterval", {
- /**
- * How often to show ticks. Relative to the step so that a tick always appears on a step.
- * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
- */
- get: /**
- * How often to show ticks. Relative to the step so that a tick always appears on a step.
- * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
- * @return {?}
- */
- function () { return this._tickInterval; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- if (value === 'auto') {
- this._tickInterval = 'auto';
- }
- else if (typeof value === 'number' || typeof value === 'string') {
- this._tickInterval = coercion.coerceNumberProperty(value, (/** @type {?} */ (this._tickInterval)));
- }
- else {
- this._tickInterval = 0;
- }
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "value", {
- /** Value of the slider. */
- get: /**
- * Value of the slider.
- * @return {?}
- */
- function () {
- // If the value needs to be read and it is still uninitialized, initialize it to the min.
- if (this._value === null) {
- this.value = this._min;
- }
- return this._value;
- },
- set: /**
- * @param {?} v
- * @return {?}
- */
- function (v) {
- if (v !== this._value) {
- /** @type {?} */
- var value = coercion.coerceNumberProperty(v);
- // While incrementing by a decimal we can end up with values like 33.300000000000004.
- // Truncate it to ensure that it matches the label and to make it easier to work with.
- if (this._roundToDecimal) {
- value = parseFloat(value.toFixed(this._roundToDecimal));
- }
- this._value = value;
- this._percent = this._calculatePercentage(this._value);
- // Since this also modifies the percentage, we need to let the change detection know.
- this._changeDetectorRef.markForCheck();
- }
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "vertical", {
- /** Whether the slider is vertical. */
- get: /**
- * Whether the slider is vertical.
- * @return {?}
- */
- function () { return this._vertical; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this._vertical = coercion.coerceBooleanProperty(value);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "displayValue", {
- /** The value to be used for display purposes. */
- get: /**
- * The value to be used for display purposes.
- * @return {?}
- */
- function () {
- if (this.displayWith) {
- return this.displayWith(this.value);
- }
- // Note that this could be improved further by rounding something like 0.999 to 1 or
- // 0.899 to 0.9, however it is very performance sensitive, because it gets called on
- // every change detection cycle.
- if (this._roundToDecimal && this.value && this.value % 1 !== 0) {
- return this.value.toFixed(this._roundToDecimal);
- }
- return this.value || 0;
- },
- enumerable: true,
- configurable: true
- });
- /** set focus to the host element */
- /**
- * set focus to the host element
- * @param {?=} options
- * @return {?}
- */
- MatSlider.prototype.focus = /**
- * set focus to the host element
- * @param {?=} options
- * @return {?}
- */
- function (options) {
- this._focusHostElement(options);
- };
- /** blur the host element */
- /**
- * blur the host element
- * @return {?}
- */
- MatSlider.prototype.blur = /**
- * blur the host element
- * @return {?}
- */
- function () {
- this._blurHostElement();
- };
- Object.defineProperty(MatSlider.prototype, "percent", {
- /** The percentage of the slider that coincides with the value. */
- get: /**
- * The percentage of the slider that coincides with the value.
- * @return {?}
- */
- function () { return this._clamp(this._percent); },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_invertAxis", {
- /**
- * Whether the axis of the slider is inverted.
- * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
- */
- get: /**
- * Whether the axis of the slider is inverted.
- * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
- * @return {?}
- */
- function () {
- // Standard non-inverted mode for a vertical slider should be dragging the thumb from bottom to
- // top. However from a y-axis standpoint this is inverted.
- return this.vertical ? !this.invert : this.invert;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_isMinValue", {
- /** Whether the slider is at its minimum value. */
- get: /**
- * Whether the slider is at its minimum value.
- * @return {?}
- */
- function () {
- return this.percent === 0;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_thumbGap", {
- /**
- * The amount of space to leave between the slider thumb and the track fill & track background
- * elements.
- */
- get: /**
- * The amount of space to leave between the slider thumb and the track fill & track background
- * elements.
- * @return {?}
- */
- function () {
- if (this.disabled) {
- return DISABLED_THUMB_GAP;
- }
- if (this._isMinValue && !this.thumbLabel) {
- return this._isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
- }
- return 0;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_trackBackgroundStyles", {
- /** CSS styles for the track background element. */
- get: /**
- * CSS styles for the track background element.
- * @return {?}
- */
- function () {
- /** @type {?} */
- var axis = this.vertical ? 'Y' : 'X';
- /** @type {?} */
- var scale = this.vertical ? "1, " + (1 - this.percent) + ", 1" : 1 - this.percent + ", 1, 1";
- /** @type {?} */
- var sign = this._shouldInvertMouseCoords() ? '-' : '';
- return {
- // scale3d avoids some rendering issues in Chrome. See #12071.
- transform: "translate" + axis + "(" + sign + this._thumbGap + "px) scale3d(" + scale + ")"
- };
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_trackFillStyles", {
- /** CSS styles for the track fill element. */
- get: /**
- * CSS styles for the track fill element.
- * @return {?}
- */
- function () {
- /** @type {?} */
- var axis = this.vertical ? 'Y' : 'X';
- /** @type {?} */
- var scale = this.vertical ? "1, " + this.percent + ", 1" : this.percent + ", 1, 1";
- /** @type {?} */
- var sign = this._shouldInvertMouseCoords() ? '' : '-';
- return {
- // scale3d avoids some rendering issues in Chrome. See #12071.
- transform: "translate" + axis + "(" + sign + this._thumbGap + "px) scale3d(" + scale + ")"
- };
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_ticksContainerStyles", {
- /** CSS styles for the ticks container element. */
- get: /**
- * CSS styles for the ticks container element.
- * @return {?}
- */
- function () {
- /** @type {?} */
- var axis = this.vertical ? 'Y' : 'X';
- // For a horizontal slider in RTL languages we push the ticks container off the left edge
- // instead of the right edge to avoid causing a horizontal scrollbar to appear.
- /** @type {?} */
- var sign = !this.vertical && this._getDirection() == 'rtl' ? '' : '-';
- /** @type {?} */
- var offset = this._tickIntervalPercent / 2 * 100;
- return {
- 'transform': "translate" + axis + "(" + sign + offset + "%)"
- };
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_ticksStyles", {
- /** CSS styles for the ticks element. */
- get: /**
- * CSS styles for the ticks element.
- * @return {?}
- */
- function () {
- /** @type {?} */
- var tickSize = this._tickIntervalPercent * 100;
- /** @type {?} */
- var backgroundSize = this.vertical ? "2px " + tickSize + "%" : tickSize + "% 2px";
- /** @type {?} */
- var axis = this.vertical ? 'Y' : 'X';
- // Depending on the direction we pushed the ticks container, push the ticks the opposite
- // direction to re-center them but clip off the end edge. In RTL languages we need to flip the
- // ticks 180 degrees so we're really cutting off the end edge abd not the start.
- /** @type {?} */
- var sign = !this.vertical && this._getDirection() == 'rtl' ? '-' : '';
- /** @type {?} */
- var rotate = !this.vertical && this._getDirection() == 'rtl' ? ' rotate(180deg)' : '';
- /** @type {?} */
- var styles = {
- 'backgroundSize': backgroundSize,
- // Without translateZ ticks sometimes jitter as the slider moves on Chrome & Firefox.
- 'transform': "translateZ(0) translate" + axis + "(" + sign + tickSize / 2 + "%)" + rotate
- };
- if (this._isMinValue && this._thumbGap) {
- /** @type {?} */
- var side = this.vertical ?
- (this._invertAxis ? 'Bottom' : 'Top') :
- (this._invertAxis ? 'Right' : 'Left');
- styles["padding" + side] = this._thumbGap + "px";
- }
- return styles;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatSlider.prototype, "_thumbContainerStyles", {
- get: /**
- * @return {?}
- */
- function () {
- /** @type {?} */
- var axis = this.vertical ? 'Y' : 'X';
- // For a horizontal slider in RTL languages we push the thumb container off the left edge
- // instead of the right edge to avoid causing a horizontal scrollbar to appear.
- /** @type {?} */
- var invertOffset = (this._getDirection() == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis;
- /** @type {?} */
- var offset = (invertOffset ? this.percent : 1 - this.percent) * 100;
- return {
- 'transform': "translate" + axis + "(-" + offset + "%)"
- };
- },
- enumerable: true,
- configurable: true
- });
- /**
- * Whether mouse events should be converted to a slider position by calculating their distance
- * from the right or bottom edge of the slider as opposed to the top or left.
- */
- /**
- * Whether mouse events should be converted to a slider position by calculating their distance
- * from the right or bottom edge of the slider as opposed to the top or left.
- * @private
- * @return {?}
- */
- MatSlider.prototype._shouldInvertMouseCoords = /**
- * Whether mouse events should be converted to a slider position by calculating their distance
- * from the right or bottom edge of the slider as opposed to the top or left.
- * @private
- * @return {?}
- */
- function () {
- return (this._getDirection() == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis;
- };
- /** The language direction for this slider element. */
- /**
- * The language direction for this slider element.
- * @private
- * @return {?}
- */
- MatSlider.prototype._getDirection = /**
- * The language direction for this slider element.
- * @private
- * @return {?}
- */
- function () {
- return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr';
- };
- /**
- * @return {?}
- */
- MatSlider.prototype.ngOnInit = /**
- * @return {?}
- */
- function () {
- var _this = this;
- this._focusMonitor
- .monitor(this._elementRef, true)
- .subscribe((/**
- * @param {?} origin
- * @return {?}
- */
- function (origin) {
- _this._isActive = !!origin && origin !== 'keyboard';
- _this._changeDetectorRef.detectChanges();
- }));
- if (this._dir) {
- this._dirChangeSubscription = this._dir.change.subscribe((/**
- * @return {?}
- */
- function () {
- _this._changeDetectorRef.markForCheck();
- }));
- }
- };
- /**
- * @return {?}
- */
- MatSlider.prototype.ngOnDestroy = /**
- * @return {?}
- */
- function () {
- this._focusMonitor.stopMonitoring(this._elementRef);
- this._dirChangeSubscription.unsubscribe();
- };
- /**
- * @return {?}
- */
- MatSlider.prototype._onMouseenter = /**
- * @return {?}
- */
- function () {
- if (this.disabled) {
- return;
- }
- // We save the dimensions of the slider here so we can use them to update the spacing of the
- // ticks and determine where on the slider click and slide events happen.
- this._sliderDimensions = this._getSliderDimensions();
- this._updateTickIntervalPercent();
- };
- /**
- * @param {?} event
- * @return {?}
- */
- MatSlider.prototype._onMousedown = /**
- * @param {?} event
- * @return {?}
- */
- function (event) {
- // Don't do anything if the slider is disabled or the
- // user is using anything other than the main mouse button.
- if (this.disabled || event.button !== 0) {
- return;
- }
- /** @type {?} */
- var oldValue = this.value;
- this._isSliding = false;
- this._focusHostElement();
- this._updateValueFromPosition({ x: event.clientX, y: event.clientY });
- // Emit a change and input event if the value changed.
- if (oldValue != this.value) {
- this._emitInputEvent();
- this._emitChangeEvent();
- }
- };
- /**
- * @param {?} event
- * @return {?}
- */
- MatSlider.prototype._onSlide = /**
- * @param {?} event
- * @return {?}
- */
- function (event) {
- if (this.disabled) {
- return;
- }
- // The slide start event sometimes fails to fire on iOS, so if we're not already in the sliding
- // state, call the slide start handler manually.
- if (!this._isSliding) {
- this._onSlideStart(null);
- }
- // Prevent the slide from selecting anything else.
- event.preventDefault();
- /** @type {?} */
- var oldValue = this.value;
- this._updateValueFromPosition({ x: event.center.x, y: event.center.y });
- // Native range elements always emit `input` events when the value changed while sliding.
- if (oldValue != this.value) {
- this._emitInputEvent();
- }
- };
- /**
- * @param {?} event
- * @return {?}
- */
- MatSlider.prototype._onSlideStart = /**
- * @param {?} event
- * @return {?}
- */
- function (event) {
- if (this.disabled || this._isSliding) {
- return;
- }
- // Simulate mouseenter in case this is a mobile device.
- this._onMouseenter();
- this._isSliding = true;
- this._focusHostElement();
- this._valueOnSlideStart = this.value;
- if (event) {
- this._updateValueFromPosition({ x: event.center.x, y: event.center.y });
- event.preventDefault();
- }
- };
- /**
- * @return {?}
- */
- MatSlider.prototype._onSlideEnd = /**
- * @return {?}
- */
- function () {
- this._isSliding = false;
- if (this._valueOnSlideStart != this.value && !this.disabled) {
- this._emitChangeEvent();
- }
- this._valueOnSlideStart = null;
- };
- /**
- * @return {?}
- */
- MatSlider.prototype._onFocus = /**
- * @return {?}
- */
- function () {
- // We save the dimensions of the slider here so we can use them to update the spacing of the
- // ticks and determine where on the slider click and slide events happen.
- this._sliderDimensions = this._getSliderDimensions();
- this._updateTickIntervalPercent();
- };
- /**
- * @return {?}
- */
- MatSlider.prototype._onBlur = /**
- * @return {?}
- */
- function () {
- this.onTouched();
- };
- /**
- * @param {?} event
- * @return {?}
- */
- MatSlider.prototype._onKeydown = /**
- * @param {?} event
- * @return {?}
- */
- function (event) {
- if (this.disabled || keycodes.hasModifierKey(event)) {
- return;
- }
- /** @type {?} */
- var oldValue = this.value;
- switch (event.keyCode) {
- case keycodes.PAGE_UP:
- this._increment(10);
- break;
- case keycodes.PAGE_DOWN:
- this._increment(-10);
- break;
- case keycodes.END:
- this.value = this.max;
- break;
- case keycodes.HOME:
- this.value = this.min;
- break;
- case keycodes.LEFT_ARROW:
- // NOTE: For a sighted user it would make more sense that when they press an arrow key on an
- // inverted slider the thumb moves in that direction. However for a blind user, nothing
- // about the slider indicates that it is inverted. They will expect left to be decrement,
- // regardless of how it appears on the screen. For speakers ofRTL languages, they probably
- // expect left to mean increment. Therefore we flip the meaning of the side arrow keys for
- // RTL. For inverted sliders we prefer a good a11y experience to having it "look right" for
- // sighted users, therefore we do not swap the meaning.
- this._increment(this._getDirection() == 'rtl' ? 1 : -1);
- break;
- case keycodes.UP_ARROW:
- this._increment(1);
- break;
- case keycodes.RIGHT_ARROW:
- // See comment on LEFT_ARROW about the conditions under which we flip the meaning.
- this._increment(this._getDirection() == 'rtl' ? -1 : 1);
- break;
- case keycodes.DOWN_ARROW:
- this._increment(-1);
- break;
- default:
- // Return if the key is not one that we explicitly handle to avoid calling preventDefault on
- // it.
- return;
- }
- if (oldValue != this.value) {
- this._emitInputEvent();
- this._emitChangeEvent();
- }
- this._isSliding = true;
- event.preventDefault();
- };
- /**
- * @return {?}
- */
- MatSlider.prototype._onKeyup = /**
- * @return {?}
- */
- function () {
- this._isSliding = false;
- };
- /** Increments the slider by the given number of steps (negative number decrements). */
- /**
- * Increments the slider by the given number of steps (negative number decrements).
- * @private
- * @param {?} numSteps
- * @return {?}
- */
- MatSlider.prototype._increment = /**
- * Increments the slider by the given number of steps (negative number decrements).
- * @private
- * @param {?} numSteps
- * @return {?}
- */
- function (numSteps) {
- this.value = this._clamp((this.value || 0) + this.step * numSteps, this.min, this.max);
- };
- /** Calculate the new value from the new physical location. The value will always be snapped. */
- /**
- * Calculate the new value from the new physical location. The value will always be snapped.
- * @private
- * @param {?} pos
- * @return {?}
- */
- MatSlider.prototype._updateValueFromPosition = /**
- * Calculate the new value from the new physical location. The value will always be snapped.
- * @private
- * @param {?} pos
- * @return {?}
- */
- function (pos) {
- if (!this._sliderDimensions) {
- return;
- }
- /** @type {?} */
- var offset = this.vertical ? this._sliderDimensions.top : this._sliderDimensions.left;
- /** @type {?} */
- var size = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
- /** @type {?} */
- var posComponent = this.vertical ? pos.y : pos.x;
- // The exact value is calculated from the event and used to find the closest snap value.
- /** @type {?} */
- var percent = this._clamp((posComponent - offset) / size);
- if (this._shouldInvertMouseCoords()) {
- percent = 1 - percent;
- }
- // Since the steps may not divide cleanly into the max value, if the user
- // slid to 0 or 100 percent, we jump to the min/max value. This approach
- // is slightly more intuitive than using `Math.ceil` below, because it
- // follows the user's pointer closer.
- if (percent === 0) {
- this.value = this.min;
- }
- else if (percent === 1) {
- this.value = this.max;
- }
- else {
- /** @type {?} */
- var exactValue = this._calculateValue(percent);
- // This calculation finds the closest step by finding the closest
- // whole number divisible by the step relative to the min.
- /** @type {?} */
- var closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
- // The value needs to snap to the min and max.
- this.value = this._clamp(closestValue, this.min, this.max);
- }
- };
- /** Emits a change event if the current value is different from the last emitted value. */
- /**
- * Emits a change event if the current value is different from the last emitted value.
- * @private
- * @return {?}
- */
- MatSlider.prototype._emitChangeEvent = /**
- * Emits a change event if the current value is different from the last emitted value.
- * @private
- * @return {?}
- */
- function () {
- this._controlValueAccessorChangeFn(this.value);
- this.valueChange.emit(this.value);
- this.change.emit(this._createChangeEvent());
- };
- /** Emits an input event when the current value is different from the last emitted value. */
- /**
- * Emits an input event when the current value is different from the last emitted value.
- * @private
- * @return {?}
- */
- MatSlider.prototype._emitInputEvent = /**
- * Emits an input event when the current value is different from the last emitted value.
- * @private
- * @return {?}
- */
- function () {
- this.input.emit(this._createChangeEvent());
- };
- /** Updates the amount of space between ticks as a percentage of the width of the slider. */
- /**
- * Updates the amount of space between ticks as a percentage of the width of the slider.
- * @private
- * @return {?}
- */
- MatSlider.prototype._updateTickIntervalPercent = /**
- * Updates the amount of space between ticks as a percentage of the width of the slider.
- * @private
- * @return {?}
- */
- function () {
- if (!this.tickInterval || !this._sliderDimensions) {
- return;
- }
- if (this.tickInterval == 'auto') {
- /** @type {?} */
- var trackSize = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
- /** @type {?} */
- var pixelsPerStep = trackSize * this.step / (this.max - this.min);
- /** @type {?} */
- var stepsPerTick = Math.ceil(MIN_AUTO_TICK_SEPARATION / pixelsPerStep);
- /** @type {?} */
- var pixelsPerTick = stepsPerTick * this.step;
- this._tickIntervalPercent = pixelsPerTick / trackSize;
- }
- else {
- this._tickIntervalPercent = this.tickInterval * this.step / (this.max - this.min);
- }
- };
- /** Creates a slider change object from the specified value. */
- /**
- * Creates a slider change object from the specified value.
- * @private
- * @param {?=} value
- * @return {?}
- */
- MatSlider.prototype._createChangeEvent = /**
- * Creates a slider change object from the specified value.
- * @private
- * @param {?=} value
- * @return {?}
- */
- function (value) {
- if (value === void 0) { value = this.value; }
- /** @type {?} */
- var event = new MatSliderChange();
- event.source = this;
- event.value = value;
- return event;
- };
- /** Calculates the percentage of the slider that a value is. */
- /**
- * Calculates the percentage of the slider that a value is.
- * @private
- * @param {?} value
- * @return {?}
- */
- MatSlider.prototype._calculatePercentage = /**
- * Calculates the percentage of the slider that a value is.
- * @private
- * @param {?} value
- * @return {?}
- */
- function (value) {
- return ((value || 0) - this.min) / (this.max - this.min);
- };
- /** Calculates the value a percentage of the slider corresponds to. */
- /**
- * Calculates the value a percentage of the slider corresponds to.
- * @private
- * @param {?} percentage
- * @return {?}
- */
- MatSlider.prototype._calculateValue = /**
- * Calculates the value a percentage of the slider corresponds to.
- * @private
- * @param {?} percentage
- * @return {?}
- */
- function (percentage) {
- return this.min + percentage * (this.max - this.min);
- };
- /** Return a number between two numbers. */
- /**
- * Return a number between two numbers.
- * @private
- * @param {?} value
- * @param {?=} min
- * @param {?=} max
- * @return {?}
- */
- MatSlider.prototype._clamp = /**
- * Return a number between two numbers.
- * @private
- * @param {?} value
- * @param {?=} min
- * @param {?=} max
- * @return {?}
- */
- function (value, min, max) {
- if (min === void 0) { min = 0; }
- if (max === void 0) { max = 1; }
- return Math.max(min, Math.min(value, max));
- };
- /**
- * Get the bounding client rect of the slider track element.
- * The track is used rather than the native element to ignore the extra space that the thumb can
- * take up.
- */
- /**
- * Get the bounding client rect of the slider track element.
- * The track is used rather than the native element to ignore the extra space that the thumb can
- * take up.
- * @private
- * @return {?}
- */
- MatSlider.prototype._getSliderDimensions = /**
- * Get the bounding client rect of the slider track element.
- * The track is used rather than the native element to ignore the extra space that the thumb can
- * take up.
- * @private
- * @return {?}
- */
- function () {
- return this._sliderWrapper ? this._sliderWrapper.nativeElement.getBoundingClientRect() : null;
- };
- /**
- * Focuses the native element.
- * Currently only used to allow a blur event to fire but will be used with keyboard input later.
- */
- /**
- * Focuses the native element.
- * Currently only used to allow a blur event to fire but will be used with keyboard input later.
- * @private
- * @param {?=} options
- * @return {?}
- */
- MatSlider.prototype._focusHostElement = /**
- * Focuses the native element.
- * Currently only used to allow a blur event to fire but will be used with keyboard input later.
- * @private
- * @param {?=} options
- * @return {?}
- */
- function (options) {
- this._elementRef.nativeElement.focus(options);
- };
- /** Blurs the native element. */
- /**
- * Blurs the native element.
- * @private
- * @return {?}
- */
- MatSlider.prototype._blurHostElement = /**
- * Blurs the native element.
- * @private
- * @return {?}
- */
- function () {
- this._elementRef.nativeElement.blur();
- };
- /**
- * Sets the model value. Implemented as part of ControlValueAccessor.
- * @param value
- */
- /**
- * Sets the model value. Implemented as part of ControlValueAccessor.
- * @param {?} value
- * @return {?}
- */
- MatSlider.prototype.writeValue = /**
- * Sets the model value. Implemented as part of ControlValueAccessor.
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this.value = value;
- };
- /**
- * Registers a callback to be triggered when the value has changed.
- * Implemented as part of ControlValueAccessor.
- * @param fn Callback to be registered.
- */
- /**
- * Registers a callback to be triggered when the value has changed.
- * Implemented as part of ControlValueAccessor.
- * @param {?} fn Callback to be registered.
- * @return {?}
- */
- MatSlider.prototype.registerOnChange = /**
- * Registers a callback to be triggered when the value has changed.
- * Implemented as part of ControlValueAccessor.
- * @param {?} fn Callback to be registered.
- * @return {?}
- */
- function (fn) {
- this._controlValueAccessorChangeFn = fn;
- };
- /**
- * Registers a callback to be triggered when the component is touched.
- * Implemented as part of ControlValueAccessor.
- * @param fn Callback to be registered.
- */
- /**
- * Registers a callback to be triggered when the component is touched.
- * Implemented as part of ControlValueAccessor.
- * @param {?} fn Callback to be registered.
- * @return {?}
- */
- MatSlider.prototype.registerOnTouched = /**
- * Registers a callback to be triggered when the component is touched.
- * Implemented as part of ControlValueAccessor.
- * @param {?} fn Callback to be registered.
- * @return {?}
- */
- function (fn) {
- this.onTouched = fn;
- };
- /**
- * Sets whether the component should be disabled.
- * Implemented as part of ControlValueAccessor.
- * @param isDisabled
- */
- /**
- * Sets whether the component should be disabled.
- * Implemented as part of ControlValueAccessor.
- * @param {?} isDisabled
- * @return {?}
- */
- MatSlider.prototype.setDisabledState = /**
- * Sets whether the component should be disabled.
- * Implemented as part of ControlValueAccessor.
- * @param {?} isDisabled
- * @return {?}
- */
- function (isDisabled) {
- this.disabled = isDisabled;
- };
- MatSlider.decorators = [
- { type: core.Component, args: [{selector: 'mat-slider',
- exportAs: 'matSlider',
- providers: [MAT_SLIDER_VALUE_ACCESSOR],
- host: {
- '(focus)': '_onFocus()',
- '(blur)': '_onBlur()',
- '(mousedown)': '_onMousedown($event)',
- '(keydown)': '_onKeydown($event)',
- '(keyup)': '_onKeyup()',
- '(mouseenter)': '_onMouseenter()',
- '(slide)': '_onSlide($event)',
- '(slideend)': '_onSlideEnd()',
- '(slidestart)': '_onSlideStart($event)',
- // On Safari starting to slide temporarily triggers text selection mode which
- // show the wrong cursor. We prevent it by stopping the `selectstart` event.
- '(selectstart)': '$event.preventDefault()',
- 'class': 'mat-slider',
- 'role': 'slider',
- '[tabIndex]': 'tabIndex',
- '[attr.aria-disabled]': 'disabled',
- '[attr.aria-valuemax]': 'max',
- '[attr.aria-valuemin]': 'min',
- '[attr.aria-valuenow]': 'value',
- '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
- '[class.mat-slider-disabled]': 'disabled',
- '[class.mat-slider-has-ticks]': 'tickInterval',
- '[class.mat-slider-horizontal]': '!vertical',
- '[class.mat-slider-axis-inverted]': '_invertAxis',
- '[class.mat-slider-sliding]': '_isSliding',
- '[class.mat-slider-thumb-label-showing]': 'thumbLabel',
- '[class.mat-slider-vertical]': 'vertical',
- '[class.mat-slider-min-value]': '_isMinValue',
- '[class.mat-slider-hide-last-tick]': 'disabled || _isMinValue && _thumbGap && _invertAxis',
- '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
- },
- template: "<div class=\"mat-slider-wrapper\" #sliderWrapper><div class=\"mat-slider-track-wrapper\"><div class=\"mat-slider-track-background\" [ngStyle]=\"_trackBackgroundStyles\"></div><div class=\"mat-slider-track-fill\" [ngStyle]=\"_trackFillStyles\"></div></div><div class=\"mat-slider-ticks-container\" [ngStyle]=\"_ticksContainerStyles\"><div class=\"mat-slider-ticks\" [ngStyle]=\"_ticksStyles\"></div></div><div class=\"mat-slider-thumb-container\" [ngStyle]=\"_thumbContainerStyles\"><div class=\"mat-slider-focus-ring\"></div><div class=\"mat-slider-thumb\"></div><div class=\"mat-slider-thumb-label\"><span class=\"mat-slider-thumb-label-text\">{{displayValue}}</span></div></div></div>",
- styles: [".mat-slider{display:inline-block;position:relative;box-sizing:border-box;padding:8px;outline:0;vertical-align:middle}.mat-slider.mat-slider-sliding:not(.mat-slider-disabled),.mat-slider:not(.mat-slider-disabled):active{cursor:-webkit-grabbing;cursor:grabbing}.mat-slider-wrapper{position:absolute}.mat-slider-track-wrapper{position:absolute;top:0;left:0;overflow:hidden}.mat-slider-track-fill{position:absolute;transform-origin:0 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-track-background{position:absolute;transform-origin:100% 100%;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-ticks-container{position:absolute;left:0;top:0;overflow:hidden}.mat-slider-ticks{background-repeat:repeat;background-clip:content-box;box-sizing:border-box;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-thumb-container{position:absolute;z-index:1;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-focus-ring{position:absolute;width:30px;height:30px;border-radius:50%;transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider.cdk-keyboard-focused .mat-slider-focus-ring,.mat-slider.cdk-program-focused .mat-slider-focus-ring{transform:scale(1);opacity:1}.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb-label{cursor:-webkit-grab;cursor:grab}.mat-slider-thumb{position:absolute;right:-10px;bottom:-10px;box-sizing:border-box;width:20px;height:20px;border:3px solid transparent;border-radius:50%;transform:scale(.7);transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),border-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-thumb-label{display:none;align-items:center;justify-content:center;position:absolute;width:28px;height:28px;border-radius:50%;transition:transform .4s cubic-bezier(.25,.8,.25,1),border-radius .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}@media (-ms-high-contrast:active){.mat-slider-thumb-label{outline:solid 1px}}.mat-slider-thumb-label-text{z-index:1;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-sliding .mat-slider-thumb-container,.mat-slider-sliding .mat-slider-track-background,.mat-slider-sliding .mat-slider-track-fill{transition-duration:0s}.mat-slider-has-ticks .mat-slider-wrapper::after{content:'';position:absolute;border-width:0;border-style:solid;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-has-ticks.cdk-focused:not(.mat-slider-hide-last-tick) .mat-slider-wrapper::after,.mat-slider-has-ticks:hover:not(.mat-slider-hide-last-tick) .mat-slider-wrapper::after{opacity:1}.mat-slider-has-ticks.cdk-focused:not(.mat-slider-disabled) .mat-slider-ticks,.mat-slider-has-ticks:hover:not(.mat-slider-disabled) .mat-slider-ticks{opacity:1}.mat-slider-thumb-label-showing .mat-slider-focus-ring{display:none}.mat-slider-thumb-label-showing .mat-slider-thumb-label{display:flex}.mat-slider-axis-inverted .mat-slider-track-fill{transform-origin:100% 100%}.mat-slider-axis-inverted .mat-slider-track-background{transform-origin:0 0}.mat-slider:not(.mat-slider-disabled).cdk-focused.mat-slider-thumb-label-showing .mat-slider-thumb{transform:scale(0)}.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label{border-radius:50% 50% 0}.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label-text{opacity:1}.mat-slider:not(.mat-slider-disabled).cdk-mouse-focused .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled).cdk-program-focused .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled).cdk-touch-focused .mat-slider-thumb{border-width:2px;transform:scale(1)}.mat-slider-disabled .mat-slider-focus-ring{transform:scale(0);opacity:0}.mat-slider-disabled .mat-slider-thumb{border-width:4px;transform:scale(.5)}.mat-slider-disabled .mat-slider-thumb-label{display:none}.mat-slider-horizontal{height:48px;min-width:128px}.mat-slider-horizontal .mat-slider-wrapper{height:2px;top:23px;left:8px;right:8px}.mat-slider-horizontal .mat-slider-wrapper::after{height:2px;border-left-width:2px;right:0;top:0}.mat-slider-horizontal .mat-slider-track-wrapper{height:2px;width:100%}.mat-slider-horizontal .mat-slider-track-fill{height:2px;width:100%;transform:scaleX(0)}.mat-slider-horizontal .mat-slider-track-background{height:2px;width:100%;transform:scaleX(1)}.mat-slider-horizontal .mat-slider-ticks-container{height:2px;width:100%}@media (-ms-high-contrast:active){.mat-slider-horizontal .mat-slider-ticks-container{height:0;outline:solid 2px;top:1px}}.mat-slider-horizontal .mat-slider-ticks{height:2px;width:100%}.mat-slider-horizontal .mat-slider-thumb-container{width:100%;height:0;top:50%}.mat-slider-horizontal .mat-slider-focus-ring{top:-15px;right:-15px}.mat-slider-horizontal .mat-slider-thumb-label{right:-14px;top:-40px;transform:translateY(26px) scale(.01) rotate(45deg)}.mat-slider-horizontal .mat-slider-thumb-label-text{transform:rotate(-45deg)}.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(45deg)}@media (-ms-high-contrast:active){.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label,.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label-text{transform:none}}.mat-slider-vertical{width:48px;min-height:128px}.mat-slider-vertical .mat-slider-wrapper{width:2px;top:8px;bottom:8px;left:23px}.mat-slider-vertical .mat-slider-wrapper::after{width:2px;border-top-width:2px;bottom:0;left:0}.mat-slider-vertical .mat-slider-track-wrapper{height:100%;width:2px}.mat-slider-vertical .mat-slider-track-fill{height:100%;width:2px;transform:scaleY(0)}.mat-slider-vertical .mat-slider-track-background{height:100%;width:2px;transform:scaleY(1)}.mat-slider-vertical .mat-slider-ticks-container{width:2px;height:100%}@media (-ms-high-contrast:active){.mat-slider-vertical .mat-slider-ticks-container{width:0;outline:solid 2px;left:1px}}.mat-slider-vertical .mat-slider-focus-ring{bottom:-15px;left:-15px}.mat-slider-vertical .mat-slider-ticks{width:2px;height:100%}.mat-slider-vertical .mat-slider-thumb-container{height:100%;width:0;left:50%}.mat-slider-vertical .mat-slider-thumb{-webkit-backface-visibility:hidden;backface-visibility:hidden}.mat-slider-vertical .mat-slider-thumb-label{bottom:-14px;left:-40px;transform:translateX(26px) scale(.01) rotate(-45deg)}.mat-slider-vertical .mat-slider-thumb-label-text{transform:rotate(45deg)}.mat-slider-vertical.cdk-focused .mat-slider-thumb-label{transform:rotate(-45deg)}[dir=rtl] .mat-slider-wrapper::after{left:0;right:auto}[dir=rtl] .mat-slider-horizontal .mat-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .mat-slider-horizontal .mat-slider-track-background{transform-origin:0 0}[dir=rtl] .mat-slider-horizontal.mat-slider-axis-inverted .mat-slider-track-fill{transform-origin:0 0}[dir=rtl] .mat-slider-horizontal.mat-slider-axis-inverted .mat-slider-track-background{transform-origin:100% 100%}.mat-slider._mat-animation-noopable .mat-slider-focus-ring,.mat-slider._mat-animation-noopable .mat-slider-has-ticks .mat-slider-wrapper::after,.mat-slider._mat-animation-noopable .mat-slider-thumb,.mat-slider._mat-animation-noopable .mat-slider-thumb-container,.mat-slider._mat-animation-noopable .mat-slider-thumb-label,.mat-slider._mat-animation-noopable .mat-slider-thumb-label-text,.mat-slider._mat-animation-noopable .mat-slider-ticks,.mat-slider._mat-animation-noopable .mat-slider-track-background,.mat-slider._mat-animation-noopable .mat-slider-track-fill{transition:none}"],
- inputs: ['disabled', 'color', 'tabIndex'],
- encapsulation: core.ViewEncapsulation.None,
- changeDetection: core.ChangeDetectionStrategy.OnPush,
- },] },
- ];
- /** @nocollapse */
- MatSlider.ctorParameters = function () { return [
- { type: core.ElementRef },
- { type: a11y.FocusMonitor },
- { type: core.ChangeDetectorRef },
- { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
- { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
- { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
- ]; };
- MatSlider.propDecorators = {
- invert: [{ type: core.Input }],
- max: [{ type: core.Input }],
- min: [{ type: core.Input }],
- step: [{ type: core.Input }],
- thumbLabel: [{ type: core.Input }],
- tickInterval: [{ type: core.Input }],
- value: [{ type: core.Input }],
- displayWith: [{ type: core.Input }],
- vertical: [{ type: core.Input }],
- change: [{ type: core.Output }],
- input: [{ type: core.Output }],
- valueChange: [{ type: core.Output }],
- _sliderWrapper: [{ type: core.ViewChild, args: ['sliderWrapper', { static: false },] }]
- };
- return MatSlider;
- }(_MatSliderMixinBase));
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- var MatSliderModule = /** @class */ (function () {
- function MatSliderModule() {
- }
- MatSliderModule.decorators = [
- { type: core.NgModule, args: [{
- imports: [common.CommonModule, core$1.MatCommonModule],
- exports: [MatSlider, core$1.MatCommonModule],
- declarations: [MatSlider],
- providers: [{ provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: core$1.GestureConfig }]
- },] },
- ];
- return MatSliderModule;
- }());
- exports.MatSliderModule = MatSliderModule;
- exports.MAT_SLIDER_VALUE_ACCESSOR = MAT_SLIDER_VALUE_ACCESSOR;
- exports.MatSliderChange = MatSliderChange;
- exports.MatSlider = MatSlider;
- Object.defineProperty(exports, '__esModule', { value: true });
- })));
- //# sourceMappingURL=material-slider.umd.js.map
|