@angular/cdk 19.2.0-next.2 → 19.2.0-next.4

package/fesm2022/cdk.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Angular Component Development Kit. */
-const VERSION = new Version('19.2.0-next.2');
+const VERSION = new Version('19.2.0-next.4');
 
 export { VERSION };
 //# sourceMappingURL=cdk.mjs.map

package/fesm2022/cdk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('19.2.0-next.2');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('19.2.0-next.4');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/fesm2022/overlay.mjs

@@ -745,6 +745,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** Encapsulates the logic for attaching and detaching a backdrop. */
+class BackdropRef {
+    _renderer;
+    _ngZone;
+    element;
+    _cleanupClick;
+    _cleanupTransitionEnd;
+    _fallbackTimeout;
+    constructor(document, _renderer, _ngZone, onClick) {
+        this._renderer = _renderer;
+        this._ngZone = _ngZone;
+        this.element = document.createElement('div');
+        this.element.classList.add('cdk-overlay-backdrop');
+        this._cleanupClick = _renderer.listen(this.element, 'click', onClick);
+    }
+    detach() {
+        this._ngZone.runOutsideAngular(() => {
+            const element = this.element;
+            clearTimeout(this._fallbackTimeout);
+            this._cleanupTransitionEnd?.();
+            this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this.dispose);
+            this._fallbackTimeout = setTimeout(this.dispose, 500);
+            // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
+            // In this case we make it unclickable and we try to remove it after a delay.
+            element.style.pointerEvents = 'none';
+            element.classList.remove('cdk-overlay-backdrop-showing');
+        });
+    }
+    dispose = () => {
+        clearTimeout(this._fallbackTimeout);
+        this._cleanupClick?.();
+        this._cleanupTransitionEnd?.();
+        this._cleanupClick = this._cleanupTransitionEnd = this._fallbackTimeout = undefined;
+        this.element.remove();
+    };
+}
+
 /**
  * Reference to an overlay that has been created with the Overlay service.
  * Used to manipulate or dispose of said overlay.
@@ -762,16 +799,13 @@ class OverlayRef {
     _animationsDisabled;
     _injector;
     _renderer;
-    _backdropElement = null;
-    _backdropTimeout;
     _backdropClick = new Subject();
     _attachments = new Subject();
     _detachments = new Subject();
     _positionStrategy;
     _scrollStrategy;
     _locationChanges = Subscription.EMPTY;
-    _cleanupBackdropClick;
-    _cleanupBackdropTransitionEnd;
+    _backdropRef = null;
     /**
      * Reference to the parent of the `_host` at the time it was detached. Used to restore
      * the `_host` to its original position in the DOM when it gets re-attached.
@@ -816,7 +850,7 @@ class OverlayRef {
     }
     /** The overlay's backdrop HTML element. */
     get backdropElement() {
-        return this._backdropElement;
+        return this._backdropRef?.element || null;
     }
     /**
      * Wrapper around the panel element. Can be used for advanced
@@ -935,7 +969,7 @@ class OverlayRef {
             this._positionStrategy.dispose();
         }
         this._disposeScrollStrategy();
-        this._disposeBackdrop(this._backdropElement);
+        this._backdropRef?.dispose();
         this._locationChanges.unsubscribe();
         this._keyboardDispatcher.remove(this);
         this._portalOutlet.dispose();
@@ -946,7 +980,7 @@ class OverlayRef {
         this._outsideClickDispatcher.remove(this);
         this._host?.remove();
         this._afterNextRenderRef?.destroy();
-        this._previousHostParent = this._pane = this._host = null;
+        this._previousHostParent = this._pane = this._host = this._backdropRef = null;
         if (isAttached) {
             this._detachments.next();
         }
@@ -1070,33 +1104,27 @@ class OverlayRef {
     /** Attaches a backdrop for this overlay. */
     _attachBackdrop() {
         const showingClass = 'cdk-overlay-backdrop-showing';
-        this._backdropElement = this._document.createElement('div');
-        this._backdropElement.classList.add('cdk-overlay-backdrop');
+        this._backdropRef?.dispose();
+        this._backdropRef = new BackdropRef(this._document, this._renderer, this._ngZone, event => {
+            this._backdropClick.next(event);
+        });
         if (this._animationsDisabled) {
-            this._backdropElement.classList.add('cdk-overlay-backdrop-noop-animation');
+            this._backdropRef.element.classList.add('cdk-overlay-backdrop-noop-animation');
         }
         if (this._config.backdropClass) {
-            this._toggleClasses(this._backdropElement, this._config.backdropClass, true);
+            this._toggleClasses(this._backdropRef.element, this._config.backdropClass, true);
         }
         // Insert the backdrop before the pane in the DOM order,
         // in order to handle stacked overlays properly.
-        this._host.parentElement.insertBefore(this._backdropElement, this._host);
-        // Forward backdrop clicks such that the consumer of the overlay can perform whatever
-        // action desired when such a click occurs (usually closing the overlay).
-        this._cleanupBackdropClick?.();
-        this._cleanupBackdropClick = this._renderer.listen(this._backdropElement, 'click', (event) => this._backdropClick.next(event));
+        this._host.parentElement.insertBefore(this._backdropRef.element, this._host);
         // Add class to fade-in the backdrop after one frame.
         if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
             this._ngZone.runOutsideAngular(() => {
-                requestAnimationFrame(() => {
-                    if (this._backdropElement) {
-                        this._backdropElement.classList.add(showingClass);
-                    }
-                });
+                requestAnimationFrame(() => this._backdropRef?.element.classList.add(showingClass));
             });
         }
         else {
-            this._backdropElement.classList.add(showingClass);
+            this._backdropRef.element.classList.add(showingClass);
         }
     }
     /**
@@ -1113,30 +1141,13 @@ class OverlayRef {
     }
     /** Detaches the backdrop (if any) associated with the overlay. */
     detachBackdrop() {
-        const backdropToDetach = this._backdropElement;
-        if (!backdropToDetach) {
-            return;
-        }
         if (this._animationsDisabled) {
-            this._disposeBackdrop(backdropToDetach);
-            return;
+            this._backdropRef?.dispose();
+            this._backdropRef = null;
+        }
+        else {
+            this._backdropRef?.detach();
         }
-        backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
-        this._ngZone.runOutsideAngular(() => {
-            this._cleanupBackdropTransitionEnd?.();
-            this._cleanupBackdropTransitionEnd = this._renderer.listen(backdropToDetach, 'transitionend', (event) => {
-                this._disposeBackdrop(event.target);
-            });
-        });
-        // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
-        // In this case we make it unclickable and we try to remove it after a delay.
-        backdropToDetach.style.pointerEvents = 'none';
-        // Run this outside the Angular zone because there's nothing that Angular cares about.
-        // If it were to run inside the Angular zone, every test that used Overlay would have to be
-        // either async or fakeAsync.
-        this._backdropTimeout = this._ngZone.runOutsideAngular(() => setTimeout(() => {
-            this._disposeBackdrop(backdropToDetach);
-        }, 500));
     }
     /** Toggles a single CSS class or an array of classes on an element. */
     _toggleClasses(element, cssClasses, isAdd) {
@@ -1175,30 +1186,8 @@ class OverlayRef {
     /** Disposes of a scroll strategy. */
     _disposeScrollStrategy() {
         const scrollStrategy = this._scrollStrategy;
-        if (scrollStrategy) {
-            scrollStrategy.disable();
-            if (scrollStrategy.detach) {
-                scrollStrategy.detach();
-            }
-        }
-    }
-    /** Removes a backdrop element from the DOM. */
-    _disposeBackdrop(backdrop) {
-        this._cleanupBackdropClick?.();
-        this._cleanupBackdropTransitionEnd?.();
-        if (backdrop) {
-            backdrop.remove();
-            // It is possible that a new portal has been attached to this overlay since we started
-            // removing the backdrop. If that is the case, only clear the backdrop reference if it
-            // is still the same instance that we started to remove.
-            if (this._backdropElement === backdrop) {
-                this._backdropElement = null;
-            }
-        }
-        if (this._backdropTimeout) {
-            clearTimeout(this._backdropTimeout);
-            this._backdropTimeout = undefined;
-        }
+        scrollStrategy?.disable();
+        scrollStrategy?.detach?.();
     }
 }