@angular/animations 13.1.0-next.3 → 13.1.3

package/fesm2020/browser.mjs

@@ -1,6 +1,6 @@
 /**
- * @license Angular v13.1.0-next.3
- * (c) 2010-2021 Google LLC. https://angular.io/
+ * @license Angular v13.1.3
+ * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
@@ -126,7 +126,6 @@ function parseTimelineCommand(command) {
     return [id, action];
 }
 let _contains = (elm1, elm2) => false;
-let _matches = (element, selector) => false;
 let _query = (element, selector, multi) => {
     return [];
 };
@@ -148,44 +147,12 @@ if (_isNode || typeof Element !== 'undefined') {
             return false;
         };
     }
-    _matches = (() => {
-        if (_isNode || Element.prototype.matches) {
-            return (element, selector) => element.matches(selector);
-        }
-        else {
-            const proto = Element.prototype;
-            const fn = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector ||
-                proto.oMatchesSelector || proto.webkitMatchesSelector;
-            if (fn) {
-                return (element, selector) => fn.apply(element, [selector]);
-            }
-            else {
-                return _matches;
-            }
-        }
-    })();
     _query = (element, selector, multi) => {
-        let results = [];
         if (multi) {
-            // DO NOT REFACTOR TO USE SPREAD SYNTAX.
-            // For element queries that return sufficiently large NodeList objects,
-            // using spread syntax to populate the results array causes a RangeError
-            // due to the call stack limit being reached. `Array.from` can not be used
-            // as well, since NodeList is not iterable in IE 11, see
-            // https://developer.mozilla.org/en-US/docs/Web/API/NodeList
-            // More info is available in #38551.
-            const elems = element.querySelectorAll(selector);
-            for (let i = 0; i < elems.length; i++) {
-                results.push(elems[i]);
-            }
-        }
-        else {
-            const elm = element.querySelector(selector);
-            if (elm) {
-                results.push(elm);
-            }
+            return Array.from(element.querySelectorAll(selector));
         }
-        return results;
+        const elem = element.querySelector(selector);
+        return elem ? [elem] : [];
     };
 }
 function containsVendorPrefix(prop) {
@@ -216,7 +183,6 @@ function getBodyNode() {
     }
     return null;
 }
-const matchesElement = _matches;
 const containsElement = _contains;
 const invokeQuery = _query;
 function hypenatePropsObject(object) {
@@ -242,8 +208,9 @@ class NoopAnimationDriver {
     validateStyleProperty(prop) {
         return validateStyleProperty(prop);
     }
-    matchesElement(element, selector) {
-        return matchesElement(element, selector);
+    matchesElement(_element, _selector) {
+        // This method is deprecated and no longer in use so we return false.
+        return false;
     }
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
@@ -258,9 +225,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -282,8 +249,6 @@ const SUBSTITUTION_EXPR_START = '{{';
 const SUBSTITUTION_EXPR_END = '}}';
 const ENTER_CLASSNAME = 'ng-enter';
 const LEAVE_CLASSNAME = 'ng-leave';
-const ENTER_SELECTOR = '.ng-enter';
-const LEAVE_SELECTOR = '.ng-leave';
 const NG_TRIGGER_CLASSNAME = 'ng-trigger';
 const NG_TRIGGER_SELECTOR = '.ng-trigger';
 const NG_ANIMATING_CLASSNAME = 'ng-animating';
@@ -1156,15 +1121,8 @@ class ElementInstructionMap {
     constructor() {
         this._map = new Map();
     }
-    consume(element) {
-        let instructions = this._map.get(element);
-        if (instructions) {
-            this._map.delete(element);
-        }
-        else {
-            instructions = [];
-        }
-        return instructions;
+    get(element) {
+        return this._map.get(element) || [];
     }
     append(element, instructions) {
         let existingInstructions = this._map.get(element);
@@ -1262,7 +1220,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * from all previous keyframes up until where it is first used. For the timeline keyframe generation
  * to properly fill in the style it will place the previous value (the value from the parent
  * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
- * styles are objects that prototypically inherits from the backFill object, this means that if a
+ * styles is an object that prototypically inherits from the backFill object, this means that if a
  * value is added into the backFill then it will automatically propagate any missing values to all
  * keyframes. Therefore the missing `height` value will be properly filled into the already
  * processed keyframes.
@@ -1289,10 +1247,21 @@ class AnimationTimelineBuilderVisitor {
         visitDslNode(this, ast, context);
         // this checks to see if an actual animation happened
         const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
-        if (timelines.length && Object.keys(finalStyles).length) {
-            const tl = timelines[timelines.length - 1];
-            if (!tl.allowOnlyTimelineStyles()) {
-                tl.setStyles([finalStyles], null, context.errors, options);
+        if (Object.keys(finalStyles).length) {
+            // note: we just want to apply the final styles for the rootElement, so we do not
+            //       just apply the styles to the last timeline but the last timeline which
+            //       element is the root one (basically `*`-styles are replaced with the actual
+            //       state style values only for the root element)
+            let lastRootTimeline;
+            for (let i = timelines.length - 1; i >= 0; i--) {
+                const timeline = timelines[i];
+                if (timeline.element === rootElement) {
+                    lastRootTimeline = timeline;
+                    break;
+                }
+            }
+            if (lastRootTimeline && !lastRootTimeline.allowOnlyTimelineStyles()) {
+                lastRootTimeline.setStyles([finalStyles], null, context.errors, options);
             }
         }
         return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
@@ -1308,7 +1277,7 @@ class AnimationTimelineBuilderVisitor {
         // these values are not visited in this AST
     }
     visitAnimateChild(ast, context) {
-        const elementInstructions = context.subInstructions.consume(context.element);
+        const elementInstructions = context.subInstructions.get(context.element);
         if (elementInstructions) {
             const innerContext = context.createSubContext(ast.options);
             const startTime = context.currentTimeline.currentTime;
@@ -2574,9 +2543,11 @@ class AnimationTransitionNamespace {
     }
     triggerLeaveAnimation(element, context, destroyAfterComplete, defaultToFallback) {
         const triggerStates = this._engine.statesByElement.get(element);
+        const previousTriggersValues = new Map();
         if (triggerStates) {
             const players = [];
             Object.keys(triggerStates).forEach(triggerName => {
+                previousTriggersValues.set(triggerName, triggerStates[triggerName].value);
                 // this check is here in the event that an element is removed
                 // twice (both on the host level and the component level)
                 if (this._triggers[triggerName]) {
@@ -2587,7 +2558,7 @@ class AnimationTransitionNamespace {
                 }
             });
             if (players.length) {
-                this._engine.markElementAsRemoved(this.id, element, true, context);
+                this._engine.markElementAsRemoved(this.id, element, true, context, previousTriggersValues);
                 if (destroyAfterComplete) {
                     optimizeGroupPlayer(players).onDone(() => this._engine.processLeaveNode(element));
                 }
@@ -2944,10 +2915,15 @@ class TransitionAnimationEngine {
             this._onRemovalComplete(element, context);
         }
     }
-    markElementAsRemoved(namespaceId, element, hasAnimation, context) {
+    markElementAsRemoved(namespaceId, element, hasAnimation, context, previousTriggersValues) {
         this.collectedLeaveElements.push(element);
-        element[REMOVAL_FLAG] =
-            { namespaceId, setForRemoval: context, hasAnimation, removedBeforeQueried: false };
+        element[REMOVAL_FLAG] = {
+            namespaceId,
+            setForRemoval: context,
+            hasAnimation,
+            removedBeforeQueried: false,
+            previousTriggersValues
+        };
     }
     listen(namespaceId, element, name, phase, callback) {
         if (isElementNode(element)) {
@@ -3012,7 +2988,7 @@ class TransitionAnimationEngine {
             }
             this._onRemovalComplete(element, details.setForRemoval);
         }
-        if (this.driver.matchesElement(element, DISABLED_SELECTOR)) {
+        if (element.classList?.contains(DISABLED_CLASSNAME)) {
             this.markElementAsDisabled(element, false);
         }
         this.driver.query(element, DISABLED_SELECTOR, true).forEach(node => {
@@ -3149,8 +3125,19 @@ class TransitionAnimationEngine {
                 allPlayers.push(player);
                 if (this.collectedEnterElements.length) {
                     const details = element[REMOVAL_FLAG];
-                    // move animations are currently not supported...
+                    // animations for move operations (elements being removed and reinserted,
+                    // e.g. when the order of an *ngFor list changes) are currently not supported
                     if (details && details.setForMove) {
+                        if (details.previousTriggersValues &&
+                            details.previousTriggersValues.has(entry.triggerName)) {
+                            const previousValue = details.previousTriggersValues.get(entry.triggerName);
+                            // we need to restore the previous trigger value since the element has
+                            // only been moved and hasn't actually left the DOM
+                            const triggersWithStates = this.statesByElement.get(entry.element);
+                            if (triggersWithStates && triggersWithStates[entry.triggerName]) {
+                                triggersWithStates[entry.triggerName].value = previousValue;
+                            }
+                        }
                         player.destroy();
                         return;
                     }
@@ -3187,7 +3174,14 @@ class TransitionAnimationEngine {
                 // instead stretch the first keyframe gap until the animation starts. This is
                 // important in order to prevent extra initialization styles from being
                 // required by the user for the animation.
-                instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true);
+                const timelines = [];
+                instruction.timelines.forEach(tl => {
+                    tl.stretchStartingKeyframe = true;
+                    if (!this.disabledNodes.has(tl.element)) {
+                        timelines.push(tl);
+                    }
+                });
+                instruction.timelines = timelines;
                 subTimelines.append(element, instruction.timelines);
                 const tuple = { instruction, player, element };
                 queuedInstructions.push(tuple);
@@ -3760,38 +3754,11 @@ function buildRootMap(roots, nodes) {
     });
     return rootMap;
 }
-const CLASSES_CACHE_KEY = '$$classes';
-function containsClass(element, className) {
-    if (element.classList) {
-        return element.classList.contains(className);
-    }
-    else {
-        const classes = element[CLASSES_CACHE_KEY];
-        return classes && classes[className];
-    }
-}
 function addClass(element, className) {
-    if (element.classList) {
-        element.classList.add(className);
-    }
-    else {
-        let classes = element[CLASSES_CACHE_KEY];
-        if (!classes) {
-            classes = element[CLASSES_CACHE_KEY] = {};
-        }
-        classes[className] = true;
-    }
+    element.classList?.add(className);
 }
 function removeClass(element, className) {
-    if (element.classList) {
-        element.classList.remove(className);
-    }
-    else {
-        let classes = element[CLASSES_CACHE_KEY];
-        if (classes) {
-            delete classes[className];
-        }
-    }
+    element.classList?.remove(className);
 }
 function removeNodesAfterAnimationDone(engine, element, players) {
     optimizeGroupPlayer(players).onDone(() => engine.processLeaveNode(element));
@@ -4342,8 +4309,9 @@ class CssKeyframesDriver {
     validateStyleProperty(prop) {
         return validateStyleProperty(prop);
     }
-    matchesElement(element, selector) {
-        return matchesElement(element, selector);
+    matchesElement(_element, _selector) {
+        // This method is deprecated and no longer in use so we return false.
+        return false;
     }
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
@@ -4582,10 +4550,13 @@ class WebAnimationsPlayer {
     beforeDestroy() {
         const styles = {};
         if (this.hasStarted()) {
-            Object.keys(this._finalKeyframe).forEach(prop => {
+            // note: this code is invoked only when the `play` function was called prior to this
+            // (thus `hasStarted` returns true), this implies that the code that initializes
+            // `_finalKeyframe` has also been executed and the non-null assertion can be safely used here
+            const finalKeyframe = this._finalKeyframe;
+            Object.keys(finalKeyframe).forEach(prop => {
                 if (prop != 'offset') {
-                    styles[prop] =
-                        this._finished ? this._finalKeyframe[prop] : computeStyle(this.element, prop);
+                    styles[prop] = this._finished ? finalKeyframe[prop] : computeStyle(this.element, prop);
                 }
             });
         }
@@ -4607,8 +4578,9 @@ class WebAnimationsDriver {
     validateStyleProperty(prop) {
         return validateStyleProperty(prop);
     }
-    matchesElement(element, selector) {
-        return matchesElement(element, selector);
+    matchesElement(_element, _selector) {
+        // This method is deprecated and no longer in use so we return false.
+        return false;
     }
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
@@ -4691,5 +4663,5 @@ function getElementAnimateFn() {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, CssKeyframesDriver as ɵCssKeyframesDriver, CssKeyframesPlayer as ɵCssKeyframesPlayer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, matchesElement as ɵmatchesElement, supportsWebAnimations as ɵsupportsWebAnimations, validateStyleProperty as ɵvalidateStyleProperty };
+export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, CssKeyframesDriver as ɵCssKeyframesDriver, CssKeyframesPlayer as ɵCssKeyframesPlayer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, supportsWebAnimations as ɵsupportsWebAnimations, validateStyleProperty as ɵvalidateStyleProperty };
 //# sourceMappingURL=browser.mjs.map