@eric-emg/symphiq-components 1.2.176 → 1.2.178

package/fesm2022/symphiq-components.mjs

@@ -14,6 +14,7 @@ import * as i2$1 from '@angular/forms';
 import { FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MarkdownComponent } from 'ngx-markdown';
 import { Root, color, Tooltip, Bullet, Circle, Legend, percent, p100, p50 } from '@amcharts/amcharts5';
 import { XYChart, CategoryAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCursor, LineSeries, DateAxis, ColumnSeries } from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
@@ -2534,7 +2535,7 @@ class ConfettiService {
             }]
     }], null, null); })();
 
-const _c0$15 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
+const _c0$16 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
 const _c1$C = a0 => ["skeleton-shimmer-overlay", "absolute", "inset-0", "bg-gradient-to-r", a0];
 class SkeletonLoaderComponent {
     constructor() {
@@ -2551,7 +2552,7 @@ class SkeletonLoaderComponent {
         } if (rf & 2) {
             i0.ɵɵstyleProp("width", ctx.width())("height", ctx.height());
             i0.ɵɵclassProp("skeleton-shimmer", true)("skeleton-pulse", ctx.pulse());
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$15, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$16, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$C, ctx.isLightMode() ? "from-transparent via-white/60 to-transparent" : "from-transparent via-slate-500/40 to-transparent"));
         } }, dependencies: [NgClass], styles: [".skeleton-loader[_ngcontent-%COMP%]{position:relative;overflow:hidden}.skeleton-shimmer-overlay[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_shimmer 2s infinite cubic-bezier(.4,0,.6,1);transform:translate(-100%)}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes _ngcontent-%COMP%_pulse{0%,to{opacity:1}50%{opacity:.6}}"], changeDetection: 0 }); }
@@ -2591,7 +2592,7 @@ const ChartContainerComponent_Conditional_1_Conditional_13_Defer_2_DepsFn = () =
 const ChartContainerComponent_Conditional_1_Conditional_14_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_15_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_16_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _c0$14 = (a0, a1) => [a0, a1];
+const _c0$15 = (a0, a1) => [a0, a1];
 function ChartContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
     i0.ɵɵelement(2, "symphiq-skeleton-loader", 3)(3, "symphiq-skeleton-loader", 3);
@@ -2643,7 +2644,7 @@ function ChartContainerComponent_Conditional_1_Conditional_11_Template(rf, ctx)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$14, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$15, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
 } }
 function ChartContainerComponent_Conditional_1_Conditional_13_Defer_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-line-chart", 23);
@@ -4245,7 +4246,7 @@ class CompetitivePositioningSummaryComponent {
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], overallDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallDescription", required: false }] }], competitiveBenchmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitiveBenchmark", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToCompetitive: [{ type: i0.Output, args: ["scrollToCompetitive"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitivePositioningSummaryComponent, { className: "CompetitivePositioningSummaryComponent", filePath: "lib/components/funnel-analysis-dashboard/competitive-positioning-summary.component.ts", lineNumber: 298 }); })();
 
-const _c0$13 = () => [1, 2, 3, 4];
+const _c0$14 = () => [1, 2, 3, 4];
 function OverallAssessmentComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-skeleton-loader", 6)(2, "symphiq-skeleton-loader", 6);
@@ -4279,7 +4280,7 @@ function OverallAssessmentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100px")("height", "70px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$13));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$14));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
@@ -5494,7 +5495,7 @@ class OverallAssessmentComponent {
     }], null, { assessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "assessment", required: false }] }], revenueMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "revenueMetric", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isChartsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChartsLoading", required: false }] }], strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: false }] }], weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToSection: [{ type: i0.Output, args: ["scrollToSection"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 303 }); })();
 
-const _c0$12 = () => [1, 2, 3];
+const _c0$13 = () => [1, 2, 3];
 const _c1$B = () => [1, 2, 3, 4];
 const _c2$q = () => [];
 function InsightCardComponent_Conditional_0_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
@@ -5532,7 +5533,7 @@ function InsightCardComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "60%")("height", "20px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$12));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$13));
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c1$B));
 } }
@@ -8232,7 +8233,7 @@ class MetricCardComponent {
     }], () => [], { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], analysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysis", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], initialExpandedSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialExpandedSection", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/funnel-analysis-dashboard/metric-card.component.ts", lineNumber: 537 }); })();
 
-const _c0$11 = () => [1, 2, 3];
+const _c0$12 = () => [1, 2, 3];
 const _c1$A = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
 const _forTrack0$O = ($index, $item) => $item.metric;
@@ -8262,7 +8263,7 @@ function BreakdownSectionComponent_Conditional_0_For_7_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "30%")("height", "18px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$11));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$12));
 } }
 function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
@@ -8281,7 +8282,7 @@ function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "85%")("height", "14px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$11));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$12));
 } }
 function BreakdownSectionComponent_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -12450,7 +12451,7 @@ class FunnelWeaknessesListModalContentComponent {
     }], null, { weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWeaknessesListModalContentComponent, { className: "FunnelWeaknessesListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-weaknesses-list-modal-content.component.ts", lineNumber: 132 }); })();
 
-const _c0$10 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$11 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelStrengthDetailModalContentComponent_For_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 12);
 } if (rf & 2) {
@@ -12726,7 +12727,7 @@ class FunnelStrengthDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$10));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$11));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -12902,7 +12903,7 @@ class FunnelStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthDetailModalContentComponent, { className: "FunnelStrengthDetailModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strength-detail-modal-content.component.ts", lineNumber: 128 }); })();
 
-const _c0$$ = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$10 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelWeaknessDetailModalContentComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 17);
 } if (rf & 2) {
@@ -13413,7 +13414,7 @@ class FunnelWeaknessDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$$));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$10));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -13882,7 +13883,7 @@ class ProfileItemLookupService {
             }]
     }], null, null); })();
 
-const _c0$_ = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$$ = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$L = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -13900,7 +13901,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r2.label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$_, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$$, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13989,7 +13990,7 @@ class RelatedAreaChipsComponent {
     }], null, { relatedAreaIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedAreaIds", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedAreaChipsComponent, { className: "RelatedAreaChipsComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-area-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$Z = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$_ = a0 => ({ name: "chevron-right", source: a0 });
 function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -14006,7 +14007,7 @@ function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getItemLabel(item_r2));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Z, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$_, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function CompetitorChipListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -14417,7 +14418,7 @@ class CompetitorContextSectionComponent {
     }], null, { contextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextType", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorContextSectionComponent, { className: "CompetitorContextSectionComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-context-section.component.ts", lineNumber: 86 }); })();
 
-const _c0$Y = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$Z = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$J = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -14438,7 +14439,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(rec_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$Y, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$Z, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -21402,7 +21403,57 @@ class FunnelStageCompetitiveTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStageCompetitiveTooltipComponent, { className: "FunnelStageCompetitiveTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/funnel-stage-competitive-tooltip.component.ts", lineNumber: 120 }); })();
 
