@eric-emg/symphiq-components 1.2.72 → 1.2.74

package/fesm2022/symphiq-components.mjs

@@ -11048,9 +11048,9 @@ function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     let tmp_9_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.ɵɵproperty("@fadeInScale", undefined);
+    i0.ɵɵattribute("data-debug-left", ctx_r1.tooltipLeft())("data-debug-transform", ctx_r1.transformStyle());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
     i0.ɵɵadvance();
@@ -11206,6 +11206,12 @@ 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();
+            const transform = centered ? 'translateX(-50%)' : 'none';
+            console.log('🎨 [transformStyle]', { centered, transform });
+            return transform;
+        }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : []));
         this.tooltipService.tooltipState$
             .pipe(takeUntilDestroyed())
             .subscribe(state => {
@@ -11401,8 +11407,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"]], 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) {
-            i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 11, "div", 0);
+    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);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
         } }, dependencies: [CommonModule, i1.NgClass, MetricValueTooltipComponent,
@@ -11459,9 +11465,9 @@ 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()"
+        [attr.data-debug-transform]="transformStyle()"
         class="fixed z-[100] pointer-events-none"
         @fadeInScale>
         <div