@eric-emg/symphiq-components 1.2.74 → 1.2.76

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_6_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r1.tooltipLeft(), "px")("top", ctx_r1.tooltipTop(), "px")("transform", ctx_r1.transformStyle());
-    i0.ɵɵproperty("@fadeInScale", undefined);
+    i0.ɵɵstyleMap("position: fixed; left: " + ctx_r1.tooltipLeft() + "px; top: " + ctx_r1.tooltipTop() + "px; transform: " + ctx_r1.transformStyle() + "; margin: 0; padding: 0;");
     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_6_0 = ctx_r1.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() {
@@ -11208,7 +11207,9 @@ class TooltipContainerComponent {
         this.textClass = computed(() => this.isLightMode() ? 'text-slate-700' : 'text-slate-200', ...(ngDevMode ? [{ debugName: "textClass" }] : []));
         this.transformStyle = computed(() => {
             const centered = this.shouldCenter();
-            const transform = centered ? 'translateX(-50%)' : 'none';
+            // 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" }] : []));
@@ -11407,8 +11408,10 @@ 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", "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, 12, "div", 0);
+    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", "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, 7, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
         } }, dependencies: [CommonModule, i1.NgClass, MetricValueTooltipComponent,
@@ -11437,6 +11440,9 @@ class TooltipContainerComponent {
                 selector: 'symphiq-tooltip-container',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    '[style.display]': '"contents"'
+                },
                 imports: [
                     CommonModule,
                     MetricValueTooltipComponent,
@@ -11463,13 +11469,10 @@ class TooltipContainerComponent {
                 template: `
     @if (isVisible()) {
       <div
-        [style.left.px]="tooltipLeft()"
-        [style.top.px]="tooltipTop()"
-        [style.transform]="transformStyle()"
+        [style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; transform: ' + transformStyle() + '; margin: 0; padding: 0;'"
         [attr.data-debug-left]="tooltipLeft()"
         [attr.data-debug-transform]="transformStyle()"
-        class="fixed z-[100] pointer-events-none"
-        @fadeInScale>
+        class="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"