@angular/core 20.2.0-rc.0 → 20.2.0

package/fesm2022/debug_node.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v20.2.0-rc.0
+ * @license Angular v20.2.0
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -4896,12 +4896,6 @@ var ViewEncapsulation;
      * all the Component's styling.
      */
     ViewEncapsulation[ViewEncapsulation["ShadowDom"] = 3] = "ShadowDom";
-    /**
-     * Similar to `ShadowDom`, but prevents any external styles from leaking into the
-     * component's ShadowRoot. This is useful when you want to ensure that the component's
-     * styles are completely isolated from the rest of the application, including global styles.
-     */
-    ViewEncapsulation[ViewEncapsulation["IsolatedShadowDom"] = 4] = "IsolatedShadowDom";
 })(ViewEncapsulation || (ViewEncapsulation = {}));
 
 /**
@@ -7996,9 +7990,7 @@ function locateHostElement(renderer, elementOrSelector, encapsulation, injector)
     const preserveHostContent = injector.get(PRESERVE_HOST_CONTENT, PRESERVE_HOST_CONTENT_DEFAULT);
     // When using native Shadow DOM, do not clear host element to allow native slot
     // projection.
-    const preserveContent = preserveHostContent ||
-        encapsulation === ViewEncapsulation.ShadowDom ||
-        encapsulation === ViewEncapsulation.IsolatedShadowDom;
+    const preserveContent = preserveHostContent || encapsulation === ViewEncapsulation.ShadowDom;
     const rootElement = renderer.selectRootElement(elementOrSelector, preserveContent);
     applyRootElementTransform(rootElement);
     return rootElement;
@@ -13523,7 +13515,7 @@ class ComponentFactory extends ComponentFactory$1 {
 }
 function createRootTView(rootSelectorOrNode, componentDef, componentBindings, directives) {
     const tAttributes = rootSelectorOrNode
-        ? ['ng-version', '20.2.0-rc.0']
+        ? ['ng-version', '20.2.0']
         : // Extract attributes and classes from the first selector only to match VE behavior.
             extractAttrsAndClassesFromSelector(componentDef.selectors[0]);
     let creationBindings = null;
@@ -13647,7 +13639,7 @@ class ComponentRef extends ComponentRef$1 {
         if (ngDevMode && !hasSetInput) {
             const cmpNameForError = stringifyForError(this.componentType);
             let message = `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
-            message += `Make sure that the '${name}' property is declared as an input using the @Input() decorator or the input() function.`;
+            message += `Make sure that the '${name}' property is declared as an input using the input() or model() function or the @Input() decorator.`;
             reportUnknownPropertyError(message);
         }
     }
@@ -21890,6 +21882,13 @@ function getLongestComputedAnimation(computedStyle) {
     }
     return longest;
 }
+function isShorterThanExistingAnimation(existing, longest) {
+    return existing !== undefined && existing.duration > longest.duration;
+}
+function longestExists(longest) {
+    return ((longest.animationName != undefined || longest.propertyName != undefined) &&
+        longest.duration > 0);
+}
 /**
  * Determines the longest animation, but with `getComputedStyles` instead of `getAnimations`. This
  * is ultimately safer than getAnimations because it can be used when recalculations are in
@@ -21900,10 +21899,11 @@ function determineLongestAnimationFromComputedStyles(el, animationsMap) {
     const longestAnimation = getLongestComputedAnimation(computedStyle);
     const longestTransition = getLongestComputedTransition(computedStyle);
     const longest = longestAnimation.duration > longestTransition.duration ? longestAnimation : longestTransition;
-    if (animationsMap.has(el) && animationsMap.get(el).duration > longest.duration) {
+    if (isShorterThanExistingAnimation(animationsMap.get(el), longest))
         return;
+    if (longestExists(longest)) {
+        animationsMap.set(el, longest);
     }
-    animationsMap.set(el, longest);
 }
 /**
  * Multiple animations can be set on an element. This grabs an element and
@@ -21912,8 +21912,8 @@ function determineLongestAnimationFromComputedStyles(el, animationsMap) {
  * This ensures we get the longest running animation and only remove when
  * that animation completes.
  */
