@angular/animations 14.0.0-next.0 → 14.0.0-next.11

package/fesm2020/browser.mjs

@@ -1,12 +1,360 @@
 /**
- * @license Angular v14.0.0-next.0
+ * @license Angular v14.0.0-next.11
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
 import { ɵAnimationGroupPlayer, NoopAnimationPlayer, AUTO_STYLE, ɵPRE_STYLE, sequence, style } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
+import { ɵRuntimeError, Injectable } from '@angular/core';
+
+/**
+ * @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
+ */
+const NG_DEV_MODE$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
+const LINE_START = '\n - ';
+function invalidTimingValue(exp) {
+    return new ɵRuntimeError(3000 /* INVALID_TIMING_VALUE */, NG_DEV_MODE$1 && `The provided timing value "${exp}" is invalid.`);
+}
+function negativeStepValue() {
+    return new ɵRuntimeError(3100 /* NEGATIVE_STEP_VALUE */, NG_DEV_MODE$1 && 'Duration values below 0 are not allowed for this animation step.');
+}
+function negativeDelayValue() {
+    return new ɵRuntimeError(3101 /* NEGATIVE_DELAY_VALUE */, NG_DEV_MODE$1 && 'Delay values below 0 are not allowed for this animation step.');
+}
+function invalidStyleParams(varName) {
+    return new ɵRuntimeError(3001 /* INVALID_STYLE_PARAMS */, NG_DEV_MODE$1 &&
+        `Unable to resolve the local animation param ${varName} in the given list of values`);
+}
+function invalidParamValue(varName) {
+    return new ɵRuntimeError(3003 /* INVALID_PARAM_VALUE */, NG_DEV_MODE$1 && `Please provide a value for the animation param ${varName}`);
+}
+function invalidNodeType(nodeType) {
+    return new ɵRuntimeError(3004 /* INVALID_NODE_TYPE */, NG_DEV_MODE$1 && `Unable to resolve animation metadata node #${nodeType}`);
+}
+function invalidCssUnitValue(userProvidedProperty, value) {
+    return new ɵRuntimeError(3005 /* INVALID_CSS_UNIT_VALUE */, NG_DEV_MODE$1 && `Please provide a CSS unit value for ${userProvidedProperty}:${value}`);
+}
+function invalidTrigger() {
+    return new ɵRuntimeError(3006 /* INVALID_TRIGGER */, NG_DEV_MODE$1 &&
+        'animation triggers cannot be prefixed with an `@` sign (e.g. trigger(\'@foo\', [...]))');
+}
+function invalidDefinition() {
+    return new ɵRuntimeError(3007 /* INVALID_DEFINITION */, NG_DEV_MODE$1 && 'only state() and transition() definitions can sit inside of a trigger()');
+}
+function invalidState(metadataName, missingSubs) {
+    return new ɵRuntimeError(3008 /* INVALID_STATE */, NG_DEV_MODE$1 &&
+        `state("${metadataName}", ...) must define default values for all the following style substitutions: ${missingSubs.join(', ')}`);
+}
+function invalidStyleValue(value) {
+    return new ɵRuntimeError(3002 /* INVALID_STYLE_VALUE */, NG_DEV_MODE$1 && `The provided style string value ${value} is not allowed.`);
+}
+function invalidProperty(prop) {
+    return new ɵRuntimeError(3009 /* INVALID_PROPERTY */, NG_DEV_MODE$1 &&
+        `The provided animation property "${prop}" is not a supported CSS property for animations`);
+}
+function invalidParallelAnimation(prop, firstStart, firstEnd, secondStart, secondEnd) {
+    return new ɵRuntimeError(3010 /* INVALID_PARALLEL_ANIMATION */, NG_DEV_MODE$1 &&
+        `The CSS property "${prop}" that exists between the times of "${firstStart}ms" and "${firstEnd}ms" is also being animated in a parallel animation between the times of "${secondStart}ms" and "${secondEnd}ms"`);
+}
+function invalidKeyframes() {
+    return new ɵRuntimeError(3011 /* INVALID_KEYFRAMES */, NG_DEV_MODE$1 && `keyframes() must be placed inside of a call to animate()`);
+}
+function invalidOffset() {
+    return new ɵRuntimeError(3012 /* INVALID_OFFSET */, NG_DEV_MODE$1 && `Please ensure that all keyframe offsets are between 0 and 1`);
+}
+function keyframeOffsetsOutOfOrder() {
+    return new ɵRuntimeError(3200 /* KEYFRAME_OFFSETS_OUT_OF_ORDER */, NG_DEV_MODE$1 && `Please ensure that all keyframe offsets are in order`);
+}
+function keyframesMissingOffsets() {
+    return new ɵRuntimeError(3202 /* KEYFRAMES_MISSING_OFFSETS */, NG_DEV_MODE$1 && `Not all style() steps within the declared keyframes() contain offsets`);
+}
+function invalidStagger() {
+    return new ɵRuntimeError(3013 /* INVALID_STAGGER */, NG_DEV_MODE$1 && `stagger() can only be used inside of query()`);
+}
+function invalidQuery(selector) {
+    return new ɵRuntimeError(3014 /* INVALID_QUERY */, NG_DEV_MODE$1 &&
+        `\`query("${selector}")\` returned zero elements. (Use \`query("${selector}", { optional: true })\` if you wish to allow this.)`);
+}
+function invalidExpression(expr) {
+    return new ɵRuntimeError(3015 /* INVALID_EXPRESSION */, NG_DEV_MODE$1 && `The provided transition expression "${expr}" is not supported`);
+}
+function invalidTransitionAlias(alias) {
+    return new ɵRuntimeError(3016 /* INVALID_TRANSITION_ALIAS */, NG_DEV_MODE$1 && `The transition alias value "${alias}" is not supported`);
+}
+function validationFailed(errors) {
+    return new ɵRuntimeError(3500 /* VALIDATION_FAILED */, NG_DEV_MODE$1 && `animation validation failed:\n${errors.map(err => err.message).join('\n')}`);
+}
+function buildingFailed(errors) {
+    return new ɵRuntimeError(3501 /* BUILDING_FAILED */, NG_DEV_MODE$1 && `animation building failed:\n${errors.map(err => err.message).join('\n')}`);
+}
+function triggerBuildFailed(name, errors) {
+    return new ɵRuntimeError(3404 /* TRIGGER_BUILD_FAILED */, NG_DEV_MODE$1 &&
+        `The animation trigger "${name}" has failed to build due to the following errors:\n - ${errors.map(err => err.message).join('\n - ')}`);
+}
+function animationFailed(errors) {
+    return new ɵRuntimeError(3502 /* ANIMATION_FAILED */, NG_DEV_MODE$1 &&
+        `Unable to animate due to the following errors:${LINE_START}${errors.map(err => err.message).join(LINE_START)}`);
+}
+function registerFailed(errors) {
+    return new ɵRuntimeError(3503 /* REGISTRATION_FAILED */, NG_DEV_MODE$1 &&
+        `Unable to build the animation due to the following errors: ${errors.map(err => err.message).join('\n')}`);
+}
+function missingOrDestroyedAnimation() {
+    return new ɵRuntimeError(3300 /* MISSING_OR_DESTROYED_ANIMATION */, NG_DEV_MODE$1 && 'The requested animation doesn\'t exist or has already been destroyed');
+}
+function createAnimationFailed(errors) {
+    return new ɵRuntimeError(3504 /* CREATE_ANIMATION_FAILED */, NG_DEV_MODE$1 &&
+        `Unable to create the animation due to the following errors:${errors.map(err => err.message).join('\n')}`);
+}
+function missingPlayer(id) {
+    return new ɵRuntimeError(3301 /* MISSING_PLAYER */, NG_DEV_MODE$1 && `Unable to find the timeline player referenced by ${id}`);
+}
+function missingTrigger(phase, name) {
+    return new ɵRuntimeError(3302 /* MISSING_TRIGGER */, NG_DEV_MODE$1 &&
+        `Unable to listen on the animation trigger event "${phase}" because the animation trigger "${name}" doesn\'t exist!`);
+}
+function missingEvent(name) {
+    return new ɵRuntimeError(3303 /* MISSING_EVENT */, NG_DEV_MODE$1 &&
+        `Unable to listen on the animation trigger "${name}" because the provided event is undefined!`);
+}
+function unsupportedTriggerEvent(phase, name) {
+    return new ɵRuntimeError(3400 /* UNSUPPORTED_TRIGGER_EVENT */, NG_DEV_MODE$1 &&
+        `The provided animation trigger event "${phase}" for the animation trigger "${name}" is not supported!`);
+}
+function unregisteredTrigger(name) {
+    return new ɵRuntimeError(3401 /* UNREGISTERED_TRIGGER */, NG_DEV_MODE$1 && `The provided animation trigger "${name}" has not been registered!`);
+}
+function triggerTransitionsFailed(errors) {
+    return new ɵRuntimeError(3402 /* TRIGGER_TRANSITIONS_FAILED */, NG_DEV_MODE$1 &&
+        `Unable to process animations due to the following failed trigger transitions\n ${errors.map(err => err.message).join('\n')}`);
+}
+function triggerParsingFailed(name, errors) {
+    return new ɵRuntimeError(3403 /* TRIGGER_PARSING_FAILED */, NG_DEV_MODE$1 &&
+        `Animation parsing for the ${name} trigger have failed:${LINE_START}${errors.map(err => err.message).join(LINE_START)}`);
+}
+function transitionFailed(name, errors) {
+    return new ɵRuntimeError(3505 /* TRANSITION_FAILED */, NG_DEV_MODE$1 &&
+        `@${name} has failed due to:\n ${errors.map(err => err.message).join('\n- ')}`);
+}
+
+/**
+ * @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
+ */
+/**
+ * Set of all animatable CSS properties
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
+ */
+const ANIMATABLE_PROP_SET = new Set([
+    '-moz-outline-radius',
+    '-moz-outline-radius-bottomleft',
+    '-moz-outline-radius-bottomright',
+    '-moz-outline-radius-topleft',
+    '-moz-outline-radius-topright',
+    '-ms-grid-columns',
+    '-ms-grid-rows',
+    '-webkit-line-clamp',
+    '-webkit-text-fill-color',
+    '-webkit-text-stroke',
+    '-webkit-text-stroke-color',
+    'accent-color',
+    'all',
+    'backdrop-filter',
+    'background',
+    'background-color',
+    'background-position',
+    'background-size',
+    'block-size',
+    'border',
+    'border-block-end',
+    'border-block-end-color',
+    'border-block-end-width',
+    'border-block-start',
+    'border-block-start-color',
+    'border-block-start-width',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-bottom-width',
+    'border-color',
+    'border-end-end-radius',
+    'border-end-start-radius',
+    'border-image-outset',
+    'border-image-slice',
+    'border-image-width',
+    'border-inline-end',
+    'border-inline-end-color',
+    'border-inline-end-width',
+    'border-inline-start',
+    'border-inline-start-color',
+    'border-inline-start-width',
+    'border-left',
+    'border-left-color',
+    'border-left-width',
+    'border-radius',
+    'border-right',
+    'border-right-color',
+    'border-right-width',
+    'border-start-end-radius',
+    'border-start-start-radius',
+    'border-top',
+    'border-top-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-top-width',
+    'border-width',
+    'bottom',
+    'box-shadow',
+    'caret-color',
+    'clip',
+    'clip-path',
+    'color',
+    'column-count',
+    'column-gap',
+    'column-rule',
+    'column-rule-color',
+    'column-rule-width',
+    'column-width',
+    'columns',
+    'filter',
+    'flex',
+    'flex-basis',
+    'flex-grow',
+    'flex-shrink',
+    'font',
+    'font-size',
+    'font-size-adjust',
+    'font-stretch',
+    'font-variation-settings',
+    'font-weight',
+    'gap',
+    'grid-column-gap',
+    'grid-gap',
+    'grid-row-gap',
+    'grid-template-columns',
+    'grid-template-rows',
+    'height',
+    'inline-size',
+    'input-security',
+    'inset',
+    'inset-block',
+    'inset-block-end',
+    'inset-block-start',
+    'inset-inline',
+    'inset-inline-end',
+    'inset-inline-start',
+    'left',
+    'letter-spacing',
+    'line-clamp',
+    'line-height',
+    'margin',
+    'margin-block-end',
+    'margin-block-start',
+    'margin-bottom',
+    'margin-inline-end',
+    'margin-inline-start',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'mask',
+    'mask-border',
+    'mask-position',
+    'mask-size',
+    'max-block-size',
+    'max-height',
+    'max-inline-size',
+    'max-lines',
+    'max-width',
+    'min-block-size',
+    'min-height',
+    'min-inline-size',
+    'min-width',
+    'object-position',
+    'offset',
+    'offset-anchor',
+    'offset-distance',
+    'offset-path',
+    'offset-position',
+    'offset-rotate',
+    'opacity',
+    'order',
+    'outline',
+    'outline-color',
+    'outline-offset',
+    'outline-width',
+    'padding',
+    'padding-block-end',
+    'padding-block-start',
+    'padding-bottom',
+    'padding-inline-end',
+    'padding-inline-start',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'perspective',
+    'perspective-origin',
+    'right',
+    'rotate',
+    'row-gap',
+    'scale',
+    'scroll-margin',
+    'scroll-margin-block',
+    'scroll-margin-block-end',
+    'scroll-margin-block-start',
+    'scroll-margin-bottom',
+    'scroll-margin-inline',
+    'scroll-margin-inline-end',
+    'scroll-margin-inline-start',
+    'scroll-margin-left',
+    'scroll-margin-right',
+    'scroll-margin-top',
+    'scroll-padding',
+    'scroll-padding-block',
+    'scroll-padding-block-end',
+    'scroll-padding-block-start',
+    'scroll-padding-bottom',
+    'scroll-padding-inline',
+    'scroll-padding-inline-end',
+    'scroll-padding-inline-start',
+    'scroll-padding-left',
+    'scroll-padding-right',
+    'scroll-padding-top',
+    'scroll-snap-coordinate',
+    'scroll-snap-destination',
+    'scrollbar-color',
+    'shape-image-threshold',
+    'shape-margin',
+    'shape-outside',
+    'tab-size',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-thickness',
+    'text-emphasis',
+    'text-emphasis-color',
+    'text-indent',
+    'text-shadow',
+    'text-underline-offset',
+    'top',
+    'transform',
+    'transform-origin',
+    'translate',
+    'vertical-align',
+    'visibility',
+    'width',
+    'word-spacing',
+    'z-index',
+    'zoom',
+]);
 
 /**
  * @license
@@ -36,26 +384,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 =
@@ -63,7 +411,7 @@ function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles =
                         break;
                 }
             }
-            normalizedKeyframe[normalizedProp] = normalizedValue;
+            normalizedKeyframe.set(normalizedProp, normalizedValue);
         });
         if (!isSameOffset) {
             normalizedKeyframes.push(normalizedKeyframe);
@@ -72,8 +420,7 @@ function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles =
         previousOffset = offset;
     });
     if (errors.length) {
-        const LINE_START = '\n - ';
-        throw new Error(`Unable to animate due to the following errors:${LINE_START}${errors.join(LINE_START)}`);
+        throw animationFailed(errors);
     }
     return normalizedKeyframes;
 }
@@ -103,32 +450,31 @@ 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;
 }
 function parseTimelineCommand(command) {
     const separatorPos = command.indexOf(':');
     const id = command.substring(1, separatorPos);
-    const action = command.substr(separatorPos + 1);
+    const action = command.slice(separatorPos + 1);
     return [id, action];
 }
 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();
@@ -137,12 +483,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;
         };
@@ -171,12 +520,15 @@ function validateStyleProperty(prop) {
     if (_CACHED_BODY.style && !containsVendorPrefix(prop)) {
         result = prop in _CACHED_BODY.style;
         if (!result && _IS_WEBKIT) {
-            const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1);
+            const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.slice(1);
             result = camelProp in _CACHED_BODY.style;
         }
     }
     return result;
 }
+function validateWebAnimatableStyleProperty(prop) {
+    return ANIMATABLE_PROP_SET.has(prop);
+}
 function getBodyNode() {
     if (typeof document != 'undefined') {
         return document.body;
@@ -185,13 +537,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;
 }
 
 /**
@@ -215,6 +567,9 @@ class NoopAnimationDriver {
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
     }
+    getParentElement(element) {
+        return getParentElement(element);
+    }
     query(element, selector, multi) {
         return invokeQuery(element, selector, multi);
     }
@@ -225,9 +580,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.0", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.0", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.0", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.11", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.11", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.11", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -244,7 +599,7 @@ AnimationDriver.NOOP = ( /* @__PURE__ */new NoopAnimationDriver());
  * 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 ONE_SECOND$1 = 1000;