-const _c0$X = () => [];
+function MarkdownTooltipComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-900" : "text-white")("ngClass", ctx_r0.borderClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.content().title, " ");
+} }
+class MarkdownTooltipComponent {
+    constructor() {
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.markdownClass = computed(() => this.isLightMode() ? 'text-slate-700 prose-slate' : 'text-slate-300 prose-invert', ...(ngDevMode ? [{ debugName: "markdownClass" }] : []));
+        this.borderClass = computed(() => this.isLightMode() ? 'border-slate-200' : 'border-slate-600', ...(ngDevMode ? [{ debugName: "borderClass" }] : []));
+    }
+    static { this.ɵfac = function MarkdownTooltipComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MarkdownTooltipComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownTooltipComponent, selectors: [["symphiq-markdown-tooltip"]], inputs: { content: [1, "content"], isLightMode: [1, "isLightMode"] }, decls: 4, vars: 3, consts: [[1, "space-y-2", "max-h-80", "overflow-y-auto", "-mx-2", "px-2"], [1, "font-bold", "text-sm", "border-b", "pb-2", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "prose-sm", 3, "ngClass"], [3, "data"]], template: function MarkdownTooltipComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, MarkdownTooltipComponent_Conditional_1_Template, 2, 3, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵelement(3, "markdown", 3);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.content().title ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.markdownClass());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.content().markdown);
+        } }, dependencies: [CommonModule, i1$1.NgClass, MarkdownComponent], styles: ["[_nghost-%COMP%]     markdown{display:block}[_nghost-%COMP%]     markdown h1, [_nghost-%COMP%]     markdown h2, [_nghost-%COMP%]     markdown h3, [_nghost-%COMP%]     markdown h4, [_nghost-%COMP%]     markdown h5, [_nghost-%COMP%]     markdown h6{font-weight:600;margin-top:.75rem;margin-bottom:.5rem}[_nghost-%COMP%]     markdown h1{font-size:1.125rem}[_nghost-%COMP%]     markdown h2{font-size:1rem}[_nghost-%COMP%]     markdown h3{font-size:.875rem}[_nghost-%COMP%]     markdown p{margin-bottom:.5rem}[_nghost-%COMP%]     markdown ul, [_nghost-%COMP%]     markdown ol{margin-left:1rem;margin-bottom:.5rem;padding-left:.5rem}[_nghost-%COMP%]     markdown li{margin-bottom:.25rem}[_nghost-%COMP%]     markdown ul li{list-style-type:disc}[_nghost-%COMP%]     markdown ol li{list-style-type:decimal}[_nghost-%COMP%]     markdown strong{font-weight:600}[_nghost-%COMP%]     markdown code{font-family:monospace;font-size:.75rem;padding:.125rem .25rem;border-radius:.25rem}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkdownTooltipComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-markdown-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MarkdownComponent], template: `
+    <div class="space-y-2 max-h-80 overflow-y-auto -mx-2 px-2">
+      @if (content().title) {
+        <div [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="font-bold text-sm border-b pb-2 mb-2" [ngClass]="borderClass()">
+          {{ content().title }}
+        </div>
+      }
+      <div [ngClass]="markdownClass()" class="text-sm leading-relaxed prose-sm">
+        <markdown [data]="content().markdown"></markdown>
+      </div>
+    </div>
+  `, styles: [":host ::ng-deep markdown{display:block}:host ::ng-deep markdown h1,:host ::ng-deep markdown h2,:host ::ng-deep markdown h3,:host ::ng-deep markdown h4,:host ::ng-deep markdown h5,:host ::ng-deep markdown h6{font-weight:600;margin-top:.75rem;margin-bottom:.5rem}:host ::ng-deep markdown h1{font-size:1.125rem}:host ::ng-deep markdown h2{font-size:1rem}:host ::ng-deep markdown h3{font-size:.875rem}:host ::ng-deep markdown p{margin-bottom:.5rem}:host ::ng-deep markdown ul,:host ::ng-deep markdown ol{margin-left:1rem;margin-bottom:.5rem;padding-left:.5rem}:host ::ng-deep markdown li{margin-bottom:.25rem}:host ::ng-deep markdown ul li{list-style-type:disc}:host ::ng-deep markdown ol li{list-style-type:decimal}:host ::ng-deep markdown strong{font-weight:600}:host ::ng-deep markdown code{font-family:monospace;font-size:.75rem;padding:.125rem .25rem;border-radius:.25rem}\n"] }]
+    }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarkdownTooltipComponent, { className: "MarkdownTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/markdown-tooltip.component.ts", lineNumber: 69 }); })();
+
+const _c0$Y = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
@@ -21566,7 +21617,7 @@ function TooltipContainerComponent_Conditional_0_Case_15_Conditional_1_Template(
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$X));
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$Y));
 } }
 function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -21580,10 +21631,22 @@ function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "sections" in content_r4 ? 1 : -1);
 } }
-function TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-markdown-tooltip", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.markdownContent())("isLightMode", ctx_r1.isLightMode());
+} }
+function TooltipContainerComponent_Conditional_0_Case_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_16_Conditional_0_Template, 1, 2, "symphiq-markdown-tooltip", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.markdownContent() ? 0 : -1);
+} }
+function TooltipContainerComponent_Conditional_0_Case_17_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
-    i0.ɵɵlistener("click", function TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); i0.ɵɵnextContext(3); const content_r4 = i0.ɵɵreadContextLet(2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToTarget(content_r4["targetId"])); });
+    i0.ɵɵlistener("click", function TooltipContainerComponent_Conditional_0_Case_17_Conditional_1_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); i0.ɵɵnextContext(3); const content_r4 = i0.ɵɵreadContextLet(2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToTarget(content_r4["targetId"])); });
     i0.ɵɵtext(2, " View more ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -21591,9 +21654,9 @@ function TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Condition
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.viewMoreButtonClass());
 } }
-function TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
-    i0.ɵɵconditionalCreate(1, TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Conditional_1_Template, 3, 1, "div", 12);
+    i0.ɵɵconditionalCreate(1, TooltipContainerComponent_Conditional_0_Case_17_Conditional_1_Conditional_1_Template, 3, 1, "div", 12);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
@@ -21601,23 +21664,23 @@ function TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Template(
     i0.ɵɵadvance();
     i0.ɵɵconditional(content_r4["targetId"] ? 1 : -1);
 } }
-function TooltipContainerComponent_Conditional_0_Case_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
     i0.ɵɵproperty("innerHTML", content_r4, i0.ɵɵsanitizeHtml);
 } }
-function TooltipContainerComponent_Conditional_0_Case_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
     i0.ɵɵtextInterpolate1(" ", content_r4, " ");
 } }
-function TooltipContainerComponent_Conditional_0_Case_16_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵconditionalCreate(1, TooltipContainerComponent_Conditional_0_Case_16_Conditional_1_Template, 2, 2)(2, TooltipContainerComponent_Conditional_0_Case_16_Conditional_2_Template, 1, 1, "div", 11)(3, TooltipContainerComponent_Conditional_0_Case_16_Conditional_3_Template, 1, 1);
+    i0.ɵɵconditionalCreate(1, TooltipContainerComponent_Conditional_0_Case_17_Conditional_1_Template, 2, 2)(2, TooltipContainerComponent_Conditional_0_Case_17_Conditional_2_Template, 1, 1, "div", 11)(3, TooltipContainerComponent_Conditional_0_Case_17_Conditional_3_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
@@ -21627,7 +21690,7 @@ function TooltipContainerComponent_Conditional_0_Case_16_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "text" in content_r4 ? 1 : typeof content_r4 === "string" ? 2 : 3);
 } }
-function TooltipContainerComponent_Conditional_0_Case_17_Template(rf, ctx) { if (rf & 1) {
+function TooltipContainerComponent_Conditional_0_Case_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -21644,7 +21707,7 @@ function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
     i0.ɵɵlistener("mouseenter", function TooltipContainerComponent_Conditional_0_Template_div_mouseenter_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseEnter()); })("mouseleave", function TooltipContainerComponent_Conditional_0_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseLeave()); });
     i0.ɵɵdeclareLet(2);
-    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, 1, 1)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 1, 1)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 1, 1)(15, TooltipContainerComponent_Conditional_0_Case_15_Template, 2, 2, "div", 3)(16, TooltipContainerComponent_Conditional_0_Case_16_Template, 4, 2, "div", 4)(17, TooltipContainerComponent_Conditional_0_Case_17_Template, 2, 2, "div", 5);
+    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, 1, 1)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 1, 1)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 1, 1)(15, TooltipContainerComponent_Conditional_0_Case_15_Template, 2, 2, "div", 3)(16, TooltipContainerComponent_Conditional_0_Case_16_Template, 1, 1)(17, TooltipContainerComponent_Conditional_0_Case_17_Template, 4, 2, "div", 4)(18, TooltipContainerComponent_Conditional_0_Case_18_Template, 2, 2, "div", 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_6_0;
@@ -21657,7 +21720,7 @@ function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     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 === "competitiveBenchmark" ? 10 : tmp_6_0 === "insightsList" ? 11 : tmp_6_0 === "narrative" ? 12 : tmp_6_0 === "competitiveStatus" ? 13 : tmp_6_0 === "funnelStageCompetitive" ? 14 : tmp_6_0 === "insight" ? 15 : tmp_6_0 === "text" ? 16 : 17);
+    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 === "competitiveBenchmark" ? 10 : tmp_6_0 === "insightsList" ? 11 : tmp_6_0 === "narrative" ? 12 : tmp_6_0 === "competitiveStatus" ? 13 : tmp_6_0 === "funnelStageCompetitive" ? 14 : tmp_6_0 === "insight" ? 15 : tmp_6_0 === "markdown" ? 16 : tmp_6_0 === "text" ? 17 : 18);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -21730,6 +21793,10 @@ class TooltipContainerComponent {
             const content = this.tooltipContent();
             return this.tooltipType() === 'funnelStageCompetitive' ? content : null;
         }, ...(ngDevMode ? [{ debugName: "funnelStageCompetitiveContent" }] : []));
+        this.markdownContent = computed(() => {
+            const content = this.tooltipContent();
+            return this.tooltipType() === 'markdown' ? content : null;
+        }, ...(ngDevMode ? [{ debugName: "markdownContent" }] : []));
         this.tooltipLeft = computed(() => {
             return this.calculateLeft();
         }, ...(ngDevMode ? [{ debugName: "tooltipLeft" }] : []));
@@ -22046,7 +22113,7 @@ class 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-[10001]", "pointer-events-none", 3, "style"], [1, "z-[10001]", "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", "max-h-96", "overflow-y-auto", "-mx-4", "px-5", "pr-7", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "max-h-96", "overflow-y-auto", "-mx-4", "px-5", "pr-7", 3, "ngClass"], [3, "content", "isLightMode"], [3, "content", "isLightMode", "currencySymbol"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"], [3, "innerHTML"], [1, "flex", "justify-end", "mt-3", "pt-3", "border-t", "border-current", "opacity-30", "mr-3"], [1, "text-xs", "font-medium", "px-3", "py-1.5", "rounded-md", "transition-all", "cursor-pointer", 3, "click", "ngClass"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 18, 8, "div", 0);
+            i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 19, 8, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, MetricValueTooltipComponent,
@@ -22059,7 +22126,8 @@ class TooltipContainerComponent {
             InsightsListTooltipComponent,
             NarrativeTooltipComponent,
             CompetitiveStatusTooltipComponent,
-            FunnelStageCompetitiveTooltipComponent], encapsulation: 2, data: { animation: [
+            FunnelStageCompetitiveTooltipComponent,
+            MarkdownTooltipComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeInScale', [
                     transition(':enter', [
                         style({ opacity: 0 }),
@@ -22092,7 +22160,8 @@ class TooltipContainerComponent {
                     InsightsListTooltipComponent,
                     NarrativeTooltipComponent,
                     CompetitiveStatusTooltipComponent,
-                    FunnelStageCompetitiveTooltipComponent
+                    FunnelStageCompetitiveTooltipComponent,
+                    MarkdownTooltipComponent
                 ],
                 animations: [
                     trigger('fadeInScale', [
@@ -22105,152 +22174,159 @@ class TooltipContainerComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isVisible()) {
-      <div
-        [@fadeInScale]
-        [style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; margin: 0; padding: 0; width: 24rem;'"
-        class="z-[10001] pointer-events-none">
-        <div
-          [ngClass]="contentClass()"
-          class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 pointer-events-auto"
-          [style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'"
-          (mouseenter)="onTooltipMouseEnter()"
-          (mouseleave)="onTooltipMouseLeave()">
-          @let content = tooltipContent();
-          @switch (tooltipType()) {
-            @case ('metric') {
-              @if (metricContent()) {
-                <symphiq-metric-value-tooltip
-                  [content]="metricContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('status') {
-              @if (statusContent()) {
-                <symphiq-status-badge-tooltip
-                  [content]="statusContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('trend') {
-              @if (trendContent()) {
-                <symphiq-trend-indicator-tooltip
-                  [content]="trendContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('priority') {
-              @if (priorityContent()) {
-                <symphiq-priority-badge-tooltip
-                  [content]="priorityContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('badge') {
-              @if (badgeContent()) {
-                <symphiq-badge-tooltip
-                  [content]="badgeContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('breakdown') {
-              @if (breakdownContent()) {
-                <symphiq-breakdown-row-tooltip
-                  [content]="breakdownContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('competitive') {
-              @if (competitiveContent()) {
-                <symphiq-competitive-benchmark-tooltip
-                  [content]="competitiveContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('competitiveBenchmark') {
-              @if (competitiveContent()) {
-                <symphiq-competitive-benchmark-tooltip
-                  [content]="competitiveContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('insightsList') {
-              @if (insightsListContent()) {
-                <symphiq-insights-list-tooltip
-                  [content]="insightsListContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('narrative') {
-              @if (narrativeContent()) {
-                <symphiq-narrative-tooltip
-                  [content]="narrativeContent()!"
-                  [isLightMode]="isLightMode()" />
-              }
-            }
-            @case ('competitiveStatus') {
-              @if (competitiveStatusContent()) {
-                <symphiq-competitive-status-tooltip
-                  [content]="competitiveStatusContent()!"
-                  [isLightMode]="isLightMode()"
-                  [currencySymbol]="competitiveStatusContent()!.currencySymbol || '$'" />
-              }
-            }
-            @case ('funnelStageCompetitive') {
-              @if (funnelStageCompetitiveContent()) {
-                <symphiq-funnel-stage-competitive-tooltip
-                  [content]="funnelStageCompetitiveContent()!"
-                  [isLightMode]="isLightMode()"
-                  [currencySymbol]="funnelStageCompetitiveContent()!.currencySymbol || '$'" />
-              }
-            }
-            @case ('insight') {
-              <div [ngClass]="textClass()" class="text-sm space-y-3">
-                @if (content && typeof content === 'object' && 'sections' in content) {
-                  @for (section of content['sections'] || []; track $index) {
-                    <div class="space-y-2">
-                      <div class="font-semibold">{{ section.title }}</div>
-                      <div class="whitespace-pre-line leading-relaxed">{{ section.content }}</div>
-                    </div>
-                  }
-                }
-              </div>
-            }
-            @case ('text') {
-              <div [ngClass]="textClass()" class="text-sm whitespace-pre-line leading-relaxed max-h-96 overflow-y-auto -mx-4 px-5 pr-7">
-                @if (content && typeof content === 'object' && 'text' in content) {
-                  <div [innerHTML]="content['text']"></div>
-                  @if (content['targetId']) {
-                    <div class="flex justify-end mt-3 pt-3 border-t border-current opacity-30 mr-3">
-                      <button
-                        (click)="scrollToTarget($any(content)['targetId'])"
-                        [ngClass]="viewMoreButtonClass()"
-                        class="text-xs font-medium px-3 py-1.5 rounded-md transition-all cursor-pointer">
-                        View more
-                      </button>
-                    </div>
-                  }
-                } @else if (typeof content === 'string') {
-                  <div [innerHTML]="content"></div>
-                } @else {
-                  {{ content }}
-                }
-              </div>
-            }
-            @default {
-              <div [ngClass]="textClass()" class="text-sm whitespace-pre-line max-h-96 overflow-y-auto -mx-4 px-5 pr-7">
-                {{ content }}
-              </div>
-            }
-          }
-        </div>
-      </div>
-    }
+                template: `
+    @if (isVisible()) {
+      <div
+        [@fadeInScale]
+        [style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; margin: 0; padding: 0; width: 24rem;'"
+        class="z-[10001] pointer-events-none">
+        <div
+          [ngClass]="contentClass()"
+          class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 pointer-events-auto"
+          [style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'"
+          (mouseenter)="onTooltipMouseEnter()"
+          (mouseleave)="onTooltipMouseLeave()">
+          @let content = tooltipContent();
+          @switch (tooltipType()) {
+            @case ('metric') {
+              @if (metricContent()) {
+                <symphiq-metric-value-tooltip
+                  [content]="metricContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('status') {
+              @if (statusContent()) {
+                <symphiq-status-badge-tooltip
+                  [content]="statusContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('trend') {
+              @if (trendContent()) {
+                <symphiq-trend-indicator-tooltip
+                  [content]="trendContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('priority') {
+              @if (priorityContent()) {
+                <symphiq-priority-badge-tooltip
+                  [content]="priorityContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('badge') {
+              @if (badgeContent()) {
+                <symphiq-badge-tooltip
+                  [content]="badgeContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('breakdown') {
+              @if (breakdownContent()) {
+                <symphiq-breakdown-row-tooltip
+                  [content]="breakdownContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('competitive') {
+              @if (competitiveContent()) {
+                <symphiq-competitive-benchmark-tooltip
+                  [content]="competitiveContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('competitiveBenchmark') {
+              @if (competitiveContent()) {
+                <symphiq-competitive-benchmark-tooltip
+                  [content]="competitiveContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('insightsList') {
+              @if (insightsListContent()) {
+                <symphiq-insights-list-tooltip
+                  [content]="insightsListContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('narrative') {
+              @if (narrativeContent()) {
+                <symphiq-narrative-tooltip
+                  [content]="narrativeContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('competitiveStatus') {
+              @if (competitiveStatusContent()) {
+                <symphiq-competitive-status-tooltip
+                  [content]="competitiveStatusContent()!"
+                  [isLightMode]="isLightMode()"
+                  [currencySymbol]="competitiveStatusContent()!.currencySymbol || '$'" />
+              }
+            }
+            @case ('funnelStageCompetitive') {
+              @if (funnelStageCompetitiveContent()) {
+                <symphiq-funnel-stage-competitive-tooltip
+                  [content]="funnelStageCompetitiveContent()!"
+                  [isLightMode]="isLightMode()"
+                  [currencySymbol]="funnelStageCompetitiveContent()!.currencySymbol || '$'" />
+              }
+            }
+            @case ('insight') {
+              <div [ngClass]="textClass()" class="text-sm space-y-3">
+                @if (content && typeof content === 'object' && 'sections' in content) {
+                  @for (section of content['sections'] || []; track $index) {
+                    <div class="space-y-2">
+                      <div class="font-semibold">{{ section.title }}</div>
+                      <div class="whitespace-pre-line leading-relaxed">{{ section.content }}</div>
+                    </div>
+                  }
+                }
+              </div>
+            }
+            @case ('markdown') {
+              @if (markdownContent()) {
+                <symphiq-markdown-tooltip
+                  [content]="markdownContent()!"
+                  [isLightMode]="isLightMode()" />
+              }
+            }
+            @case ('text') {
+              <div [ngClass]="textClass()" class="text-sm whitespace-pre-line leading-relaxed max-h-96 overflow-y-auto -mx-4 px-5 pr-7">
+                @if (content && typeof content === 'object' && 'text' in content) {
+                  <div [innerHTML]="content['text']"></div>
+                  @if (content['targetId']) {
+                    <div class="flex justify-end mt-3 pt-3 border-t border-current opacity-30 mr-3">
+                      <button
+                        (click)="scrollToTarget($any(content)['targetId'])"
+                        [ngClass]="viewMoreButtonClass()"
+                        class="text-xs font-medium px-3 py-1.5 rounded-md transition-all cursor-pointer">
+                        View more
+                      </button>
+                    </div>
+                  }
+                } @else if (typeof content === 'string') {
+                  <div [innerHTML]="content"></div>
+                } @else {
+                  {{ content }}
+                }
+              </div>
+            }
+            @default {
+              <div [ngClass]="textClass()" class="text-sm whitespace-pre-line max-h-96 overflow-y-auto -mx-4 px-5 pr-7">
+                {{ content }}
+              </div>
+            }
+          }
+        </div>
+      </div>
+    }
   `
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 217 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 227 }); })();
 
 function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -22647,7 +22723,7 @@ class SearchService {
             }]
     }], null, null); })();
 
-const _c0$W = ["searchInput"];
+const _c0$X = ["searchInput"];
 const _forTrack0$D = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -23009,7 +23085,7 @@ class SearchBarComponent {
     }
     static { this.ɵfac = function SearchBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchBarComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBarComponent, selectors: [["symphiq-search-bar"]], viewQuery: function SearchBarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$W, 5);
+            i0.ɵɵviewQuery(_c0$X, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -26698,7 +26774,7 @@ class FunnelWelcomeBannerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWelcomeBannerComponent, { className: "FunnelWelcomeBannerComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-welcome-banner.component.ts", lineNumber: 113 }); })();
 
-const _c0$V = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
+const _c0$W = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
 const _c1$z = ["[slot=overall-performance]", "[slot=performance-metrics]", "[slot=performance-breakdowns]", "[slot=competitive-intelligence]"];
 class CollapsibleFunnelSectionGroupComponent {
     constructor() {
@@ -26831,7 +26907,7 @@ class CollapsibleFunnelSectionGroupComponent {
     }
     static { this.ɵfac = function CollapsibleFunnelSectionGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsibleFunnelSectionGroupComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleFunnelSectionGroupComponent, selectors: [["symphiq-collapsible-funnel-section-group"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c1$z, decls: 90, vars: 58, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "transition-colors", "duration-200", 3, "ngClass"], [1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["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"]], template: function CollapsibleFunnelSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$V);
+            i0.ɵɵprojectionDef(_c0$W);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -27674,7 +27750,7 @@ class ViewModeSwitcherModalComponent {
     }], null, { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], currentMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMode", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], modeSelected: [{ type: i0.Output, args: ["modeSelected"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewModeSwitcherModalComponent, { className: "ViewModeSwitcherModalComponent", filePath: "lib/components/shared/view-mode-switcher-modal.component.ts", lineNumber: 160 }); })();
 
-const _c0$U = a0 => ({ name: "check-badge", source: a0 });
+const _c0$V = a0 => ({ name: "check-badge", source: a0 });
 const _c1$y = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$z = ($index, $item) => $item.area;
@@ -27691,7 +27767,7 @@ function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$U, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$V, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -27906,7 +27982,7 @@ class KeyStrengthsListModalContentComponent {
     }], null, { keyStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyStrengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthsListModalContentComponent, { className: "KeyStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strengths-list-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$T = a0 => ({ name: "shield-check", source: a0 });
+const _c0$U = a0 => ({ name: "shield-check", source: a0 });
 const _c1$x = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
@@ -27924,7 +28000,7 @@ function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$T, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$U, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -28222,7 +28298,7 @@ class CriticalGapsListModalContentComponent {
     }], null, { criticalGaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "criticalGaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CriticalGapsListModalContentComponent, { className: "CriticalGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/critical-gaps-list-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$S = a0 => ({ name: "check-circle", source: a0 });
+const _c0$T = a0 => ({ name: "check-circle", source: a0 });
 const _c1$w = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$x = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -28278,7 +28354,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$S, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$T, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.strength().supportingAnswers);
 } }
@@ -28463,7 +28539,7 @@ class KeyStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthDetailModalContentComponent, { className: "KeyStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strength-detail-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$R = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$S = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$v = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$w = ($index, $item) => $item.questionId;
@@ -28741,7 +28817,7 @@ class CriticalGapDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$R, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$S, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.impactTitleClasses());
             i0.ɵɵadvance(2);
@@ -30326,7 +30402,7 @@ class TopPriorityDetailModalContentComponent {
     }], null, { priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], focusAreaName: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaName", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TopPriorityDetailModalContentComponent, { className: "TopPriorityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/top-priority-detail-modal-content.component.ts", lineNumber: 72 }); })();
 
-const _c0$Q = a0 => ({ name: "check-badge", source: a0 });
+const _c0$R = a0 => ({ name: "check-badge", source: a0 });
 const _c1$u = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
@@ -30344,7 +30420,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30649,7 +30725,7 @@ class FocusAreaStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthsListModalContentComponent, { className: "FocusAreaStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strengths-list-modal-content.component.ts", lineNumber: 109 }); })();
 
-const _c0$P = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$Q = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$t = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
 function _forTrack0$u($index, $item) { return this.getGapTitle($item); }
@@ -30666,7 +30742,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$P, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -31043,7 +31119,7 @@ class FocusAreaGapsListModalContentComponent {
     }], null, { gaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapsListModalContentComponent, { className: "FocusAreaGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gaps-list-modal-content.component.ts", lineNumber: 106 }); })();
 
-const _c0$O = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$P = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$s = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
 const _forTrack0$t = ($index, $item) => $item.opportunity;
@@ -31060,7 +31136,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$O, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$P, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -31312,7 +31388,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
     }], null, { opportunities: [{ type: i0.Input, args: [{ isSignal: true, alias: "opportunities", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunitiesListModalContentComponent, { className: "FocusAreaOpportunitiesListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunities-list-modal-content.component.ts", lineNumber: 90 }); })();
 
-const _c0$N = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$O = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$s = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31377,7 +31453,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$N, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$O, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 8);
@@ -31697,7 +31773,7 @@ class FocusAreaStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthDetailModalContentComponent, { className: "FocusAreaStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strength-detail-modal-content.component.ts", lineNumber: 121 }); })();
 
-const _c0$M = a0 => ({ name: "chat-bubble-left-right", source: a0 });
+const _c0$N = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 function FocusAreaGapDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "span", 3);
     i0.ɵɵtext(2);
@@ -31794,7 +31870,7 @@ function FocusAreaGapDetailModalContentComponent_Conditional_6_For_5_Template(rf
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.answerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$M, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$N, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerQuestionClasses());
     i0.ɵɵadvance();
@@ -32033,7 +32109,7 @@ class FocusAreaGapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapDetailModalContentComponent, { className: "FocusAreaGapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gap-detail-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$L = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$M = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$q = () => [];
 const _forTrack0$r = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -32080,7 +32156,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$L, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$M, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 5);
@@ -32485,7 +32561,7 @@ class CircularProgressComponent {
     }], null, { percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], textClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClasses", required: false }] }], strokeLinecap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeLinecap", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CircularProgressComponent, { className: "CircularProgressComponent", filePath: "lib/components/business-analysis-dashboard/visualizations/circular-progress.component.ts", lineNumber: 41 }); })();
 
-const _c0$K = ["*"];
+const _c0$L = ["*"];
 const _c1$p = (a0, a1) => [a0, a1];
 function VisualizationContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -32530,7 +32606,7 @@ class VisualizationContainerComponent {
         });
     }
     static { this.ɵfac = function VisualizationContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualizationContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$K, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$L, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function VisualizationContainerComponent_Template_div_click_0_listener($event) { return ctx.onVisualizationClick($event); });
@@ -32651,7 +32727,7 @@ class MetricBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricBadgeComponent, { className: "MetricBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/metric-badge.component.ts", lineNumber: 22 }); })();
 
-const _c0$J = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$K = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$o = a0 => ({ name: "chevron-right", source: a0 });
 function OpportunityHighlightBannerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 7);
@@ -32716,7 +32792,7 @@ class OpportunityHighlightBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$J, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$K, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -32773,7 +32849,7 @@ class OpportunityHighlightBannerComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OpportunityHighlightBannerComponent, { className: "OpportunityHighlightBannerComponent", filePath: "lib/components/business-analysis-dashboard/banners/opportunity-highlight-banner.component.ts", lineNumber: 44 }); })();
 
-const _c0$I = a0 => ({ name: "users", source: a0 });
+const _c0$J = a0 => ({ name: "users", source: a0 });
 function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
     i0.ɵɵelement(2, "symphiq-icon", 7);
@@ -32788,7 +32864,7 @@ function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.competitorListLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$I, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$J, ctx_r0.iconSource));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("relatedCompetitorIds", ctx_r0.relatedCompetitorIds())("viewMode", ctx_r0.isDark() ? ctx_r0.ViewModeEnum.DARK : ctx_r0.ViewModeEnum.LIGHT)("isDark", ctx_r0.isDark());
 } }
@@ -33352,7 +33428,7 @@ class ViewportAnimationDirective {
             type: Input
         }] }); })();
 
-const _c0$H = a0 => ({ name: "star", source: a0 });
+const _c0$I = a0 => ({ name: "star", source: a0 });
 const _c1$n = a0 => ({ name: "globe-americas", source: a0 });
 const _c2$i = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$f = a0 => ({ name: "information-circle", source: a0 });
@@ -33388,7 +33464,7 @@ function RegionCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$H, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$I, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function RegionCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 14);
@@ -34430,7 +34506,7 @@ class CompetitiveInsightBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveInsightBadgeComponent, { className: "CompetitiveInsightBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/competitive-insight-badge.component.ts", lineNumber: 25 }); })();
 
-const _c0$G = a0 => ({ name: "calendar-days", source: a0 });
+const _c0$H = a0 => ({ name: "calendar-days", source: a0 });
 const _c1$m = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$h = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$e = a0 => ({ name: "information-circle", source: a0 });
@@ -34451,7 +34527,7 @@ function SeasonCardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 12);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$G, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$H, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function SeasonCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
@@ -35268,7 +35344,7 @@ class SeasonCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SeasonCardComponent, { className: "SeasonCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/season-card.component.ts", lineNumber: 270 }); })();
 
-const _c0$F = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$G = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$l = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$g = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$d = a0 => ({ name: "information-circle", source: a0 });
@@ -35413,7 +35489,7 @@ function CustomerSegmentCardComponent_Conditional_22_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$G, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function CustomerSegmentCardComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -36385,7 +36461,7 @@ class CustomerSegmentCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomerSegmentCardComponent, { className: "CustomerSegmentCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/customer-segment-card.component.ts", lineNumber: 366 }); })();
 
-const _c0$E = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$F = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$k = a0 => ({ name: "document-text", source: a0 });
 const _c2$f = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$c = a0 => ({ name: "information-circle", source: a0 });
@@ -36483,7 +36559,7 @@ function PriceTierCardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$E, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -37222,7 +37298,7 @@ class PriceTierCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PriceTierCardComponent, { className: "PriceTierCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/price-tier-card.component.ts", lineNumber: 261 }); })();
 
-const _c0$D = () => ({ name: "cube", source: "HEROICONS" });
+const _c0$E = () => ({ name: "cube", source: "HEROICONS" });
 const _c1$j = () => ({ name: "currency-dollar", source: "HEROICONS" });
 const _c2$e = () => ({ name: "chart-bar", source: "HEROICONS" });
 const _c3$b = a0 => ({ name: "chart-bar", source: a0 });
@@ -37269,7 +37345,7 @@ function ProductCategoryCardComponent_Conditional_14_Conditional_2_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatBoxClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$D))("ngClass", ctx_r0.getStatIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$E))("ngClass", ctx_r0.getStatIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatLabelClasses());
     i0.ɵɵadvance(2);
@@ -38217,13 +38293,13 @@ class ProductCategoryCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProductCategoryCardComponent, { className: "ProductCategoryCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/product-category-card.component.ts", lineNumber: 324 }); })();
 
-const _c0$C = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$D = (a0, a1) => ({ name: a0, source: a1 });
 function CompetitiveStrengthIndicatorComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-icon", 2);
 } if (rf & 2) {
     const star_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$C, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$D, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
 } }
 class CompetitiveStrengthIndicatorComponent {
     constructor() {
@@ -38379,7 +38455,7 @@ function getCategoryBadgeClasses(category, isDark) {
     return `px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${colorClasses}`;
 }
 
-const _c0$B = a0 => ({ name: "shield-check", source: a0 });
+const _c0$C = a0 => ({ name: "shield-check", source: a0 });
 const _c1$i = a0 => ({ name: "building-storefront", source: a0 });
 const _c2$d = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$a = a0 => ({ name: "information-circle", source: a0 });
@@ -38451,7 +38527,7 @@ function EnhancedListItemCardComponent_Conditional_21_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$B, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$C, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -39095,7 +39171,7 @@ class EnhancedListItemCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EnhancedListItemCardComponent, { className: "EnhancedListItemCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/enhanced-list-item-card.component.ts", lineNumber: 221 }); })();
 
-const _c0$A = a0 => ({ name: "academic-cap", source: a0 });
+const _c0$B = a0 => ({ name: "academic-cap", source: a0 });
 const _c1$h = a0 => ({ name: "information-circle", source: a0 });
 const _c2$c = a0 => ({ name: "signal", source: a0 });
 const _c3$9 = a0 => ({ name: "wrench-screwdriver", source: a0 });
@@ -39176,7 +39252,7 @@ function FocusAreaDetailCardComponent_Conditional_16_Conditional_5_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$A, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$B, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.expandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -40958,7 +41034,7 @@ class CompetitorAnalysisCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorAnalysisCardComponent, { className: "CompetitorAnalysisCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-analysis-card.component.ts", lineNumber: 312 }); })();
 
-const _c0$z = ["*"];
+const _c0$A = ["*"];
 class SkeletonCardBaseComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -40978,7 +41054,7 @@ class SkeletonCardBaseComponent {
     `.trim();
     }
     static { this.ɵfac = function SkeletonCardBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SkeletonCardBaseComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$z, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$A, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -42143,7 +42219,7 @@ class ProfileItemCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], subsectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionId", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileItemCardComponent, { className: "ProfileItemCardComponent", filePath: "lib/components/business-analysis-dashboard/profile-item-card.component.ts", lineNumber: 171 }); })();
 
-const _c0$y = ["scrollContainer"];
+const _c0$z = ["scrollContainer"];
 const _c1$g = a0 => ({ name: "arrow-right", source: a0 });
 function ItemDetailModalComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -42263,7 +42339,7 @@ class ItemDetailModalComponent {
     }
     static { this.ɵfac = function ItemDetailModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ItemDetailModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemDetailModalComponent, selectors: [["symphiq-item-detail-modal"]], viewQuery: function ItemDetailModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$y, 5);
+            i0.ɵɵviewQuery(_c0$z, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
@@ -42342,7 +42418,7 @@ class ItemDetailModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemDetailModalComponent, { className: "ItemDetailModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/item-detail-modal.component.ts", lineNumber: 53 }); })();
 
-const _c0$x = ["modalContent"];
+const _c0$y = ["modalContent"];
 const _c1$f = ["modalWrapper"];
 const _c2$b = ["*"];
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_3_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return lineChart_component; }).then(m => m.LineChartComponent)];
@@ -44637,7 +44713,7 @@ class ProfileAnalysisModalComponent {
     }
     static { this.ɵfac = function ProfileAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileAnalysisModalComponent, selectors: [["symphiq-profile-analysis-modal"]], viewQuery: function ProfileAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$x, 5);
+            i0.ɵɵviewQuery(_c0$y, 5);
             i0.ɵɵviewQuery(_c1$f, 5);
         } if (rf & 2) {
             let _t;
@@ -45192,7 +45268,7 @@ class ProfileAnalysisModalComponent {
         }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileAnalysisModalComponent, { className: "ProfileAnalysisModalComponent", filePath: "lib/components/profile-analysis-dashboard/profile-analysis-modal.component.ts", lineNumber: 554 }); })();
 
-const _c0$w = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$x = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$e = a0 => ({ name: "trophy", source: a0 });
 const _c2$a = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$7 = a0 => ({ name: "signal", source: a0 });
@@ -45402,7 +45478,7 @@ class CompetitiveGapModalComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$w, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$x, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -45523,7 +45599,7 @@ class CompetitiveGapModalComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveGapModalComponent, { className: "CompetitiveGapModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/competitive-gap-modal.component.ts", lineNumber: 101 }); })();
 
-const _c0$v = a0 => ({ name: "list-bullet", source: a0 });
+const _c0$w = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$d = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
@@ -45543,7 +45619,7 @@ function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.iconContainerClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$v, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$w, ctx_r0.iconSource));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.titleClasses());
     i0.ɵɵadvance(2);
