@eric-emg/symphiq-components 1.2.96 → 1.2.97

package/fesm2022/symphiq-components.mjs

@@ -10365,7 +10365,7 @@ function ModalComponent_Conditional_0_Conditional_21_For_4_Template(rf, ctx) { i
     const metric_r7 = ctx.$implicit;
     const $index_r9 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "bg-slate-50 hover:bg-slate-100 border-slate-200" : "bg-slate-900/30 hover:bg-slate-900/50 border-slate-700/50")("libSymphiqTooltip", ctx_r1.getMetricTooltip(metric_r7))("tooltipPosition", "top");
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "bg-slate-50 hover:bg-slate-100 border-slate-200" : "bg-slate-900/30 hover:bg-slate-900/50 border-slate-700/50");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-700 group-hover:text-slate-900" : "text-slate-300 group-hover:text-white");
     i0.ɵɵadvance();
@@ -10385,7 +10385,7 @@ function ModalComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_21_Conditional_1_Template, 14, 8, "div", 19);
     i0.ɵɵelementStart(2, "div", 19);
-    i0.ɵɵrepeaterCreate(3, ModalComponent_Conditional_0_Conditional_21_For_4_Template, 12, 10, "button", 37, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(3, ModalComponent_Conditional_0_Conditional_21_For_4_Template, 12, 8, "button", 37, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -10430,28 +10430,28 @@ function ModalComponent_Conditional_0_Conditional_22_Conditional_1_Template(rf,
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-700" : "text-slate-300");
 } }
 function ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-line-chart", 59);
+    i0.ɵɵelement(0, "symphiq-line-chart", 60);
 } if (rf & 2) {
     const chart_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("chart", chart_r11)("viewMode", ctx_r1.viewMode())("showAxisLabels", false);
 } }
 function ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-bar-chart", 59);
+    i0.ɵɵelement(0, "symphiq-bar-chart", 60);
 } if (rf & 2) {
     const chart_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("chart", chart_r11)("viewMode", ctx_r1.viewMode())("showAxisLabels", false);
 } }
 function ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-pie-chart", 59);
+    i0.ɵɵelement(0, "symphiq-pie-chart", 60);
 } if (rf & 2) {
     const chart_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("chart", chart_r11)("viewMode", ctx_r1.viewMode())("showAxisLabels", false);
 } }
 function ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-area-chart", 59);
+    i0.ɵɵelement(0, "symphiq-area-chart", 60);
 } if (rf & 2) {
     const chart_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -10461,17 +10461,17 @@ function ModalComponent_Conditional_0_Conditional_22_For_4_Template(rf, ctx) { i
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 54);
     i0.ɵɵlistener("click", function ModalComponent_Conditional_0_Conditional_22_For_4_Template_button_click_0_listener() { const chart_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openChartModalFromList(chart_r11)); });
-    i0.ɵɵelementStart(1, "div", 55)(2, "div", 43)(3, "h5", 56);
+    i0.ɵɵelementStart(1, "div", 55)(2, "div", 56)(3, "h5", 57);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p", 39);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 57)(8, "div", 58);
-    i0.ɵɵconditionalCreate(9, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_9_Template, 1, 3, "symphiq-line-chart", 59);
-    i0.ɵɵconditionalCreate(10, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_10_Template, 1, 3, "symphiq-bar-chart", 59);
-    i0.ɵɵconditionalCreate(11, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_11_Template, 1, 3, "symphiq-pie-chart", 59);
-    i0.ɵɵconditionalCreate(12, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_12_Template, 1, 3, "symphiq-area-chart", 59);
+    i0.ɵɵelementStart(7, "div", 58)(8, "div", 59);
+    i0.ɵɵconditionalCreate(9, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_9_Template, 1, 3, "symphiq-line-chart", 60);
+    i0.ɵɵconditionalCreate(10, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_10_Template, 1, 3, "symphiq-bar-chart", 60);
+    i0.ɵɵconditionalCreate(11, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_11_Template, 1, 3, "symphiq-pie-chart", 60);
+    i0.ɵɵconditionalCreate(12, ModalComponent_Conditional_0_Conditional_22_For_4_Conditional_12_Template, 1, 3, "symphiq-area-chart", 60);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(13, "svg", 35);
@@ -10551,10 +10551,10 @@ function ModalComponent_Conditional_0_Conditional_23_Conditional_1_Template(rf,
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-700" : "text-slate-300");
 } }
 function ModalComponent_Conditional_0_Conditional_23_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵelementStart(0, "div", 61);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 61);