+const ONE_SECOND = 1000;
 const SUBSTITUTION_EXPR_START = '{{';
 const SUBSTITUTION_EXPR_END = '}}';
 const ENTER_CLASSNAME = 'ng-enter';
@@ -264,7 +619,7 @@ function resolveTimingValue(value) {
 function _convertTimeValueToMS(value, unit) {
     switch (unit) {
         case 's':
-            return value * ONE_SECOND$1;
+            return value * ONE_SECOND;
         default: // ms or something else
             return value;
     }
@@ -282,7 +637,7 @@ function parseTimeExpression(exp, errors, allowNegativeValues) {
     if (typeof exp === 'string') {
         const matches = exp.match(regex);
         if (matches === null) {
-            errors.push(`The provided timing value "${exp}" is invalid.`);
+            errors.push(invalidTimingValue(exp));
             return { duration: 0, delay: 0, easing: '' };
         }
         duration = _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
@@ -302,15 +657,15 @@ function parseTimeExpression(exp, errors, allowNegativeValues) {
         let containsErrors = false;
         let startIndex = errors.length;
         if (duration < 0) {
-            errors.push(`Duration values below 0 are not allowed for this animation step.`);
+            errors.push(negativeStepValue());
             containsErrors = true;
         }
         if (delay < 0) {
-            errors.push(`Delay values below 0 are not allowed for this animation step.`);
+            errors.push(negativeDelayValue());
             containsErrors = true;
         }
         if (containsErrors) {
-            errors.splice(startIndex, 0, `The provided timing value "${exp}" is invalid.`);
+            errors.splice(startIndex, 0, invalidTimingValue(exp));
         }
     }
     return { duration, delay, easing };
@@ -321,27 +676,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;
 }
@@ -377,12 +746,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()) {
@@ -392,7 +761,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] = '';
         });