@@ -45763,7 +45839,7 @@ class RecommendationActionStepsModalComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actionSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionSteps", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecommendationActionStepsModalComponent, { className: "RecommendationActionStepsModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/recommendation-action-steps-modal.component.ts", lineNumber: 69 }); })();
 
-const _c0$u = ["modalContent"];
+const _c0$v = ["modalContent"];
 const _c1$c = ["modalWrapper"];
 function BusinessAnalysisModalComponent_Conditional_0_Conditional_10_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -46286,7 +46362,7 @@ class BusinessAnalysisModalComponent {
     }
     static { this.ɵfac = function BusinessAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BusinessAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BusinessAnalysisModalComponent, selectors: [["symphiq-business-analysis-modal"]], viewQuery: function BusinessAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$u, 5);
+            i0.ɵɵviewQuery(_c0$v, 5);
             i0.ɵɵviewQuery(_c1$c, 5);
         } if (rf & 2) {
             let _t;
@@ -46471,7 +46547,7 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 171 }); })();
 
-const _c0$t = ["dashboardContainer"];
+const _c0$u = ["dashboardContainer"];
 const _c1$b = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
@@ -48732,7 +48808,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
-            i0.ɵɵviewQuery(_c0$t, 5);
+            i0.ɵɵviewQuery(_c0$u, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalComponent = _t.first);
@@ -52405,7 +52481,7 @@ class FocusAreaToolsModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 
-const _c0$s = ["shopNameInput"];
+const _c0$t = ["shopNameInput"];
 const _forTrack0$k = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