-    i0.ɵɵelement(2, "path", 62);
+    i0.ɵɵelementStart(1, "svg", 62);
+    i0.ɵɵelement(2, "path", 63);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span", 39);
@@ -10573,7 +10573,7 @@ function ModalComponent_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_23_Conditional_1_Template, 14, 8, "div", 19);
     i0.ɵɵelementStart(2, "div", 19);
-    i0.ɵɵrepeaterCreate(3, ModalComponent_Conditional_0_Conditional_23_For_4_Template, 5, 3, "div", 60, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(3, ModalComponent_Conditional_0_Conditional_23_For_4_Template, 5, 3, "div", 61, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -10595,13 +10595,13 @@ function ModalComponent_Conditional_0_Conditional_24_Conditional_1_Template(rf,
     i0.ɵɵelementStart(9, "p", 39);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 40)(12, "div", 64);
+    i0.ɵɵelementStart(11, "div", 40)(12, "div", 65);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 65);
-    i0.ɵɵelement(14, "path", 66);
+    i0.ɵɵelementStart(13, "svg", 66);
+    i0.ɵɵelement(14, "path", 67);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(15, "h4", 67);
+    i0.ɵɵelementStart(15, "h4", 68);
     i0.ɵɵtext(16, "Industry Context");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -10628,7 +10628,7 @@ function ModalComponent_Conditional_0_Conditional_24_Conditional_1_Template(rf,
 function ModalComponent_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_24_Conditional_1_Template, 17, 9, "div", 19);
-    i0.ɵɵelementStart(2, "div", 63)(3, "p", 39);
+    i0.ɵɵelementStart(2, "div", 64)(3, "p", 39);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -10644,10 +10644,10 @@ function ModalComponent_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf
 } }
 function ModalComponent_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 68);
+    i0.ɵɵelementStart(0, "button", 69);
     i0.ɵɵlistener("click", function ModalComponent_Conditional_0_Conditional_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goBack()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 69);
+    i0.ɵɵelementStart(1, "svg", 70);
     i0.ɵɵelement(2, "path", 24);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
@@ -10660,7 +10660,7 @@ function ModalComponent_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf
 } }
 function ModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 70);
+    i0.ɵɵelementStart(0, "button", 71);
     i0.ɵɵlistener("click", function ModalComponent_Conditional_0_Conditional_27_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeModal()); });
     i0.ɵɵtext(1, " Close ");
     i0.ɵɵelementEnd();
