@angular/material 14.0.0-next.3 → 14.0.0-next.4

package/fesm2015/core.mjs

@@ -9,7 +9,7 @@ import { _isTestEnvironment, normalizePassiveListenerOptions } from '@angular/cd
 import * as i1 from '@angular/cdk/a11y';
 import { isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader } from '@angular/cdk/a11y';
 import { coerceBooleanProperty, coerceNumberProperty, coerceElement } from '@angular/cdk/coercion';
-import { Subject, Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
@@ -22,7 +22,7 @@ import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
  * found in the LICENSE file at https://angular.io/license
  */
 /** Current version of Angular Material. */
-const VERSION = new Version('14.0.0-next.3');
+const VERSION = new Version('14.0.0-next.4');
 
 /**
  * @license
@@ -269,12 +269,6 @@ function mixinErrorState(base) {
     return class extends base {
         constructor(...args) {
             super(...args);
-            // This class member exists as an interop with `MatFormFieldControl` which expects
-            // a public `stateChanges` observable to emit whenever the form field should be updated.
-            // The description is not specifically mentioning the error state, as classes using this
-            // mixin can/should emit an event in other cases too.
-            /** Emits whenever the component state changes. */
-            this.stateChanges = new Subject();
             /** Whether the component is in an error state. */
             this.errorState = false;
         }
@@ -838,10 +832,13 @@ class RippleRef {
     /** Reference to the ripple HTML element. */
     element, 
     /** Ripple configuration used for the ripple. */
-    config) {
+    config, 
+    /* Whether animations are forcibly disabled for ripples through CSS. */
+    _animationForciblyDisabledThroughCss = false) {
         this._renderer = _renderer;
         this.element = element;
         this.config = config;
+        this._animationForciblyDisabledThroughCss = _animationForciblyDisabledThroughCss;
         /** Current state of the ripple. */
         this.state = 3 /* HIDDEN */;
     }
@@ -910,7 +907,7 @@ class RippleRenderer {
         const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
         const offsetX = x - containerRect.left;
         const offsetY = y - containerRect.top;
-        const duration = animationConfig.enterDuration;
+        const enterDuration = animationConfig.enterDuration;
         const ripple = document.createElement('div');
         ripple.classList.add('mat-ripple-element');
         ripple.style.left = `${offsetX - radius}px`;
@@ -922,35 +919,49 @@ class RippleRenderer {
         if (config.color != null) {
             ripple.style.backgroundColor = config.color;
         }
-        ripple.style.transitionDuration = `${duration}ms`;
+        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 because then the `scale` would not animate properly.
-        enforceStyleRecalculation(ripple);
-        // We use a 3d transform here in order to avoid an issue in Safari where
+        // 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 by the use of
+        // `transition: 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 `<time>` properties is seconds. Additionally
+            // some browsers expand the duration for every property (in our case `opacity` and `transform`).
+            userTransitionDuration === '0s' ||
+            userTransitionDuration === '0s, 0s';
+        // Exposed reference to the ripple that will be returned.
+        const rippleRef = new RippleRef(this, ripple, config, animationForciblyDisabledThroughCss);
+        // Start the enter animation by setting the transform/scale to 100%. The animation will
+        // execute as part of this statement because we forced a style recalculation before.
+        // Note: We use a 3d transform here in order to avoid an issue in Safari where
         // the ripples aren't clipped when inside the shadow DOM (see #24028).
         ripple.style.transform = 'scale3d(1, 1, 1)';
-        // Exposed reference to the ripple that will be returned.
-        const rippleRef = new RippleRef(this, ripple, config);
         rippleRef.state = 0 /* FADING_IN */;
         // Add the ripple reference to the list of all active ripples.
         this._activeRipples.add(rippleRef);
         if (!config.persistent) {
             this._mostRecentTransientRipple = rippleRef;
         }
-        // Wait for the ripple element to be completely faded in.
-        // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
-        this._runTimeoutOutsideZone(() => {
-            const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
-            rippleRef.state = 1 /* VISIBLE */;
-            // When the timer runs out while the user has kept their pointer down, we want to
-            // keep only the persistent ripples and the latest transient ripple. We do this,
-            // because we don't want stacked transient ripples to appear after their enter
-            // animation has finished.
-            if (!config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
-                rippleRef.fadeOut();
-            }
-        }, duration);
+        // Do not register the `transition` event listener if fade-in and fade-out duration
+        // are set to zero. The events won't fire anyway and we can save resources here.
+        if (!animationForciblyDisabledThroughCss && (enterDuration || animationConfig.exitDuration)) {
+            this._ngZone.runOutsideAngular(() => {
+                ripple.addEventListener('transitionend', () => this._finishRippleTransition(rippleRef));
+            });
+        }
+        // In case there is no fade-in transition duration, we need to manually call the transition
+        // end listener because `transitionend` doesn't fire if there is no transition.
+        if (animationForciblyDisabledThroughCss || !enterDuration) {
+            this._finishRippleTransition(rippleRef);
+        }
         return rippleRef;
     }
     /** Fades out a ripple reference. */
@@ -969,14 +980,16 @@ class RippleRenderer {
         }
         const rippleEl = rippleRef.element;
         const animationConfig = Object.assign(Object.assign({}, defaultRippleAnimationConfig), rippleRef.config.animation);
+        // This starts the fade-out transition and will fire the transition end listener that
+        // removes the ripple element from the DOM.
         rippleEl.style.transitionDuration = `${animationConfig.exitDuration}ms`;
         rippleEl.style.opacity = '0';
         rippleRef.state = 2 /* FADING_OUT */;
-        // Once the ripple faded out, the ripple can be safely removed from the DOM.
-        this._runTimeoutOutsideZone(() => {
-            rippleRef.state = 3 /* HIDDEN */;
-            rippleEl.remove();
-        }, animationConfig.exitDuration);
+        // In case there is no fade-out transition duration, we need to manually call the
+        // transition end listener because `transitionend` doesn't fire if there is no transition.
+        if (rippleRef._animationForciblyDisabledThroughCss || !animationConfig.exitDuration) {
+            this._finishRippleTransition(rippleRef);
+        }
     }
     /** Fades out all currently active ripples. */
     fadeOutAll() {
@@ -1023,6 +1036,36 @@ class RippleRenderer {
             this._pointerUpEventsRegistered = true;
         }
     }