@@ -53568,7 +53644,7 @@ class SymphiqCreateAccountDashboardComponent {
     }
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], viewQuery: function SymphiqCreateAccountDashboardComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$s, 5);
+            i0.ɵɵviewQuery(_c0$t, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
@@ -55402,7 +55478,7 @@ class RevenueCalculatorWelcomeBannerComponent {
         const isLoaded = this.isDataFullyLoaded();
         const hasTargets = this.hasTargets();
         if (!isLoaded) {
-            return "We're currently downloading your Google Analytics 4 data to establish your baseline metrics. Once your data is loaded, you'll be able to set targets for each metric and see how those improvements translate to revenue growth. This bottom-up approach ensures your revenue targets are grounded in achievable metric improvements.";
+            return "We're currently downloading your Google Analytics 4 data to establish your baseline metrics. Once your data is loaded, you'll set your target revenue for the year, and Symphiq will calculate the specific metric improvements needed to reach it. You can then adjust individual metrics to align with your team's capacity and strategic priorities.";
         }
         if (isLoaded && !hasTargets) {
             return "Now that we have your data, it's time to set your revenue target for this year. Enter your desired revenue goal below, and we'll automatically calculate the required improvements for each funnel metric. This ensures your revenue targets are grounded in achievable, metric-level improvements.";
@@ -55486,12 +55562,12 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵtext(8, " Welcome to Your Revenue Calculator ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 8)(10, "p", 9);
-            i0.ɵɵtext(11, " The Revenue Calculator empowers you to set metric-level targets using a bottom-up approach. Instead of working backwards from a revenue goal, you'll set realistic targets for each funnel metric, allowing Symphiq to calculate your projected revenue based on achievable improvements at every conversion stage. ");
+            i0.ɵɵtext(11, " The Revenue Calculator empowers you to achieve your revenue goals with precision. Start by setting your target revenue for the year, and Symphiq will automatically calculate the specific metric improvements needed across your funnel. You can then refine individual metric targets to match your team's capabilities and strategic focus. ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "p", 9)(13, "strong", 10);
             i0.ɵɵtext(14, "Why this matters:");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(15, " Bottom-up revenue targeting provides clarity and accountability. By setting specific goals for metrics like add-to-cart rate or checkout conversion, your team knows exactly what needs to improve. This precision enables you to simulate different growth scenarios and understand which metric improvements will have the greatest impact on your revenue. ");
+            i0.ɵɵtext(15, " This approach bridges strategy and execution. By starting with your revenue ambition and translating it into specific, measurable metric targets, your team gains clarity on exactly what needs to improve. You maintain full control to adjust targets based on your resources, historical performance, and growth opportunities at each funnel stage. ");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(16, "div", 11);
             i0.ɵɵnamespaceSVG();
@@ -55509,9 +55585,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(26, "span")(27, "strong", 10);
-            i0.ɵɵtext(28, "Metric-Level Target Setting");
+            i0.ɵɵtext(28, "Revenue Target Input");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(29, " \u2014 Set specific percentage improvements for each funnel metric based on your baseline performance");
+            i0.ɵɵtext(29, " \u2014 Set your desired revenue goal for the year, either as an absolute amount or percentage increase");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(30, "li", 16);
             i0.ɵɵnamespaceSVG();
@@ -55520,9 +55596,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(33, "span")(34, "strong", 10);
-            i0.ɵɵtext(35, "Revenue Simulation Tools");
+            i0.ɵɵtext(35, "Automatic Metric Distribution");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(36, " \u2014 See real-time revenue projections as you adjust metric targets to understand growth scenarios");
+            i0.ɵɵtext(36, " \u2014 See calculated metric improvements needed across your funnel to achieve your revenue target");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(37, "li", 16);
             i0.ɵɵnamespaceSVG();
@@ -55531,9 +55607,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(40, "span")(41, "strong", 10);
-            i0.ɵɵtext(42, "Funnel Stage Impact Visualization");
+            i0.ɵɵtext(42, "Target Refinement Controls");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(43, " \u2014 Visualize how metric improvements cascade through your funnel to drive revenue growth");
+            i0.ɵɵtext(43, " \u2014 Adjust individual metric targets to align with your team's capacity and strategic priorities");
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(44, "div", 19);
             i0.ɵɵnamespaceSVG();
@@ -55604,10 +55680,10 @@ class RevenueCalculatorWelcomeBannerComponent {
             <!-- Description (full width, no confidence card) -->
             <div class="space-y-3 mb-6">
               <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                The Revenue Calculator empowers you to set metric-level targets using a bottom-up approach. Instead of working backwards from a revenue goal, you'll set realistic targets for each funnel metric, allowing Symphiq to calculate your projected revenue based on achievable improvements at every conversion stage.
+                The Revenue Calculator empowers you to achieve your revenue goals with precision. Start by setting your target revenue for the year, and Symphiq will automatically calculate the specific metric improvements needed across your funnel. You can then refine individual metric targets to match your team's capabilities and strategic focus.
               </p>
               <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                <strong class="font-semibold">Why this matters:</strong> Bottom-up revenue targeting provides clarity and accountability. By setting specific goals for metrics like add-to-cart rate or checkout conversion, your team knows exactly what needs to improve. This precision enables you to simulate different growth scenarios and understand which metric improvements will have the greatest impact on your revenue.
+                <strong class="font-semibold">Why this matters:</strong> This approach bridges strategy and execution. By starting with your revenue ambition and translating it into specific, measurable metric targets, your team gains clarity on exactly what needs to improve. You maintain full control to adjust targets based on your resources, historical performance, and growth opportunities at each funnel stage.
               </p>
             </div>
 
@@ -55624,19 +55700,19 @@ class RevenueCalculatorWelcomeBannerComponent {
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Metric-Level Target Setting</strong> — Set specific percentage improvements for each funnel metric based on your baseline performance</span>
+                    <span><strong class="font-semibold">Revenue Target Input</strong> — Set your desired revenue goal for the year, either as an absolute amount or percentage increase</span>
                   </li>
                   <li class="flex items-start gap-2">
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Revenue Simulation Tools</strong> — See real-time revenue projections as you adjust metric targets to understand growth scenarios</span>
+                    <span><strong class="font-semibold">Automatic Metric Distribution</strong> — See calculated metric improvements needed across your funnel to achieve your revenue target</span>
                   </li>
                   <li class="flex items-start gap-2">
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Funnel Stage Impact Visualization</strong> — Visualize how metric improvements cascade through your funnel to drive revenue growth</span>
+                    <span><strong class="font-semibold">Target Refinement Controls</strong> — Adjust individual metric targets to align with your team's capacity and strategic priorities</span>
                   </li>
                 </ul>
               </div>
@@ -55918,18 +55994,29 @@ class PacingStatusBadgeComponent {
 
 const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
 const _forTrack1$3 = ($index, $item) => $item.calc.metric;
+function FunnelMetricsVisualizationComponent_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 14);
+    i0.ɵɵelement(2, "path", 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const stage_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)))("tooltipPosition", "right");
+} }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 8);
+    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status);
 } }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 11);
