Class MatRippleLoader

src/material/core/private/ripple-loader.ts:59–226

 */
@Service()
export class MatRippleLoader implements OnDestroy {
  private _document = inject(DOCUMENT);
  private _animationsDisabled = _animationsDisabled();
  private _globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {optional: true});
  private _platform = inject(Platform);
  private _ngZone = inject(NgZone);
  private _injector = inject(Injector);
  private _eventCleanups: (() => void)[];
  private _hosts = new Map<
    HTMLElement,
    {renderer: RippleRenderer; target: RippleTarget; hasSetUpEvents: boolean}
  >();

  constructor() {
    const renderer = inject(RendererFactory2).createRenderer(null, null);

    this._eventCleanups = this._ngZone.runOutsideAngular(() =>
      rippleInteractionEvents.map(name =>
        renderer.listen(this._document, name, this._onInteraction, eventListenerOptions),
      ),
    );
  }

  ngOnDestroy(): void {
    const hosts = this._hosts.keys();

    for (const host of hosts) {
      this.destroyRipple(host);
    }

    this._eventCleanups.forEach(cleanup => cleanup());
  }

  /**
   * Configures the ripple that will be rendered by the ripple loader.
   *
   * Stores the given information about how the ripple should be configured on the host
   * element so that it can later be retrived & used when the ripple is actually created.
   */
  configureRipple(
    host: HTMLElement,
    config: {
      className?: string;
      centered?: boolean;
      disabled?: boolean;
    },
  ): void {
    // Indicates that the ripple has not yet been rendered for this component.
    host.setAttribute(matRippleUninitialized, this._globalRippleOptions?.namespace ?? '');

    // Store the additional class name(s) that should be added to the ripple element.
    if (config.className || !host.hasAttribute(matRippleClassName)) {
      host.setAttribute(matRippleClassName, config.className || '');
    }

    // Store whether the ripple should be centered.
    if (config.centered) {
      host.setAttribute(matRippleCentered, '');