@eric-emg/symphiq-components 1.2.85 → 1.2.87

package/fesm2022/symphiq-components.mjs

@@ -1526,10 +1526,9 @@ class TooltipDirective {
         this.mouseY = event.clientY;
     }
     onMouseLeave() {
-        // DEBUGGING: Keep tooltip visible
-        // this.clearShowTimeout();
-        // this.isHovered.set(false);
-        // this.scheduleHide();
+        this.clearShowTimeout();
+        this.isHovered.set(false);
+        this.scheduleHide();
     }
     onMouseEnterAgain() {
         // If user returns to element while tooltip is still visible, cancel hide
@@ -10862,110 +10861,110 @@ const _c0$6 = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.metricContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.metricContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template, 1, 2, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.metricContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.metricContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.statusContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.statusContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template, 1, 2, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.statusContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.statusContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.trendContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.trendContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template, 1, 2, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.trendContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.trendContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.priorityContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.priorityContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template, 1, 2, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.priorityContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.priorityContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.badgeContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.badgeContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template, 1, 2, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.badgeContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.badgeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.breakdownContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.breakdownContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template, 1, 2, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.breakdownContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.breakdownContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.competitiveContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.competitiveContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template, 1, 2, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.competitiveContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.competitiveContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.insightsListContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.insightsListContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template, 1, 2, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.insightsListContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.insightsListContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r1.narrativeContent())("isLightMode", ctx_r1.isLightMode());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r0.narrativeContent())("isLightMode", ctx_r0.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template, 1, 2, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.narrativeContent() ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.narrativeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
@@ -10975,18 +10974,18 @@ function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Tem
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const section_r3 = ctx.$implicit;
+    const section_r2 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r3.title);
+    i0.ɵɵtextInterpolate(section_r2.title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r3.content);
+    i0.ɵɵtextInterpolate(section_r2.content);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template, 5, 2, "div", 7, i0.ɵɵrepeaterTrackByIndex);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵrepeater(content_r3["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -10994,25 +10993,25 @@ function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "sections" in content_r4 ? 1 : -1);
+    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "sections" in content_r3 ? 1 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r4["text"], " ");
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r3["text"], " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -11020,11 +11019,11 @@ function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "text" in content_r4 ? 1 : 2);
+    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "text" in content_r3 ? 1 : 2);
 } }
 function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -11032,31 +11031,29 @@ function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r4 = i0.ɵɵreadContextLet(2);
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
+    const content_r3 = i0.ɵɵreadContextLet(2);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
+    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
-    i0.ɵɵlistener("mouseenter", function TooltipContainerComponent_Conditional_0_Template_div_mouseenter_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseEnter()); })("mouseleave", function TooltipContainerComponent_Conditional_0_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseLeave()); });
     i0.ɵɵdeclareLet(2);
     i0.ɵɵconditionalCreate(3, TooltipContainerComponent_Conditional_0_Case_3_Template, 1, 1)(4, TooltipContainerComponent_Conditional_0_Case_4_Template, 1, 1)(5, TooltipContainerComponent_Conditional_0_Case_5_Template, 1, 1)(6, TooltipContainerComponent_Conditional_0_Case_6_Template, 1, 1)(7, TooltipContainerComponent_Conditional_0_Case_7_Template, 1, 1)(8, TooltipContainerComponent_Conditional_0_Case_8_Template, 1, 1)(9, TooltipContainerComponent_Conditional_0_Case_9_Template, 1, 1)(10, TooltipContainerComponent_Conditional_0_Case_10_Template, 1, 1)(11, TooltipContainerComponent_Conditional_0_Case_11_Template, 1, 1)(12, TooltipContainerComponent_Conditional_0_Case_12_Template, 2, 2, "div", 3)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 3, 2, "div", 4)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 2, 2, "div", 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_7_0;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap("position: fixed; left: " + ctx_r1.tooltipLeft() + "px; top: " + ctx_r1.tooltipTop() + "px; margin: 0; padding: 0; width: 24rem;");
-    i0.ɵɵattribute("data-debug-left", ctx_r1.tooltipLeft())("data-debug-transform", ctx_r1.transformStyle());
+    let tmp_6_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleMap("position: fixed; left: " + ctx_r0.tooltipLeft() + "px; top: " + ctx_r0.tooltipTop() + "px; margin: 0; padding: 0; width: 24rem;");
+    i0.ɵɵproperty("@fadeInScale", undefined);
     i0.ɵɵadvance();
-    i0.ɵɵstyleMap("transform: " + ctx_r1.transformStyle() + "; min-width: 12rem; box-sizing: border-box;");
-    i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
+    i0.ɵɵstyleMap("transform: " + ctx_r0.transformStyle() + "; min-width: 12rem; box-sizing: border-box;");
+    i0.ɵɵproperty("ngClass", ctx_r0.contentClass());
     i0.ɵɵadvance();
