@eric-emg/symphiq-components 1.2.73 → 1.2.75

package/fesm2022/symphiq-components.mjs

@@ -11046,17 +11046,16 @@ function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     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_9_0;
+    let tmp_8_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r1.tooltipLeft(), "px")("top", ctx_r1.tooltipTop(), "px");
-    i0.ɵɵproperty("ngClass", ctx_r1.containerClass())("@fadeInScale", undefined);
-    i0.ɵɵattribute("data-debug-left", ctx_r1.tooltipLeft())("data-debug-center", ctx_r1.containerClass());
+    i0.ɵɵstyleProp("left", ctx_r1.tooltipLeft(), "px")("top", ctx_r1.tooltipTop(), "px")("transform", ctx_r1.transformStyle());
+    i0.ɵɵattribute("data-debug-left", ctx_r1.tooltipLeft())("data-debug-transform", ctx_r1.transformStyle());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
     i0.ɵɵadvance();
     i0.ɵɵstoreLet(ctx_r1.tooltipContent());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_9_0 = ctx_r1.tooltipType()) === "metric" ? 3 : tmp_9_0 === "status" ? 4 : tmp_9_0 === "trend" ? 5 : tmp_9_0 === "priority" ? 6 : tmp_9_0 === "badge" ? 7 : tmp_9_0 === "breakdown" ? 8 : tmp_9_0 === "competitive" ? 9 : tmp_9_0 === "insightsList" ? 10 : tmp_9_0 === "narrative" ? 11 : tmp_9_0 === "insight" ? 12 : tmp_9_0 === "text" ? 13 : 14);
+    i0.ɵɵconditional((tmp_8_0 = ctx_r1.tooltipType()) === "metric" ? 3 : tmp_8_0 === "status" ? 4 : tmp_8_0 === "trend" ? 5 : tmp_8_0 === "priority" ? 6 : tmp_8_0 === "badge" ? 7 : tmp_8_0 === "breakdown" ? 8 : tmp_8_0 === "competitive" ? 9 : tmp_8_0 === "insightsList" ? 10 : tmp_8_0 === "narrative" ? 11 : tmp_8_0 === "insight" ? 12 : tmp_8_0 === "text" ? 13 : 14);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -11206,6 +11205,14 @@ class TooltipContainerComponent {
             ? 'bg-white/95 border-slate-300 text-slate-900'
             : 'bg-slate-800/95 border-slate-600 text-white', ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
         this.textClass = computed(() => this.isLightMode() ? 'text-slate-700' : 'text-slate-200', ...(ngDevMode ? [{ debugName: "textClass" }] : []));
+        this.transformStyle = computed(() => {
+            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;
+        }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : []));
         this.tooltipService.tooltipState$
             .pipe(takeUntilDestroyed())
             .subscribe(state => {
@@ -11401,7 +11408,7 @@ 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"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "ngClass"], [1, "fixed", "z-[100]", "pointer-events-none", 3, "ngClass"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", "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) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "transform"], [1, "fixed", "z-[100]", "pointer-events-none"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", "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, 11, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
@@ -11459,11 +11466,10 @@ class TooltipContainerComponent {
       <div
         [style.left.px]="tooltipLeft()"
         [style.top.px]="tooltipTop()"
-        [ngClass]="containerClass()"
+        [style.transform]="transformStyle()"
         [attr.data-debug-left]="tooltipLeft()"
-        [attr.data-debug-center]="containerClass()"
-        class="fixed z-[100] pointer-events-none"
-        @fadeInScale>
+        [attr.data-debug-transform]="transformStyle()"
+        class="fixed z-[100] pointer-events-none">
         <div
           [ngClass]="contentClass()"
           class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 max-w-sm pointer-events-auto"
@@ -11567,7 +11573,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: 175 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 174 }); })();
 
 function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();