@angular/material 17.0.2 → 17.1.0-next.1
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 +14 -10
- package/badge/index.d.ts +5 -5
- package/bottom-sheet/index.d.ts +6 -6
- package/button/_fab-theme.scss +65 -32
- package/button/_icon-button-theme.scss +91 -54
- package/button/index.d.ts +13 -13
- package/button-toggle/index.d.ts +5 -5
- package/card/index.d.ts +18 -18
- package/card/testing/index.d.ts +1 -1
- package/checkbox/index.d.ts +7 -7
- package/chips/index.d.ts +103 -126
- package/core/index.d.ts +51 -32
- package/core/tokens/m2/_index.scss +10 -0
- package/datepicker/index.d.ts +109 -109
- package/datepicker/testing/index.d.ts +1 -1
- package/dialog/index.d.ts +1 -1
- package/dialog/testing/index.d.ts +1 -1
- package/divider/index.d.ts +4 -4
- package/esm2022/autocomplete/autocomplete-origin.mjs +3 -2
- package/esm2022/autocomplete/autocomplete-trigger.mjs +11 -4
- package/esm2022/autocomplete/autocomplete.mjs +4 -4
- package/esm2022/autocomplete/module.mjs +21 -5
- package/esm2022/autocomplete/public-api.mjs +3 -1
- package/esm2022/badge/badge-module.mjs +3 -4
- package/esm2022/badge/badge.mjs +3 -2
- package/esm2022/bottom-sheet/bottom-sheet-container.mjs +4 -4
- package/esm2022/bottom-sheet/bottom-sheet-module.mjs +6 -5
- package/esm2022/bottom-sheet/bottom-sheet.mjs +3 -4
- package/esm2022/button/button.mjs +5 -5
- package/esm2022/button/fab.mjs +9 -9
- package/esm2022/button/icon-button.mjs +5 -5
- package/esm2022/button/module.mjs +14 -10
- package/esm2022/button-toggle/button-toggle-module.mjs +3 -4
- package/esm2022/button-toggle/button-toggle.mjs +6 -5
- package/esm2022/card/card.mjs +29 -18
- package/esm2022/card/module.mjs +4 -5
- package/esm2022/card/testing/card-harness.mjs +9 -1
- package/esm2022/checkbox/checkbox-required-validator.mjs +4 -2
- package/esm2022/checkbox/checkbox.mjs +31 -17
- package/esm2022/checkbox/module.mjs +5 -6
- package/esm2022/chips/chip-action.mjs +15 -13
- package/esm2022/chips/chip-edit-input.mjs +3 -2
- package/esm2022/chips/chip-grid.mjs +41 -40
- package/esm2022/chips/chip-icons.mjs +7 -4
- package/esm2022/chips/chip-input.mjs +15 -17
- package/esm2022/chips/chip-listbox.mjs +20 -23
- package/esm2022/chips/chip-option.mjs +13 -12
- package/esm2022/chips/chip-row.mjs +6 -7
- package/esm2022/chips/chip-set.mjs +20 -19
- package/esm2022/chips/chip.mjs +50 -44
- package/esm2022/chips/module.mjs +4 -5
- package/esm2022/chips/tokens.mjs +8 -2
- package/esm2022/core/common-behaviors/error-state.mjs +50 -11
- package/esm2022/core/common-behaviors/index.mjs +2 -2
- package/esm2022/core/line/line.mjs +5 -5
- package/esm2022/core/option/index.mjs +3 -4
- package/esm2022/core/option/optgroup.mjs +3 -3
- package/esm2022/core/option/option.mjs +7 -7
- package/esm2022/core/ripple/index.mjs +3 -4
- package/esm2022/core/ripple/ripple-ref.mjs +10 -2
- package/esm2022/core/ripple/ripple-renderer.mjs +11 -11
- package/esm2022/core/ripple/ripple.mjs +3 -2
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +3 -4
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/datepicker/calendar-body.mjs +4 -4
- package/esm2022/datepicker/calendar.mjs +8 -12
- package/esm2022/datepicker/date-range-input-parts.mjs +35 -14
- package/esm2022/datepicker/date-range-input.mjs +13 -13
- package/esm2022/datepicker/date-range-picker.mjs +3 -2
- package/esm2022/datepicker/datepicker-actions.mjs +7 -5
- package/esm2022/datepicker/datepicker-base.mjs +57 -62
- package/esm2022/datepicker/datepicker-input-base.mjs +8 -7
- package/esm2022/datepicker/datepicker-input.mjs +3 -2
- package/esm2022/datepicker/datepicker-module.mjs +15 -13
- package/esm2022/datepicker/datepicker-toggle.mjs +10 -10
- package/esm2022/datepicker/datepicker.mjs +3 -2
- package/esm2022/datepicker/month-view.mjs +3 -4
- package/esm2022/datepicker/multi-year-view.mjs +3 -4
- package/esm2022/datepicker/testing/calendar-harness.mjs +11 -4
- package/esm2022/datepicker/year-view.mjs +3 -4
- package/esm2022/dialog/dialog-container.mjs +5 -6
- package/esm2022/dialog/dialog-ref.mjs +10 -4
- package/esm2022/dialog/module.mjs +2 -2
- package/esm2022/dialog/testing/dialog-harness.mjs +11 -4
- package/esm2022/dialog/testing/dialog-opener.mjs +3 -3
- package/esm2022/dialog/testing/public-api.mjs +2 -2
- package/esm2022/divider/divider-module.mjs +3 -4
- package/esm2022/divider/divider.mjs +3 -3
- package/esm2022/expansion/accordion.mjs +8 -13
- package/esm2022/expansion/expansion-module.mjs +14 -7
- package/esm2022/expansion/expansion-panel-content.mjs +3 -2
- package/esm2022/expansion/expansion-panel-header.mjs +18 -16
- package/esm2022/expansion/expansion-panel.mjs +11 -11
- package/esm2022/expansion/testing/expansion-harness.mjs +14 -6
- package/esm2022/form-field/directives/error.mjs +3 -2
- package/esm2022/form-field/directives/floating-label.mjs +3 -2
- package/esm2022/form-field/directives/hint.mjs +3 -2
- package/esm2022/form-field/directives/label.mjs +3 -2
- package/esm2022/form-field/directives/line-ripple.mjs +3 -2
- package/esm2022/form-field/directives/notched-outline.mjs +3 -3
- package/esm2022/form-field/directives/prefix.mjs +3 -2
- package/esm2022/form-field/directives/suffix.mjs +3 -2
- package/esm2022/form-field/form-field.mjs +12 -11
- package/esm2022/form-field/module.mjs +14 -16
- package/esm2022/grid-list/grid-list-module.mjs +13 -9
- package/esm2022/grid-list/grid-list.mjs +3 -3
- package/esm2022/grid-list/grid-tile.mjs +11 -8
- package/esm2022/grid-list/testing/grid-tile-harness.mjs +9 -3
- package/esm2022/grid-list/tile-coordinator.mjs +1 -1
- package/esm2022/icon/icon-module.mjs +3 -4
- package/esm2022/icon/icon.mjs +25 -29
- package/esm2022/icon/testing/icon-harness-filters.mjs +7 -2
- package/esm2022/icon/testing/icon-harness.mjs +4 -3
- package/esm2022/input/input.mjs +26 -28
- package/esm2022/input/module.mjs +3 -4
- package/esm2022/input/public-api.mjs +3 -1
- package/esm2022/list/action-list.mjs +3 -3
- package/esm2022/list/list-base.mjs +5 -3
- package/esm2022/list/list-item-sections.mjs +13 -7
- package/esm2022/list/list-module.mjs +12 -13
- package/esm2022/list/list-option.mjs +6 -6
- package/esm2022/list/list.mjs +6 -6
- package/esm2022/list/nav-list.mjs +3 -3
- package/esm2022/list/selection-list.mjs +3 -3
- package/esm2022/list/subheader.mjs +3 -2
- package/esm2022/list/testing/list-item-harness-base.mjs +18 -6
- package/esm2022/list/testing/public-api.mjs +2 -2
- package/esm2022/menu/menu-content.mjs +3 -2
- package/esm2022/menu/menu-item.mjs +4 -4
- package/esm2022/menu/menu-trigger.mjs +10 -3
- package/esm2022/menu/menu.mjs +4 -4
- package/esm2022/menu/module.mjs +23 -5
- package/esm2022/paginator/module.mjs +4 -5
- package/esm2022/paginator/paginator.mjs +37 -41
- package/esm2022/progress-bar/module.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.mjs +25 -20
- package/esm2022/progress-spinner/module.mjs +3 -4
- package/esm2022/progress-spinner/progress-spinner.mjs +35 -34
- package/esm2022/radio/module.mjs +3 -4
- package/esm2022/radio/radio.mjs +42 -35
- package/esm2022/select/module.mjs +19 -5
- package/esm2022/select/public-api.mjs +5 -1
- package/esm2022/select/select.mjs +83 -66
- package/esm2022/sidenav/drawer.mjs +7 -6
- package/esm2022/sidenav/sidenav-module.mjs +12 -8
- package/esm2022/sidenav/sidenav.mjs +7 -6
- package/esm2022/slide-toggle/module.mjs +15 -7
- package/esm2022/slide-toggle/slide-toggle-required-validator.mjs +3 -2
- package/esm2022/slide-toggle/slide-toggle.mjs +4 -4
- package/esm2022/slider/module.mjs +17 -5
- package/esm2022/slider/slider-input.mjs +26 -23
- package/esm2022/slider/slider-interface.mjs +16 -1
- package/esm2022/slider/slider-thumb.mjs +8 -9
- package/esm2022/slider/slider.mjs +74 -73
- 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/snack-bar/module.mjs +2 -2
- package/esm2022/snack-bar/simple-snack-bar.mjs +4 -6
- package/esm2022/snack-bar/snack-bar-container.mjs +5 -6
- package/esm2022/snack-bar/snack-bar-ref.mjs +1 -1
- package/esm2022/sort/sort-header.mjs +17 -25
- package/esm2022/sort/sort-module.mjs +3 -4
- package/esm2022/sort/sort.mjs +13 -19
- package/esm2022/stepper/step-content.mjs +3 -2
- package/esm2022/stepper/step-header.mjs +11 -16
- package/esm2022/stepper/step-label.mjs +3 -2
- package/esm2022/stepper/stepper-button.mjs +5 -3
- package/esm2022/stepper/stepper-icon.mjs +3 -2
- package/esm2022/stepper/stepper-module.mjs +14 -13
- package/esm2022/stepper/stepper.mjs +11 -13
- package/esm2022/stepper/testing/step-harness-filters.mjs +7 -2
- package/esm2022/stepper/testing/stepper-harness.mjs +4 -3
- package/esm2022/table/cell.mjs +15 -8
- package/esm2022/table/module.mjs +4 -5
- package/esm2022/table/row.mjs +19 -10
- package/esm2022/table/table.mjs +7 -7
- package/esm2022/table/text-column.mjs +6 -4
- package/esm2022/tabs/module.mjs +8 -41
- package/esm2022/tabs/paginated-tab-header.mjs +12 -18
- package/esm2022/tabs/tab-body.mjs +6 -4
- package/esm2022/tabs/tab-content.mjs +3 -2
- package/esm2022/tabs/tab-group.mjs +69 -78
- package/esm2022/tabs/tab-header.mjs +10 -16
- package/esm2022/tabs/tab-label-wrapper.mjs +13 -8
- package/esm2022/tabs/tab-label.mjs +3 -2
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +51 -45
- package/esm2022/tabs/tab.mjs +12 -12
- package/esm2022/toolbar/testing/toolbar-harness.mjs +7 -2
- package/esm2022/toolbar/toolbar-module.mjs +3 -4
- package/esm2022/toolbar/toolbar.mjs +14 -18
- package/esm2022/tooltip/module.mjs +3 -4
- package/esm2022/tooltip/tooltip.mjs +14 -8
- package/esm2022/tree/node.mjs +24 -21
- package/esm2022/tree/outlet.mjs +3 -2
- package/esm2022/tree/padding.mjs +12 -4
- package/esm2022/tree/toggle.mjs +3 -2
- package/esm2022/tree/tree-module.mjs +4 -5
- package/esm2022/tree/tree.mjs +3 -4
- package/expansion/_expansion-theme.scss +56 -22
- package/expansion/index.d.ts +25 -33
- package/expansion/testing/index.d.ts +1 -1
- package/fesm2022/autocomplete.mjs +39 -15
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +4 -4
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +21 -22
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +7 -8
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +29 -25
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +9 -1
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +31 -21
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +38 -23
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +179 -156
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +87 -42
- 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 +183 -156
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +13 -6
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +15 -10
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider.mjs +4 -5
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +14 -6
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +51 -44
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +38 -25
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +9 -3
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +24 -17
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +10 -3
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +27 -31
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +28 -30
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +18 -6
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +44 -38
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +42 -18
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +39 -47
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +27 -21
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +37 -37
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +43 -37
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +102 -70
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +23 -17
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +19 -11
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +11 -4
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +133 -102
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +13 -15
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort.mjs +29 -42
- 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 +42 -43
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +44 -26
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs.mjs +594 -621
- 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 +16 -20
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +15 -10
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree.mjs +36 -30
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/index.d.ts +33 -45
- package/grid-list/index.d.ts +10 -10
- package/grid-list/testing/index.d.ts +1 -1
- package/icon/index.d.ts +14 -20
- package/icon/testing/index.d.ts +1 -1
- package/input/index.d.ts +33 -32
- package/list/index.d.ts +36 -36
- package/list/testing/index.d.ts +2 -2
- package/menu/index.d.ts +12 -12
- package/package.json +7 -7
- package/paginator/index.d.ts +21 -22
- 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 +14 -17
- package/progress-spinner/index.d.ts +18 -19
- package/radio/index.d.ts +25 -27
- package/schematics/ng-add/index.js +2 -2
- package/schematics/ng-add/index.mjs +2 -2
- package/schematics/ng-generate/mdc-migration/index_bundled.js +11 -4
- package/schematics/ng-generate/mdc-migration/index_bundled.js.map +3 -3
- package/select/index.d.ts +66 -49
- package/sidenav/index.d.ts +11 -11
- package/slide-toggle/index.d.ts +6 -6
- package/slider/index.d.ts +38 -38
- package/slider/testing/index.d.ts +1 -1
- package/sort/index.d.ts +19 -24
- package/stepper/index.d.ts +33 -43
- package/stepper/testing/index.d.ts +1 -1
- package/table/index.d.ts +24 -24
- package/tabs/index.d.ts +75 -103
- package/toolbar/index.d.ts +10 -17
- package/toolbar/testing/index.d.ts +1 -1
- package/tooltip/index.d.ts +8 -8
- package/tree/index.d.ts +26 -28
package/fesm2022/slider.mjs
CHANGED
|
@@ -1,14 +1,27 @@
|
|
|
1
|
-
import * as i1
|
|
2
|
-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
1
|
+
import * as i1 from '@angular/cdk/bidi';
|
|
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';
|
|
6
|
-
import
|
|
7
|
-
import { MatRipple, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatRippleModule } from '@angular/material/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';
|
|
5
|
+
import { RippleState, MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatRippleModule } from '@angular/material/core';
|
|
8
6
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
9
7
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
8
|
import { Subject } from 'rxjs';
|
|
11
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Thumb types: range slider has two thumbs (START, END) whereas single point
|
|
12
|
+
* slider only has one thumb (END).
|
|
13
|
+
*/
|
|
14
|
+
var _MatThumb;
|
|
15
|
+
(function (_MatThumb) {
|
|
16
|
+
_MatThumb[_MatThumb["START"] = 1] = "START";
|
|
17
|
+
_MatThumb[_MatThumb["END"] = 2] = "END";
|
|
18
|
+
})(_MatThumb || (_MatThumb = {}));
|
|
19
|
+
/** Tick mark enum, for discrete sliders. */
|
|
20
|
+
var _MatTickMark;
|
|
21
|
+
(function (_MatTickMark) {
|
|
22
|
+
_MatTickMark[_MatTickMark["ACTIVE"] = 0] = "ACTIVE";
|
|
23
|
+
_MatTickMark[_MatTickMark["INACTIVE"] = 1] = "INACTIVE";
|
|
24
|
+
})(_MatTickMark || (_MatTickMark = {}));
|
|
12
25
|
/**
|
|
13
26
|
* Injection token that can be used for a `MatSlider` to provide itself as a
|
|
14
27
|
* parent to the `MatSliderThumb` and `MatSliderRangeThumb`.
|
|
@@ -162,7 +175,7 @@ class MatSliderVisualThumb {
|
|
|
162
175
|
}
|
|
163
176
|
/** Whether the given rippleRef is currently fading in or visible. */
|
|
164
177
|
_isShowingRipple(rippleRef) {
|
|
165
|
-
return rippleRef?.state ===
|
|
178
|
+
return rippleRef?.state === RippleState.FADING_IN || rippleRef?.state === RippleState.VISIBLE;
|
|
166
179
|
}
|
|
167
180
|
/** Manually launches the slider thumb ripple using the specified ripple animation config. */
|
|
168
181
|
_showRipple(animation, ignoreGlobalRippleConfig) {
|
|
@@ -171,7 +184,7 @@ class MatSliderVisualThumb {
|
|
|
171
184
|
}
|
|
172
185
|
this._showValueIndicator();
|
|
173
186
|
if (this._slider._isRange) {
|
|
174
|
-
const sibling = this._slider._getThumb(this.thumbPosition ===
|
|
187
|
+
const sibling = this._slider._getThumb(this.thumbPosition === _MatThumb.START ? _MatThumb.END : _MatThumb.START);
|
|
175
188
|
sibling._showValueIndicator();
|
|
176
189
|
}
|
|
177
190
|
if (this._slider._globalRippleOptions?.disabled && !ignoreGlobalRippleConfig) {
|
|
@@ -210,7 +223,7 @@ class MatSliderVisualThumb {
|
|
|
210
223
|
this._hostElement.classList.remove('mdc-slider__thumb--with-indicator');
|
|
211
224
|
}
|
|
212
225
|
_getSibling() {
|
|
213
|
-
return this._slider._getThumb(this.thumbPosition ===
|
|
226
|
+
return this._slider._getThumb(this.thumbPosition === _MatThumb.START ? _MatThumb.END : _MatThumb.START);
|
|
214
227
|
}
|
|
215
228
|
/** Gets the value indicator container's native HTML element. */
|
|
216
229
|
_getValueIndicatorContainer() {
|
|
@@ -226,13 +239,13 @@ class MatSliderVisualThumb {
|
|
|
226
239
|
this._isShowingRipple(this._activeRippleRef));
|
|
227
240
|
}
|
|
228
241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MAT_SLIDER }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText" }, host: { classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "@if (discrete) {\n <div class=\"mdc-slider__value-indicator-container\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n </div>\n}\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"], dependencies: [{ kind: "directive", type:
|
|
242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MatSliderVisualThumb, isStandalone: true, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText" }, host: { classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "@if (discrete) {\n <div class=\"mdc-slider__value-indicator-container\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n </div>\n}\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
230
243
|
}
|
|
231
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderVisualThumb, decorators: [{
|
|
232
245
|
type: Component,
|
|
233
246
|
args: [{ selector: 'mat-slider-visual-thumb', host: {
|
|
234
247
|
'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
|
|
235
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], template: "@if (discrete) {\n <div class=\"mdc-slider__value-indicator-container\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n </div>\n}\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"] }]
|
|
248
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER_VISUAL_THUMB, useExisting: MatSliderVisualThumb }], standalone: true, imports: [MatRipple], template: "@if (discrete) {\n <div class=\"mdc-slider__value-indicator-container\" #valueIndicatorContainer>\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n </div>\n </div>\n}\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div matRipple class=\"mat-mdc-focus-indicator\" [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}.mat-mdc-slider .mdc-slider__tick-marks{justify-content:start}.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--active,.mat-mdc-slider .mdc-slider__tick-marks .mdc-slider__tick-mark--inactive{position:absolute;left:2px}"] }]
|
|
236
249
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
237
250
|
type: Inject,
|
|
238
251
|
args: [MAT_SLIDER]
|
|
@@ -257,25 +270,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
257
270
|
// 1. start dragging discrete slider
|
|
258
271
|
// 2. tab to disable checkbox
|
|
259
272
|
// 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
273
|
/**
|
|
267
274
|
* Allows users to select from a range of values by moving the slider thumb. It is similar in
|
|
268
275
|
* behavior to the native `<input type="range">` element.
|
|
269
276
|
*/
|
|
270
|
-
class MatSlider
|
|
277
|
+
class MatSlider {
|
|
271
278
|
/** Whether the slider is disabled. */
|
|
272
279
|
get disabled() {
|
|
273
280
|
return this._disabled;
|
|
274
281
|
}
|
|
275
282
|
set disabled(v) {
|
|
276
|
-
this._disabled =
|
|
277
|
-
const endInput = this._getInput(
|
|
278
|
-
const startInput = this._getInput(
|
|
283
|
+
this._disabled = v;
|
|
284
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
285
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
279
286
|
if (endInput) {
|
|
280
287
|
endInput.disabled = this._disabled;
|
|
281
288
|
}
|
|
@@ -288,22 +295,15 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
288
295
|
return this._discrete;
|
|
289
296
|
}
|
|
290
297
|
set discrete(v) {
|
|
291
|
-
this._discrete =
|
|
298
|
+
this._discrete = v;
|
|
292
299
|
this._updateValueIndicatorUIs();
|
|
293
300
|
}
|
|
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
301
|
/** The minimum value that the slider can have. */
|
|
302
302
|
get min() {
|
|
303
303
|
return this._min;
|
|
304
304
|
}
|
|
305
305
|
set min(v) {
|
|
306
|
-
const min =
|
|
306
|
+
const min = isNaN(v) ? this._min : v;
|
|
307
307
|
if (this._min !== min) {
|
|
308
308
|
this._updateMin(min);
|
|
309
309
|
}
|
|
@@ -315,8 +315,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
315
315
|
this._onMinMaxOrStepChange();
|
|
316
316
|
}
|
|
317
317
|
_updateMinRange(min) {
|
|
318
|
-
const endInput = this._getInput(
|
|
319
|
-
const startInput = this._getInput(
|
|
318
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
319
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
320
320
|
const oldEndValue = endInput.value;
|
|
321
321
|
const oldStartValue = startInput.value;
|
|
322
322
|
startInput.min = min.new;
|
|
@@ -335,7 +335,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
335
335
|
}
|
|
336
336
|
}
|
|
337
337
|
_updateMinNonRange(min) {
|
|
338
|
-
const input = this._getInput(
|
|
338
|
+
const input = this._getInput(_MatThumb.END);
|
|
339
339
|
if (input) {
|
|
340
340
|
const oldValue = input.value;
|
|
341
341
|
input.min = min;
|
|
@@ -351,7 +351,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
351
351
|
return this._max;
|
|
352
352
|
}
|
|
353
353
|
set max(v) {
|
|
354
|
-
const max =
|
|
354
|
+
const max = isNaN(v) ? this._max : v;
|
|
355
355
|
if (this._max !== max) {
|
|
356
356
|
this._updateMax(max);
|
|
357
357
|
}
|
|
@@ -363,8 +363,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
363
363
|
this._onMinMaxOrStepChange();
|
|
364
364
|
}
|
|
365
365
|
_updateMaxRange(max) {
|
|
366
|
-
const endInput = this._getInput(
|
|
367
|
-
const startInput = this._getInput(
|
|
366
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
367
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
368
368
|
const oldEndValue = endInput.value;
|
|
369
369
|
const oldStartValue = startInput.value;
|
|
370
370
|
endInput.max = max.new;
|
|
@@ -383,7 +383,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
383
383
|
}
|
|
384
384
|
}
|
|
385
385
|
_updateMaxNonRange(max) {
|
|
386
|
-
const input = this._getInput(
|
|
386
|
+
const input = this._getInput(_MatThumb.END);
|
|
387
387
|
if (input) {
|
|
388
388
|
const oldValue = input.value;
|
|
389
389
|
input.max = max;
|
|
@@ -399,7 +399,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
399
399
|
return this._step;
|
|
400
400
|
}
|
|
401
401
|
set step(v) {
|
|
402
|
-
const step =
|
|
402
|
+
const step = isNaN(v) ? this._step : v;
|
|
403
403
|
if (this._step !== step) {
|
|
404
404
|
this._updateStep(step);
|
|
405
405
|
}
|
|
@@ -410,8 +410,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
410
410
|
this._onMinMaxOrStepChange();
|
|
411
411
|
}
|
|
412
412
|
_updateStepRange() {
|
|
413
|
-
const endInput = this._getInput(
|
|
414
|
-
const startInput = this._getInput(
|
|
413
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
414
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
415
415
|
const oldEndValue = endInput.value;
|
|
416
416
|
const oldStartValue = startInput.value;
|
|
417
417
|
const prevStartValue = startInput.value;
|
|
@@ -438,7 +438,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
438
438
|
}
|
|
439
439
|
}
|
|
440
440
|
_updateStepNonRange() {
|
|
441
|
-
const input = this._getInput(
|
|
441
|
+
const input = this._getInput(_MatThumb.END);
|
|
442
442
|
if (input) {
|
|
443
443
|
const oldValue = input.value;
|
|
444
444
|
input.step = this._step;
|
|
@@ -451,16 +451,19 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
451
451
|
}
|
|
452
452
|
}
|
|
453
453
|
}
|
|
454
|
-
constructor(_ngZone, _cdr,
|
|
455
|
-
super(elementRef);
|
|
454
|
+
constructor(_ngZone, _cdr, _elementRef, _dir, _globalRippleOptions, animationMode) {
|
|
456
455
|
this._ngZone = _ngZone;
|
|
457
456
|
this._cdr = _cdr;
|
|
457
|
+
this._elementRef = _elementRef;
|
|
458
458
|
this._dir = _dir;
|
|
459
459
|
this._globalRippleOptions = _globalRippleOptions;
|
|
460
460
|
this._disabled = false;
|
|
461
461
|
this._discrete = false;
|
|
462
|
-
|
|
462
|
+
/** Whether the slider displays tick marks along the slider track. */
|
|
463
|
+
this.showTickMarks = false;
|
|
463
464
|
this._min = 0;
|
|
465
|
+
/** Whether ripples are disabled in the slider. */
|
|
466
|
+
this.disableRipple = false;
|
|
464
467
|
this._max = 100;
|
|
465
468
|
this._step = 1;
|
|
466
469
|
/**
|
|
@@ -499,14 +502,14 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
499
502
|
if (this._platform.isBrowser) {
|
|
500
503
|
this._updateDimensions();
|
|
501
504
|
}
|
|
502
|
-
const eInput = this._getInput(
|
|
503
|
-
const sInput = this._getInput(
|
|
505
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
506
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
504
507
|
this._isRange = !!eInput && !!sInput;
|
|
505
508
|
this._cdr.detectChanges();
|
|
506
509
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
507
|
-
_validateInputs(this._isRange, this._getInput(
|
|
510
|
+
_validateInputs(this._isRange, this._getInput(_MatThumb.END), this._getInput(_MatThumb.START));
|
|
508
511
|
}
|
|
509
|
-
const thumb = this._getThumb(
|
|
512
|
+
const thumb = this._getThumb(_MatThumb.END);
|
|
510
513
|
this._rippleRadius = thumb._ripple.radius;
|
|
511
514
|
this._inputPadding = this._rippleRadius - this._knobRadius;
|
|
512
515
|
this._inputOffset = this._knobRadius;
|
|
@@ -552,8 +555,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
552
555
|
this._updateTickMarkUI();
|
|
553
556
|
}
|
|
554
557
|
_onDirChangeRange() {
|
|
555
|
-
const endInput = this._getInput(
|
|
556
|
-
const startInput = this._getInput(
|
|
558
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
559
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
557
560
|
endInput._setIsLeftThumb();
|
|
558
561
|
startInput._setIsLeftThumb();
|
|
559
562
|
endInput.translateX = endInput._calcTranslateXByValue();
|
|
@@ -566,7 +569,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
566
569
|
startInput._updateThumbUIByValue();
|
|
567
570
|
}
|
|
568
571
|
_onDirChangeNonRange() {
|
|
569
|
-
const input = this._getInput(
|
|
572
|
+
const input = this._getInput(_MatThumb.END);
|
|
570
573
|
input._updateThumbUIByValue();
|
|
571
574
|
}
|
|
572
575
|
/** Starts observing and updating the slider if the host changes its size. */
|
|
@@ -589,9 +592,9 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
589
592
|
}
|
|
590
593
|
/** Whether any of the thumbs are currently active. */
|
|
591
594
|
_isActive() {
|
|
592
|
-
return this._getThumb(
|
|
595
|
+
return this._getThumb(_MatThumb.START)._isActive || this._getThumb(_MatThumb.END)._isActive;
|
|
593
596
|
}
|
|
594
|
-
_getValue(thumbPosition =
|
|
597
|
+
_getValue(thumbPosition = _MatThumb.END) {
|
|
595
598
|
const input = this._getInput(thumbPosition);
|
|
596
599
|
if (!input) {
|
|
597
600
|
return this.min;
|
|
@@ -599,7 +602,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
599
602
|
return input.value;
|
|
600
603
|
}
|
|
601
604
|
_skipUpdate() {
|
|
602
|
-
return !!(this._getInput(
|
|
605
|
+
return !!(this._getInput(_MatThumb.START)?._skipUIUpdate || this._getInput(_MatThumb.END)?._skipUIUpdate);
|
|
603
606
|
}
|
|
604
607
|
/** Stores the slider dimensions. */
|
|
605
608
|
_updateDimensions() {
|
|
@@ -658,8 +661,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
658
661
|
}
|
|
659
662
|
this._updateDimensions();
|
|
660
663
|
if (this._isRange) {
|
|
661
|
-
const eInput = this._getInput(
|
|
662
|
-
const sInput = this._getInput(
|
|
664
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
665
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
663
666
|
eInput._updateThumbUIByValue();
|
|
664
667
|
sInput._updateThumbUIByValue();
|
|
665
668
|
eInput._updateStaticStyles();
|
|
@@ -670,7 +673,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
670
673
|
sInput._updateWidthInactive();
|
|
671
674
|
}
|
|
672
675
|
else {
|
|
673
|
-
const eInput = this._getInput(
|
|
676
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
674
677
|
if (eInput) {
|
|
675
678
|
eInput._updateThumbUIByValue();
|
|
676
679
|
}
|
|
@@ -681,8 +684,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
681
684
|
}
|
|
682
685
|
/** Returns true if the slider knobs are overlapping one another. */
|
|
683
686
|
_areThumbsOverlapping() {
|
|
684
|
-
const startInput = this._getInput(
|
|
685
|
-
const endInput = this._getInput(
|
|
687
|
+
const startInput = this._getInput(_MatThumb.START);
|
|
688
|
+
const endInput = this._getInput(_MatThumb.END);
|
|
686
689
|
if (!startInput || !endInput) {
|
|
687
690
|
return false;
|
|
688
691
|
}
|
|
@@ -720,7 +723,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
720
723
|
if (this._skipUpdate()) {
|
|
721
724
|
return;
|
|
722
725
|
}
|
|
723
|
-
const thumb = this._getThumb(source.thumbPosition ===
|
|
726
|
+
const thumb = this._getThumb(source.thumbPosition === _MatThumb.END ? _MatThumb.END : _MatThumb.START);
|
|
724
727
|
thumb._hostElement.style.transform = `translateX(${source.translateX}px)`;
|
|
725
728
|
}
|
|
726
729
|
// Value indicator text update conditions
|
|
@@ -739,7 +742,7 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
739
742
|
? (source._valuetext = valuetext)
|
|
740
743
|
: source._hostElement.setAttribute('aria-valuetext', valuetext);
|
|
741
744
|
if (this.discrete) {
|
|
742
|
-
source.thumbPosition ===
|
|
745
|
+
source.thumbPosition === _MatThumb.START
|
|
743
746
|
? (this.startValueIndicatorText = valuetext)
|
|
744
747
|
: (this.endValueIndicatorText = valuetext);
|
|
745
748
|
const visualThumb = this._getThumb(source.thumbPosition);
|
|
@@ -750,8 +753,8 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
750
753
|
}
|
|
751
754
|
/** Updates all value indicator UIs in the slider. */
|
|
752
755
|
_updateValueIndicatorUIs() {
|
|
753
|
-
const eInput = this._getInput(
|
|
754
|
-
const sInput = this._getInput(
|
|
756
|
+
const eInput = this._getInput(_MatThumb.END);
|
|
757
|
+
const sInput = this._getInput(_MatThumb.START);
|
|
755
758
|
if (eInput) {
|
|
756
759
|
this._updateValueIndicatorUI(eInput);
|
|
757
760
|
}
|
|
@@ -865,32 +868,32 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
865
868
|
let numInactive = Math.max(Math.round((this.max - value) / step), 0);
|
|
866
869
|
this._isRtl ? numActive++ : numInactive++;
|
|
867
870
|
this._tickMarks = Array(numActive)
|
|
868
|
-
.fill(
|
|
869
|
-
.concat(Array(numInactive).fill(
|
|
871
|
+
.fill(_MatTickMark.ACTIVE)
|
|
872
|
+
.concat(Array(numInactive).fill(_MatTickMark.INACTIVE));
|
|
870
873
|
}
|
|
871
874
|
_updateTickMarkUIRange(step) {
|
|
872
875
|
const endValue = this._getValue();
|
|
873
|
-
const startValue = this._getValue(
|
|
876
|
+
const startValue = this._getValue(_MatThumb.START);
|
|
874
877
|
const numInactiveBeforeStartThumb = Math.max(Math.floor((startValue - this.min) / step), 0);
|
|
875
878
|
const numActive = Math.max(Math.floor((endValue - startValue) / step) + 1, 0);
|
|
876
879
|
const numInactiveAfterEndThumb = Math.max(Math.floor((this.max - endValue) / step), 0);
|
|
877
880
|
this._tickMarks = Array(numInactiveBeforeStartThumb)
|
|
878
|
-
.fill(
|
|
879
|
-
.concat(Array(numActive).fill(
|
|
881
|
+
.fill(_MatTickMark.INACTIVE)
|
|
882
|
+
.concat(Array(numActive).fill(_MatTickMark.ACTIVE), Array(numInactiveAfterEndThumb).fill(_MatTickMark.INACTIVE));
|
|
880
883
|
}
|
|
881
884
|
/** Gets the slider thumb input of the given thumb position. */
|
|
882
885
|
_getInput(thumbPosition) {
|
|
883
|
-
if (thumbPosition ===
|
|
886
|
+
if (thumbPosition === _MatThumb.END && this._input) {
|
|
884
887
|
return this._input;
|
|
885
888
|
}
|
|
886
889
|
if (this._inputs?.length) {
|
|
887
|
-
return thumbPosition ===
|
|
890
|
+
return thumbPosition === _MatThumb.START ? this._inputs.first : this._inputs.last;
|
|
888
891
|
}
|
|
889
892
|
return;
|
|
890
893
|
}
|
|
891
894
|
/** Gets the slider thumb HTML input element of the given thumb position. */
|
|
892
895
|
_getThumb(thumbPosition) {
|
|
893
|
-
return thumbPosition ===
|
|
896
|
+
return thumbPosition === _MatThumb.END ? this._thumbs?.last : this._thumbs?.first;
|
|
894
897
|
}
|
|
895
898
|
_setTransition(withAnimation) {
|
|
896
899
|
this._hasAnimation = !this._platform.IOS && withAnimation && !this._noopAnimations;
|
|
@@ -905,20 +908,21 @@ class MatSlider extends _MatSliderMixinBase {
|
|
|
905
908
|
const dy = event.clientY - centerY;
|
|
906
909
|
return Math.pow(dx, 2) + Math.pow(dy, 2) < Math.pow(radius, 2);
|
|
907
910
|
}
|
|
908
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1
|
|
909
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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 }); }
|
|
911
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
912
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MatSlider, isStandalone: true, 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
913
|
}
|
|
911
914
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSlider, decorators: [{
|
|
912
915
|
type: Component,
|
|
913
916
|
args: [{ selector: 'mat-slider', host: {
|
|
914
917
|
'class': 'mat-mdc-slider mdc-slider',
|
|
918
|
+
'[class]': '"mat-" + (color || "primary")',
|
|
915
919
|
'[class.mdc-slider--range]': '_isRange',
|
|
916
920
|
'[class.mdc-slider--disabled]': 'disabled',
|
|
917
921
|
'[class.mdc-slider--discrete]': 'discrete',
|
|
918
922
|
'[class.mdc-slider--tick-marks]': 'showTickMarks',
|
|
919
923
|
'[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:\"\"}"] }]
|
|
921
|
-
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1
|
|
924
|
+
}, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_SLIDER, useExisting: MatSlider }], standalone: true, imports: [MatSliderVisualThumb], 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
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Directionality, decorators: [{
|
|
922
926
|
type: Optional
|
|
923
927
|
}] }, { type: undefined, decorators: [{
|
|
924
928
|
type: Optional
|
|
@@ -943,17 +947,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
943
947
|
type: ContentChildren,
|
|
944
948
|
args: [MAT_SLIDER_RANGE_THUMB, { descendants: false }]
|
|
945
949
|
}], disabled: [{
|
|
946
|
-
type: Input
|
|
950
|
+
type: Input,
|
|
951
|
+
args: [{ transform: booleanAttribute }]
|
|
947
952
|
}], discrete: [{
|
|
948
|
-
type: Input
|
|
953
|
+
type: Input,
|
|
954
|
+
args: [{ transform: booleanAttribute }]
|
|
949
955
|
}], showTickMarks: [{
|
|
950
|
-
type: Input
|
|
956
|
+
type: Input,
|
|
957
|
+
args: [{ transform: booleanAttribute }]
|
|
951
958
|
}], min: [{
|
|
959
|
+
type: Input,
|
|
960
|
+
args: [{ transform: numberAttribute }]
|
|
961
|
+
}], color: [{
|
|
952
962
|
type: Input
|
|
963
|
+
}], disableRipple: [{
|
|
964
|
+
type: Input,
|
|
965
|
+
args: [{ transform: booleanAttribute }]
|
|
953
966
|
}], max: [{
|
|
954
|
-
type: Input
|
|
967
|
+
type: Input,
|
|
968
|
+
args: [{ transform: numberAttribute }]
|
|
955
969
|
}], step: [{
|
|
956
|
-
type: Input
|
|
970
|
+
type: Input,
|
|
971
|
+
args: [{ transform: numberAttribute }]
|
|
957
972
|
}], displayWith: [{
|
|
958
973
|
type: Input
|
|
959
974
|
}] } });
|
|
@@ -1011,18 +1026,19 @@ const MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR = {
|
|
|
1011
1026
|
*/
|
|
1012
1027
|
class MatSliderThumb {
|
|
1013
1028
|
get value() {
|
|
1014
|
-
return
|
|
1029
|
+
return numberAttribute(this._hostElement.value, 0);
|
|
1015
1030
|
}
|
|
1016
|
-
set value(
|
|
1017
|
-
|
|
1031
|
+
set value(value) {
|
|
1032
|
+
value = isNaN(value) ? 0 : value;
|
|
1033
|
+
const stringValue = value + '';
|
|
1018
1034
|
if (!this._hasSetInitialValue) {
|
|
1019
|
-
this._initialValue =
|
|
1035
|
+
this._initialValue = stringValue;
|
|
1020
1036
|
return;
|
|
1021
1037
|
}
|
|
1022
1038
|
if (this._isActive) {
|
|
1023
1039
|
return;
|
|
1024
1040
|
}
|
|
1025
|
-
this._hostElement.value =
|
|
1041
|
+
this._hostElement.value = stringValue;
|
|
1026
1042
|
this._updateThumbUIByValue();
|
|
1027
1043
|
this._slider._onValueChange(this);
|
|
1028
1044
|
this._cdr.detectChanges();
|
|
@@ -1047,33 +1063,33 @@ class MatSliderThumb {
|
|
|
1047
1063
|
}
|
|
1048
1064
|
/** @docs-private */
|
|
1049
1065
|
get min() {
|
|
1050
|
-
return
|
|
1066
|
+
return numberAttribute(this._hostElement.min, 0);
|
|
1051
1067
|
}
|
|
1052
1068
|
set min(v) {
|
|
1053
|
-
this._hostElement.min =
|
|
1069
|
+
this._hostElement.min = v + '';
|
|
1054
1070
|
this._cdr.detectChanges();
|
|
1055
1071
|
}
|
|
1056
1072
|
/** @docs-private */
|
|
1057
1073
|
get max() {
|
|
1058
|
-
return
|
|
1074
|
+
return numberAttribute(this._hostElement.max, 0);
|
|
1059
1075
|
}
|
|
1060
1076
|
set max(v) {
|
|
1061
|
-
this._hostElement.max =
|
|
1077
|
+
this._hostElement.max = v + '';
|
|
1062
1078
|
this._cdr.detectChanges();
|
|
1063
1079
|
}
|
|
1064
1080
|
get step() {
|
|
1065
|
-
return
|
|
1081
|
+
return numberAttribute(this._hostElement.step, 0);
|
|
1066
1082
|
}
|
|
1067
1083
|
set step(v) {
|
|
1068
|
-
this._hostElement.step =
|
|
1084
|
+
this._hostElement.step = v + '';
|
|
1069
1085
|
this._cdr.detectChanges();
|
|
1070
1086
|
}
|
|
1071
1087
|
/** @docs-private */
|
|
1072
1088
|
get disabled() {
|
|
1073
|
-
return
|
|
1089
|
+
return booleanAttribute(this._hostElement.disabled);
|
|
1074
1090
|
}
|
|
1075
1091
|
set disabled(v) {
|
|
1076
|
-
this._hostElement.disabled =
|
|
1092
|
+
this._hostElement.disabled = v;
|
|
1077
1093
|
this._cdr.detectChanges();
|
|
1078
1094
|
if (this._slider.disabled !== this.disabled) {
|
|
1079
1095
|
this._slider.disabled = this.disabled;
|
|
@@ -1115,7 +1131,7 @@ class MatSliderThumb {
|
|
|
1115
1131
|
* Indicates whether this thumb is the start or end thumb.
|
|
1116
1132
|
* @docs-private
|
|
1117
1133
|
*/
|
|
1118
|
-
this.thumbPosition =
|
|
1134
|
+
this.thumbPosition = _MatThumb.END;
|
|
1119
1135
|
/** The radius of a native html slider's knob. */
|
|
1120
1136
|
this._knobRadius = 8;
|
|
1121
1137
|
/** Whether user's cursor is currently in a mouse down state on the input. */
|
|
@@ -1411,7 +1427,7 @@ class MatSliderThumb {
|
|
|
1411
1427
|
this._hostElement.blur();
|
|
1412
1428
|
}
|
|
1413
1429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "
|
|
1430
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.0.4", type: MatSliderThumb, isStandalone: true, 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
1431
|
MAT_SLIDER_THUMB_VALUE_ACCESSOR,
|
|
1416
1432
|
{ provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb },
|
|
1417
1433
|
], exportAs: ["matSliderThumb"], ngImport: i0 }); }
|
|
@@ -1436,12 +1452,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
1436
1452
|
MAT_SLIDER_THUMB_VALUE_ACCESSOR,
|
|
1437
1453
|
{ provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb },
|
|
1438
1454
|
],
|
|
1455
|
+
standalone: true,
|
|
1439
1456
|
}]
|
|
1440
1457
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
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;
|
|
@@ -1625,7 +1643,7 @@ class MatSliderRangeThumb extends MatSliderThumb {
|
|
|
1625
1643
|
}
|
|
1626
1644
|
}
|
|
1627
1645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderRangeThumb, deps: [{ token: i0.NgZone }, { token: MAT_SLIDER }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1628
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", providers: [
|
|
1646
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: MatSliderRangeThumb, isStandalone: true, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", providers: [
|
|
1629
1647
|
MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR,
|
|
1630
1648
|
{ provide: MAT_SLIDER_RANGE_THUMB, useExisting: MatSliderRangeThumb },
|
|
1631
1649
|
], exportAs: ["matSliderRangeThumb"], usesInheritance: true, ngImport: i0 }); }
|
|
@@ -1639,6 +1657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
1639
1657
|
MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR,
|
|
1640
1658
|
{ provide: MAT_SLIDER_RANGE_THUMB, useExisting: MatSliderRangeThumb },
|
|
1641
1659
|
],
|
|
1660
|
+
standalone: true,
|
|
1642
1661
|
}]
|
|
1643
1662
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined, decorators: [{
|
|
1644
1663
|
type: Inject,
|
|
@@ -1647,15 +1666,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
1647
1666
|
|
|
1648
1667
|
class MatSliderModule {
|
|
1649
1668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1650
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: MatSliderModule,
|
|
1651
|
-
|
|
1669
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: MatSliderModule, imports: [MatCommonModule,
|
|
1670
|
+
MatRippleModule,
|
|
1671
|
+
MatSlider,
|
|
1672
|
+
MatSliderThumb,
|
|
1673
|
+
MatSliderRangeThumb,
|
|
1674
|
+
MatSliderVisualThumb], exports: [MatSlider, MatSliderThumb, MatSliderRangeThumb] }); }
|
|
1675
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderModule, imports: [MatCommonModule,
|
|
1676
|
+
MatRippleModule] }); }
|
|
1652
1677
|
}
|
|
1653
1678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSliderModule, decorators: [{
|
|
1654
1679
|
type: NgModule,
|
|
1655
1680
|
args: [{
|
|
1656
|
-
imports: [
|
|
1681
|
+
imports: [
|
|
1682
|
+
MatCommonModule,
|
|
1683
|
+
MatRippleModule,
|
|
1684
|
+
MatSlider,
|
|
1685
|
+
MatSliderThumb,
|
|
1686
|
+
MatSliderRangeThumb,
|
|
1687
|
+
MatSliderVisualThumb,
|
|
1688
|
+
],
|
|
1657
1689
|
exports: [MatSlider, MatSliderThumb, MatSliderRangeThumb],
|
|
1658
|
-
declarations: [MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderVisualThumb],
|
|
1659
1690
|
}]
|
|
1660
1691
|
}] });
|
|
1661
1692
|
|