+    i0.ɵɵelementStart(0, "div")(1, "p", 12);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 12);
+    i0.ɵɵelementStart(3, "p", 13);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -55945,14 +56032,14 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template(rf, c
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric), " ");
 } }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 8);
+    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status);
 } }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 23);
+    i0.ɵɵelementStart(0, "div")(1, "p", 26);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -55964,19 +56051,19 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditio
     i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric));
 } }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "p", 19);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 20);
-    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template, 1, 3, "symphiq-pacing-status-badge", 8);
-    i0.ɵɵelementStart(6, "span", 21);
+    i0.ɵɵelementStart(4, "div", 23);
+    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template, 1, 3, "symphiq-pacing-status-badge", 9);
+    i0.ɵɵelementStart(6, "span", 24);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 22)(9, "div")(10, "p", 23);
+    i0.ɵɵelementStart(8, "div", 25)(9, "div")(10, "p", 26);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(12, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template, 3, 2, "div");
-    i0.ɵɵelementStart(13, "div")(14, "p", 23);
+    i0.ɵɵelementStart(13, "div")(14, "p", 26);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -56007,12 +56094,12 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template
     i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric));
 } }
 function FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 13);
-    i0.ɵɵelementStart(1, "div", 14)(2, "p", 15);
+    i0.ɵɵelement(0, "div", 16);
+    i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 16);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template, 16, 13, "div", 17, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 19);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template, 16, 13, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -56024,28 +56111,27 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template(rf, c
     i0.ɵɵrepeater(stage_r1.relatedMetrics);
 } }
 function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "h3", 5);
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "h3", 6);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 6);
-    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(6, FunnelMetricsVisualizationComponent_For_3_Conditional_6_Template, 3, 3, "button", 7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 7);
-    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 8);
-    i0.ɵɵelementStart(9, "div", 9);
+    i0.ɵɵelementStart(7, "div", 8);
+    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 9);
+    i0.ɵɵelementStart(9, "div", 10);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 10)(12, "div")(13, "p", 11);
+    i0.ɵɵelementStart(11, "div", 11)(12, "div")(13, "p", 12);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "p", 12);
+    i0.ɵɵelementStart(15, "p", 13);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template, 5, 4, "div");
-    i0.ɵɵelementStart(18, "div")(19, "p", 11);
+    i0.ɵɵelementStart(18, "div")(19, "p", 12);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "p", 12);
+    i0.ɵɵelementStart(21, "p", 13);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template, 7, 2);
@@ -56054,14 +56140,12 @@ function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf &
     const stage_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stageCardClasses());
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.stageTitleClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(stage_r1.stageMetric), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.stageDescriptionClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", stage_r1.stageMetric.description, " ");
+    i0.ɵɵconditional(stage_r1.stageMetric.description ? 6 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(stage_r1.pacingInfo ? 8 : -1);
     i0.ɵɵadvance();
@@ -56215,133 +56299,153 @@ class FunnelMetricsVisualizationComponent {
             .map(word => word.charAt(0) + word.slice(1).toLowerCase())
             .join(' ');
     }
+    infoIconClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300'
+            : 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700';
+    }
+    getMarkdownTooltipContent(markdown, title) {
+        return { title, markdown };
+    }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 4, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 4, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, FunnelMetricsVisualizationComponent_For_3_Template, 24, 18, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(2, FunnelMetricsVisualizationComponent_For_3_Template, 24, 17, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.funnelStages());
-        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent, TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FunnelMetricsVisualizationComponent, [{
         type: Component,
         args: [{
                 selector: 'symphiq-funnel-metrics-visualization',
                 standalone: true,
-                imports: [CommonModule, PacingStatusBadgeComponent],
+                imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <div class="space-y-3">
-        @for (stage of funnelStages(); track stage.stageMetric.metric) {
-          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
-            <div class="flex items-start justify-between mb-4">
-              <div class="flex-1">
-                <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold mb-1">
-                  {{ getMetricTitle(stage.stageMetric) }}
-                </h3>
-                <p [ngClass]="stageDescriptionClasses()" class="text-sm">
-                  {{ stage.stageMetric.description }}
-                </p>
-              </div>
-              <div class="flex items-center gap-3">
-                @if (stage.pacingInfo) {
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                  />
-                }
-                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
-                  +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-3 gap-4 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                    {{ currentYear() }} Projected
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric) }}
-                  </p>
-                </div>
-              }
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-2">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-2">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
-                      <div class="flex items-center justify-between mb-2">
-                        <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold flex-1">
-                          {{ getMetricTitle(metric.calc) }}
-                        </p>
-                        <div class="flex items-center gap-2">
-                          @if (metric.pacingInfo) {
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                            />
-                          }
-                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
-                            +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
-                          </span>
-                        </div>
-                      </div>
-                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric) }}</p>
-                          </div>
-                        }
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div class="space-y-6">
+      <div class="space-y-3">
+        @for (stage of funnelStages(); track stage.stageMetric.metric) {
+          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold">
+                    {{ getMetricTitle(stage.stageMetric) }}
+                  </h3>
+                  @if (stage.stageMetric.description) {
+                    <button
+                      type="button"
+                      [ngClass]="infoIconClasses()"
+                      class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center transition-colors"
+                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
+                      tooltipType="markdown"
+                      [tooltipPosition]="'right'">
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                @if (stage.pacingInfo) {
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                  />
+                }
+                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
+                  +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 gap-4 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                    {{ currentYear() }} Projected
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric) }}
+                  </p>
+                </div>
+              }
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-2">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-2">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
+                      <div class="flex items-center justify-between mb-2">
+                        <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold flex-1">
+                          {{ getMetricTitle(metric.calc) }}
+                        </p>
+                        <div class="flex items-center gap-2">
+                          @if (metric.pacingInfo) {
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                            />
+                          }
+                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
+                            +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric) }}</p>
+                          </div>
+                        }
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 122 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 135 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -56792,7 +56896,7 @@ class ChartValueFormatter {
     }
 }
 
