@eric-emg/symphiq-components 1.2.79 → 1.2.81

package/fesm2022/symphiq-components.mjs

@@ -11046,16 +11046,17 @@ 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_6_0;
+    let tmp_7_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap("position: fixed; left: " + ctx_r1.tooltipLeft() + "px; top: " + ctx_r1.tooltipTop() + "px; transform: " + ctx_r1.transformStyle() + "; margin: 0; padding: 0;");
+    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());
     i0.ɵɵadvance();
+    i0.ɵɵstyleMap("transform: " + ctx_r1.transformStyle() + "; min-width: 12rem; box-sizing: border-box;");
     i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
     i0.ɵɵadvance();
     i0.ɵɵstoreLet(ctx_r1.tooltipContent());
     i0.ɵɵadvance();
-    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);
+    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);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -11293,6 +11294,8 @@ class TooltipContainerComponent {
         switch (position) {
             case 'top':
             case 'bottom': {
+                // rect.left is relative to viewport, so we don't need to adjust for viewportBounds
+                // The tooltip is positioned fixed relative to the viewport too
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
                 // Check if centered tooltip would go off bounds
@@ -11420,8 +11423,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", 2, "width", "24rem", "min-width", "12rem", "box-sizing", "border-box", 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);
+        } }, 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);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
         } }, dependencies: [CommonModule, i1.NgClass, MetricValueTooltipComponent,
@@ -11479,14 +11482,14 @@ class TooltipContainerComponent {
                 template: `
     @if (isVisible()) {
       <div
-        [style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; transform: ' + transformStyle() + '; margin: 0; padding: 0;'"
+        [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="width: 24rem; min-width: 12rem; box-sizing: border-box;"
+          [style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'"
           (mouseenter)="onTooltipMouseEnter()"
           (mouseleave)="onTooltipMouseLeave()">
           @let content = tooltipContent();