@eric-emg/symphiq-components 1.2.80 → 1.2.82

package/fesm2022/symphiq-components.mjs

@@ -11247,6 +11247,10 @@ class TooltipContainerComponent {
         const rect = this.targetRect();
         if (!rect)
             return 0;
+        // Find if there's a transformed ancestor that changes the positioning context
+        // When an ancestor has transform, position:fixed is relative to that ancestor, not viewport
+        const transformedAncestor = this.findTransformedAncestor();
+        const ancestorOffset = transformedAncestor ? transformedAncestor.getBoundingClientRect().left : 0;
         console.log('🎯🎯🎯 [RECT FROM DIRECTIVE] 🎯🎯🎯', {
             left: rect.left,
             right: rect.right,
@@ -11255,7 +11259,9 @@ class TooltipContainerComponent {
             width: rect.width,
             height: rect.height,
             x: rect.x,
-            y: rect.y
+            y: rect.y,
+            ancestorOffset,
+            transformedAncestor: transformedAncestor?.tagName
         });
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
@@ -11289,11 +11295,13 @@ class TooltipContainerComponent {
             else if (leftPos + halfWidth > effectiveRight - padding) {
                 leftPos = effectiveRight - padding - halfWidth;
             }
-            return leftPos;
+            return leftPos - ancestorOffset;
         }
         switch (position) {
             case 'top':
             case 'bottom': {
+                // rect.left is relative to viewport, so we don't need to adjust for viewportBounds
+                // The tooltip is positioned fixed relative to the viewport too
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
                 // Check if centered tooltip would go off bounds
@@ -11311,47 +11319,48 @@ class TooltipContainerComponent {
                 });
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding
-                    const result = effectiveLeft + padding + halfWidth;
-                    console.log('⬅️ [Tooltip adjusting LEFT]', { result });
+                    const result = effectiveLeft + padding + halfWidth - ancestorOffset;
+                    console.log('⬅️ [Tooltip adjusting LEFT]', { result, ancestorOffset });
                     return result;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding
-                    const result = effectiveRight - padding - halfWidth;
-                    console.log('➡️ [Tooltip adjusting RIGHT]', { result });
+                    const result = effectiveRight - padding - halfWidth - ancestorOffset;
+                    console.log('➡️ [Tooltip adjusting RIGHT]', { result, ancestorOffset });
                     return result;
                 }
                 else {
                     // Center normally (transform will be applied)
-                    console.log('🎯 [Tooltip centered]', { centerPosition });
-                    return centerPosition;
+                    const result = centerPosition - ancestorOffset;
+                    console.log('🎯 [Tooltip centered]', { centerPosition, ancestorOffset, result });
+                    return result;
                 }
             }
             case 'left': {
                 const leftPosition = rect.left - tooltipWidth - 8;
                 // If tooltip would go off left edge, position it to the right instead
                 if (leftPosition < effectiveLeft + padding) {
-                    const result = rect.right + 8;
-                    console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result });
+                    const result = rect.right + 8 - ancestorOffset;
+                    console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result, ancestorOffset });
                     return result;
                 }
-                console.log('⬅️ [Tooltip LEFT]', { leftPosition });
-                return leftPosition;
+                console.log('⬅️ [Tooltip LEFT]', { leftPosition, ancestorOffset });
+                return leftPosition - ancestorOffset;
             }
             case 'right': {
                 const rightPosition = rect.right + 8;
                 // If tooltip would go off right edge, position it to the left instead
                 if (rightPosition + tooltipWidth > effectiveRight - padding) {
-                    const result = rect.left - tooltipWidth - 8;
-                    console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result });
+                    const result = rect.left - tooltipWidth - 8 - ancestorOffset;
+                    console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result, ancestorOffset });
                     return result;
                 }
-                console.log('➡️ [Tooltip RIGHT]', { rightPosition });
-                return rightPosition;
+                console.log('➡️ [Tooltip RIGHT]', { rightPosition, ancestorOffset });
+                return rightPosition - ancestorOffset;
             }
             default:
-                const defaultResult = rect.left + rect.width / 2;
-                console.log('🔄 [Tooltip DEFAULT]', { defaultResult });
+                const defaultResult = rect.left + rect.width / 2 - ancestorOffset;
+                console.log('🔄 [Tooltip DEFAULT]', { defaultResult, ancestorOffset });
                 return defaultResult;
         }
     }
@@ -11359,6 +11368,9 @@ class TooltipContainerComponent {
         const rect = this.targetRect();
         if (!rect)
             return 0;
+        // Find if there's a transformed ancestor that changes the positioning context
+        const transformedAncestor = this.findTransformedAncestor();
+        const ancestorOffset = transformedAncestor ? transformedAncestor.getBoundingClientRect().top : 0;
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
@@ -11388,35 +11400,53 @@ class TooltipContainerComponent {
             if (topPos < effectiveTop + padding) {
                 topPos = effectiveTop + padding;
             }
-            return topPos;
+            return topPos - ancestorOffset;
         }
         switch (position) {
             case 'top': {
                 const topPosition = rect.top - estimatedHeight - 8;
                 // If tooltip would go off top edge, position it below instead
                 if (topPosition < effectiveTop + padding) {
-                    return rect.bottom + 8;
+                    return rect.bottom + 8 - ancestorOffset;
                 }
-                return topPosition;
+                return topPosition - ancestorOffset;
             }
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
                 // If tooltip would go off bottom edge, position it above instead
                 if (bottomPosition + estimatedHeight > effectiveBottom - padding) {
-                    return rect.top - estimatedHeight - 8;
+                    return rect.top - estimatedHeight - 8 - ancestorOffset;
                 }
-                return bottomPosition;
+                return bottomPosition - ancestorOffset;
             }
             case 'left':
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
                 // Keep within bounds
                 const maxTop = effectiveBottom - padding - estimatedHeight;
-                return Math.max(effectiveTop + padding, Math.min(centerPosition, maxTop));
+                return Math.max(effectiveTop + padding, Math.min(centerPosition, maxTop)) - ancestorOffset;
             }
             default:
-                return rect.top - estimatedHeight - 8;
+                return rect.top - estimatedHeight - 8 - ancestorOffset;
+        }
+    }
+    findTransformedAncestor() {
+        let element = this.elementRef.nativeElement.parentElement;
+        while (element && element !== document.body) {
+            const style = window.getComputedStyle(element);
+            const transform = style.transform;
+            // Check if element has any transform (including identity transforms like matrix3d)
+            if (transform && transform !== 'none') {
+                console.log('🔍 [Found transformed ancestor]', {
+                    tagName: element.tagName,
+                    transform,
+                    rect: element.getBoundingClientRect()
+                });
+                return element;
+            }
+            element = element.parentElement;
         }
+        return null;
     }
     static { this.ɵfac = function TooltipContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipContainerComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], hostVars: 2, hostBindings: function TooltipContainerComponent_HostBindings(rf, ctx) { if (rf & 2) {