@angular/animations 13.2.3 → 14.0.0-next.3

package/fesm2020/browser.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v13.2.3
+ * @license Angular v14.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -170,26 +170,26 @@ function optimizeGroupPlayer(players) {
             return new ɵAnimationGroupPlayer(players);
     }
 }
-function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles = {}, postStyles = {}) {
+function normalizeKeyframes$1(driver, normalizer, element, keyframes, preStyles = new Map(), postStyles = new Map()) {
     const errors = [];
     const normalizedKeyframes = [];
     let previousOffset = -1;
     let previousKeyframe = null;
     keyframes.forEach(kf => {
-        const offset = kf['offset'];
+        const offset = kf.get('offset');
         const isSameOffset = offset == previousOffset;
-        const normalizedKeyframe = (isSameOffset && previousKeyframe) || {};
-        Object.keys(kf).forEach(prop => {
+        const normalizedKeyframe = (isSameOffset && previousKeyframe) || new Map();
+        kf.forEach((val, prop) => {
             let normalizedProp = prop;
-            let normalizedValue = kf[prop];
+            let normalizedValue = val;
             if (prop !== 'offset') {
                 normalizedProp = normalizer.normalizePropertyName(normalizedProp, errors);
                 switch (normalizedValue) {
                     case ɵPRE_STYLE:
-                        normalizedValue = preStyles[prop];
+                        normalizedValue = preStyles.get(prop);
                         break;
                     case AUTO_STYLE:
-                        normalizedValue = postStyles[prop];
+                        normalizedValue = postStyles.get(prop);
                         break;
                     default:
                         normalizedValue =
@@ -197,7 +197,7 @@ function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles =
                         break;
                 }
             }
-            normalizedKeyframe[normalizedProp] = normalizedValue;
+            normalizedKeyframe.set(normalizedProp, normalizedValue);
         });
         if (!isSameOffset) {
             normalizedKeyframes.push(normalizedKeyframe);
@@ -236,19 +236,10 @@ function copyAnimationEvent(e, phaseName, player) {
 function makeAnimationEvent(element, triggerName, fromState, toState, phaseName = '', totalTime = 0, disabled) {
     return { element, triggerName, fromState, toState, phaseName, totalTime, disabled: !!disabled };
 }
-function getOrSetAsInMap(map, key, defaultValue) {
-    let value;
-    if (map instanceof Map) {
-        value = map.get(key);
-        if (!value) {
-            map.set(key, value = defaultValue);
-        }
-    }
-    else {
-        value = map[key];
-        if (!value) {
-            value = map[key] = defaultValue;
-        }
+function getOrSetDefaultValue(map, key, defaultValue) {
+    let value = map.get(key);
+    if (!value) {
+        map.set(key, value = defaultValue);
     }
     return value;
 }
@@ -262,6 +253,14 @@ let _contains = (elm1, elm2) => false;
 let _query = (element, selector, multi) => {
     return [];
 };
+let _documentElement = null;
+function getParentElement(element) {
+    const parent = element.parentNode || element.host; // consider host to support shadow DOM
+    if (parent === _documentElement) {
+        return null;
+    }
+    return parent;
+}
 // Define utility methods for browsers and platform-server(domino) where Element
 // and utility methods exist.
 const _isNode = isNode();
@@ -270,12 +269,15 @@ if (_isNode || typeof Element !== 'undefined') {
         _contains = (elm1, elm2) => elm1.contains(elm2);
     }
     else {
+        // Read the document element in an IIFE that's been marked pure to avoid a top-level property
+        // read that may prevent tree-shaking.
+        _documentElement = /* @__PURE__ */ (() => document.documentElement)();
         _contains = (elm1, elm2) => {
-            while (elm2 && elm2 !== document.documentElement) {
+            while (elm2) {
                 if (elm2 === elm1) {
                     return true;
                 }
-                elm2 = elm2.parentNode || elm2.host; // consider host to support shadow DOM
+                elm2 = getParentElement(elm2);
             }
             return false;
         };
@@ -318,13 +320,13 @@ function getBodyNode() {
 }
 const containsElement = _contains;
 const invokeQuery = _query;
-function hypenatePropsObject(object) {
-    const newObj = {};
-    Object.keys(object).forEach(prop => {
+function hypenatePropsKeys(original) {
+    const newMap = new Map();
+    original.forEach((val, prop) => {
         const newProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2');
-        newObj[newProp] = object[prop];
+        newMap.set(newProp, val);
     });
-    return newObj;
+    return newMap;
 }
 
 /**
@@ -348,6 +350,9 @@ class NoopAnimationDriver {
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
     }
+    getParentElement(element) {
+        return getParentElement(element);
+    }
     query(element, selector, multi) {
         return invokeQuery(element, selector, multi);
     }
@@ -358,9 +363,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.3", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -454,27 +459,41 @@ function copyObj(obj, destination = {}) {
     });
     return destination;
 }
+function convertToMap(obj) {
+    const styleMap = new Map();
+    Object.keys(obj).forEach(prop => {
+        const val = obj[prop];
+        styleMap.set(prop, val);
+    });
+    return styleMap;
+}
+function normalizeKeyframes(keyframes) {
+    if (!keyframes.length) {
+        return [];
+    }
+    if (keyframes[0] instanceof Map) {
+        return keyframes;
+    }
+    return keyframes.map(kf => convertToMap(kf));
+}
 function normalizeStyles(styles) {
-    const normalizedStyles = {};
+    const normalizedStyles = new Map();
     if (Array.isArray(styles)) {
-        styles.forEach(data => copyStyles(data, false, normalizedStyles));
+        styles.forEach(data => copyStyles(data, normalizedStyles));
     }
     else {
-        copyStyles(styles, false, normalizedStyles);
+        copyStyles(styles, normalizedStyles);
     }
     return normalizedStyles;
 }
-function copyStyles(styles, readPrototype, destination = {}) {
-    if (readPrototype) {
-        // we make use of a for-in loop so that the
-        // prototypically inherited properties are
-        // revealed from the backFill map
-        for (let prop in styles) {
-            destination[prop] = styles[prop];
+function copyStyles(styles, destination = new Map(), backfill) {
+    if (backfill) {
+        for (let [prop, val] of backfill) {
+            destination.set(prop, val);
         }
     }
-    else {
-        copyObj(styles, destination);
+    for (let [prop, val] of styles) {
+        destination.set(prop, val);
     }
     return destination;
 }
@@ -510,12 +529,12 @@ function writeStyleAttribute(element) {
 }
 function setStyles(element, styles, formerStyles) {
     if (element['style']) {
-        Object.keys(styles).forEach(prop => {
+        styles.forEach((val, prop) => {
             const camelProp = dashCaseToCamelCase(prop);
-            if (formerStyles && !formerStyles.hasOwnProperty(prop)) {
-                formerStyles[prop] = element.style[camelProp];
+            if (formerStyles && !formerStyles.has(prop)) {
+                formerStyles.set(prop, element.style[camelProp]);
             }
-            element.style[camelProp] = styles[prop];
+            element.style[camelProp] = val;
         });
         // On the server set the 'style' attribute since it's not automatically reflected.
         if (isNode()) {
@@ -525,7 +544,7 @@ function setStyles(element, styles, formerStyles) {
 }
 function eraseStyles(element, styles) {
     if (element['style']) {
-        Object.keys(styles).forEach(prop => {
+        styles.forEach((_, prop) => {
             const camelProp = dashCaseToCamelCase(prop);
             element.style[camelProp] = '';
         });
@@ -600,23 +619,19 @@ function allowPreviousPlayerStylesMerge(duration, delay) {
     return duration === 0 || delay === 0;
 }
 function balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles) {
-    const previousStyleProps = Object.keys(previousStyles);
-    if (previousStyleProps.length && keyframes.length) {
+    if (previousStyles.size && keyframes.length) {
         let startingKeyframe = keyframes[0];
         let missingStyleProps = [];
-        previousStyleProps.forEach(prop => {
-            if (!startingKeyframe.hasOwnProperty(prop)) {
+        previousStyles.forEach((val, prop) => {
+            if (!startingKeyframe.has(prop)) {
                 missingStyleProps.push(prop);
             }
-            startingKeyframe[prop] = previousStyles[prop];
+            startingKeyframe.set(prop, val);
         });
         if (missingStyleProps.length) {
-            // tslint:disable-next-line
-            for (var i = 1; i < keyframes.length; i++) {
+            for (let i = 1; i < keyframes.length; i++) {
                 let kf = keyframes[i];
-                missingStyleProps.forEach(function (prop) {
-                    kf[prop] = computeStyle(element, prop);
-                });
+                missingStyleProps.forEach(prop => kf.set(prop, computeStyle(element, prop)));
             }
         }
     }
@@ -796,8 +811,8 @@ class AnimationAstBuilderVisitor {
     }
     _resetContextStyleTimingState(context) {
         context.currentQuerySelector = ROOT_SELECTOR;
-        context.collectedStyles = {};
-        context.collectedStyles[ROOT_SELECTOR] = {};
+        context.collectedStyles = new Map();
+        context.collectedStyles.set(ROOT_SELECTOR, new Map());
         context.currentTime = 0;
     }
     visitTrigger(metadata, context) {
@@ -845,11 +860,10 @@ class AnimationAstBuilderVisitor {
         if (styleAst.containsDynamicStyles) {
             const missingSubs = new Set();
             const params = astParams || {};
-            styleAst.styles.forEach(value => {
-                if (isObject(value)) {
-                    const stylesObj = value;
-                    Object.keys(stylesObj).forEach(prop => {
-                        extractStyleParams(stylesObj[prop]).forEach(sub => {
+            styleAst.styles.forEach(style => {
+                if (style instanceof Map) {
+                    style.forEach(value => {
+                        extractStyleParams(value).forEach(sub => {
                             if (!params.hasOwnProperty(sub)) {
                                 missingSubs.add(sub);
                             }
@@ -945,37 +959,30 @@ class AnimationAstBuilderVisitor {
     }
     _makeStyleAst(metadata, context) {
         const styles = [];
-        if (Array.isArray(metadata.styles)) {
-            metadata.styles.forEach(styleTuple => {
-                if (typeof styleTuple == 'string') {
-                    if (styleTuple == AUTO_STYLE) {
-                        styles.push(styleTuple);
-                    }
-                    else {
-                        context.errors.push(invalidStyleValue(styleTuple));
-                    }
+        const metadataStyles = Array.isArray(metadata.styles) ? metadata.styles : [metadata.styles];
+        for (let styleTuple of metadataStyles) {
+            if (typeof styleTuple === 'string') {
+                if (styleTuple === AUTO_STYLE) {
+                    styles.push(styleTuple);
                 }
                 else {
-                    styles.push(styleTuple);
+                    context.errors.push(invalidStyleValue(styleTuple));
                 }
-            });
-        }
-        else {
-            styles.push(metadata.styles);
+            }
+            else {
+                styles.push(convertToMap(styleTuple));
+            }
         }
         let containsDynamicStyles = false;
         let collectedEasing = null;
         styles.forEach(styleData => {
-            if (isObject(styleData)) {
-                const styleMap = styleData;
-                const easing = styleMap['easing'];
-                if (easing) {
-                    collectedEasing = easing;
-                    delete styleMap['easing'];
+            if (styleData instanceof Map) {
+                if (styleData.has('easing')) {
+                    collectedEasing = styleData.get('easing');
+                    styleData.delete('easing');
                 }
                 if (!containsDynamicStyles) {
-                    for (let prop in styleMap) {
-                        const value = styleMap[prop];
+                    for (let value of styleData.values()) {
                         if (value.toString().indexOf(SUBSTITUTION_EXPR_START) >= 0) {
                             containsDynamicStyles = true;
                             break;
@@ -1001,15 +1008,17 @@ class AnimationAstBuilderVisitor {
             startTime -= timings.duration + timings.delay;
         }
         ast.styles.forEach(tuple => {
-            if (typeof tuple == 'string')
+            if (typeof tuple === 'string')
                 return;
-            Object.keys(tuple).forEach(prop => {
+            tuple.forEach((value, prop) => {
                 if (!this._driver.validateStyleProperty(prop)) {
                     context.errors.push(invalidProperty(prop));
                     return;
                 }
-                const collectedStyles = context.collectedStyles[context.currentQuerySelector];
-                const collectedEntry = collectedStyles[prop];
+                // 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.
+                const collectedStyles = context.collectedStyles.get(context.currentQuerySelector);
+                const collectedEntry = collectedStyles.get(prop);
                 let updateCollectedStyle = true;
                 if (collectedEntry) {
                     if (startTime != endTime && startTime >= collectedEntry.startTime &&
@@ -1023,10 +1032,10 @@ class AnimationAstBuilderVisitor {
                     startTime = collectedEntry.startTime;
                 }
                 if (updateCollectedStyle) {
-                    collectedStyles[prop] = { startTime, endTime };
+                    collectedStyles.set(prop, { startTime, endTime });
                 }
                 if (context.options) {
-                    validateStyleParams(tuple[prop], context.options, context.errors);
+                    validateStyleParams(value, context.options, context.errors);
                 }
             });
         });
@@ -1115,7 +1124,7 @@ class AnimationAstBuilderVisitor {
         const [selector, includeSelf] = normalizeSelector(metadata.selector);
         context.currentQuerySelector =
             parentSelector.length ? (parentSelector + ' ' + selector) : selector;
-        getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {});
+        getOrSetDefaultValue(context.collectedStyles, context.currentQuerySelector, new Map());
         const animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context);
         context.currentQuery = null;
         context.currentQuerySelector = parentSelector;
@@ -1170,7 +1179,7 @@ class AnimationAstBuilderContext {
         this.currentQuerySelector = null;
         this.currentAnimateTimings = null;
         this.currentTime = 0;
-        this.collectedStyles = {};
+        this.collectedStyles = new Map();
         this.options = null;
     }
 }
@@ -1180,23 +1189,20 @@ function consumeOffset(styles) {
     let offset = null;
     if (Array.isArray(styles)) {
         styles.forEach(styleTuple => {
-            if (isObject(styleTuple) && styleTuple.hasOwnProperty('offset')) {
+            if (styleTuple instanceof Map && styleTuple.has('offset')) {
                 const obj = styleTuple;
-                offset = parseFloat(obj['offset']);
-                delete obj['offset'];
+                offset = parseFloat(obj.get('offset'));
+                obj.delete('offset');
             }
         });
     }
-    else if (isObject(styles) && styles.hasOwnProperty('offset')) {
+    else if (styles instanceof Map && styles.has('offset')) {
         const obj = styles;
-        offset = parseFloat(obj['offset']);
-        delete obj['offset'];
+        offset = parseFloat(obj.get('offset'));
+        obj.delete('offset');
     }
     return offset;
 }
-function isObject(value) {
-    return !Array.isArray(value) && typeof value == 'object';
-}
 function constructTimingAst(value, errors) {
     let timings = null;
     if (value.hasOwnProperty('duration')) {
@@ -1304,7 +1310,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * ```
  *
  * For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
- * combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
+ * combination of AST traversal and merge-sort-like algorithms are used.
  *
  * [AST Traversal]
  * Each of the animation verbs, when executed, will return an string-map object representing what
@@ -1350,23 +1356,18 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * from all previous animation steps. Therefore when a keyframe is created it would also be missing
  * 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 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.
+ * timeline) or a default value of `*` into the backFill map. The `copyStyles` method in util.ts
+ * handles propagating that backfill map to the styles object.
  *
  * When a sub-timeline is created it will have its own backFill property. This is done so that
  * styles present within the sub-timeline do not accidentally seep into the previous/future timeline
  * keyframes
  *
- * (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.)
- *
  * [Validation]
  * The code in this file is not responsible for validation. That functionality happens with within
  * the `AnimationValidatorVisitor` code.
  */
-function buildAnimationTimelines(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles = {}, finalStyles = {}, options, subInstructions, errors = []) {
+function buildAnimationTimelines(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles = new Map(), finalStyles = new Map(), options, subInstructions, errors = []) {
     return new AnimationTimelineBuilderVisitor().buildKeyframes(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors);
 }
 class AnimationTimelineBuilderVisitor {
@@ -1374,15 +1375,17 @@ class AnimationTimelineBuilderVisitor {
         subInstructions = subInstructions || new ElementInstructionMap();
         const context = new AnimationTimelineContext(driver, rootElement, subInstructions, enterClassName, leaveClassName, errors, []);
         context.options = options;
+        const delay = options.delay ? resolveTimingValue(options.delay) : 0;
+        context.currentTimeline.delayNextStep(delay);
         context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
         visitDslNode(this, ast, context);
         // this checks to see if an actual animation happened
         const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
-        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)
+        // 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)
+        if (timelines.length && finalStyles.size) {
             let lastRootTimeline;
             for (let i = timelines.length - 1; i >= 0; i--) {
                 const timeline = timelines[i];
@@ -1395,8 +1398,9 @@ class AnimationTimelineBuilderVisitor {
                 lastRootTimeline.setStyles([finalStyles], null, context.errors, options);
             }
         }
-        return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
-            [createTimelineInstruction(rootElement, [], [], [], 0, 0, '', false)];
+        return timelines.length ?
+            timelines.map(timeline => timeline.buildKeyframes()) :
+            [createTimelineInstruction(rootElement, [], [], [], 0, delay, '', false)];
     }
     visitTrigger(ast, context) {
         // these values are not visited in this AST
@@ -1532,7 +1536,7 @@ class AnimationTimelineBuilderVisitor {
         const 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) {
+        if (!timings && timeline.hasCurrentStyleProperties()) {
             timeline.forwardFrame();
         }
         const easing = (timings && timings.easing) || ast.easing;
@@ -1573,7 +1577,7 @@ class AnimationTimelineBuilderVisitor {
         const delay = options.delay ? resolveTimingValue(options.delay) : 0;
         if (delay &&
             (context.previousNode.type === 6 /* Style */ ||
-                (startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) {
+                (startTime == 0 && context.currentTimeline.hasCurrentStyleProperties()))) {
             context.currentTimeline.snapshotCurrentStyles();
             context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
         }
@@ -1767,17 +1771,17 @@ class TimelineBuilder {
         this.startTime = startTime;
         this._elementTimelineStylesLookup = _elementTimelineStylesLookup;
         this.duration = 0;
-        this._previousKeyframe = {};
-        this._currentKeyframe = {};
+        this._previousKeyframe = new Map();
+        this._currentKeyframe = new Map();
         this._keyframes = new Map();
-        this._styleSummary = {};
-        this._pendingStyles = {};
-        this._backFill = {};
+        this._styleSummary = new Map();
+        this._localTimelineStyles = new Map();
+        this._pendingStyles = new Map();
+        this._backFill = new Map();
         this._currentEmptyStepKeyframe = null;
         if (!this._elementTimelineStylesLookup) {
             this._elementTimelineStylesLookup = new Map();
         }
-        this._localTimelineStyles = Object.create(this._backFill, {});
         this._globalTimelineStyles = this._elementTimelineStylesLookup.get(element);
         if (!this._globalTimelineStyles) {
             this._globalTimelineStyles = this._localTimelineStyles;
@@ -1790,13 +1794,13 @@ class TimelineBuilder {
             case 0:
                 return false;
             case 1:
-                return this.getCurrentStyleProperties().length > 0;
+                return this.hasCurrentStyleProperties();
             default:
                 return true;
         }
     }
-    getCurrentStyleProperties() {
-        return Object.keys(this._currentKeyframe);
+    hasCurrentStyleProperties() {
+        return this._currentKeyframe.size > 0;
     }
     get currentTime() {
         return this.startTime + this.duration;
@@ -1806,7 +1810,7 @@ class TimelineBuilder {
         // and that style() step is the very first style() value in the animation
         // then we need to make a copy of the keyframe [0, copy, 1] so that the delay
         // properly applies the style() values to work with the stagger...
-        const hasPreStyleStep = this._keyframes.size == 1 && Object.keys(this._pendingStyles).length;
+        const hasPreStyleStep = this._keyframes.size === 1 && this._pendingStyles.size;
         if (this.duration || hasPreStyleStep) {
             this.forwardTime(this.currentTime + delay);
             if (hasPreStyleStep) {
@@ -1827,7 +1831,7 @@ class TimelineBuilder {
         }
         this._currentKeyframe = this._keyframes.get(this.duration);
         if (!this._currentKeyframe) {
-            this._currentKeyframe = Object.create(this._backFill, {});
+            this._currentKeyframe = new Map();
             this._keyframes.set(this.duration, this._currentKeyframe);
         }
     }
@@ -1841,16 +1845,16 @@ class TimelineBuilder {
         this._loadKeyframe();
     }
     _updateStyle(prop, value) {
-        this._localTimelineStyles[prop] = value;
-        this._globalTimelineStyles[prop] = value;
-        this._styleSummary[prop] = { time: this.currentTime, value };
+        this._localTimelineStyles.set(prop, value);
+        this._globalTimelineStyles.set(prop, value);
+        this._styleSummary.set(prop, { time: this.currentTime, value });
     }
     allowOnlyTimelineStyles() {
         return this._currentEmptyStepKeyframe !== this._currentKeyframe;
     }
     applyEmptyStep(easing) {
         if (easing) {
-            this._previousKeyframe['easing'] = easing;
+            this._previousKeyframe.set('easing', easing);
         }
         // special case for animate(duration):
         // all missing styles are filled with a `*` value then
@@ -1858,51 +1862,45 @@ class TimelineBuilder {
         // keyframe then they will override the overridden styles
         // We use `_globalTimelineStyles` here because there may be
         // styles in previous keyframes that are not present in this timeline
-        Object.keys(this._globalTimelineStyles).forEach(prop => {
-            this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
-            this._currentKeyframe[prop] = AUTO_STYLE;
-        });
+        for (let [prop, value] of this._globalTimelineStyles) {
+            this._backFill.set(prop, value || AUTO_STYLE);
+            this._currentKeyframe.set(prop, AUTO_STYLE);
+        }
         this._currentEmptyStepKeyframe = this._currentKeyframe;
     }
     setStyles(input, easing, errors, options) {
         if (easing) {
-            this._previousKeyframe['easing'] = easing;
+            this._previousKeyframe.set('easing', easing);
         }
         const params = (options && options.params) || {};
         const styles = flattenStyles(input, this._globalTimelineStyles);
-        Object.keys(styles).forEach(prop => {
-            const val = interpolateParams(styles[prop], params, errors);
-            this._pendingStyles[prop] = val;
-            if (!this._localTimelineStyles.hasOwnProperty(prop)) {
-                this._backFill[prop] = this._globalTimelineStyles.hasOwnProperty(prop) ?
-                    this._globalTimelineStyles[prop] :
-                    AUTO_STYLE;
+        for (let [prop, value] of styles) {
+            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._updateStyle(prop, val);
-        });
+        }
     }
     applyStylesToKeyframe() {
-        const styles = this._pendingStyles;
-        const props = Object.keys(styles);
-        if (props.length == 0)
+        if (this._pendingStyles.size == 0)
             return;
-        this._pendingStyles = {};
-        props.forEach(prop => {
-            const val = styles[prop];
-            this._currentKeyframe[prop] = val;
+        this._pendingStyles.forEach((val, prop) => {
+            this._currentKeyframe.set(prop, val);
         });
-        Object.keys(this._localTimelineStyles).forEach(prop => {
-            if (!this._currentKeyframe.hasOwnProperty(prop)) {
-                this._currentKeyframe[prop] = this._localTimelineStyles[prop];
+        this._pendingStyles.clear();
+        this._localTimelineStyles.forEach((val, prop) => {
+            if (!this._currentKeyframe.has(prop)) {
+                this._currentKeyframe.set(prop, val);
             }
         });
     }
     snapshotCurrentStyles() {
-        Object.keys(this._localTimelineStyles).forEach(prop => {
-            const val = this._localTimelineStyles[prop];
-            this._pendingStyles[prop] = val;
+        for (let [prop, val] of this._localTimelineStyles) {
+            this._pendingStyles.set(prop, val);
             this._updateStyle(prop, val);
-        });
+        }
     }
     getFinalKeyframe() {
         return this._keyframes.get(this.duration);
@@ -1915,9 +1913,8 @@ class TimelineBuilder {
         return properties;
     }
     mergeTimelineCollectedStyles(timeline) {
-        Object.keys(timeline._styleSummary).forEach(prop => {
-            const details0 = this._styleSummary[prop];
-            const details1 = timeline._styleSummary[prop];
+        timeline._styleSummary.forEach((details1, prop) => {
+            const details0 = this._styleSummary.get(prop);
             if (!details0 || details1.time > details0.time) {
                 this._updateStyle(prop, details1.value);
             }
@@ -1930,18 +1927,17 @@ class TimelineBuilder {
         const isEmpty = this._keyframes.size === 1 && this.duration === 0;
         let finalKeyframes = [];
         this._keyframes.forEach((keyframe, time) => {
-            const finalKeyframe = copyStyles(keyframe, true);
-            Object.keys(finalKeyframe).forEach(prop => {
-                const value = finalKeyframe[prop];
-                if (value == ɵPRE_STYLE) {
+            const finalKeyframe = copyStyles(keyframe, new Map(), this._backFill);
+            finalKeyframe.forEach((value, prop) => {
+                if (value === ɵPRE_STYLE) {
                     preStyleProps.add(prop);
                 }
-                else if (value == AUTO_STYLE) {
+                else if (value === AUTO_STYLE) {
                     postStyleProps.add(prop);
                 }
             });
             if (!isEmpty) {
-                finalKeyframe['offset'] = time / this.duration;
+                finalKeyframe.set('offset', time / this.duration);
             }
             finalKeyframes.push(finalKeyframe);
         });
@@ -1950,9 +1946,9 @@ class TimelineBuilder {
         // special case for a 0-second animation (which is designed just to place styles onscreen)
         if (isEmpty) {
             const kf0 = finalKeyframes[0];
-            const kf1 = copyObj(kf0);
-            kf0['offset'] = 0;
-            kf1['offset'] = 1;
+            const kf1 = new Map(kf0);
+            kf0.set('offset', 0);
+            kf1.set('offset', 1);
             finalKeyframes = [kf0, kf1];
         }
         return createTimelineInstruction(this.element, finalKeyframes, preProps, postProps, this.duration, this.startTime, this.easing, false);
@@ -1978,11 +1974,11 @@ class SubTimelineBuilder extends TimelineBuilder {
             const totalTime = duration + delay;
             const startingGap = delay / totalTime;
             // the original starting keyframe now starts once the delay is done
-            const newFirstKeyframe = copyStyles(keyframes[0], false);
-            newFirstKeyframe['offset'] = 0;
+            const newFirstKeyframe = copyStyles(keyframes[0]);
+            newFirstKeyframe.set('offset', 0);
             newKeyframes.push(newFirstKeyframe);
-            const oldFirstKeyframe = copyStyles(keyframes[0], false);
-            oldFirstKeyframe['offset'] = roundOffset(startingGap);
+            const oldFirstKeyframe = copyStyles(keyframes[0]);
+            oldFirstKeyframe.set('offset', roundOffset(startingGap));
             newKeyframes.push(oldFirstKeyframe);
             /*
               When the keyframe is stretched then it means that the delay before the animation
@@ -2001,10 +1997,10 @@ class SubTimelineBuilder extends TimelineBuilder {
             // offsets between 1 ... n -1 are all warped by the keyframe stretch
             const limit = keyframes.length - 1;
             for (let i = 1; i <= limit; i++) {
-                let kf = copyStyles(keyframes[i], false);
-                const oldOffset = kf['offset'];
+                let kf = copyStyles(keyframes[i]);
+                const oldOffset = kf.get('offset');
                 const timeAtKeyframe = delay + oldOffset * duration;
-                kf['offset'] = roundOffset(timeAtKeyframe / totalTime);
+                kf.set('offset', roundOffset(timeAtKeyframe / totalTime));
                 newKeyframes.push(kf);
             }
             // the new starting keyframe should be added at the start
@@ -2021,17 +2017,17 @@ function roundOffset(offset, decimalPoints = 3) {
     return Math.round(offset * mult) / mult;
 }
 function flattenStyles(input, allStyles) {
-    const styles = {};
+    const styles = new Map();
     let allProperties;
     input.forEach(token => {
         if (token === '*') {
-            allProperties = allProperties || Object.keys(allStyles);
-            allProperties.forEach(prop => {
-                styles[prop] = AUTO_STYLE;
-            });
+            allProperties = allProperties || allStyles.keys();
+            for (let prop of allProperties) {
+                styles.set(prop, AUTO_STYLE);
+            }
         }
         else {
-            copyStyles(token, false, styles);
+            copyStyles(token, styles);
         }
     });
     return styles;
@@ -2093,6 +2089,37 @@ class NoopAnimationStyleNormalizer {
  * 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
  */
+const DIMENSIONAL_PROP_SET = new Set([
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'left',
+    'top',
+    'bottom',
+    'right',
+    'fontSize',
+    'outlineWidth',
+    'outlineOffset',
+    'paddingTop',
+    'paddingLeft',
+    'paddingBottom',
+    'paddingRight',
+    'marginTop',
+    'marginLeft',
+    'marginBottom',
+    'marginRight',
+    'borderRadius',
+    'borderWidth',
+    'borderTopWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'textIndent',
+    'perspective'
+]);
 class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
     normalizePropertyName(propertyName, errors) {
         return dashCaseToCamelCase(propertyName);
@@ -2100,7 +2127,7 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
     normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
         let unit = '';
         const strVal = value.toString().trim();
-        if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') {
+        if (DIMENSIONAL_PROP_SET.has(normalizedProperty) && value !== 0 && value !== '0') {
             if (typeof value === 'number') {
                 unit = 'px';
             }
@@ -2114,14 +2141,14 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
         return strVal + unit;
     }
 }
-const DIMENSIONAL_PROP_MAP = (() => makeBooleanMap('width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent,perspective'
-    .split(',')))();
-function makeBooleanMap(keys) {
-    const map = {};
-    keys.forEach(key => map[key] = true);
-    return map;
-}
 
+/**
+ * @license
+ * Copyright Google LLC 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 createTransitionInstruction(element, triggerName, fromState, toState, isRemovalTransition, fromStyles, toStyles, timelines, queriedElements, preStyleProps, postStyleProps, totalTime, errors) {
     return {
         type: 0 /* TransitionAnimation */,
@@ -2152,10 +2179,11 @@ class AnimationTransitionFactory {
         return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState, element, params);
     }
     buildStyles(stateName, params, errors) {
-        const backupStateStyler = this._stateStyles['*'];
-        const stateStyler = this._stateStyles[stateName];
-        const backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
-        return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
+        let styler = this._stateStyles.get('*');
+        if (stateName !== undefined) {
+            styler = this._stateStyles.get(stateName?.toString()) || styler;
+        }
+        return styler ? styler.buildStyles(params, errors) : new Map();
     }
     build(driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions, skipAstBuild) {
         const errors = [];
@@ -2168,7 +2196,10 @@ class AnimationTransitionFactory {
         const preStyleMap = new Map();
         const postStyleMap = new Map();
         const isRemoval = nextState === 'void';
-        const animationOptions = { params: { ...transitionAnimationParams, ...nextAnimationParams } };
+        const animationOptions = {
+            params: { ...transitionAnimationParams, ...nextAnimationParams },
+            delay: this.ast.options?.delay,
+        };
         const timelines = skipAstBuild ?
             [] :
             buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
@@ -2181,10 +2212,10 @@ class AnimationTransitionFactory {
         }
         timelines.forEach(tl => {
             const elm = tl.element;
-            const preProps = getOrSetAsInMap(preStyleMap, elm, {});
-            tl.preStyleProps.forEach(prop => preProps[prop] = true);
-            const postProps = getOrSetAsInMap(postStyleMap, elm, {});
-            tl.postStyleProps.forEach(prop => postProps[prop] = true);
+            const preProps = getOrSetDefaultValue(preStyleMap, elm, new Set());
+            tl.preStyleProps.forEach(prop => preProps.add(prop));
+            const postProps = getOrSetDefaultValue(postStyleMap, elm, new Set());
+            tl.postStyleProps.forEach(prop => postProps.add(prop));
             if (elm !== element) {
                 queriedElements.add(elm);
             }
@@ -2203,25 +2234,23 @@ class AnimationStateStyles {
         this.normalizer = normalizer;
     }
     buildStyles(params, errors) {
-        const finalStyles = {};
+        const finalStyles = new Map();
         const combinedParams = copyObj(this.defaultParams);
         Object.keys(params).forEach(key => {
             const value = params[key];
-            if (value != null) {
+            if (value !== null) {
                 combinedParams[key] = value;
             }
         });
         this.styles.styles.forEach(value => {
             if (typeof value !== 'string') {
-                const styleObj = value;
-                Object.keys(styleObj).forEach(prop => {
-                    let val = styleObj[prop];
-                    if (val.length > 1) {
+                value.forEach((val, prop) => {
+                    if (val) {
                         val = interpolateParams(val, combinedParams, errors);
                     }
                     const normalizedProp = this.normalizer.normalizePropertyName(prop, errors);
                     val = this.normalizer.normalizeStyleValue(prop, normalizedProp, val, errors);
-                    finalStyles[normalizedProp] = val;
+                    finalStyles.set(normalizedProp, val);
                 });
             }
         });
@@ -2238,10 +2267,10 @@ class AnimationTrigger {
         this.ast = ast;
         this._normalizer = _normalizer;
         this.transitionFactories = [];
-        this.states = {};
+        this.states = new Map();
         ast.states.forEach(ast => {
             const defaultParams = (ast.options && ast.options.params) || {};
-            this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams, _normalizer);
+            this.states.set(ast.name, new AnimationStateStyles(ast.style, defaultParams, _normalizer));
         });
         balanceProperties(this.states, 'true', '1');
         balanceProperties(this.states, 'false', '0');
@@ -2274,14 +2303,14 @@ function createFallbackTransition(triggerName, states, normalizer) {
     };
     return new AnimationTransitionFactory(triggerName, transition, states);
 }
-function balanceProperties(obj, key1, key2) {
-    if (obj.hasOwnProperty(key1)) {
-        if (!obj.hasOwnProperty(key2)) {
-            obj[key2] = obj[key1];
+function balanceProperties(stateMap, key1, key2) {
+    if (stateMap.has(key1)) {
+        if (!stateMap.has(key2)) {
+            stateMap.set(key2, stateMap.get(key1));
         }
     }
-    else if (obj.hasOwnProperty(key2)) {
-        obj[key1] = obj[key2];
+    else if (stateMap.has(key2)) {
+        stateMap.set(key1, stateMap.get(key2));
     }
 }
 
@@ -2298,8 +2327,8 @@ class TimelineAnimationEngine {
         this.bodyNode = bodyNode;
         this._driver = _driver;
         this._normalizer = _normalizer;
-        this._animations = {};
-        this._playersById = {};
+        this._animations = new Map();
+        this._playersById = new Map();
         this.players = [];
     }
     register(id, metadata) {
@@ -2309,24 +2338,24 @@ class TimelineAnimationEngine {
             throw registerFailed(errors);
         }
         else {
-            this._animations[id] = ast;
+            this._animations.set(id, ast);
         }
     }
     _buildPlayer(i, preStyles, postStyles) {
         const element = i.element;
-        const keyframes = normalizeKeyframes(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles);
+        const keyframes = normalizeKeyframes$1(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles);
         return this._driver.animate(element, keyframes, i.duration, i.delay, i.easing, [], true);
     }
     create(id, element, options = {}) {
         const errors = [];
-        const ast = this._animations[id];
+        const ast = this._animations.get(id);
         let instructions;
         const autoStylesMap = new Map();
         if (ast) {
-            instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, {}, {}, options, EMPTY_INSTRUCTION_MAP, errors);
+            instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, new Map(), new Map(), options, EMPTY_INSTRUCTION_MAP, errors);
             instructions.forEach(inst => {
-                const styles = getOrSetAsInMap(autoStylesMap, inst.element, {});
-                inst.postStyleProps.forEach(prop => styles[prop] = null);
+                const styles = getOrSetDefaultValue(autoStylesMap, inst.element, new Map());
+                inst.postStyleProps.forEach(prop => styles.set(prop, null));
             });
         }
         else {
@@ -2337,16 +2366,16 @@ class TimelineAnimationEngine {
             throw createAnimationFailed(errors);
         }
         autoStylesMap.forEach((styles, element) => {
-            Object.keys(styles).forEach(prop => {
-                styles[prop] = this._driver.computeStyle(element, prop, AUTO_STYLE);
+            styles.forEach((_, prop) => {
+                styles.set(prop, this._driver.computeStyle(element, prop, AUTO_STYLE));
             });
         });
         const players = instructions.map(i => {
             const styles = autoStylesMap.get(i.element);
-            return this._buildPlayer(i, {}, styles);
+            return this._buildPlayer(i, new Map(), styles);
         });
         const player = optimizeGroupPlayer(players);
-        this._playersById[id] = player;
+        this._playersById.set(id, player);
         player.onDestroy(() => this.destroy(id));
         this.players.push(player);
         return player;
@@ -2354,14 +2383,14 @@ class TimelineAnimationEngine {
     destroy(id) {
         const player = this._getPlayer(id);
         player.destroy();
-        delete this._playersById[id];
+        this._playersById.delete(id);
         const index = this.players.indexOf(player);
         if (index >= 0) {
             this.players.splice(index, 1);
         }
     }
     _getPlayer(id) {
-        const player = this._playersById[id];
+        const player = this._playersById.get(id);
         if (!player) {
             throw missingPlayer(id);
         }
@@ -2483,14 +2512,14 @@ class AnimationTransitionNamespace {
         this.hostElement = hostElement;
         this._engine = _engine;
         this.players = [];
-        this._triggers = {};
+        this._triggers = new Map();
         this._queue = [];
         this._elementListeners = new Map();
         this._hostClassName = 'ng-tns-' + id;
         addClass(hostElement, this._hostClassName);
     }
     listen(element, name, phase, callback) {
-        if (!this._triggers.hasOwnProperty(name)) {
+        if (!this._triggers.has(name)) {
             throw missingTrigger(phase, name);
         }
         if (phase == null || phase.length == 0) {
@@ -2499,14 +2528,14 @@ class AnimationTransitionNamespace {
         if (!isTriggerEventValid(phase)) {
             throw unsupportedTriggerEvent(phase, name);
         }
-        const listeners = getOrSetAsInMap(this._elementListeners, element, []);
+        const listeners = getOrSetDefaultValue(this._elementListeners, element, []);
         const data = { name, phase, callback };
         listeners.push(data);
-        const triggersWithStates = getOrSetAsInMap(this._engine.statesByElement, element, {});
-        if (!triggersWithStates.hasOwnProperty(name)) {
+        const triggersWithStates = getOrSetDefaultValue(this._engine.statesByElement, element, new Map());
+        if (!triggersWithStates.has(name)) {
             addClass(element, NG_TRIGGER_CLASSNAME);
             addClass(element, NG_TRIGGER_CLASSNAME + '-' + name);
-            triggersWithStates[name] = DEFAULT_STATE_VALUE;
+            triggersWithStates.set(name, DEFAULT_STATE_VALUE);
         }
         return () => {
             // the event listener is removed AFTER the flush has occurred such
@@ -2517,24 +2546,24 @@ class AnimationTransitionNamespace {
                 if (index >= 0) {
                     listeners.splice(index, 1);
                 }
-                if (!this._triggers[name]) {
-                    delete triggersWithStates[name];
+                if (!this._triggers.has(name)) {
+                    triggersWithStates.delete(name);
                 }
             });
         };
     }
     register(name, ast) {
-        if (this._triggers[name]) {
+        if (this._triggers.has(name)) {
             // throw
             return false;
         }
         else {
-            this._triggers[name] = ast;
+            this._triggers.set(name, ast);
             return true;
         }
     }
     _getTrigger(name) {
-        const trigger = this._triggers[name];
+        const trigger = this._triggers.get(name);
         if (!trigger) {
             throw unregisteredTrigger(name);
         }
@@ -2547,15 +2576,15 @@ class AnimationTransitionNamespace {
         if (!triggersWithStates) {
             addClass(element, NG_TRIGGER_CLASSNAME);
             addClass(element, NG_TRIGGER_CLASSNAME + '-' + triggerName);
-            this._engine.statesByElement.set(element, triggersWithStates = {});
+            this._engine.statesByElement.set(element, triggersWithStates = new Map());
         }
-        let fromState = triggersWithStates[triggerName];
+        let fromState = triggersWithStates.get(triggerName);
         const toState = new StateValue(value, this.id);
         const isObj = value && value.hasOwnProperty('value');
         if (!isObj && fromState) {
             toState.absorbOptions(fromState.options);
         }
-        triggersWithStates[triggerName] = toState;
+        triggersWithStates.set(triggerName, toState);
         if (!fromState) {
             fromState = DEFAULT_STATE_VALUE;
         }
@@ -2585,7 +2614,7 @@ class AnimationTransitionNamespace {
             }
             return;
         }
-        const playersOnElement = getOrSetAsInMap(this._engine.playersByElement, element, []);
+        const playersOnElement = getOrSetDefaultValue(this._engine.playersByElement, element, []);
         playersOnElement.forEach(player => {
             // 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
@@ -2629,10 +2658,8 @@ class AnimationTransitionNamespace {
         return player;
     }
     deregister(name) {
-        delete this._triggers[name];
-        this._engine.statesByElement.forEach((stateMap, element) => {
-            delete stateMap[name];
-        });
+        this._triggers.delete(name);
+        this._engine.statesByElement.forEach(stateMap => stateMap.delete(name));
         this._elementListeners.forEach((listeners, element) => {
             this._elementListeners.set(element, listeners.filter(entry => {
                 return entry.name != name;
@@ -2675,11 +2702,11 @@ class AnimationTransitionNamespace {
         const previousTriggersValues = new Map();
         if (triggerStates) {
             const players = [];
-            Object.keys(triggerStates).forEach(triggerName => {
-                previousTriggersValues.set(triggerName, triggerStates[triggerName].value);
+            triggerStates.forEach((state, triggerName) => {
+                previousTriggersValues.set(triggerName, state.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]) {
+                if (this._triggers.has(triggerName)) {
                     const player = this.trigger(element, triggerName, VOID_VALUE, defaultToFallback);
                     if (player) {
                         players.push(player);
@@ -2708,9 +2735,9 @@ class AnimationTransitionNamespace {
                 if (visitedTriggers.has(triggerName))
                     return;
                 visitedTriggers.add(triggerName);
-                const trigger = this._triggers[triggerName];
+                const trigger = this._triggers.get(triggerName);
                 const transition = trigger.fallbackTransition;
-                const fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE;
+                const fromState = elementStates.get(triggerName) || DEFAULT_STATE_VALUE;
                 const toState = new StateValue(VOID_VALUE);
                 const player = new TransitionAnimationPlayer(this.id, triggerName, element);
                 this._engine.totalQueuedPlayers++;
@@ -2892,25 +2919,52 @@ class TransitionAnimationEngine {
         return this._namespaceLookup[namespaceId] = ns;
     }
     _balanceNamespaceList(ns, hostElement) {
-        const limit = this._namespaceList.length - 1;
+        const namespaceList = this._namespaceList;
+        const namespacesByHostElement = this.namespacesByHostElement;
+        const limit = namespaceList.length - 1;
         if (limit >= 0) {
             let found = false;
-            for (let i = limit; i >= 0; i--) {
-                const nextNamespace = this._namespaceList[i];
-                if (this.driver.containsElement(nextNamespace.hostElement, hostElement)) {
-                    this._namespaceList.splice(i + 1, 0, ns);
-                    found = true;
-                    break;
+            if (this.driver.getParentElement !== undefined) {
+                // Fast path for when the driver implements `getParentElement`, which allows us to find the
+                // closest ancestor with an existing namespace that we can then insert `ns` after, without
+                // having to inspect all existing namespaces.
+                let ancestor = this.driver.getParentElement(hostElement);
+                while (ancestor) {
+                    const ancestorNs = namespacesByHostElement.get(ancestor);
+                    if (ancestorNs) {
+                        // An animation namespace has been registered for this ancestor, so we insert `ns`
+                        // right after it to establish top-down ordering of animation namespaces.
+                        const index = namespaceList.indexOf(ancestorNs);
+                        namespaceList.splice(index + 1, 0, ns);
+                        found = true;
+                        break;
+                    }
+                    ancestor = this.driver.getParentElement(ancestor);
+                }
+            }
+            else {
+                // Slow path for backwards compatibility if the driver does not implement
+                // `getParentElement`, to be removed once `getParentElement` is a required method.
+                for (let i = limit; i >= 0; i--) {
+                    const nextNamespace = namespaceList[i];
+                    if (this.driver.containsElement(nextNamespace.hostElement, hostElement)) {
+                        namespaceList.splice(i + 1, 0, ns);
+                        found = true;
+                        break;
+                    }
                 }
             }
             if (!found) {
-                this._namespaceList.splice(0, 0, ns);
+                // No namespace exists that is an ancestor of `ns`, so `ns` is inserted at the front to
+                // ensure that any existing descendants are ordered after `ns`, retaining the desired
+                // top-down ordering.
+                namespaceList.unshift(ns);
             }
         }
         else {
-            this._namespaceList.push(ns);
+            namespaceList.push(ns);
         }
-        this.namespacesByHostElement.set(hostElement, ns);
+        namespacesByHostElement.set(hostElement, ns);
         return ns;
     }
     register(namespaceId, hostElement) {
@@ -2952,11 +3006,9 @@ class TransitionAnimationEngine {
         const namespaces = new Set();
         const elementStates = this.statesByElement.get(element);
         if (elementStates) {
-            const keys = Object.keys(elementStates);
-            for (let i = 0; i < keys.length; i++) {
-                const nsId = elementStates[keys[i]].namespaceId;
-                if (nsId) {
-                    const ns = this._fetchNamespace(nsId);
+            for (let stateValue of elementStates.values()) {
+                if (stateValue.namespaceId) {
+                    const ns = this._fetchNamespace(stateValue.namespaceId);
                     if (ns) {
                         namespaces.add(ns);
                     }
@@ -3263,8 +3315,10 @@ class TransitionAnimationEngine {
                             // 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;
+                            if (triggersWithStates && triggersWithStates.has(entry.triggerName)) {
+                                const state = triggersWithStates.get(entry.triggerName);
+                                state.value = previousValue;
+                                triggersWithStates.set(entry.triggerName, state);
                             }
                         }
                         player.destroy();
@@ -3314,24 +3368,22 @@ class TransitionAnimationEngine {
                 subTimelines.append(element, instruction.timelines);
                 const tuple = { instruction, player, element };
                 queuedInstructions.push(tuple);
-                instruction.queriedElements.forEach(element => getOrSetAsInMap(queriedElements, element, []).push(player));
+                instruction.queriedElements.forEach(element => getOrSetDefaultValue(queriedElements, element, []).push(player));
                 instruction.preStyleProps.forEach((stringMap, element) => {
-                    const props = Object.keys(stringMap);
-                    if (props.length) {
+                    if (stringMap.size) {
                         let setVal = allPreStyleElements.get(element);
                         if (!setVal) {
                             allPreStyleElements.set(element, setVal = new Set());
                         }
-                        props.forEach(prop => setVal.add(prop));
+                        stringMap.forEach((_, prop) => setVal.add(prop));
                     }
                 });
                 instruction.postStyleProps.forEach((stringMap, element) => {
-                    const props = Object.keys(stringMap);
                     let setVal = allPostStyleElements.get(element);
                     if (!setVal) {
                         allPostStyleElements.set(element, setVal = new Set());
                     }
-                    props.forEach(prop => setVal.add(prop));
+                    stringMap.forEach((_, prop) => setVal.add(prop));
                 });
             });
         }
@@ -3360,7 +3412,7 @@ class TransitionAnimationEngine {
             const element = player.element;
             const previousPlayers = this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
             previousPlayers.forEach(prevPlayer => {
-                getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer);
+                getOrSetDefaultValue(allPreviousPlayersMap, element, []).push(prevPlayer);
                 prevPlayer.destroy();
             });
         });
@@ -3390,7 +3442,7 @@ class TransitionAnimationEngine {
         replaceNodes.forEach(node => {
             const post = postStylesMap.get(node);
             const pre = preStylesMap.get(node);
-            postStylesMap.set(node, { ...post, ...pre });
+            postStylesMap.set(node, new Map([...Array.from(post?.entries() ?? []), ...Array.from(pre?.entries() ?? [])]));
         });
         const rootPlayers = [];
         const subPlayers = [];
@@ -3584,7 +3636,7 @@ class TransitionAnimationEngine {
         for (const timelineInstruction of instruction.timelines) {
             const element = timelineInstruction.element;
             const isQueriedElement = element !== rootElement;
-            const players = getOrSetAsInMap(allPreviousPlayersMap, element, []);
+            const players = getOrSetDefaultValue(allPreviousPlayersMap, element, []);
             const previousPlayers = this._getPreviousPlayers(element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState);
             previousPlayers.forEach(player => {
                 const realPlayer = player.getRealPlayer();
@@ -3627,7 +3679,7 @@ class TransitionAnimationEngine {
             });
             const preStyles = preStylesMap.get(element);
             const postStyles = postStylesMap.get(element);
-            const keyframes = normalizeKeyframes(this.driver, this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles);
+            const keyframes = normalizeKeyframes$1(this.driver, this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles);
             const player = this._buildPlayer(timelineInstruction, keyframes, previousPlayers);
             // this means that this particular player belongs to a sub trigger. It is
             // important that we match this player up with the corresponding (@trigger.listener)
@@ -3642,7 +3694,7 @@ class TransitionAnimationEngine {
             return player;
         });
         allQueriedPlayers.forEach(player => {
-            getOrSetAsInMap(this.playersByQueriedElement, player.element, []).push(player);
+            getOrSetDefaultValue(this.playersByQueriedElement, player.element, []).push(player);
             player.onDone(() => deleteOrUnsetInMap(this.playersByQueriedElement, player.element, player));
         });
         allConsumedElements.forEach(element => addClass(element, NG_ANIMATING_CLASSNAME));
@@ -3654,7 +3706,7 @@ class TransitionAnimationEngine {
         // this basically makes all of the callbacks for sub element animations
         // be dependent on the upper players for when they finish
         allSubElements.forEach(element => {
-            getOrSetAsInMap(skippedPlayersMap, element, []).push(player);
+            getOrSetDefaultValue(skippedPlayersMap, element, []).push(player);
         });
         return player;
     }
@@ -3674,7 +3726,7 @@ class TransitionAnimationPlayer {
         this.element = element;
         this._player = new NoopAnimationPlayer();
         this._containsRealPlayer = false;
-        this._queuedCallbacks = {};
+        this._queuedCallbacks = new Map();
         this.destroyed = false;
         this.markedForDestroy = false;
         this.disabled = false;
@@ -3685,10 +3737,10 @@ class TransitionAnimationPlayer {
         if (this._containsRealPlayer)
             return;
         this._player = player;
-        Object.keys(this._queuedCallbacks).forEach(phase => {
-            this._queuedCallbacks[phase].forEach(callback => listenOnPlayer(player, phase, undefined, callback));
+        this._queuedCallbacks.forEach((callbacks, phase) => {
+            callbacks.forEach(callback => listenOnPlayer(player, phase, undefined, callback));
         });
-        this._queuedCallbacks = {};
+        this._queuedCallbacks.clear();
         this._containsRealPlayer = true;
         this.overrideTotalTime(player.totalTime);
         this.queued = false;
@@ -3708,7 +3760,7 @@ class TransitionAnimationPlayer {
         player.onDestroy(() => this.destroy());
     }
     _queueEvent(name, callback) {
-        getOrSetAsInMap(this._queuedCallbacks, name, []).push(callback);
+        getOrSetDefaultValue(this._queuedCallbacks, name, []).push(callback);
     }
     onDone(fn) {
         if (this.queued) {
@@ -3770,29 +3822,14 @@ class TransitionAnimationPlayer {
     }
 }
 function deleteOrUnsetInMap(map, key, value) {
-    let currentValues;
-    if (map instanceof Map) {
-        currentValues = map.get(key);
-        if (currentValues) {
-            if (currentValues.length) {
-                const index = currentValues.indexOf(value);
-                currentValues.splice(index, 1);
-            }
-            if (currentValues.length == 0) {
-                map.delete(key);
-            }
+    let currentValues = map.get(key);
+    if (currentValues) {
+        if (currentValues.length) {
+            const index = currentValues.indexOf(value);
+            currentValues.splice(index, 1);
         }
-    }
-    else {
-        currentValues = map[key];
-        if (currentValues) {
-            if (currentValues.length) {
-                const index = currentValues.indexOf(value);
-                currentValues.splice(index, 1);
-            }
-            if (currentValues.length == 0) {
-                delete map[key];
-            }
+        if (currentValues.length == 0) {
+            map.delete(key);
         }
     }
     return currentValues;
@@ -3819,9 +3856,10 @@ function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, def
     elements.forEach(element => cloakVals.push(cloakElement(element)));
     const failedElements = [];
     elementPropsMap.forEach((props, element) => {
-        const styles = {};
+        const styles = new Map();
         props.forEach(prop => {
-            const value = styles[prop] = driver.computeStyle(element, prop, defaultStyle);
+            const value = driver.computeStyle(element, prop, defaultStyle);
+            styles.set(prop, value);
             // there is no easy way to detect this because a sub element could be removed
             // by a parent animation element being detached.
             if (!value || value.length == 0) {
@@ -4005,13 +4043,6 @@ class AnimationEngine {
     }
 }
 
-/**
- * @license
- * Copyright Google LLC 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
- */
 /**
  * Returns an instance of `SpecialCasedStyles` if and when any special (non animateable) styles are
  * detected.
@@ -4032,7 +4063,7 @@ function packageNonAnimatableStyles(element, styles) {
             endStyles = filterNonAnimatableStyles(styles[styles.length - 1]);
         }
     }
-    else if (styles) {
+    else if (styles instanceof Map) {
         startStyles = filterNonAnimatableStyles(styles);
     }
     return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) :
@@ -4054,7 +4085,7 @@ class SpecialCasedStyles {
         this._state = 0 /* Pending */;
         let initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element);
         if (!initialStyles) {
-            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = {});
+            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = new Map());
         }
         this._initialStyles = initialStyles;
     }
@@ -4097,14 +4128,12 @@ class SpecialCasedStyles {
 SpecialCasedStyles.initialStylesByElement = ( /* @__PURE__ */new WeakMap());
 function filterNonAnimatableStyles(styles) {
     let result = null;
-    const props = Object.keys(styles);
-    for (let i = 0; i < props.length; i++) {
-        const prop = props[i];
+    styles.forEach((val, prop) => {
         if (isNonAnimatableStyle(prop)) {
-            result = result || {};
-            result[prop] = styles[prop];
+            result = result || new Map();
+            result.set(prop, val);
         }
-    }
+    });
     return result;
 }
 function isNonAnimatableStyle(prop) {
@@ -4126,7 +4155,7 @@ class WebAnimationsPlayer {
         this._destroyed = false;
         this.time = 0;
         this.parentPlayer = null;
-        this.currentSnapshot = {};
+        this.currentSnapshot = new Map();
         this._duration = options['duration'];
         this._delay = options['delay'] || 0;
         this.time = this._duration + this._delay;
@@ -4149,7 +4178,7 @@ class WebAnimationsPlayer {
         const keyframes = this.keyframes;
         this.domPlayer =
             this._triggerWebAnimation(this.element, keyframes, this.options);
-        this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
+        this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : new Map();
         this.domPlayer.addEventListener('finish', () => this._onFinish());
     }
     _preparePlayerBeforeStart() {
@@ -4161,11 +4190,18 @@ class WebAnimationsPlayer {
             this.domPlayer.pause();
         }
     }
+    _convertKeyframesToObject(keyframes) {
+        const kfs = [];
+        keyframes.forEach(frame => {
+            kfs.push(Object.fromEntries(frame));
+        });
+        return kfs;
+    }
     /** @internal */
     _triggerWebAnimation(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);
+        return element['animate'](this._convertKeyframesToObject(keyframes), options);
     }
     onStart(fn) {
         this._onStartFns.push(fn);
@@ -4243,15 +4279,15 @@ class WebAnimationsPlayer {
         return this._delay + this._duration;
     }
     beforeDestroy() {
-        const styles = {};
+        const styles = new Map();
         if (this.hasStarted()) {
             // 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 ? finalKeyframe[prop] : computeStyle(this.element, prop);
+            finalKeyframe.forEach((val, prop) => {
+                if (prop !== 'offset') {
+                    styles.set(prop, this._finished ? val : computeStyle(this.element, prop));
                 }
             });
         }
@@ -4259,7 +4295,7 @@ class WebAnimationsPlayer {
     }
     /** @internal */
     triggerCallback(phaseName) {
-        const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+        const methods = phaseName === 'start' ? this._onStartFns : this._onDoneFns;
         methods.forEach(fn => fn());
         methods.length = 0;
     }
@@ -4276,6 +4312,9 @@ class WebAnimationsDriver {
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
     }
+    getParentElement(element) {
+        return getParentElement(element);
+    }
     query(element, selector, multi) {
         return invokeQuery(element, selector, multi);
     }
@@ -4290,18 +4329,17 @@ class WebAnimationsDriver {
         if (easing) {
             playerOptions['easing'] = easing;
         }
-        const previousStyles = {};
+        const previousStyles = new Map();
         const previousWebAnimationPlayers = previousPlayers.filter(player => player instanceof WebAnimationsPlayer);
         if (allowPreviousPlayerStylesMerge(duration, delay)) {
             previousWebAnimationPlayers.forEach(player => {
-                let styles = player.currentSnapshot;
-                Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
+                player.currentSnapshot.forEach((val, prop) => previousStyles.set(prop, val));
             });
         }
-        keyframes = keyframes.map(styles => copyStyles(styles, false));
-        keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
-        const specialStyles = packageNonAnimatableStyles(element, keyframes);
-        return new WebAnimationsPlayer(element, keyframes, playerOptions, specialStyles);
+        let _keyframes = normalizeKeyframes(keyframes).map(styles => copyStyles(styles));
+        _keyframes = balancePreviousStylesIntoKeyframes(element, _keyframes, previousStyles);
+        const specialStyles = packageNonAnimatableStyles(element, _keyframes);
+        return new WebAnimationsPlayer(element, _keyframes, playerOptions, specialStyles);
     }
 }
 
@@ -4341,5 +4379,5 @@ class WebAnimationsDriver {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, validateStyleProperty as ɵvalidateStyleProperty };
+export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, getParentElement as ɵgetParentElement, invokeQuery as ɵinvokeQuery, normalizeKeyframes as ɵnormalizeKeyframes, validateStyleProperty as ɵvalidateStyleProperty };
 //# sourceMappingURL=browser.mjs.map