-const _c0$r = ["chartdiv"];
+const _c0$s = ["chartdiv"];
 class AreaChartComponent {
     constructor() {
         this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
@@ -57100,7 +57204,7 @@ class AreaChartComponent {
     }
     static { this.ɵfac = function AreaChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AreaChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AreaChartComponent, selectors: [["symphiq-area-chart"]], viewQuery: function AreaChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$r, 7);
+            i0.ɵɵviewQuery(_c0$s, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -57327,8 +57431,9 @@ class RevenueCalculatorService {
             }]
     }], null, null); })();
 
+const _c0$r = ["absoluteInputRef"];
 function InitialTargetSettingComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 7);
+    i0.ɵɵelementStart(0, "p", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -57339,10 +57444,10 @@ function InitialTargetSettingComponent_Conditional_12_Template(rf, ctx) { if (rf
 } }
 function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "span", 17);
+    i0.ɵɵelementStart(0, "div", 11)(1, "span", 18);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 18);
+    i0.ɵɵelementStart(3, "input", 19, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
@@ -57356,11 +57461,11 @@ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf
 } }
 function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "input", 19);
+    i0.ɵɵelementStart(0, "div", 11)(1, "input", 20);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 20);
+    i0.ɵɵelementStart(2, "span", 21);
     i0.ɵɵtext(3, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57372,16 +57477,16 @@ function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
 function InitialTargetSettingComponent_Conditional_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "div")(2, "p", 22);