-    i0.ɵɵstoreLet(ctx_r1.tooltipContent());
+    i0.ɵɵstoreLet(ctx_r0.tooltipContent());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_7_0 = ctx_r1.tooltipType()) === "metric" ? 3 : tmp_7_0 === "status" ? 4 : tmp_7_0 === "trend" ? 5 : tmp_7_0 === "priority" ? 6 : tmp_7_0 === "badge" ? 7 : tmp_7_0 === "breakdown" ? 8 : tmp_7_0 === "competitive" ? 9 : tmp_7_0 === "insightsList" ? 10 : tmp_7_0 === "narrative" ? 11 : tmp_7_0 === "insight" ? 12 : tmp_7_0 === "text" ? 13 : 14);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r0.tooltipType()) === "metric" ? 3 : tmp_6_0 === "status" ? 4 : tmp_6_0 === "trend" ? 5 : tmp_6_0 === "priority" ? 6 : tmp_6_0 === "badge" ? 7 : tmp_6_0 === "breakdown" ? 8 : tmp_6_0 === "competitive" ? 9 : tmp_6_0 === "insightsList" ? 10 : tmp_6_0 === "narrative" ? 11 : tmp_6_0 === "insight" ? 12 : tmp_6_0 === "text" ? 13 : 14);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -11120,14 +11117,10 @@ class TooltipContainerComponent {
             return this.tooltipType() === 'narrative' ? content : null;
         }, ...(ngDevMode ? [{ debugName: "narrativeContent" }] : []));
         this.tooltipLeft = computed(() => {
-            const left = this.calculateLeft();
-            console.log('📍 [FINAL tooltipLeft]', left);
-            return left;
+            return this.calculateLeft();
         }, ...(ngDevMode ? [{ debugName: "tooltipLeft" }] : []));
         this.tooltipTop = computed(() => {
-            const top = this.calculateTop();
-            console.log('📍 [FINAL tooltipTop]', top);
-            return top;
+            return this.calculateTop();
         }, ...(ngDevMode ? [{ debugName: "tooltipTop" }] : []));
         this.shouldCenter = computed(() => {
             const rect = this.targetRect();
@@ -11151,19 +11144,8 @@ class TooltipContainerComponent {
             // Convert effective bounds back to viewport coordinates for comparison
             const viewportEffectiveLeft = effectiveLeft + ancestorOffset;
             const viewportEffectiveRight = effectiveRight + ancestorOffset;
-            console.log('🎯 [shouldCenter calculation]', {
-                position,
-                ancestorOffset,
-                effectiveLeft,
-                effectiveRight,
-                viewportEffectiveLeft,
-                viewportEffectiveRight,
-                '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') {
@@ -11171,49 +11153,15 @@ class TooltipContainerComponent {
                 const halfWidth = tooltipWidth / 2;
                 const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
                 const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
-                const result = !wouldGoOffLeft && !wouldGoOffRight;
-                console.log('🎯 [shouldCenter] top/bottom', {
-                    centerPosition,
-                    halfWidth,
-                    wouldGoOffLeft,
-                    wouldGoOffRight,
-                    result
-                });
-                return result;
+                return !wouldGoOffLeft && !wouldGoOffRight;
             }
-            console.log('❌ [shouldCenter] other position = false');
             return false;
         }, ...(ngDevMode ? [{ debugName: "shouldCenter" }] : []));
         this.containerClass = computed(() => {
             const position = this.tooltipPosition();
             if (position === 'top' || position === 'bottom' || position === 'auto') {
-                const shouldCenter = this.shouldCenter();
-                const classes = shouldCenter ? '-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;
+                return this.shouldCenter() ? '-translate-x-1/2' : '';
             }
-            console.log('📦 [containerClass] no centering');
             return '';
         }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
         this.contentClass = computed(() => this.isLightMode()
@@ -11224,9 +11172,7 @@ class TooltipContainerComponent {
             const centered = this.shouldCenter();
             // Use fixed pixel value instead of percentage to avoid timing issues
             // max-w-sm (384px) / 2 = 192px
-            const transform = centered ? 'translateX(-192px)' : 'none';
-            console.log('🎨 [transformStyle]', { centered, transform });
-            return transform;
+            return centered ? 'translateX(-192px)' : 'none';
         }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : []));
         this.tooltipService.tooltipState$
             .pipe(takeUntilDestroyed())
@@ -11248,15 +11194,6 @@ class TooltipContainerComponent {
             }
         });
     }
-    onTooltipMouseEnter() {
-        // DEBUGGING: Keep tooltip visible
-        // this.tooltipService.setTooltipHovered(true);
-    }
-    onTooltipMouseLeave() {
-        // DEBUGGING: Keep tooltip visible
-        // this.tooltipService.setTooltipHovered(false);
-        // this.tooltipService.triggerHideCheck();
-    }
     calculateLeft() {
         const rect = this.targetRect();
         if (!rect)
@@ -11265,18 +11202,6 @@ class TooltipContainerComponent {
         // 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,
-            top: rect.top,
-            bottom: rect.bottom,
-            width: rect.width,
-            height: rect.height,
-            x: rect.x,
-            y: rect.y,
-            ancestorOffset,
-            transformedAncestor: transformedAncestor?.tagName
-        });
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
@@ -11292,18 +11217,6 @@ class TooltipContainerComponent {
             effectiveLeft = bounds.left - ancestorOffset;
             effectiveRight = bounds.right - ancestorOffset;
         }
