index.d.ts 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694
  1. import { _AbstractConstructor } from '@angular/material/core';
  2. import { AfterViewInit } from '@angular/core';
  3. import { BooleanInput } from '@angular/cdk/coercion';
  4. import { CanColor } from '@angular/material/core';
  5. import { CanDisableRipple } from '@angular/material/core';
  6. import { ChangeDetectorRef } from '@angular/core';
  7. import { _Constructor } from '@angular/material/core';
  8. import { ControlValueAccessor } from '@angular/forms';
  9. import { Directionality } from '@angular/cdk/bidi';
  10. import { ElementRef } from '@angular/core';
  11. import { EventEmitter } from '@angular/core';
  12. import * as i0 from '@angular/core';
  13. import * as i4 from '@angular/material/core';
  14. import * as i5 from '@angular/common';
  15. import { MatRipple } from '@angular/material/core';
  16. import { NgZone } from '@angular/core';
  17. import { NumberInput } from '@angular/cdk/coercion';
  18. import { OnDestroy } from '@angular/core';
  19. import { Platform } from '@angular/cdk/platform';
  20. import { QueryList } from '@angular/core';
  21. import { RippleGlobalOptions } from '@angular/material/core';
  22. import { Subject } from 'rxjs';
  23. declare namespace i1 {
  24. export {
  25. MatSlider
  26. }
  27. }
  28. declare namespace i2 {
  29. export {
  30. MAT_SLIDER_THUMB_VALUE_ACCESSOR,
  31. MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR,
  32. MatSliderThumb,
  33. MatSliderRangeThumb
  34. }
  35. }
  36. declare namespace i3 {
  37. export {
  38. MatSliderVisualThumb
  39. }
  40. }
  41. /**
  42. * Provider that allows the range slider thumb to register as a ControlValueAccessor.
  43. * @docs-private
  44. */
  45. declare const MAT_SLIDER_RANGE_THUMB_VALUE_ACCESSOR: any;
  46. /**
  47. * Provider that allows the slider thumb to register as a ControlValueAccessor.
  48. * @docs-private
  49. */
  50. declare const MAT_SLIDER_THUMB_VALUE_ACCESSOR: any;
  51. /**
  52. * Allows users to select from a range of values by moving the slider thumb. It is similar in
  53. * behavior to the native `<input type="range">` element.
  54. */
  55. export declare class MatSlider extends _MatSliderMixinBase implements AfterViewInit, CanDisableRipple, OnDestroy, _MatSlider {
  56. readonly _ngZone: NgZone;
  57. readonly _cdr: ChangeDetectorRef;
  58. readonly _platform: Platform;
  59. readonly _dir: Directionality;
  60. readonly _globalRippleOptions?: RippleGlobalOptions | undefined;
  61. /** The active portion of the slider track. */
  62. _trackActive: ElementRef<HTMLElement>;
  63. /** The slider thumb(s). */
  64. _thumbs: QueryList<_MatSliderVisualThumb>;
  65. /** The sliders hidden range input(s). */
  66. _input: _MatSliderThumb;
  67. /** The sliders hidden range input(s). */
  68. _inputs: QueryList<_MatSliderRangeThumb>;
  69. /** Whether the slider is disabled. */
  70. get disabled(): boolean;
  71. set disabled(v: BooleanInput);
  72. private _disabled;
  73. /** Whether the slider displays a numeric value label upon pressing the thumb. */
  74. get discrete(): boolean;
  75. set discrete(v: BooleanInput);
  76. private _discrete;
  77. /** Whether the slider displays tick marks along the slider track. */
  78. get showTickMarks(): boolean;
  79. set showTickMarks(v: BooleanInput);
  80. private _showTickMarks;
  81. /** The minimum value that the slider can have. */
  82. get min(): number;
  83. set min(v: NumberInput);
  84. private _min;
  85. private _updateMin;
  86. private _updateMinRange;
  87. private _updateMinNonRange;
  88. /** The maximum value that the slider can have. */
  89. get max(): number;
  90. set max(v: NumberInput);
  91. private _max;
  92. private _updateMax;
  93. private _updateMaxRange;
  94. private _updateMaxNonRange;
  95. /** The values at which the thumb will snap. */
  96. get step(): number;
  97. set step(v: NumberInput);
  98. private _step;
  99. private _updateStep;
  100. private _updateStepRange;
  101. private _updateStepNonRange;
  102. /**
  103. * Function that will be used to format the value before it is displayed
  104. * in the thumb label. Can be used to format very large number in order
  105. * for them to fit into the slider thumb.
  106. */
  107. displayWith: (value: number) => string;
  108. /** Used to keep track of & render the active & inactive tick marks on the slider track. */
  109. _tickMarks: _MatTickMark[];
  110. /** Whether animations have been disabled. */
  111. _noopAnimations: boolean;
  112. /** Subscription to changes to the directionality (LTR / RTL) context for the application. */
  113. private _dirChangeSubscription;
  114. /** Observer used to monitor size changes in the slider. */
  115. private _resizeObserver;
  116. _cachedWidth: number;
  117. _cachedLeft: number;
  118. _rippleRadius: number;
  119. /** @docs-private */
  120. protected startValueIndicatorText: string;
  121. /** @docs-private */
  122. protected endValueIndicatorText: string;
  123. _endThumbTransform: string;
  124. _startThumbTransform: string;
  125. _isRange: boolean;
  126. /** Whether the slider is rtl. */
  127. _isRtl: boolean;
  128. private _hasViewInitialized;
  129. /**
  130. * The width of the tick mark track.
  131. * The tick mark track width is different from full track width
  132. */
  133. _tickMarkTrackWidth: number;
  134. _hasAnimation: boolean;
  135. private _resizeTimer;
  136. constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, _platform: Platform, elementRef: ElementRef<HTMLElement>, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
  137. /** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
  138. _knobRadius: number;
  139. _inputPadding: number;
  140. _inputOffset: number;
  141. ngAfterViewInit(): void;
  142. private _initUINonRange;
  143. private _initUIRange;
  144. ngOnDestroy(): void;
  145. /** Handles updating the slider ui after a dir change. */
  146. private _onDirChange;
  147. private _onDirChangeRange;
  148. private _onDirChangeNonRange;
  149. /** Starts observing and updating the slider if the host changes its size. */
  150. private _observeHostResize;
  151. /** Whether any of the thumbs are currently active. */
  152. private _isActive;
  153. private _getValue;
  154. private _skipUpdate;
  155. /** Stores the slider dimensions. */
  156. _updateDimensions(): void;
  157. /** Sets the styles for the active portion of the track. */
  158. _setTrackActiveStyles(styles: {
  159. left: string;
  160. right: string;
  161. transform: string;
  162. transformOrigin: string;
  163. }): void;
  164. /** Returns the translateX positioning for a tick mark based on it's index. */
  165. _calcTickMarkTransform(index: number): string;
  166. _onTranslateXChange(source: _MatSliderThumb): void;
  167. _onTranslateXChangeBySideEffect(input1: _MatSliderRangeThumb, input2: _MatSliderRangeThumb): void;
  168. _onValueChange(source: _MatSliderThumb): void;
  169. _onMinMaxOrStepChange(): void;
  170. _onResize(): void;
  171. /** Whether or not the slider thumbs overlap. */
  172. private _thumbsOverlap;
  173. /** Returns true if the slider knobs are overlapping one another. */
  174. private _areThumbsOverlapping;
  175. /**
  176. * Updates the class names of overlapping slider thumbs so
  177. * that the current active thumb is styled to be on "top".
  178. */
  179. private _updateOverlappingThumbClassNames;
  180. /** Updates the UI of slider thumbs when they begin or stop overlapping. */
  181. private _updateOverlappingThumbUI;
  182. /** Updates the translateX of the given thumb. */
  183. _updateThumbUI(source: _MatSliderThumb): void;
  184. /** Updates the value indicator tooltip ui for the given thumb. */
  185. _updateValueIndicatorUI(source: _MatSliderThumb): void;
  186. /** Updates all value indicator UIs in the slider. */
  187. private _updateValueIndicatorUIs;
  188. /** Updates the width of the tick mark track. */
  189. private _updateTickMarkTrackUI;
  190. /** Updates the scale on the active portion of the track. */
  191. _updateTrackUI(source: _MatSliderThumb): void;
  192. private _updateTrackUIRange;
  193. private _updateTrackUINonRange;
  194. /** Updates the dots along the slider track. */
  195. _updateTickMarkUI(): void;
  196. private _updateTickMarkUINonRange;
  197. private _updateTickMarkUIRange;
  198. /** Gets the slider thumb input of the given thumb position. */
  199. _getInput(thumbPosition: _MatThumb): _MatSliderThumb | _MatSliderRangeThumb | undefined;
  200. /** Gets the slider thumb HTML input element of the given thumb position. */
  201. _getThumb(thumbPosition: _MatThumb): _MatSliderVisualThumb;
  202. _setTransition(withAnimation: boolean): void;
  203. static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
  204. static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "discrete": { "alias": "discrete"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, {}, ["_input", "_inputs"], ["*"], false, never>;
  205. }
  206. declare interface _MatSlider {
  207. /** Gets the slider thumb input of the given thumb position. */
  208. _getInput(thumbPosition: _MatThumb): _MatSliderThumb | _MatSliderRangeThumb | undefined;
  209. /** Gets the slider thumb HTML input element of the given thumb position. */
  210. _getThumb(thumbPosition: _MatThumb): _MatSliderVisualThumb;
  211. /** The minimum value that the slider can have. */
  212. min: number;
  213. /** The maximum value that the slider can have. */
  214. max: number;
  215. /** The amount that slider values can increment or decrement by. */
  216. step: number;
  217. /** Whether the slider is disabled. */
  218. disabled: boolean;
  219. /** Whether the slider is a range slider. */
  220. _isRange: boolean;
  221. /** Whether the slider is rtl. */
  222. _isRtl: boolean;
  223. /** The stored width of the host element's bounding client rect. */
  224. _cachedWidth: number;
  225. /** The stored width of the host element's bounding client rect. */
  226. _cachedLeft: number;
  227. /**
  228. * The padding of the native slider input. This is added in order to make the region where the
  229. * thumb ripple extends past the end of the slider track clickable.
  230. */
  231. _inputPadding: number;
  232. /**
  233. * The offset represents left most translateX of the slider knob. Inversely,
  234. * (slider width - offset) = the right most translateX of the slider knob.
  235. *
  236. * Note:
  237. * * The native slider knob differs from the visual slider. It's knob cannot slide past
  238. * the end of the track AT ALL.
  239. * * The visual slider knob CAN slide past the end of the track slightly. It's knob can slide
  240. * past the end of the track such that it's center lines up with the end of the track.
  241. */
  242. _inputOffset: number;
  243. /** The radius of the visual slider's ripple. */
  244. _rippleRadius: number;
  245. /** The global configuration for `matRipple` instances. */
  246. readonly _globalRippleOptions?: RippleGlobalOptions;
  247. /** Whether animations have been disabled. */
  248. _noopAnimations: boolean;
  249. /** Whether or not the slider should use animations. */
  250. _hasAnimation: boolean;
  251. /** Triggers UI updates that are needed after a slider input value has changed. */
  252. _onValueChange: (source: _MatSliderThumb) => void;
  253. /** Triggers UI updates that are needed after the slider thumb position has changed. */
  254. _onTranslateXChange: (source: _MatSliderThumb) => void;
  255. /** Updates the stored slider dimensions using the current bounding client rect. */
  256. _updateDimensions: () => void;
  257. /** Used to set the transition duration for thumb and track animations. */
  258. _setTransition: (withAnimation: boolean) => void;
  259. }
  260. /**
  261. * A simple change event emitted by the MatSlider component.
  262. * @deprecated Use event bindings directly on the MatSliderThumbs for `change` and `input` events. See https://material.angular.io/guide/mdc-migration for information about migrating.
  263. * @breaking-change 17.0.0
  264. */
  265. export declare class MatSliderChange {
  266. /** The MatSliderThumb that was interacted with. */
  267. source: _MatSliderThumb;
  268. /** The MatSlider that was interacted with. */
  269. parent: _MatSlider;
  270. /** The new value of the source slider. */
  271. value: number;
  272. }
  273. /** Represents a drag event emitted by the MatSlider component. */
  274. export declare interface MatSliderDragEvent {
  275. /** The MatSliderThumb that was interacted with. */
  276. source: _MatSliderThumb;
  277. /** The MatSlider that was interacted with. */
  278. parent: _MatSlider;
  279. /** The current value of the slider. */
  280. value: number;
  281. }
  282. declare const _MatSliderMixinBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & {
  283. new (_elementRef: ElementRef<HTMLElement>): {
  284. _elementRef: ElementRef<HTMLElement>;
  285. };
  286. };
  287. export declare class MatSliderModule {
  288. static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderModule, never>;
  289. static ɵmod: i0.ɵɵNgModuleDeclaration<MatSliderModule, [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb, typeof i3.MatSliderVisualThumb], [typeof i4.MatCommonModule, typeof i5.CommonModule, typeof i4.MatRippleModule], [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb]>;
  290. static ɵinj: i0.ɵɵInjectorDeclaration<MatSliderModule>;
  291. }
  292. export declare class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRangeThumb {
  293. readonly _cdr: ChangeDetectorRef;
  294. /** @docs-private */
  295. getSibling(): _MatSliderRangeThumb | undefined;
  296. private _sibling;
  297. /**
  298. * Returns the minimum translateX position allowed for this slider input's visual thumb.
  299. * @docs-private
  300. */
  301. getMinPos(): number;
  302. /**
  303. * Returns the maximum translateX position allowed for this slider input's visual thumb.
  304. * @docs-private
  305. */
  306. getMaxPos(): number;
  307. _setIsLeftThumb(): void;
  308. /** Whether this slider corresponds to the input on the left hand side. */
  309. _isLeftThumb: boolean;
  310. /** Whether this slider corresponds to the input with greater value. */
  311. _isEndThumb: boolean;
  312. constructor(_ngZone: NgZone, _slider: _MatSlider, _elementRef: ElementRef<HTMLInputElement>, _cdr: ChangeDetectorRef);
  313. _getDefaultValue(): number;
  314. _onInput(): void;
  315. _onNgControlValueChange(): void;
  316. _onPointerDown(event: PointerEvent): void;
  317. _onPointerUp(): void;
  318. _onPointerMove(event: PointerEvent): void;
  319. _fixValue(event: PointerEvent): void;
  320. _clamp(v: number): number;
  321. _updateMinMax(): void;
  322. _updateWidthActive(): void;
  323. _updateWidthInactive(): void;
  324. _updateStaticStyles(): void;
  325. private _updateSibling;
  326. /**
  327. * Sets the input's value.
  328. * @param value The new value of the input
  329. * @docs-private
  330. */
  331. writeValue(value: any): void;
  332. static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderRangeThumb, never>;
  333. static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderRangeThumb, "input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderRangeThumb"], {}, {}, never, never, false, never>;
  334. }
  335. declare interface _MatSliderRangeThumb extends _MatSliderThumb {
  336. /** Whether this slider corresponds to the input on the left hand side. */
  337. _isLeftThumb: boolean;
  338. /**
  339. * Gets the sibling MatSliderRangeThumb.
  340. * Returns undefined if it is too early in Angular's life cycle.
  341. */
  342. getSibling: () => _MatSliderRangeThumb | undefined;
  343. /** Used to cache whether this slider input corresponds to the visual left thumb. */
  344. _setIsLeftThumb: () => void;
  345. /** Updates the input styles to control whether it is pinned to the start or end of the mat-slider. */
  346. _updateStaticStyles: () => void;
  347. /** Updates the min and max properties of this slider input according to it's sibling. */
  348. _updateMinMax: () => void;
  349. }
  350. /**
  351. * Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
  352. * Up to two may be placed inside of a `<mat-slider>`.
  353. *
  354. * If one is used, the selector `matSliderThumb` must be used, and the outcome will be a normal
  355. * slider. If two are used, the selectors `matSliderStartThumb` and `matSliderEndThumb` must be
  356. * used, and the outcome will be a range slider with two slider thumbs.
  357. */
  358. export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueAccessor {
  359. readonly _ngZone: NgZone;
  360. readonly _elementRef: ElementRef<HTMLInputElement>;
  361. readonly _cdr: ChangeDetectorRef;
  362. protected _slider: _MatSlider;
  363. get value(): number;
  364. set value(v: NumberInput);
  365. /** Event emitted when the `value` is changed. */
  366. readonly valueChange: EventEmitter<number>;
  367. /** Event emitted when the slider thumb starts being dragged. */
  368. readonly dragStart: EventEmitter<MatSliderDragEvent>;
  369. /** Event emitted when the slider thumb stops being dragged. */
  370. readonly dragEnd: EventEmitter<MatSliderDragEvent>;
  371. /**
  372. * The current translateX in px of the slider visual thumb.
  373. * @docs-private
  374. */
  375. get translateX(): number;
  376. set translateX(v: number);
  377. private _translateX;
  378. /**
  379. * Indicates whether this thumb is the start or end thumb.
  380. * @docs-private
  381. */
  382. thumbPosition: _MatThumb;
  383. /** @docs-private */
  384. get min(): number;
  385. set min(v: NumberInput);
  386. /** @docs-private */
  387. get max(): number;
  388. set max(v: NumberInput);
  389. get step(): number;
  390. set step(v: NumberInput);
  391. /** @docs-private */
  392. get disabled(): boolean;
  393. set disabled(v: BooleanInput);
  394. /** The percentage of the slider that coincides with the value. */
  395. get percentage(): number;
  396. /** @docs-private */
  397. get fillPercentage(): number;
  398. /** The host native HTML input element. */
  399. _hostElement: HTMLInputElement;
  400. /** The aria-valuetext string representation of the input's value. */
  401. _valuetext: string;
  402. /** The radius of a native html slider's knob. */
  403. _knobRadius: number;
  404. /** Whether user's cursor is currently in a mouse down state on the input. */
  405. _isActive: boolean;
  406. /** Whether the input is currently focused (either by tab or after clicking). */
  407. _isFocused: boolean;
  408. /** Used to relay updates to _isFocused to the slider visual thumbs. */
  409. private _setIsFocused;
  410. /**
  411. * Whether the initial value has been set.
  412. * This exists because the initial value cannot be immediately set because the min and max
  413. * must first be relayed from the parent MatSlider component, which can only happen later
  414. * in the component lifecycle.
  415. */
  416. private _hasSetInitialValue;
  417. /** The stored initial value. */
  418. _initialValue: string | undefined;
  419. /** Defined when a user is using a form control to manage slider value & validation. */
  420. private _formControl;
  421. /** Emits when the component is destroyed. */
  422. protected readonly _destroyed: Subject<void>;
  423. /**
  424. * Indicates whether UI updates should be skipped.
  425. *
  426. * This flag is used to avoid flickering
  427. * when correcting values on pointer up/down.
  428. */
  429. _skipUIUpdate: boolean;
  430. /** Callback called when the slider input value changes. */
  431. protected _onChangeFn: ((value: any) => void) | undefined;
  432. /** Callback called when the slider input has been touched. */
  433. private _onTouchedFn;
  434. /**
  435. * Whether the NgModel has been initialized.
  436. *
  437. * This flag is used to ignore ghost null calls to
  438. * writeValue which can break slider initialization.
  439. *
  440. * See https://github.com/angular/angular/issues/14988.
  441. */
  442. protected _isControlInitialized: boolean;
  443. constructor(_ngZone: NgZone, _elementRef: ElementRef<HTMLInputElement>, _cdr: ChangeDetectorRef, _slider: _MatSlider);
  444. ngOnDestroy(): void;
  445. /** @docs-private */
  446. initProps(): void;
  447. /** @docs-private */
  448. initUI(): void;
  449. _initValue(): void;
  450. _getDefaultValue(): number;
  451. _onBlur(): void;
  452. _onFocus(): void;
  453. _onChange(): void;
  454. _onInput(): void;
  455. _onNgControlValueChange(): void;
  456. _onPointerDown(event: PointerEvent): void;
  457. /**
  458. * Corrects the value of the slider on pointer up/down.
  459. *
  460. * Called on pointer down and up because the value is set based
  461. * on the inactive width instead of the active width.
  462. */
  463. private _handleValueCorrection;
  464. /** Corrects the value of the slider based on the pointer event's position. */
  465. _fixValue(event: PointerEvent): void;
  466. _onPointerMove(event: PointerEvent): void;
  467. _onPointerUp(): void;
  468. _clamp(v: number): number;
  469. _calcTranslateXByValue(): number;
  470. _calcTranslateXByPointerEvent(event: PointerEvent): number;
  471. /**
  472. * Used to set the slider width to the correct
  473. * dimensions while the user is dragging.
  474. */
  475. _updateWidthActive(): void;
  476. /**
  477. * Sets the slider input to disproportionate dimensions to allow for touch
  478. * events to be captured on touch devices.
  479. */
  480. _updateWidthInactive(): void;
  481. _updateThumbUIByValue(options?: {
  482. withAnimation: boolean;
  483. }): void;
  484. _updateThumbUIByPointerEvent(event: PointerEvent, options?: {
  485. withAnimation: boolean;
  486. }): void;
  487. _updateThumbUI(options?: {
  488. withAnimation: boolean;
  489. }): void;
  490. /**
  491. * Sets the input's value.
  492. * @param value The new value of the input
  493. * @docs-private
  494. */
  495. writeValue(value: any): void;
  496. /**
  497. * Registers a callback to be invoked when the input's value changes from user input.
  498. * @param fn The callback to register
  499. * @docs-private
  500. */
  501. registerOnChange(fn: any): void;
  502. /**
  503. * Registers a callback to be invoked when the input is blurred by the user.
  504. * @param fn The callback to register
  505. * @docs-private
  506. */
  507. registerOnTouched(fn: any): void;
  508. /**
  509. * Sets the disabled state of the slider.
  510. * @param isDisabled The new disabled state
  511. * @docs-private
  512. */
  513. setDisabledState(isDisabled: boolean): void;
  514. focus(): void;
  515. blur(): void;
  516. static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderThumb, never>;
  517. static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb]", ["matSliderThumb"], { "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, never, never, false, never>;
  518. }
  519. declare interface _MatSliderThumb {
  520. /** The minimum value that the slider can have. */
  521. min: number;
  522. /** The maximum value that the slider can have. */
  523. max: number;
  524. /** The amount that slider values can increment or decrement by. */
  525. step: number;
  526. /** The current value of this slider input. */
  527. value: number;
  528. /** The current translateX in px of the slider visual thumb. */
  529. translateX: number;
  530. /** Indicates whether this thumb is the start or end thumb. */
  531. thumbPosition: _MatThumb;
  532. /** Similar to percentage but calcualted using translateX relative to the total track width. */
  533. fillPercentage: number;
  534. /** Whether the slider is disabled. */
  535. disabled: boolean;
  536. /** The host native HTML input element. */
  537. _hostElement: HTMLInputElement;
  538. /** Whether the input is currently focused (either by tab or after clicking). */
  539. _isFocused: boolean;
  540. /** The aria-valuetext string representation of the input's value. */
  541. _valuetext: string;
  542. /**
  543. * Indicates whether UI updates should be skipped.
  544. *
  545. * This flag is used to avoid flickering
  546. * when correcting values on pointer up/down.
  547. */
  548. _skipUIUpdate: boolean;
  549. /** Handles the initialization of properties for the slider input. */
  550. initProps: () => void;
  551. /** Handles UI initialization controlled by this slider input. */
  552. initUI: () => void;
  553. /** Calculates the visual thumb's translateX based on the slider input's current value. */
  554. _calcTranslateXByValue: () => number;
  555. /** Updates the visual thumb based on the slider input's current value. */
  556. _updateThumbUIByValue: () => void;
  557. /**
  558. * Sets the slider input to disproportionate dimensions to allow for touch
  559. * events to be captured on touch devices.
  560. */
  561. _updateWidthInactive: () => void;
  562. /**
  563. * Used to set the slider width to the correct
  564. * dimensions while the user is dragging.
  565. */
  566. _updateWidthActive: () => void;
  567. }
  568. /**
  569. * The visual slider thumb.
  570. *
  571. * Handles the slider thumb ripple states (hover, focus, and active),
  572. * and displaying the value tooltip on discrete sliders.
  573. * @docs-private
  574. */
  575. export declare class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewInit, OnDestroy {
  576. readonly _cdr: ChangeDetectorRef;
  577. private readonly _ngZone;
  578. private _slider;
  579. /** Whether the slider displays a numeric value label upon pressing the thumb. */
  580. discrete: boolean;
  581. /** Indicates which slider thumb this input corresponds to. */
  582. thumbPosition: _MatThumb;
  583. /** The display value of the slider thumb. */
  584. valueIndicatorText: string;
  585. /** The MatRipple for this slider thumb. */
  586. readonly _ripple: MatRipple;
  587. /** The slider thumb knob. */
  588. _knob: ElementRef<HTMLElement>;
  589. /** The slider thumb value indicator container. */
  590. _valueIndicatorContainer: ElementRef<HTMLElement>;
  591. /** The slider input corresponding to this slider thumb. */
  592. private _sliderInput;
  593. /** The native html element of the slider input corresponding to this thumb. */
  594. private _sliderInputEl;
  595. /** The RippleRef for the slider thumbs hover state. */
  596. private _hoverRippleRef;
  597. /** The RippleRef for the slider thumbs focus state. */
  598. private _focusRippleRef;
  599. /** The RippleRef for the slider thumbs active state. */
  600. private _activeRippleRef;
  601. /** Whether the slider thumb is currently being hovered. */
  602. private _isHovered;
  603. /** Whether the slider thumb is currently being pressed. */
  604. _isActive: boolean;
  605. /** Whether the value indicator tooltip is visible. */
  606. _isValueIndicatorVisible: boolean;
  607. /** The host native HTML input element. */
  608. _hostElement: HTMLElement;
  609. constructor(_cdr: ChangeDetectorRef, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _slider: _MatSlider);
  610. ngAfterViewInit(): void;
  611. ngOnDestroy(): void;
  612. private _onPointerMove;
  613. private _onMouseLeave;
  614. private _onFocus;
  615. private _onBlur;
  616. private _onDragStart;
  617. private _onDragEnd;
  618. /** Handles displaying the hover ripple. */
  619. private _showHoverRipple;
  620. /** Handles displaying the focus ripple. */
  621. private _showFocusRipple;
  622. /** Handles displaying the active ripple. */
  623. private _showActiveRipple;
  624. /** Whether the given rippleRef is currently fading in or visible. */
  625. private _isShowingRipple;
  626. /** Manually launches the slider thumb ripple using the specified ripple animation config. */
  627. private _showRipple;
  628. /**
  629. * Fades out the given ripple.
  630. * Also hides the value indicator if no ripple is showing.
  631. */
  632. private _hideRipple;
  633. /** Shows the value indicator ui. */
  634. _showValueIndicator(): void;
  635. /** Hides the value indicator ui. */
  636. _hideValueIndicator(): void;
  637. _getSibling(): _MatSliderVisualThumb;
  638. /** Gets the value indicator container's native HTML element. */
  639. _getValueIndicatorContainer(): HTMLElement | undefined;
  640. /** Gets the native HTML element of the slider thumb knob. */
  641. _getKnob(): HTMLElement;
  642. _isShowingAnyRipple(): boolean;
  643. private _isSliderThumbHovered;
  644. static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderVisualThumb, never>;
  645. static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": { "alias": "discrete"; "required": false; }; "thumbPosition": { "alias": "thumbPosition"; "required": false; }; "valueIndicatorText": { "alias": "valueIndicatorText"; "required": false; }; }, {}, never, never, false, never>;
  646. }
  647. declare interface _MatSliderVisualThumb {
  648. /** The MatRipple for this slider thumb. */
  649. _ripple: MatRipple;
  650. /** Whether the slider thumb is currently being pressed. */
  651. _isActive: boolean;
  652. /** The host native HTML input element. */
  653. _hostElement: HTMLElement;
  654. /** Shows the value indicator ui. */
  655. _showValueIndicator: () => void;
  656. /** Hides the value indicator ui. */
  657. _hideValueIndicator: () => void;
  658. /** Whether the slider visual thumb is currently showing any ripple. */
  659. _isShowingAnyRipple: () => boolean;
  660. }
  661. /**
  662. * Thumb types: range slider has two thumbs (START, END) whereas single point
  663. * slider only has one thumb (END).
  664. */
  665. declare const enum _MatThumb {
  666. START = 1,
  667. END = 2
  668. }
  669. /** Tick mark enum, for discrete sliders. */
  670. declare const enum _MatTickMark {
  671. ACTIVE = 0,
  672. INACTIVE = 1
  673. }
  674. export { }