@@ -416,7 +785,7 @@ function validateStyleParams(value, options, errors) {
     if (matches.length) {
         matches.forEach(varName => {
             if (!params.hasOwnProperty(varName)) {
-                errors.push(`Unable to resolve the local animation param ${varName} in the given list of values`);
+                errors.push(invalidStyleParams(varName));
             }
         });
     }
@@ -438,8 +807,8 @@ function interpolateParams(value, params, errors) {
     const str = original.replace(PARAM_REGEX, (_, varName) => {
         let localVal = params[varName];
         // this means that the value was never overridden by the data passed in by the user
-        if (!params.hasOwnProperty(varName)) {
-            errors.push(`Please provide a value for the animation param ${varName}`);
+        if (localVal == null) {
+            errors.push(invalidParamValue(varName));
             localVal = '';
         }
         return localVal.toString();
@@ -467,23 +836,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)));
             }
         }
     }
@@ -518,13 +883,51 @@ function visitDslNode(visitor, node, context) {
         case 12 /* Stagger */:
             return visitor.visitStagger(node, context);
         default:
-            throw new Error(`Unable to resolve animation metadata node #${node.type}`);
+            throw invalidNodeType(node.type);
     }
 }
 function computeStyle(element, prop) {
     return window.getComputedStyle(element)[prop];
 }
 