-        console.log('🔍 [Tooltip calculateLeft]', {
-            position,
-            'rect.left': rect.left,
-            'rect.right': rect.right,
-            'rect.width': rect.width,
-            tooltipWidth,
-            bounds,
-            ancestorOffset,
-            effectiveLeft,
-            effectiveRight,
-            'window.innerWidth': window.innerWidth
-        });
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
@@ -11331,66 +11244,37 @@ class TooltipContainerComponent {
                 // Check if centered tooltip would go off bounds (all in viewport coordinates)
                 const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
                 const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
-                console.log('📍 [Tooltip top/bottom calculation]', {
-                    centerPosition,
-                    halfWidth,
-                    ancestorOffset,
-                    effectiveLeft,
-                    effectiveRight,
-                    viewportEffectiveLeft,
-                    viewportEffectiveRight,
-                    'centerPosition - halfWidth': centerPosition - halfWidth,
-                    'centerPosition + halfWidth': centerPosition + halfWidth,
-                    wouldGoOffLeft,
-                    wouldGoOffRight,
-                    'viewportEffectiveLeft + padding': viewportEffectiveLeft + padding,
-                    'viewportEffectiveRight - padding': viewportEffectiveRight - padding
-                });
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding (no transform applied, so this is the actual left edge)
-                    const result = effectiveLeft + padding;
-                    console.log('⬅️ [Tooltip adjusting LEFT]', { result, effectiveLeft, tooltipWidth });
-                    return result;
+                    return effectiveLeft + padding;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding (no transform applied, so this is the actual left edge)
-                    const result = effectiveRight - padding - tooltipWidth;
-                    console.log('➡️ [Tooltip adjusting RIGHT]', { result, effectiveRight, tooltipWidth });
-                    return result;
+                    return effectiveRight - padding - tooltipWidth;
                 }
                 else {
                     // Center normally (transform will be applied to shift by -50%)
-                    const result = centerPosition - ancestorOffset;
-                    console.log('🎯 [Tooltip centered]', { centerPosition, ancestorOffset, result });
-                    return result;
+                    return centerPosition - ancestorOffset;
                 }
             }
             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 - ancestorOffset;
-                    console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result, ancestorOffset });
-                    return result;
+                    return rect.right + 8 - ancestorOffset;
                 }
-                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 - ancestorOffset;
-                    console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result, ancestorOffset });
-                    return result;
+                    return rect.left - tooltipWidth - 8 - ancestorOffset;
                 }
-                console.log('➡️ [Tooltip RIGHT]', { rightPosition, ancestorOffset });
                 return rightPosition - ancestorOffset;
             }
             default:
-                const defaultResult = rect.left + rect.width / 2 - ancestorOffset;
-                console.log('🔄 [Tooltip DEFAULT]', { defaultResult, ancestorOffset });
-                return defaultResult;
+                return rect.left + rect.width / 2 - ancestorOffset;
         }
     }
     calculateTop() {
@@ -11472,11 +11356,6 @@ class TooltipContainerComponent {
             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;
@@ -11486,8 +11365,8 @@ class TooltipContainerComponent {
     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) {
             i0.ɵɵstyleProp("display", "contents");
-        } }, decls: 1, vars: 1, consts: [[1, "z-[100]", "pointer-events-none", 3, "style"], [1, "z-[100]", "pointer-events-none"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "pointer-events-auto", 3, "mouseenter", "mouseleave", "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 9, "div", 0);
+        } }, decls: 1, vars: 1, consts: [[1, "z-[100]", "pointer-events-none", 3, "style"], [1, "z-[100]", "pointer-events-none"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "pointer-events-auto", 3, "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 8, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
         } }, dependencies: [CommonModule, i1.NgClass, MetricValueTooltipComponent,
@@ -11545,16 +11424,13 @@ class TooltipContainerComponent {
                 template: `
     @if (isVisible()) {
       <div
+        [@fadeInScale]
         [style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; margin: 0; padding: 0; width: 24rem;'"
-        [attr.data-debug-left]="tooltipLeft()"
-        [attr.data-debug-transform]="transformStyle()"
         class="z-[100] pointer-events-none">
         <div
           [ngClass]="contentClass()"
           class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 pointer-events-auto"
-          [style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'"
-          (mouseenter)="onTooltipMouseEnter()"
-          (mouseleave)="onTooltipMouseLeave()">
+          [style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'">
           @let content = tooltipContent();
           @switch (tooltipType()) {
             @case ('metric') {
@@ -11653,7 +11529,7 @@ class TooltipContainerComponent {
   `
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 176 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 173 }); })();
 
 function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();