npm - ng-zenduit - Versions diffs - 2.3.12 → 2.3.15 - Mend

ng-zenduit 2.3.12 → 2.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/ng-zenduit.mjs +66 -3
package/fesm2022/ng-zenduit.mjs.map +1 -1
package/package.json +1 -1
package/types/ng-zenduit.d.ts +23 -2

package/fesm2022/ng-zenduit.mjs CHANGED Viewed

@@ -221,8 +221,18 @@ class ZenduOverlayService {
         if (config.minWidth != null) {
             overlayConfig.minWidth = config.minWidth;
         }
+        if (config.minHeight != null) {
+            overlayConfig.minHeight = config.minHeight;
+        }
         const overlayRef = this._overlay.create(overlayConfig);
         overlayRef.attach(new TemplatePortal(config.content, config.viewContainerRef));
+        // scrollBehavior: 'block' — freeze the trigger's scroll container while
+        // the panel is open (mat-select-style). CDK's BlockScrollStrategy only
+        // locks <html>, which is useless in an app-shell that scrolls inside a
+        // nested overflow:auto pane, so we lock that pane directly instead.
+        const unlockScroll = config.scrollBehavior === 'block'
+            ? this._lockScrollContainer(originEl)
+            : null;
         const closed = new Subject();
         const destroyed = new Subject();
         // Ignore the pointer interaction that OPENED the panel. open() is
@@ -305,6 +315,7 @@ class ZenduOverlayService {
             closed: closed.asObservable(),
             updatePosition: () => overlayRef.updatePosition(),
             close: () => {
+                unlockScroll?.();
                 removeViewportListeners();
                 destroyed.next();
                 destroyed.complete();
@@ -329,6 +340,47 @@ class ZenduOverlayService {
             { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offsetY }
         ];
     }
+    /**
+     * Lock the trigger's nearest scrollable ancestor (or the document) with
+     * `overflow: hidden` so the page can't scroll while the panel is open, and
+     * pad for the now-missing scrollbar so content doesn't jump. Returns an
+     * idempotent restore fn that puts the inline styles back.
+     */
+    _lockScrollContainer(originEl) {
+        const el = this._findScrollContainer(originEl);
+        if (!el) {
+            return () => { };
+        }
+        const prevOverflow = el.style.overflow;
+        const prevPaddingRight = el.style.paddingRight;
+        const scrollbarWidth = el.offsetWidth - el.clientWidth;
+        el.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            const computed = getComputedStyle(el).paddingRight;
+            el.style.paddingRight = `calc(${computed} + ${scrollbarWidth}px)`;
+        }
+        return () => {
+            el.style.overflow = prevOverflow;
+            el.style.paddingRight = prevPaddingRight;
+        };
+    }
+    /**
+     * Walk up from the trigger to the first ancestor that actually scrolls
+     * (overflow-y auto/scroll AND content taller than the box). Falls back to
+     * the document scrolling element so block always has something to lock.
+     */
+    _findScrollContainer(originEl) {
+        let node = originEl.parentElement;
+        while (node && node !== document.body && node !== document.documentElement) {
+            const overflowY = getComputedStyle(node).overflowY;
+            const scrolls = overflowY === 'auto' || overflowY === 'scroll';
+            if (scrolls && node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return document.scrollingElement ?? document.documentElement;
+    }
     _panelClasses(extra) {
         const classes = ['zen-overlay-panel'];
         if (Array.isArray(extra)) {
@@ -2862,8 +2914,11 @@ class ZenduDatePickerDropdownComponent {
         return formatted;
     }
     formatTime(date) {
-        let h = date.getHours();
-        const m = date.getMinutes();
+        // Normalize through moment so a string/moment input (the declared type is
+        // Date, but consumers often bind ISO strings) doesn't break native getters.
+        const mDate = moment(date);
+        let h = mDate.hours();
+        const m = mDate.minutes();
         const period = h >= 12 ? 'PM' : 'AM';
         if (h === 0)
             h = 12;
@@ -3637,6 +3692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }] } });
+// Lets a tall filter panel clamp to the viewport and scroll instead of being
+// pushed off-screen. Gates CDK's flexible path; not the panel's actual height.
+const FILTER_PANEL_MIN_HEIGHT = 120;
 class ZenduFilterComponent {
     set isVisible(open) {
         open = !!open;
@@ -3741,6 +3799,7 @@ class ZenduFilterComponent {
             // The panel has its own fixed width (.filter-menu); let it size to content
             // and the overlay's flexible dimensions clamp it on small viewports.
             width: 'auto',
+            minHeight: FILTER_PANEL_MIN_HEIGHT,
             scrollBehavior: 'reposition',
             positions: this._buildConnectedPositions(),
         });
@@ -4827,7 +4886,11 @@ class ZenduSelectComponent {
             width: 'origin',
             minWidth: this.panelMinWidth,
             panelClass: this.panelClass,
-            scrollBehavior: 'reposition'
+            // Freeze the page while the dropdown is open (mat-select-style) instead
+            // of chasing the trigger on scroll. The overlay service locks the
+            // trigger's nearest scroll container, which works in app shells that
+            // scroll inner panes rather than the document root.
+            scrollBehavior: 'block'
         });
         // Outside click / Escape / detach → close (and emit, as a user action).
         this._panelRef.closed.subscribe(() => this.hideDropDown(true));