+    i0.ɵɵelementStart(0, "div", 25)(1, "div")(2, "p", 23);
     i0.ɵɵtext(3, " Gap to Close ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 25);
+    i0.ɵɵelementStart(4, "p", 26);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div")(7, "p", 22);
+    i0.ɵɵelementStart(6, "div")(7, "p", 23);
     i0.ɵɵtext(8, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 25);
+    i0.ɵɵelementStart(9, "p", 26);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -57401,25 +57506,25 @@ function InitialTargetSettingComponent_Conditional_20_Conditional_18_Template(rf
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
 function InitialTargetSettingComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "div", 21)(2, "div")(3, "p", 22);
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 22)(2, "div")(3, "p", 23);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 23);
+    i0.ɵɵelementStart(5, "p", 24);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 24)(8, "div")(9, "p", 22);
+    i0.ɵɵelementStart(7, "div", 25)(8, "div")(9, "p", 23);
     i0.ɵɵtext(10, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "p", 25);
+    i0.ɵɵelementStart(11, "p", 26);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "p", 22);
+    i0.ɵɵelementStart(13, "div")(14, "p", 23);
     i0.ɵɵtext(15, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 25);
+    i0.ɵɵelementStart(16, "p", 26);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_20_Conditional_18_Template, 11, 8, "div", 24);
+    i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_20_Conditional_18_Template, 11, 8, "div", 25);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -57450,13 +57555,13 @@ function InitialTargetSettingComponent_Conditional_20_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 18 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-area-chart", 14);
+    i0.ɵɵelement(0, "symphiq-area-chart", 15);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$");
 } }
 function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "p", 26);
+    i0.ɵɵelementStart(0, "div", 16)(1, "p", 27);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57465,13 +57570,13 @@ function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
 function InitialTargetSettingComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 27)(2, "h2", 28);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 28)(2, "h2", 29);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 26);
