@ascentgl/ads-ui 21.113.0 → 21.114.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -6316,7 +6316,8 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.intersectionObserver?.disconnect();
-        this.teardownBackdropScrollPassthrough();
+        this.scrollPassthroughCleanup?.();
+        this.scrollPassthroughCleanup = undefined;
     }
     /** @ignore */
     setupIntersectionObserver() {
@@ -6335,54 +6336,70 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
     }
     /**
      * @ignore
-     * When the calendar overlay opens, the CDK backdrop (pointer-events: auto)
-     * covers the entire viewport and intercepts wheel events, preventing scroll
-     * on underlying containers. Forward those events to the nearest scrollable ancestor.
+     * The CDK overlay backdrop has `pointer-events: auto` which intercepts all
+     * pointer / wheel events, preventing native scroll on underlying containers.
+     * Disabling pointer events on the backdrop lets the browser handle scrolling
+     * natively (preserving momentum / inertia). A document-level pointerdown
+     * listener replaces the lost backdrop click-to-close behaviour.
      */
     onOpened() {
         super.onOpened();
-        this.setupBackdropScrollPassthrough();
+        this.setupScrollPassthrough();
     }
     /** @ignore */
     onClosed() {
-        this.teardownBackdropScrollPassthrough();
+        this.scrollPassthroughCleanup?.();
+        this.scrollPassthroughCleanup = undefined;
         super.onClosed();
     }
     /** @ignore */
-    setupBackdropScrollPassthrough() {
-        this.teardownBackdropScrollPassthrough();
+    setupScrollPassthrough() {
+        this.scrollPassthroughCleanup?.();
+        this.scrollPassthroughCleanup = undefined;
         const container = this.overlayContainerRef.getContainerElement();
         const backdrop = container.querySelector('.cdk-overlay-backdrop');
-        if (!backdrop)
-            return;
-        const scrollTarget = this.findScrollableAncestor(this.elementRef.nativeElement);
-        if (!scrollTarget)
-            return;
+        // Disable pointer events on the backdrop so that wheel / touch events
+        // reach the scroll container natively. This preserves momentum scrolling
+        // and avoids the scroll-stop when closeOnOutOfView closes the picker mid-scroll.
+        if (backdrop) {
+            backdrop.style.pointerEvents = 'none';
+        }
         const cleanupFns = [];
-        // Forward wheel events from the backdrop to the scrollable ancestor
-        // so that the page can still be scrolled while the calendar is open.
-        const onWheel = (event) => {
-            scrollTarget.scrollTop += event.deltaY;
-            scrollTarget.scrollLeft += event.deltaX;
-        };
-        backdrop.addEventListener('wheel', onWheel, { passive: true });
-        cleanupFns.push(() => backdrop.removeEventListener('wheel', onWheel));
-        // Reposition the calendar overlay when the scroll container scrolls,
-        // keeping the popup attached to the input (same behaviour as ads-dropdown).
+        // Replace the backdrop click-to-close with a document-level pointerdown
+        // listener. Delay one animation frame so the interaction that opened the
+        // picker does not immediately close it.
+        let pointerDownCleanup;
+        const rafId = requestAnimationFrame(() => {
+            const onPointerDown = (event) => {
+                if (!this.picker?.opened)
+                    return;
+                const overlayPane = container.querySelector('.cdk-overlay-pane');
+                const clickedInside = overlayPane?.contains(event.target) ||
+                    this.elementRef.nativeElement.contains(event.target);
+                if (!clickedInside) {
+                    this.picker.close();
+                }
+            };
+            document.addEventListener('pointerdown', onPointerDown);
+            pointerDownCleanup = () => document.removeEventListener('pointerdown', onPointerDown);
+        });
+        cleanupFns.push(() => {
+            cancelAnimationFrame(rafId);
+            pointerDownCleanup?.();
+        });
+        // Reposition the calendar overlay when a non-document scroll container scrolls.
         // CDK ScrollDispatcher only detects window scroll and CdkScrollable directives,
         // not arbitrary overflow containers, so we trigger the update manually.
-        const onScroll = () => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.picker?._popupRef?.updatePosition();
-        };
-        scrollTarget.addEventListener('scroll', onScroll, { passive: true });
-        cleanupFns.push(() => scrollTarget.removeEventListener('scroll', onScroll));
-        this.backdropWheelCleanup = () => cleanupFns.forEach((fn) => fn());
-    }
-    /** @ignore */
-    teardownBackdropScrollPassthrough() {
-        this.backdropWheelCleanup?.();
-        this.backdropWheelCleanup = undefined;
+        const scrollTarget = this.findScrollableAncestor(this.elementRef.nativeElement);
+        if (scrollTarget) {
+            const onScroll = () => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.picker?._popupRef?.updatePosition();
+            };
+            scrollTarget.addEventListener('scroll', onScroll, { passive: true });
+            cleanupFns.push(() => scrollTarget.removeEventListener('scroll', onScroll));
+        }
+        this.scrollPassthroughCleanup = () => cleanupFns.forEach((fn) => fn());
     }
     /** @ignore - Walk up the DOM to find the first ancestor with overflow-y: auto|scroll */
     findScrollableAncestor(node) {