+    /** Method that will be called if the fade-in or fade-in transition completed. */
+    _finishRippleTransition(rippleRef) {
+        if (rippleRef.state === 0 /* FADING_IN */) {
+            this._startFadeOutTransition(rippleRef);
+        }
+        else if (rippleRef.state === 2 /* FADING_OUT */) {
+            this._destroyRipple(rippleRef);
+        }
+    }
+    /**
+     * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
+     * is not held down anymore.
+     */
+    _startFadeOutTransition(rippleRef) {
+        const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
+        const { persistent } = rippleRef.config;
+        rippleRef.state = 1 /* VISIBLE */;
+        // When the timer runs out while the user has kept their pointer down, we want to
+        // keep only the persistent ripples and the latest transient ripple. We do this,
+        // because we don't want stacked transient ripples to appear after their enter
+        // animation has finished.
+        if (!persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
+            rippleRef.fadeOut();
+        }
+    }
+    /** Destroys the given ripple by removing it from the DOM and updating its state. */
+    _destroyRipple(rippleRef) {
+        rippleRef.state = 3 /* HIDDEN */;
+        rippleRef.element.remove();
+    }
     /** Function being called whenever the trigger is being pressed using mouse. */
     _onMousedown(event) {
         // Screen readers will fire fake mouse events for space/enter. Skip launching a
@@ -1068,10 +1111,6 @@ class RippleRenderer {
             }
         });
     }
-    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
-    _runTimeoutOutsideZone(fn, delay = 0) {
-        this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
-    }
     /** Registers event listeners for a given list of events. */
     _registerEvents(eventTypes) {
         this._ngZone.runOutsideAngular(() => {
@@ -1094,13 +1133,6 @@ class RippleRenderer {
         }
     }
 }
-/** Enforces a style recalculation of a DOM element by computing its styles. */
-function enforceStyleRecalculation(element) {
-    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
-    // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
-    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    window.getComputedStyle(element).getPropertyValue('opacity');
-}
 /**
  * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
  */