@eric-emg/symphiq-components 1.2.65 → 1.2.67

package/fesm2022/symphiq-components.mjs

@@ -11117,8 +11117,16 @@ class TooltipContainerComponent {
             const content = this.tooltipContent();
             return this.tooltipType() === 'narrative' ? content : null;
         }, ...(ngDevMode ? [{ debugName: "narrativeContent" }] : []));
-        this.tooltipLeft = computed(() => this.calculateLeft(), ...(ngDevMode ? [{ debugName: "tooltipLeft" }] : []));
-        this.tooltipTop = computed(() => this.calculateTop(), ...(ngDevMode ? [{ debugName: "tooltipTop" }] : []));
+        this.tooltipLeft = computed(() => {
+            const left = this.calculateLeft();
+            console.log('📍 [FINAL tooltipLeft]', left);
+            return left;
+        }, ...(ngDevMode ? [{ debugName: "tooltipLeft" }] : []));
+        this.tooltipTop = computed(() => {
+            const top = this.calculateTop();
+            console.log('📍 [FINAL tooltipTop]', top);
+            return top;
+        }, ...(ngDevMode ? [{ debugName: "tooltipTop" }] : []));
         this.shouldCenter = computed(() => {
             const rect = this.targetRect();
             if (!rect)
@@ -11163,8 +11171,33 @@ class TooltipContainerComponent {
         this.containerClass = computed(() => {
             const position = this.tooltipPosition();
             if (position === 'top' || position === 'bottom' || position === 'auto') {
-                return this.shouldCenter() ? 'transform -translate-x-1/2' : '';
+                const shouldCenter = this.shouldCenter();
+                const classes = shouldCenter ? 'transform -translate-x-1/2' : '';
+                const left = this.tooltipLeft();
+                const rect = this.targetRect();
+                const bounds = this.viewportBounds();
+                console.log('═══════════════════════════════════════');
+                console.log('🎨 [FINAL RENDER STATE]');
+                console.log('═══════════════════════════════════════');
+                console.log('Position:', position);
+                console.log('Should Center:', shouldCenter);
+                console.log('CSS Classes:', classes || '(none)');
+                console.log('style.left will be:', left + 'px');
+                console.log('Target rect.left:', rect?.left);
+                console.log('Target center:', rect ? rect.left + rect.width / 2 : 'N/A');
+                console.log('Viewport bounds:', bounds);
+                console.log('');
+                console.log('EXPECTED RESULT:');
+                if (shouldCenter) {
+                    console.log('✅ Tooltip LEFT edge at', left, '+ transform -50% = CENTER at', left);
+                }
+                else {
+                    console.log('❌ Tooltip LEFT edge at', left, '(no centering transform)');
+                }
+                console.log('═══════════════════════════════════════');
+                return classes;
             }
+            console.log('📦 [containerClass] no centering');
             return '';
         }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
         this.contentClass = computed(() => this.isLightMode()