source: trip-planner-front/node_modules/@angular/material/bundles/material-slider.umd.js@ 59329aa

Last change on this file since 59329aa was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 66.4 KB
RevLine 
[6a3a178]1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/material/core'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('@angular/cdk/platform'), require('rxjs')) :
3 typeof define === 'function' && define.amd ? define('@angular/material/slider', ['exports', '@angular/common', '@angular/core', '@angular/material/core', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/forms', '@angular/platform-browser/animations', '@angular/cdk/platform', 'rxjs'], factory) :
4 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.slider = {}), global.ng.common, global.ng.core, global.ng.material.core, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.keycodes, global.ng.forms, global.ng.platformBrowser.animations, global.ng.cdk.platform, global.rxjs));
5}(this, (function (exports, common, core, core$1, a11y, bidi, coercion, keycodes, forms, animations, platform, rxjs) { 'use strict';
6
7 /*! *****************************************************************************
8 Copyright (c) Microsoft Corporation.
9
10 Permission to use, copy, modify, and/or distribute this software for any
11 purpose with or without fee is hereby granted.
12
13 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19 PERFORMANCE OF THIS SOFTWARE.
20 ***************************************************************************** */
21 /* global Reflect, Promise */
22 var extendStatics = function (d, b) {
23 extendStatics = Object.setPrototypeOf ||
24 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
25 function (d, b) { for (var p in b)
26 if (Object.prototype.hasOwnProperty.call(b, p))
27 d[p] = b[p]; };
28 return extendStatics(d, b);
29 };
30 function __extends(d, b) {
31 if (typeof b !== "function" && b !== null)
32 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
33 extendStatics(d, b);
34 function __() { this.constructor = d; }
35 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
36 }
37 var __assign = function () {
38 __assign = Object.assign || function __assign(t) {
39 for (var s, i = 1, n = arguments.length; i < n; i++) {
40 s = arguments[i];
41 for (var p in s)
42 if (Object.prototype.hasOwnProperty.call(s, p))
43 t[p] = s[p];
44 }
45 return t;
46 };
47 return __assign.apply(this, arguments);
48 };
49 function __rest(s, e) {
50 var t = {};
51 for (var p in s)
52 if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
53 t[p] = s[p];
54 if (s != null && typeof Object.getOwnPropertySymbols === "function")
55 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
56 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
57 t[p[i]] = s[p[i]];
58 }
59 return t;
60 }
61 function __decorate(decorators, target, key, desc) {
62 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
63 if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
64 r = Reflect.decorate(decorators, target, key, desc);
65 else
66 for (var i = decorators.length - 1; i >= 0; i--)
67 if (d = decorators[i])
68 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
69 return c > 3 && r && Object.defineProperty(target, key, r), r;
70 }
71 function __param(paramIndex, decorator) {
72 return function (target, key) { decorator(target, key, paramIndex); };
73 }
74 function __metadata(metadataKey, metadataValue) {
75 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
76 return Reflect.metadata(metadataKey, metadataValue);
77 }
78 function __awaiter(thisArg, _arguments, P, generator) {
79 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
80 return new (P || (P = Promise))(function (resolve, reject) {
81 function fulfilled(value) { try {
82 step(generator.next(value));
83 }
84 catch (e) {
85 reject(e);
86 } }
87 function rejected(value) { try {
88 step(generator["throw"](value));
89 }
90 catch (e) {
91 reject(e);
92 } }
93 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
94 step((generator = generator.apply(thisArg, _arguments || [])).next());
95 });
96 }
97 function __generator(thisArg, body) {
98 var _ = { label: 0, sent: function () { if (t[0] & 1)
99 throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
100 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
101 function verb(n) { return function (v) { return step([n, v]); }; }
102 function step(op) {
103 if (f)
104 throw new TypeError("Generator is already executing.");
105 while (_)
106 try {
107 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
108 return t;
109 if (y = 0, t)
110 op = [op[0] & 2, t.value];
111 switch (op[0]) {
112 case 0:
113 case 1:
114 t = op;
115 break;
116 case 4:
117 _.label++;
118 return { value: op[1], done: false };
119 case 5:
120 _.label++;
121 y = op[1];
122 op = [0];
123 continue;
124 case 7:
125 op = _.ops.pop();
126 _.trys.pop();
127 continue;
128 default:
129 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
130 _ = 0;
131 continue;
132 }
133 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
134 _.label = op[1];
135 break;
136 }
137 if (op[0] === 6 && _.label < t[1]) {
138 _.label = t[1];
139 t = op;
140 break;
141 }
142 if (t && _.label < t[2]) {
143 _.label = t[2];
144 _.ops.push(op);
145 break;
146 }
147 if (t[2])
148 _.ops.pop();
149 _.trys.pop();
150 continue;
151 }
152 op = body.call(thisArg, _);
153 }
154 catch (e) {
155 op = [6, e];
156 y = 0;
157 }
158 finally {
159 f = t = 0;
160 }
161 if (op[0] & 5)
162 throw op[1];
163 return { value: op[0] ? op[1] : void 0, done: true };
164 }
165 }
166 var __createBinding = Object.create ? (function (o, m, k, k2) {
167 if (k2 === undefined)
168 k2 = k;
169 Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
170 }) : (function (o, m, k, k2) {
171 if (k2 === undefined)
172 k2 = k;
173 o[k2] = m[k];
174 });
175 function __exportStar(m, o) {
176 for (var p in m)
177 if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
178 __createBinding(o, m, p);
179 }
180 function __values(o) {
181 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
182 if (m)
183 return m.call(o);
184 if (o && typeof o.length === "number")
185 return {
186 next: function () {
187 if (o && i >= o.length)
188 o = void 0;
189 return { value: o && o[i++], done: !o };
190 }
191 };
192 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
193 }
194 function __read(o, n) {
195 var m = typeof Symbol === "function" && o[Symbol.iterator];
196 if (!m)
197 return o;
198 var i = m.call(o), r, ar = [], e;
199 try {
200 while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
201 ar.push(r.value);
202 }
203 catch (error) {
204 e = { error: error };
205 }
206 finally {
207 try {
208 if (r && !r.done && (m = i["return"]))
209 m.call(i);
210 }
211 finally {
212 if (e)
213 throw e.error;
214 }
215 }
216 return ar;
217 }
218 /** @deprecated */
219 function __spread() {
220 for (var ar = [], i = 0; i < arguments.length; i++)
221 ar = ar.concat(__read(arguments[i]));
222 return ar;
223 }
224 /** @deprecated */
225 function __spreadArrays() {
226 for (var s = 0, i = 0, il = arguments.length; i < il; i++)
227 s += arguments[i].length;
228 for (var r = Array(s), k = 0, i = 0; i < il; i++)
229 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
230 r[k] = a[j];
231 return r;
232 }
233 function __spreadArray(to, from, pack) {
234 if (pack || arguments.length === 2)
235 for (var i = 0, l = from.length, ar; i < l; i++) {
236 if (ar || !(i in from)) {
237 if (!ar)
238 ar = Array.prototype.slice.call(from, 0, i);
239 ar[i] = from[i];
240 }
241 }
242 return to.concat(ar || from);
243 }
244 function __await(v) {
245 return this instanceof __await ? (this.v = v, this) : new __await(v);
246 }
247 function __asyncGenerator(thisArg, _arguments, generator) {
248 if (!Symbol.asyncIterator)
249 throw new TypeError("Symbol.asyncIterator is not defined.");
250 var g = generator.apply(thisArg, _arguments || []), i, q = [];
251 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
252 function verb(n) { if (g[n])
253 i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
254 function resume(n, v) { try {
255 step(g[n](v));
256 }
257 catch (e) {
258 settle(q[0][3], e);
259 } }
260 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
261 function fulfill(value) { resume("next", value); }
262 function reject(value) { resume("throw", value); }
263 function settle(f, v) { if (f(v), q.shift(), q.length)
264 resume(q[0][0], q[0][1]); }
265 }
266 function __asyncDelegator(o) {
267 var i, p;
268 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
269 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
270 }
271 function __asyncValues(o) {
272 if (!Symbol.asyncIterator)
273 throw new TypeError("Symbol.asyncIterator is not defined.");
274 var m = o[Symbol.asyncIterator], i;
275 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
276 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
277 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
278 }
279 function __makeTemplateObject(cooked, raw) {
280 if (Object.defineProperty) {
281 Object.defineProperty(cooked, "raw", { value: raw });
282 }
283 else {
284 cooked.raw = raw;
285 }
286 return cooked;
287 }
288 ;
289 var __setModuleDefault = Object.create ? (function (o, v) {
290 Object.defineProperty(o, "default", { enumerable: true, value: v });
291 }) : function (o, v) {
292 o["default"] = v;
293 };
294 function __importStar(mod) {
295 if (mod && mod.__esModule)
296 return mod;
297 var result = {};
298 if (mod != null)
299 for (var k in mod)
300 if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
301 __createBinding(result, mod, k);
302 __setModuleDefault(result, mod);
303 return result;
304 }
305 function __importDefault(mod) {
306 return (mod && mod.__esModule) ? mod : { default: mod };
307 }
308 function __classPrivateFieldGet(receiver, state, kind, f) {
309 if (kind === "a" && !f)
310 throw new TypeError("Private accessor was defined without a getter");
311 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
312 throw new TypeError("Cannot read private member from an object whose class did not declare it");
313 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
314 }
315 function __classPrivateFieldSet(receiver, state, value, kind, f) {
316 if (kind === "m")
317 throw new TypeError("Private method is not writable");
318 if (kind === "a" && !f)
319 throw new TypeError("Private accessor was defined without a setter");
320 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
321 throw new TypeError("Cannot write private member to an object whose class did not declare it");
322 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
323 }
324
325 var activeEventOptions = platform.normalizePassiveListenerOptions({ passive: false });
326 /**
327 * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
328 * the default separation we chose.
329 */
330 var MIN_AUTO_TICK_SEPARATION = 30;
331 /** The thumb gap size for a disabled slider. */
332 var DISABLED_THUMB_GAP = 7;
333 /** The thumb gap size for a non-active slider at its minimum value. */
334 var MIN_VALUE_NONACTIVE_THUMB_GAP = 7;
335 /** The thumb gap size for an active slider at its minimum value. */
336 var MIN_VALUE_ACTIVE_THUMB_GAP = 10;
337 /**
338 * Provider Expression that allows mat-slider to register as a ControlValueAccessor.
339 * This allows it to support [(ngModel)] and [formControl].
340 * @docs-private
341 */
342 var MAT_SLIDER_VALUE_ACCESSOR = {
343 provide: forms.NG_VALUE_ACCESSOR,
344 useExisting: core.forwardRef(function () { return MatSlider; }),
345 multi: true
346 };
347 /** A simple change event emitted by the MatSlider component. */
348 var MatSliderChange = /** @class */ (function () {
349 function MatSliderChange() {
350 }
351 return MatSliderChange;
352 }());
353 // Boilerplate for applying mixins to MatSlider.
354 /** @docs-private */
355 var _MatSliderBase = core$1.mixinTabIndex(core$1.mixinColor(core$1.mixinDisabled(/** @class */ (function () {
356 function class_1(_elementRef) {
357 this._elementRef = _elementRef;
358 }
359 return class_1;
360 }())), 'accent'));
361 /**
362 * Allows users to select from a range of values by moving the slider thumb. It is similar in
363 * behavior to the native `<input type="range">` element.
364 */
365 var MatSlider = /** @class */ (function (_super) {
366 __extends(MatSlider, _super);
367 function MatSlider(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex, _ngZone, _document, _animationMode) {
368 var _this = _super.call(this, elementRef) || this;
369 _this._focusMonitor = _focusMonitor;
370 _this._changeDetectorRef = _changeDetectorRef;
371 _this._dir = _dir;
372 _this._ngZone = _ngZone;
373 _this._animationMode = _animationMode;
374 _this._invert = false;
375 _this._max = 100;
376 _this._min = 0;
377 _this._step = 1;
378 _this._thumbLabel = false;
379 _this._tickInterval = 0;
380 _this._value = null;
381 _this._vertical = false;
382 /** Event emitted when the slider value has changed. */
383 _this.change = new core.EventEmitter();
384 /** Event emitted when the slider thumb moves. */
385 _this.input = new core.EventEmitter();
386 /**
387 * Emits when the raw value of the slider changes. This is here primarily
388 * to facilitate the two-way binding for the `value` input.
389 * @docs-private
390 */
391 _this.valueChange = new core.EventEmitter();
392 /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
393 _this.onTouched = function () { };
394 _this._percent = 0;
395 /**
396 * Whether or not the thumb is sliding and what the user is using to slide it with.
397 * Used to determine if there should be a transition for the thumb and fill track.
398 */
399 _this._isSliding = null;
400 /**
401 * Whether or not the slider is active (clicked or sliding).
402 * Used to shrink and grow the thumb as according to the Material Design spec.
403 */
404 _this._isActive = false;
405 /** The size of a tick interval as a percentage of the size of the track. */
406 _this._tickIntervalPercent = 0;
407 /** The dimensions of the slider. */
408 _this._sliderDimensions = null;
409 _this._controlValueAccessorChangeFn = function () { };
410 /** Subscription to the Directionality change EventEmitter. */
411 _this._dirChangeSubscription = rxjs.Subscription.EMPTY;
412 /** Called when the user has put their pointer down on the slider. */
413 _this._pointerDown = function (event) {
414 // Don't do anything if the slider is disabled or the
415 // user is using anything other than the main mouse button.
416 if (_this.disabled || _this._isSliding || (!isTouchEvent(event) && event.button !== 0)) {
417 return;
418 }
419 _this._ngZone.run(function () {
420 _this._touchId = isTouchEvent(event) ?
421 getTouchIdForSlider(event, _this._elementRef.nativeElement) : undefined;
422 var pointerPosition = getPointerPositionOnPage(event, _this._touchId);
423 if (pointerPosition) {
424 var oldValue = _this.value;
425 _this._isSliding = 'pointer';
426 _this._lastPointerEvent = event;
427 event.preventDefault();
428 _this._focusHostElement();
429 _this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
430 _this._bindGlobalEvents(event);
431 _this._focusHostElement();
432 _this._updateValueFromPosition(pointerPosition);
433 _this._valueOnSlideStart = oldValue;
434 // Emit a change and input event if the value changed.
435 if (oldValue != _this.value) {
436 _this._emitInputEvent();
437 }
438 }
439 });
440 };
441 /**
442 * Called when the user has moved their pointer after
443 * starting to drag. Bound on the document level.
444 */
445 _this._pointerMove = function (event) {
446 if (_this._isSliding === 'pointer') {
447 var pointerPosition = getPointerPositionOnPage(event, _this._touchId);
448 if (pointerPosition) {
449 // Prevent the slide from selecting anything else.
450 event.preventDefault();
451 var oldValue = _this.value;
452 _this._lastPointerEvent = event;
453 _this._updateValueFromPosition(pointerPosition);
454 // Native range elements always emit `input` events when the value changed while sliding.
455 if (oldValue != _this.value) {
456 _this._emitInputEvent();
457 }
458 }
459 }
460 };
461 /** Called when the user has lifted their pointer. Bound on the document level. */
462 _this._pointerUp = function (event) {
463 if (_this._isSliding === 'pointer') {
464 if (!isTouchEvent(event) || typeof _this._touchId !== 'number' ||
465 // Note that we use `changedTouches`, rather than `touches` because it
466 // seems like in most cases `touches` is empty for `touchend` events.
467 findMatchingTouch(event.changedTouches, _this._touchId)) {
468 event.preventDefault();
469 _this._removeGlobalEvents();
470 _this._isSliding = null;
471 _this._touchId = undefined;
472 if (_this._valueOnSlideStart != _this.value && !_this.disabled) {
473 _this._emitChangeEvent();
474 }
475 _this._valueOnSlideStart = _this._lastPointerEvent = null;
476 }
477 }
478 };
479 /** Called when the window has lost focus. */
480 _this._windowBlur = function () {
481 // If the window is blurred while dragging we need to stop dragging because the
482 // browser won't dispatch the `mouseup` and `touchend` events anymore.
483 if (_this._lastPointerEvent) {
484 _this._pointerUp(_this._lastPointerEvent);
485 }
486 };
487 _this._document = _document;
488 _this.tabIndex = parseInt(tabIndex) || 0;
489 _ngZone.runOutsideAngular(function () {
490 var element = elementRef.nativeElement;
491 element.addEventListener('mousedown', _this._pointerDown, activeEventOptions);
492 element.addEventListener('touchstart', _this._pointerDown, activeEventOptions);
493 });
494 return _this;
495 }
496 Object.defineProperty(MatSlider.prototype, "invert", {
497 /** Whether the slider is inverted. */
498 get: function () { return this._invert; },
499 set: function (value) {
500 this._invert = coercion.coerceBooleanProperty(value);
501 },
502 enumerable: false,
503 configurable: true
504 });
505 Object.defineProperty(MatSlider.prototype, "max", {
506 /** The maximum value that the slider can have. */
507 get: function () { return this._max; },
508 set: function (v) {
509 this._max = coercion.coerceNumberProperty(v, this._max);
510 this._percent = this._calculatePercentage(this._value);
511 // Since this also modifies the percentage, we need to let the change detection know.
512 this._changeDetectorRef.markForCheck();
513 },
514 enumerable: false,
515 configurable: true
516 });
517 Object.defineProperty(MatSlider.prototype, "min", {
518 /** The minimum value that the slider can have. */
519 get: function () { return this._min; },
520 set: function (v) {
521 this._min = coercion.coerceNumberProperty(v, this._min);
522 this._percent = this._calculatePercentage(this._value);
523 // Since this also modifies the percentage, we need to let the change detection know.
524 this._changeDetectorRef.markForCheck();
525 },
526 enumerable: false,
527 configurable: true
528 });
529 Object.defineProperty(MatSlider.prototype, "step", {
530 /** The values at which the thumb will snap. */
531 get: function () { return this._step; },
532 set: function (v) {
533 this._step = coercion.coerceNumberProperty(v, this._step);
534 if (this._step % 1 !== 0) {
535 this._roundToDecimal = this._step.toString().split('.').pop().length;
536 }
537 // Since this could modify the label, we need to notify the change detection.
538 this._changeDetectorRef.markForCheck();
539 },
540 enumerable: false,
541 configurable: true
542 });
543 Object.defineProperty(MatSlider.prototype, "thumbLabel", {
544 /** Whether or not to show the thumb label. */
545 get: function () { return this._thumbLabel; },
546 set: function (value) { this._thumbLabel = coercion.coerceBooleanProperty(value); },
547 enumerable: false,
548 configurable: true
549 });
550 Object.defineProperty(MatSlider.prototype, "tickInterval", {
551 /**
552 * How often to show ticks. Relative to the step so that a tick always appears on a step.
553 * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
554 */
555 get: function () { return this._tickInterval; },
556 set: function (value) {
557 if (value === 'auto') {
558 this._tickInterval = 'auto';
559 }
560 else if (typeof value === 'number' || typeof value === 'string') {
561 this._tickInterval = coercion.coerceNumberProperty(value, this._tickInterval);
562 }
563 else {
564 this._tickInterval = 0;
565 }
566 },
567 enumerable: false,
568 configurable: true
569 });
570 Object.defineProperty(MatSlider.prototype, "value", {
571 /** Value of the slider. */
572 get: function () {
573 // If the value needs to be read and it is still uninitialized, initialize it to the min.
574 if (this._value === null) {
575 this.value = this._min;
576 }
577 return this._value;
578 },
579 set: function (v) {
580 if (v !== this._value) {
581 var value = coercion.coerceNumberProperty(v, 0);
582 // While incrementing by a decimal we can end up with values like 33.300000000000004.
583 // Truncate it to ensure that it matches the label and to make it easier to work with.
584 if (this._roundToDecimal && value !== this.min && value !== this.max) {
585 value = parseFloat(value.toFixed(this._roundToDecimal));
586 }
587 this._value = value;
588 this._percent = this._calculatePercentage(this._value);
589 // Since this also modifies the percentage, we need to let the change detection know.
590 this._changeDetectorRef.markForCheck();
591 }
592 },
593 enumerable: false,
594 configurable: true
595 });
596 Object.defineProperty(MatSlider.prototype, "vertical", {
597 /** Whether the slider is vertical. */
598 get: function () { return this._vertical; },
599 set: function (value) {
600 this._vertical = coercion.coerceBooleanProperty(value);
601 },
602 enumerable: false,
603 configurable: true
604 });
605 Object.defineProperty(MatSlider.prototype, "displayValue", {
606 /** The value to be used for display purposes. */
607 get: function () {
608 if (this.displayWith) {
609 // Value is never null but since setters and getters cannot have
610 // different types, the value getter is also typed to return null.
611 return this.displayWith(this.value);
612 }
613 // Note that this could be improved further by rounding something like 0.999 to 1 or
614 // 0.899 to 0.9, however it is very performance sensitive, because it gets called on
615 // every change detection cycle.
616 if (this._roundToDecimal && this.value && this.value % 1 !== 0) {
617 return this.value.toFixed(this._roundToDecimal);
618 }
619 return this.value || 0;
620 },
621 enumerable: false,
622 configurable: true
623 });
624 /** set focus to the host element */
625 MatSlider.prototype.focus = function (options) {
626 this._focusHostElement(options);
627 };
628 /** blur the host element */
629 MatSlider.prototype.blur = function () {
630 this._blurHostElement();
631 };
632 Object.defineProperty(MatSlider.prototype, "percent", {
633 /** The percentage of the slider that coincides with the value. */
634 get: function () { return this._clamp(this._percent); },
635 enumerable: false,
636 configurable: true
637 });
638 /**
639 * Whether the axis of the slider is inverted.
640 * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
641 */
642 MatSlider.prototype._shouldInvertAxis = function () {
643 // Standard non-inverted mode for a vertical slider should be dragging the thumb from bottom to
644 // top. However from a y-axis standpoint this is inverted.
645 return this.vertical ? !this.invert : this.invert;
646 };
647 /** Whether the slider is at its minimum value. */
648 MatSlider.prototype._isMinValue = function () {
649 return this.percent === 0;
650 };
651 /**
652 * The amount of space to leave between the slider thumb and the track fill & track background
653 * elements.
654 */
655 MatSlider.prototype._getThumbGap = function () {
656 if (this.disabled) {
657 return DISABLED_THUMB_GAP;
658 }
659 if (this._isMinValue() && !this.thumbLabel) {
660 return this._isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
661 }
662 return 0;
663 };
664 /** CSS styles for the track background element. */
665 MatSlider.prototype._getTrackBackgroundStyles = function () {
666 var axis = this.vertical ? 'Y' : 'X';
667 var scale = this.vertical ? "1, " + (1 - this.percent) + ", 1" : 1 - this.percent + ", 1, 1";
668 var sign = this._shouldInvertMouseCoords() ? '-' : '';
669 return {
670 // scale3d avoids some rendering issues in Chrome. See #12071.
671 transform: "translate" + axis + "(" + sign + this._getThumbGap() + "px) scale3d(" + scale + ")"
672 };
673 };
674 /** CSS styles for the track fill element. */
675 MatSlider.prototype._getTrackFillStyles = function () {
676 var percent = this.percent;
677 var axis = this.vertical ? 'Y' : 'X';
678 var scale = this.vertical ? "1, " + percent + ", 1" : percent + ", 1, 1";
679 var sign = this._shouldInvertMouseCoords() ? '' : '-';
680 return {
681 // scale3d avoids some rendering issues in Chrome. See #12071.
682 transform: "translate" + axis + "(" + sign + this._getThumbGap() + "px) scale3d(" + scale + ")",
683 // iOS Safari has a bug where it won't re-render elements which start of as `scale(0)` until
684 // something forces a style recalculation on it. Since we'll end up with `scale(0)` when
685 // the value of the slider is 0, we can easily get into this situation. We force a
686 // recalculation by changing the element's `display` when it goes from 0 to any other value.
687 display: percent === 0 ? 'none' : ''
688 };
689 };
690 /** CSS styles for the ticks container element. */
691 MatSlider.prototype._getTicksContainerStyles = function () {
692 var axis = this.vertical ? 'Y' : 'X';
693 // For a horizontal slider in RTL languages we push the ticks container off the left edge
694 // instead of the right edge to avoid causing a horizontal scrollbar to appear.
695 var sign = !this.vertical && this._getDirection() == 'rtl' ? '' : '-';
696 var offset = this._tickIntervalPercent / 2 * 100;
697 return {
698 'transform': "translate" + axis + "(" + sign + offset + "%)"
699 };
700 };
701 /** CSS styles for the ticks element. */
702 MatSlider.prototype._getTicksStyles = function () {
703 var tickSize = this._tickIntervalPercent * 100;
704 var backgroundSize = this.vertical ? "2px " + tickSize + "%" : tickSize + "% 2px";
705 var axis = this.vertical ? 'Y' : 'X';
706 // Depending on the direction we pushed the ticks container, push the ticks the opposite
707 // direction to re-center them but clip off the end edge. In RTL languages we need to flip the
708 // ticks 180 degrees so we're really cutting off the end edge abd not the start.
709 var sign = !this.vertical && this._getDirection() == 'rtl' ? '-' : '';
710 var rotate = !this.vertical && this._getDirection() == 'rtl' ? ' rotate(180deg)' : '';
711 var styles = {
712 'backgroundSize': backgroundSize,
713 // Without translateZ ticks sometimes jitter as the slider moves on Chrome & Firefox.
714 'transform': "translateZ(0) translate" + axis + "(" + sign + tickSize / 2 + "%)" + rotate
715 };
716 if (this._isMinValue() && this._getThumbGap()) {
717 var shouldInvertAxis = this._shouldInvertAxis();
718 var side = void 0;
719 if (this.vertical) {
720 side = shouldInvertAxis ? 'Bottom' : 'Top';
721 }
722 else {
723 side = shouldInvertAxis ? 'Right' : 'Left';
724 }
725 styles["padding" + side] = this._getThumbGap() + "px";
726 }
727 return styles;
728 };
729 MatSlider.prototype._getThumbContainerStyles = function () {
730 var shouldInvertAxis = this._shouldInvertAxis();
731 var axis = this.vertical ? 'Y' : 'X';
732 // For a horizontal slider in RTL languages we push the thumb container off the left edge
733 // instead of the right edge to avoid causing a horizontal scrollbar to appear.
734 var invertOffset = (this._getDirection() == 'rtl' && !this.vertical) ? !shouldInvertAxis : shouldInvertAxis;
735 var offset = (invertOffset ? this.percent : 1 - this.percent) * 100;
736 return {
737 'transform': "translate" + axis + "(-" + offset + "%)"
738 };
739 };
740 /**
741 * Whether mouse events should be converted to a slider position by calculating their distance
742 * from the right or bottom edge of the slider as opposed to the top or left.
743 */
744 MatSlider.prototype._shouldInvertMouseCoords = function () {
745 var shouldInvertAxis = this._shouldInvertAxis();
746 return (this._getDirection() == 'rtl' && !this.vertical) ? !shouldInvertAxis : shouldInvertAxis;
747 };
748 /** The language direction for this slider element. */
749 MatSlider.prototype._getDirection = function () {
750 return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr';
751 };
752 MatSlider.prototype.ngAfterViewInit = function () {
753 var _this = this;
754 this._focusMonitor
755 .monitor(this._elementRef, true)
756 .subscribe(function (origin) {
757 _this._isActive = !!origin && origin !== 'keyboard';
758 _this._changeDetectorRef.detectChanges();
759 });
760 if (this._dir) {
761 this._dirChangeSubscription = this._dir.change.subscribe(function () {
762 _this._changeDetectorRef.markForCheck();
763 });
764 }
765 };
766 MatSlider.prototype.ngOnDestroy = function () {
767 var element = this._elementRef.nativeElement;
768 element.removeEventListener('mousedown', this._pointerDown, activeEventOptions);
769 element.removeEventListener('touchstart', this._pointerDown, activeEventOptions);
770 this._lastPointerEvent = null;
771 this._removeGlobalEvents();
772 this._focusMonitor.stopMonitoring(this._elementRef);
773 this._dirChangeSubscription.unsubscribe();
774 };
775 MatSlider.prototype._onMouseenter = function () {
776 if (this.disabled) {
777 return;
778 }
779 // We save the dimensions of the slider here so we can use them to update the spacing of the
780 // ticks and determine where on the slider click and slide events happen.
781 this._sliderDimensions = this._getSliderDimensions();
782 this._updateTickIntervalPercent();
783 };
784 MatSlider.prototype._onFocus = function () {
785 // We save the dimensions of the slider here so we can use them to update the spacing of the
786 // ticks and determine where on the slider click and slide events happen.
787 this._sliderDimensions = this._getSliderDimensions();
788 this._updateTickIntervalPercent();
789 };
790 MatSlider.prototype._onBlur = function () {
791 this.onTouched();
792 };
793 MatSlider.prototype._onKeydown = function (event) {
794 if (this.disabled || keycodes.hasModifierKey(event) ||
795 (this._isSliding && this._isSliding !== 'keyboard')) {
796 return;
797 }
798 var oldValue = this.value;
799 switch (event.keyCode) {
800 case keycodes.PAGE_UP:
801 this._increment(10);
802 break;
803 case keycodes.PAGE_DOWN:
804 this._increment(-10);
805 break;
806 case keycodes.END:
807 this.value = this.max;
808 break;
809 case keycodes.HOME:
810 this.value = this.min;
811 break;
812 case keycodes.LEFT_ARROW:
813 // NOTE: For a sighted user it would make more sense that when they press an arrow key on an
814 // inverted slider the thumb moves in that direction. However for a blind user, nothing
815 // about the slider indicates that it is inverted. They will expect left to be decrement,
816 // regardless of how it appears on the screen. For speakers ofRTL languages, they probably
817 // expect left to mean increment. Therefore we flip the meaning of the side arrow keys for
818 // RTL. For inverted sliders we prefer a good a11y experience to having it "look right" for
819 // sighted users, therefore we do not swap the meaning.
820 this._increment(this._getDirection() == 'rtl' ? 1 : -1);
821 break;
822 case keycodes.UP_ARROW:
823 this._increment(1);
824 break;
825 case keycodes.RIGHT_ARROW:
826 // See comment on LEFT_ARROW about the conditions under which we flip the meaning.
827 this._increment(this._getDirection() == 'rtl' ? -1 : 1);
828 break;
829 case keycodes.DOWN_ARROW:
830 this._increment(-1);
831 break;
832 default:
833 // Return if the key is not one that we explicitly handle to avoid calling preventDefault on
834 // it.
835 return;
836 }
837 if (oldValue != this.value) {
838 this._emitInputEvent();
839 this._emitChangeEvent();
840 }
841 this._isSliding = 'keyboard';
842 event.preventDefault();
843 };
844 MatSlider.prototype._onKeyup = function () {
845 if (this._isSliding === 'keyboard') {
846 this._isSliding = null;
847 }
848 };
849 /** Use defaultView of injected document if available or fallback to global window reference */
850 MatSlider.prototype._getWindow = function () {
851 return this._document.defaultView || window;
852 };
853 /**
854 * Binds our global move and end events. They're bound at the document level and only while
855 * dragging so that the user doesn't have to keep their pointer exactly over the slider
856 * as they're swiping across the screen.
857 */
858 MatSlider.prototype._bindGlobalEvents = function (triggerEvent) {
859 // Note that we bind the events to the `document`, because it allows us to capture
860 // drag cancel events where the user's pointer is outside the browser window.
861 var document = this._document;
862 var isTouch = isTouchEvent(triggerEvent);
863 var moveEventName = isTouch ? 'touchmove' : 'mousemove';
864 var endEventName = isTouch ? 'touchend' : 'mouseup';
865 document.addEventListener(moveEventName, this._pointerMove, activeEventOptions);
866 document.addEventListener(endEventName, this._pointerUp, activeEventOptions);
867 if (isTouch) {
868 document.addEventListener('touchcancel', this._pointerUp, activeEventOptions);
869 }
870 var window = this._getWindow();
871 if (typeof window !== 'undefined' && window) {
872 window.addEventListener('blur', this._windowBlur);
873 }
874 };
875 /** Removes any global event listeners that we may have added. */
876 MatSlider.prototype._removeGlobalEvents = function () {
877 var document = this._document;
878 document.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
879 document.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
880 document.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
881 document.removeEventListener('touchend', this._pointerUp, activeEventOptions);
882 document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions);
883 var window = this._getWindow();
884 if (typeof window !== 'undefined' && window) {
885 window.removeEventListener('blur', this._windowBlur);
886 }
887 };
888 /** Increments the slider by the given number of steps (negative number decrements). */
889 MatSlider.prototype._increment = function (numSteps) {
890 this.value = this._clamp((this.value || 0) + this.step * numSteps, this.min, this.max);
891 };
892 /** Calculate the new value from the new physical location. The value will always be snapped. */
893 MatSlider.prototype._updateValueFromPosition = function (pos) {
894 if (!this._sliderDimensions) {
895 return;
896 }
897 var offset = this.vertical ? this._sliderDimensions.top : this._sliderDimensions.left;
898 var size = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
899 var posComponent = this.vertical ? pos.y : pos.x;
900 // The exact value is calculated from the event and used to find the closest snap value.
901 var percent = this._clamp((posComponent - offset) / size);
902 if (this._shouldInvertMouseCoords()) {
903 percent = 1 - percent;
904 }
905 // Since the steps may not divide cleanly into the max value, if the user
906 // slid to 0 or 100 percent, we jump to the min/max value. This approach
907 // is slightly more intuitive than using `Math.ceil` below, because it
908 // follows the user's pointer closer.
909 if (percent === 0) {
910 this.value = this.min;
911 }
912 else if (percent === 1) {
913 this.value = this.max;
914 }
915 else {
916 var exactValue = this._calculateValue(percent);
917 // This calculation finds the closest step by finding the closest
918 // whole number divisible by the step relative to the min.
919 var closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
920 // The value needs to snap to the min and max.
921 this.value = this._clamp(closestValue, this.min, this.max);
922 }
923 };
924 /** Emits a change event if the current value is different from the last emitted value. */
925 MatSlider.prototype._emitChangeEvent = function () {
926 this._controlValueAccessorChangeFn(this.value);
927 this.valueChange.emit(this.value);
928 this.change.emit(this._createChangeEvent());
929 };
930 /** Emits an input event when the current value is different from the last emitted value. */
931 MatSlider.prototype._emitInputEvent = function () {
932 this.input.emit(this._createChangeEvent());
933 };
934 /** Updates the amount of space between ticks as a percentage of the width of the slider. */
935 MatSlider.prototype._updateTickIntervalPercent = function () {
936 if (!this.tickInterval || !this._sliderDimensions) {
937 return;
938 }
939 if (this.tickInterval == 'auto') {
940 var trackSize = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
941 var pixelsPerStep = trackSize * this.step / (this.max - this.min);
942 var stepsPerTick = Math.ceil(MIN_AUTO_TICK_SEPARATION / pixelsPerStep);
943 var pixelsPerTick = stepsPerTick * this.step;
944 this._tickIntervalPercent = pixelsPerTick / trackSize;
945 }
946 else {
947 this._tickIntervalPercent = this.tickInterval * this.step / (this.max - this.min);
948 }
949 };
950 /** Creates a slider change object from the specified value. */
951 MatSlider.prototype._createChangeEvent = function (value) {
952 if (value === void 0) { value = this.value; }
953 var event = new MatSliderChange();
954 event.source = this;
955 event.value = value;
956 return event;
957 };
958 /** Calculates the percentage of the slider that a value is. */
959 MatSlider.prototype._calculatePercentage = function (value) {
960 return ((value || 0) - this.min) / (this.max - this.min);
961 };
962 /** Calculates the value a percentage of the slider corresponds to. */
963 MatSlider.prototype._calculateValue = function (percentage) {
964 return this.min + percentage * (this.max - this.min);
965 };
966 /** Return a number between two numbers. */
967 MatSlider.prototype._clamp = function (value, min, max) {
968 if (min === void 0) { min = 0; }
969 if (max === void 0) { max = 1; }
970 return Math.max(min, Math.min(value, max));
971 };
972 /**
973 * Get the bounding client rect of the slider track element.
974 * The track is used rather than the native element to ignore the extra space that the thumb can
975 * take up.
976 */
977 MatSlider.prototype._getSliderDimensions = function () {
978 return this._sliderWrapper ? this._sliderWrapper.nativeElement.getBoundingClientRect() : null;
979 };
980 /**
981 * Focuses the native element.
982 * Currently only used to allow a blur event to fire but will be used with keyboard input later.
983 */
984 MatSlider.prototype._focusHostElement = function (options) {
985 this._elementRef.nativeElement.focus(options);
986 };
987 /** Blurs the native element. */
988 MatSlider.prototype._blurHostElement = function () {
989 this._elementRef.nativeElement.blur();
990 };
991 /**
992 * Sets the model value. Implemented as part of ControlValueAccessor.
993 * @param value
994 */
995 MatSlider.prototype.writeValue = function (value) {
996 this.value = value;
997 };
998 /**
999 * Registers a callback to be triggered when the value has changed.
1000 * Implemented as part of ControlValueAccessor.
1001 * @param fn Callback to be registered.
1002 */
1003 MatSlider.prototype.registerOnChange = function (fn) {
1004 this._controlValueAccessorChangeFn = fn;
1005 };
1006 /**
1007 * Registers a callback to be triggered when the component is touched.
1008 * Implemented as part of ControlValueAccessor.
1009 * @param fn Callback to be registered.
1010 */
1011 MatSlider.prototype.registerOnTouched = function (fn) {
1012 this.onTouched = fn;
1013 };
1014 /**
1015 * Sets whether the component should be disabled.
1016 * Implemented as part of ControlValueAccessor.
1017 * @param isDisabled
1018 */
1019 MatSlider.prototype.setDisabledState = function (isDisabled) {
1020 this.disabled = isDisabled;
1021 };
1022 return MatSlider;
1023 }(_MatSliderBase));
1024 MatSlider.decorators = [
1025 { type: core.Component, args: [{
1026 selector: 'mat-slider',
1027 exportAs: 'matSlider',
1028 providers: [MAT_SLIDER_VALUE_ACCESSOR],
1029 host: {
1030 '(focus)': '_onFocus()',
1031 '(blur)': '_onBlur()',
1032 '(keydown)': '_onKeydown($event)',
1033 '(keyup)': '_onKeyup()',
1034 '(mouseenter)': '_onMouseenter()',
1035 // On Safari starting to slide temporarily triggers text selection mode which
1036 // show the wrong cursor. We prevent it by stopping the `selectstart` event.
1037 '(selectstart)': '$event.preventDefault()',
1038 'class': 'mat-slider mat-focus-indicator',
1039 'role': 'slider',
1040 '[tabIndex]': 'tabIndex',
1041 '[attr.aria-disabled]': 'disabled',
1042 '[attr.aria-valuemax]': 'max',
1043 '[attr.aria-valuemin]': 'min',
1044 '[attr.aria-valuenow]': 'value',
1045 // NVDA and Jaws appear to announce the `aria-valuenow` by calculating its percentage based
1046 // on its value between `aria-valuemin` and `aria-valuemax`. Due to how decimals are handled,
1047 // it can cause the slider to read out a very long value like 0.20000068 if the current value
1048 // is 0.2 with a min of 0 and max of 1. We work around the issue by setting `aria-valuetext`
1049 // to the same value that we set on the slider's thumb which will be truncated.
1050 '[attr.aria-valuetext]': 'valueText == null ? displayValue : valueText',
1051 '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
1052 '[class.mat-slider-disabled]': 'disabled',
1053 '[class.mat-slider-has-ticks]': 'tickInterval',
1054 '[class.mat-slider-horizontal]': '!vertical',
1055 '[class.mat-slider-axis-inverted]': '_shouldInvertAxis()',
1056 // Class binding which is only used by the test harness as there is no other
1057 // way for the harness to detect if mouse coordinates need to be inverted.
1058 '[class.mat-slider-invert-mouse-coords]': '_shouldInvertMouseCoords()',
1059 '[class.mat-slider-sliding]': '_isSliding',
1060 '[class.mat-slider-thumb-label-showing]': 'thumbLabel',
1061 '[class.mat-slider-vertical]': 'vertical',
1062 '[class.mat-slider-min-value]': '_isMinValue()',
1063 '[class.mat-slider-hide-last-tick]': 'disabled || _isMinValue() && _getThumbGap() && _shouldInvertAxis()',
1064 '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
1065 },
1066 template: "<div class=\"mat-slider-wrapper\" #sliderWrapper>\n <div class=\"mat-slider-track-wrapper\">\n <div class=\"mat-slider-track-background\" [ngStyle]=\"_getTrackBackgroundStyles()\"></div>\n <div class=\"mat-slider-track-fill\" [ngStyle]=\"_getTrackFillStyles()\"></div>\n </div>\n <div class=\"mat-slider-ticks-container\" [ngStyle]=\"_getTicksContainerStyles()\">\n <div class=\"mat-slider-ticks\" [ngStyle]=\"_getTicksStyles()\"></div>\n </div>\n <div class=\"mat-slider-thumb-container\" [ngStyle]=\"_getThumbContainerStyles()\">\n <div class=\"mat-slider-focus-ring\"></div>\n <div class=\"mat-slider-thumb\"></div>\n <div class=\"mat-slider-thumb-label\">\n <span class=\"mat-slider-thumb-label-text\">{{displayValue}}</span>\n </div>\n </div>\n</div>\n",
1067 inputs: ['disabled', 'color', 'tabIndex'],
1068 encapsulation: core.ViewEncapsulation.None,
1069 changeDetection: core.ChangeDetectionStrategy.OnPush,
1070 styles: [".mat-slider{display:inline-block;position:relative;box-sizing:border-box;padding:8px;outline:none;vertical-align:middle}.mat-slider:not(.mat-slider-disabled):active,.mat-slider.mat-slider-sliding:not(.mat-slider-disabled){cursor:-webkit-grabbing;cursor:grabbing}.mat-slider-wrapper{-webkit-print-color-adjust:exact;color-adjust:exact;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 400ms cubic-bezier(0.25, 0.8, 0.25, 1),background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-slider-track-background{position:absolute;transform-origin:100% 100%;transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-slider-ticks-container{position:absolute;left:0;top:0;overflow:hidden}.mat-slider-ticks{-webkit-background-clip:content-box;background-clip:content-box;background-repeat:repeat;box-sizing:border-box;opacity:0;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-slider-thumb-container{position:absolute;z-index:1;transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-slider-focus-ring{position:absolute;width:30px;height:30px;border-radius:50%;transform:scale(0);opacity:0;transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1),opacity 400ms cubic-bezier(0.25, 0.8, 0.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-label,.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb{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(0.7);transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1),border-color 400ms cubic-bezier(0.25, 0.8, 0.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 400ms cubic-bezier(0.25, 0.8, 0.25, 1),border-radius 400ms cubic-bezier(0.25, 0.8, 0.25, 1),background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.cdk-high-contrast-active .mat-slider-thumb-label{outline:solid 1px}.mat-slider-thumb-label-text{z-index:1;opacity:0;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-slider-sliding .mat-slider-track-fill,.mat-slider-sliding .mat-slider-track-background,.mat-slider-sliding .mat-slider-thumb-container{transition-duration:0ms}.mat-slider-has-ticks .mat-slider-wrapper::after{content:\"\";position:absolute;border-width:0;border-style:solid;opacity:0;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.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-touch-focused .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled).cdk-program-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(0.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%}.cdk-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(0.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)}.cdk-high-contrast-active .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label,.cdk-high-contrast-active .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%}.cdk-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(0.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-track-fill,.mat-slider._mat-animation-noopable .mat-slider-track-background,.mat-slider._mat-animation-noopable .mat-slider-ticks,.mat-slider._mat-animation-noopable .mat-slider-thumb-container,.mat-slider._mat-animation-noopable .mat-slider-focus-ring,.mat-slider._mat-animation-noopable .mat-slider-thumb,.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-has-ticks .mat-slider-wrapper::after{transition:none}\n"]
1071 },] }
1072 ];
1073 MatSlider.ctorParameters = function () { return [
1074 { type: core.ElementRef },
1075 { type: a11y.FocusMonitor },
1076 { type: core.ChangeDetectorRef },
1077 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1078 { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
1079 { type: core.NgZone },
1080 { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
1081 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1082 ]; };
1083 MatSlider.propDecorators = {
1084 invert: [{ type: core.Input }],
1085 max: [{ type: core.Input }],
1086 min: [{ type: core.Input }],
1087 step: [{ type: core.Input }],
1088 thumbLabel: [{ type: core.Input }],
1089 tickInterval: [{ type: core.Input }],
1090 value: [{ type: core.Input }],
1091 displayWith: [{ type: core.Input }],
1092 valueText: [{ type: core.Input }],
1093 vertical: [{ type: core.Input }],
1094 change: [{ type: core.Output }],
1095 input: [{ type: core.Output }],
1096 valueChange: [{ type: core.Output }],
1097 _sliderWrapper: [{ type: core.ViewChild, args: ['sliderWrapper',] }]
1098 };
1099 /** Returns whether an event is a touch event. */
1100 function isTouchEvent(event) {
1101 // This function is called for every pixel that the user has dragged so we need it to be
1102 // as fast as possible. Since we only bind mouse events and touch events, we can assume
1103 // that if the event's name starts with `t`, it's a touch event.
1104 return event.type[0] === 't';
1105 }
1106 /** Gets the coordinates of a touch or mouse event relative to the viewport. */
1107 function getPointerPositionOnPage(event, id) {
1108 var point;
1109 if (isTouchEvent(event)) {
1110 // The `identifier` could be undefined if the browser doesn't support `TouchEvent.identifier`.
1111 // If that's the case, attribute the first touch to all active sliders. This should still cover
1112 // the most common case while only breaking multi-touch.
1113 if (typeof id === 'number') {
1114 point = findMatchingTouch(event.touches, id) || findMatchingTouch(event.changedTouches, id);
1115 }
1116 else {
1117 // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
1118 point = event.touches[0] || event.changedTouches[0];
1119 }
1120 }
1121 else {
1122 point = event;
1123 }
1124 return point ? { x: point.clientX, y: point.clientY } : undefined;
1125 }
1126 /** Finds a `Touch` with a specific ID in a `TouchList`. */
1127 function findMatchingTouch(touches, id) {
1128 for (var i = 0; i < touches.length; i++) {
1129 if (touches[i].identifier === id) {
1130 return touches[i];
1131 }
1132 }
1133 return undefined;
1134 }
1135 /** Gets the unique ID of a touch that matches a specific slider. */
1136 function getTouchIdForSlider(event, sliderHost) {
1137 for (var i = 0; i < event.touches.length; i++) {
1138 var target = event.touches[i].target;
1139 if (sliderHost === target || sliderHost.contains(target)) {
1140 return event.touches[i].identifier;
1141 }
1142 }
1143 return undefined;
1144 }
1145
1146 /**
1147 * @license
1148 * Copyright Google LLC All Rights Reserved.
1149 *
1150 * Use of this source code is governed by an MIT-style license that can be
1151 * found in the LICENSE file at https://angular.io/license
1152 */
1153 var MatSliderModule = /** @class */ (function () {
1154 function MatSliderModule() {
1155 }
1156 return MatSliderModule;
1157 }());
1158 MatSliderModule.decorators = [
1159 { type: core.NgModule, args: [{
1160 imports: [common.CommonModule, core$1.MatCommonModule],
1161 exports: [MatSlider, core$1.MatCommonModule],
1162 declarations: [MatSlider],
1163 },] }
1164 ];
1165
1166 /**
1167 * @license
1168 * Copyright Google LLC All Rights Reserved.
1169 *
1170 * Use of this source code is governed by an MIT-style license that can be
1171 * found in the LICENSE file at https://angular.io/license
1172 */
1173
1174 /**
1175 * Generated bundle index. Do not edit.
1176 */
1177
1178 exports.MAT_SLIDER_VALUE_ACCESSOR = MAT_SLIDER_VALUE_ACCESSOR;
1179 exports.MatSlider = MatSlider;
1180 exports.MatSliderChange = MatSliderChange;
1181 exports.MatSliderModule = MatSliderModule;
1182
1183 Object.defineProperty(exports, '__esModule', { value: true });
1184
1185})));
1186//# sourceMappingURL=material-slider.umd.js.map
Note: See TracBrowser for help on using the repository browser.