+/**
+ * @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
+ */
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+function createListOfWarnings(warnings) {
+    const LINE_START = '\n - ';
+    return `${LINE_START}${warnings.filter(Boolean).map(warning => warning).join(LINE_START)}`;
+}
+function warnValidation(warnings) {
+    NG_DEV_MODE && console.warn(`animation validation warnings:${createListOfWarnings(warnings)}`);
+}
+function warnTriggerBuild(name, warnings) {
+    NG_DEV_MODE &&
+        console.warn(`The animation trigger "${name}" has built with the following warnings:${createListOfWarnings(warnings)}`);
+}
+function warnRegister(warnings) {
+    NG_DEV_MODE &&
+        console.warn(`Animation built with the following warnings:${createListOfWarnings(warnings)}`);
+}
+function triggerParsingWarnings(name, warnings) {
+    NG_DEV_MODE &&
+        console.warn(`Animation parsing for the ${name} trigger presents the following warnings:${createListOfWarnings(warnings)}`);
+}
+function pushUnrecognizedPropertiesWarning(warnings, props) {
+    if (ngDevMode && props.length) {
+        warnings.push(`The following provided properties are not recognized: ${props.join(', ')}`);
+    }
+}
+function pushNonAnimatablePropertiesWarning(warnings, props) {
+    if (props.length) {
+        warnings.push(`The following provided properties are not animatable: ${props.join(', ')}\n   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)`);
+    }
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -554,7 +957,7 @@ function parseInnerTransitionStr(eventStr, expressions, errors) {
     }
     const match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/);
     if (match == null || match.length < 4) {
-        errors.push(`The provided transition expression "${eventStr}" is not supported`);
+        errors.push(invalidExpression(eventStr));
         return expressions;
     }
     const fromState = match[1];
@@ -577,7 +980,7 @@ function parseAnimationAlias(alias, errors) {
         case ':decrement':
             return (fromState, toState) => parseFloat(toState) < parseFloat(fromState);
         default:
-            errors.push(`The transition alias value "${alias}" is not supported`);
+            errors.push(invalidTransitionAlias(alias));
             return '* => *';
     }
 }
@@ -648,23 +1051,31 @@ const SELF_TOKEN_REGEX = new RegExp(`\s*${SELF_TOKEN}\s*,?`, 'g');
  *
  * Otherwise an error will be thrown.
  */
-function buildAnimationAst(driver, metadata, errors) {
-    return new AnimationAstBuilderVisitor(driver).build(metadata, errors);
+function buildAnimationAst(driver, metadata, errors, warnings) {
+    return new AnimationAstBuilderVisitor(driver).build(metadata, errors, warnings);
 }
 const ROOT_SELECTOR = '';
 class AnimationAstBuilderVisitor {
     constructor(_driver) {
         this._driver = _driver;
     }
-    build(metadata, errors) {
+    build(metadata, errors, warnings) {
         const context = new AnimationAstBuilderContext(errors);
         this._resetContextStyleTimingState(context);
-        return visitDslNode(this, normalizeAnimationEntry(metadata), context);
+        const ast = visitDslNode(this, normalizeAnimationEntry(metadata), context);
+        if (context.unsupportedCSSPropertiesFound.size) {
+            pushUnrecognizedPropertiesWarning(warnings, [...context.unsupportedCSSPropertiesFound.keys()]);
+        }
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+            context.nonAnimatableCSSPropertiesFound.size) {
+            pushNonAnimatablePropertiesWarning(warnings, [...context.nonAnimatableCSSPropertiesFound.keys()]);
+        }
+        return ast;
     }
     _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) {
@@ -673,7 +1084,7 @@ class AnimationAstBuilderVisitor {
         const states = [];
         const transitions = [];
         if (metadata.name.charAt(0) == '@') {
-            context.errors.push('animation triggers cannot be prefixed with an `@` sign (e.g. trigger(\'@foo\', [...]))');
+            context.errors.push(invalidTrigger());
         }
         metadata.definitions.forEach(def => {
             this._resetContextStyleTimingState(context);
@@ -693,7 +1104,7 @@ class AnimationAstBuilderVisitor {
                 transitions.push(transition);
             }
             else {
-                context.errors.push('only state() and transition() definitions can sit inside of a trigger()');
+                context.errors.push(invalidDefinition());
             }
         });
         return {
@@ -712,11 +1123,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);
                             }
@@ -726,8 +1136,7 @@ class AnimationAstBuilderVisitor {
             });
             if (missingSubs.size) {
                 const missingSubsArr = iteratorToArray(missingSubs.values());
-                context.errors.push(`state("${metadata
-                    .name}", ...) must define default values for all the following style substitutions: ${missingSubsArr.join(', ')}`);
+                context.errors.push(invalidState(metadata.name, missingSubsArr));
             }
         }
         return {
@@ -813,37 +1222,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(`The provided style string value ${styleTuple} is not allowed.`);
-                    }
+        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;
@@ -869,21 +1271,32 @@ 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(`The provided animation property "${prop}" is not a supported CSS property for animations`);
+                    tuple.delete(prop);
+                    context.unsupportedCSSPropertiesFound.add(prop);
                     return;
                 }
