@ship-ui/core 0.17.16 → 0.17.18

package/fesm2022/ship-ui-core.mjs

@@ -7014,31 +7014,56 @@ class ShipTooltipWrapper {
             close: () => this.close()(),
         };
         this.isTemplate = computed(() => this.content() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isTemplate" }] : []));
+        this.#document = inject(DOCUMENT);
         this.#selfRef = inject((ElementRef));
         this.#renderer = inject(Renderer2);
         this.#positionAbort = null;
-        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc');
+        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
         this.isBelow = signal(false, ...(ngDevMode ? [{ debugName: "isBelow" }] : []));
         this.openEffect = effect(() => {
             if (this.isOpen()) {
-                setTimeout(() => {
-                    this.#selfRef.nativeElement.showPopover();
-                    this.schedulePositionUpdate();
+                queueMicrotask(() => {
+                    const tooltipEl = this.#selfRef.nativeElement;
+                    if (!tooltipEl || !tooltipEl.isConnected)
+                        return;
+                    if (this.#positionAbort) {
+                        this.#positionAbort.abort();
+                    }
+                    this.#positionAbort = new AbortController();
+                    tooltipEl.showPopover();
+                    if (!this.SUPPORTS_ANCHOR) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(tooltipEl);
+                            scrollableParent.addEventListener('scroll', () => this.calculateTooltipPosition(), {
+                                signal: this.#positionAbort?.signal,
+                                passive: true,
+                            });
+                            window?.addEventListener('resize', () => this.calculateTooltipPosition(), {
+                                signal: this.#positionAbort?.signal,
+                                passive: true,
+                            });
+                            this.calculateTooltipPosition();
+                        });
+                    }
                 });
             }
             else {
-                this.#selfRef.nativeElement.hidePopover();
+                const tooltipEl = this.#selfRef.nativeElement;
+                if (tooltipEl) {
+                    try {
+                        if (tooltipEl.matches(':popover-open')) {
+                            tooltipEl.hidePopover();
+                        }
+                    }
+                    catch (e) {
+                        // Ignore if already hidden or other errors
+                    }
+                }
+                this.#positionAbort?.abort();
+                this.#positionAbort = null;
             }
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
-        this.rafId = null;
-        this.schedulePositionUpdate = () => {
-            if (this.rafId !== null) {
-                cancelAnimationFrame(this.rafId);
-            }
-            this.rafId = requestAnimationFrame(this.calculateTooltipPosition);
-        };
         this.calculateTooltipPosition = () => {
-            this.rafId = null;
             if (!this.anchorEl())
                 return;
             const hostRect = this.anchorEl().nativeElement.getBoundingClientRect();
@@ -7046,61 +7071,71 @@ class ShipTooltipWrapper {
             const tooltipRect = tooltipEl.getBoundingClientRect();
             if (tooltipRect.width === 0 && tooltipRect.height === 0)
                 return;
-            if (this.SUPPORTS_ANCHOR) {
-                const isPlacedBelow = tooltipRect.top > hostRect.top;
-                if (this.isBelow() !== isPlacedBelow) {
-                    this.isBelow.set(isPlacedBelow);
+            const BASE_SPACE = 8;
+            // Position generators
+            const topCenter = (t, m) => ({
+                left: t.left + t.width / 2 - m.width / 2,
+                top: t.top - m.height - BASE_SPACE,
+            });
+            const bottomCenter = (t, m) => ({
+                left: t.left + t.width / 2 - m.width / 2,
+                top: t.bottom + BASE_SPACE,
+            });
+            const topSpanLeft = (t, m) => ({ left: t.right - m.width, top: t.top - m.height - BASE_SPACE });
+            const topSpanRight = (t, m) => ({ left: t.left, top: t.top - m.height - BASE_SPACE });
+            const bottomSpanLeft = (t, m) => ({ left: t.right - m.width, top: t.bottom + BASE_SPACE });
+            const bottomSpanRight = (t, m) => ({ left: t.left, top: t.bottom + BASE_SPACE });
+            const tryOrder = [topCenter, topSpanLeft, topSpanRight, bottomCenter, bottomSpanLeft, bottomSpanRight];
+            for (const positionFn of tryOrder) {
+                const pos = positionFn(hostRect, tooltipRect);
+                if (this.#fitsInViewport(pos, tooltipRect)) {
+                    this.#applyPosition(pos, tooltipEl);
+                    this.isBelow.set(pos.top > hostRect.top);
+                    return;
                 }
-                return;
-            }
-            const gap = 12;
-            const outOfBoundsTop = hostRect.top - tooltipRect.height - gap < 0;
-            if (this.isBelow() !== outOfBoundsTop) {
-                this.isBelow.set(outOfBoundsTop);
-            }
-            let newTop = hostRect.top - tooltipRect.height - gap;
-            let newLeft = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-            if (outOfBoundsTop) {
-                newTop = hostRect.top + hostRect.height;
-            }
-            if (newLeft + tooltipRect.width > window?.innerWidth) {
-                newLeft = hostRect.right - tooltipRect.width / 2;
-            }
-            if (newLeft < 0) {
-                newLeft = -(tooltipRect.width / 2);
-            }
-            const leftStyle = `${newLeft}px`;
-            const topStyle = `${newTop}px`;
-            if (tooltipEl.style.left !== leftStyle) {
-                this.#renderer.setStyle(tooltipEl, 'left', leftStyle);
-            }
-            if (tooltipEl.style.top !== topStyle) {
-                this.#renderer.setStyle(tooltipEl, 'top', topStyle);
-            }
-            if (tooltipEl.style.position !== 'fixed') {
-                this.#renderer.setStyle(tooltipEl, 'position', 'fixed');
             }
+            const fallback = this.#clampToViewport(topCenter(hostRect, tooltipRect), tooltipRect);
+            this.#applyPosition(fallback, tooltipEl);
+            this.isBelow.set(fallback.top > hostRect.top);
         };
     }
+    #document;
     #selfRef;
     #renderer;
     #positionAbort;
-    ngAfterViewInit() {
-        this.#positionAbort = new AbortController();
-        const options = { signal: this.#positionAbort.signal, capture: true, passive: true };
-        window?.addEventListener('scroll', this.schedulePositionUpdate, options);
-        window?.addEventListener('resize', this.schedulePositionUpdate, {
-            signal: this.#positionAbort.signal,
-            passive: true,
-        });
-        this.schedulePositionUpdate();
-    }
     ngOnDestroy() {
         this.#positionAbort?.abort();
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
+        this.#positionAbort = null;
+    }
+    #findScrollableParent(element) {
+        const SCROLLABLE_STYLES = ['scroll', 'auto'];
+        let parent = element.parentElement;
+        while (parent) {
+            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
+                parent.scrollHeight > parent.clientHeight) {
+                return parent;
+            }
+            parent = parent.parentElement;
         }
+        return this.#document.documentElement;
+    }
+    #applyPosition(pos, element) {
+        this.#renderer.setStyle(element, 'left', `${pos.left}px`);
+        this.#renderer.setStyle(element, 'top', `${pos.top}px`);
+        this.#renderer.setStyle(element, 'position', 'fixed');
+        this.#renderer.setStyle(element, 'margin', '0');
+    }
+    #fitsInViewport(pos, m) {
+        return (pos.left >= 0 &&
+            pos.top >= 0 &&
+            pos.left + m.width <= window.innerWidth &&
+            pos.top + m.height <= window.innerHeight);
+    }
+    #clampToViewport(pos, m) {
+        return {
+            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
+            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
@@ -7219,13 +7254,12 @@ class ShipTooltip {
     cleanupTooltip() {
         if (openRef?.wrapperComponentRef) {
             openRef.component.cancelCleanupTimer();
-            const nativeEl = openRef.wrapperComponentRef.location.nativeElement;
-            if (nativeEl && typeof nativeEl.matches === 'function' && nativeEl.matches(':popover-open')) {
-                nativeEl.hidePopover();
-            }
-            openRef.wrapperComponentRef.destroy();
             openRef.component.isOpen.set(false);
-            openRef = null;
+            openRef.wrapperComponentRef.location.nativeElement.hidePopover();
+            setTimeout(() => {
+                openRef.wrapperComponentRef.destroy();
+                openRef = null;
+            });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }