@angular/material 17.0.0 → 17.1.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/index.d.ts +0 -2
- package/button/_button-theme.scss +4 -0
- package/button/_icon-button-theme.scss +5 -1
- package/card/testing/index.d.ts +1 -1
- package/checkbox/index.d.ts +1 -1
- package/chips/index.d.ts +71 -67
- package/core/index.d.ts +1 -1
- package/core/ripple/_ripple-theme.scss +51 -19
- package/core/tokens/m2/_index.scss +29 -8
- package/datepicker/index.d.ts +21 -23
- package/datepicker/testing/index.d.ts +1 -1
- package/dialog/index.d.ts +1 -1
- package/dialog/testing/index.d.ts +1 -1
- package/esm2022/autocomplete/autocomplete-trigger.mjs +7 -7
- package/esm2022/button/icon-button.mjs +4 -4
- package/esm2022/card/testing/card-harness.mjs +9 -1
- package/esm2022/checkbox/checkbox.mjs +29 -14
- package/esm2022/chips/chip-action.mjs +14 -13
- package/esm2022/chips/chip-grid.mjs +29 -16
- package/esm2022/chips/chip-input.mjs +14 -17
- package/esm2022/chips/chip-listbox.mjs +19 -22
- package/esm2022/chips/chip-option.mjs +11 -10
- package/esm2022/chips/chip-row.mjs +4 -4
- package/esm2022/chips/chip-set.mjs +19 -18
- package/esm2022/chips/chip.mjs +49 -42
- package/esm2022/core/ripple/ripple-ref.mjs +10 -2
- package/esm2022/core/ripple/ripple-renderer.mjs +11 -11
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/datepicker/calendar-body.mjs +2 -2
- package/esm2022/datepicker/date-range-input.mjs +10 -10
- package/esm2022/datepicker/datepicker-base.mjs +41 -49
- package/esm2022/datepicker/datepicker-input-base.mjs +6 -6
- package/esm2022/datepicker/datepicker-toggle.mjs +6 -6
- package/esm2022/datepicker/testing/calendar-harness.mjs +11 -4
- package/esm2022/dialog/dialog-ref.mjs +10 -4
- package/esm2022/dialog/testing/dialog-harness.mjs +11 -4
- package/esm2022/dialog/testing/public-api.mjs +2 -2
- package/esm2022/expansion/accordion.mjs +7 -13
- package/esm2022/expansion/expansion-panel-header.mjs +13 -13
- package/esm2022/expansion/expansion-panel.mjs +6 -6
- package/esm2022/expansion/testing/expansion-harness.mjs +14 -6
- package/esm2022/grid-list/testing/grid-tile-harness.mjs +9 -3
- package/esm2022/icon/icon.mjs +24 -28
- package/esm2022/icon/testing/icon-harness-filters.mjs +7 -2
- package/esm2022/icon/testing/icon-harness.mjs +4 -3
- package/esm2022/list/list-base.mjs +6 -6
- package/esm2022/list/testing/list-item-harness-base.mjs +18 -6
- package/esm2022/list/testing/public-api.mjs +2 -2
- package/esm2022/paginator/paginator.mjs +32 -35
- package/esm2022/progress-bar/progress-bar.mjs +25 -20
- package/esm2022/progress-spinner/progress-spinner.mjs +34 -33
- package/esm2022/radio/radio.mjs +40 -34
- package/esm2022/select/select.mjs +45 -37
- package/esm2022/slider/slider-input.mjs +23 -22
- package/esm2022/slider/slider-interface.mjs +16 -1
- package/esm2022/slider/slider-thumb.mjs +6 -6
- package/esm2022/slider/slider.mjs +73 -72
- package/esm2022/slider/testing/slider-harness-filters.mjs +7 -2
- package/esm2022/slider/testing/slider-harness.mjs +4 -3
- package/esm2022/slider/testing/slider-thumb-harness.mjs +3 -2
- package/esm2022/sort/sort-header.mjs +16 -24
- package/esm2022/sort/sort.mjs +12 -19
- package/esm2022/stepper/step-header.mjs +7 -12
- package/esm2022/stepper/stepper.mjs +1 -1
- package/esm2022/stepper/testing/step-harness-filters.mjs +7 -2
- package/esm2022/stepper/testing/stepper-harness.mjs +4 -3
- package/esm2022/tabs/paginated-tab-header.mjs +12 -18
- package/esm2022/tabs/tab-group.mjs +54 -70
- package/esm2022/tabs/tab-header.mjs +7 -13
- package/esm2022/tabs/tab-label-wrapper.mjs +12 -8
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +43 -37
- package/esm2022/tabs/tab.mjs +12 -12
- package/esm2022/toolbar/testing/toolbar-harness.mjs +7 -2
- package/esm2022/toolbar/toolbar.mjs +11 -16
- package/esm2022/tree/node.mjs +20 -20
- package/esm2022/tree/padding.mjs +11 -4
- package/expansion/index.d.ts +11 -19
- package/expansion/testing/index.d.ts +1 -1
- package/fesm2022/autocomplete.mjs +6 -6
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/button.mjs +4 -4
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +9 -1
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +29 -14
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +144 -119
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +20 -12
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs +11 -4
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +57 -62
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +11 -4
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +10 -4
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +14 -6
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +22 -26
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +9 -3
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +10 -3
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +24 -27
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +18 -6
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +5 -5
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/paginator.mjs +31 -34
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +25 -19
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +34 -32
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +41 -34
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +44 -36
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +11 -4
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +109 -91
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/sort.mjs +25 -38
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs +10 -3
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +8 -12
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/tabs.mjs +130 -141
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs +7 -2
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +11 -15
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tree.mjs +22 -21
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +85 -49
- package/grid-list/_grid-list-theme.scss +47 -14
- package/grid-list/testing/index.d.ts +1 -1
- package/icon/index.d.ts +10 -16
- package/icon/testing/index.d.ts +1 -1
- package/input/_input-theme.scss +39 -12
- package/list/_list-theme.scss +115 -83
- package/list/testing/index.d.ts +2 -2
- package/package.json +7 -7
- package/paginator/index.d.ts +16 -17
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/progress-bar/index.d.ts +12 -15
- package/progress-spinner/index.d.ts +14 -15
- package/radio/index.d.ts +20 -22
- package/schematics/ng-add/index.js +2 -2
- package/schematics/ng-add/index.mjs +2 -2
- package/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +28 -29
- package/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +21 -19
- package/schematics/ng-generate/mdc-migration/index_bundled.js +55 -48
- package/schematics/ng-generate/mdc-migration/index_bundled.js.map +3 -3
- package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +9 -8
- package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +1 -2
- package/schematics/ng-update/index_bundled.js +31 -31
- package/select/index.d.ts +22 -17
- package/slide-toggle/_slide-toggle-theme.scss +78 -44
- package/slider/index.d.ts +30 -30
- package/slider/testing/index.d.ts +1 -1
- package/sort/_sort-theme.scss +51 -20
- package/sort/index.d.ts +15 -20
- package/stepper/_stepper-theme.scss +58 -25
- package/stepper/index.d.ts +5 -15
- package/stepper/testing/index.d.ts +1 -1
- package/table/_table-theme.scss +53 -20
- package/tabs/_tabs-theme.scss +87 -51
- package/tabs/index.d.ts +61 -64
- package/toolbar/index.d.ts +5 -12
- package/toolbar/testing/index.d.ts +1 -1
- package/tree/_tree-theme.scss +53 -21
- package/tree/index.d.ts +13 -15
package/fesm2022/slider.mjs
CHANGED
|
@@ -1,14 +1,28 @@
|
|
|
1
1
|
import * as i1$1 from '@angular/cdk/bidi';
|
|
2
|
-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
3
2
|
import { Platform } from '@angular/cdk/platform';
|
|
4
3
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, inject, Optional, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, Directive, Output, NgModule } from '@angular/core';
|
|
4
|
+
import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, inject, booleanAttribute, numberAttribute, Optional, ViewChildren, ContentChild, ContentChildren, forwardRef, EventEmitter, Directive, Output, NgModule } from '@angular/core';
|
|
6
5
|
import * as i1 from '@angular/material/core';
|
|
7
|
-
import {
|
|
6
|
+
import { RippleState, MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatRippleModule } from '@angular/material/core';
|
|
8
7
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
9
8
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
9
|
import { Subject } from 'rxjs';
|
|
11
10
|
|
|
11
|
+
/**
|
|
12
|
+
* Thumb types: range slider has two thumbs (START, END) whereas single point
|
|
13
|
+
* slider only has one thumb (END).
|
|
14
|
+
*/
|
|
15
|
+
var _MatThumb;
|
|
16
|
+
(function (_MatThumb) {
|
|
17
|
+
_MatThumb[_MatThumb["START"] = 1] = "START";
|
|
18
|
+
_MatThumb[_MatThumb["END"] = 2] = "END";
|
|
19
|
+
})(_MatThumb || (_MatThumb = {}));
|
|
20
|
+
/** Tick mark enum, for discrete sliders. */
|
|
21
|
+
var _MatTickMark;
|
|
22
|
+
(function (_MatTickMark) {
|
|
23
|
+
_MatTickMark[_MatTickMark["ACTIVE"] = 0] = "ACTIVE";
|
|
24
|
+
_MatTickMark[_MatTickMark["INACTIVE"] = 1] = "INACTIVE";
|
|
25
|
+
})(_MatTickMark || (_MatTickMark = {}));
|
|
12
26
|
/**
|
|
13
27
|
* Injection token that can be used for a `MatSlider` to provide itself as a
|
|
14
28
|
* parent to the `MatSliderThumb` and `MatSliderRangeThumb`.
|
|
@@ -162,7 +176,7 @@ class MatSliderVisualThumb {
|
|
|
162
176
|
}
|
|
163
177
|
/** Whether the given rippleRef is currently fading in or visible. */
|
|
164
178
|
_isShowingRipple(rippleRef) {
|
|
165
|
-
return rippleRef?.state ===
|
|
179
|
+
return rippleRef?.state === RippleState.FADING_IN || rippleRef?.state === RippleState.VISIBLE;
|
|
166
180
|
}
|
|
167
181
|
/** Manually launches the slider thumb ripple using the specified ripple animation config. */
|
|
168
182
|
_showRipple(animation, ignoreGlobalRippleConfig) {
|
|
@@ -171,7 +185,7 @@ class MatSliderVisualThumb {
|
|
|
171
185
|
}
|
|
172
186
|
this._showValueIndicator();
|
|
173
187
|
if (this._slider._isRange) {
|
|
174
|
-
const sibling = this._slider._getThumb(this.thumbPosition ===
|
|
188
|
+
const sibling = this._slider._getThumb(this.thumbPosition === _MatThumb.START ? _MatThumb.END : _MatThumb.START);
|
|
175
189
|
sibling._showValueIndicator();
|
|
176
190
|
}
|
|
177
191
|
if (this._slider._globalRippleOptions?.disabled && !ignoreGlobalRippleConfig) {
|
|
@@ -210,7 +224,7 @@ class MatSliderVisualThumb {
|
|
|
210
224
|
this._hostElement.classList.remove('mdc-slider__thumb--with-indicator');
|
|
211
225
|
}
|
|
212
226
|
_getSibling() {
|
|
213
|
-
return this._slider._getThumb(this.thumbPosition ===
|
|
227
|
+
return this._slider._getThumb(this.thumbPosition === _MatThumb.START ? _MatThumb.END : _MatThumb.START);
|
|
214
228
|
}
|
|
215
229
|
/** Gets the value indicator container's native HTML element. */
|
|
216
230
|
_getValueIndicatorContainer() {
|
|
@@ -257,25 +271,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImpor
|
|
|
257
271
|
// 1. start dragging discrete slider
|
|
258
272
|
// 2. tab to disable checkbox
|
|
259
273
|
// 3. without ending drag, disable the slider
|
|
260
|
-
// Boilerplate for applying mixins to MatSlider.
|
|
261
|
-
const _MatSliderMixinBase = mixinColor(mixinDisableRipple(class {
|
|
262
|
-
constructor(_elementRef) {
|
|
263
|
-
this._elementRef = _elementRef;
|
|
264
|
-
}
|
|
265
|
-
}), 'primary');
|
|
266
274
|
/**
|
|
267
275
|
* Allows users to select from a range of values by moving the slider thumb. It is similar in
|
|
268
276
|
* behavior to the native `<input type="range">` element.
|
|
269
277
|
*/
|
|
270
|
-
class MatSlider
|
|
278
|
+
class MatSlider {
|
|
271
279
|
/** Whether the slider is disabled. */
|
|
272
280
|
get disabled() {
|
|
273
281
|
return this._disabled;
|
|
274
282
|
}
|
|
275
283
|
set disabled(v) {
|
|
276
|
-
this._disabled =
|
|
277
|
-
const endInput = this._getInput(
|
|
278
|
-
const startInput = this._getInput(
|
|
284
|
+
this._disabled = v;
|
|
285
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
286
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
279
287
|
if (endInput) {
|
|
280
288
|
endInput.disabled = this._disabled;
|
|
281
289
|
}
|
|
@@ -288,22 +296,15 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
288
296
|
return this._discrete;
|
|
289
297
|
}
|
|
290
298
|
set discrete(v) {
|
|
291
|
-
this._discrete =
|
|
299
|
+
this._discrete = v;
|
|
292
300
|
this._updateValueIndicatorUIs();
|
|
293
301
|
}
|
|
294
|
-
/** Whether the slider displays tick marks along the slider track. */
|
|
295
|
-
get showTickMarks() {
|
|
296
|
-
return this._showTickMarks;
|
|
297
|
-
}
|
|
298
|
-
set showTickMarks(v) {
|
|
299
|
-
this._showTickMarks = coerceBooleanProperty(v);
|
|
300
|
-
}
|
|
301
302
|
/** The minimum value that the slider can have. */
|
|
302
303
|
get min() {
|
|
303
304
|
return this._min;
|
|
304
305
|
}
|
|
305
306
|
set min(v) {
|
|
306
|
-
const min =
|
|
307
|
+
const min = isNaN(v) ? this._min : v;
|
|
307
308
|
if (this._min !== min) {
|
|
308
309
|
this._updateMin(min);
|
|
309
310
|
}
|
|
@@ -315,8 +316,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
315
316
|
this._onMinMaxOrStepChange();
|
|
316
317
|
}
|
|
317
318
|
_updateMinRange(min) {
|
|
318
|
-
const endInput = this._getInput(
|
|
319
|
-
const startInput = this._getInput(
|
|
319
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
320
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
320
321
|
const oldEndValue = endInput.value;
|
|
321
322
|
const oldStartValue = startInput.value;
|
|
322
323
|
startInput.min = min.new;
|
|
@@ -335,7 +336,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
335
336
|
}
|
|
336
337
|
}
|
|
337
338
|
_updateMinNonRange(min) {
|
|
338
|
-
const input = this._getInput(
|
|
339
|
+
const input = this._getInput(_MatThumb.END);
|
|
339
340
|
if (input) {
|
|
340
341
|
const oldValue = input.value;
|
|
341
342
|
input.min = min;
|
|
@@ -351,7 +352,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
351
352
|
return this._max;
|
|
352
353
|
}
|
|
353
354
|
set max(v) {
|
|
354
|
-
const max =
|
|
355
|
+
const max = isNaN(v) ? this._max : v;
|
|
355
356
|
if (this._max !== max) {
|
|
356
357
|
this._updateMax(max);
|
|
357
358
|
}
|
|
@@ -363,8 +364,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
363
364
|
this._onMinMaxOrStepChange();
|
|
364
365
|
}
|
|
365
366
|
_updateMaxRange(max) {
|
|
366
|
-
const endInput = this._getInput(
|
|
367
|
-
const startInput = this._getInput(
|
|
367
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
368
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
368
369
|
const oldEndValue = endInput.value;
|
|
369
370
|
const oldStartValue = startInput.value;
|
|
370
371
|
endInput.max = max.new;
|
|
@@ -383,7 +384,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
383
384
|
}
|
|
384
385
|
}
|
|
385
386
|
_updateMaxNonRange(max) {
|
|
386
|
-
const input = this._getInput(
|
|
387
|
+
const input = this._getInput(_MatThumb.END);
|
|
387
388
|
if (input) {
|
|
388
389
|
const oldValue = input.value;
|
|
389
390
|
input.max = max;
|
|
@@ -399,7 +400,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
399
400
|
return this._step;
|
|
400
401
|
}
|
|
401
402
|
set step(v) {
|
|
402
|
-
const step =
|
|
403
|
+
const step = isNaN(v) ? this._step : v;
|
|
403
404
|
if (this._step !== step) {
|
|
404
405
|
this._updateStep(step);
|
|
405
406
|
}
|
|
@@ -410,8 +411,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
410
411
|
this._onMinMaxOrStepChange();
|
|
411
412
|
}
|
|
412
413
|
_updateStepRange() {
|
|
413
|
-
const endInput = this._getInput(
|
|
414
|
-
const startInput = this._getInput(
|
|
414
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
415
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
415
416
|
const oldEndValue = endInput.value;
|
|
416
417
|
const oldStartValue = startInput.value;
|
|
417
418
|
const prevStartValue = startInput.value;
|
|
@@ -438,7 +439,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
438
439
|
}
|
|
439
440
|
}
|
|
440
441
|
_updateStepNonRange() {
|
|
441
|
-
const input = this._getInput(
|
|
442
|
+
const input = this._getInput(_MatThumb.END);
|
|
442
443
|
if (input) {
|
|
443
444
|
const oldValue = input.value;
|
|
444
445
|
input.step = this._step;
|
|
@@ -451,16 +452,19 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
451
452
|
}
|
|
452
453
|
}
|
|
453
454
|
}
|
|
454
|
-
constructor(_ngZone, _cdr,
|
|
455
|
-
super(elementRef);
|
|
455
|
+
constructor(_ngZone, _cdr, _elementRef, _dir, _globalRippleOptions, animationMode) {
|
|
456
456
|
this._ngZone = _ngZone;
|
|
457
457
|
this._cdr = _cdr;
|
|
458
|
+
this._elementRef = _elementRef;
|
|
458
459
|
this._dir = _dir;
|
|
459
460
|
this._globalRippleOptions = _globalRippleOptions;
|
|
460
461
|
this._disabled = false;
|
|
461
462
|
this._discrete = false;
|
|
462
|
-
|
|
463
|
+
/** Whether the slider displays tick marks along the slider track. */
|
|
464
|
+
this.showTickMarks = false;
|
|
463
465
|
this._min = 0;
|
|
466
|
+
/** Whether ripples are disabled in the slider. */
|
|
467
|
+
this.disableRipple = false;
|
|
464
468
|
this._max = 100;
|
|
465
469
|
this._step = 1;
|
|
466
470
|
/**
|
|
@@ -499,14 +503,14 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
499
503
|
if (this._platform.isBrowser) {
|
|
500
504
|
this._updateDimensions();
|
|
501
505
|
}
|
|
502
|
-
const eInput = this._getInput(
|
|
503
|
-
const sInput = this._getInput(
|
|
506
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
507
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
504
508
|
this._isRange = !!eInput && !!sInput;
|
|
505
509
|
this._cdr.detectChanges();
|
|
506
510
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
507
|
-
_validateInputs(this._isRange, this._getInput(
|
|
511
|
+
_validateInputs(this._isRange, this._getInput(_MatThumb.END), this._getInput(_MatThumb.START));
|
|
508
512
|
}
|
|
509
|
-
const thumb = this._getThumb(
|
|
513
|
+
const thumb = this._getThumb(_MatThumb.END);
|
|
510
514
|
this._rippleRadius = thumb._ripple.radius;
|
|
511
515
|
this._inputPadding = this._rippleRadius - this._knobRadius;
|
|
512
516
|
this._inputOffset = this._knobRadius;
|
|
@@ -552,8 +556,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
552
556
|
this._updateTickMarkUI();
|
|
553
557
|
}
|
|
554
558
|
_onDirChangeRange() {
|
|
555
|
-
const endInput = this._getInput(
|
|
556
|
-
const startInput = this._getInput(
|
|
559
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
560
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
557
561
|
endInput._setIsLeftThumb();
|
|
558
562
|
startInput._setIsLeftThumb();
|
|
559
563
|
endInput.translateX = endInput._calcTranslateXByValue();
|
|
@@ -566,7 +570,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
566
570
|
startInput._updateThumbUIByValue();
|
|
567
571
|
}
|
|
568
572
|
_onDirChangeNonRange() {
|
|
569
|
-
const input = this._getInput(
|
|
573
|
+
const input = this._getInput(_MatThumb.END);
|
|
570
574
|
input._updateThumbUIByValue();
|
|
571
575
|
}
|
|
572
576
|
/** Starts observing and updating the slider if the host changes its size. */
|
|
@@ -589,9 +593,9 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
589
593
|
}
|
|
590
594
|
/** Whether any of the thumbs are currently active. */
|
|
591
595
|
_isActive() {
|
|
592
|
-
return this._getThumb(
|
|
596
|
+
return this._getThumb(_MatThumb.START)._isActive || this._getThumb(_MatThumb.END)._isActive;
|
|
593
597
|
}
|
|
594
|
-
_getValue(thumbPosition =
|
|
598
|
+
_getValue(thumbPosition = _MatThumb.END) {
|
|
595
599
|
const input = this._getInput(thumbPosition);
|
|
596
600
|
if (!input) {
|
|
597
601
|
return this.min;
|
|
@@ -599,7 +603,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
599
603
|
return input.value;
|
|
600
604
|
}
|
|
601
605
|
_skipUpdate() {
|
|
602
|
-
return !!(this._getInput(
|
|
606
|
+
return !!(this._getInput(_MatThumb.START)?._skipUIUpdate || this._getInput(_MatThumb.END)?._skipUIUpdate);
|
|
603
607
|
}
|
|
604
608
|
/** Stores the slider dimensions. */
|
|
605
609
|
_updateDimensions() {
|
|
@@ -658,8 +662,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
658
662
|
}
|
|
659
663
|
this._updateDimensions();
|
|
660
664
|
if (this._isRange) {
|
|
661
|
-
const eInput = this._getInput(
|
|
662
|
-
const sInput = this._getInput(
|
|
665
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
666
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
663
667
|
eInput._updateThumbUIByValue();
|
|
664
668
|
sInput._updateThumbUIByValue();
|
|
665
669
|
eInput._updateStaticStyles();
|
|
@@ -670,7 +674,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
670
674
|
sInput._updateWidthInactive();
|
|
671
675
|
}
|
|
672
676
|
else {
|
|
673
|
-
const eInput = this._getInput(
|
|
677
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
674
678
|
if (eInput) {
|
|
675
679
|
eInput._updateThumbUIByValue();
|
|
676
680
|
}
|
|
@@ -681,8 +685,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
681
685
|
}
|
|
682
686
|
/** Returns true if the slider knobs are overlapping one another. */
|
|
683
687
|
_areThumbsOverlapping() {
|
|
684
|
-
const startInput = this._getInput(
|
|
685
|
-
const endInput = this._getInput(
|
|
688
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
689
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
686
690
|
if (!startInput || !endInput) {
|
|
687
691
|
return false;
|
|
688
692
|
}
|
|
@@ -720,7 +724,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
720
724
|
if (this._skipUpdate()) {
|
|
721
725
|
return;
|
|
722
726
|
}
|
|
723
|
-
const thumb = this._getThumb(source.thumbPosition ===
|
|
727
|
+
const thumb = this._getThumb(source.thumbPosition === _MatThumb.END ? _MatThumb.END : _MatThumb.START);
|
|
724
728
|
thumb._hostElement.style.transform = `translateX(${source.translateX}px)`;
|
|
725
729
|
}
|
|
726
730
|
// Value indicator text update conditions
|
|
@@ -739,7 +743,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
739
743
|
? (source._valuetext = valuetext)
|
|
740
744
|
: source._hostElement.setAttribute('aria-valuetext', valuetext);
|
|
741
745
|
if (this.discrete) {
|
|
742
|
-
source.thumbPosition ===
|
|
746
|
+
source.thumbPosition === _MatThumb.START
|
|
743
747
|
? (this.startValueIndicatorText = valuetext)
|
|
744
748
|
: (this.endValueIndicatorText = valuetext);
|
|
745
749
|
const visualThumb = this._getThumb(source.thumbPosition);
|
|
@@ -750,8 +754,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
750
754
|
}
|
|
751
755
|
/** Updates all value indicator UIs in the slider. */
|
|
752
756
|
_updateValueIndicatorUIs() {
|
|
753
|
-
const eInput = this._getInput(
|
|
754
|
-
const sInput = this._getInput(
|
|
757
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
758
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
755
759
|
if (eInput) {
|
|
756
760
|
this._updateValueIndicatorUI(eInput);
|
|
757
761
|
}
|
|
@@ -865,32 +869,32 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
865
869
|
let numInactive = Math.max(Math.round((this.max - value) / step), 0);
|
|
866
870
|
this._isRtl ? numActive++ : numInactive++;
|
|
867
871
|
this._tickMarks = Array(numActive)
|
|
868
|
-
.fill(
|
|
869
|
-
.concat(Array(numInactive).fill(
|
|
872
|
+
.fill(_MatTickMark.ACTIVE)
|
|
873
|
+
.concat(Array(numInactive).fill(_MatTickMark.INACTIVE));
|
|
870
874
|
}
|
|
871
875
|
_updateTickMarkUIRange(step) {
|
|
872
876
|
const endValue = this._getValue();
|
|
873
|
-
const startValue = this._getValue(
|
|
877
|
+
const startValue = this._getValue(_MatThumb.START);
|
|
874
878
|
const numInactiveBeforeStartThumb = Math.max(Math.floor((startValue - this.min) / step), 0);
|
|
875
879
|
const numActive = Math.max(Math.floor((endValue - startValue) / step) + 1, 0);
|
|
876
880
|
const numInactiveAfterEndThumb = Math.max(Math.floor((this.max - endValue) / step), 0);
|
|
877
881
|
this._tickMarks = Array(numInactiveBeforeStartThumb)
|
|
878
|
-
.fill(
|
|
879
|
-
.concat(Array(numActive).fill(
|
|
882
|
+
.fill(_MatTickMark.INACTIVE)
|
|
883
|
+
.concat(Array(numActive).fill(_MatTickMark.ACTIVE), Array(numInactiveAfterEndThumb).fill(_MatTickMark.INACTIVE));
|
|
880
884
|
}
|
|
881
885
|
/** Gets the slider thumb input of the given thumb position. */
|
|
882
886
|
_getInput(thumbPosition) {
|
|
883
|
-
if (thumbPosition ===
|
|
887
|
+
if (thumbPosition === _MatThumb.END && this._input) {
|
|
884
888
|
return this._input;
|
|
885
889
|
}
|
|
886
890
|
if (this._inputs?.length) {
|
|
887
|
-
return thumbPosition ===
|
|
891
|
+
return thumbPosition === _MatThumb.START ? this._inputs.first : this._inputs.last;
|
|
888
892
|
}
|
|
889
893
|
return;
|
|
890
894
|
}
|
|
891
895
|
/** Gets the slider thumb HTML input element of the given thumb position. */
|
|
892
896
|
_getThumb(thumbPosition) {
|
|
893
|
-
return thumbPosition ===
|
|
897
|
+
return thumbPosition === _MatThumb.END ? this._thumbs?.last : this._thumbs?.first;
|
|
894
898
|
}
|
|
895
899
|
_setTransition(withAnimation) {
|
|
896
900
|
this._hasAnimation = !this._platform.IOS && withAnimation && !this._noopAnimations;
|
|
@@ -906,18 +910,19 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
906
910
|
return Math.pow(dx, 2) + Math.pow(dy, 2) < Math.pow(radius, 2);
|
|
907
911
|
}
|
|
908
912
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
909
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.0", type: MatSlider, selector: "mat-slider", inputs: { color: "color", disableRipple: "disableRipple", disabled: "disabled", discrete: "discrete", showTickMarks: "showTickMarks", min: "min", max: "max", step: "step", displayWith: "displayWith" }, host: { properties: { "class.mdc-slider--range": "_isRange", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], queries: [{ propertyName: "_input", first: true, predicate: MAT_SLIDER_THUMB, descendants: true }, { propertyName: "_inputs", predicate: MAT_SLIDER_RANGE_THUMB }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MAT_SLIDER_VISUAL_THUMB, descendants: true }], exportAs: ["matSlider"], usesInheritance: true, ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n </div>\n @if (showTickMarks) {\n <div class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n @if (_cachedWidth) {\n @for (tickMark of _tickMarks; track tickMark; let i = $index) {\n <div\n [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Thumbs -->\n@if (_isRange) {\n <mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"1\"\n [valueIndicatorText]=\"startValueIndicatorText\">\n </mat-slider-visual-thumb>\n}\n\n<mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"2\"\n [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden}.mdc-slider .mdc-slider__track--active_fill{border-top-style:solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:translateX(-50%);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:translateX(-50%);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:2px;margin:0;height:44px;opacity:0;pointer-events:none;position:absolute;top:2px;width:44px}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color);border-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color);border-color:var(--mdc-slider-disabled-handle-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color)}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color);opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color);opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color)}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height);top:calc((var(--mdc-slider-inactive-track-height) - var(--mdc-slider-active-track-height)) / 2)}.mat-mdc-slider .mdc-slider__track--active_fill{border-top-width:var(--mdc-slider-active-track-height)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size);width:var(--mdc-slider-with-tick-marks-container-size)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking);font-size:var(--mdc-slider-label-label-text-size);font-family:var(--mdc-slider-label-label-text-font);font-weight:var(--mdc-slider-label-label-text-weight);line-height:var(--mdc-slider-label-label-text-line-height)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape);width:var(--mdc-slider-handle-width);height:var(--mdc-slider-handle-height);border-style:solid;border-width:calc(var(--mdc-slider-handle-height) / 2) calc(var(--mdc-slider-handle-width) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color);border-color:var(--mdc-slider-hover-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color);border-color:var(--mdc-slider-focus-handle-color)}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color);border-width:var(--mdc-slider-with-overlap-handle-outline-width)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation)}.mat-mdc-slider .mdc-slider__input{box-sizing:content-box;pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-slider-value-indicator-opacity)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mat-mdc-slider .mdc-slider__value-indicator{word-break:normal}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "component", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: ["discrete", "thumbPosition", "valueIndicatorText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
913
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.0", type: MatSlider, selector: "mat-slider", inputs: { disabled: ["disabled", "disabled", booleanAttribute], discrete: ["discrete", "discrete", booleanAttribute], showTickMarks: ["showTickMarks", "showTickMarks", booleanAttribute], min: ["min", "min", numberAttribute], color: "color", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], max: ["max", "max", numberAttribute], step: ["step", "step", numberAttribute], displayWith: "displayWith" }, host: { properties: { "class": "\"mat-\" + (color || \"primary\")", "class.mdc-slider--range": "_isRange", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], queries: [{ propertyName: "_input", first: true, predicate: MAT_SLIDER_THUMB, descendants: true }, { propertyName: "_inputs", predicate: MAT_SLIDER_RANGE_THUMB }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MAT_SLIDER_VISUAL_THUMB, descendants: true }], exportAs: ["matSlider"], ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n </div>\n @if (showTickMarks) {\n <div class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n @if (_cachedWidth) {\n @for (tickMark of _tickMarks; track tickMark; let i = $index) {\n <div\n [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Thumbs -->\n@if (_isRange) {\n <mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"1\"\n [valueIndicatorText]=\"startValueIndicatorText\">\n </mat-slider-visual-thumb>\n}\n\n<mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"2\"\n [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden}.mdc-slider .mdc-slider__track--active_fill{border-top-style:solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:translateX(-50%);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:translateX(-50%);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:2px;margin:0;height:44px;opacity:0;pointer-events:none;position:absolute;top:2px;width:44px}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color);border-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color);border-color:var(--mdc-slider-disabled-handle-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color)}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color);opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color);opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color)}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height);top:calc((var(--mdc-slider-inactive-track-height) - var(--mdc-slider-active-track-height)) / 2)}.mat-mdc-slider .mdc-slider__track--active_fill{border-top-width:var(--mdc-slider-active-track-height)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size);width:var(--mdc-slider-with-tick-marks-container-size)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking);font-size:var(--mdc-slider-label-label-text-size);font-family:var(--mdc-slider-label-label-text-font);font-weight:var(--mdc-slider-label-label-text-weight);line-height:var(--mdc-slider-label-label-text-line-height)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape);width:var(--mdc-slider-handle-width);height:var(--mdc-slider-handle-height);border-style:solid;border-width:calc(var(--mdc-slider-handle-height) / 2) calc(var(--mdc-slider-handle-width) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color);border-color:var(--mdc-slider-hover-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color);border-color:var(--mdc-slider-focus-handle-color)}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color);border-width:var(--mdc-slider-with-overlap-handle-outline-width)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation)}.mat-mdc-slider .mdc-slider__input{box-sizing:content-box;pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-slider-value-indicator-opacity)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mat-mdc-slider .mdc-slider__value-indicator{word-break:normal}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "component", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: ["discrete", "thumbPosition", "valueIndicatorText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
910
914
|
}
|
|
911
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: MatSlider, decorators: [{
|
|
912
916
|
type: Component,
|
|
913
917
|
args: [{ selector: 'mat-slider', host: {
|
|
914
918
|
'class': 'mat-mdc-slider mdc-slider',
|
|
919
|
+
'[class]': '"mat-" + (color || "primary")',
|
|
915
920
|
'[class.mdc-slider--range]': '_isRange',
|
|
916
921
|
'[class.mdc-slider--disabled]': 'disabled',
|
|
917
922
|
'[class.mdc-slider--discrete]': 'discrete',
|
|
918
923
|
'[class.mdc-slider--tick-marks]': 'showTickMarks',
|
|
919
924
|
'[class._mat-animation-noopable]': '_noopAnimations',
|
|
920
|
-
}, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disableRipple'], providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n </div>\n @if (showTickMarks) {\n <div class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n @if (_cachedWidth) {\n @for (tickMark of _tickMarks; track tickMark; let i = $index) {\n <div\n [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Thumbs -->\n@if (_isRange) {\n <mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"1\"\n [valueIndicatorText]=\"startValueIndicatorText\">\n </mat-slider-visual-thumb>\n}\n\n<mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"2\"\n [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden}.mdc-slider .mdc-slider__track--active_fill{border-top-style:solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:translateX(-50%);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:translateX(-50%);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:2px;margin:0;height:44px;opacity:0;pointer-events:none;position:absolute;top:2px;width:44px}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color);border-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color);border-color:var(--mdc-slider-disabled-handle-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color)}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color);opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color);opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color)}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height);top:calc((var(--mdc-slider-inactive-track-height) - var(--mdc-slider-active-track-height)) / 2)}.mat-mdc-slider .mdc-slider__track--active_fill{border-top-width:var(--mdc-slider-active-track-height)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size);width:var(--mdc-slider-with-tick-marks-container-size)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking);font-size:var(--mdc-slider-label-label-text-size);font-family:var(--mdc-slider-label-label-text-font);font-weight:var(--mdc-slider-label-label-text-weight);line-height:var(--mdc-slider-label-label-text-line-height)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape);width:var(--mdc-slider-handle-width);height:var(--mdc-slider-handle-height);border-style:solid;border-width:calc(var(--mdc-slider-handle-height) / 2) calc(var(--mdc-slider-handle-width) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color);border-color:var(--mdc-slider-hover-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color);border-color:var(--mdc-slider-focus-handle-color)}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color);border-width:var(--mdc-slider-with-overlap-handle-outline-width)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation)}.mat-mdc-slider .mdc-slider__input{box-sizing:content-box;pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-slider-value-indicator-opacity)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mat-mdc-slider .mdc-slider__value-indicator{word-break:normal}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"] }]
|
|
925
|
+
}, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div #trackActive class=\"mdc-slider__track--active_fill\"></div>\n </div>\n @if (showTickMarks) {\n <div class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n @if (_cachedWidth) {\n @for (tickMark of _tickMarks; track tickMark; let i = $index) {\n <div\n [class]=\"tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'\"\n [style.transform]=\"_calcTickMarkTransform(i)\"></div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Thumbs -->\n@if (_isRange) {\n <mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"1\"\n [valueIndicatorText]=\"startValueIndicatorText\">\n </mat-slider-visual-thumb>\n}\n\n<mat-slider-visual-thumb\n [discrete]=\"discrete\"\n [thumbPosition]=\"2\"\n [valueIndicatorText]=\"endValueIndicatorText\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{overflow:hidden}.mdc-slider .mdc-slider__track--active_fill{border-top-style:solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:translateX(-50%);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:translateX(-50%);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;left:-24px;outline:none;position:absolute;user-select:none;height:48px;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-sizing:border-box;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:2px;margin:0;height:44px;opacity:0;pointer-events:none;position:absolute;top:2px;width:44px}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--mdc-slider-handle-color);border-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--mdc-slider-disabled-handle-color);border-color:var(--mdc-slider-disabled-handle-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb::before,.mat-mdc-slider .mdc-slider__thumb::after{background-color:var(--mdc-slider-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover::before,.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:var(--mdc-ripple-hover-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:var(--mdc-ripple-focus-opacity)}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mat-mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity)}.mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--mdc-slider-active-track-color)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--mdc-slider-disabled-active-track-color)}.mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--mdc-slider-inactive-track-color);opacity:.24}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:var(--mdc-slider-disabled-inactive-track-color);opacity:.24}.mat-mdc-slider .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:var(--mdc-slider-with-tick-marks-active-container-color);opacity:var(--mdc-slider-with-tick-marks-active-container-opacity)}.mat-mdc-slider .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-inactive-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:var(--mdc-slider-with-tick-marks-disabled-container-color);opacity:var(--mdc-slider-with-tick-marks-inactive-container-opacity)}.mat-mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-slider-label-container-color);opacity:1}.mat-mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-slider-label-container-color)}.mat-mdc-slider .mdc-slider__value-indicator{color:var(--mdc-slider-label-label-text-color)}.mat-mdc-slider .mdc-slider__track{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__track--active{height:var(--mdc-slider-active-track-height);top:calc((var(--mdc-slider-inactive-track-height) - var(--mdc-slider-active-track-height)) / 2)}.mat-mdc-slider .mdc-slider__track--active_fill{border-top-width:var(--mdc-slider-active-track-height)}.mat-mdc-slider .mdc-slider__track--inactive{height:var(--mdc-slider-inactive-track-height)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{height:var(--mdc-slider-with-tick-marks-container-size);width:var(--mdc-slider-with-tick-marks-container-size)}.mat-mdc-slider.mdc-slider--disabled{opacity:0.38}.mat-mdc-slider .mdc-slider__value-indicator-text{letter-spacing:var(--mdc-slider-label-label-text-tracking);font-size:var(--mdc-slider-label-label-text-size);font-family:var(--mdc-slider-label-label-text-font);font-weight:var(--mdc-slider-label-label-text-weight);line-height:var(--mdc-slider-label-label-text-line-height)}.mat-mdc-slider .mdc-slider__track--active{border-radius:var(--mdc-slider-active-track-shape)}.mat-mdc-slider .mdc-slider__track--inactive{border-radius:var(--mdc-slider-inactive-track-shape)}.mat-mdc-slider .mdc-slider__thumb-knob{border-radius:var(--mdc-slider-handle-shape);width:var(--mdc-slider-handle-width);height:var(--mdc-slider-handle-height);border-style:solid;border-width:calc(var(--mdc-slider-handle-height) / 2) calc(var(--mdc-slider-handle-width) / 2)}.mat-mdc-slider .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-mark--inactive{border-radius:var(--mdc-slider-with-tick-marks-container-shape)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob{background-color:var(--mdc-slider-hover-handle-color);border-color:var(--mdc-slider-hover-handle-color)}.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--mdc-slider-focus-handle-color);border-color:var(--mdc-slider-focus-handle-color)}.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mat-mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mat-mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:var(--mdc-slider-with-overlap-handle-outline-color);border-width:var(--mdc-slider-with-overlap-handle-outline-width)}.mat-mdc-slider .mdc-slider__thumb-knob{box-shadow:var(--mdc-slider-handle-elevation)}.mat-mdc-slider .mdc-slider__input{box-sizing:content-box;pointer-events:auto}.mat-mdc-slider .mdc-slider__input.mat-mdc-slider-input-no-pointer-events{pointer-events:none}.mat-mdc-slider .mdc-slider__input.mat-slider__right-input{left:auto;right:0}.mat-mdc-slider .mdc-slider__thumb,.mat-mdc-slider .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider.mdc-slider--discrete .mdc-slider__track--active_fill{transition-duration:0ms}.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb,.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill{transition-duration:80ms}.mat-mdc-slider .mdc-slider__track,.mat-mdc-slider .mdc-slider__thumb{pointer-events:none}.mat-mdc-slider .mdc-slider__value-indicator{opacity:var(--mat-slider-value-indicator-opacity)}.mat-mdc-slider .mat-ripple .mat-ripple-element{background-color:var(--mat-mdc-slider-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-hover-ripple{background-color:var(--mat-mdc-slider-hover-ripple-color, transparent)}.mat-mdc-slider .mat-ripple .mat-mdc-slider-focus-ripple,.mat-mdc-slider .mat-ripple .mat-mdc-slider-active-ripple{background-color:var(--mat-mdc-slider-focus-ripple-color, transparent)}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mat-mdc-slider .mdc-slider__value-indicator{word-break:normal}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"] }]
|
|
921
926
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.Directionality, decorators: [{
|
|
922
927
|
type: Optional
|
|
923
928
|
}] }, { type: undefined, decorators: [{
|
|
@@ -943,17 +948,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImpor
|
|
|
943
948
|
type: ContentChildren,
|
|
944
949
|
args: [MAT_SLIDER_RANGE_THUMB, { descendants: false }]
|
|
945
950
|
}], disabled: [{
|
|
946
|
-
type: Input
|
|
951
|
+
type: Input,
|
|
952
|
+
args: [{ transform: booleanAttribute }]
|
|
947
953
|
}], discrete: [{
|
|
948
|
-
type: Input
|
|
954
|
+
type: Input,
|
|
955
|
+
args: [{ transform: booleanAttribute }]
|
|
949
956
|
}], showTickMarks: [{
|
|
950
|
-
type: Input
|
|
957
|
+
type: Input,
|
|
958
|
+
args: [{ transform: booleanAttribute }]
|
|
951
959
|
}], min: [{
|
|
960
|
+
type: Input,
|
|
961
|
+
args: [{ transform: numberAttribute }]
|
|
962
|
+
}], color: [{
|
|
952
963
|
type: Input
|
|
964
|
+
}], disableRipple: [{
|
|
965
|
+
type: Input,
|
|
966
|
+
args: [{ transform: booleanAttribute }]
|
|
953
967
|
}], max: [{
|
|
954
|
-
type: Input
|
|
968
|
+
type: Input,
|
|
969
|
+
args: [{ transform: numberAttribute }]
|
|
955
970
|
}], step: [{
|
|
956
|
-
type: Input
|
|
971
|
+
type: Input,
|
|
972
|
+
args: [{ transform: numberAttribute }]
|
|
957
973
|
}], displayWith: [{
|
|
958
974
|
type: Input
|
|
959
975
|
}] } });
|
|
@@ -1011,18 +1027,19 @@ const MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR = {
|
|
|
1011
1027
|
*/
|
|
1012
1028
|
class MatSliderThumb {
|
|
1013
1029
|
get value() {
|
|
1014
|
-
return
|
|
1030
|
+
return numberAttribute(this._hostElement.value, 0);
|
|
1015
1031
|
}
|
|
1016
|
-
set value(
|
|
1017
|
-
|
|
1032
|
+
set value(value) {
|
|
1033
|
+
value = isNaN(value) ? 0 : value;
|
|
1034
|
+
const stringValue = value + '';
|
|
1018
1035
|
if (!this._hasSetInitialValue) {
|
|
1019
|
-
this._initialValue =
|
|
1036
|
+
this._initialValue = stringValue;
|
|
1020
1037
|
return;
|
|
1021
1038
|
}
|
|
1022
1039
|
if (this._isActive) {
|
|
1023
1040
|
return;
|
|
1024
1041
|
}
|
|
1025
|
-
this._hostElement.value =
|
|
1042
|
+
this._hostElement.value = stringValue;
|
|
1026
1043
|
this._updateThumbUIByValue();
|
|
1027
1044
|
this._slider._onValueChange(this);
|
|
1028
1045
|
this._cdr.detectChanges();
|
|
@@ -1047,33 +1064,33 @@ class MatSliderThumb {
|
|
|
1047
1064
|
}
|
|
1048
1065
|
/** @docs-private */
|
|
1049
1066
|
get min() {
|
|
1050
|
-
return
|
|
1067
|
+
return numberAttribute(this._hostElement.min, 0);
|
|
1051
1068
|
}
|
|
1052
1069
|
set min(v) {
|
|
1053
|
-
this._hostElement.min =
|
|
1070
|
+
this._hostElement.min = v + '';
|
|
1054
1071
|
this._cdr.detectChanges();
|
|
1055
1072
|
}
|
|
1056
1073
|
/** @docs-private */
|
|
1057
1074
|
get max() {
|
|
1058
|
-
return
|
|
1075
|
+
return numberAttribute(this._hostElement.max, 0);
|
|
1059
1076
|
}
|
|
1060
1077
|
set max(v) {
|
|
1061
|
-
this._hostElement.max =
|
|
1078
|
+
this._hostElement.max = v + '';
|
|
1062
1079
|
this._cdr.detectChanges();
|
|
1063
1080
|
}
|
|
1064
1081
|
get step() {
|
|
1065
|
-
return
|
|
1082
|
+
return numberAttribute(this._hostElement.step, 0);
|
|
1066
1083
|
}
|
|
1067
1084
|
set step(v) {
|
|
1068
|
-
this._hostElement.step =
|
|
1085
|
+
this._hostElement.step = v + '';
|
|
1069
1086
|
this._cdr.detectChanges();
|
|
1070
1087
|
}
|
|
1071
1088
|
/** @docs-private */
|
|
1072
1089
|
get disabled() {
|
|
1073
|
-
return
|
|
1090
|
+
return booleanAttribute(this._hostElement.disabled);
|
|
1074
1091
|
}
|
|
1075
1092
|
set disabled(v) {
|
|
1076
|
-
this._hostElement.disabled =
|
|
1093
|
+
this._hostElement.disabled = v;
|
|
1077
1094
|
this._cdr.detectChanges();
|
|
1078
1095
|
if (this._slider.disabled !== this.disabled) {
|
|
1079
1096
|
this._slider.disabled = this.disabled;
|
|
@@ -1115,7 +1132,7 @@ class MatSliderThumb {
|
|
|
1115
1132
|
* Indicates whether this thumb is the start or end thumb.
|
|
1116
1133
|
* @docs-private
|
|
1117
1134
|
*/
|
|
1118
|
-
this.thumbPosition =
|
|
1135
|
+
this.thumbPosition = _MatThumb.END;
|
|
1119
1136
|
/** The radius of a native html slider's knob. */
|
|
1120
1137
|
this._knobRadius = 8;
|
|
1121
1138
|
/** Whether user's cursor is currently in a mouse down state on the input. */
|
|
@@ -1411,7 +1428,7 @@ class MatSliderThumb {
|
|
|
1411
1428
|
this._hostElement.blur();
|
|
1412
1429
|
}
|
|
1413
1430
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: MatSliderThumb, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1414
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1431
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.0.0", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: { value: ["value", "value", numberAttribute] }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { attributes: { "type": "range" }, listeners: { "change": "_onChange()", "input": "_onInput()", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "attr.aria-valuetext": "_valuetext" }, classAttribute: "mdc-slider__input" }, providers: [
|
|
1415
1432
|
MAT_SLIDER_THUMB_VALUE_ACCESSOR,
|
|
1416
1433
|
{ provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb },
|
|
1417
1434
|
], exportAs: ["matSliderThumb"], ngImport: i0 }); }
|
|
@@ -1441,7 +1458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImpor
|
|
|
1441
1458
|
type: Inject,
|
|
1442
1459
|
args: [MAT_SLIDER]
|
|
1443
1460
|
}] }], propDecorators: { value: [{
|
|
1444
|
-
type: Input
|
|
1461
|
+
type: Input,
|
|
1462
|
+
args: [{ transform: numberAttribute }]
|
|
1445
1463
|
}], valueChange: [{
|
|
1446
1464
|
type: Output
|
|
1447
1465
|
}], dragStart: [{
|
|
@@ -1453,7 +1471,7 @@ class MatSliderRangeThumb extends MatSliderThumb {
|
|
|
1453
1471
|
/** @docs-private */
|
|
1454
1472
|
getSibling() {
|
|
1455
1473
|
if (!this._sibling) {
|
|
1456
|
-
this._sibling = this._slider._getInput(this._isEndThumb ?
|
|
1474
|
+
this._sibling = this._slider._getInput(this._isEndThumb ? _MatThumb.START : _MatThumb.END);
|
|
1457
1475
|
}
|
|
1458
1476
|
return this._sibling;
|
|
1459
1477
|
}
|
|
@@ -1488,7 +1506,7 @@ class MatSliderRangeThumb extends MatSliderThumb {
|
|
|
1488
1506
|
this._cdr = _cdr;
|
|
1489
1507
|
this._isEndThumb = this._hostElement.hasAttribute('matSliderEndThumb');
|
|
1490
1508
|
this._setIsLeftThumb();
|
|
1491
|
-
this.thumbPosition = this._isEndThumb ?
|
|
1509
|
+
this.thumbPosition = this._isEndThumb ? _MatThumb.END : _MatThumb.START;
|
|
1492
1510
|
}
|
|
1493
1511
|
_getDefaultValue() {
|
|
1494
1512
|
return this._isEndThumb && this._slider._isRange ? this.max : this.min;
|