UNPKG

12.4 kBTypeScriptView Raw
1import { _AbstractConstructor } from '@angular/material/core';
2import { AfterViewInit } from '@angular/core';
3import { BooleanInput } from '@angular/cdk/coercion';
4import { CanColor } from '@angular/material/core';
5import { CanDisable } from '@angular/material/core';
6import { ChangeDetectorRef } from '@angular/core';
7import { _Constructor } from '@angular/material/core';
8import { ControlValueAccessor } from '@angular/forms';
9import { Directionality } from '@angular/cdk/bidi';
10import { ElementRef } from '@angular/core';
11import { EventEmitter } from '@angular/core';
12import { FocusMonitor } from '@angular/cdk/a11y';
13import { HasTabIndex } from '@angular/material/core';
14import * as i0 from '@angular/core';
15import * as i2 from '@angular/common';
16import * as i3 from '@angular/material/core';
17import { NgZone } from '@angular/core';
18import { NumberInput } from '@angular/cdk/coercion';
19import { OnDestroy } from '@angular/core';
20
21declare namespace i1 {
22 export {
23 MAT_SLIDER_VALUE_ACCESSOR,
24 MatSliderChange,
25 MatSlider
26 }
27}
28
29/**
30 * Provider Expression that allows mat-slider to register as a ControlValueAccessor.
31 * This allows it to support [(ngModel)] and [formControl].
32 * @docs-private
33 */
34export declare const MAT_SLIDER_VALUE_ACCESSOR: any;
35
36/**
37 * Allows users to select from a range of values by moving the slider thumb. It is similar in
38 * behavior to the native `<input type="range">` element.
39 */
40export declare class MatSlider extends _MatSliderBase implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, AfterViewInit, HasTabIndex {
41 private _focusMonitor;
42 private _changeDetectorRef;
43 private _dir;
44 private _ngZone;
45 _animationMode?: string | undefined;
46 /** Whether the slider is inverted. */
47 get invert(): boolean;
48 set invert(value: BooleanInput);
49 private _invert;
50 /** The maximum value that the slider can have. */
51 get max(): number;
52 set max(v: NumberInput);
53 private _max;
54 /** The minimum value that the slider can have. */
55 get min(): number;
56 set min(v: NumberInput);
57 private _min;
58 /** The values at which the thumb will snap. */
59 get step(): number;
60 set step(v: NumberInput);
61 private _step;
62 /** Whether or not to show the thumb label. */
63 get thumbLabel(): boolean;
64 set thumbLabel(value: BooleanInput);
65 private _thumbLabel;
66 /**
67 * How often to show ticks. Relative to the step so that a tick always appears on a step.
68 * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
69 */
70 get tickInterval(): 'auto' | number;
71 set tickInterval(value: 'auto' | NumberInput);
72 private _tickInterval;
73 /** Value of the slider. */
74 get value(): number;
75 set value(v: NumberInput);
76 private _value;
77 /**
78 * Function that will be used to format the value before it is displayed
79 * in the thumb label. Can be used to format very large number in order
80 * for them to fit into the slider thumb.
81 */
82 displayWith: (value: number) => string | number;
83 /** Text corresponding to the slider's value. Used primarily for improved accessibility. */
84 valueText: string;
85 /** Whether the slider is vertical. */
86 get vertical(): boolean;
87 set vertical(value: BooleanInput);
88 private _vertical;
89 /** Event emitted when the slider value has changed. */
90 readonly change: EventEmitter<MatSliderChange>;
91 /** Event emitted when the slider thumb moves. */
92 readonly input: EventEmitter<MatSliderChange>;
93 /**
94 * Emits when the raw value of the slider changes. This is here primarily
95 * to facilitate the two-way binding for the `value` input.
96 * @docs-private
97 */
98 readonly valueChange: EventEmitter<number | null>;
99 /** The value to be used for display purposes. */
100 get displayValue(): string | number;
101 /** set focus to the host element */
102 focus(options?: FocusOptions): void;
103 /** blur the host element */
104 blur(): void;
105 /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
106 onTouched: () => any;
107 /** The percentage of the slider that coincides with the value. */
108 get percent(): number;
109 private _percent;
110 /**
111 * Whether or not the thumb is sliding and what the user is using to slide it with.
112 * Used to determine if there should be a transition for the thumb and fill track.
113 */
114 _isSliding: 'keyboard' | 'pointer' | null;
115 /**
116 * Whether or not the slider is active (clicked or sliding).
117 * Used to shrink and grow the thumb as according to the Material Design spec.
118 */
119 _isActive: boolean;
120 /**
121 * Whether the axis of the slider is inverted.
122 * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
123 */
124 _shouldInvertAxis(): boolean;
125 /** Whether the slider is at its minimum value. */
126 _isMinValue(): boolean;
127 /**
128 * The amount of space to leave between the slider thumb and the track fill & track background
129 * elements.
130 */
131 _getThumbGap(): 7 | 10 | 0;
132 /** CSS styles for the track background element. */
133 _getTrackBackgroundStyles(): {
134 [key: string]: string;
135 };
136 /** CSS styles for the track fill element. */
137 _getTrackFillStyles(): {
138 [key: string]: string;
139 };
140 /** CSS styles for the ticks container element. */
141 _getTicksContainerStyles(): {
142 [key: string]: string;
143 };
144 /** CSS styles for the ticks element. */
145 _getTicksStyles(): {
146 [key: string]: string;
147 };
148 _getThumbContainerStyles(): {
149 [key: string]: string;
150 };
151 /** The size of a tick interval as a percentage of the size of the track. */
152 private _tickIntervalPercent;
153 /** The dimensions of the slider. */
154 private _sliderDimensions;
155 private _controlValueAccessorChangeFn;
156 /** Decimal places to round to, based on the step amount. */
157 private _roundToDecimal;
158 /** Subscription to the Directionality change EventEmitter. */
159 private _dirChangeSubscription;
160 /** The value of the slider when the slide start event fires. */
161 private _valueOnSlideStart;
162 /** Reference to the inner slider wrapper element. */
163 private _sliderWrapper;
164 /**
165 * Whether mouse events should be converted to a slider position by calculating their distance
166 * from the right or bottom edge of the slider as opposed to the top or left.
167 */
168 _shouldInvertMouseCoords(): boolean;
169 /** The language direction for this slider element. */
170 private _getDirection;
171 /** Keeps track of the last pointer event that was captured by the slider. */
172 private _lastPointerEvent;
173 /** Used to subscribe to global move and end events */
174 protected _document: Document;
175 /**
176 * Identifier used to attribute a touch event to a particular slider.
177 * Will be undefined if one of the following conditions is true:
178 * - The user isn't dragging using a touch device.
179 * - The browser doesn't support `Touch.identifier`.
180 * - Dragging hasn't started yet.
181 */
182 private _touchId;
183 constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _ngZone: NgZone, _document: any, _animationMode?: string | undefined);
184 ngAfterViewInit(): void;
185 ngOnDestroy(): void;
186 _onMouseenter(): void;
187 _onFocus(): void;
188 _onBlur(): void;
189 _onKeydown(event: KeyboardEvent): void;
190 _onKeyup(): void;
191 /** Called when the user has put their pointer down on the slider. */
192 private _pointerDown;
193 /**
194 * Called when the user has moved their pointer after
195 * starting to drag. Bound on the document level.
196 */
197 private _pointerMove;
198 /** Called when the user has lifted their pointer. Bound on the document level. */
199 private _pointerUp;
200 /** Called when the window has lost focus. */
201 private _windowBlur;
202 /** Use defaultView of injected document if available or fallback to global window reference */
203 private _getWindow;
204 /**
205 * Binds our global move and end events. They're bound at the document level and only while
206 * dragging so that the user doesn't have to keep their pointer exactly over the slider
207 * as they're swiping across the screen.
208 */
209 private _bindGlobalEvents;
210 /** Removes any global event listeners that we may have added. */
211 private _removeGlobalEvents;
212 /** Increments the slider by the given number of steps (negative number decrements). */
213 private _increment;
214 /** Calculate the new value from the new physical location. The value will always be snapped. */
215 private _updateValueFromPosition;
216 /** Emits a change event if the current value is different from the last emitted value. */
217 private _emitChangeEvent;
218 /** Emits an input event when the current value is different from the last emitted value. */
219 private _emitInputEvent;
220 /** Updates the amount of space between ticks as a percentage of the width of the slider. */
221 private _updateTickIntervalPercent;
222 /** Creates a slider change object from the specified value. */
223 private _createChangeEvent;
224 /** Calculates the percentage of the slider that a value is. */
225 private _calculatePercentage;
226 /** Calculates the value a percentage of the slider corresponds to. */
227 private _calculateValue;
228 /** Return a number between two numbers. */
229 private _clamp;
230 /**
231 * Get the bounding client rect of the slider track element.
232 * The track is used rather than the native element to ignore the extra space that the thumb can
233 * take up.
234 */
235 private _getSliderDimensions;
236 /**
237 * Focuses the native element.
238 * Currently only used to allow a blur event to fire but will be used with keyboard input later.
239 */
240 private _focusHostElement;
241 /** Blurs the native element. */
242 private _blurHostElement;
243 /**
244 * Sets the model value. Implemented as part of ControlValueAccessor.
245 * @param value
246 */
247 writeValue(value: any): void;
248 /**
249 * Registers a callback to be triggered when the value has changed.
250 * Implemented as part of ControlValueAccessor.
251 * @param fn Callback to be registered.
252 */
253 registerOnChange(fn: (value: any) => void): void;
254 /**
255 * Registers a callback to be triggered when the component is touched.
256 * Implemented as part of ControlValueAccessor.
257 * @param fn Callback to be registered.
258 */
259 registerOnTouched(fn: any): void;
260 /**
261 * Sets whether the component should be disabled.
262 * Implemented as part of ControlValueAccessor.
263 * @param isDisabled
264 */
265 setDisabledState(isDisabled: boolean): void;
266 static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, { optional: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
267 static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "disabled": "disabled"; "color": "color"; "tabIndex": "tabIndex"; "invert": "invert"; "max": "max"; "min": "min"; "step": "step"; "thumbLabel": "thumbLabel"; "tickInterval": "tickInterval"; "value": "value"; "displayWith": "displayWith"; "valueText": "valueText"; "vertical": "vertical"; }, { "change": "change"; "input": "input"; "valueChange": "valueChange"; }, never, never, false>;
268}
269
270/** @docs-private */
271declare const _MatSliderBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
272 new (_elementRef: ElementRef): {
273 _elementRef: ElementRef;
274 };
275};
276
277/** A simple change event emitted by the MatSlider component. */
278export declare class MatSliderChange {
279 /** The MatSlider that changed. */
280 source: MatSlider;
281 /** The new value of the source slider. */
282 value: number | null;
283}
284
285export declare class MatSliderModule {
286 static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderModule, never>;
287 static ɵmod: i0.ɵɵNgModuleDeclaration<MatSliderModule, [typeof i1.MatSlider], [typeof i2.CommonModule, typeof i3.MatCommonModule], [typeof i1.MatSlider, typeof i3.MatCommonModule]>;
288 static ɵinj: i0.ɵɵInjectorDeclaration<MatSliderModule>;
289}
290
291export { }