@angular/animations 13.1.0-next.2 → 13.1.2

package/fesm2020/browser.mjs

@@ -1,6 +1,6 @@
 /**
- * @license Angular v13.1.0-next.2
- * (c) 2010-2021 Google LLC. https://angular.io/
+ * @license Angular v13.1.2
+ * (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,22 +147,6 @@ 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) {
@@ -216,7 +199,6 @@ function getBodyNode() {
     }
     return null;
 }
-const matchesElement = _matches;
 const containsElement = _contains;
 const invokeQuery = _query;
 function hypenatePropsObject(object) {
@@ -242,8 +224,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 +241,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -282,8 +265,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';
@@ -1054,7 +1035,8 @@ function normalizeSelector(selector) {
     if (hasAmpersand) {
         selector = selector.replace(SELF_TOKEN_REGEX, '');
     }
-    // the :enter and :leave selectors are filled in at runtime during timeline building
+    // Note: the :enter and :leave aren't normalized here since those
+    // selectors are filled in at runtime during timeline building
     selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
         .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
         .replace(/:animating/g, NG_ANIMATING_SELECTOR);
@@ -1155,15 +1137,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);
@@ -1229,14 +1204,14 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * [TimelineBuilder]
  * This class is responsible for tracking the styles and building a series of keyframe objects for a
  * timeline between a start and end time. The builder starts off with an initial timeline and each
- * time the AST comes across a `group()`, `keyframes()` or a combination of the two wihtin a
+ * time the AST comes across a `group()`, `keyframes()` or a combination of the two within a
  * `sequence()` then it will generate a sub timeline for each step as well as a new one after
  * they are complete.
  *
  * As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
  * timeline was created (based on one of the cases above) then the parent timeline will attempt to
  * merge the styles used within the sub timelines into itself (only with group() this will happen).
- * This happens with a merge operation (much like how the merge works in mergesort) and it will only
+ * This happens with a merge operation (much like how the merge works in mergeSort) and it will only
  * copy the most recently used styles from the sub timelines into the parent timeline. This ensures
  * that if the styles are used later on in another phase of the animation then they will be the most
  * up-to-date values.
@@ -1261,7 +1236,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 inhert 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.
@@ -1307,7 +1282,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;
@@ -1366,7 +1341,7 @@ class AnimationTimelineBuilderVisitor {
         }
         if (ast.steps.length) {
             ast.steps.forEach(s => visitDslNode(this, s, ctx));
-            // this is here just incase the inner steps only contain or end with a style() call
+            // this is here just in case the inner steps only contain or end with a style() call
             ctx.currentTimeline.applyStylesToKeyframe();
             // this means that some animation function within the sequence
             // ended up creating a sub timeline (which means the current
@@ -1642,7 +1617,7 @@ class AnimationTimelineContext {
         if (includeSelf) {
             results.push(this.element);
         }
-        if (selector.length > 0) { // if :self is only used then the selector is empty
+        if (selector.length > 0) { // only if :self is used then the selector can be empty
             selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
             selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
             const multi = limit != 1;
@@ -1887,7 +1862,7 @@ class SubTimelineBuilder extends TimelineBuilder {
               When the keyframe is stretched then it means that the delay before the animation
               starts is gone. Instead the first keyframe is placed at the start of the animation
               and it is then copied to where it starts when the original delay is over. This basically
-              means nothing animates during that delay, but the styles are still renderered. For this
+              means nothing animates during that delay, but the styles are still rendered. For this
               to work the original offset values that exist in the original keyframes must be "warped"
               so that they can take the new keyframe + delay into account.
       
@@ -2491,7 +2466,7 @@ class AnimationTransitionNamespace {
             // only remove the player if it is queued on the EXACT same trigger/namespace
             // we only also deal with queued players here because if the animation has
             // started then we want to keep the player alive until the flush happens
-            // (which is where the previousPlayers are passed into the new palyer)
+            // (which is where the previousPlayers are passed into the new player)
             if (player.namespaceId == this.id && player.triggerName == triggerName && player.queued) {
                 player.destroy();
             }
@@ -2573,9 +2548,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]) {
@@ -2586,7 +2563,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));
                 }
@@ -2781,7 +2758,7 @@ class TransitionAnimationEngine {
             // been inserted so that we know exactly where to place it in
             // the namespace list
             this.newHostElements.set(hostElement, ns);
-            // given that this host element is apart of the animation code, it
+            // given that this host element is a part of the animation code, it
             // may or may not be inserted by a parent node that is of an
             // animation renderer type. If this happens then we can still have
             // access to this item when we query for :enter nodes. If the parent
@@ -2846,8 +2823,8 @@ class TransitionAnimationEngine {
         // normally there should only be one namespace per element, however
         // if @triggers are placed on both the component element and then
         // its host element (within the component code) then there will be
-        // two namespaces returned. We use a set here to simply the dedupe
-        // of namespaces incase there are multiple triggers both the elm and host
+        // two namespaces returned. We use a set here to simply deduplicate
+        // the namespaces in case (for the reason described above) there are multiple triggers
         const namespaces = new Set();
         const elementStates = this.statesByElement.get(element);
         if (elementStates) {
@@ -2943,10 +2920,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)) {
@@ -3011,7 +2993,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 => {
@@ -3148,8 +3130,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;
                     }
@@ -3162,30 +3155,38 @@ class TransitionAnimationEngine {
                     erroneousTransitions.push(instruction);
                     return;
                 }
-                // even though the element may not be apart of the DOM, it may
-                // still be added at a later point (due to the mechanics of content
+                // even though the element may not be in the DOM, it may still
+                // be added at a later point (due to the mechanics of content
                 // projection and/or dynamic component insertion) therefore it's
-                // important we still style the element.
+                // important to still style the element.
                 if (nodeIsOrphaned) {
                     player.onStart(() => eraseStyles(element, instruction.fromStyles));
                     player.onDestroy(() => setStyles(element, instruction.toStyles));
                     skippedPlayers.push(player);
                     return;
                 }
-                // if a unmatched transition is queued to go then it SHOULD NOT render
-                // an animation and cancel the previously running animations.
+                // if an unmatched transition is queued and ready to go
+                // then it SHOULD NOT render an animation and cancel the
+                // previously running animations.
                 if (entry.isFallbackTransition) {
                     player.onStart(() => eraseStyles(element, instruction.fromStyles));
                     player.onDestroy(() => setStyles(element, instruction.toStyles));
                     skippedPlayers.push(player);
                     return;
                 }
-                // this means that if a parent animation uses this animation as a sub trigger
-                // then it will instruct the timeline builder to not add a player delay, but
-                // instead stretch the first keyframe gap up until the animation starts. The
-                // reason this is important is to prevent extra initialization styles from being
-                // required by the user in the animation.
-                instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true);
+                // this means that if a parent animation uses this animation as a sub-trigger
+                // then it will instruct the timeline builder not to add a player delay, but
+                // 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.
+                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);
@@ -3220,10 +3221,10 @@ class TransitionAnimationEngine {
             this.reportError(errors);
         }
         const allPreviousPlayersMap = new Map();
-        // this map works to tell which element in the DOM tree is contained by
-        // which animation. Further down below this map will get populated once
-        // the players are built and in doing so it can efficiently figure out
-        // if a sub player is skipped due to a parent player having priority.
+        // this map tells us which element in the DOM tree is contained by
+        // which animation. Further down this map will get populated once
+        // the players are built and in doing so we can use it to efficiently
+        // figure out if a sub player is skipped due to a parent player having priority.
         const animationElementMap = new Map();
         queuedInstructions.forEach(entry => {
             const element = entry.element;
@@ -3240,13 +3241,13 @@ class TransitionAnimationEngine {
                 prevPlayer.destroy();
             });
         });
-        // this is a special case for nodes that will be removed (either by)
+        // this is a special case for nodes that will be removed either by
         // having their own leave animations or by being queried in a container
         // that will be removed once a parent animation is complete. The idea
         // here is that * styles must be identical to ! styles because of
         // backwards compatibility (* is also filled in by default in many places).
-        // Otherwise * styles will return an empty value or auto since the element
-        // that is being getComputedStyle'd will not be visible (since * = destination)
+        // Otherwise * styles will return an empty value or "auto" since the element
+        // passed to getComputedStyle will not be visible (since * === destination)
         const replaceNodes = allLeaveNodes.filter(node => {
             return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
         });
@@ -3328,9 +3329,9 @@ class TransitionAnimationEngine {
                 }
             }
         });
-        // find all of the sub players' corresponding inner animation player
+        // find all of the sub players' corresponding inner animation players
         subPlayers.forEach(player => {
-            // even if any players are not found for a sub animation then it
+            // even if no players are found for a sub animation it
             // will still complete itself after the next tick since it's Noop
             const playersForElement = skippedPlayersMap.get(player.element);
             if (playersForElement && playersForElement.length) {
@@ -3758,38 +3759,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));
@@ -4340,8 +4314,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);
@@ -4580,10 +4555,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);
                 }
             });
         }
@@ -4605,8 +4583,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);
@@ -4689,5 +4668,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