-                const collectedStyles = context.collectedStyles[context.currentQuerySelector];
-                const collectedEntry = collectedStyles[prop];
+                if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+                    this._driver.validateAnimatableStyleProperty) {
+                    if (!this._driver.validateAnimatableStyleProperty(prop)) {
+                        context.nonAnimatableCSSPropertiesFound.add(prop);
+                        // note: non animatable properties are not removed for the tuple just in case they are
+                        //       categorized as non animatable but can actually be animated
+                        return;
+                    }
+                }
+                // This is guaranteed to have a defined Map at this querySelector location making it
+                // safe to add the assertion here. It is set as a default empty map in prior methods.
+                const collectedStyles = context.collectedStyles.get(context.currentQuerySelector);
+                const collectedEntry = collectedStyles.get(prop);
                 let updateCollectedStyle = true;
                 if (collectedEntry) {
                     if (startTime != endTime && startTime >= collectedEntry.startTime &&
                         endTime <= collectedEntry.endTime) {
-                        context.errors.push(`The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry
-                            .endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
+                        context.errors.push(invalidParallelAnimation(prop, collectedEntry.startTime, collectedEntry.endTime, startTime, endTime));
                         updateCollectedStyle = false;
                     }
                     // we always choose the smaller start time value since we
@@ -892,10 +1305,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);
                 }
             });
         });
@@ -903,7 +1316,7 @@ class AnimationAstBuilderVisitor {
     visitKeyframes(metadata, context) {
         const ast = { type: 5 /* Keyframes */, styles: [], options: null };
         if (!context.currentAnimateTimings) {
-            context.errors.push(`keyframes() must be placed inside of a call to animate()`);
+            context.errors.push(invalidKeyframes());
             return ast;
         }
         const MAX_KEYFRAME_OFFSET = 1;
@@ -927,15 +1340,15 @@ class AnimationAstBuilderVisitor {
             return style;
         });
         if (keyframesOutOfRange) {
-            context.errors.push(`Please ensure that all keyframe offsets are between 0 and 1`);
+            context.errors.push(invalidOffset());
         }
         if (offsetsOutOfOrder) {
-            context.errors.push(`Please ensure that all keyframe offsets are in order`);
+            context.errors.push(keyframeOffsetsOutOfOrder());
         }
         const length = metadata.steps.length;
         let generatedOffset = 0;
         if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) {
-            context.errors.push(`Not all style() steps within the declared keyframes() contain offsets`);
+            context.errors.push(keyframesMissingOffsets());
         }
         else if (totalKeyframesWithOffsets == 0) {
             generatedOffset = MAX_KEYFRAME_OFFSET / (length - 1);
@@ -984,7 +1397,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;
@@ -1001,7 +1414,7 @@ class AnimationAstBuilderVisitor {
     }
     visitStagger(metadata, context) {
         if (!context.currentQuery) {
-            context.errors.push(`stagger() can only be used inside of query()`);
+            context.errors.push(invalidStagger());
         }
         const timings = metadata.timings === 'full' ?
             { duration: 0, delay: 0, easing: 'full' } :
@@ -1022,7 +1435,7 @@ function normalizeSelector(selector) {
     // Note: the :enter and :leave aren't normalized here since those
     // selectors are filled in at runtime during timeline building
     selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
-        .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
+        .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.slice(1))
         .replace(/:animating/g, NG_ANIMATING_SELECTOR);
     return [selector, hasAmpersand];
 }
@@ -1039,8 +1452,10 @@ class AnimationAstBuilderContext {
         this.currentQuerySelector = null;
         this.currentAnimateTimings = null;
         this.currentTime = 0;
-        this.collectedStyles = {};
+        this.collectedStyles = new Map();
         this.options = null;
+        this.unsupportedCSSPropertiesFound = new Set();
+        this.nonAnimatableCSSPropertiesFound = new Set();
     }
 }
 function consumeOffset(styles) {
@@ -1049,29 +1464,25 @@ 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')) {
-        timings = value;
+        return value;
     }
-    else if (typeof value == 'number') {
+    if (typeof value == 'number') {
         const duration = resolveTiming(value, errors).duration;
         return makeTimingAst(duration, 0, '');
     }
@@ -1083,7 +1494,7 @@ function constructTimingAst(value, errors) {
         ast.strValue = strValue;
         return ast;
     }
-    timings = timings || resolveTiming(strValue, errors);
+    const timings = resolveTiming(strValue, errors);
     return makeTimingAst(timings.duration, timings.delay, timings.easing);
 }
 function normalizeAnimationOptions(options) {
@@ -1173,7 +1584,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
@@ -1219,23 +1630,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 {
@@ -1243,15 +1649,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];
@@ -1264,8 +1672,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
@@ -1401,7 +1810,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;
@@ -1442,7 +1851,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;
         }
@@ -1624,7 +2033,7 @@ class AnimationTimelineContext {
             results.push(...elements);
         }
         if (!optional && results.length == 0) {
-            errors.push(`\`query("${originalSelector}")\` returned zero elements. (Use \`query("${originalSelector}", { optional: true })\` if you wish to allow this.)`);
+            errors.push(invalidQuery(originalSelector));
         }
         return results;
     }
@@ -1636,17 +2045,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;
@@ -1659,13 +2068,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;
@@ -1675,7 +2084,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) {
@@ -1696,7 +2105,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);
         }
     }
@@ -1710,16 +2119,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
@@ -1727,51 +2136,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);
@@ -1784,9 +2187,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);
             }
@@ -1799,18 +2201,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);
         });
@@ -1819,9 +2220,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);
@@ -1847,11 +2248,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
@@ -1870,10 +2271,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
@@ -1890,17 +2291,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;
@@ -1910,10 +2311,13 @@ class Animation {
     constructor(_driver, input) {
         this._driver = _driver;
         const errors = [];
-        const ast = buildAnimationAst(_driver, input, errors);
+        const warnings = [];
+        const ast = buildAnimationAst(_driver, input, errors, warnings);
         if (errors.length) {
-            const errorMessage = `animation validation failed:\n${errors.join('\n')}`;
-            throw new Error(errorMessage);
+            throw validationFailed(errors);
+        }
+        if (warnings.length) {
+            warnValidation(warnings);
         }
         this._animationAst = ast;
     }
@@ -1926,8 +2330,7 @@ class Animation {
         subInstructions = subInstructions || new ElementInstructionMap();
         const result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors);
         if (errors.length) {
-            const errorMessage = `animation building failed:\n${errors.join('\n')}`;
-            throw new Error(errorMessage);
+            throw buildingFailed(errors);
         }
         return result;
     }
@@ -1964,6 +2367,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);
@@ -1971,28 +2405,28 @@ 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';
             }
             else {
                 const valAndSuffixMatch = value.match(/^[+-]?[\d\.]+([a-z]*)$/);
                 if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
-                    errors.push(`Please provide a CSS unit value for ${userProvidedProperty}:${value}`);
+                    errors.push(invalidCssUnitValue(userProvidedProperty, value));
                 }
             }
         }
         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 */,
@@ -2023,10 +2457,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 = [];
@@ -2039,7 +2474,10 @@ class AnimationTransitionFactory {
         const preStyleMap = new Map();
         const postStyleMap = new Map();
         const isRemoval = nextState === 'void';
-        const animationOptions = { params: { ...transitionAnimationParams, ...nextAnimationParams } };
+        const animationOptions = {
+            params: applyParamDefaults(nextAnimationParams, transitionAnimationParams),
+            delay: this.ast.options?.delay,
+        };
         const timelines = skipAstBuild ?
             [] :
             buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
@@ -2052,10 +2490,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);
             }
@@ -2067,6 +2505,15 @@ class AnimationTransitionFactory {
 function oneOrMoreTransitionsMatch(matchFns, currentState, nextState, element, params) {
     return matchFns.some(fn => fn(currentState, nextState, element, params));
 }
+function applyParamDefaults(userParams, defaults) {
+    const result = copyObj(defaults);
+    for (const key in userParams) {
+        if (userParams.hasOwnProperty(key) && userParams[key] != null) {
+            result[key] = userParams[key];
+        }
+    }
+    return result;
+}
 class AnimationStateStyles {
     constructor(styles, defaultParams, normalizer) {
         this.styles = styles;
@@ -2074,25 +2521,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);
                 });
             }
         });
@@ -2109,10 +2554,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');
@@ -2145,14 +2590,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));
     }
 }
 
