@eric-emg/symphiq-components 1.2.63 → 1.2.65

package/fesm2022/symphiq-components.mjs

@@ -11127,11 +11127,19 @@ class TooltipContainerComponent {
             const tooltipWidth = 384;
             const padding = 10;
             const bounds = this.viewportBounds();
-            // Calculate effective viewport width
-            const effectiveLeft = bounds?.left ?? 0;
+            // Calculate effective viewport width - use actual window edges
+            const effectiveLeft = 0;
             const effectiveRight = bounds?.right ?? window.innerWidth;
+            console.log('🎯 [shouldCenter calculation]', {
+                position,
+                effectiveLeft,
+                effectiveRight,
+                'rect.left': rect.left,
+                'rect.width': rect.width
+            });
             // For 'auto' positioning, always center horizontally
             if (position === 'auto') {
+                console.log('✅ [shouldCenter] auto = true');
                 return true;
             }
             if (position === 'top' || position === 'bottom') {
@@ -11139,8 +11147,17 @@ class TooltipContainerComponent {
                 const halfWidth = tooltipWidth / 2;
                 const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
                 const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
-                return !wouldGoOffLeft && !wouldGoOffRight;
+                const result = !wouldGoOffLeft && !wouldGoOffRight;
+                console.log('🎯 [shouldCenter] top/bottom', {
+                    centerPosition,
+                    halfWidth,
+                    wouldGoOffLeft,
+                    wouldGoOffRight,
+                    result
+                });
+                return result;
             }
+            console.log('❌ [shouldCenter] other position = false');
             return false;
         }, ...(ngDevMode ? [{ debugName: "shouldCenter" }] : []));
         this.containerClass = computed(() => {
@@ -11196,6 +11213,17 @@ class TooltipContainerComponent {
         // Don't let container bounds force tooltips away from edges
         const effectiveLeft = 0;
         const effectiveRight = bounds?.right ?? window.innerWidth;
+        console.log('🔍 [Tooltip calculateLeft]', {
+            position,
+            'rect.left': rect.left,
+            'rect.right': rect.right,
+            'rect.width': rect.width,
+            tooltipWidth,
+            bounds,
+            effectiveLeft,
+            effectiveRight,
+            'window.innerWidth': window.innerWidth
+        });
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
@@ -11217,16 +11245,31 @@ class TooltipContainerComponent {
                 // Check if centered tooltip would go off bounds
                 const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
                 const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
+                console.log('📍 [Tooltip top/bottom calculation]', {
+                    centerPosition,
+                    halfWidth,
+                    'centerPosition - halfWidth': centerPosition - halfWidth,
+                    'centerPosition + halfWidth': centerPosition + halfWidth,
+                    wouldGoOffLeft,
+                    wouldGoOffRight,
+                    'effectiveLeft + padding': effectiveLeft + padding,
+                    'effectiveRight - padding': effectiveRight - padding
+                });
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding
-                    return effectiveLeft + padding + halfWidth;
+                    const result = effectiveLeft + padding + halfWidth;
+                    console.log('⬅️ [Tooltip adjusting LEFT]', { result });
+                    return result;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding
-                    return effectiveRight - padding - halfWidth;
+                    const result = effectiveRight - padding - halfWidth;
+                    console.log('➡️ [Tooltip adjusting RIGHT]', { result });
+                    return result;
                 }
                 else {
                     // Center normally (transform will be applied)
+                    console.log('🎯 [Tooltip centered]', { centerPosition });
                     return centerPosition;
                 }
             }
@@ -11234,20 +11277,28 @@ class TooltipContainerComponent {
                 const leftPosition = rect.left - tooltipWidth - 8;
                 // If tooltip would go off left edge, position it to the right instead
                 if (leftPosition < effectiveLeft + padding) {
-                    return rect.right + 8;
+                    const result = rect.right + 8;
+                    console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result });
+                    return result;
                 }
+                console.log('⬅️ [Tooltip LEFT]', { leftPosition });
                 return leftPosition;
             }
             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) {
-                    return rect.left - tooltipWidth - 8;
+                    const result = rect.left - tooltipWidth - 8;
+                    console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result });
+                    return result;
                 }
+                console.log('➡️ [Tooltip RIGHT]', { rightPosition });
                 return rightPosition;
             }
             default:
-                return rect.left + rect.width / 2;
+                const defaultResult = rect.left + rect.width / 2;
+                console.log('🔄 [Tooltip DEFAULT]', { defaultResult });
+                return defaultResult;
         }
     }
     calculateTop() {