@naniteninja/dashboard-components-lib 2.1.8 → 2.1.9

package/fesm2022/naniteninja-dashboard-components-lib.mjs

@@ -5159,6 +5159,8 @@ class LibDashboardSwipeableTabsComponent {
         this.settingsTriggerResizeObserver = null;
         this.settingsTriggerScrollListener = null;
         this.settingsTriggerResizeListener = null;
+        this.settingsTriggerScrollTarget = null;
+        this.settingsTriggerRafId = null;
         this.contextMenuViewRef = null;
         this.contextMenuClickListener = null;
         this.confirmViewRef = null;
@@ -6381,12 +6383,17 @@ class LibDashboardSwipeableTabsComponent {
         this.settingsTriggerPortalEl =
             this.settingsTriggerPortalViewRef.rootNodes.find((n) => n?.classList?.contains?.('settings-trigger-wrapper-portal')) ??
                 document.body.querySelector('.settings-trigger-wrapper-portal');
+        this.startSettingsTriggerTracking();
         if (!this.settingsTriggerResizeObserver) {
             this.settingsTriggerResizeObserver = new ResizeObserver(() => this.updateSettingsTriggerPortalPosition());
             this.settingsTriggerResizeObserver.observe(this.settingsTriggerWrapperEl.nativeElement);
         }
         if (!this.settingsTriggerScrollListener) {
-            this.settingsTriggerScrollListener = this.renderer.listen('window', 'scroll', () => this.updateSettingsTriggerPortalPosition());
+            this.settingsTriggerScrollTarget = this.getScrollParent(this.settingsTriggerWrapperEl.nativeElement);
+            this.settingsTriggerScrollListener =
+                this.settingsTriggerScrollTarget === window
+                    ? this.renderer.listen('window', 'scroll', () => this.updateSettingsTriggerPortalPosition())
+                    : this.renderer.listen(this.settingsTriggerScrollTarget, 'scroll', () => this.updateSettingsTriggerPortalPosition());
         }
         if (!this.settingsTriggerResizeListener) {
             this.settingsTriggerResizeListener = this.renderer.listen('window', 'resize', () => this.updateSettingsTriggerPortalPosition());
@@ -6395,6 +6402,8 @@ class LibDashboardSwipeableTabsComponent {
     closeSettingsTriggerPortal() {
         this.settingsTriggerPortaled = false;
         this.settingsTriggerPortalEl = null;
+        this.settingsTriggerScrollTarget = null;
+        this.stopSettingsTriggerTracking();
         if (this.settingsTriggerResizeObserver) {
             this.settingsTriggerResizeObserver.disconnect();
             this.settingsTriggerResizeObserver = null;
@@ -6423,6 +6432,74 @@ class LibDashboardSwipeableTabsComponent {
             this.settingsTriggerPortalEl.style.left = r.left + 'px';
             this.settingsTriggerPortalEl.style.top = r.top + 'px';
         }
+        this.applySettingsTriggerPortalVisibility(r);
+    }
+    applySettingsTriggerPortalVisibility(sourceRect) {
+        const portalEl = this.settingsTriggerPortalEl ?? document.body.querySelector('.settings-trigger-wrapper-portal');
+        if (!portalEl)
+            return;
+        const containerRect = this.settingsTriggerScrollTarget && this.settingsTriggerScrollTarget !== window
+            ? this.settingsTriggerScrollTarget.getBoundingClientRect()
+            : { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+        const vw = Math.min(sourceRect.right, containerRect.right) - Math.max(sourceRect.left, containerRect.left);
+        const vh = Math.min(sourceRect.bottom, containerRect.bottom) - Math.max(sourceRect.top, containerRect.top);
+        let hide = false;
+        const eps = 0.5;
+        if (sourceRect.width > 0 && vw < sourceRect.width - eps)
+            hide = true;
+        if (sourceRect.height > 0 && vh < sourceRect.height - eps)
+            hide = true;
+        if (!hide) {
+            const x = sourceRect.left + sourceRect.width / 2;
+            const y = sourceRect.top + sourceRect.height / 2;
+            if (x >= 0 && x <= window.innerWidth && y >= 0 && y <= window.innerHeight) {
+                const topEl = document.elementFromPoint(x, y);
+                const sourceEl = this.settingsTriggerWrapperEl?.nativeElement;
+                if (topEl && sourceEl && !sourceEl.contains(topEl) && !portalEl.contains(topEl))
+                    hide = true;
+            }
+        }
+        portalEl.style.visibility = hide ? 'hidden' : 'visible';
+        portalEl.style.pointerEvents = hide ? 'none' : 'auto';
+        if (hide && this.showGlobalMenu) {
+            this.ngZone.run(() => {
+                this.showGlobalMenu = false;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    startSettingsTriggerTracking() {
+        this.stopSettingsTriggerTracking();
+        if (!this.settingsTriggerWrapperEl?.nativeElement)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const loop = () => {
+                if (!this.settingsTriggerPortaled || !this.settingsTriggerWrapperEl?.nativeElement) {
+                    this.settingsTriggerRafId = null;
+                    return;
+                }
+                this.updateSettingsTriggerPortalPosition();
+                this.settingsTriggerRafId = requestAnimationFrame(loop);
+            };
+            this.settingsTriggerRafId = requestAnimationFrame(loop);
+        });
+    }
+    stopSettingsTriggerTracking() {
+        if (this.settingsTriggerRafId !== null) {
+            cancelAnimationFrame(this.settingsTriggerRafId);
+            this.settingsTriggerRafId = null;
+        }
+    }
+    getScrollParent(el) {
+        let current = el.parentElement;
+        while (current) {
+            const style = getComputedStyle(current);
+            const overflow = `${style.overflow}${style.overflowX}${style.overflowY}`;
+            if (/(auto|scroll|overlay)/.test(overflow))
+                return current;
+            current = current.parentElement;
+        }
+        return window;
     }
     isSourceVisible(src, container) {
         const vw = Math.min(src.right, container.right) - Math.max(src.left, container.left);