@@ -10749,9 +10749,6 @@ function ModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.hasPreviousState() ? 26 : 27);
 } }
 class ModalComponent {
-    getMetricTooltip(metric) {
-        return this.tooltipDataService.extractMetricTooltipData(metric);
-    }
     constructor() {
         this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -10940,7 +10937,6 @@ class ModalComponent {
         this.expandedSection = computed(() => this.modalStateSignal().expandedSection, ...(ngDevMode ? [{ debugName: "expandedSection" }] : []));
         this.modalTitle = computed(() => this.computeModalTitle(), ...(ngDevMode ? [{ debugName: "modalTitle" }] : []));
         this.modalService = inject(ModalService);
-        this.tooltipDataService = inject(TooltipDataService);
         // Subscribe to modal state changes with automatic cleanup
         this.modalService.modalState$
             .pipe(takeUntilDestroyed())
@@ -11232,11 +11228,11 @@ class ModalComponent {
         });
     }
     static { this.ɵfac = function ModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalComponent, selectors: [["symphiq-funnel-analysis-modal"]], inputs: { isLightMode: [1, "isLightMode"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-50", "overflow-y-auto"], [1, "fixed", "inset-0", "z-50", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "z-40", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "z-50", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "ngClass"], [1, "flex-shrink-0", 3, "class", "animate-pulse"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "insight", "allMetrics", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState"], [3, "metric", "insights", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState", "initialExpandedSection"], [1, "chart-modal-content"], [1, "space-y-3"], [1, "space-y-5"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", "flex", "items-center", "justify-center", "gap-2", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "flex-shrink-0"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "min-h-[500px]"], [3, "chart", "showAxisLabels", "viewMode"], [1, "flex", "items-center", "justify-center", "py-12"], [1, "animate-spin", "rounded-full", "h-8", "w-8", 3, "ngClass"], [1, "w-full", "text-left", "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass"], [1, "w-full", "text-left", "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass"], [1, "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full", "text-sm", "font-bold", "flex-shrink-0", 3, "ngClass"], [1, "text-base", "font-medium", "transition-colors", "flex-1", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "group-hover:text-blue-400", "transition-colors", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], ["tooltipType", "metric", 1, "w-full", "text-left", "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "border-t", "pt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", "mb-3", 3, "ngClass"], ["tooltipType", "metric", 1, "w-full", "text-left", "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipPosition"], [1, "flex-1", "min-w-0"], [1, "text-base", "font-medium", "transition-colors", "mb-1", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "flex-shrink-0"], [1, "flex", "items-baseline", "gap-2"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1", 3, "class"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "w-full", "text-left", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "hover:shadow-lg", "active:scale-[0.99]", 3, "ngClass"], [1, "w-full", "text-left", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "hover:shadow-lg", "active:scale-[0.99]", 3, "click", "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "gap-4"], [1, "text-base", "font-semibold", "mb-1", "transition-colors", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "w-full", "sm:w-auto", "sm:flex-shrink-0"], [1, "rounded-md", "border", "overflow-hidden", "w-full", "sm:w-32", "h-20", 3, "ngClass"], [3, "chart", "viewMode", "showAxisLabels"], [1, "w-full", "text-left", "flex", "items-start", "gap-3", "p-4", "rounded-lg", "border", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-emerald-400", "flex-shrink-0", "mt-0.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", "flex", "items-center", "justify-center", "gap-2", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "click", "ngClass"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalComponent, selectors: [["symphiq-funnel-analysis-modal"]], inputs: { isLightMode: [1, "isLightMode"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-50", "overflow-y-auto"], [1, "fixed", "inset-0", "z-50", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "z-40", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "z-50", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "ngClass"], [1, "flex-shrink-0", 3, "class", "animate-pulse"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "insight", "allMetrics", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState"], [3, "metric", "insights", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState", "initialExpandedSection"], [1, "chart-modal-content"], [1, "space-y-3"], [1, "space-y-5"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", "flex", "items-center", "justify-center", "gap-2", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "flex-shrink-0"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "min-h-[500px]"], [3, "chart", "showAxisLabels", "viewMode"], [1, "flex", "items-center", "justify-center", "py-12"], [1, "animate-spin", "rounded-full", "h-8", "w-8", 3, "ngClass"], [1, "w-full", "text-left", "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass"], [1, "w-full", "text-left", "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass"], [1, "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full", "text-sm", "font-bold", "flex-shrink-0", 3, "ngClass"], [1, "text-base", "font-medium", "transition-colors", "flex-1", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "group-hover:text-blue-400", "transition-colors", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "w-full", "text-left", "grid", "grid-cols-1", "sm:grid-cols-[1fr_auto]", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "border-t", "pt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", "mb-3", 3, "ngClass"], [1, "w-full", "text-left", "grid", "grid-cols-1", "sm:grid-cols-[1fr_auto]", "gap-3", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass"], [1, "min-w-0"], [1, "text-base", "font-medium", "transition-colors", "mb-1", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "min-w-[260px]", "justify-end"], [1, "flex", "items-baseline", "gap-2"], [1, "text-2xl", "font-bold", "tabular-nums", 3, "ngClass"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1", "tabular-nums", 3, "class"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1", "tabular-nums"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "w-full", "text-left", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "hover:shadow-lg", "active:scale-[0.99]", 3, "ngClass"], [1, "w-full", "text-left", "p-4", "rounded-lg", "border", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", "hover:scale-[1.01]", "hover:shadow-lg", "active:scale-[0.99]", 3, "click", "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "gap-4"], [1, "flex-1", "min-w-0"], [1, "text-base", "font-semibold", "mb-1", "transition-colors", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "w-full", "sm:w-auto", "sm:flex-shrink-0"], [1, "rounded-md", "border", "overflow-hidden", "w-full", "sm:w-32", "h-20", 3, "ngClass"], [3, "chart", "viewMode", "showAxisLabels"], [1, "w-full", "text-left", "flex", "items-start", "gap-3", "p-4", "rounded-lg", "border", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-emerald-400", "flex-shrink-0", "mt-0.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", "flex", "items-center", "justify-center", "gap-2", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "click", "ngClass"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ModalComponent_Conditional_0_Template, 28, 29, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, InsightCardComponent, MetricCardComponent, LineChartComponent, BarChartComponent, PieChartComponent, AreaChartComponent, TooltipDirective], encapsulation: 2, data: { animation: [
+        } }, dependencies: [CommonModule, i1$1.NgClass, InsightCardComponent, MetricCardComponent, LineChartComponent, BarChartComponent, PieChartComponent, AreaChartComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0 }),
@@ -11257,7 +11253,7 @@ class ModalComponent {
                 selector: 'symphiq-funnel-analysis-modal',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [CommonModule, InsightCardComponent, MetricCardComponent, LineChartComponent, BarChartComponent, PieChartComponent, AreaChartComponent, TooltipDirective],
+                imports: [CommonModule, InsightCardComponent, MetricCardComponent, LineChartComponent, BarChartComponent, PieChartComponent, AreaChartComponent],
                 animations: [
                     trigger('fadeIn', [
                         transition(':enter', [
@@ -11435,23 +11431,20 @@ class ModalComponent {
                       <button
                         (click)="openMetricModalFromList(metric)"
                         [ngClass]="isLightMode() ? 'bg-slate-50 hover:bg-slate-100 border-slate-200' : 'bg-slate-900/30 hover:bg-slate-900/50 border-slate-700/50'"
-                        class="w-full text-left flex flex-col sm:flex-row items-start sm:items-center gap-3 p-4 rounded-lg border hover:border-blue-500/50 transition-all cursor-pointer group hover:scale-[1.01] active:scale-[0.99]"
-                        [libSymphiqTooltip]="getMetricTooltip(metric)"
-                        tooltipType="metric"
-                        [tooltipPosition]="'top'">
-                        <div class="flex-1 min-w-0">
+                        class="w-full text-left grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3 p-4 rounded-lg border hover:border-blue-500/50 transition-all cursor-pointer group hover:scale-[1.01] active:scale-[0.99]">
+                        <div class="min-w-0">
                           <div [ngClass]="isLightMode() ? 'text-slate-700 group-hover:text-slate-900' : 'text-slate-300 group-hover:text-white'" class="text-base font-medium transition-colors mb-1">{{ formatMetricName(metric.metric || 'UNKNOWN') }}</div>
                           @if (metric.description) {
                             <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm leading-relaxed">{{ metric.description }}</p>
                           }
                         </div>
-                        <div class="flex items-center gap-3 flex-shrink-0">
+                        <div class="flex items-center gap-3 min-w-[260px] justify-end">
                           <div class="flex items-baseline gap-2">
-                            <span [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-2xl font-bold">
+                            <span [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-2xl font-bold tabular-nums">
                               {{ formatAnimatedMetricValue(metric, getAnimatedMetricValue($index)) }}
                             </span>
                             @if (metric.trendPercent !== undefined && metric.trendPercent !== null) {
-                              <span [class]="getMetricTrendClass(metric)" class="text-sm font-semibold flex items-center gap-1">
+                              <span [class]="getMetricTrendClass(metric)" class="text-sm font-semibold flex items-center gap-1 tabular-nums">
                                 @if (metric.trendDirection === 'UP') {
                                   <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
@@ -11620,7 +11613,7 @@ class ModalComponent {
   `,
             }]
     }], () => [], { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "lib/components/funnel-analysis-dashboard/modal.component.ts", lineNumber: 383 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "lib/components/funnel-analysis-dashboard/modal.component.ts", lineNumber: 378 }); })();
 
 function MetricValueTooltipComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);