@angular/animations 6.0.3 → 6.0.7

package/bundles/animations-browser.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v6.0.3
+ * @license Angular v6.0.7
  * (c) 2010-2018 Google, Inc. https://angular.io/
  * License: MIT
  */
@@ -92,6 +92,19 @@ function __spread() {
     return ar;
 }
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function isBrowser() {
+    return (typeof window !== 'undefined' && typeof window.document !== 'undefined');
+}
+function isNode() {
+    return (typeof process !== 'undefined');
+}
 function optimizeGroupPlayer(players) {
     switch (players.length) {
         case 0:
@@ -202,10 +215,13 @@ var _matches = function (element, selector) {
 var _query = function (element, selector, multi) {
     return [];
 };
-if (typeof Element != 'undefined') {
+// Define utility methods for browsers and platform-server(domino) where Element
+// and utility methods exist.
+var _isNode = isNode();
+if (_isNode || typeof Element !== 'undefined') {
     // this is well supported in all browsers
     _contains = function (elm1, elm2) { return elm1.contains(elm2); };
-    if (Element.prototype.matches) {
+    if (_isNode || Element.prototype.matches) {
         _matches = function (element, selector) { return element.matches(selector); };
     }
     else {
@@ -270,6 +286,13 @@ function hypenatePropsObject(object) {
     return newObj;
 }
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 /**
  * @experimental
  */
@@ -294,8 +317,6 @@ var NoopAnimationDriver = /** @class */ (function () {
     NoopAnimationDriver.decorators = [
         { type: core.Injectable }
     ];
-    /** @nocollapse */
-    NoopAnimationDriver.ctorParameters = function () { return []; };
     return NoopAnimationDriver;
 }());
 /**
@@ -308,6 +329,13 @@ var AnimationDriver = /** @class */ (function () {
     return AnimationDriver;
 }());
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var ONE_SECOND = 1000;
 var SUBSTITUTION_EXPR_START = '{{';
 var SUBSTITUTION_EXPR_END = '}}';
@@ -331,8 +359,7 @@ function _convertTimeValueToMS(value, unit) {
     switch (unit) {
         case 's':
             return value * ONE_SECOND;
-        default:
-            // ms or something else
+        default:// ms or something else
             return value;
     }
 }
@@ -412,12 +439,46 @@ function copyStyles(styles, readPrototype, destination) {
     }
     return destination;
 }
+function getStyleAttributeString(element, key, value) {
+    // Return the key-value pair string to be added to the style attribute for the
+    // given CSS style key.
+    if (value) {
+        return key + ':' + value + ';';
+    }
+    else {
+        return '';
+    }
+}
+function writeStyleAttribute(element) {
+    // Read the style property of the element and manually reflect it to the
+    // style attribute. This is needed because Domino on platform-server doesn't
+    // understand the full set of allowed CSS properties and doesn't reflect some
+    // of them automatically.
+    var styleAttrValue = '';
+    for (var i = 0; i < element.style.length; i++) {
+        var key = element.style.item(i);
+        styleAttrValue += getStyleAttributeString(element, key, element.style.getPropertyValue(key));
+    }
+    for (var key in element.style) {
+        // Skip internal Domino properties that don't need to be reflected.
+        if (!element.style.hasOwnProperty(key) || key.startsWith('_')) {
+            continue;
+        }
+        var dashKey = camelCaseToDashCase(key);
+        styleAttrValue += getStyleAttributeString(element, dashKey, element.style[key]);
+    }
+    element.setAttribute('style', styleAttrValue);
+}
 function setStyles(element, styles) {
     if (element['style']) {
         Object.keys(styles).forEach(function (prop) {
             var camelProp = dashCaseToCamelCase(prop);
             element.style[camelProp] = styles[prop];
         });
+        // On the server set the 'style' attribute since it's not automatically reflected.
+        if (isNode()) {
+            writeStyleAttribute(element);
+        }
     }
 }
 function eraseStyles(element, styles) {
@@ -426,6 +487,10 @@ function eraseStyles(element, styles) {
             var camelProp = dashCaseToCamelCase(prop);
             element.style[camelProp] = '';
         });
+        // On the server set the 'style' attribute since it's not automatically reflected.
+        if (isNode()) {
+            writeStyleAttribute(element);
+        }
     }
 }
 function normalizeAnimationEntry(steps) {
@@ -494,6 +559,9 @@ function dashCaseToCamelCase(input) {
         return m[1].toUpperCase();
     });
 }
+function camelCaseToDashCase(input) {
+    return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
 function allowPreviousPlayerStylesMerge(duration, delay) {
     return duration === 0 || delay === 0;
 }
@@ -637,6 +705,13 @@ function makeLambdaFromStates(lhs, rhs) {
     };
 }
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var SELF_TOKEN = ':self';
 var SELF_TOKEN_REGEX = new RegExp("s*" + SELF_TOKEN + "s*,?", 'g');
 /*
@@ -967,7 +1042,7 @@ var AnimationAstBuilderVisitor = /** @class */ (function () {
         }
         var limit = length - 1;
         var currentTime = context.currentTime;
-        var currentAnimateTimings = (context.currentAnimateTimings);
+        var currentAnimateTimings = context.currentAnimateTimings;
         var animateDuration = currentAnimateTimings.duration;
         keyframes.forEach(function (kf, i) {
             var offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
@@ -1002,7 +1077,7 @@ var AnimationAstBuilderVisitor = /** @class */ (function () {
         };
     };
     AnimationAstBuilderVisitor.prototype.visitQuery = function (metadata, context) {
-        var parentSelector = (context.currentQuerySelector);
+        var parentSelector = context.currentQuerySelector;
         var options = (metadata.options || {});
         context.queryCount++;
         context.currentQuery = metadata;
@@ -1113,7 +1188,7 @@ function normalizeAnimationOptions(options) {
     if (options) {
         options = copyObj(options);
         if (options['params']) {
-            options['params'] = (normalizeParams(options['params']));
+            options['params'] = normalizeParams(options['params']);
         }
     }
     else {
@@ -1166,6 +1241,13 @@ var ElementInstructionMap = /** @class */ (function () {
     return ElementInstructionMap;
 }());
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var ONE_FRAME_IN_MILLISECONDS = 1;
 var ENTER_TOKEN = ':enter';
 var ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g');
@@ -1415,7 +1497,7 @@ var AnimationTimelineBuilderVisitor = /** @class */ (function () {
     };
     AnimationTimelineBuilderVisitor.prototype.visitStyle = function (ast, context) {
         var timeline = context.currentTimeline;
-        var timings = (context.currentAnimateTimings);
+        var timings = context.currentAnimateTimings;
         // this is a special case for when a style() call
         // directly follows  an animate() call (but not inside of an animate() call)
         if (!timings && timeline.getCurrentStyleProperties().length) {
@@ -1431,7 +1513,7 @@ var AnimationTimelineBuilderVisitor = /** @class */ (function () {
         context.previousNode = ast;
     };
     AnimationTimelineBuilderVisitor.prototype.visitKeyframes = function (ast, context) {
-        var currentAnimateTimings = (context.currentAnimateTimings);
+        var currentAnimateTimings = context.currentAnimateTimings;
         var startTime = (context.currentTimeline).duration;
         var duration = currentAnimateTimings.duration;
         var innerContext = context.createSubContext();
@@ -1494,7 +1576,7 @@ var AnimationTimelineBuilderVisitor = /** @class */ (function () {
         context.previousNode = ast;
     };
     AnimationTimelineBuilderVisitor.prototype.visitStagger = function (ast, context) {
-        var parentContext = (context.parentContext);
+        var parentContext = context.parentContext;
         var tl = context.currentTimeline;
         var timings = ast.timings;
         var duration = Math.abs(timings.duration);
@@ -1566,7 +1648,7 @@ var AnimationTimelineContext = /** @class */ (function () {
         }
         var newParams = newOptions.params;
         if (newParams) {
-            var paramsToUpdate_1 = (optionsToUpdate.params);
+            var paramsToUpdate_1 = optionsToUpdate.params;
             if (!paramsToUpdate_1) {
                 paramsToUpdate_1 = this.options.params = {};
             }
@@ -1633,7 +1715,6 @@ var AnimationTimelineContext = /** @class */ (function () {
             results.push(this.element);
         }
         if (selector.length > 0) {
-            // if :self is only used then the selector is empty
             selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
             selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
             var multi = limit != 1;
@@ -1669,7 +1750,7 @@ var TimelineBuilder = /** @class */ (function () {
             this._elementTimelineStylesLookup = new Map();
         }
         this._localTimelineStyles = Object.create(this._backFill, {});
-        this._globalTimelineStyles = (this._elementTimelineStylesLookup.get(element));
+        this._globalTimelineStyles = this._elementTimelineStylesLookup.get(element);
         if (!this._globalTimelineStyles) {
             this._globalTimelineStyles = this._localTimelineStyles;
             this._elementTimelineStylesLookup.set(element, this._localTimelineStyles);
@@ -1716,7 +1797,7 @@ var TimelineBuilder = /** @class */ (function () {
         if (this._currentKeyframe) {
             this._previousKeyframe = this._currentKeyframe;
         }
-        this._currentKeyframe = (this._keyframes.get(this.duration));
+        this._currentKeyframe = this._keyframes.get(this.duration);
         if (!this._currentKeyframe) {
             this._currentKeyframe = Object.create(this._backFill, {});
             this._keyframes.set(this.duration, this._currentKeyframe);
@@ -1885,19 +1966,19 @@ var SubTimelineBuilder = /** @class */ (function (_super) {
             oldFirstKeyframe['offset'] = roundOffset(startingGap);
             newKeyframes.push(oldFirstKeyframe);
             /*
-                    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
-                    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.
-            
-                    delay=1000, duration=1000, keyframes = 0 .5 1
-            
-                    turns into
-            
-                    delay=0, duration=2000, keyframes = 0 .33 .66 1
-                   */
+              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
+              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.
+      
+              delay=1000, duration=1000, keyframes = 0 .5 1
+      
+              turns into
+      
+              delay=0, duration=2000, keyframes = 0 .33 .66 1
+             */
             // offsets between 1 ... n -1 are all warped by the keyframe stretch
             var limit = keyframes.length - 1;
             for (var i = 1; i <= limit; i++) {
@@ -1993,6 +2074,13 @@ var NoopAnimationStyleNormalizer = /** @class */ (function () {
     return NoopAnimationStyleNormalizer;
 }());
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var WebAnimationsStyleNormalizer = /** @class */ (function (_super) {
     __extends(WebAnimationsStyleNormalizer, _super);
     function WebAnimationsStyleNormalizer() {
@@ -2062,7 +2150,7 @@ var AnimationTransitionFactory = /** @class */ (function () {
         var backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
         return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
     };
-    AnimationTransitionFactory.prototype.build = function (driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions) {
+    AnimationTransitionFactory.prototype.build = function (driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions, skipAstBuild) {
         var errors = [];
         var transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
         var currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
@@ -2074,7 +2162,7 @@ var AnimationTransitionFactory = /** @class */ (function () {
         var postStyleMap = new Map();
         var isRemoval = nextState === 'void';
         var animationOptions = { params: __assign({}, transitionAnimationParams, nextAnimationParams) };
-        var timelines = buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
+        var timelines = skipAstBuild ? [] : buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
         var totalTime = 0;
         timelines.forEach(function (tl) { totalTime = Math.max(tl.duration + tl.delay, totalTime); });
         if (errors.length) {
@@ -2194,9 +2282,17 @@ function balanceProperties(obj, key1, key2) {
     }
 }
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var EMPTY_INSTRUCTION_MAP = new ElementInstructionMap();
 var TimelineAnimationEngine = /** @class */ (function () {
-    function TimelineAnimationEngine(_driver, _normalizer) {
+    function TimelineAnimationEngine(bodyNode, _driver, _normalizer) {
+        this.bodyNode = bodyNode;
         this._driver = _driver;
         this._normalizer = _normalizer;
         this._animations = {};
@@ -2315,6 +2411,13 @@ var TimelineAnimationEngine = /** @class */ (function () {
     return TimelineAnimationEngine;
 }());
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var QUEUED_CLASSNAME = 'ng-animate-queued';
 var QUEUED_SELECTOR = '.ng-animate-queued';
 var DISABLED_CLASSNAME = 'ng-animate-disabled';
@@ -2364,7 +2467,7 @@ var StateValue = /** @class */ (function () {
     StateValue.prototype.absorbOptions = function (options) {
         var newParams = options.params;
         if (newParams) {
-            var oldParams_1 = (this.options.params);
+            var oldParams_1 = this.options.params;
             Object.keys(newParams).forEach(function (prop) {
                 if (oldParams_1[prop] == null) {
                     oldParams_1[prop] = newParams[prop];
@@ -2376,7 +2479,6 @@ var StateValue = /** @class */ (function () {
 }());
 var VOID_VALUE = 'void';
 var DEFAULT_STATE_VALUE = new StateValue(VOID_VALUE);
-var DELETED_STATE_VALUE = new StateValue('DELETED');
 var AnimationTransitionNamespace = /** @class */ (function () {
     function AnimationTransitionNamespace(id, hostElement, _engine) {
         this.id = id;
@@ -2410,9 +2512,6 @@ var AnimationTransitionNamespace = /** @class */ (function () {
             triggersWithStates[name] = DEFAULT_STATE_VALUE;
         }
         return function () {
-            // the event listener is removed AFTER the flush has occurred such
-            // that leave animations callbacks can fire (otherwise if the node
-            // is removed in between then the listeners would be deregistered)
             // the event listener is removed AFTER the flush has occurred such
             // that leave animations callbacks can fire (otherwise if the node
             // is removed in between then the listeners would be deregistered)
@@ -2465,9 +2564,6 @@ var AnimationTransitionNamespace = /** @class */ (function () {
         if (!fromState) {
             fromState = DEFAULT_STATE_VALUE;
         }
-        else if (fromState === DELETED_STATE_VALUE) {
-            return player;
-        }
         var isRemoval = toState.value === VOID_VALUE;
         // normally this isn't reached by here, however, if an object expression
         // is passed in then it may be a new object each time. Comparing the value
@@ -2609,7 +2705,7 @@ var AnimationTransitionNamespace = /** @class */ (function () {
                 visitedTriggers_1.add(triggerName);
                 var trigger = _this._triggers[triggerName];
                 var transition = trigger.fallbackTransition;
-                var elementStates = (_this._engine.statesByElement.get(element));
+                var elementStates = _this._engine.statesByElement.get(element);
                 var fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE;
                 var toState = new StateValue(VOID_VALUE);
                 var player = new TransitionAnimationPlayer(_this.id, triggerName, element);
@@ -2733,7 +2829,8 @@ var AnimationTransitionNamespace = /** @class */ (function () {
     return AnimationTransitionNamespace;
 }());
 var TransitionAnimationEngine = /** @class */ (function () {
-    function TransitionAnimationEngine(driver, _normalizer) {
+    function TransitionAnimationEngine(bodyNode, driver, _normalizer) {
+        this.bodyNode = bodyNode;
         this.driver = driver;
         this._normalizer = _normalizer;
         this.players = [];
@@ -2755,9 +2852,7 @@ var TransitionAnimationEngine = /** @class */ (function () {
         this.onRemovalComplete = function (element, context) { };
     }
     /** @internal */
-    /** @internal */
-    TransitionAnimationEngine.prototype._onRemovalComplete = /** @internal */
-    function (element, context) { this.onRemovalComplete(element, context); };
+    TransitionAnimationEngine.prototype._onRemovalComplete = function (element, context) { this.onRemovalComplete(element, context); };
     Object.defineProperty(TransitionAnimationEngine.prototype, "queuedPlayers", {
         get: function () {
             var players = [];
@@ -2949,8 +3044,8 @@ var TransitionAnimationEngine = /** @class */ (function () {
         }
         return function () { };
     };
-    TransitionAnimationEngine.prototype._buildInstruction = function (entry, subTimelines, enterClassName, leaveClassName) {
-        return entry.transition.build(this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName, leaveClassName, entry.fromState.options, entry.toState.options, subTimelines);
+    TransitionAnimationEngine.prototype._buildInstruction = function (entry, subTimelines, enterClassName, leaveClassName, skipBuildAst) {
+        return entry.transition.build(this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName, leaveClassName, entry.fromState.options, entry.toState.options, subTimelines, skipBuildAst);
     };
     TransitionAnimationEngine.prototype.destroyInnerAnimations = function (containerElement) {
         var _this = this;
@@ -2976,10 +3071,6 @@ var TransitionAnimationEngine = /** @class */ (function () {
                 }
             });
         }
-        var stateMap = this.statesByElement.get(element);
-        if (stateMap) {
-            Object.keys(stateMap).forEach(function (triggerName) { return stateMap[triggerName] = DELETED_STATE_VALUE; });
-        }
     };
     TransitionAnimationEngine.prototype.finishActiveQueriedAnimationOnElement = function (element) {
         var players = this.playersByQueriedElement.get(element);
@@ -3091,7 +3182,7 @@ var TransitionAnimationEngine = /** @class */ (function () {
                 disabledElementsSet.add(nodesThatAreDisabled[i_1]);
             }
         });
-        var bodyNode = getBodyNode();
+        var bodyNode = this.bodyNode;
         var allTriggerElements = Array.from(this.statesByElement.keys());
         var enterNodeMap = buildRootMap(allTriggerElements, this.collectedEnterElements);
         // this must occur before the instructions are built below such that
@@ -3130,11 +3221,11 @@ var TransitionAnimationEngine = /** @class */ (function () {
         });
         cleanupFns.push(function () {
             enterNodeMap.forEach(function (nodes, root) {
-                var className = (enterNodeMapIds.get(root));
+                var className = enterNodeMapIds.get(root);
                 nodes.forEach(function (node) { return removeClass(node, className); });
             });
             leaveNodeMap.forEach(function (nodes, root) {
-                var className = (leaveNodeMapIds.get(root));
+                var className = leaveNodeMapIds.get(root);
                 nodes.forEach(function (node) { return removeClass(node, className); });
             });
             allLeaveNodes.forEach(function (element) { _this.processLeaveNode(element); });
@@ -3155,17 +3246,24 @@ var TransitionAnimationEngine = /** @class */ (function () {
                         return;
                     }
                 }
-                if (!bodyNode || !_this.driver.containsElement(bodyNode, element)) {
-                    player.destroy();
-                    return;
-                }
-                var leaveClassName = (leaveNodeMapIds.get(element));
-                var enterClassName = (enterNodeMapIds.get(element));
-                var instruction = (_this._buildInstruction(entry, subTimelines, enterClassName, leaveClassName));
+                var nodeIsOrphaned = !bodyNode || !_this.driver.containsElement(bodyNode, element);
+                var leaveClassName = leaveNodeMapIds.get(element);
+                var enterClassName = enterNodeMapIds.get(element);
+                var instruction = _this._buildInstruction(entry, subTimelines, enterClassName, leaveClassName, nodeIsOrphaned);
                 if (instruction.errors && instruction.errors.length) {
                     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
+                // projection and/or dynamic component insertion) therefore it's
+                // important we still style the element.
+                if (nodeIsOrphaned) {
+                    player.onStart(function () { return eraseStyles(element, instruction.fromStyles); });
+                    player.onDestroy(function () { return 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 (entry.isFallbackTransition) {
@@ -3187,7 +3285,7 @@ var TransitionAnimationEngine = /** @class */ (function () {
                 instruction.preStyleProps.forEach(function (stringMap, element) {
                     var props = Object.keys(stringMap);
                     if (props.length) {
-                        var setVal_1 = (allPreStyleElements.get(element));
+                        var setVal_1 = allPreStyleElements.get(element);
                         if (!setVal_1) {
                             allPreStyleElements.set(element, setVal_1 = new Set());
                         }
@@ -3196,7 +3294,7 @@ var TransitionAnimationEngine = /** @class */ (function () {
                 });
                 instruction.postStyleProps.forEach(function (stringMap, element) {
                     var props = Object.keys(stringMap);
-                    var setVal = (allPostStyleElements.get(element));
+                    var setVal = allPostStyleElements.get(element);
                     if (!setVal) {
                         allPostStyleElements.set(element, setVal = new Set());
                     }
@@ -3625,9 +3723,7 @@ var TransitionAnimationPlayer = /** @class */ (function () {
     };
     TransitionAnimationPlayer.prototype.getPosition = function () { return this.queued ? 0 : this._player.getPosition(); };
     /* @internal */
-    /* @internal */
-    TransitionAnimationPlayer.prototype.triggerCallback = /* @internal */
-    function (phaseName) {
+    TransitionAnimationPlayer.prototype.triggerCallback = function (phaseName) {
         var p = this._player;
         if (p.triggerCallback) {
             p.triggerCallback(phaseName);
@@ -3729,15 +3825,12 @@ function buildRootMap(roots, nodes) {
             return root;
         var parent = node.parentNode;
         if (rootMap.has(parent)) {
-            // ngIf inside @trigger
             root = parent;
         }
         else if (nodeSet.has(parent)) {
-            // ngIf inside ngIf
             root = NULL_NODE;
         }
         else {
-            // recurse upwards
             root = getRoot(parent);
         }
         localRootMap.set(node, root);
@@ -3822,14 +3915,15 @@ function replacePostStylesAsPre(element, allPreStyleElements, allPostStyleElemen
 }
 
 var AnimationEngine = /** @class */ (function () {
-    function AnimationEngine(_driver, normalizer) {
+    function AnimationEngine(bodyNode, _driver, normalizer) {
         var _this = this;
+        this.bodyNode = bodyNode;
         this._driver = _driver;
         this._triggerCache = {};
         // this method is designed to be overridden by the code that uses this engine
         this.onRemovalComplete = function (element, context) { };
-        this._transitionEngine = new TransitionAnimationEngine(_driver, normalizer);
-        this._timelineEngine = new TimelineAnimationEngine(_driver, normalizer);
+        this._transitionEngine = new TransitionAnimationEngine(bodyNode, _driver, normalizer);
+        this._timelineEngine = new TimelineAnimationEngine(bodyNode, _driver, normalizer);
         this._transitionEngine.onRemovalComplete = function (element, context) {
             return _this.onRemovalComplete(element, context);
         };
@@ -4127,9 +4221,7 @@ var CssKeyframesPlayer = /** @class */ (function () {
         this._styler = new ElementAnimationStyleHandler(this.element, this.animationName, this._duration, this._delay, this.easing, DEFAULT_FILL_MODE, function () { return _this.finish(); });
     };
     /* @internal */
-    /* @internal */
-    CssKeyframesPlayer.prototype.triggerCallback = /* @internal */
-    function (phaseName) {
+    CssKeyframesPlayer.prototype.triggerCallback = function (phaseName) {
         var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
         methods.forEach(function (fn) { return fn(); });
         methods.length = 0;
@@ -4151,6 +4243,13 @@ var CssKeyframesPlayer = /** @class */ (function () {
     return CssKeyframesPlayer;
 }());
 
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 var DirectStylePlayer = /** @class */ (function (_super) {
     __extends(DirectStylePlayer, _super);
     function DirectStylePlayer(element, styles) {
@@ -4355,9 +4454,7 @@ var WebAnimationsPlayer = /** @class */ (function () {
         }
     };
     /** @internal */
-    /** @internal */
-    WebAnimationsPlayer.prototype._triggerWebAnimation = /** @internal */
-    function (element, keyframes, options) {
+    WebAnimationsPlayer.prototype._triggerWebAnimation = function (element, keyframes, options) {
         // jscompiler doesn't seem to know animate is a native property because it's not fully
         // supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
         return element['animate'](keyframes, options);
@@ -4429,9 +4526,7 @@ var WebAnimationsPlayer = /** @class */ (function () {
         this.currentSnapshot = styles;
     };
     /* @internal */
-    /* @internal */
-    WebAnimationsPlayer.prototype.triggerCallback = /* @internal */
-    function (phaseName) {
+    WebAnimationsPlayer.prototype.triggerCallback = function (phaseName) {
         var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
         methods.forEach(function (fn) { return fn(); });
         methods.length = 0;
@@ -4487,7 +4582,7 @@ function supportsWebAnimations() {
     return typeof getElementAnimateFn() === 'function';
 }
 function getElementAnimateFn() {
-    return (typeof Element !== 'undefined' && Element.prototype['animate']) || {};
+    return (isBrowser() && Element.prototype['animate']) || {};
 }
 
 /**
@@ -4505,6 +4600,24 @@ function getElementAnimateFn() {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+/**
+ * @module
+ * @description
+ * Entry point for all animation APIs of the animation browser package.
+ */
+
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of this package.
+ */
 
 /**
  * @license
@@ -4513,6 +4626,10 @@ function getElementAnimateFn() {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+// This file is not used to build this module. It is only used during editing
+// by the TypeScript language service and during build for verifcation. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
 
 /**
  * Generated bundle index. Do not edit.