@angular/animations 14.0.0-next.1 → 14.0.0-next.12

package/fesm2020/browser.mjs

@@ -1,12 +1,360 @@
 /**
- * @license Angular v14.0.0-next.1
+ * @license Angular v14.0.0-next.12
  * (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
@@ -72,8 +420,7 @@ function normalizeKeyframes$1(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;
 }
@@ -113,13 +460,21 @@ function getOrSetDefaultValue(map, key, defaultValue) {
 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();
@@ -128,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;
         };
@@ -162,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;
@@ -206,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);
     }
@@ -216,9 +580,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.1", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.1", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.1", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.12", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.12", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.12", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -273,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]);
@@ -293,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 };
@@ -421,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));
             }
         });
     }
@@ -443,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();
@@ -519,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 (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.
@@ -555,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];
@@ -578,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 '* => *';
     }
 }
@@ -649,18 +1051,27 @@ 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 (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (context.unsupportedCSSPropertiesFound.size) {
+                pushUnrecognizedPropertiesWarning(warnings, [...context.unsupportedCSSPropertiesFound.keys()]);
+            }
+            if (context.nonAnimatableCSSPropertiesFound.size) {
+                pushNonAnimatablePropertiesWarning(warnings, [...context.nonAnimatableCSSPropertiesFound.keys()]);
+            }
+        }
+        return ast;
     }
     _resetContextStyleTimingState(context) {
         context.currentQuerySelector = ROOT_SELECTOR;
@@ -674,7 +1085,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);
@@ -694,7 +1105,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 {
@@ -726,8 +1137,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 {
@@ -820,7 +1230,7 @@ class AnimationAstBuilderVisitor {
                     styles.push(styleTuple);
                 }
                 else {
-                    context.errors.push(`The provided style string value ${styleTuple} is not allowed.`);
+                    context.errors.push(invalidStyleValue(styleTuple));
                 }
             }
             else {
@@ -865,9 +1275,20 @@ class AnimationAstBuilderVisitor {
             if (typeof tuple === 'string')
                 return;
             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`);
-                    return;
+                if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                    if (!this._driver.validateStyleProperty(prop)) {
+                        tuple.delete(prop);
+                        context.unsupportedCSSPropertiesFound.add(prop);
+                        return;
+                    }
+                    if (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.
@@ -877,8 +1298,7 @@ class AnimationAstBuilderVisitor {
                 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
@@ -898,7 +1318,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;
@@ -922,15 +1342,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);
@@ -996,7 +1416,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' } :
@@ -1017,7 +1437,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];
 }
@@ -1036,6 +1456,8 @@ class AnimationAstBuilderContext {
         this.currentTime = 0;
         this.collectedStyles = new Map();
         this.options = null;
+        this.unsupportedCSSPropertiesFound = new Set();
+        this.nonAnimatableCSSPropertiesFound = new Set();
     }
 }
 function consumeOffset(styles) {
@@ -1059,11 +1481,10 @@ function consumeOffset(styles) {
     return offset;
 }
 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, '');
     }
@@ -1075,7 +1496,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) {
@@ -1230,6 +1651,8 @@ 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
@@ -1251,8 +1674,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
@@ -1611,7 +2035,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;
     }
@@ -1889,10 +2313,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;
     }
@@ -1905,8 +2332,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;
     }
@@ -1988,7 +2414,7 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
             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));
                 }
             }
         }
@@ -2050,7 +2476,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);
@@ -2078,6 +2507,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;
@@ -2184,11 +2622,15 @@ class TimelineAnimationEngine {
     }
     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 {
+            if (warnings.length) {
+                warnRegister(warnings);
+            }
             this._animations.set(id, ast);
         }
     }
@@ -2210,11 +2652,11 @@ class TimelineAnimationEngine {
             });
         }
         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) => {
             styles.forEach((_, prop) => {
@@ -2243,7 +2685,7 @@ class TimelineAnimationEngine {
     _getPlayer(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;
     }
@@ -2371,13 +2813,13 @@ class AnimationTransitionNamespace {
     }
     listen(element, name, phase, callback) {
         if (!this._triggers.has(name)) {
-            throw new Error(`Unable to listen on the animation trigger event "${phase}" because the animation trigger "${name}" doesn\'t exist!`);
+            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 = getOrSetDefaultValue(this._elementListeners, element, []);
         const data = { name, phase, callback };
@@ -2416,7 +2858,7 @@ class AnimationTransitionNamespace {
     _getTrigger(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;
     }
@@ -2770,25 +3212,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) {
@@ -3052,7 +3506,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();
@@ -3214,8 +3668,7 @@ class TransitionAnimationEngine {
         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);
@@ -3814,9 +4267,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;
@@ -4128,7 +4585,19 @@ class WebAnimationsPlayer {
 
 class WebAnimationsDriver {
     validateStyleProperty(prop) {
-        return validateStyleProperty(prop);
+        // Perform actual validation in dev mode only, in prod mode this check is a noop.
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            return validateStyleProperty(prop);
+        }
+        return true;
+    }
+    validateAnimatableStyleProperty(prop) {
+        // Perform actual validation in dev mode only, in prod mode this check is a noop.
+        if (typeof ngDevMode === 'undefined' || 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.
@@ -4137,6 +4606,9 @@ class WebAnimationsDriver {
     containsElement(elm1, elm2) {
         return containsElement(elm1, elm2);
     }
+    getParentElement(element) {
+        return getParentElement(element);
+    }
     query(element, selector, multi) {
         return invokeQuery(element, selector, multi);
     }
@@ -4201,5 +4673,5 @@ class WebAnimationsDriver {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, normalizeKeyframes as ɵnormalizeKeyframes, 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