@angular/animations 17.0.0-next.6 → 17.0.0-next.7

package/fesm2022/browser.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-next.6
+ * @license Angular v17.0.0-next.7
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -545,10 +545,10 @@ class NoopAnimationDriver {
     animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
         return new NoopAnimationPlayer(duration, delay);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: NoopAnimationDriver }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: NoopAnimationDriver }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -561,6 +561,17 @@ class AnimationDriver {
     static { this.NOOP = ( /* @__PURE__ */new NoopAnimationDriver()); }
 }
 
+class AnimationStyleNormalizer {
+}
+class NoopAnimationStyleNormalizer {
+    normalizePropertyName(propertyName, errors) {
+        return propertyName;
+    }
+    normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
+        return value;
+    }
+}
+
 const ONE_SECOND = 1000;
 const SUBSTITUTION_EXPR_START = '{{';
 const SUBSTITUTION_EXPR_END = '}}';
@@ -810,6 +821,59 @@ function computeStyle(element, prop) {
     return window.getComputedStyle(element)[prop];
 }
 
+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);
+    }
+    normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
+        let unit = '';
+        const strVal = value.toString().trim();
+        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(invalidCssUnitValue(userProvidedProperty, value));
+                }
+            }
+        }
+        return strVal + unit;
+    }
+}
+
 function createListOfWarnings(warnings) {
     const LINE_START = '\n - ';
     return `${LINE_START}${warnings.filter(Boolean).map(warning => warning).join(LINE_START)}`;
@@ -2198,99 +2262,6 @@ function flattenStyles(input, allStyles) {
     return styles;
 }
 
-class Animation {
-    constructor(_driver, input) {
-        this._driver = _driver;
-        const errors = [];
-        const warnings = [];
-        const ast = buildAnimationAst(_driver, input, errors, warnings);
-        if (errors.length) {
-            throw validationFailed(errors);
-        }
-        if (warnings.length) {
-            warnValidation(warnings);
-        }
-        this._animationAst = ast;
-    }
-    buildTimelines(element, startingStyles, destinationStyles, options, subInstructions) {
-        const start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) :
-            startingStyles;
-        const dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) :
-            destinationStyles;
-        const errors = [];
-        subInstructions = subInstructions || new ElementInstructionMap();
-        const result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors);
-        if (errors.length) {
-            throw buildingFailed(errors);
-        }
-        return result;
-    }
-}
-
-class AnimationStyleNormalizer {
-}
-class NoopAnimationStyleNormalizer {
-    normalizePropertyName(propertyName, errors) {
-        return propertyName;
-    }
-    normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
-        return value;
-    }
-}
-
-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);
-    }
-    normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
-        let unit = '';
-        const strVal = value.toString().trim();
-        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(invalidCssUnitValue(userProvidedProperty, value));
-                }
-            }
-        }
-        return strVal + unit;
-    }
-}
-
 function createTransitionInstruction(element, triggerName, fromState, toState, isRemovalTransition, fromStyles, toStyles, timelines, queriedElements, preStyleProps, postStyleProps, totalTime, errors) {
     return {
         type: 0 /* AnimationTransitionInstructionType.TransitionAnimation */,
@@ -4210,309 +4181,52 @@ class AnimationEngine {
     }
 }
 
-const ANIMATION_PREFIX = '@';
-const DISABLE_ANIMATIONS_FLAG = '@.disabled';
-class AnimationRendererFactory {
-    constructor(delegate, engine, _zone) {
-        this.delegate = delegate;
-        this.engine = engine;
-        this._zone = _zone;
-        this._currentId = 0;
-        this._microtaskId = 1;
-        this._animationCallbacksBuffer = [];
-        this._rendererCache = new Map();
-        this._cdRecurDepth = 0;
-        engine.onRemovalComplete = (element, delegate) => {
-            // Note: if a component element has a leave animation, and a host leave animation,
-            // the view engine will call `removeChild` for the parent
-            // component renderer as well as for the child component renderer.
-            // Therefore, we need to check if we already removed the element.
-            const parentNode = delegate?.parentNode(element);
-            if (parentNode) {
-                delegate.removeChild(parentNode, element);
-            }
-        };
-    }
-    createRenderer(hostElement, type) {
-        const EMPTY_NAMESPACE_ID = '';
-        // cache the delegates to find out which cached delegate can
-        // be used by which cached renderer
-        const delegate = this.delegate.createRenderer(hostElement, type);
-        if (!hostElement || !type || !type.data || !type.data['animation']) {
-            let renderer = this._rendererCache.get(delegate);
-            if (!renderer) {
-                // Ensure that the renderer is removed from the cache on destroy
-                // since it may contain references to detached DOM nodes.
-                const onRendererDestroy = () => this._rendererCache.delete(delegate);
-                renderer =
-                    new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine, onRendererDestroy);
-                // only cache this result when the base renderer is used
-                this._rendererCache.set(delegate, renderer);
-            }
-            return renderer;
+/**
+ * Returns an instance of `SpecialCasedStyles` if and when any special (non animateable) styles are
+ * detected.
+ *
+ * In CSS there exist properties that cannot be animated within a keyframe animation
+ * (whether it be via CSS keyframes or web-animations) and the animation implementation
+ * will ignore them. This function is designed to detect those special cased styles and
+ * return a container that will be executed at the start and end of the animation.
+ *
+ * @returns an instance of `SpecialCasedStyles` if any special styles are detected otherwise `null`
+ */
+function packageNonAnimatableStyles(element, styles) {
+    let startStyles = null;
+    let endStyles = null;
+    if (Array.isArray(styles) && styles.length) {
+        startStyles = filterNonAnimatableStyles(styles[0]);
+        if (styles.length > 1) {
+            endStyles = filterNonAnimatableStyles(styles[styles.length - 1]);
         }
-        const componentId = type.id;
-        const namespaceId = type.id + '-' + this._currentId;
-        this._currentId++;
-        this.engine.register(namespaceId, hostElement);
-        const registerTrigger = (trigger) => {
-            if (Array.isArray(trigger)) {
-                trigger.forEach(registerTrigger);
-            }
-            else {
-                this.engine.registerTrigger(componentId, namespaceId, hostElement, trigger.name, trigger);
-            }
-        };
-        const animationTriggers = type.data['animation'];
-        animationTriggers.forEach(registerTrigger);
-        return new AnimationRenderer(this, namespaceId, delegate, this.engine);
     }
-    begin() {
-        this._cdRecurDepth++;
-        if (this.delegate.begin) {
-            this.delegate.begin();
+    else if (styles instanceof Map) {
+        startStyles = filterNonAnimatableStyles(styles);
+    }
+    return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) :
+        null;
+}
+/**
+ * Designed to be executed during a keyframe-based animation to apply any special-cased styles.
+ *
+ * When started (when the `start()` method is run) then the provided `startStyles`
+ * will be applied. When finished (when the `finish()` method is called) the
+ * `endStyles` will be applied as well any any starting styles. Finally when
+ * `destroy()` is called then all styles will be removed.
+ */
+class SpecialCasedStyles {
+    static { this.initialStylesByElement = ( /* @__PURE__ */new WeakMap()); }
+    constructor(_element, _startStyles, _endStyles) {
+        this._element = _element;
+        this._startStyles = _startStyles;
+        this._endStyles = _endStyles;
+        this._state = 0 /* SpecialCasedStylesState.Pending */;
+        let initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element);
+        if (!initialStyles) {
+            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = new Map());
         }
-    }
-    _scheduleCountTask() {
-        queueMicrotask(() => {
-            this._microtaskId++;
-        });
-    }
-    /** @internal */
-    scheduleListenerCallback(count, fn, data) {
-        if (count >= 0 && count < this._microtaskId) {
-            this._zone.run(() => fn(data));
-            return;
-        }
-        if (this._animationCallbacksBuffer.length == 0) {
-            queueMicrotask(() => {
-                this._zone.run(() => {
-                    this._animationCallbacksBuffer.forEach(tuple => {
-                        const [fn, data] = tuple;
-                        fn(data);
-                    });
-                    this._animationCallbacksBuffer = [];
-                });
-            });
-        }
-        this._animationCallbacksBuffer.push([fn, data]);
-    }
-    end() {
-        this._cdRecurDepth--;
-        // this is to prevent animations from running twice when an inner
-        // component does CD when a parent component instead has inserted it
-        if (this._cdRecurDepth == 0) {
-            this._zone.runOutsideAngular(() => {
-                this._scheduleCountTask();
-                this.engine.flush(this._microtaskId);
-            });
-        }
-        if (this.delegate.end) {
-            this.delegate.end();
-        }
-    }
-    whenRenderingDone() {
-        return this.engine.whenRenderingDone();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: AnimationRendererFactory, deps: [{ token: i0.RendererFactory2 }, { token: AnimationEngine }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: AnimationRendererFactory }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: AnimationRendererFactory, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: AnimationEngine }, { type: i0.NgZone }] });
-class BaseAnimationRenderer {
-    constructor(namespaceId, delegate, engine, _onDestroy) {
-        this.namespaceId = namespaceId;
-        this.delegate = delegate;
-        this.engine = engine;
-        this._onDestroy = _onDestroy;
-    }
-    get data() {
-        return this.delegate.data;
-    }
-    destroyNode(node) {
-        this.delegate.destroyNode?.(node);
-    }
-    destroy() {
-        this.engine.destroy(this.namespaceId, this.delegate);
-        this.engine.afterFlushAnimationsDone(() => {
-            // Call the renderer destroy method after the animations has finished as otherwise
-            // styles will be removed too early which will cause an unstyled animation.
-            queueMicrotask(() => {
-                this.delegate.destroy();
-            });
-        });
-        this._onDestroy?.();
-    }
-    createElement(name, namespace) {
-        return this.delegate.createElement(name, namespace);
-    }
-    createComment(value) {
-        return this.delegate.createComment(value);
-    }
-    createText(value) {
-        return this.delegate.createText(value);
-    }
-    appendChild(parent, newChild) {
-        this.delegate.appendChild(parent, newChild);
-        this.engine.onInsert(this.namespaceId, newChild, parent, false);
-    }
-    insertBefore(parent, newChild, refChild, isMove = true) {
-        this.delegate.insertBefore(parent, newChild, refChild);
-        // If `isMove` true than we should animate this insert.
-        this.engine.onInsert(this.namespaceId, newChild, parent, isMove);
-    }
-    removeChild(parent, oldChild, isHostElement) {
-        this.engine.onRemove(this.namespaceId, oldChild, this.delegate);
-    }
-    selectRootElement(selectorOrNode, preserveContent) {
-        return this.delegate.selectRootElement(selectorOrNode, preserveContent);
-    }
-    parentNode(node) {
-        return this.delegate.parentNode(node);
-    }
-    nextSibling(node) {
-        return this.delegate.nextSibling(node);
-    }
-    setAttribute(el, name, value, namespace) {
-        this.delegate.setAttribute(el, name, value, namespace);
-    }
-    removeAttribute(el, name, namespace) {
-        this.delegate.removeAttribute(el, name, namespace);
-    }
-    addClass(el, name) {
-        this.delegate.addClass(el, name);
-    }
-    removeClass(el, name) {
-        this.delegate.removeClass(el, name);
-    }
-    setStyle(el, style, value, flags) {
-        this.delegate.setStyle(el, style, value, flags);
-    }
-    removeStyle(el, style, flags) {
-        this.delegate.removeStyle(el, style, flags);
-    }
-    setProperty(el, name, value) {
-        if (name.charAt(0) == ANIMATION_PREFIX && name == DISABLE_ANIMATIONS_FLAG) {
-            this.disableAnimations(el, !!value);
-        }
-        else {
-            this.delegate.setProperty(el, name, value);
-        }
-    }
-    setValue(node, value) {
-        this.delegate.setValue(node, value);
-    }
-    listen(target, eventName, callback) {
-        return this.delegate.listen(target, eventName, callback);
-    }
-    disableAnimations(element, value) {
-        this.engine.disableAnimations(element, value);
-    }
-}
-class AnimationRenderer extends BaseAnimationRenderer {
-    constructor(factory, namespaceId, delegate, engine, onDestroy) {
-        super(namespaceId, delegate, engine, onDestroy);
-        this.factory = factory;
-        this.namespaceId = namespaceId;
-    }
-    setProperty(el, name, value) {
-        if (name.charAt(0) == ANIMATION_PREFIX) {
-            if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
-                value = value === undefined ? true : !!value;
-                this.disableAnimations(el, value);
-            }
-            else {
-                this.engine.process(this.namespaceId, el, name.slice(1), value);
-            }
-        }
-        else {
-            this.delegate.setProperty(el, name, value);
-        }
-    }
-    listen(target, eventName, callback) {
-        if (eventName.charAt(0) == ANIMATION_PREFIX) {
-            const element = resolveElementFromTarget(target);
-            let name = eventName.slice(1);
-            let phase = '';
-            // @listener.phase is for trigger animation callbacks
-            // @@listener is for animation builder callbacks
-            if (name.charAt(0) != ANIMATION_PREFIX) {
-                [name, phase] = parseTriggerCallbackName(name);
-            }
-            return this.engine.listen(this.namespaceId, element, name, phase, event => {
-                const countId = event['_data'] || -1;
-                this.factory.scheduleListenerCallback(countId, callback, event);
-            });
-        }
-        return this.delegate.listen(target, eventName, callback);
-    }
-}
-function resolveElementFromTarget(target) {
-    switch (target) {
-        case 'body':
-            return document.body;
-        case 'document':
-            return document;
-        case 'window':
-            return window;
-        default:
-            return target;
-    }
-}
-function parseTriggerCallbackName(triggerName) {
-    const dotIndex = triggerName.indexOf('.');
-    const trigger = triggerName.substring(0, dotIndex);
-    const phase = triggerName.slice(dotIndex + 1);
-    return [trigger, phase];
-}
-
-/**
- * Returns an instance of `SpecialCasedStyles` if and when any special (non animateable) styles are
- * detected.
- *
- * In CSS there exist properties that cannot be animated within a keyframe animation
- * (whether it be via CSS keyframes or web-animations) and the animation implementation
- * will ignore them. This function is designed to detect those special cased styles and
- * return a container that will be executed at the start and end of the animation.
- *
- * @returns an instance of `SpecialCasedStyles` if any special styles are detected otherwise `null`
- */
-function packageNonAnimatableStyles(element, styles) {
-    let startStyles = null;
-    let endStyles = null;
-    if (Array.isArray(styles) && styles.length) {
-        startStyles = filterNonAnimatableStyles(styles[0]);
-        if (styles.length > 1) {
-            endStyles = filterNonAnimatableStyles(styles[styles.length - 1]);
-        }
-    }
-    else if (styles instanceof Map) {
-        startStyles = filterNonAnimatableStyles(styles);
-    }
-    return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) :
-        null;
-}
-/**
- * Designed to be executed during a keyframe-based animation to apply any special-cased styles.
- *
- * When started (when the `start()` method is run) then the provided `startStyles`
- * will be applied. When finished (when the `finish()` method is called) the
- * `endStyles` will be applied as well any any starting styles. Finally when
- * `destroy()` is called then all styles will be removed.
- */
-class SpecialCasedStyles {
-    static { this.initialStylesByElement = ( /* @__PURE__ */new WeakMap()); }
-    constructor(_element, _startStyles, _endStyles) {
-        this._element = _element;
-        this._startStyles = _startStyles;
-        this._endStyles = _endStyles;
-        this._state = 0 /* SpecialCasedStylesState.Pending */;
-        let initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element);
-        if (!initialStyles) {
-            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = new Map());
-        }
-        this._initialStyles = initialStyles;
+        this._initialStyles = initialStyles;
     }
     start() {
         if (this._state < 1 /* SpecialCasedStylesState.Started */) {
@@ -4787,6 +4501,299 @@ class WebAnimationsDriver {
     }
 }
 
+function createEngine(type, doc) {
+    // TODO: find a way to make this tree shakable.
+    if (type === 'noop') {
+        return new AnimationEngine(doc, new NoopAnimationDriver(), new NoopAnimationStyleNormalizer());
+    }
+    return new AnimationEngine(doc, new WebAnimationsDriver(), new WebAnimationsStyleNormalizer());
+}
+
+class Animation {
+    constructor(_driver, input) {
+        this._driver = _driver;
+        const errors = [];
+        const warnings = [];
+        const ast = buildAnimationAst(_driver, input, errors, warnings);
+        if (errors.length) {
+            throw validationFailed(errors);
+        }
+        if (warnings.length) {
+            warnValidation(warnings);
+        }
+        this._animationAst = ast;
+    }
+    buildTimelines(element, startingStyles, destinationStyles, options, subInstructions) {
+        const start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) :
+            startingStyles;
+        const dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) :
+            destinationStyles;
+        const errors = [];
+        subInstructions = subInstructions || new ElementInstructionMap();
+        const result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors);
+        if (errors.length) {
+            throw buildingFailed(errors);
+        }
+        return result;
+    }
+}
+
+const ANIMATION_PREFIX = '@';
+const DISABLE_ANIMATIONS_FLAG = '@.disabled';
+class BaseAnimationRenderer {
+    constructor(namespaceId, delegate, engine, _onDestroy) {
+        this.namespaceId = namespaceId;
+        this.delegate = delegate;
+        this.engine = engine;
+        this._onDestroy = _onDestroy;
+        this.isAnimationRenderer = true;
+    }
+    get data() {
+        return this.delegate.data;
+    }
+    destroyNode(node) {
+        this.delegate.destroyNode?.(node);
+    }
+    destroy() {
+        this.engine.destroy(this.namespaceId, this.delegate);
+        this.engine.afterFlushAnimationsDone(() => {
+            // Call the renderer destroy method after the animations has finished as otherwise
+            // styles will be removed too early which will cause an unstyled animation.
+            queueMicrotask(() => {
+                this.delegate.destroy();
+            });
+        });
+        this._onDestroy?.();
+    }
+    createElement(name, namespace) {
+        return this.delegate.createElement(name, namespace);
+    }
+    createComment(value) {
+        return this.delegate.createComment(value);
+    }
+    createText(value) {
+        return this.delegate.createText(value);
+    }
+    appendChild(parent, newChild) {
+        this.delegate.appendChild(parent, newChild);
+        this.engine.onInsert(this.namespaceId, newChild, parent, false);
+    }
+    insertBefore(parent, newChild, refChild, isMove = true) {
+        this.delegate.insertBefore(parent, newChild, refChild);
+        // If `isMove` true than we should animate this insert.
+        this.engine.onInsert(this.namespaceId, newChild, parent, isMove);
+    }
+    removeChild(parent, oldChild, isHostElement) {
+        this.engine.onRemove(this.namespaceId, oldChild, this.delegate);
+    }
+    selectRootElement(selectorOrNode, preserveContent) {
+        return this.delegate.selectRootElement(selectorOrNode, preserveContent);
+    }
+    parentNode(node) {
+        return this.delegate.parentNode(node);
+    }
+    nextSibling(node) {
+        return this.delegate.nextSibling(node);
+    }
+    setAttribute(el, name, value, namespace) {
+        this.delegate.setAttribute(el, name, value, namespace);
+    }
+    removeAttribute(el, name, namespace) {
+        this.delegate.removeAttribute(el, name, namespace);
+    }
+    addClass(el, name) {
+        this.delegate.addClass(el, name);
+    }
+    removeClass(el, name) {
+        this.delegate.removeClass(el, name);
+    }
+    setStyle(el, style, value, flags) {
+        this.delegate.setStyle(el, style, value, flags);
+    }
+    removeStyle(el, style, flags) {
+        this.delegate.removeStyle(el, style, flags);
+    }
+    setProperty(el, name, value) {
+        if (name.charAt(0) == ANIMATION_PREFIX && name == DISABLE_ANIMATIONS_FLAG) {
+            this.disableAnimations(el, !!value);
+        }
+        else {
+            this.delegate.setProperty(el, name, value);
+        }
+    }
+    setValue(node, value) {
+        this.delegate.setValue(node, value);
+    }
+    listen(target, eventName, callback) {
+        return this.delegate.listen(target, eventName, callback);
+    }
+    disableAnimations(element, value) {
+        this.engine.disableAnimations(element, value);
+    }
+}
+class AnimationRenderer extends BaseAnimationRenderer {
+    constructor(factory, namespaceId, delegate, engine, onDestroy) {
+        super(namespaceId, delegate, engine, onDestroy);
+        this.factory = factory;
+        this.namespaceId = namespaceId;
+    }
+    setProperty(el, name, value) {
+        if (name.charAt(0) == ANIMATION_PREFIX) {
+            if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
+                value = value === undefined ? true : !!value;
+                this.disableAnimations(el, value);
+            }
+            else {
+                this.engine.process(this.namespaceId, el, name.slice(1), value);
+            }
+        }
+        else {
+            this.delegate.setProperty(el, name, value);
+        }
+    }
+    listen(target, eventName, callback) {
+        if (eventName.charAt(0) == ANIMATION_PREFIX) {
+            const element = resolveElementFromTarget(target);
+            let name = eventName.slice(1);
+            let phase = '';
+            // @listener.phase is for trigger animation callbacks
+            // @@listener is for animation builder callbacks
+            if (name.charAt(0) != ANIMATION_PREFIX) {
+                [name, phase] = parseTriggerCallbackName(name);
+            }
+            return this.engine.listen(this.namespaceId, element, name, phase, event => {
+                const countId = event['_data'] || -1;
+                this.factory.scheduleListenerCallback(countId, callback, event);
+            });
+        }
+        return this.delegate.listen(target, eventName, callback);
+    }
+}
+function resolveElementFromTarget(target) {
+    switch (target) {
+        case 'body':
+            return document.body;
+        case 'document':
+            return document;
+        case 'window':
+            return window;
+        default:
+            return target;
+    }
+}
+function parseTriggerCallbackName(triggerName) {
+    const dotIndex = triggerName.indexOf('.');
+    const trigger = triggerName.substring(0, dotIndex);
+    const phase = triggerName.slice(dotIndex + 1);
+    return [trigger, phase];
+}
+
+class AnimationRendererFactory {
+    constructor(delegate, engine, _zone) {
+        this.delegate = delegate;
+        this.engine = engine;
+        this._zone = _zone;
+        this._currentId = 0;
+        this._microtaskId = 1;
+        this._animationCallbacksBuffer = [];
+        this._rendererCache = new Map();
+        this._cdRecurDepth = 0;
+        engine.onRemovalComplete = (element, delegate) => {
+            // Note: if a component element has a leave animation, and a host leave animation,
+            // the view engine will call `removeChild` for the parent
+            // component renderer as well as for the child component renderer.
+            // Therefore, we need to check if we already removed the element.
+            const parentNode = delegate?.parentNode(element);
+            if (parentNode) {
+                delegate.removeChild(parentNode, element);
+            }
+        };
+    }
+    createRenderer(hostElement, type) {
+        const EMPTY_NAMESPACE_ID = '';
+        // cache the delegates to find out which cached delegate can
+        // be used by which cached renderer
+        const delegate = this.delegate.createRenderer(hostElement, type);
+        if (!hostElement || !type?.data?.['animation']) {
+            const cache = this._rendererCache;
+            let renderer = cache.get(delegate);
+            if (!renderer) {
+                // Ensure that the renderer is removed from the cache on destroy
+                // since it may contain references to detached DOM nodes.
+                const onRendererDestroy = () => cache.delete(delegate);
+                renderer =
+                    new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine, onRendererDestroy);
+                // only cache this result when the base renderer is used
+                cache.set(delegate, renderer);
+            }
+            return renderer;
+        }
+        const componentId = type.id;
+        const namespaceId = type.id + '-' + this._currentId;
+        this._currentId++;
+        this.engine.register(namespaceId, hostElement);
+        const registerTrigger = (trigger) => {
+            if (Array.isArray(trigger)) {
+                trigger.forEach(registerTrigger);
+            }
+            else {
+                this.engine.registerTrigger(componentId, namespaceId, hostElement, trigger.name, trigger);
+            }
+        };
+        const animationTriggers = type.data['animation'];
+        animationTriggers.forEach(registerTrigger);
+        return new AnimationRenderer(this, namespaceId, delegate, this.engine);
+    }
+    begin() {
+        this._cdRecurDepth++;
+        if (this.delegate.begin) {
+            this.delegate.begin();
+        }
+    }
+    _scheduleCountTask() {
+        queueMicrotask(() => {
+            this._microtaskId++;
+        });
+    }
+    /** @internal */
+    scheduleListenerCallback(count, fn, data) {
+        if (count >= 0 && count < this._microtaskId) {
+            this._zone.run(() => fn(data));
+            return;
+        }
+        const animationCallbacksBuffer = this._animationCallbacksBuffer;
+        if (animationCallbacksBuffer.length == 0) {
+            queueMicrotask(() => {
+                this._zone.run(() => {
+                    animationCallbacksBuffer.forEach(tuple => {
+                        const [fn, data] = tuple;
+                        fn(data);
+                    });
+                    this._animationCallbacksBuffer = [];
+                });
+            });
+        }
+        animationCallbacksBuffer.push([fn, data]);
+    }
+    end() {
+        this._cdRecurDepth--;
+        // this is to prevent animations from running twice when an inner
+        // component does CD when a parent component instead has inserted it
+        if (this._cdRecurDepth == 0) {
+            this._zone.runOutsideAngular(() => {
+                this._scheduleCountTask();
+                this.engine.flush(this._microtaskId);
+            });
+        }
+        if (this.delegate.end) {
+            this.delegate.end();
+        }
+    }
+    whenRenderingDone() {
+        return this.engine.whenRenderingDone();
+    }
+}
+
 /**
  * @module
  * @description
@@ -4805,5 +4812,5 @@ class WebAnimationsDriver {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, NoopAnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, camelCaseToDashCase as ɵcamelCaseToDashCase, containsElement as ɵcontainsElement, getParentElement as ɵgetParentElement, invokeQuery as ɵinvokeQuery, normalizeKeyframes as ɵnormalizeKeyframes, validateStyleProperty as ɵvalidateStyleProperty, validateWebAnimatableStyleProperty as ɵvalidateWebAnimatableStyleProperty };
+export { AnimationDriver, NoopAnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, BaseAnimationRenderer as ɵBaseAnimationRenderer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, camelCaseToDashCase as ɵcamelCaseToDashCase, containsElement as ɵcontainsElement, createEngine as ɵcreateEngine, getParentElement as ɵgetParentElement, invokeQuery as ɵinvokeQuery, normalizeKeyframes as ɵnormalizeKeyframes, validateStyleProperty as ɵvalidateStyleProperty, validateWebAnimatableStyleProperty as ɵvalidateWebAnimatableStyleProperty };
 //# sourceMappingURL=browser.mjs.map