import { normalizePassiveListenerOptions, _getEventTarget, Platform } from '@angular/cdk/platform'; import * as i0 from '@angular/core'; import { Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, ElementRef, ANIMATION_MODULE_TYPE, NgZone, Injector, Directive, Input } from '@angular/core'; import { isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader } from '@angular/cdk/a11y'; import { coerceElement } from '@angular/cdk/coercion'; import { _CdkPrivateStyleLoader } from '@angular/cdk/private'; /** Possible states for a ripple element. */ var RippleState; (function (RippleState) { RippleState[RippleState["FADING_IN"] = 0] = "FADING_IN"; RippleState[RippleState["VISIBLE"] = 1] = "VISIBLE"; RippleState[RippleState["FADING_OUT"] = 2] = "FADING_OUT"; RippleState[RippleState["HIDDEN"] = 3] = "HIDDEN"; })(RippleState || (RippleState = {})); /** * Reference to a previously launched ripple element. */ class RippleRef { _renderer; element; config; _animationForciblyDisabledThroughCss; /** Current state of the ripple. */ state = RippleState.HIDDEN; constructor(_renderer, /** Reference to the ripple HTML element. */ element, /** Ripple configuration used for the ripple. */ config, /* Whether animations are forcibly disabled for ripples through CSS. */ _animationForciblyDisabledThroughCss = false) { this._renderer = _renderer; this.element = element; this.config = config; this._animationForciblyDisabledThroughCss = _animationForciblyDisabledThroughCss; } /** Fades out the ripple element. */ fadeOut() { this._renderer.fadeOutRipple(this); } } /** Options used to bind a passive capturing event. */ const passiveCapturingEventOptions$1 = normalizePassiveListenerOptions({ passive: true, capture: true, }); /** Manages events through delegation so that as few event handlers as possible are bound. */ class RippleEventManager { _events = new Map(); /** Adds an event handler. */ addHandler(ngZone, name, element, handler) { const handlersForEvent = this._events.get(name); if (handlersForEvent) { const handlersForElement = handlersForEvent.get(element); if (handlersForElement) { handlersForElement.add(handler); } else { handlersForEvent.set(element, new Set([handler])); } } else { this._events.set(name, new Map([[element, new Set([handler])]])); ngZone.runOutsideAngular(() => { document.addEventListener(name, this._delegateEventHandler, passiveCapturingEventOptions$1); }); } } /** Removes an event handler. */ removeHandler(name, element, handler) { const handlersForEvent = this._events.get(name); if (!handlersForEvent) { return; } const handlersForElement = handlersForEvent.get(element); if (!handlersForElement) { return; } handlersForElement.delete(handler); if (handlersForElement.size === 0) { handlersForEvent.delete(element); } if (handlersForEvent.size === 0) { this._events.delete(name); document.removeEventListener(name, this._delegateEventHandler, passiveCapturingEventOptions$1); } } /** Event handler that is bound and which dispatches the events to the different targets. */ _delegateEventHandler = (event) => { const target = _getEventTarget(event); if (target) { this._events.get(event.type)?.forEach((handlers, element) => { if (element === target || element.contains(target)) { handlers.forEach(handler => handler.handleEvent(event)); } }); } }; } /** * Default ripple animation configuration for ripples without an explicit * animation config specified. */ const defaultRippleAnimationConfig = { enterDuration: 225, exitDuration: 150, }; /** * Timeout for ignoring mouse events. Mouse events will be temporary ignored after touch * events to avoid synthetic mouse events. */ const ignoreMouseEventsTimeout = 800; /** Options used to bind a passive capturing event. */ const passiveCapturingEventOptions = normalizePassiveListenerOptions({ passive: true, capture: true, }); /** Events that signal that the pointer is down. */ const pointerDownEvents = ['mousedown', 'touchstart']; /** Events that signal that the pointer is up. */ const pointerUpEvents = ['mouseup', 'mouseleave', 'touchend', 'touchcancel']; class _MatRippleStylesLoader { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _MatRippleStylesLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: _MatRippleStylesLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "mat-ripple-style-loader": "" } }, ngImport: i0, template: '', isInline: true, styles: [".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent))}@media(forced-colors: active){.mat-ripple-element{display:none}}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _MatRippleStylesLoader, decorators: [{ type: Component, args: [{ template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'mat-ripple-style-loader': '' }, styles: [".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent))}@media(forced-colors: active){.mat-ripple-element{display:none}}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}\n"] }] }] }); /** * Helper service that performs DOM manipulations. Not intended to be used outside this module. * The constructor takes a reference to the ripple directive's host element and a map of DOM * event handlers to be installed on the element that triggers ripple animations. * This will eventually become a custom renderer once Angular support exists. * @docs-private */ class RippleRenderer { _target; _ngZone; _platform; /** Element where the ripples are being added to. */ _containerElement; /** Element which triggers the ripple elements on mouse events. */ _triggerElement; /** Whether the pointer is currently down or not. */ _isPointerDown = false; /** * Map of currently active ripple references. * The ripple reference is mapped to its element event listeners. * The reason why `| null` is used is that event listeners are added only * when the condition is truthy (see the `_startFadeOutTransition` method). */ _activeRipples = new Map(); /** Latest non-persistent ripple that was triggered. */ _mostRecentTransientRipple; /** Time in milliseconds when the last touchstart event happened. */ _lastTouchStartEvent; /** Whether pointer-up event listeners have been registered. */ _pointerUpEventsRegistered = false; /** * Cached dimensions of the ripple container. Set when the first * ripple is shown and cleared once no more ripples are visible. */ _containerRect; static _eventManager = new RippleEventManager(); constructor(_target, _ngZone, elementOrElementRef, _platform, injector) { this._target = _target; this._ngZone = _ngZone; this._platform = _platform; // Only do anything if we're on the browser. if (_platform.isBrowser) { this._containerElement = coerceElement(elementOrElementRef); } if (injector) { injector.get(_CdkPrivateStyleLoader).load(_MatRippleStylesLoader); } } /** * Fades in a ripple at the given coordinates. * @param x Coordinate within the element, along the X axis at which to start the ripple. * @param y Coordinate within the element, along the Y axis at which to start the ripple. * @param config Extra ripple options. */ fadeInRipple(x, y, config = {}) { const containerRect = (this._containerRect = this._containerRect || this._containerElement.getBoundingClientRect()); const animationConfig = { ...defaultRippleAnimationConfig, ...config.animation }; if (config.centered) { x = containerRect.left + containerRect.width / 2; y = containerRect.top + containerRect.height / 2; } const radius = config.radius || distanceToFurthestCorner(x, y, containerRect); const offsetX = x - containerRect.left; const offsetY = y - containerRect.top; const enterDuration = animationConfig.enterDuration; const ripple = document.createElement('div'); ripple.classList.add('mat-ripple-element'); ripple.style.left = `${offsetX - radius}px`; ripple.style.top = `${offsetY - radius}px`; ripple.style.height = `${radius * 2}px`; ripple.style.width = `${radius * 2}px`; // If a custom color has been specified, set it as inline style. If no color is // set, the default color will be applied through the ripple theme styles. if (config.color != null) { ripple.style.backgroundColor = config.color; } ripple.style.transitionDuration = `${enterDuration}ms`; this._containerElement.appendChild(ripple); // By default the browser does not recalculate the styles of dynamically created // ripple elements. This is critical to ensure that the `scale` animates properly. // We enforce a style recalculation by calling `getComputedStyle` and *accessing* a property. // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a const computedStyles = window.getComputedStyle(ripple); const userTransitionProperty = computedStyles.transitionProperty; const userTransitionDuration = computedStyles.transitionDuration; // Note: We detect whether animation is forcibly disabled through CSS (e.g. through // `transition: none` or `display: none`). This is technically unexpected since animations are // controlled through the animation config, but this exists for backwards compatibility. This // logic does not need to be super accurate since it covers some edge cases which can be easily // avoided by users. const animationForciblyDisabledThroughCss = userTransitionProperty === 'none' || // Note: The canonical unit for serialized CSS `