@@ -2169,55 +2614,59 @@ 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) {
         const errors = [];
-        const ast = buildAnimationAst(this._driver, metadata, errors);
+        const warnings = [];
+        const ast = buildAnimationAst(this._driver, metadata, errors, warnings);
         if (errors.length) {
-            throw new Error(`Unable to build the animation due to the following errors: ${errors.join('\n')}`);
+            throw registerFailed(errors);
         }
         else {
-            this._animations[id] = ast;
+            if (warnings.length) {
+                warnRegister(warnings);
+            }
+            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 {
-            errors.push('The requested animation doesn\'t exist or has already been destroyed');
+            errors.push(missingOrDestroyedAnimation());
             instructions = [];
         }
         if (errors.length) {
-            throw new Error(`Unable to create the animation due to the following errors: ${errors.join('\n')}`);
+            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;
@@ -2225,16 +2674,16 @@ 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 new Error(`Unable to find the timeline player referenced by ${id}`);
+            throw missingPlayer(id);
         }
         return player;
     }
@@ -2354,30 +2803,30 @@ 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)) {
-            throw new Error(`Unable to listen on the animation trigger event "${phase}" because the animation trigger "${name}" doesn\'t exist!`);
+        if (!this._triggers.has(name)) {
+            throw missingTrigger(phase, name);
         }
         if (phase == null || phase.length == 0) {
-            throw new Error(`Unable to listen on the animation trigger "${name}" because the provided event is undefined!`);
+            throw missingEvent(name);
         }
         if (!isTriggerEventValid(phase)) {
-            throw new Error(`The provided animation trigger event "${phase}" for the animation trigger "${name}" is not supported!`);
+            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
@@ -2388,26 +2837,26 @@ 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 new Error(`The provided animation trigger "${name}" has not been registered!`);
+            throw unregisteredTrigger(name);
         }
         return trigger;
     }
@@ -2418,15 +2867,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;
         }
@@ -2456,7 +2905,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
@@ -2500,10 +2949,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;
@@ -2546,11 +2993,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);
@@ -2579,9 +3026,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++;
@@ -2763,25 +3210,37 @@ 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);
+            // Find the closest ancestor with an existing namespace so we can then insert `ns` after it,
+            // establishing a top-down ordering of namespaces in `this._namespaceList`.
+            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);
             }
             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) {
@@ -2823,11 +3282,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);
                     }
@@ -3047,7 +3504,7 @@ class TransitionAnimationEngine {
         }
     }
     reportError(errors) {
-        throw new Error(`Unable to process animations due to the following failed trigger transitions\n ${errors.join('\n')}`);
+        throw triggerTransitionsFailed(errors);
     }
     _flushAnimations(cleanupFns, microtaskId) {
         const subTimelines = new ElementInstructionMap();
@@ -3134,8 +3591,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();
@@ -3185,32 +3644,29 @@ 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));
                 });
             });
         }
         if (erroneousTransitions.length) {
             const errors = [];
             erroneousTransitions.forEach(instruction => {
-                errors.push(`@${instruction.triggerName} has failed due to:\n`);
-                instruction.errors.forEach(error => errors.push(`- ${error}\n`));
+                errors.push(transitionFailed(instruction.triggerName, instruction.errors));
             });
             allPlayers.forEach(player => player.destroy());
             this.reportError(errors);
@@ -3232,7 +3688,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();
             });
         });
@@ -3262,7 +3718,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 = [];
@@ -3456,7 +3912,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();
@@ -3499,7 +3955,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)
@@ -3514,7 +3970,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));
@@ -3526,7 +3982,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;
     }
@@ -3546,7 +4002,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;
@@ -3557,10 +4013,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;
@@ -3580,7 +4036,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) {
@@ -3642,29 +4098,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;
@@ -3691,9 +4132,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) {
@@ -3823,9 +4265,13 @@ class AnimationEngine {
         let trigger = this._triggerCache[cacheKey];
         if (!trigger) {
             const errors = [];
-            const ast = buildAnimationAst(this._driver, metadata, errors);
+            const warnings = [];
+            const ast = buildAnimationAst(this._driver, metadata, errors, warnings);
             if (errors.length) {
-                throw new Error(`The animation trigger "${name}" has failed to build due to the following errors:\n - ${errors.join('\n - ')}`);
+                throw triggerBuildFailed(name, errors);
+            }
+            if (warnings.length) {
+                warnTriggerBuild(name, warnings);
             }
             trigger = buildTrigger(name, ast, this._normalizer);
             this._triggerCache[cacheKey] = trigger;
@@ -3877,13 +4323,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.
@@ -3904,7 +4343,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) :
@@ -3926,7 +4365,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;
     }
@@ -3969,453 +4408,18 @@ 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) {
     return prop === 'display' || prop === 'position';
 }
 