-function determineLongestAnimation(event, el, animationsMap, areAnimationSupported) {
-    if (!areAnimationSupported || !(event.target instanceof Element) || event.target !== el)
+function determineLongestAnimation(el, animationsMap, areAnimationSupported) {
+    if (!areAnimationSupported)
         return;
     const animations = el.getAnimations();
     return animations.length === 0
@@ -21923,7 +21923,7 @@ function determineLongestAnimation(event, el, animationsMap, areAnimationSupport
         : determineLongestAnimationFromElementAnimations(el, animationsMap, animations);
 }
 function determineLongestAnimationFromElementAnimations(el, animationsMap, animations) {
-    let currentLongest = {
+    let longest = {
         animationName: undefined,
         propertyName: undefined,
         duration: 0,
@@ -21942,14 +21942,15 @@ function determineLongestAnimationFromElementAnimations(el, animationsMap, anima
             // Check for CSSTransition specific property
             propertyName = animation.transitionProperty;
         }
-        if (duration >= currentLongest.duration) {
-            currentLongest = { animationName, propertyName, duration };
+        if (duration >= longest.duration) {
+            longest = { animationName, propertyName, duration };
         }
     }
-    if (animationsMap.has(el) && animationsMap.get(el).duration > currentLongest.duration) {
+    if (isShorterThanExistingAnimation(animationsMap.get(el), longest))
         return;
+    if (longestExists(longest)) {
+        animationsMap.set(el, longest);
     }
-    animationsMap.set(el, currentLongest);
 }
 
 const DEFAULT_ANIMATIONS_DISABLED = false;
@@ -21957,6 +21958,36 @@ const areAnimationSupported = (typeof ngServerMode === 'undefined' || !ngServerM
     typeof document !== 'undefined' &&
     // tslint:disable-next-line:no-toplevel-property-access
     typeof document?.documentElement?.getAnimations === 'function';
+/**
+ * Helper function to check if animations are disabled via injection token
+ */
+function areAnimationsDisabled(lView) {
+    const injector = lView[INJECTOR];
+    return injector.get(ANIMATIONS_DISABLED, DEFAULT_ANIMATIONS_DISABLED);
+}
+/**
+ * Helper function to setup element registry cleanup when LView is destroyed
+ */
+function setupElementRegistryCleanup(elementRegistry, lView, tView, nativeElement) {
+    if (lView[FLAGS] & 8 /* LViewFlags.FirstLViewPass */) {
+        storeCleanupWithContext(tView, lView, nativeElement, (elToClean) => {
+            elementRegistry.elements.remove(elToClean);
+        });
+    }
+}
+/**
+ * Helper function to cleanup enterClassMap data safely
+ */
+function cleanupEnterClassData(element) {
+    const elementData = enterClassMap.get(element);
+    if (elementData) {
+        for (const fn of elementData.cleanupFns) {
+            fn();
+        }
+        enterClassMap.delete(element);
+    }
+    longestAnimations.delete(element);
+}
 const noOpAnimationComplete = () => { };
 // Tracks the list of classes added to a DOM node from `animate.enter` calls to ensure
 // we remove all of the classes in the case of animation composition via host bindings.
@@ -21966,10 +21997,26 @@ const longestAnimations = new WeakMap();
 // used to prevent duplicate nodes from showing up when nodes have been toggled quickly
 // from an `@if` or `@for`.
 const leavingNodes = new WeakMap();
+function clearLeavingNodes(tNode) {
+    if (leavingNodes.get(tNode)?.length === 0) {
+        leavingNodes.delete(tNode);
+    }
+}
+function trackLeavingNodes(tNode, el) {
+    // We need to track this tNode's element just to be sure we don't add
+    // a new RNode for this TNode while this one is still animating away.
+    // once the animation is complete, we remove this reference.
+    if (leavingNodes.has(tNode)) {
+        leavingNodes.get(tNode)?.push(el);
+    }
+    else {
+        leavingNodes.set(tNode, [el]);
+    }
+}
 /**
  * Instruction to handle the `animate.enter` behavior for class bindings.
  *
- * @param value The value bound to `animate.enter`, which is a string or a string array.
+ * @param value The value bound to `animate.enter`, which is a string or a function.
  * @returns This function returns itself so that it may be chained.
  *
  * @codeGenApi
@@ -21981,15 +22028,13 @@ function ɵɵanimateEnter(value) {
     }
     ngDevMode && assertAnimationTypes(value, 'animate.enter');
     const lView = getLView();
+    if (areAnimationsDisabled(lView)) {
+        return ɵɵanimateEnter;
+    }
     const tNode = getCurrentTNode();
     const nativeElement = getNativeByTNode(tNode, lView);
     const renderer = lView[RENDERER];
-    const injector = lView[INJECTOR];
-    const animationsDisabled = injector.get(ANIMATIONS_DISABLED, DEFAULT_ANIMATIONS_DISABLED);
-    const ngZone = injector.get(NgZone);
-    if (animationsDisabled) {
-        return ɵɵanimateEnter;
-    }
+    const ngZone = lView[INJECTOR].get(NgZone);
     // Retrieve the actual class list from the value. This will resolve any resolver functions from
     // bindings.
     const activeClasses = getClassListFromValue(value);
@@ -21999,7 +22044,6 @@ function ɵɵanimateEnter(value) {
     // This also allows us to setup cancellation of animations in progress if the
     // gets removed early.
     const handleAnimationStart = (event) => {
-        determineLongestAnimation(event, nativeElement, longestAnimations, areAnimationSupported);
         setupAnimationCancel(event, renderer);
         const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
         ngZone.runOutsideAngular(() => {
@@ -22008,7 +22052,7 @@ function ɵɵanimateEnter(value) {
     };
     // When the longest animation ends, we can remove all the classes
     const handleInAnimationEnd = (event) => {
-        animationEnd(event, nativeElement, renderer, cleanupFns);
+        animationEnd(event, nativeElement, renderer);
     };
     // We only need to add these event listeners if there are actual classes to apply
     if (activeClasses && activeClasses.length > 0) {
@@ -22028,6 +22072,20 @@ function ɵɵanimateEnter(value) {
         for (const klass of activeClasses) {
             renderer.addClass(nativeElement, klass);
         }
+        // In the case that the classes added have no animations, we need to remove
+        // the classes right away. This could happen because someone is intentionally
+        // preventing an animation via selector specificity.
+        ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                determineLongestAnimation(nativeElement, longestAnimations, areAnimationSupported);
+                if (!longestAnimations.has(nativeElement)) {
+                    for (const klass of activeClasses) {
+                        renderer.removeClass(nativeElement, klass);
+                    }
+                    cleanupEnterClassData(nativeElement);
+                }
+            });
+        });
     }
     return ɵɵanimateEnter; // For chaining
 }
@@ -22067,12 +22125,19 @@ function ɵɵanimateEnterListener(value) {
     }
     ngDevMode && assertAnimationTypes(value, 'animate.enter');
     const lView = getLView();
-    const tNode = getCurrentTNode();
-    const nativeElement = getNativeByTNode(tNode, lView);
-    const animationsDisabled = lView[INJECTOR].get(ANIMATIONS_DISABLED, DEFAULT_ANIMATIONS_DISABLED);
-    if (animationsDisabled) {
+    if (areAnimationsDisabled(lView)) {
         return ɵɵanimateEnterListener;
     }
+    const tNode = getCurrentTNode();
+    const nativeElement = getNativeByTNode(tNode, lView);
+    // In the case that we have an existing node that's animating away, like when
+    // an `@if` toggles quickly or `@for` adds and removes elements quickly, we
+    // need to end the animation for the former node and remove it right away to
+    // prevent duplicate nodes showing up.
+    leavingNodes
+        .get(tNode)
+        ?.pop()
+        ?.dispatchEvent(new CustomEvent('animationend', { detail: { cancel: true } }));
     value.call(lView[CONTEXT], { target: nativeElement, animationComplete: noOpAnimationComplete });
     return ɵɵanimateEnterListener;
 }
@@ -22081,7 +22146,7 @@ function ɵɵanimateEnterListener(value) {
  * It registers an animation with the ElementRegistry to be run when the element
  * is scheduled for removal from the DOM.
  *
- * @param value The value bound to `animate.leave`, which can be a string or string array.
+ * @param value The value bound to `animate.leave`, which can be a string or a function.
  * @returns This function returns itself so that it may be chained.
  *
  * @codeGenApi
@@ -22093,18 +22158,19 @@ function ɵɵanimateLeave(value) {
     }
     ngDevMode && assertAnimationTypes(value, 'animate.leave');
     const lView = getLView();
+    const animationsDisabled = areAnimationsDisabled(lView);
+    if (animationsDisabled) {
+        return ɵɵanimateLeave;
+    }
     const tView = getTView();
     const tNode = getCurrentTNode();
     const nativeElement = getNativeByTNode(tNode, lView);
     // This instruction is called in the update pass.
     const renderer = lView[RENDERER];
-    const injector = lView[INJECTOR];
-    // Assume ElementRegistry and ANIMATIONS_DISABLED are injectable services.
     const elementRegistry = getAnimationElementRemovalRegistry();
     ngDevMode &&
         assertDefined(elementRegistry.elements, 'Expected `ElementRegistry` to be present in animations subsystem');
-    const animationsDisabled = injector.get(ANIMATIONS_DISABLED, DEFAULT_ANIMATIONS_DISABLED);
-    const ngZone = injector.get(NgZone);
+    const ngZone = lView[INJECTOR].get(NgZone);
     // This function gets stashed in the registry to be used once the element removal process
     // begins. We pass in the values and resolvers so as to evaluate the resolved classes
     // at the latest possible time, meaning we evaluate them right before the animation
@@ -22115,11 +22181,7 @@ function ɵɵanimateLeave(value) {
         };
     };
     // Ensure cleanup if the LView is destroyed before the animation runs.
-    if (lView[FLAGS] & 8 /* LViewFlags.FirstLViewPass */) {
-        storeCleanupWithContext(tView, lView, nativeElement, (elToClean) => {
-            elementRegistry.elements.remove(elToClean);
-        });
-    }
+    setupElementRegistryCleanup(elementRegistry, lView, tView, nativeElement);
     elementRegistry.elements.add(nativeElement, value, animate);
     return ɵɵanimateLeave; // For chaining
 }
@@ -22140,6 +22202,9 @@ function ɵɵanimateLeaveListener(value) {
         return ɵɵanimateLeaveListener;
     }
     ngDevMode && assertAnimationTypes(value, 'animate.leave');
+    // Even when animations are disabled, we still need to register the element for removal
+    // to ensure proper cleanup and allow developers to handle element removal in tests
+    // So we don't have an early return here.
     const lView = getLView();
     const tNode = getCurrentTNode();
     const tView = getTView();
@@ -22147,13 +22212,13 @@ function ɵɵanimateLeaveListener(value) {
     if (nativeElement.nodeType !== Node.ELEMENT_NODE) {
         return ɵɵanimateLeaveListener;
     }
-    // Assume ElementRegistry and ANIMATIONS_DISABLED are injectable services.
-    const injector = lView[INJECTOR];
     const elementRegistry = getAnimationElementRemovalRegistry();
     ngDevMode &&
         assertDefined(elementRegistry.elements, 'Expected `ElementRegistry` to be present in animations subsystem');
-    const animationsDisabled = injector.get(ANIMATIONS_DISABLED, DEFAULT_ANIMATIONS_DISABLED);
-    const animate = (el, value) => {
+    const renderer = lView[RENDERER];
+    const animationsDisabled = areAnimationsDisabled(lView);
+    const ngZone = lView[INJECTOR].get(NgZone);
+    const animate = (_el, value) => {
         return (removeFn) => {
             if (animationsDisabled) {
                 removeFn();
@@ -22162,19 +22227,20 @@ function ɵɵanimateLeaveListener(value) {
                 const event = {
                     target: nativeElement,
                     animationComplete: () => {
+                        clearLeavingNodes(tNode);
                         removeFn();
                     },
                 };
+                trackLeavingNodes(tNode, _el);
+                ngZone.runOutsideAngular(() => {
+                    renderer.listen(_el, 'animationend', () => removeFn(), { once: true });
+                });
                 value.call(lView[CONTEXT], event);
             }
         };
     };
     // Ensure cleanup if the LView is destroyed before the animation runs.
-    if (lView[FLAGS] & 8 /* LViewFlags.FirstLViewPass */) {
-        storeCleanupWithContext(tView, lView, nativeElement, (elToClean) => {
-            elementRegistry.elements.remove(elToClean);
-        });
-    }
+    setupElementRegistryCleanup(elementRegistry, lView, tView, nativeElement);
     elementRegistry.elements.addCallback(nativeElement, value, animate);
     return ɵɵanimateLeaveListener; // For chaining
 }
@@ -22219,13 +22285,7 @@ function cancelAnimationsIfRunning(element, renderer) {
         }
     }
     // We need to prevent any enter animation listeners from firing if they exist.
-    if (elementData) {
-        for (const fn of elementData.cleanupFns) {
-            fn();
-        }
-    }
-    longestAnimations.delete(element);
-    enterClassMap.delete(element);
+    cleanupEnterClassData(element);
 }
 function setupAnimationCancel(event, renderer) {
     if (!(event.target instanceof Element))
@@ -22256,7 +22316,7 @@ function isLongestAnimation(event, nativeElement) {
             (longestAnimation.propertyName !== undefined &&
                 event.propertyName === longestAnimation.propertyName)));
 }
-function animationEnd(event, nativeElement, renderer, cleanupFns) {
+function animationEnd(event, nativeElement, renderer) {
     const elementData = enterClassMap.get(nativeElement);
     if (!elementData)
         return;
@@ -22269,11 +22329,7 @@ function animationEnd(event, nativeElement, renderer, cleanupFns) {
         for (const klass of elementData.classList) {
             renderer.removeClass(nativeElement, klass);
         }
-        enterClassMap.delete(nativeElement);
-        longestAnimations.delete(nativeElement);
-        for (const fn of cleanupFns) {
-            fn();
-        }
+        cleanupEnterClassData(nativeElement);
     }
 }
 function assertAnimationTypes(value, instruction) {
@@ -22289,11 +22345,9 @@ function animateLeaveClassRunner(el, tNode, classList, finalRemoveFn, renderer,
     if (animationsDisabled) {
         longestAnimations.delete(el);
         finalRemoveFn();
+        return;
     }
     cancelAnimationsIfRunning(el, renderer);
-    const handleAnimationStart = (event) => {
-        determineLongestAnimation(event, el, longestAnimations, areAnimationSupported);
-    };
     const handleOutAnimationEnd = (event) => {
         if (event instanceof CustomEvent || isLongestAnimation(event, el)) {
             // Now that we've found the longest animation, there's no need
@@ -22302,32 +22356,30 @@ function animateLeaveClassRunner(el, tNode, classList, finalRemoveFn, renderer,
             // affect any other animations on the page.
             event.stopImmediatePropagation();
             longestAnimations.delete(el);
-            if (leavingNodes.get(tNode)?.length === 0) {
-                leavingNodes.delete(tNode);
-            }
+            clearLeavingNodes(tNode);
             finalRemoveFn();
         }
     };
-    if (!animationsDisabled) {
-        ngZone.runOutsideAngular(() => {
-            renderer.listen(el, 'animationstart', handleAnimationStart, { once: true });
-            renderer.listen(el, 'transitionstart', handleAnimationStart, { once: true });
-            renderer.listen(el, 'animationend', handleOutAnimationEnd);
-            renderer.listen(el, 'transitionend', handleOutAnimationEnd);
+    ngZone.runOutsideAngular(() => {
+        renderer.listen(el, 'animationend', handleOutAnimationEnd);
+        renderer.listen(el, 'transitionend', handleOutAnimationEnd);
+    });
+    trackLeavingNodes(tNode, el);
+    for (const item of classList) {
+        renderer.addClass(el, item);
+    }
+    // In the case that the classes added have no animations, we need to remove
+    // the element right away. This could happen because someone is intentionally
+    // preventing an animation via selector specificity.
+    ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => {
+            determineLongestAnimation(el, longestAnimations, areAnimationSupported);
+            if (!longestAnimations.has(el)) {
+                clearLeavingNodes(tNode);
+                finalRemoveFn();
+            }
         });
-        // We need to track this tNode's element just to be sure we don't add
-        // a new RNode for this TNode while this one is still animating away.
-        // once the animation is complete, we remove this reference.
-        if (leavingNodes.has(tNode)) {
-            leavingNodes.get(tNode)?.push(el);
-        }
-        else {
-            leavingNodes.set(tNode, [el]);
-        }
-        for (const item of classList) {
-            renderer.addClass(el, item);
-        }
-    }
+    });
 }
 
 /*!
@@ -29077,8 +29129,7 @@ function recreateLView(importMeta, id, newDef, oldDef, lView) {
         // shadow root. The browser will throw if we attempt to attach another one and there's no way
         // to detach it. Our only option is to make a clone only of the root node, replace the node
         // with the clone and use it for the newly-created LView.
-        if (oldDef.encapsulation === ViewEncapsulation.ShadowDom ||
-            oldDef.encapsulation === ViewEncapsulation.IsolatedShadowDom) {
+        if (oldDef.encapsulation === ViewEncapsulation.ShadowDom) {
             const newHost = host.cloneNode(false);
             host.replaceWith(newHost);
             host = newHost;