ripple.d-BxTUZJt7.d.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. import * as i0 from '@angular/core';
  2. import { NgZone, ElementRef, Injector, InjectionToken, OnInit, OnDestroy } from '@angular/core';
  3. import { Platform } from '@angular/cdk/platform';
  4. /** Possible states for a ripple element. */
  5. declare enum RippleState {
  6. FADING_IN = 0,
  7. VISIBLE = 1,
  8. FADING_OUT = 2,
  9. HIDDEN = 3
  10. }
  11. type RippleConfig = {
  12. color?: string;
  13. centered?: boolean;
  14. radius?: number;
  15. persistent?: boolean;
  16. animation?: RippleAnimationConfig;
  17. terminateOnPointerUp?: boolean;
  18. };
  19. /**
  20. * Interface that describes the configuration for the animation of a ripple.
  21. * There are two animation phases with different durations for the ripples.
  22. */
  23. interface RippleAnimationConfig {
  24. /** Duration in milliseconds for the enter animation (expansion from point of contact). */
  25. enterDuration?: number;
  26. /** Duration in milliseconds for the exit animation (fade-out). */
  27. exitDuration?: number;
  28. }
  29. /**
  30. * Reference to a previously launched ripple element.
  31. */
  32. declare class RippleRef {
  33. private _renderer;
  34. /** Reference to the ripple HTML element. */
  35. element: HTMLElement;
  36. /** Ripple configuration used for the ripple. */
  37. config: RippleConfig;
  38. _animationForciblyDisabledThroughCss: boolean;
  39. /** Current state of the ripple. */
  40. state: RippleState;
  41. constructor(_renderer: {
  42. fadeOutRipple(ref: RippleRef): void;
  43. },
  44. /** Reference to the ripple HTML element. */
  45. element: HTMLElement,
  46. /** Ripple configuration used for the ripple. */
  47. config: RippleConfig, _animationForciblyDisabledThroughCss?: boolean);
  48. /** Fades out the ripple element. */
  49. fadeOut(): void;
  50. }
  51. /**
  52. * Interface that describes the target for launching ripples.
  53. * It defines the ripple configuration and disabled state for interaction ripples.
  54. * @docs-private
  55. */
  56. interface RippleTarget {
  57. /** Configuration for ripples that are launched on pointer down. */
  58. rippleConfig: RippleConfig;
  59. /** Whether ripples on pointer down should be disabled. */
  60. rippleDisabled: boolean;
  61. }
  62. /**
  63. * Default ripple animation configuration for ripples without an explicit
  64. * animation config specified.
  65. */
  66. declare const defaultRippleAnimationConfig: {
  67. enterDuration: number;
  68. exitDuration: number;
  69. };
  70. /**
  71. * Helper service that performs DOM manipulations. Not intended to be used outside this module.
  72. * The constructor takes a reference to the ripple directive's host element and a map of DOM
  73. * event handlers to be installed on the element that triggers ripple animations.
  74. * This will eventually become a custom renderer once Angular support exists.
  75. * @docs-private
  76. */
  77. declare class RippleRenderer implements EventListenerObject {
  78. private _target;
  79. private _ngZone;
  80. private _platform;
  81. /** Element where the ripples are being added to. */
  82. private _containerElement;
  83. /** Element which triggers the ripple elements on mouse events. */
  84. private _triggerElement;
  85. /** Whether the pointer is currently down or not. */
  86. private _isPointerDown;
  87. /**
  88. * Map of currently active ripple references.
  89. * The ripple reference is mapped to its element event listeners.
  90. * The reason why `| null` is used is that event listeners are added only
  91. * when the condition is truthy (see the `_startFadeOutTransition` method).
  92. */
  93. private _activeRipples;
  94. /** Latest non-persistent ripple that was triggered. */
  95. private _mostRecentTransientRipple;
  96. /** Time in milliseconds when the last touchstart event happened. */
  97. private _lastTouchStartEvent;
  98. /** Whether pointer-up event listeners have been registered. */
  99. private _pointerUpEventsRegistered;
  100. /**
  101. * Cached dimensions of the ripple container. Set when the first
  102. * ripple is shown and cleared once no more ripples are visible.
  103. */
  104. private _containerRect;
  105. private static _eventManager;
  106. constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, _platform: Platform, injector?: Injector);
  107. /**
  108. * Fades in a ripple at the given coordinates.
  109. * @param x Coordinate within the element, along the X axis at which to start the ripple.
  110. * @param y Coordinate within the element, along the Y axis at which to start the ripple.
  111. * @param config Extra ripple options.
  112. */
  113. fadeInRipple(x: number, y: number, config?: RippleConfig): RippleRef;
  114. /** Fades out a ripple reference. */
  115. fadeOutRipple(rippleRef: RippleRef): void;
  116. /** Fades out all currently active ripples. */
  117. fadeOutAll(): void;
  118. /** Fades out all currently active non-persistent ripples. */
  119. fadeOutAllNonPersistent(): void;
  120. /** Sets up the trigger event listeners */
  121. setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;
  122. /**
  123. * Handles all registered events.
  124. * @docs-private
  125. */
  126. handleEvent(event: Event): void;
  127. /** Method that will be called if the fade-in or fade-in transition completed. */
  128. private _finishRippleTransition;
  129. /**
  130. * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
  131. * is not held down anymore.
  132. */
  133. private _startFadeOutTransition;
  134. /** Destroys the given ripple by removing it from the DOM and updating its state. */
  135. private _destroyRipple;
  136. /** Function being called whenever the trigger is being pressed using mouse. */
  137. private _onMousedown;
  138. /** Function being called whenever the trigger is being pressed using touch. */
  139. private _onTouchStart;
  140. /** Function being called whenever the trigger is being released. */
  141. private _onPointerUp;
  142. private _getActiveRipples;
  143. /** Removes previously registered event listeners from the trigger element. */
  144. _removeTriggerEvents(): void;
  145. }
  146. /** Configurable options for `matRipple`. */
  147. interface RippleGlobalOptions {
  148. /**
  149. * Whether ripples should be disabled. Ripples can be still launched manually by using
  150. * the `launch()` method. Therefore focus indicators will still show up.
  151. */
  152. disabled?: boolean;
  153. /**
  154. * Default configuration for the animation duration of the ripples. There are two phases with
  155. * different durations for the ripples: `enter` and `leave`. The durations will be overwritten
  156. * by the value of `matRippleAnimation` or if the `NoopAnimationsModule` is included.
  157. */
  158. animation?: RippleAnimationConfig;
  159. /**
  160. * Whether ripples should start fading out immediately after the mouse or touch is released. By
  161. * default, ripples will wait for the enter animation to complete and for mouse or touch release.
  162. */
  163. terminateOnPointerUp?: boolean;
  164. /**
  165. * A namespace to use for ripple loader to allow multiple instances to exist on the same page.
  166. */
  167. namespace?: string;
  168. }
  169. /** Injection token that can be used to specify the global ripple options. */
  170. declare const MAT_RIPPLE_GLOBAL_OPTIONS: InjectionToken<RippleGlobalOptions>;
  171. declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
  172. private _elementRef;
  173. private _animationMode;
  174. /** Custom color for all ripples. */
  175. color: string;
  176. /** Whether the ripples should be visible outside the component's bounds. */
  177. unbounded: boolean;
  178. /**
  179. * Whether the ripple always originates from the center of the host element's bounds, rather
  180. * than originating from the location of the click event.
  181. */
  182. centered: boolean;
  183. /**
  184. * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
  185. * will be the distance from the center of the ripple to the furthest corner of the host element's
  186. * bounding rectangle.
  187. */
  188. radius: number;
  189. /**
  190. * Configuration for the ripple animation. Allows modifying the enter and exit animation
  191. * duration of the ripples. The animation durations will be overwritten if the
  192. * `NoopAnimationsModule` is being used.
  193. */
  194. animation: RippleAnimationConfig;
  195. /**
  196. * Whether click events will not trigger the ripple. Ripples can be still launched manually
  197. * by using the `launch()` method.
  198. */
  199. get disabled(): boolean;
  200. set disabled(value: boolean);
  201. private _disabled;
  202. /**
  203. * The element that triggers the ripple when click events are received.
  204. * Defaults to the directive's host element.
  205. */
  206. get trigger(): HTMLElement;
  207. set trigger(trigger: HTMLElement);
  208. private _trigger;
  209. /** Renderer for the ripple DOM manipulations. */
  210. private _rippleRenderer;
  211. /** Options that are set globally for all ripples. */
  212. private _globalOptions;
  213. /** @docs-private Whether ripple directive is initialized and the input bindings are set. */
  214. _isInitialized: boolean;
  215. constructor(...args: unknown[]);
  216. ngOnInit(): void;
  217. ngOnDestroy(): void;
  218. /** Fades out all currently showing ripple elements. */
  219. fadeOutAll(): void;
  220. /** Fades out all currently showing non-persistent ripple elements. */
  221. fadeOutAllNonPersistent(): void;
  222. /**
  223. * Ripple configuration from the directive's input values.
  224. * @docs-private Implemented as part of RippleTarget
  225. */
  226. get rippleConfig(): RippleConfig;
  227. /**
  228. * Whether ripples on pointer-down are disabled or not.
  229. * @docs-private Implemented as part of RippleTarget
  230. */
  231. get rippleDisabled(): boolean;
  232. /** Sets up the trigger event listeners if ripples are enabled. */
  233. private _setupTriggerEventsIfEnabled;
  234. /**
  235. * Launches a manual ripple using the specified ripple configuration.
  236. * @param config Configuration for the manual ripple.
  237. */
  238. launch(config: RippleConfig): RippleRef;
  239. /**
  240. * Launches a manual ripple at the specified coordinates relative to the viewport.
  241. * @param x Coordinate along the X axis at which to fade-in the ripple. Coordinate
  242. * should be relative to the viewport.
  243. * @param y Coordinate along the Y axis at which to fade-in the ripple. Coordinate
  244. * should be relative to the viewport.
  245. * @param config Optional ripple configuration for the manual ripple.
  246. */
  247. launch(x: number, y: number, config?: RippleConfig): RippleRef;
  248. static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, never>;
  249. static ɵdir: i0.ɵɵDirectiveDeclaration<MatRipple, "[mat-ripple], [matRipple]", ["matRipple"], { "color": { "alias": "matRippleColor"; "required": false; }; "unbounded": { "alias": "matRippleUnbounded"; "required": false; }; "centered": { "alias": "matRippleCentered"; "required": false; }; "radius": { "alias": "matRippleRadius"; "required": false; }; "animation": { "alias": "matRippleAnimation"; "required": false; }; "disabled": { "alias": "matRippleDisabled"; "required": false; }; "trigger": { "alias": "matRippleTrigger"; "required": false; }; }, {}, never, never, true, never>;
  250. }
  251. export { MatRipple as M, RippleRenderer as a, MAT_RIPPLE_GLOBAL_OPTIONS as c, defaultRippleAnimationConfig as d, RippleState as e, RippleRef as h };
  252. export type { RippleGlobalOptions as R, RippleTarget as b, RippleConfig as f, RippleAnimationConfig as g };