-/**
- * @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
- */
-const ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
-const ANIMATION_PROP = 'animation';
-const ANIMATIONEND_EVENT = 'animationend';
-const ONE_SECOND = 1000;
-class ElementAnimationStyleHandler {
-    constructor(_element, _name, _duration, _delay, _easing, _fillMode, _onDoneFn) {
-        this._element = _element;
-        this._name = _name;
-        this._duration = _duration;
-        this._delay = _delay;
-        this._easing = _easing;
-        this._fillMode = _fillMode;
-        this._onDoneFn = _onDoneFn;
-        this._finished = false;
-        this._destroyed = false;
-        this._startTime = 0;
-        this._position = 0;
-        this._eventFn = (e) => this._handleCallback(e);
-    }
-    apply() {
-        applyKeyframeAnimation(this._element, `${this._duration}ms ${this._easing} ${this._delay}ms 1 normal ${this._fillMode} ${this._name}`);
-        addRemoveAnimationEvent(this._element, this._eventFn, false);
-        this._startTime = Date.now();
-    }
-    pause() {
-        playPauseAnimation(this._element, this._name, 'paused');
-    }
-    resume() {
-        playPauseAnimation(this._element, this._name, 'running');
-    }
-    setPosition(position) {
-        const index = findIndexForAnimation(this._element, this._name);
-        this._position = position * this._duration;
-        setAnimationStyle(this._element, 'Delay', `-${this._position}ms`, index);
-    }
-    getPosition() {
-        return this._position;
-    }
-    _handleCallback(event) {
-        const timestamp = event._ngTestManualTimestamp || Date.now();
-        const elapsedTime = parseFloat(event.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES)) * ONE_SECOND;
-        if (event.animationName == this._name &&
-            Math.max(timestamp - this._startTime, 0) >= this._delay && elapsedTime >= this._duration) {
-            this.finish();
-        }
-    }
-    finish() {
-        if (this._finished)
-            return;
-        this._finished = true;
-        this._onDoneFn();
-        addRemoveAnimationEvent(this._element, this._eventFn, true);
-    }
-    destroy() {
-        if (this._destroyed)
-            return;
-        this._destroyed = true;
-        this.finish();
-        removeKeyframeAnimation(this._element, this._name);
-    }
-}
-function playPauseAnimation(element, name, status) {
-    const index = findIndexForAnimation(element, name);
-    setAnimationStyle(element, 'PlayState', status, index);
-}
-function applyKeyframeAnimation(element, value) {
-    const anim = getAnimationStyle(element, '').trim();
-    let index = 0;
-    if (anim.length) {
-        index = countChars(anim, ',') + 1;
-        value = `${anim}, ${value}`;
-    }
-    setAnimationStyle(element, '', value);
-    return index;
-}
-function removeKeyframeAnimation(element, name) {
-    const anim = getAnimationStyle(element, '');
-    const tokens = anim.split(',');
-    const index = findMatchingTokenIndex(tokens, name);
-    if (index >= 0) {
-        tokens.splice(index, 1);
-        const newValue = tokens.join(',');
-        setAnimationStyle(element, '', newValue);
-    }
-}
-function findIndexForAnimation(element, value) {
-    const anim = getAnimationStyle(element, '');
-    if (anim.indexOf(',') > 0) {
-        const tokens = anim.split(',');
-        return findMatchingTokenIndex(tokens, value);
-    }
-    return findMatchingTokenIndex([anim], value);
-}
-function findMatchingTokenIndex(tokens, searchToken) {
-    for (let i = 0; i < tokens.length; i++) {
-        if (tokens[i].indexOf(searchToken) >= 0) {
-            return i;
-        }
-    }
-    return -1;
-}
-function addRemoveAnimationEvent(element, fn, doRemove) {
-    doRemove ? element.removeEventListener(ANIMATIONEND_EVENT, fn) :
-        element.addEventListener(ANIMATIONEND_EVENT, fn);
-}
-function setAnimationStyle(element, name, value, index) {
-    const prop = ANIMATION_PROP + name;
-    if (index != null) {
-        const oldValue = element.style[prop];
-        if (oldValue.length) {
-            const tokens = oldValue.split(',');
-            tokens[index] = value;
-            value = tokens.join(',');
-        }
-    }
-    element.style[prop] = value;
-}
-function getAnimationStyle(element, name) {
-    return element.style[ANIMATION_PROP + name] || '';
-}
-function countChars(value, char) {
-    let count = 0;
-    for (let i = 0; i < value.length; i++) {
-        const c = value.charAt(i);
-        if (c === char)
-            count++;
-    }
-    return count;
-}
-
-const DEFAULT_FILL_MODE = 'forwards';
-const DEFAULT_EASING = 'linear';
-class CssKeyframesPlayer {
-    constructor(element, keyframes, animationName, _duration, _delay, easing, _finalStyles, _specialStyles) {
-        this.element = element;
-        this.keyframes = keyframes;
-        this.animationName = animationName;
-        this._duration = _duration;
-        this._delay = _delay;
-        this._finalStyles = _finalStyles;
-        this._specialStyles = _specialStyles;
-        this._onDoneFns = [];
-        this._onStartFns = [];
-        this._onDestroyFns = [];
-        this.currentSnapshot = {};
-        this._state = 0;
-        this.easing = easing || DEFAULT_EASING;
-        this.totalTime = _duration + _delay;
-        this._buildStyler();
-    }
-    onStart(fn) {
-        this._onStartFns.push(fn);
-    }
-    onDone(fn) {
-        this._onDoneFns.push(fn);
-    }
-    onDestroy(fn) {
-        this._onDestroyFns.push(fn);
-    }
-    destroy() {
-        this.init();
-        if (this._state >= 4 /* DESTROYED */)
-            return;
-        this._state = 4 /* DESTROYED */;
-        this._styler.destroy();
-        this._flushStartFns();
-        this._flushDoneFns();
-        if (this._specialStyles) {
-            this._specialStyles.destroy();
-        }
-        this._onDestroyFns.forEach(fn => fn());
-        this._onDestroyFns = [];
-    }
-    _flushDoneFns() {
-        this._onDoneFns.forEach(fn => fn());
-        this._onDoneFns = [];
-    }
-    _flushStartFns() {
-        this._onStartFns.forEach(fn => fn());
-        this._onStartFns = [];
-    }
-    finish() {
-        this.init();
-        if (this._state >= 3 /* FINISHED */)
-            return;
-        this._state = 3 /* FINISHED */;
-        this._styler.finish();
-        this._flushStartFns();
-        if (this._specialStyles) {
-            this._specialStyles.finish();
-        }
-        this._flushDoneFns();
-    }
-    setPosition(value) {
-        this._styler.setPosition(value);
-    }
-    getPosition() {
-        return this._styler.getPosition();
-    }
-    hasStarted() {
-        return this._state >= 2 /* STARTED */;
-    }
-    init() {
-        if (this._state >= 1 /* INITIALIZED */)
-            return;
-        this._state = 1 /* INITIALIZED */;
-        const elm = this.element;
-        this._styler.apply();
-        if (this._delay) {
-            this._styler.pause();
-        }
-    }
-    play() {
-        this.init();
-        if (!this.hasStarted()) {
-            this._flushStartFns();
-            this._state = 2 /* STARTED */;
-            if (this._specialStyles) {
-                this._specialStyles.start();
-            }
-        }
-        this._styler.resume();
-    }
-    pause() {
-        this.init();
-        this._styler.pause();
-    }
-    restart() {
-        this.reset();
-        this.play();
-    }
-    reset() {
-        this._state = 0 /* RESET */;
-        this._styler.destroy();
-        this._buildStyler();
-        this._styler.apply();
-    }
-    _buildStyler() {
-        this._styler = new ElementAnimationStyleHandler(this.element, this.animationName, this._duration, this._delay, this.easing, DEFAULT_FILL_MODE, () => this.finish());
-    }
-    /** @internal */
-    triggerCallback(phaseName) {
-        const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
-        methods.forEach(fn => fn());
-        methods.length = 0;
-    }
-    beforeDestroy() {
-        this.init();
-        const styles = {};
-        if (this.hasStarted()) {
-            const finished = this._state >= 3 /* FINISHED */;
-            Object.keys(this._finalStyles).forEach(prop => {
-                if (prop != 'offset') {
-                    styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop);
-                }
-            });
-        }
-        this.currentSnapshot = styles;
-    }
-}
-
-/**
- * @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
- */
-class DirectStylePlayer extends NoopAnimationPlayer {
-    constructor(element, styles) {
-        super();
-        this.element = element;
-        this._startingStyles = {};
-        this.__initialized = false;
-        this._styles = hypenatePropsObject(styles);
-    }
-    init() {
-        if (this.__initialized || !this._startingStyles)
-            return;
-        this.__initialized = true;
-        Object.keys(this._styles).forEach(prop => {
-            this._startingStyles[prop] = this.element.style[prop];
-        });
-        super.init();
-    }
-    play() {
-        if (!this._startingStyles)
-            return;
-        this.init();
-        Object.keys(this._styles)
-            .forEach(prop => this.element.style.setProperty(prop, this._styles[prop]));
-        super.play();
-    }
-    destroy() {
-        if (!this._startingStyles)
-            return;
-        Object.keys(this._startingStyles).forEach(prop => {
-            const value = this._startingStyles[prop];
-            if (value) {
-                this.element.style.setProperty(prop, value);
-            }
-            else {
-                this.element.style.removeProperty(prop);
-            }
-        });
-        this._startingStyles = null;
-        super.destroy();
-    }
-}
-
-const KEYFRAMES_NAME_PREFIX = 'gen_css_kf_';
-const TAB_SPACE = ' ';
-class CssKeyframesDriver {
-    constructor() {
-        this._count = 0;
-    }
-    validateStyleProperty(prop) {
-        return validateStyleProperty(prop);
-    }
-    matchesElement(_element, _selector) {
-        // This method is deprecated and no longer in use so we return false.
-        return false;
-    }
-    containsElement(elm1, elm2) {
-        return containsElement(elm1, elm2);
-    }
-    query(element, selector, multi) {
-        return invokeQuery(element, selector, multi);
-    }
-    computeStyle(element, prop, defaultValue) {
-        return window.getComputedStyle(element)[prop];
-    }
-    buildKeyframeElement(element, name, keyframes) {
-        keyframes = keyframes.map(kf => hypenatePropsObject(kf));
-        let keyframeStr = `@keyframes ${name} {\n`;
-        let tab = '';
-        keyframes.forEach(kf => {
-            tab = TAB_SPACE;
-            const offset = parseFloat(kf['offset']);
-            keyframeStr += `${tab}${offset * 100}% {\n`;
-            tab += TAB_SPACE;
-            Object.keys(kf).forEach(prop => {
-                const value = kf[prop];
-                switch (prop) {
-                    case 'offset':
-                        return;
-                    case 'easing':
-                        if (value) {
-                            keyframeStr += `${tab}animation-timing-function: ${value};\n`;
-                        }
-                        return;
-                    default:
-                        keyframeStr += `${tab}${prop}: ${value};\n`;
-                        return;
-                }
-            });
-            keyframeStr += `${tab}}\n`;
-        });
-        keyframeStr += `}\n`;
-        const kfElm = document.createElement('style');
-        kfElm.textContent = keyframeStr;
-        return kfElm;
-    }
-    animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && scrubberAccessRequested) {
-            notifyFaultyScrubber();
-        }
-        const previousCssKeyframePlayers = previousPlayers.filter(player => player instanceof CssKeyframesPlayer);
-        const previousStyles = {};
-        if (allowPreviousPlayerStylesMerge(duration, delay)) {
-            previousCssKeyframePlayers.forEach(player => {
-                let styles = player.currentSnapshot;
-                Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
-            });
-        }
-        keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
-        const finalStyles = flattenKeyframesIntoStyles(keyframes);
-        // if there is no animation then there is no point in applying
-        // styles and waiting for an event to get fired. This causes lag.
-        // It's better to just directly apply the styles to the element
-        // via the direct styling animation player.
-        if (duration == 0) {
-            return new DirectStylePlayer(element, finalStyles);
-        }
-        const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`;
-        const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
-        const nodeToAppendKfElm = findNodeToAppendKeyframeElement(element);
-        nodeToAppendKfElm.appendChild(kfElm);
-        const specialStyles = packageNonAnimatableStyles(element, keyframes);
-        const player = new CssKeyframesPlayer(element, keyframes, animationName, duration, delay, easing, finalStyles, specialStyles);
-        player.onDestroy(() => removeElement(kfElm));
-        return player;
-    }
-}
-function findNodeToAppendKeyframeElement(element) {
-    const rootNode = element.getRootNode?.();
-    if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) {
-        return rootNode;
-    }
-    return document.head;
-}
-function flattenKeyframesIntoStyles(keyframes) {
-    let flatKeyframes = {};
-    if (keyframes) {
-        const kfs = Array.isArray(keyframes) ? keyframes : [keyframes];
-        kfs.forEach(kf => {
-            Object.keys(kf).forEach(prop => {
-                if (prop == 'offset' || prop == 'easing')
-                    return;
-                flatKeyframes[prop] = kf[prop];
-            });
-        });
-    }
-    return flatKeyframes;
-}
-function removeElement(node) {
-    node.parentNode.removeChild(node);
-}
-let warningIssued = false;
-function notifyFaultyScrubber() {
-    if (warningIssued)
-        return;
-    console.warn('@angular/animations: please load the web-animations.js polyfill to allow programmatic access...\n', '  visit https://bit.ly/IWukam to learn more about using the web-animation-js polyfill.');
-    warningIssued = true;
-}
-
 class WebAnimationsPlayer {
     constructor(element, keyframes, options, _specialStyles) {
         this.element = element;
@@ -4431,7 +4435,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;
@@ -4454,7 +4458,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() {
@@ -4466,11 +4470,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);
@@ -4548,15 +4559,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));
                 }
             });
         }
@@ -4564,20 +4575,24 @@ 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;
     }
 }
 
 class WebAnimationsDriver {
-    constructor() {
-        this._isNativeImpl = /\{\s*\[native\s+code\]\s*\}/.test(getElementAnimateFn().toString());
-        this._cssKeyframesDriver = new CssKeyframesDriver();
-    }
     validateStyleProperty(prop) {
         return validateStyleProperty(prop);
     }
+    validateAnimatableStyleProperty(prop) {
+        // Perform actual validation in dev mode only, in prod mode this check is a noop.
+        if (ngDevMode) {
+            const cssProp = camelCaseToDashCase(prop);
+            return validateWebAnimatableStyleProperty(cssProp);
+        }
+        return true;
+    }
     matchesElement(_element, _selector) {
         // This method is deprecated and no longer in use so we return false.
         return false;
@@ -4585,20 +4600,16 @@ class WebAnimationsDriver {
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
     }
+    getParentElement(element) {
+        return getParentElement(element);
+    }
     query(element, selector, multi) {
         return invokeQuery(element, selector, multi);
     }
     computeStyle(element, prop, defaultValue) {
         return window.getComputedStyle(element)[prop];
     }
-    overrideWebAnimationsSupport(supported) {
-        this._isNativeImpl = supported;
-    }
-    animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
-        const useKeyframes = !scrubberAccessRequested && !this._isNativeImpl;
-        if (useKeyframes) {
-            return this._cssKeyframesDriver.animate(element, keyframes, duration, delay, easing, previousPlayers);
-        }
+    animate(element, keyframes, duration, delay, easing, previousPlayers = []) {
         const fill = delay == 0 ? 'both' : 'forwards';
         const playerOptions = { duration, delay, fill };
         // we check for this to avoid having a null|undefined value be present
@@ -4606,26 +4617,19 @@ 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);
     }
 }
-function supportsWebAnimations() {
-    return typeof getElementAnimateFn() === 'function';
-}
-function getElementAnimateFn() {
-    return (isBrowser() && Element.prototype['animate']) || {};
-}
 
 /**
  * @license
@@ -4663,5 +4667,5 @@ function getElementAnimateFn() {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, CssKeyframesDriver as ɵCssKeyframesDriver, CssKeyframesPlayer as ɵCssKeyframesPlayer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, supportsWebAnimations as ɵsupportsWebAnimations, 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