+    i0.ɵɵelementStart(4, "p", 27);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 29);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -57498,7 +57603,7 @@ class InitialTargetSettingComponent {
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.targetsCreated = output();
         this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
-        this.absoluteInput = signal(0, ...(ngDevMode ? [{ debugName: "absoluteInput" }] : []));
+        this.absoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "absoluteInput" }] : []));
         this.percentageInput = signal(0, ...(ngDevMode ? [{ debugName: "percentageInput" }] : []));
         this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.priorYearRevenue = computed(() => {
@@ -57524,7 +57629,7 @@ class InitialTargetSettingComponent {
             const mode = this.inputMode();
             const priorRevenue = this.priorYearRevenue();
             if (mode === 'absolute') {
-                return this.absoluteInput();
+                return this.absoluteInput() ?? 0;
             }
             else {
                 const pct = this.percentageInput();
@@ -57570,11 +57675,15 @@ class InitialTargetSettingComponent {
         this.revenueChartData = computed(() => {
             const mainData = this.mainUiData();
             const yoyData = this.yoyUiData();
-            if (!mainData && !yoyData)
+            if (!mainData && !yoyData) {
+                console.log('no data', mainData, yoyData);
                 return null;
+            }
             const series = transformUiDataToChartSeries(mainData, yoyData, MetricEnum.PURCHASE_REVENUE);
-            if (series.length === 0)
+            if (series.length === 0) {
+                console.log('no series length');
                 return null;
+            }
             return {
                 title: 'Revenue Trend',
                 areaChartData: {
@@ -57591,11 +57700,16 @@ class InitialTargetSettingComponent {
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
     }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.absoluteInputRef?.nativeElement?.focus();
+        });
+    }
     setInputMode(mode) {
         this.inputMode.set(mode);
     }
     onAbsoluteInputChange() {
-        const value = this.absoluteInput();
+        const value = this.absoluteInput() ?? 0;
         if (value > 0 && this.priorYearRevenue() > 0) {
             const pct = ((value - this.priorYearRevenue()) / this.priorYearRevenue()) * 100;
             this.percentageInput.set(pct);
@@ -57720,38 +57834,43 @@ class InitialTargetSettingComponent {
             : 'text-slate-400';
     }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [[1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "h-64", "flex", "items-center", "justify-center"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], viewQuery: function InitialTargetSettingComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$r, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [["absoluteInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "h-64", "flex", "items-center", "justify-center"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2", 3);
             i0.ɵɵtext(3, " Calculate Your Revenue Target ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4)(6, "div")(7, "label", 5);
+            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div")(7, "label", 6);
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 6)(10, "p", 7);
+            i0.ɵɵelementStart(9, "div", 7)(10, "p", 8);
             i0.ɵɵtext(11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(12, InitialTargetSettingComponent_Conditional_12_Template, 2, 2, "p", 7);
+            i0.ɵɵconditionalCreate(12, InitialTargetSettingComponent_Conditional_12_Template, 2, 2, "p", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "div", 8)(14, "button", 9);
+            i0.ɵɵelementStart(13, "div", 9)(14, "button", 10);
             i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_14_listener() { return ctx.setInputMode("absolute"); });
             i0.ɵɵtext(15, " Absolute Amount ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 9);
+            i0.ɵɵelementStart(16, "button", 10);
             i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_16_listener() { return ctx.setInputMode("percentage"); });
             i0.ɵɵtext(17, " % Increase ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 4, 3, "div", 10)(19, InitialTargetSettingComponent_Conditional_19_Template, 4, 3, "div", 10);
+            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 5, 3, "div", 11)(19, InitialTargetSettingComponent_Conditional_19_Template, 4, 3, "div", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 19, 13, "div", 11);
+            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 19, 13, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div")(22, "p", 12);
+            i0.ɵɵelementStart(21, "div")(22, "p", 13);
             i0.ɵɵtext(23, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 13);
-            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 4, "symphiq-area-chart", 14)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 15);
+            i0.ɵɵelementStart(24, "div", 14);
+            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 4, "symphiq-area-chart", 15)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 16);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 1);
-            i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 16);
+            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 2);
+            i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 17);
             i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_28_listener() { return ctx.handleSubmit(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
@@ -57804,189 +57923,193 @@ class InitialTargetSettingComponent {
                     AreaChartComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-8 pb-32">
-      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
-          Calculate Your Revenue Target
-        </h2>
-
-        <div class="grid lg:grid-cols-2 gap-8">
-          <div class="space-y-6">
-            <div>
-              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                {{ currentYear() }} Revenue
-              </label>
-              <div class="space-y-1 mb-4">
-                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
-                </p>
-                @if (currentPaceProjection() > 0) {
-                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
-                  </p>
-                }
-              </div>
-
-              <div class="flex gap-2 mb-4">
-                <button
-                  (click)="setInputMode('absolute')"
-                  [ngClass]="inputModeButtonClasses('absolute')"
-                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                  Absolute Amount
-                </button>
-                <button
-                  (click)="setInputMode('percentage')"
-                  [ngClass]="inputModeButtonClasses('percentage')"
-                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                  % Increase
-                </button>
-              </div>
-
-              @if (inputMode() === 'absolute') {
-                <div class="relative">
-                  <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                    $
-                  </span>
-                  <input
-                    type="number"
-                    [(ngModel)]="absoluteInput"
-                    (ngModelChange)="onAbsoluteInputChange()"
-                    [ngClass]="inputClasses()"
-                    class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                    placeholder="0"
-                    min="0"
-                    step="1000">
-                </div>
-              } @else {
-                <div class="relative">
-                  <input
-                    type="number"
-                    [(ngModel)]="percentageInput"
-                    (ngModelChange)="onPercentageInputChange()"
-                    [ngClass]="inputClasses()"
-                    class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                    placeholder="0"
-                    min="0"
-                    max="1000"
-                    step="0.1">
-                  <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                    %
-                  </span>
-                </div>
-              }
-            </div>
-
-            @if (calculatedRevenue() > 0) {
-              <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
-                <div class="space-y-4">
-                  <div>
-                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                      {{ currentYear() }} Revenue Target
-                    </p>
-                    <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
-                      {{ formatCurrency(calculatedRevenue()) }}
-                    </p>
-                  </div>
-                  <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        Increase Amount
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
-                      </p>
-                    </div>
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        % Growth
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        +{{ formatPercentage(percentageIncrease(), 1) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
-                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Gap to Close
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ formatCurrency(absValue(gapToClose().amount)) }}
-                        </p>
-                      </div>
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Additional Growth Needed
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-
-          <div>
-            <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
-              Year-over-Year Revenue Trend
-            </p>
-            <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
-              @if (revenueChartData()) {
-                <symphiq-area-chart
-                  [chart]="revenueChartData()!"
-                  [showAxisLabels]="true"
-                  [viewMode]="viewMode()"
-                  [currencySymbol]="'$'"
-                />
-              } @else {
-                <div class="h-64 flex items-center justify-center">
-                  <p [ngClass]="noDataClasses()" class="text-sm">
-                    No revenue data available
-                  </p>
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-
-      @if (showMetricsVisualization()) {
-        <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-          <div class="mb-6">
-            <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-              Contributing Metrics
-            </h2>
-            <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
-              To achieve your revenue target of {{ formatCurrency(calculatedRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-            </p>
-          </div>
-
-          <symphiq-funnel-metrics-visualization
-            [viewMode]="viewMode()"
-            [calculations]="metricCalculations()"
-            [pacingMetrics]="pacingMetrics()"
-          />
-        </div>
-      }
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isSubmitting()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="'Set Revenue Targets'"
-        (submitClick)="handleSubmit()"
-      />
-    </div>
+                template: `
+    <div class="space-y-8 pb-32">
+      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
+          Calculate Your Revenue Target
+        </h2>
+
+        <div class="grid lg:grid-cols-2 gap-8">
+          <div class="space-y-6">
+            <div>
+              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                {{ currentYear() }} Revenue
+              </label>
+              <div class="space-y-1 mb-4">
+                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
+                </p>
+                @if (currentPaceProjection() > 0) {
+                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
+                  </p>
+                }
+              </div>
+
+              <div class="flex gap-2 mb-4">
+                <button
+                  (click)="setInputMode('absolute')"
+                  [ngClass]="inputModeButtonClasses('absolute')"
+                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                  Absolute Amount
+                </button>
+                <button
+                  (click)="setInputMode('percentage')"
+                  [ngClass]="inputModeButtonClasses('percentage')"
+                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                  % Increase
+                </button>
+              </div>
+
+              @if (inputMode() === 'absolute') {
+                <div class="relative">
+                  <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                    $
+                  </span>
+                  <input
+                    #absoluteInputRef
+                    type="number"
+                    [(ngModel)]="absoluteInput"
+                    (ngModelChange)="onAbsoluteInputChange()"
+                    [ngClass]="inputClasses()"
+                    class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                    placeholder="0"
+                    min="0"
+                    step="1000">
+                </div>
+              } @else {
+                <div class="relative">
+                  <input
+                    type="number"
+                    [(ngModel)]="percentageInput"
+                    (ngModelChange)="onPercentageInputChange()"
+                    [ngClass]="inputClasses()"
+                    class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                    placeholder="0"
+                    min="0"
+                    max="1000"
+                    step="0.1">
+                  <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                    %
+                  </span>
+                </div>
+              }
+            </div>
+
+            @if (calculatedRevenue() > 0) {
+              <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
+                <div class="space-y-4">
+                  <div>
+                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                      {{ currentYear() }} Revenue Target
+                    </p>
+                    <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
+                      {{ formatCurrency(calculatedRevenue()) }}
+                    </p>
+                  </div>
+                  <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
+                    <div>
+                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                        Increase Amount
+                      </p>
+                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                        {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
+                      </p>
+                    </div>
+                    <div>
+                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                        % Growth
+                      </p>
+                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                        +{{ formatPercentage(percentageIncrease(), 1) }}
+                      </p>
+                    </div>
+                  </div>
+                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
+                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Gap to Close
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ formatCurrency(absValue(gapToClose().amount)) }}
+                        </p>
+                      </div>
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Additional Growth Needed
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+
+          <div>
+            <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+              Year-over-Year Revenue Trend
+            </p>
+            <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+              @if (revenueChartData()) {
+                <symphiq-area-chart
+                  [chart]="revenueChartData()!"
+                  [showAxisLabels]="true"
+                  [viewMode]="viewMode()"
+                  [currencySymbol]="'$'"
+                />
+              } @else {
+                <div class="h-64 flex items-center justify-center">
+                  <p [ngClass]="noDataClasses()" class="text-sm">
+                    No revenue data available
+                  </p>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+
+      @if (showMetricsVisualization()) {
+        <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+          <div class="mb-6">
+            <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+              Contributing Metrics
+            </h2>
+            <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
+              To achieve your revenue target of {{ formatCurrency(calculatedRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+            </p>
+          </div>
+
+          <symphiq-funnel-metrics-visualization
+            [viewMode]="viewMode()"
+            [calculations]="metricCalculations()"
+            [pacingMetrics]="pacingMetrics()"
+          />
+        </div>
+      }
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isSubmitting()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="'Set Revenue Targets'"
+        (submitClick)="handleSubmit()"
+      />
+    </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 215 }); })();
+    }], null, { absoluteInputRef: [{
+            type: ViewChild,
+            args: ['absoluteInputRef']
+        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 216 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);
@@ -58196,7 +58319,6 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf,
 } }
 class SymphiqRevenueCalculatorDashboardComponent {
     constructor() {
-        this.headerScrollService = inject(HeaderScrollService);
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.dataLoadStatus = input(ShopDataLoadStatusEnum.NOT_LOADED, ...(ngDevMode ? [{ debugName: "dataLoadStatus" }] : []));
@@ -58219,6 +58341,8 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.ShopDataLoadStatusEnum = ShopDataLoadStatusEnum;
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
+        this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
+        this.isProgrammaticScroll = false;
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.hasCurrentYearTargets = computed(() => {
             const targets = this.targets() ?? [];
@@ -58236,15 +58360,29 @@ class SymphiqRevenueCalculatorDashboardComponent {
         effect(() => {
             const event = this.scrollEvent();
             if (event?.detail) {
-                this.updateScrollProgress(event.detail.scrollTop);
+                const scrollTop = event.detail.scrollTop;
+                this.updateScrollProgress(scrollTop);
+                if (!this.isProgrammaticScroll) {
+                    const COLLAPSE_THRESHOLD = 20;
+                    const EXPAND_THRESHOLD = 10;
+                    const currentState = this.isScrolled();
+                    if (!currentState && scrollTop > COLLAPSE_THRESHOLD) {
+                        this.isScrolled.set(true);
+                    }
+                    else if (currentState && scrollTop < EXPAND_THRESHOLD) {
+                        this.isScrolled.set(false);
+                    }
+                }
             }
         }, { allowSignalWrites: true });
     }
     ngAfterViewInit() {
-        this.headerScrollService.resetState();
+        this.isScrolled.set(false);
+        this.scrollProgress.set(0);
     }
     ngOnDestroy() {
-        this.headerScrollService.resetState();
+        this.isScrolled.set(false);
+        this.scrollProgress.set(0);
     }
     onWindowScroll() {
         if (!this.embedded()) {
@@ -58332,7 +58470,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵtext(11, " Revenue Calculator ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Set Metric-Level Targets for Bottom-Up Revenue Planning ");
+            i0.ɵɵtext(13, " Set Your Revenue Target and See Required Metric Improvements ");
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
             i0.ɵɵtext(19, " Revenue Calculator ");
@@ -58355,17 +58493,17 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("max-h-0", ctx.isScrolled())("opacity-0", ctx.isScrolled())("max-h-96", !ctx.isScrolled())("opacity-100", !ctx.isScrolled());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("pointer-events-none", ctx.isScrolled())("pointer-events-auto", !ctx.isScrolled());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("max-h-0", !ctx.isScrolled())("opacity-0", !ctx.isScrolled())("max-h-20", ctx.isScrolled())("opacity-100", ctx.isScrolled());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("pointer-events-none", !ctx.isScrolled())("pointer-events-auto", ctx.isScrolled());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate");
             i0.ɵɵadvance(2);
@@ -58411,21 +58549,21 @@ class SymphiqRevenueCalculatorDashboardComponent {
           <!-- Expanded Header -->
           <div
               class="transition-all duration-300 ease-in-out overflow-hidden"
-              [class.max-h-0]="headerScrollService.isScrolled()"
-              [class.opacity-0]="headerScrollService.isScrolled()"
-              [class.max-h-96]="!headerScrollService.isScrolled()"
-              [class.opacity-100]="!headerScrollService.isScrolled()">
+              [class.max-h-0]="isScrolled()"
+              [class.opacity-0]="isScrolled()"
+              [class.max-h-96]="!isScrolled()"
+              [class.opacity-100]="!isScrolled()">
             <div
                 class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-                [class.pointer-events-none]="headerScrollService.isScrolled()"
-                [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+                [class.pointer-events-none]="isScrolled()"
+                [class.pointer-events-auto]="!isScrolled()">
               <div class="flex items-center justify-between">
                 <div>
                   <h1 [ngClass]="getMainTitleClasses()">
                     Revenue Calculator
                   </h1>
                   <p [ngClass]="getSubtitleClasses()">
-                    Set Metric-Level Targets for Bottom-Up Revenue Planning
+                    Set Your Revenue Target and See Required Metric Improvements
                   </p>
                 </div>
               </div>
@@ -58435,14 +58573,14 @@ class SymphiqRevenueCalculatorDashboardComponent {
           <!-- Condensed Header -->
           <div
               class="transition-all duration-300 ease-in-out overflow-hidden"
-              [class.max-h-0]="!headerScrollService.isScrolled()"
-              [class.opacity-0]="!headerScrollService.isScrolled()"
-              [class.max-h-20]="headerScrollService.isScrolled()"
-              [class.opacity-100]="headerScrollService.isScrolled()">
+              [class.max-h-0]="!isScrolled()"
+              [class.opacity-0]="!isScrolled()"
+              [class.max-h-20]="isScrolled()"
+              [class.opacity-100]="isScrolled()">
             <div
                 class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-                [class.pointer-events-none]="!headerScrollService.isScrolled()"
-                [class.pointer-events-auto]="headerScrollService.isScrolled()">
+                [class.pointer-events-none]="!isScrolled()"
+                [class.pointer-events-auto]="isScrolled()">
               <div class="flex items-center justify-between">
                 <div class="flex-1 min-w-0 mr-4">
                   <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
@@ -58571,7 +58709,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 220 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 219 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);