@angular/animations 14.1.0-next.3 → 14.1.0

package/fesm2020/animations.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.1.0-next.3
+ * @license Angular v14.1.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */

package/fesm2020/browser/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.1.0-next.3
+ * @license Angular v14.1.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */

package/fesm2020/browser.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.1.0-next.3
+ * @license Angular v14.1.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -578,9 +578,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0-next.3", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -920,11 +920,6 @@ function pushUnrecognizedPropertiesWarning(warnings, props) {
         warnings.push(`The following provided properties are not recognized: ${props.join(', ')}`);
     }
 }
-function pushNonAnimatablePropertiesWarning(warnings, props) {
-    if (props.length) {
-        warnings.push(`The following provided properties are not animatable: ${props.join(', ')}\n   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)`);
-    }
-}
 
 /**
  * @license
@@ -1065,9 +1060,6 @@ class AnimationAstBuilderVisitor {
             if (context.unsupportedCSSPropertiesFound.size) {
                 pushUnrecognizedPropertiesWarning(warnings, [...context.unsupportedCSSPropertiesFound.keys()]);
             }
-            if (context.nonAnimatableCSSPropertiesFound.size) {
-                pushNonAnimatablePropertiesWarning(warnings, [...context.nonAnimatableCSSPropertiesFound.keys()]);
-            }
         }
         return ast;
     }
@@ -1279,14 +1271,6 @@ class AnimationAstBuilderVisitor {
                         context.unsupportedCSSPropertiesFound.add(prop);
                         return;
                     }
-                    if (this._driver.validateAnimatableStyleProperty) {
-                        if (!this._driver.validateAnimatableStyleProperty(prop)) {
-                            context.nonAnimatableCSSPropertiesFound.add(prop);
-                            // note: non animatable properties are not removed for the tuple just in case they are
-                            //       categorized as non animatable but can actually be animated
-                            return;
-                        }
-                    }
                 }
                 // This is guaranteed to have a defined Map at this querySelector location making it
                 // safe to add the assertion here. It is set as a default empty map in prior methods.
@@ -1455,7 +1439,6 @@ class AnimationAstBuilderContext {
         this.collectedStyles = new Map();
         this.options = null;
         this.unsupportedCSSPropertiesFound = new Set();
-        this.nonAnimatableCSSPropertiesFound = new Set();
     }
 }
 function consumeOffset(styles) {
@@ -2152,7 +2135,7 @@ class TimelineBuilder {
             const val = interpolateParams(value, params, errors);
             this._pendingStyles.set(prop, val);
             if (!this._localTimelineStyles.has(prop)) {
-                this._backFill.set(prop, this._globalTimelineStyles.get(prop) || AUTO_STYLE);
+                this._backFill.set(prop, this._globalTimelineStyles.get(prop) ?? AUTO_STYLE);
             }
             this._updateStyle(prop, val);
         }
@@ -2498,10 +2481,56 @@ class AnimationTransitionFactory {
                 queriedElements.add(elm);
             }
         });
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            checkNonAnimatableInTimelines(timelines, this._triggerName, driver);
+        }
         const queriedElementsList = iteratorToArray(queriedElements.values());
         return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, timelines, queriedElementsList, preStyleMap, postStyleMap, totalTime);
     }
 }
+/**
+ * Checks inside a set of timelines if they try to animate a css property which is not considered
+ * animatable, in that case it prints a warning on the console.
+ * Besides that the function doesn't have any other effect.
+ *
+ * Note: this check is done here after the timelines are built instead of doing on a lower level so
+ * that we can make sure that the warning appears only once per instruction (we can aggregate here
+ * all the issues instead of finding them separately).
+ *
+ * @param timelines The built timelines for the current instruction.
+ * @param triggerName The name of the trigger for the current instruction.
+ * @param driver Animation driver used to perform the check.
+ *
+ */
+function checkNonAnimatableInTimelines(timelines, triggerName, driver) {
+    if (!driver.validateAnimatableStyleProperty) {
+        return;
+    }
+    const invalidNonAnimatableProps = new Set();
+    timelines.forEach(({ keyframes }) => {
+        const nonAnimatablePropsInitialValues = new Map();
+        keyframes.forEach(keyframe => {
+            for (const [prop, value] of keyframe.entries()) {
+                if (!driver.validateAnimatableStyleProperty(prop)) {
+                    if (nonAnimatablePropsInitialValues.has(prop) && !invalidNonAnimatableProps.has(prop)) {
+                        const propInitialValue = nonAnimatablePropsInitialValues.get(prop);
+                        if (propInitialValue !== value) {
+                            invalidNonAnimatableProps.add(prop);
+                        }
+                    }
+                    else {
+                        nonAnimatablePropsInitialValues.set(prop, value);
+                    }
+                }
+            }
+        });
+    });
+    if (invalidNonAnimatableProps.size > 0) {
+        console.warn(`Warning: The animation trigger "${triggerName}" is attempting to animate the following` +
+            ' not animatable properties: ' + Array.from(invalidNonAnimatableProps).join(', ') + '\n' +
+            '(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)');
+    }
+}
 function oneOrMoreTransitionsMatch(matchFns, currentState, nextState, element, params) {
     return matchFns.some(fn => fn(currentState, nextState, element, params));
 }
@@ -2968,13 +2997,10 @@ class AnimationTransitionNamespace {
     }
     _signalRemovalForInnerTriggers(rootElement, context) {
         const elements = this._engine.driver.query(rootElement, NG_TRIGGER_SELECTOR, true);
-        const shadowElements = rootElement.shadowRoot ?
-            this._engine.driver.query(rootElement.shadowRoot, NG_TRIGGER_SELECTOR, true) :
-            [];
         // emulate a leave animation for all inner nodes within this node.
         // If there are no animations found for any of the nodes then clear the cache
         // for the element.
-        [...elements, ...shadowElements].forEach(elm => {
+        elements.forEach(elm => {
             // this means that an inner remove() operation has already kicked off
             // the animation on this element...
             if (elm[REMOVAL_FLAG])
@@ -3049,9 +3075,7 @@ class AnimationTransitionNamespace {
     }
     removeNode(element, context) {
         const engine = this._engine;
-        const elementHasChildren = !!element.childElementCount;
-        const elementHasShadowChildren = !!(element.shadowRoot && element.shadowRoot.childElementCount);
-        if (elementHasChildren || elementHasShadowChildren) {
+        if (element.childElementCount) {
             this._signalRemovalForInnerTriggers(element, context);
         }
         // this means that a * => VOID animation was detected and kicked off