UNPKG

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