@eric-emg/symphiq-components 1.2.241 → 1.2.243

package/fesm2022/symphiq-components.mjs

@@ -1,4 +1,4 @@
-import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, MetricEnumUtil, NumberTypeEnum, FunnelMetricTypeEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, LineChartUseCaseEnum, BarChartUseCaseEnum } from '@jebgem/model';
+import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, MetricEnumUtil, NumberTypeEnum, LineChartUseCaseEnum, FunnelMetricTypeEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, BarChartUseCaseEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, input, ChangeDetectionStrategy, Component, output, inject, ElementRef, Renderer2, effect, Directive, HostListener, untracked, ViewChild, PLATFORM_ID, Inject, Input } from '@angular/core';
@@ -3878,7 +3878,7 @@ class CompetitiveScoreService {
             }]
     }], null, null); })();
 
-const _forTrack0$P = ($index, $item) => $item.category;
+const _forTrack0$Q = ($index, $item) => $item.category;
 function CompetitivePositioningSummaryComponent_Conditional_1_For_47_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵelement(1, "div", 37);
@@ -4037,7 +4037,7 @@ function CompetitivePositioningSummaryComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(43, "div", 24)(44, "div", 25)(45, "div", 26);
-    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$P);
+    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$Q);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(48, "div", 28)(49, "button", 29);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_1_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -4246,7 +4246,7 @@ function CompetitivePositioningSummaryComponent_Conditional_2_Template(rf, ctx)
     i0.ɵɵelementStart(32, "div", 50)(33, "h4", 51);
     i0.ɵɵtext(34, "By Funnel Stage");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$P);
+    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$Q);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "div", 28)(38, "button", 53);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_2_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -8923,7 +8923,7 @@ class MetricCardComponent {
 const _c0$12 = () => [1, 2, 3];
 const _c1$B = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
-const _forTrack0$O = ($index, $item) => $item.metric;
+const _forTrack0$P = ($index, $item) => $item.metric;
 const _forTrack1$7 = ($index, $item) => $item.dimensionValue;
 function BreakdownSectionComponent_Conditional_0_For_7_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -9246,7 +9246,7 @@ function BreakdownSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(6, BreakdownSectionComponent_Conditional_1_Conditional_6_Template, 3, 0, "div", 11);
     i0.ɵɵelementStart(7, "div", 12);
-    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$O);
+    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$P);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -10644,7 +10644,7 @@ class ChartCardComponent {
     }], null, { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartCardComponent, { className: "ChartCardComponent", filePath: "lib/components/shared/chart-card.component.ts", lineNumber: 101 }); })();
 
-const _forTrack0$N = ($index, $item) => $item.id;
+const _forTrack0$O = ($index, $item) => $item.id;
 function FunnelStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵnamespaceSVG();
@@ -10758,7 +10758,7 @@ function FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template(r
 } }
 function FunnelStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$N);
+    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$O);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -10968,7 +10968,7 @@ class FunnelStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthsListModalContentComponent, { className: "FunnelStrengthsListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strengths-list-modal-content.component.ts", lineNumber: 93 }); })();
 
-const _forTrack0$M = ($index, $item) => $item.severity;
+const _forTrack0$N = ($index, $item) => $item.severity;
 const _forTrack1$6 = ($index, $item) => $item.id;
 function FunnelWeaknessesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -11147,7 +11147,7 @@ function FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template(
 } }
 function FunnelWeaknessesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$M);
+    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$N);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -12922,7 +12922,7 @@ class ProfileItemLookupService {
     }], null, null); })();
 
 const _c0$$ = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$L = ($index, $item) => $item.id;
+const _forTrack0$M = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -12943,7 +12943,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$L);
+    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$M);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -13168,7 +13168,7 @@ class CompetitorChipListComponent {
     }], null, { relatedCompetitorIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedCompetitorIds", required: false }] }], competitors: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorChipListComponent, { className: "CompetitorChipListComponent", filePath: "lib/components/business-analysis-dashboard/shared/competitor-chip-list.component.ts", lineNumber: 37 }); })();
 
-const _forTrack0$K = ($index, $item) => $item.id;
+const _forTrack0$L = ($index, $item) => $item.id;
 function CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 8);
@@ -13251,7 +13251,7 @@ function CompetitorContextSectionComponent_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵconditionalCreate(8, CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template, 5, 4, "button", 4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "div", 5)(10, "div", 6);
-    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$K);
+    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$L);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -13442,7 +13442,7 @@ class CompetitorContextSectionComponent {
 (() => { (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$Z = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$J = ($index, $item) => $item.id;
+const _forTrack0$K = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 4);
@@ -13485,7 +13485,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Templat
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$J);
+    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$K);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template, 5, 4, "button", 3);
     i0.ɵɵelementEnd();
@@ -13941,7 +13941,7 @@ class RelatedFunnelInsightsSectionComponent {
     }], null, { insightCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "insightCount", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], insightsClicked: [{ type: i0.Output, args: ["insightsClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedFunnelInsightsSectionComponent, { className: "RelatedFunnelInsightsSectionComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-funnel-insights-section.component.ts", lineNumber: 47 }); })();
 
-const _forTrack0$I = ($index, $item) => $item.order;
+const _forTrack0$J = ($index, $item) => $item.order;
 function RecommendationCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-icon", 11);
@@ -14294,7 +14294,7 @@ function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6
 } }
 function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$I);
+    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$J);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -15133,7 +15133,7 @@ const ModalComponent_Conditional_0_Conditional_19_Conditional_4_Defer_2_DepsFn =
 const ModalComponent_Conditional_0_Conditional_19_Conditional_5_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_7_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _forTrack0$H = ($index, $item) => $item.id || $index;
+const _forTrack0$I = ($index, $item) => $item.id || $index;
 function ModalComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
@@ -15507,7 +15507,7 @@ function ModalComponent_Conditional_0_Conditional_22_For_3_Template(rf, ctx) { i
 function ModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 55);
-    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$H);
+    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$I);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -19744,7 +19744,7 @@ class NarrativeTooltipComponent {
     }], 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(NarrativeTooltipComponent, { className: "NarrativeTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/narrative-tooltip.component.ts", lineNumber: 27 }); })();
 
-const _forTrack0$G = ($index, $item) => $item.name;
+const _forTrack0$H = ($index, $item) => $item.name;
 function CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);
     i0.ɵɵelement(3, "div", 10);
@@ -19788,7 +19788,7 @@ function CompetitiveStatusTooltipComponent_Conditional_6_Template(rf, ctx) { if
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 5);
-    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$G);
+    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$H);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20035,7 +20035,7 @@ class CompetitiveStatusTooltipComponent {
     }], 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(CompetitiveStatusTooltipComponent, { className: "CompetitiveStatusTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/competitive-status-tooltip.component.ts", lineNumber: 60 }); })();
 
-const _forTrack0$F = ($index, $item) => $item.name;
+const _forTrack0$G = ($index, $item) => $item.name;
 function FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "span", 11);
     i0.ɵɵtext(3);
@@ -20075,7 +20075,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_8_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$F);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$G);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20125,7 +20125,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_9_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$F);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$G);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20175,7 +20175,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_10_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$F);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$G);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21439,7 +21439,7 @@ class MobileFABComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], scrollToTop: [{ type: i0.Output, args: ["scrollToTop"] }], toggleView: [{ type: i0.Output, args: ["toggleView"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileFABComponent, { className: "MobileFABComponent", filePath: "lib/components/funnel-analysis-dashboard/mobile-fab.component.ts", lineNumber: 75 }); })();
 
-const _forTrack0$E = ($index, $item) => $item.id;
+const _forTrack0$F = ($index, $item) => $item.id;
 function MobileBottomNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 3);
@@ -21497,7 +21497,7 @@ class MobileBottomNavComponent {
     static { this.ɵfac = function MobileBottomNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MobileBottomNavComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileBottomNavComponent, selectors: [["symphiq-mobile-bottom-nav"]], inputs: { isLightMode: [1, "isLightMode"], sections: [1, "sections"], activeSection: [1, "activeSection"] }, outputs: { navigate: "navigate" }, decls: 4, vars: 1, consts: [[1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "lg:hidden", "border-t", "backdrop-blur-md", 3, "ngClass"], [1, "flex", "items-center", "justify-around", "px-2", "py-3"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "click", "ngClass"], [1, "w-6", "h-6", 3, "innerHTML"], [1, "text-xs", "font-medium"]], template: function MobileBottomNavComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$E);
+            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$F);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClass());
@@ -21702,7 +21702,7 @@ class SearchService {
     }], null, null); })();
 
 const _c0$X = ["searchInput"];
-const _forTrack0$D = ($index, $item) => $item.id;
+const _forTrack0$E = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 18);
@@ -21795,7 +21795,7 @@ function SearchBarComponent_Conditional_0_Conditional_14_For_2_Template(rf, ctx)
 } }
 function SearchBarComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$D);
+    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$E);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -22286,7 +22286,7 @@ class SearchHighlightDirective {
             }]
     }], () => [], { symphiqSearchHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "libSymphiqSearchHighlight", required: false }] }], highlightId: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightId", required: false }] }] }); })();
 
-const _forTrack0$C = ($index, $item) => $item.value;
+const _forTrack0$D = ($index, $item) => $item.value;
 const _forTrack1$5 = ($index, $item) => $item.performanceItemId;
 function CompetitiveScorecardComponent_For_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -22661,7 +22661,7 @@ class CompetitiveScorecardComponent {
             i0.ɵɵtext(9);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(10, "div", 6);
-            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$C);
+            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$D);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 8)(14, "table", 9)(15, "thead")(16, "tr", 10)(17, "th", 11);
             i0.ɵɵtext(18, "Metric");
@@ -23296,7 +23296,7 @@ class SectionDividerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }], sectionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIcon", required: false }] }], subsections: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsections", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionDividerComponent, { className: "SectionDividerComponent", filePath: "lib/components/shared/section-divider.component.ts", lineNumber: 36 }); })();
 
-const _forTrack0$B = ($index, $item) => $item.id;
+const _forTrack0$C = ($index, $item) => $item.id;
 function FloatingTocComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 8);
@@ -23348,7 +23348,7 @@ function FloatingTocComponent_For_19_Conditional_7_For_2_Template(rf, ctx) { if
 } }
 function FloatingTocComponent_For_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$B);
+    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$C);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r2 = i0.ɵɵnextContext().$implicit;
@@ -23738,7 +23738,7 @@ class FloatingTocComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(17, "nav", 9);
-            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$B);
+            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$C);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(20, "div", 11)(21, "button", 7);
             i0.ɵɵlistener("click", function FloatingTocComponent_Template_button_click_21_listener() { return ctx.scrollToTop(); });
@@ -23892,7 +23892,7 @@ class FloatingTocComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], containerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerElement", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FloatingTocComponent, { className: "FloatingTocComponent", filePath: "lib/components/business-analysis-dashboard/floating-toc.component.ts", lineNumber: 125 }); })();
 
-const _forTrack0$A = ($index, $item) => $item.id;
+const _forTrack0$B = ($index, $item) => $item.id;
 function JourneyProgressIndicatorComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 22);
@@ -24125,7 +24125,7 @@ function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if
     i0.ɵɵtext(2, "Journey Progress");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 44);
-    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$A);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$B);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24574,7 +24574,7 @@ class JourneyProgressIndicatorComponent {
     static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[60px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "flex", "flex-col", "items-center", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave", "click"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "animate-spin"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
-            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 10, null, null, _forTrack0$A);
+            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 10, null, null, _forTrack0$B);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
             i0.ɵɵelementEnd();
@@ -26725,7 +26725,7 @@ class ViewModeSwitcherModalComponent {
 const _c0$V = a0 => ({ name: "check-badge", source: a0 });
 const _c1$z = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$z = ($index, $item) => $item.area;
+const _forTrack0$A = ($index, $item) => $item.area;
 function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -26794,7 +26794,7 @@ function KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function KeyStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$z);
+    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$A);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -26958,7 +26958,7 @@ const _c0$U = a0 => ({ name: "shield-check", source: a0 });
 const _c1$y = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$y = ($index, $item) => $item.area;
+const _forTrack0$z = ($index, $item) => $item.area;
 function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -27043,7 +27043,7 @@ function CriticalGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function CriticalGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$y);
+    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$z);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -27272,7 +27272,7 @@ class CriticalGapsListModalContentComponent {
 
 const _c0$T = a0 => ({ name: "check-circle", source: a0 });
 const _c1$x = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$x = ($index, $item) => $item.questionId;
+const _forTrack0$y = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2);
@@ -27319,7 +27319,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 12);
-    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$x);
+    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$y);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -27514,7 +27514,7 @@ class KeyStrengthDetailModalContentComponent {
 const _c0$S = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$w = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$w = ($index, $item) => $item.questionId;
+const _forTrack0$x = ($index, $item) => $item.questionId;
 function CriticalGapDetailModalContentComponent_Conditional_20_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23)(1, "p", 25);
     i0.ɵɵtext(2, " Gap Identified: ");
@@ -27582,7 +27582,7 @@ function CriticalGapDetailModalContentComponent_Conditional_20_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 17);
-    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$w);
+    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$x);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -29378,7 +29378,7 @@ const _c0$R = a0 => ({ name: "check-badge", source: a0 });
 const _c1$v = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$v = ($index, $item) => $item.capability;
+const _forTrack0$w = ($index, $item) => $item.capability;
 function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -29493,7 +29493,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Templat
 } }
 function FocusAreaStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$v);
+    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -29700,7 +29700,7 @@ class FocusAreaStrengthsListModalContentComponent {
 const _c0$Q = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$u = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
-function _forTrack0$u($index, $item) { return this.getGapTitle($item); }
+function _forTrack0$v($index, $item) { return this.getGapTitle($item); }
 function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -29817,7 +29817,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function FocusAreaGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$u, true);
+    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$v, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30094,7 +30094,7 @@ class FocusAreaGapsListModalContentComponent {
 const _c0$P = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$t = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$t = ($index, $item) => $item.opportunity;
+const _forTrack0$u = ($index, $item) => $item.opportunity;
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -30185,7 +30185,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Tem
 } }
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$u);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30362,7 +30362,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
 
 const _c0$O = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$s = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$s = ($index, $item) => $item.performanceItemId;
+const _forTrack0$t = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -30432,7 +30432,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf,
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 9);
-    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$s);
+    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$t);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31083,7 +31083,7 @@ class FocusAreaGapDetailModalContentComponent {
 
 const _c0$M = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = () => [];
-const _forTrack0$r = ($index, $item) => $item.performanceItemId;
+const _forTrack0$s = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -31135,7 +31135,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 6);
-    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$r);
+    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$s);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -32218,7 +32218,7 @@ class ShadowElevationDirective {
                 selector: '[symphiqShadowElevation]',
                 standalone: true
             }]
-    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type: Object, decorators: [{
+    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [PLATFORM_ID]
             }] }], { scrollContainer: [{
@@ -36278,7 +36278,7 @@ const _c4$7 = a0 => ({ name: "academic-cap", source: a0 });
 const _c5$5 = a0 => ({ name: "information-circle", source: a0 });
 const _c6$2 = a0 => ({ name: "signal", source: a0 });
 const _c7$1 = a0 => ({ name: "wrench-screwdriver", source: a0 });
-const _forTrack0$q = ($index, $item) => $item.name;
+const _forTrack0$r = ($index, $item) => $item.name;
 function ProductCategoryCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
     i0.ɵɵtext(1);
@@ -36409,7 +36409,7 @@ function ProductCategoryCardComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(6, "symphiq-visualization-container", 21);
     i0.ɵɵlistener("visualizationClick", function ProductCategoryCardComponent_Conditional_16_Template_symphiq_visualization_container_visualizationClick_6_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openHorizontalBarModal($event)); });
     i0.ɵɵelementStart(7, "div", 22);
-    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$r);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -41398,7 +41398,7 @@ const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_5_D
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
 const _c3$8 = a0 => ({ name: "arrow-left", source: a0 });
 const _c4$5 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$p = ($index, $item) => $item.performanceItemId || $index;
+const _forTrack0$q = ($index, $item) => $item.performanceItemId || $index;
 const _forTrack1$4 = ($index, $item) => $item.id || $index;
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_10_For_5_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -41609,7 +41609,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$q);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r11 = ctx;
@@ -41689,7 +41689,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$q);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r14 = ctx;
@@ -41808,7 +41808,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Directly Affected Metric ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$q);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -41842,7 +41842,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Indirectly Affected Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$q);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -41874,7 +41874,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵproperty("metric", metric_r38)("isLightMode", ctx_r1.isLightMode())("animationKey", $index_r39);
 } }
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$q);
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(data_r32.metrics);
@@ -44528,7 +44528,7 @@ const _c0$w = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$e = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
-const _forTrack0$o = ($index, $item) => $item.order;
+const _forTrack0$p = ($index, $item) => $item.order;
 function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 5);
     i0.ɵɵelement(2, "symphiq-icon", 6);
@@ -44682,7 +44682,7 @@ class RecommendationActionStepsModalComponent {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, RecommendationActionStepsModalComponent_Conditional_1_Template, 8, 7, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$o);
+            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$p);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, RecommendationActionStepsModalComponent_Conditional_5_Template, 4, 5, "div", 4);
             i0.ɵɵelementEnd();
@@ -45478,7 +45478,7 @@ const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
 const _c4$3 = () => [1, 2, 3, 4];
 const _c5$2 = () => [1, 2];
-const _forTrack0$n = ($index, $item) => $item.value;
+const _forTrack0$o = ($index, $item) => $item.value;
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } }
@@ -45517,7 +45517,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_mousedown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_pointerdown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(4, "select", 48);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$o);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -45597,7 +45597,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(1, "select", 54);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$o);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46343,7 +46343,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_14_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(15, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "button", 124);
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
@@ -46357,7 +46357,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(24, "div", 127)(25, "div", 128);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_Template, 3, 1, "div", 129)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_Template, 4, 5, "div", 130);
     i0.ɵɵelementEnd()();
@@ -46534,7 +46534,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Te
     i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_12_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(13, "select", 164);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_Template, 3, 1, "div", 95)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_Template, 4, 5, "div", 165);
     i0.ɵɵelementEnd()();
@@ -46645,7 +46645,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Te
     i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_13_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(14, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_Template, 6, 5, "div", 95)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 92);
     i0.ɵɵelementEnd()();
@@ -47226,7 +47226,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             // Get the scrollable element once for all features
             // Priority 1: Use the scrollElement passed directly from parent (preferred method)
             // Priority 2: Fall back to querying by scrollContainerId (legacy method)
-            let scrollElement = this.scrollElement() || null;
+            const scrollElement = this.scrollElement() || null;
             let elementSource = 'none';
             if (scrollElement) {
                 elementSource = 'passed-from-parent';
@@ -49212,7 +49212,7 @@ function getTrendClasses(trendPercent, viewMode) {
     }
 }
 
-const _forTrack0$m = ($index, $item) => $item.performanceItemId;
+const _forTrack0$n = ($index, $item) => $item.performanceItemId;
 function SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17)(1, "p", 18);
     i0.ɵɵtext(2);
@@ -49831,7 +49831,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
             i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template, 3, 7, "div", 9);
             i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisPreviewComponent_Conditional_13_Template, 18, 23, "div", 10);
             i0.ɵɵelementStart(14, "div", 11);
-            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$m);
+            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$n);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisPreviewComponent_Conditional_17_Template, 9, 11, "div", 9);
             i0.ɵɵconditionalCreate(18, SymphiqFunnelAnalysisPreviewComponent_Conditional_18_Template, 14, 19, "div", 9);
@@ -50074,7 +50074,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
     }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 228 }); })();
 
-const _forTrack0$l = ($index, $item) => $item.id;
+const _forTrack0$m = ($index, $item) => $item.id;
 function SymphiqWelcomeDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "div", 37)(3, "span", 38);
     i0.ɵɵtext(4);
@@ -50369,7 +50369,7 @@ class SymphiqWelcomeDashboardComponent {
             i0.ɵɵtext(62, " Your Onboarding Journey ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(63, "div", 30);
-            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$l);
+            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$m);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(66, "div", 32);
             i0.ɵɵnamespaceSVG();
@@ -51408,7 +51408,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$t = ["shopNameInput"];
-const _forTrack0$k = ($index, $item) => $item.focusAreaDomain;
+const _forTrack0$l = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
 } }
@@ -51735,7 +51735,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 55);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 56, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 56, _forTrack0$l);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -51765,7 +51765,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 65);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 66, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 66, _forTrack0$l);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -51795,7 +51795,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 68);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 69, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 69, _forTrack0$l);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -53183,7 +53183,7 @@ class SymphiqCreateAccountDashboardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 625 }); })();
 
-const _forTrack0$j = ($index, $item) => $item.id;
+const _forTrack0$k = ($index, $item) => $item.id;
 function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Change Google Account ");
 } }
@@ -53390,7 +53390,7 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_
 } }
 function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template, 11, 8, "label", 52, _forTrack0$j);
+    i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template, 11, 8, "label", 52, _forTrack0$k);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -55120,7 +55120,7 @@ class TargetChangeBadgeComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], percentageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageChange", required: false }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], priorYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorYear", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TargetChangeBadgeComponent, { className: "TargetChangeBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/target-change-badge.component.ts", lineNumber: 23 }); })();
 
-const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
+const _forTrack0$j = ($index, $item) => $item.stageMetric.metric;
 const _forTrack1$3 = ($index, $item) => $item.calc.metric;
 function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
@@ -55531,7 +55531,7 @@ class FunnelMetricsVisualizationComponent {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 29, 20, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 29, 20, "div", 2, _forTrack0$j);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -56553,7 +56553,1519 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
     AreaChartComponent: AreaChartComponent
 });
 
-const _c0$r = ["absoluteInputRef"];
+const _c0$r = ["chartdiv"];
+class LineChartComponent {
+    constructor() {
+        this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
+        this.showAxisLabels = input(false, ...(ngDevMode ? [{ debugName: "showAxisLabels" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.currencySymbol = input('$', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : []));
+        // Memoized computed signals to avoid recalculation on every change detection
+        this.chartHeight = computed(() => this.showAxisLabels() ? '500px' : '133px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
+        this.cursorColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x94a3b8, ...(ngDevMode ? [{ debugName: "cursorColor" }] : []));
+        this.tooltipTextColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x000000, ...(ngDevMode ? [{ debugName: "tooltipTextColor" }] : []));
+        this.chartHash = computed(() => this.generateChartHash(this.chart()), ...(ngDevMode ? [{ debugName: "chartHash" }] : []));
+        this.lastChartHash = '';
+        this.chartNeedsRender = false;
+        this.isVisible = false;
+        this.animationsEnabled = false;
+        // Monitor for actual data changes using memoized hash
+        effect(() => {
+            const newHash = this.chartHash();
+            if (newHash !== this.lastChartHash) {
+                this.lastChartHash = newHash;
+                this.chartNeedsRender = true;
+            }
+        });
+    }
+    ngOnInit() {
+    }
+    /**
+     * Generate a hash of the chart data to detect actual changes
+     * This prevents unnecessary re-renders when data hasn't truly changed
+     */
+    generateChartHash(chart) {
+        const data = chart.lineChartData;
+        if (!data)
+            return 'empty';
+        const seriesCount = data.series?.length ?? 0;
+        const dataPoints = data.series?.reduce((sum, s) => sum + (s.data?.length ?? 0), 0) ?? 0;
+        return `${chart.title}-${seriesCount}-${dataPoints}-${chart.lineChartUseCase}`;
+    }
+    ngAfterViewInit() {
+        this.setupIntersectionObserver();
+        this.setupResizeObserver();
+    }
+    ngOnDestroy() {
+        this.cleanupIntersectionObserver();
+        this.cleanupResizeObserver();
+        if (this.chartElement) {
+            this.chartElement.series.clear();
+            this.chartElement.xAxes.clear();
+            this.chartElement.yAxes.clear();
+        }
+        if (this.root) {
+            this.root.dispose();
+        }
+        this.chartElement = undefined;
+        this.root = undefined;
+    }
+    setupResizeObserver() {
+        if (!this.chartDiv?.nativeElement || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                // AmCharts handles resize automatically, but we debounce to prevent
+                // excessive Angular change detection cycles during window resize
+                if (this.root && !this.root.isDisposed()) {
+                    // Force a single layout recalculation after resize settles
+                    this.root.resize();
+                }
+            }, 150);
+        });
+        this.resizeObserver.observe(this.chartDiv.nativeElement);
+    }
+    cleanupResizeObserver() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    setupIntersectionObserver() {
+        if (!this.chartDiv?.nativeElement || typeof IntersectionObserver === 'undefined') {
+            // Fallback: render immediately if IntersectionObserver not supported
+            this.isVisible = true;
+            this.animationsEnabled = true;
+            if (this.chartNeedsRender || !this.root) {
+                this.createChart();
+                this.chartNeedsRender = false;
+            }
+            return;
+        }
+        // Use IntersectionObserver to detect when chart enters viewport
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.isVisible) {
+                    this.isVisible = true;
+                    // Create chart without animations initially for faster rendering
+                    if (this.chartNeedsRender || !this.root) {
+                        this.createChart();
+                        this.chartNeedsRender = false;
+                    }
+                    // Enable animations after initial render completes
+                    setTimeout(() => {
+                        this.animationsEnabled = true;
+                    }, 100);
+                    // Stop observing once visible (one-time initialization)
+                    this.intersectionObserver?.disconnect();
+                }
+            });
+        }, {
+            // Trigger when 10% of the chart is visible
+            threshold: 0.1,
+            // Start observing slightly before element enters viewport
+            rootMargin: '50px'
+        });
+        this.intersectionObserver.observe(this.chartDiv.nativeElement);
+    }
+    cleanupIntersectionObserver() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = undefined;
+        }
+    }
+    /**
+     * Create chart with early exit optimization
+     * Prevents unnecessary re-initialization if no data changes detected
+     */
+    formatValue(value, valueFormat) {
+        const formattedNumber = value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        if (valueFormat === 'CURRENCY') {
+            return `${this.currencySymbol()}${formattedNumber}`;
+        }
+        else if (valueFormat === 'PERCENTAGE') {
+            return `${formattedNumber}%`;
+        }
+        return formattedNumber;
+    }
+    isPriorYearSeries(seriesData) {
+        if (!seriesData || !seriesData.name) {
+            return false;
+        }
+        // Check if series name indicates it's a prior year series
+        const name = seriesData.name.toLowerCase();
+        const currentYear = new Date().getFullYear();
+        // Check for explicit keywords
+        if (name.includes('last year') ||
+            name.includes('prior year') ||
+            name.includes('previous year')) {
+            return true;
+        }
+        // Check for year patterns - extract any 4-digit year and compare to current year
+        const yearMatch = seriesData.name.match(/\b(20\d{2})\b/);
+        if (yearMatch) {
+            const year = parseInt(yearMatch[1], 10);
+            return year < currentYear;
+        }
+        return false;
+    }
+    extractMetricName(seriesName) {
+        // Extract metric name from series name by removing year patterns
+        // e.g., "Purchase Revenue (2025)" -> "Purchase Revenue"
+        //       "Revenue 2024" -> "Revenue"
+        //       "Sessions (2024)" -> "Sessions"
+        if (!seriesName)
+            return '';
+        return seriesName.replace(/\s*\(?\s*20\d{2}\s*\)?/g, '').trim();
+    }
+    createChart() {
+        const chartData = this.chart().lineChartData;
+        if (!chartData || !this.chartDiv)
+            return;
+        // Check if this is a YoY chart from the chart configuration
+        const isYoYChart = this.chart().lineChartUseCase === LineChartUseCaseEnum.THIS_YEAR_VS_LAST_YEAR;
+        this.root = Root.new(this.chartDiv.nativeElement);
+        // Only enable animations if chart is visible to improve initial load performance
+        if (this.animationsEnabled) {
+            this.root.setThemes([am5themes_Animated.new(this.root)]);
+        }
+        this.chartElement = this.root.container.children.push(XYChart.new(this.root, {
+            panX: false,
+            panY: false,
+            wheelX: 'none',
+            wheelY: 'none',
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            maxTooltipDistance: -1
+        }));
+        const dateAxis = this.chartElement.xAxes.push(DateAxis.new(this.root, {
+            baseInterval: { timeUnit: 'month', count: 1 },
+            renderer: AxisRendererX.new(this.root, {}),
+            tooltip: Tooltip.new(this.root, {})
+        }));
+        dateAxis.get('renderer').labels.template.setAll({
+            fontSize: 12,
+            fill: color(0x94a3b8),
+            visible: this.showAxisLabels(),
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0
+        });
+        // Create Y-axes based on yaxisLabels if provided
+        const yaxisLabels = chartData.yaxisLabels || ['Value'];
+        const yAxesMap = new Map();
+        const axisColors = {};
+        const axisColorPalette = [
+            0x4A90E2, // Blue
+            0x10b981, // Green
+            0xf59e0b, // Amber
+            0xef4444, // Red
+            0x8b5cf6, // Purple
+            0x06b6d4 // Cyan
+        ];
+        yaxisLabels.forEach((label, index) => {
+            const isRightAxis = index % 2 === 1;
+            const colorValue = axisColorPalette[index % axisColorPalette.length];
+            axisColors[label] = colorValue;
+            if (!this.chartElement || !this.root)
+                return;
+            const yAxis = this.chartElement.yAxes.push(ValueAxis.new(this.root, {
+                renderer: AxisRendererY.new(this.root, {
+                    opposite: isRightAxis
+                })
+            }));
+            // Only show axis labels when there's a single Y-axis
+            if (yaxisLabels.length === 1) {
+                yAxis.get('renderer').labels.template.setAll({
+                    fontSize: 12,
+                    fill: color(colorValue),
+                    visible: this.showAxisLabels(),
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    marginLeft: 0,
+                    marginRight: 0
+                });
+                // Don't show axis title/name for single Y-axis, only values
+            }
+            else {
+                // Hide labels when multiple axes
+                yAxis.get('renderer').labels.template.setAll({
+                    visible: false
+                });
+            }
+            yAxesMap.set(label, yAxis);
+        });
+        // Create cursor for mouse tracking - use memoized cursorColor
+        const cursor = XYCursor.new(this.root, {
+            behavior: 'zoomX'
+        });
+        this.chartElement.set('cursor', cursor);
+        cursor.lineY.set('visible', false);
+        cursor.lineX.set('visible', true);
+        cursor.lineX.set('stroke', color(this.cursorColor()));
+        cursor.set('xAxis', dateAxis);
+        // Create free-floating tooltip for the chart
+        const tooltip = Tooltip.new(this.root, {});
+        this.chartElement.plotContainer.set('tooltipPosition', 'pointer');
+        this.chartElement.plotContainer.set('tooltip', tooltip);
+        this.chartElement.plotContainer.set('tooltipText', '{name}'); // Enable tooltip trigger
+        // Make tooltip background transparent with white border
+        const tooltipBg = tooltip.get('background');
+        if (tooltipBg) {
+            tooltipBg.setAll({
+                fill: color(0x000000),
+                fillOpacity: 0,
+                stroke: color(0xffffff),
+                strokeOpacity: 1,
+                strokeWidth: 2
+            });
+        }
+        // Style the tooltip label - white text for dark mode, black for light mode - use memoized color
+        tooltip.label.setAll({
+            fontSize: 12,
+            fill: color(this.tooltipTextColor()),
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 10,
+            paddingRight: 10
+        });
+        // Add tooltip text adapter to format values from all series with colored dots
+        tooltip.label.adapters.add('text', () => {
+            let text = '';
+            let count = 0;
+            let monthText = '';
+            this.chartElement?.series.each((series) => {
+                const dataItem = series.get('tooltipDataItem');
+                if (dataItem) {
+                    // Extract month and year from the first series that has a dataItem
+                    if (monthText === '') {
+                        const valueX = dataItem.get('valueX');
+                        if (valueX) {
+                            const date = new Date(valueX);
+                            const month = date.toLocaleString('default', { month: 'long', timeZone: 'UTC' });
+                            const year = date.toLocaleString('default', { year: 'numeric', timeZone: 'UTC' });
+                            monthText = `${month} ${year}`;
+                        }
+                    }
+                    if (count > 0)
+                        text += '\n';
+                    const name = series.get('name');
+                    const value = dataItem.get('valueY');
+                    const seriesFormat = series.get('userData')?.valueFormat;
+                    const formattedValue = seriesFormat === 'CURRENCY'
+                        ? ChartValueFormatter.formatValue(value, seriesFormat, this.currencySymbol())
+                        : this.formatValue(value, seriesFormat);
+                    // Get the series color (stroke color)
+                    const stroke = series.get('stroke');
+                    let colorHex = 'FFFFFF'; // Default white
+                    if (stroke) {
+                        colorHex = stroke.toString().substring(1).toUpperCase(); // Remove '#' and convert to uppercase
+                    }
+                    // Format with colored bullet: [color]●[/] SeriesName: Value
+                    text += `[fontSize: 24px][${colorHex}]●[/][/] [bold]${name}:[/] ${formattedValue}`;
+                    count++;
+                }
+            });
+            // Prepend month to the text if available
+            if (monthText) {
+                text = `[bold]${monthText}[/]\n${text}`;
+            }
+            return text;
+        });
+        // For YoY charts, build a metric-to-color map to ensure both years of the same metric have the same color
+        const metricColorMap = new Map();
+        if (isYoYChart && chartData.series) {
+            const uniqueMetrics = new Set();
+            chartData.series.forEach(seriesData => {
+                const metricName = this.extractMetricName(seriesData.name);
+                uniqueMetrics.add(metricName);
+            });
+            let colorIndex = 0;
+            uniqueMetrics.forEach(metricName => {
+                metricColorMap.set(metricName, axisColorPalette[colorIndex % axisColorPalette.length]);
+                colorIndex++;
+            });
+        }
+        chartData.series?.forEach((seriesData, index) => {
+            const parsedData = (seriesData.data || []).map(d => ({
+                date: new Date(`${d.date}T00:00:00Z`).getTime(),
+                value: d.value
+            }));
+            // Get the Y-axis for this series, or use the first one as default
+            const yaxisLabel = seriesData.yaxisLabel || yaxisLabels[0];
+            const yAxis = yAxesMap.get(yaxisLabel) || Array.from(yAxesMap.values())[0];
+            // Determine series color: for YoY charts use metric-based colors, otherwise use axis-based colors
+            let seriesColorValue;
+            if (isYoYChart) {
+                const metricName = this.extractMetricName(seriesData.name);
+                seriesColorValue = metricColorMap.get(metricName) || axisColorPalette[index % axisColorPalette.length];
+            }
+            else {
+                seriesColorValue = axisColors[yaxisLabel] || axisColorPalette[index % axisColorPalette.length];
+            }
+            const seriesColor = color(seriesColorValue);
+            // Check if this is a prior year series for YoY charts
+            const isPriorYear = isYoYChart && this.isPriorYearSeries(seriesData);
+            if (!this.chartElement || !this.root)
+                return;
+            const series = this.chartElement.series.push(LineSeries.new(this.root, {
+                name: seriesData.name,
+                xAxis: dateAxis,
+                yAxis: yAxis,
+                valueYField: 'value',
+                valueXField: 'date',
+                stroke: seriesColor
+            }));
+            // Store valueFormat and prior year flag in userData for tooltip formatting
+            series.set('userData', { valueFormat: seriesData.valueFormat, isPriorYear });
+            // Disable individual series tooltips - use floating tooltip instead
+            series.set('tooltip', undefined);
+            // Configure stroke styling based on whether it's a prior year series
+            series.strokes.template.setAll({
+                strokeWidth: 2
+            });
+            if (isPriorYear) {
+                // Apply dashed line and reduced opacity for prior year data
+                series.strokes.template.setAll({
+                    strokeDasharray: [5, 5],
+                    strokeOpacity: 0.4
+                });
+                // Also set on each individual stroke
+                series.strokes.each((stroke) => {
+                    stroke.set('strokeDasharray', [5, 5]);
+                    stroke.set('strokeOpacity', 0.4);
+                });
+            }
+            // Add bullets with larger hit area for better hover detection
+            series.bullets.push(() => {
+                const bulletConfig = {
+                    radius: 5,
+                    fill: seriesColor
+                };
+                if (isPriorYear) {
+                    bulletConfig['fillOpacity'] = 0.4;
+                }
+                if (!this.root)
+                    return Bullet.new({}, { sprite: Circle.new({}, {}) });
+                const circle = Circle.new(this.root, bulletConfig);
+                return Bullet.new(this.root, {
+                    sprite: circle
+                });
+            });
+            series.data.setAll(parsedData);
+            series.appear(1000);
+        });
+        // Only show legend in modal view (when showAxisLabels is true)
+        if (this.showAxisLabels()) {
+            const legend = this.chartElement.children.push(Legend.new(this.root, {
+                centerX: percent(50),
+                x: percent(50)
+            }));
+            legend.labels.template.setAll({
+                fontSize: 12,
+                fill: color(0x94a3b8)
+            });
+            // Reverse the series order in the legend so 2025 series appear on the right
+            const reversedSeries = Array.from(this.chartElement.series.values).reverse();
+            legend.data.setAll(reversedSeries);
+        }
+        this.chartElement.appear(1000, 100);
+    }
+    static { this.ɵfac = function LineChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LineChartComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["symphiq-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$r, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
+        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function LineChartComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1);
+            i0.ɵɵdomElement(1, "div", 2, 0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mini-mode", !ctx.showAxisLabels());
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("height", ctx.chartHeight());
+        } }, styles: [".chart-container[_ngcontent-%COMP%]{width:100%;padding:1rem}.chart-container.mini-mode[_ngcontent-%COMP%]{padding:.25rem}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineChartComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
+      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
+    </div>
+  `, styles: [".chart-container{width:100%;padding:1rem}.chart-container.mini-mode{padding:.25rem}\n"] }]
+    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], chartDiv: [{
+            type: ViewChild,
+            args: ['chartdiv', { static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LineChartComponent, { className: "LineChartComponent", filePath: "lib/components/funnel-analysis-dashboard/charts/line-chart.component.ts", lineNumber: 38 }); })();
+
+var lineChart_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LineChartComponent: LineChartComponent
+});
+
+const _forTrack0$i = ($index, $item) => $item.metric;
+function MetricReportModalComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDefinition()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 30);
+    i0.ɵɵelement(2, "path", 31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg", 32);
+    i0.ɵɵelement(6, "path", 33);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.definitionToggleClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("What is ", ctx_r1.metricTitle(), "?");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("rotate-180", ctx_r1.showDefinition());
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.definitionBoxClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (tmp_3_0 = ctx_r1.metricData()) == null ? null : tmp_3_0.description, " ");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-target-change-badge", 20);
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", ctx_r1.ytdChangePercentage())("metric", ((tmp_4_0 = ctx_r1.metricData()) == null ? null : tmp_4_0.metric) || "")("priorYear", ctx_r1.priorYear())("isCompact", true);
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 19);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 9);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_5_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r1.currentYear(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.pacingInfo().projectedValue, ((tmp_5_0 = ctx_r1.metricData()) == null ? null : tmp_5_0.metric) || "", false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_54_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 22)(3, "p", 25);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 35)(6, "div", 36)(7, "span");
+    i0.ɵɵtext(8, "Progress to Target");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 37);
+    i0.ɵɵelement(12, "div", 38);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", true)("isCompact", false)("showEmphasizedPercentage", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapAnalysisText(), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.formatPercentage(ctx_r1.progressToTarget(), 1));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.progressBarBgClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r1.Math.min(ctx_r1.progressToTarget(), 100), "%");
+    i0.ɵɵproperty("ngClass", ctx_r1.progressBarFillClasses());
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 54);
+    i0.ɵɵelement(2, "path", 31);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const metric_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r4.description, ctx_r1.getMetricTitle(metric_r4)));
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 44)(1, "td", 45)(2, "div", 46)(3, "span", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Conditional_5_Template, 3, 2, "button", 48);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "td", 49)(7, "span", 50);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "td", 49)(10, "div", 51)(11, "span", 47);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(13, "svg", 52);
+    i0.ɵɵelement(14, "path", 53);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const metric_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.tableRowClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r4));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(metric_r4.description ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r4.targetValue, metric_r4.metric, false), " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r4.percentageIncrease), 1), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("d", metric_r4.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
+    i0.ɵɵtext(2, " Contributing Metrics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 39)(4, "table", 40)(5, "thead")(6, "tr", 41)(7, "th", 42);
+    i0.ɵɵtext(8, "Metric");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "th", 43);
+    i0.ɵɵtext(10, "Target");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "th", 43);
+    i0.ɵɵtext(12, "Improve by");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "tbody");
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template, 15, 7, "tr", 44, _forTrack0$i);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngClass", ctx_r1.tableHeaderClasses());
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r1.contributingMetrics());
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "h4", 17);
+    i0.ɵɵtext(2, " Pace ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 55);
+    i0.ɵɵelement(4, "symphiq-line-chart", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 57);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.chartDescriptionText(), " ");
+} }
+function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵelement(2, "div", 3);
+    i0.ɵɵelementStart(3, "span", 4);
+    i0.ɵɵtext(4, "\u200B");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 5);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "h3", 9);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_11_Template, 7, 4, "button", 10);
+    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 2, 2, "div", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 12);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(14, "svg", 13);
+    i0.ɵɵelement(15, "path", 14);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(16, "div", 15);
+    i0.ɵɵelement(17, "symphiq-tooltip-container");
+    i0.ɵɵelementStart(18, "div", 16)(19, "h4", 17);
+    i0.ɵɵtext(20, " At a Glance ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "p", 19);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "p", 9);
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(27, MetricReportModalComponent_Conditional_0_Conditional_27_Template, 1, 5, "symphiq-target-change-badge", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "div")(29, "p", 19);
+    i0.ɵɵtext(30);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "p", 21);
+    i0.ɵɵtext(32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(33, "div")(34, "p", 19);
+    i0.ɵɵtext(35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "p", 21);
+    i0.ɵɵtext(37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(38, MetricReportModalComponent_Conditional_0_Conditional_38_Template, 6, 10, "div");
+    i0.ɵɵelementStart(39, "div")(40, "p", 19);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "p", 21);
+    i0.ɵɵtext(43);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(44, "div", 16)(45, "h4", 17);
+    i0.ɵɵtext(46, " Target Analysis ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(47, "div", 22)(48, "p", 23);
+    i0.ɵɵtext(49, " Your Target ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "p", 24);
+    i0.ɵɵtext(51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "p", 25);
+    i0.ɵɵtext(53);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(54, MetricReportModalComponent_Conditional_0_Conditional_54_Template, 13, 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(55, MetricReportModalComponent_Conditional_0_Conditional_55_Template, 16, 3, "div", 16);
+    i0.ɵɵconditionalCreate(56, MetricReportModalComponent_Conditional_0_Conditional_56_Template, 7, 8, "div", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(57, "div", 27)(58, "button", 28);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵtext(59, " Close ");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    let tmp_8_0;
+    let tmp_9_0;
+    let tmp_17_0;
+    let tmp_22_0;
+    let tmp_26_0;
+    let tmp_31_0;
+    let tmp_36_0;
+    let tmp_38_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.metricTitle(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(((tmp_8_0 = ctx_r1.metricData()) == null ? null : tmp_8_0.description) ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showDefinition() && ((tmp_9_0 = ctx_r1.metricData()) == null ? null : tmp_9_0.description) ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Year to Date (", ctx_r1.ytdDateRangeWithYear(), ") ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((tmp_17_0 = ctx_r1.metricData()) == null ? null : tmp_17_0.metric) || ""), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 27 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Same Period Last Year (", ctx_r1.priorYearDateRange(), ") ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.samePeriodLastYearValue(), ((tmp_22_0 = ctx_r1.metricData()) == null ? null : tmp_22_0.metric) || ""), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Full ", ctx_r1.priorYear(), " Actual ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_26_0 = ctx_r1.metricData()) == null ? null : tmp_26_0.currentValue) || 0, ((tmp_26_0 = ctx_r1.metricData()) == null ? null : tmp_26_0.metric) || ""), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 38 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Target ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.targetValue) || 0, ((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.metric) || "", false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.targetValue) || 0, ((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.metric) || "", false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.percentageIncrease) || 0), 1), " ", (((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.currentValue) || 0, ((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.metric) || ""), ". ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 54 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.contributingMetrics().length > 0 ? 55 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.pacingChartData() ? 56 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.closeFooterButtonClasses());
+} }
+class MetricReportModalComponent {
+    constructor() {
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.metricEnum = input('', ...(ngDevMode ? [{ debugName: "metricEnum" }] : []));
+        this.metricData = input(undefined, ...(ngDevMode ? [{ debugName: "metricData" }] : []));
+        this.contributingMetrics = input([], ...(ngDevMode ? [{ debugName: "contributingMetrics" }] : []));
+        this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.closed = output();
+        this.showDefinition = signal(false, ...(ngDevMode ? [{ debugName: "showDefinition" }] : []));
+        this.Math = Math;
+        this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
+        this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
+        this.metricTitle = computed(() => {
+            const metric = this.metricData();
+            if (!metric)
+                return '';
+            return metric.metric
+                .split('_')
+                .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+                .join(' ');
+        }, ...(ngDevMode ? [{ debugName: "metricTitle" }] : []));
+        this.pacingInfo = computed(() => {
+            const metric = this.metricData();
+            const pacingResponse = this.pacingMetrics();
+            if (!metric || !pacingResponse)
+                return null;
+            const projectedValue = extractProjectedValue(pacingResponse, metric.metric);
+            if (projectedValue === null)
+                return null;
+            const increaseBad = MetricEnumUtil.increaseBad(metric.metric);
+            return calculateMetricPacing(projectedValue, metric.targetValue, increaseBad);
+        }, ...(ngDevMode ? [{ debugName: "pacingInfo" }] : []));
+        this.ytdValue = computed(() => {
+            const pacingResponse = this.pacingMetrics();
+            const metric = this.metricData();
+            if (!pacingResponse || !metric)
+                return 0;
+            const resp = pacingResponse;
+            const soFarMetric = resp.soFarMetricValues?.find((m) => m.metric === metric.metric);
+            if (soFarMetric?.value) {
+                return parseFloat(soFarMetric.value);
+            }
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "ytdValue" }] : []));
+        this.samePeriodLastYearValue = computed(() => {
+            const pacingResponse = this.pacingMetrics();
+            const metric = this.metricData();
+            if (!pacingResponse || !metric)
+                return 0;
+            const resp = pacingResponse;
+            const lastYearMetric = resp.lastYearMetricValuesMonthly?.find((m) => m.metric === metric.metric);
+            if (lastYearMetric?.value) {
+                return parseFloat(lastYearMetric.value);
+            }
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "samePeriodLastYearValue" }] : []));
+        this.ytdChangePercentage = computed(() => {
+            const current = this.ytdValue();
+            const lastYear = this.samePeriodLastYearValue();
+            if (lastYear === 0)
+                return null;
+            return ((current - lastYear) / lastYear) * 100;
+        }, ...(ngDevMode ? [{ debugName: "ytdChangePercentage" }] : []));
+        this.ytdDateRange = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const startMonth = 'Jan';
+            const startDay = 1;
+            const endMonth = yesterday.toLocaleDateString('en-US', { month: 'short' });
+            const endDay = yesterday.getDate();
+            return `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
+        }, ...(ngDevMode ? [{ debugName: "ytdDateRange" }] : []));
+        this.ytdDateRangeWithYear = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const year = this.currentYear();
+            return `Jan 1, ${year} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${year}`;
+        }, ...(ngDevMode ? [{ debugName: "ytdDateRangeWithYear" }] : []));
+        this.priorYearDateRange = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const priorYear = this.priorYear();
+            return `Jan 1, ${priorYear} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
+        }, ...(ngDevMode ? [{ debugName: "priorYearDateRange" }] : []));
+        this.gapAnalysisText = computed(() => {
+            const pacing = this.pacingInfo();
+            const metric = this.metricData();
+            if (!pacing || !metric)
+                return '';
+            const gap = Math.abs(pacing.pacingPercentage);
+            const gapFormatted = formatPercentage(gap, 1);
+            if (pacing.status === 'ahead') {
+                return `Based on current pacing, you are on track to exceed your target by ${gapFormatted}.`;
+            }
+            else if (pacing.status === 'on-pace') {
+                return `Based on current pacing, you are on track to meet your target.`;
+            }
+            else {
+                return `Based on current pacing, you are pacing to fall short of your target by ${gapFormatted}.`;
+            }
+        }, ...(ngDevMode ? [{ debugName: "gapAnalysisText" }] : []));
+        this.progressToTarget = computed(() => {
+            const pacing = this.pacingInfo();
+            const metric = this.metricData();
+            if (!pacing || !metric)
+                return 0;
+            const target = metric.targetValue;
+            const projected = pacing.projectedValue;
+            if (target === 0)
+                return 0;
+            return (projected / target) * 100;
+        }, ...(ngDevMode ? [{ debugName: "progressToTarget" }] : []));
+        this.chartDescriptionText = computed(() => {
+            const metric = this.metricTitle();
+            const currentYear = this.currentYear();
+            const priorYear = this.priorYear();
+            return `This chart shows the ${metric} performance trend for ${currentYear} (solid line), compared to ${priorYear} (dashed line), with the target projection (dotted line) for the remainder of the year.`;
+        }, ...(ngDevMode ? [{ debugName: "chartDescriptionText" }] : []));
+        this.pacingChartData = computed(() => {
+            const metric = this.metricData();
+            if (!metric)
+                return null;
+            return {
+                chartType: 'LINE',
+                title: 'Pace',
+                description: '',
+                lineChartData: {
+                    series: [
+                        {
+                            name: `${this.currentYear()} Actual`,
+                            data: this.generateMockCurrentYearData()
+                        },
+                        {
+                            name: `${this.priorYear()} Comparison`,
+                            data: this.generateMockLastYearData()
+                        },
+                        {
+                            name: 'Target Projection',
+                            data: this.generateMockTargetData()
+                        }
+                    ]
+                }
+            };
+        }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
+    }
+    generateMockCurrentYearData() {
+        const baseValue = this.metricData()?.currentValue || 1000;
+        const data = [];
+        const now = new Date();
+        const currentMonth = now.getMonth();
+        for (let i = 0; i <= currentMonth; i++) {
+            const date = new Date(this.currentYear(), i, 15);
+            const variance = (Math.random() - 0.5) * 0.1;
+            const value = baseValue * (1 + variance) * ((i + 1) / 12);
+            data.push({
+                date: date.toISOString(),
+                value: Math.round(value * 100) / 100
+            });
+        }
+        return data;
+    }
+    generateMockLastYearData() {
+        const baseValue = this.metricData()?.currentValue || 1000;
+        const data = [];
+        for (let i = 0; i < 12; i++) {
+            const date = new Date(this.priorYear(), i, 15);
+            const variance = (Math.random() - 0.5) * 0.08;
+            const value = baseValue * (1 + variance) * ((i + 1) / 12);
+            data.push({
+                date: date.toISOString(),
+                value: Math.round(value * 100) / 100
+            });
+        }
+        return data;
+    }
+    generateMockTargetData() {
+        const targetValue = this.metricData()?.targetValue || 1200;
+        const data = [];
+        const now = new Date();
+        const currentMonth = now.getMonth();
+        for (let i = currentMonth; i < 12; i++) {
+            const date = new Date(this.currentYear(), i, 15);
+            const value = targetValue * ((i + 1) / 12);
+            data.push({
+                date: date.toISOString(),
+                value: Math.round(value * 100) / 100
+            });
+        }
+        return data;
+    }
+    formatMetricValue(value, metric, fromUiData = true) {
+        if (metric.includes('REVENUE')) {
+            return formatCurrency(value);
+        }
+        const numberType = MetricEnumUtil.numberType(metric);
+        if (numberType === NumberTypeEnum.PERCENTAGE) {
+            const displayValue = fromUiData ? value * 100 : value;
+            return formatPercentage(displayValue, 2);
+        }
+        return formatNumber(value);
+    }
+    getMetricTitle(metric) {
+        return metric.metric
+            .split('_')
+            .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+            .join(' ');
+    }
+    formatPercentage(value, decimals) {
+        return formatPercentage(value, decimals);
+    }
+    getMarkdownTooltipContent(markdown, title) {
+        return { title, markdown };
+    }
+    toggleDefinition() {
+        this.showDefinition.update(v => !v);
+    }
+    close() {
+        this.closed.emit();
+    }
+    isLightMode() {
+        return this.viewMode() === ViewModeEnum.LIGHT;
+    }
+    backdropClasses() {
+        return this.isLightMode() ? 'bg-slate-900/60' : 'bg-slate-950/80';
+    }
+    modalContainerClasses() {
+        return this.isLightMode()
+            ? 'bg-white/90 border-slate-200/50'
+            : 'bg-slate-800/90 border-slate-700/50';
+    }
+    headerClasses() {
+        return this.isLightMode()
+            ? 'bg-white/50 border-slate-200/50'
+            : 'bg-slate-800/50 border-slate-700/50';
+    }
+    titleClasses() {
+        return this.isLightMode() ? 'text-slate-900' : 'text-white';
+    }
+    definitionToggleClasses() {
+        return this.isLightMode()
+            ? 'text-blue-600 hover:text-blue-700'
+            : 'text-blue-400 hover:text-blue-300';
+    }
+    definitionBoxClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-50/50 border-blue-200/50 text-slate-700'
+            : 'bg-blue-900/20 border-blue-700/30 text-slate-300';
+    }
+    closeButtonClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
+            : 'text-slate-400 hover:text-white hover:bg-slate-700';
+    }
+    contentClasses() {
+        return this.isLightMode() ? 'bg-white/30' : 'bg-slate-800/30';
+    }
+    sectionCardClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-br from-slate-50 via-white to-slate-50 border border-slate-200'
+            : 'bg-gradient-to-br from-slate-800/40 via-slate-800/20 to-slate-800/40 border border-slate-700/50';
+    }
+    sectionTitleClasses() {
+        return this.isLightMode() ? 'text-slate-600' : 'text-slate-400';
+    }
+    labelClasses() {
+        return this.isLightMode() ? 'text-slate-500' : 'text-slate-400';
+    }
+    valueClasses() {
+        return this.isLightMode() ? 'text-slate-900' : 'text-white';
+    }
+    targetValueClasses() {
+        return this.isLightMode() ? 'text-purple-700' : 'text-purple-300';
+    }
+    projectedValueClasses() {
+        return this.isLightMode() ? 'text-amber-700' : 'text-amber-300';
+    }
+    descriptionClasses() {
+        return this.isLightMode() ? 'text-slate-600' : 'text-slate-300';
+    }
+    progressBarBgClasses() {
+        return this.isLightMode() ? 'bg-slate-200' : 'bg-slate-700';
+    }
+    progressBarFillClasses() {
+        const pacing = this.pacingInfo();
+        if (!pacing)
+            return 'bg-blue-500';
+        if (pacing.status === 'ahead') {
+            return this.isLightMode()
+                ? 'bg-gradient-to-r from-emerald-500 to-emerald-600'
+                : 'bg-gradient-to-r from-emerald-400 to-emerald-500';
+        }
+        else if (pacing.status === 'on-pace') {
+            return this.isLightMode()
+                ? 'bg-gradient-to-r from-amber-500 to-amber-600'
+                : 'bg-gradient-to-r from-amber-400 to-amber-500';
+        }
+        else {
+            return this.isLightMode()
+                ? 'bg-gradient-to-r from-red-500 to-red-600'
+                : 'bg-gradient-to-r from-red-400 to-red-500';
+        }
+    }
+    tableHeaderClasses() {
+        return this.isLightMode() ? 'text-slate-700 border-slate-200' : 'text-slate-300 border-slate-700';
+    }
+    tableRowClasses() {
+        return this.isLightMode()
+            ? 'hover:bg-slate-50 border-slate-200'
+            : 'hover:bg-slate-700/30 border-slate-700/50';
+    }
+    infoIconClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
+            : 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300';
+    }
+    footerClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-50 border-slate-200'
+            : 'bg-slate-900/50 border-slate-700';
+    }
+    closeFooterButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-200 hover:bg-slate-300 text-slate-900'
+            : 'bg-slate-700 hover:bg-slate-600 text-white';
+    }
+    static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "ngClass"], [1, "mt-3", "p-4", "rounded-lg", "border", "text-sm", "leading-relaxed", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 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", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [1, "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", 3, "ngClass"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 60, 46, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
+            TargetChangeBadgeComponent,
+            TooltipDirective,
+            TooltipContainerComponent,
+            LineChartComponent], encapsulation: 2, data: { animation: [
+                trigger('fadeIn', [
+                    transition(':enter', [
+                        style({ opacity: 0 }),
+                        animate('200ms ease-out', style({ opacity: 1 }))
+                    ])
+                ]),
+                trigger('slideUpFade', [
+                    transition(':enter', [
+                        style({ opacity: 0, transform: 'translateY(30px) scale(0.95)' }),
+                        animate('400ms 50ms cubic-bezier(0.16, 1, 0.3, 1)', style({ opacity: 1, transform: 'translateY(0) scale(1)' }))
+                    ])
+                ])
+            ] }, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetricReportModalComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-metric-report-modal',
+                standalone: true,
+                imports: [
+                    CommonModule,
+                    PacingStatusBadgeComponent,
+                    TargetChangeBadgeComponent,
+                    TooltipDirective,
+                    TooltipContainerComponent,
+                    LineChartComponent
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                animations: [
+                    trigger('fadeIn', [
+                        transition(':enter', [
+                            style({ opacity: 0 }),
+                            animate('200ms ease-out', style({ opacity: 1 }))
+                        ])
+                    ]),
+                    trigger('slideUpFade', [
+                        transition(':enter', [
+                            style({ opacity: 0, transform: 'translateY(30px) scale(0.95)' }),
+                            animate('400ms 50ms cubic-bezier(0.16, 1, 0.3, 1)', style({ opacity: 1, transform: 'translateY(0) scale(1)' }))
+                        ])
+                    ])
+                ],
+                template: `
+    @if (isOpen()) {
+      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            [ngClass]="backdropClasses()"
+            class="fixed inset-0 backdrop-blur-md"
+            aria-hidden="true"
+            @fadeIn>
+          </div>
+
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <div
+            (click)="$event.stopPropagation()"
+            [ngClass]="modalContainerClasses()"
+            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
+            @slideUpFade>
+
+            <!-- Header -->
+            <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
+              <div class="flex items-start justify-between">
+                <div class="flex-1">
+                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-2">
+                    {{ metricTitle() }}
+                  </h3>
+                  @if (metricData()?.description) {
+                    <button
+                      type="button"
+                      (click)="toggleDefinition()"
+                      [ngClass]="definitionToggleClasses()"
+                      class="inline-flex items-center gap-2 text-sm font-medium transition-colors">
+                      <svg class="w-4 h-4" 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>
+                      <span>What is {{ metricTitle() }}?</span>
+                      <svg
+                        [class.rotate-180]="showDefinition()"
+                        class="w-4 h-4 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                  }
+                  @if (showDefinition() && metricData()?.description) {
+                    <div [ngClass]="definitionBoxClasses()" class="mt-3 p-4 rounded-lg border text-sm leading-relaxed">
+                      {{ metricData()?.description }}
+                    </div>
+                  }
+                </div>
+                <button
+                  (click)="close()"
+                  [ngClass]="closeButtonClasses()"
+                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Content -->
+            <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
+              <symphiq-tooltip-container />
+
+              <!-- At a Glance Summary -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  At a Glance
+                </h4>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  <!-- YTD Value -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Year to Date ({{ ytdDateRangeWithYear() }})
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
+                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
+                    </p>
+                    @if (ytdChangePercentage() !== null) {
+                      <symphiq-target-change-badge
+                        [viewMode]="viewMode()"
+                        [percentageChange]="ytdChangePercentage()!"
+                        [metric]="metricData()?.metric || ''"
+                        [priorYear]="priorYear()"
+                        [isCompact]="true"
+                      />
+                    }
+                  </div>
+
+                  <!-- Same Period Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Same Period Last Year ({{ priorYearDateRange() }})
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Full Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Full {{ priorYear() }} Actual
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Current Pace -->
+                  @if (pacingInfo()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Pace for {{ currentYear() }}
+                      </p>
+                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
+                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
+                      </p>
+                      <symphiq-pacing-status-badge
+                        [viewMode]="viewMode()"
+                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                        [status]="pacingInfo()!.status"
+                        [showAsFullText]="false"
+                        [isCompact]="true"
+                        [showEmphasizedPercentage]="true"
+                      />
+                    </div>
+                  }
+
+                  <!-- Current Target -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      {{ currentYear() }} Target
+                    </p>
+                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Target Analysis -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  Target Analysis
+                </h4>
+
+                <div class="mb-4">
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Your Target
+                  </p>
+                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
+                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
+                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
+                    from your {{ priorYear() }} actual of
+                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
+                  </p>
+                </div>
+
+                @if (pacingInfo()) {
+                  <div class="mb-4">
+                    <symphiq-pacing-status-badge
+                      [viewMode]="viewMode()"
+                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                      [status]="pacingInfo()!.status"
+                      [showAsFullText]="true"
+                      [isCompact]="false"
+                      [showEmphasizedPercentage]="true"
+                    />
+                  </div>
+
+                  <div class="mb-4">
+                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                      {{ gapAnalysisText() }}
+                    </p>
+                  </div>
+
+                  <!-- Progress Bar -->
+                  <div class="space-y-2">
+                    <div class="flex justify-between text-xs" [ngClass]="labelClasses()">
+                      <span>Progress to Target</span>
+                      <span>{{ formatPercentage(progressToTarget(), 1) }}</span>
+                    </div>
+                    <div [ngClass]="progressBarBgClasses()" class="h-3 rounded-full overflow-hidden">
+                      <div
+                        [ngClass]="progressBarFillClasses()"
+                        [style.width.%]="Math.min(progressToTarget(), 100)"
+                        class="h-full transition-all duration-500">
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+
+              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
+              @if (contributingMetrics().length > 0) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Contributing Metrics
+                  </h4>
+                  <div class="overflow-x-auto">
+                    <table class="w-full">
+                      <thead>
+                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
+                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (metric of contributingMetrics(); track metric.metric) {
+                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
+                            <td class="py-3 px-4">
+                              <div class="flex items-center gap-2">
+                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
+                                @if (metric.description) {
+                                  <button
+                                    type="button"
+                                    [ngClass]="infoIconClasses()"
+                                    class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                                    [libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
+                                    tooltipType="markdown"
+                                    tooltipPosition="right">
+                                    <svg class="w-3 h-3" 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>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
+                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
+                              </span>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <div class="flex items-center justify-end gap-2">
+                                <span class="text-sm font-medium">
+                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
+                                </span>
+                                <svg
+                                  class="w-4 h-4 text-emerald-500"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24">
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
+                                </svg>
+                              </div>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+
+              <!-- Pacing Chart -->
+              @if (pacingChartData()) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Pace
+                  </h4>
+                  <div class="min-h-[400px]">
+                    <symphiq-line-chart
+                      [chart]="pacingChartData()!"
+                      [showAxisLabels]="true"
+                      [viewMode]="viewMode()"
+                      [currencySymbol]="'$'"
+                    />
+                  </div>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
+                    {{ chartDescriptionText() }}
+                  </p>
+                </div>
+              }
+            </div>
+
+            <!-- Footer -->
+            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
+              <button
+                (click)="close()"
+                [ngClass]="closeFooterButtonClasses()"
+                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 344 }); })();
+
+const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
 function InitialTargetSettingComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -56569,8 +58081,8 @@ function InitialTargetSettingComponent_Conditional_6_Template(rf, ctx) { if (rf
 } }
 function InitialTargetSettingComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 33);
-    i0.ɵɵelement(1, "path", 34);
+    i0.ɵɵelementStart(0, "svg", 34);
+    i0.ɵɵelement(1, "path", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56582,17 +58094,17 @@ function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 12);
-    i0.ɵɵelement(2, "path", 35);
+    i0.ɵɵelement(2, "path", 36);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "div")(4, "div", 36)(5, "p", 14);
+    i0.ɵɵelementStart(3, "div")(4, "div", 37)(5, "p", 14);
     i0.ɵɵtext(6, " Current Pace Projection ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 37);
+    i0.ɵɵelementStart(7, "button", 38);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_21_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(8, "svg", 38);
-    i0.ɵɵelement(9, "path", 39);
+    i0.ɵɵelementStart(8, "svg", 39);
+    i0.ɵɵelement(9, "path", 40);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(10, "p", 15);
@@ -56613,10 +58125,10 @@ function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf
 } }
 function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "span", 44);
+    i0.ɵɵelementStart(0, "div", 43)(1, "span", 45);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 45, 0);
+    i0.ɵɵelementStart(3, "input", 46, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
@@ -56630,11 +58142,11 @@ function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "input", 46, 1);
+    i0.ɵɵelementStart(0, "div", 43)(1, "input", 47, 1);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 47);
+    i0.ɵɵelementStart(3, "span", 48);
     i0.ɵɵtext(4, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56647,7 +58159,7 @@ function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_25_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "button", 48);
+    i0.ɵɵelementStart(0, "div", 44)(1, "button", 49);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
     i0.ɵɵtext(2, " Cancel ");
     i0.ɵɵelementEnd()();
@@ -56658,16 +58170,16 @@ function InitialTargetSettingComponent_Conditional_25_Conditional_7_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "button", 41);
+    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
     i0.ɵɵtext(2, " Absolute Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 41);
+    i0.ɵɵelementStart(3, "button", 42);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
     i0.ɵɵtext(4, " % Increase ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_25_Conditional_5_Template, 5, 3, "div", 42)(6, InitialTargetSettingComponent_Conditional_25_Conditional_6_Template, 5, 3, "div", 42);
-    i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_25_Conditional_7_Template, 3, 1, "div", 43);
+    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_25_Conditional_5_Template, 5, 3, "div", 43)(6, InitialTargetSettingComponent_Conditional_25_Conditional_6_Template, 5, 3, "div", 43);
+    i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_25_Conditional_7_Template, 3, 1, "div", 44);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -56686,7 +58198,7 @@ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
 } }
 function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "p", 49);
+    i0.ɵɵelementStart(0, "div", 24)(1, "p", 50);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56708,7 +58220,7 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵelementStart(0, "button", 64);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.handleAdjustTarget(); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(1, " Adjust Revenue Target ");
     i0.ɵɵelementEnd();
@@ -56754,30 +58266,30 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional
 } }
 function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
-    i0.ɵɵelement(2, "div", 58);
-    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
+    i0.ɵɵelement(2, "div", 59);
+    i0.ɵɵelementStart(3, "span", 60);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 58);
+    i0.ɵɵelement(5, "div", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 60)(7, "div")(8, "p", 61);
+    i0.ɵɵelementStart(6, "div", 61)(7, "div")(8, "p", 62);
     i0.ɵɵtext(9, " Gap to Close ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 62);
+    i0.ɵɵelementStart(10, "p", 63);
     i0.ɵɵconditionalCreate(11, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_11_Template, 1, 1)(12, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_12_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "div", 64)(15, "p", 14);
+    i0.ɵɵelementStart(13, "div")(14, "div", 65)(15, "p", 14);
     i0.ɵɵtext(16, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 37);
+    i0.ɵɵelementStart(17, "button", 38);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(18, "svg", 38);
-    i0.ɵɵelement(19, "path", 39);
+    i0.ɵɵelementStart(18, "svg", 39);
+    i0.ɵɵelement(19, "path", 40);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(20, "p", 62);
+    i0.ɵɵelementStart(20, "p", 63);
     i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_21_Template, 1, 2)(22, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_22_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -56806,34 +58318,34 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf
     i0.ɵɵconditional(ctx_r0.isTargetValid() ? 21 : 22);
 } }
 function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50)(1, "div")(2, "div", 51)(3, "div")(4, "p", 14);
+    i0.ɵɵelementStart(0, "div", 51)(1, "div")(2, "div", 52)(3, "div")(4, "p", 14);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 52);
+    i0.ɵɵelementStart(6, "p", 53);
     i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_36_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_36_Conditional_8_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 53);
+    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 54)(11, "div", 55)(12, "div", 56)(13, "div", 57);
-    i0.ɵɵelement(14, "div", 58);
-    i0.ɵɵelementStart(15, "span", 59);
+    i0.ɵɵelementStart(10, "div", 55)(11, "div", 56)(12, "div", 57)(13, "div", 58);
+    i0.ɵɵelement(14, "div", 59);
+    i0.ɵɵelementStart(15, "span", 60);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(17, "div", 58);
+    i0.ɵɵelement(17, "div", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 60)(19, "div")(20, "p", 61);
+    i0.ɵɵelementStart(18, "div", 61)(19, "div")(20, "p", 62);
     i0.ɵɵtext(21, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "p", 62);
+    i0.ɵɵelementStart(22, "p", 63);
     i0.ɵɵconditionalCreate(23, InitialTargetSettingComponent_Conditional_36_Conditional_23_Template, 1, 1)(24, InitialTargetSettingComponent_Conditional_36_Conditional_24_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div")(26, "p", 61);
+    i0.ɵɵelementStart(25, "div")(26, "p", 62);
     i0.ɵɵtext(27, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "p", 62);
+    i0.ɵɵelementStart(28, "p", 63);
     i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 1)(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 23, 12, "div", 56);
+    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 23, 12, "div", 57);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56882,7 +58394,7 @@ function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf,
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
 } }
 function InitialTargetSettingComponent_Conditional_37_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "p", 49);
+    i0.ɵɵelementStart(0, "div", 24)(1, "p", 50);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56919,14 +58431,16 @@ function InitialTargetSettingComponent_Conditional_40_Conditional_6_Template(rf,
     i0.ɵɵtextInterpolate1(" To achieve your revenue target of ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), ", the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth. ");
 } }
 function InitialTargetSettingComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 65)(2, "h2", 66);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 66)(2, "h2", 67);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 49);
+    i0.ɵɵelementStart(4, "p", 50);
     i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_40_Conditional_5_Template, 1, 1)(6, InitialTargetSettingComponent_Conditional_40_Conditional_6_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(7, "symphiq-funnel-metrics-visualization", 67);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "symphiq-funnel-metrics-visualization", 68);
+    i0.ɵɵlistener("viewStageReport", function InitialTargetSettingComponent_Conditional_40_Template_symphiq_funnel_metrics_visualization_viewStageReport_7_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openMetricReport($event)); })("viewRelatedMetricReport", function InitialTargetSettingComponent_Conditional_40_Template_symphiq_funnel_metrics_visualization_viewRelatedMetricReport_7_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openMetricReport($event)); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.sectionCardClasses());
@@ -56959,6 +58473,23 @@ class InitialTargetSettingComponent {
         this.storedResponse = signal(null, ...(ngDevMode ? [{ debugName: "storedResponse" }] : []));
         this.submittedAbsoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "submittedAbsoluteInput" }] : []));
         this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
+        this.isMetricReportOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMetricReportOpen" }] : []));
+        this.selectedMetricEnum = signal('', ...(ngDevMode ? [{ debugName: "selectedMetricEnum" }] : []));
+        this.selectedMetricData = computed(() => {
+            const metricEnum = this.selectedMetricEnum();
+            const calcs = this.displayedMetricCalculations();
+            return calcs.find(c => c.metric === metricEnum);
+        }, ...(ngDevMode ? [{ debugName: "selectedMetricData" }] : []));
+        this.selectedContributingMetrics = computed(() => {
+            const metricEnum = this.selectedMetricEnum();
+            const calcs = this.displayedMetricCalculations();
+            const selectedMetric = calcs.find(c => c.metric === metricEnum);
+            if (!selectedMetric || !selectedMetric.isFunnelStage) {
+                return [];
+            }
+            return calcs.filter(c => !c.isFunnelStage && c.funnelMetric === metricEnum)
+                .sort((a, b) => (a.relatedInd ?? 0) - (b.relatedInd ?? 0));
+        }, ...(ngDevMode ? [{ debugName: "selectedContributingMetrics" }] : []));
         this.animatedIncreaseAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedIncreaseAmount" }] : []));
         this.animatedPercentageGrowth = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentageGrowth" }] : []));
         this.animatedGapAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedGapAmount" }] : []));
@@ -57466,15 +58997,23 @@ class InitialTargetSettingComponent {
             ? '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';
     }
+    openMetricReport(metricEnum) {
+        this.selectedMetricEnum.set(metricEnum);
+        this.isMetricReportOpen.set(true);
+    }
+    closeMetricReport() {
+        this.isMetricReportOpen.set(false);
+        this.selectedMetricEnum.set('');
+    }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
     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);
+            i0.ɵɵviewQuery(_c0$q, 5);
             i0.ɵɵviewQuery(_c1$b, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 42, vars: 44, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "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, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [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, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [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) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 50, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "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, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "isOpen"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [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, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -57519,6 +59058,9 @@ class InitialTargetSettingComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(41, "symphiq-sticky-submit-bar", 32);
             i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_41_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_41_listener() { return ctx.handleCancel(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "symphiq-metric-report-modal", 33);
+            i0.ɵɵlistener("closed", function InitialTargetSettingComponent_Template_symphiq_metric_report_modal_closed_42_listener() { return ctx.closeMetricReport(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -57570,11 +59112,14 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditional(ctx.showMetricsVisualization() ? 40 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("isOpen", ctx.isMetricReportOpen());
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
             StickySubmitBarComponent,
             AreaChartComponent,
             TooltipDirective,
-            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}"], changeDetection: 0 }); }
+            TooltipContainerComponent,
+            MetricReportModalComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
@@ -57585,378 +59130,392 @@ class InitialTargetSettingComponent {
                     StickySubmitBarComponent,
                     AreaChartComponent,
                     TooltipDirective,
-                    TooltipContainerComponent
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="space-y-8 pb-32">
-      <symphiq-tooltip-container />
-      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
-           [class.cursor-pointer]="calculationState() === 'results'"
-           [class.lg:sticky]="calculationState() === 'results'"
-           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
-           [class.z-30]="calculationState() === 'results'"
-           (click)="onCardClick()">
-        <div class="flex items-center justify-between mb-6">
-          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
-            @if (calculationState() === 'results') {
-              Your {{ currentYear() }} Revenue Target
-            } @else {
-              Calculate Your {{ currentYear() }} Revenue Target
-            }
-          </h2>
-          @if (calculationState() === 'results') {
-            <svg
-              class="w-6 h-6 chevron-rotate"
-              [class.chevron-rotate-expanded]="detailsExpanded()"
-              [ngClass]="chevronClasses()"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          }
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <div class="grid lg:grid-cols-2 gap-4">
-            <div class="flex flex-col gap-4">
-              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
-                <div class="flex flex-wrap gap-4 place-content-between">
-                  <div class="flex items-center gap-2">
-                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path 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"></path>
-                    </svg>
-                    <div>
-                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        {{ priorYear() }} Revenue
-                      </p>
-                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
-                        {{ formatCurrency(priorYearRevenue()) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0) {
-                    <div class="flex items-center gap-2">
-                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
-                      </svg>
-                      <div>
-                        <div class="flex items-center gap-1">
-                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                            Current Pace Projection
-                          </p>
-                          <button
-                            type="button"
-                            [ngClass]="infoIconClasses()"
-                            class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                            [libSymphiqTooltip]="currentPaceProjectionTooltip"
-                            tooltipType="markdown"
-                            tooltipPosition="top"
-                            (click)="$event.stopPropagation()">
-                            <svg class="w-3 h-3" 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>
-                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
-                          {{ formatCurrency(currentPaceProjection()) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
-                  <div class="form-area-content">
-                    <div class="space-y-6">
-                      @if (calculationState() !== 'results') {
-                      <div class="flex gap-2">
-                        <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
-                            #percentageInputRef
-                            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>
-                      }
-
-                      @if (hasStoredResponse()) {
-                        <div class="flex justify-end">
-                          <button
-                            (click)="handleCancel()"
-                            [ngClass]="cancelButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
-                            Cancel
-                          </button>
-                        </div>
-                      }
-                    }
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
-                <div class="chart-in-column-content">
-                  <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]="'$'"
-                          [height]="'108px'"
-                        />
-                      } @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>
-            </div>
-
-            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
-              <div class="calculated-card-content">
-                @if (calculatedRevenue() > 0) {
-                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
-                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
-                    <div>
-                      <div class="flex items-center justify-between">
-                        <div>
-                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                            {{ currentYear() }} Revenue Target
-                          </p>
-                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
-                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
-                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
-                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
-                            } @else {
-                              {{ formatCurrency(displayedTargetRevenue()) }}
-                            }
-                          </p>
-                        </div>
-                        @if (calculationState() === 'results' && targets() === undefined) {
-                          <button
-                            (click)="handleAdjustTarget(); $event.stopPropagation()"
-                            [ngClass]="secondaryButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
-                            Adjust Revenue Target
-                          </button>
-                        }
-                      </div>
-
-                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
-                        <div class="details-collapse-content">
-                          <div class="relative pt-6 mt-6">
-                            <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
-                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                              <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                                vs. {{ priorYear() }}
-                              </span>
-                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                            </div>
-                            <div class="grid grid-cols-2 gap-4 pt-2">
-                              <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">
-                                  @if (isTargetValid()) {
-                                    {{ formatCurrency(animatedIncreaseAmount()) }}
-                                  } @else {
-                                    --
-                                  }
-                                </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">
-                                  @if (isTargetValid()) {
-                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
-                                  } @else {
-                                    --
-                                  }
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-
-                          @if (currentPaceProjection() > 0) {
-                            <div class="relative pt-6 mt-6">
-                              <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
-                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                                <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                                  {{ currentYear() }} YTD Gap
-                                </span>
-                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                              </div>
-                              <div class="grid grid-cols-2 gap-4 pt-2">
-                                <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">
-                                    @if (isTargetValid()) {
-                                      {{ formatCurrency(animatedGapAmount()) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                                <div>
-                                  <div class="flex items-center gap-1 mb-1">
-                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                                      Additional Growth Needed
-                                    </p>
-                                    <button
-                                      type="button"
-                                      [ngClass]="infoIconClasses()"
-                                      class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                                      [libSymphiqTooltip]="additionalGrowthTooltip"
-                                      tooltipType="markdown"
-                                      tooltipPosition="top"
-                                      (click)="$event.stopPropagation()">
-                                      <svg class="w-3 h-3" 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>
-                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    @if (isTargetValid()) {
-                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                          }
-
-                          </div>
-                      </div>
-                    </div>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          @if (calculationState() !== 'results') {
-            <div class="w-full">
-              <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]="'$'"
-                    [height]="'320px'"
-                  />
-                } @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>
-
-      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
-        <div class="metrics-section-content">
-          @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">
-                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
-                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-                  } @else {
-                    To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, 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]="displayedMetricCalculations()"
-                [pacingMetrics]="pacingMetrics()"
-              />
-            </div>
-          }
-        </div>
-      </div>
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isCalculating()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="submitButtonText()"
-        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
-        (submitClick)="handleSubmitClick()"
-        (cancelClick)="handleCancel()"
-      />
-    </div>
+                    TooltipContainerComponent,
+                    MetricReportModalComponent
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="space-y-8 pb-32">
+      <symphiq-tooltip-container />
+      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
+           [class.cursor-pointer]="calculationState() === 'results'"
+           [class.lg:sticky]="calculationState() === 'results'"
+           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
+           [class.z-30]="calculationState() === 'results'"
+           (click)="onCardClick()">
+        <div class="flex items-center justify-between mb-6">
+          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
+            @if (calculationState() === 'results') {
+              Your {{ currentYear() }} Revenue Target
+            } @else {
+              Calculate Your {{ currentYear() }} Revenue Target
+            }
+          </h2>
+          @if (calculationState() === 'results') {
+            <svg
+              class="w-6 h-6 chevron-rotate"
+              [class.chevron-rotate-expanded]="detailsExpanded()"
+              [ngClass]="chevronClasses()"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          }
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <div class="grid lg:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-4">
+              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
+                <div class="flex flex-wrap gap-4 place-content-between">
+                  <div class="flex items-center gap-2">
+                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path 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"></path>
+                    </svg>
+                    <div>
+                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        {{ priorYear() }} Revenue
+                      </p>
+                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
+                        {{ formatCurrency(priorYearRevenue()) }}
+                      </p>
+                    </div>
+                  </div>
+                  @if (currentPaceProjection() > 0) {
+                    <div class="flex items-center gap-2">
+                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                      </svg>
+                      <div>
+                        <div class="flex items-center gap-1">
+                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            Current Pace Projection
+                          </p>
+                          <button
+                            type="button"
+                            [ngClass]="infoIconClasses()"
+                            class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
+                            [libSymphiqTooltip]="currentPaceProjectionTooltip"
+                            tooltipType="markdown"
+                            tooltipPosition="top"
+                            (click)="$event.stopPropagation()">
+                            <svg class="w-3 h-3" 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>
+                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
+                          {{ formatCurrency(currentPaceProjection()) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
+
+                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
+                  <div class="form-area-content">
+                    <div class="space-y-6">
+                      @if (calculationState() !== 'results') {
+                      <div class="flex gap-2">
+                        <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
+                            #percentageInputRef
+                            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>
+                      }
+
+                      @if (hasStoredResponse()) {
+                        <div class="flex justify-end">
+                          <button
+                            (click)="handleCancel()"
+                            [ngClass]="cancelButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
+                            Cancel
+                          </button>
+                        </div>
+                      }
+                    }
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
+                <div class="chart-in-column-content">
+                  <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]="'$'"
+                          [height]="'108px'"
+                        />
+                      } @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>
+            </div>
+
+            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
+              <div class="calculated-card-content">
+                @if (calculatedRevenue() > 0) {
+                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
+                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
+                    <div>
+                      <div class="flex items-center justify-between">
+                        <div>
+                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            {{ currentYear() }} Revenue Target
+                          </p>
+                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
+                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
+                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
+                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
+                            } @else {
+                              {{ formatCurrency(displayedTargetRevenue()) }}
+                            }
+                          </p>
+                        </div>
+                        @if (calculationState() === 'results' && targets() === undefined) {
+                          <button
+                            (click)="handleAdjustTarget(); $event.stopPropagation()"
+                            [ngClass]="secondaryButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
+                            Adjust Revenue Target
+                          </button>
+                        }
+                      </div>
+
+                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
+                        <div class="details-collapse-content">
+                          <div class="relative pt-6 mt-6">
+                            <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
+                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                              <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                                vs. {{ priorYear() }}
+                              </span>
+                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4 pt-2">
+                              <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">
+                                  @if (isTargetValid()) {
+                                    {{ formatCurrency(animatedIncreaseAmount()) }}
+                                  } @else {
+                                    --
+                                  }
+                                </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">
+                                  @if (isTargetValid()) {
+                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
+                                  } @else {
+                                    --
+                                  }
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+
+                          @if (currentPaceProjection() > 0) {
+                            <div class="relative pt-6 mt-6">
+                              <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
+                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                                <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                                  {{ currentYear() }} YTD Gap
+                                </span>
+                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                              </div>
+                              <div class="grid grid-cols-2 gap-4 pt-2">
+                                <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">
+                                    @if (isTargetValid()) {
+                                      {{ formatCurrency(animatedGapAmount()) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                                <div>
+                                  <div class="flex items-center gap-1 mb-1">
+                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                                      Additional Growth Needed
+                                    </p>
+                                    <button
+                                      type="button"
+                                      [ngClass]="infoIconClasses()"
+                                      class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
+                                      [libSymphiqTooltip]="additionalGrowthTooltip"
+                                      tooltipType="markdown"
+                                      tooltipPosition="top"
+                                      (click)="$event.stopPropagation()">
+                                      <svg class="w-3 h-3" 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>
+                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                    @if (isTargetValid()) {
+                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          }
+
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          @if (calculationState() !== 'results') {
+            <div class="w-full">
+              <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]="'$'"
+                    [height]="'320px'"
+                  />
+                } @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>
+
+      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
+        <div class="metrics-section-content">
+          @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">
+                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
+                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+                  } @else {
+                    To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, 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]="displayedMetricCalculations()"
+                [pacingMetrics]="pacingMetrics()"
+                (viewStageReport)="openMetricReport($event)"
+                (viewRelatedMetricReport)="openMetricReport($event)"
+              />
+            </div>
+          }
+        </div>
+      </div>
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isCalculating()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="submitButtonText()"
+        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
+        (submitClick)="handleSubmitClick()"
+        (cancelClick)="handleCancel()"
+      />
+
+      <!-- Metric Report Modal -->
+      <symphiq-metric-report-modal
+        [viewMode]="viewMode()"
+        [metricEnum]="selectedMetricEnum()"
+        [metricData]="selectedMetricData()"
+        [contributingMetrics]="selectedContributingMetrics()"
+        [pacingMetrics]="pacingMetrics()"
+        [isOpen]="isMetricReportOpen()"
+        (closed)="closeMetricReport()"
+      />
+    </div>
   `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
@@ -57965,7 +59524,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['percentageInputRef']
         }], 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 }] }], 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 }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 520 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 535 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);
@@ -58101,7 +59660,7 @@ class IndeterminateSpinnerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IndeterminateSpinnerComponent, { className: "IndeterminateSpinnerComponent", filePath: "lib/components/shared/indeterminate-spinner.component.ts", lineNumber: 94 }); })();
 
-const _c0$q = () => [];
+const _c0$p = () => [];
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 13);
@@ -58145,7 +59704,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$p))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -58950,7 +60509,7 @@ class HierarchyDisplayComponent {
     }], null, { hierarchyData: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchyData", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HierarchyDisplayComponent, { className: "HierarchyDisplayComponent", filePath: "lib/components/business-analysis-dashboard/hierarchy-display.component.ts", lineNumber: 119 }); })();
 
-const _c0$p = a0 => ({ name: "chart-bar", source: a0 });
+const _c0$o = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$a = a0 => ({ name: "light-bulb", source: a0 });
 function CompetitiveBenchmarkCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -59146,7 +60705,7 @@ class CompetitiveBenchmarkCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$p, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$o, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionTitleClasses());
             i0.ɵɵadvance(2);
@@ -59993,7 +61552,7 @@ class SearchButtonComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
 
-const _c0$o = ["searchInput"];
+const _c0$n = ["searchInput"];
 const _forTrack0$h = ($index, $item) => $item.id;
 function SearchModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -60358,7 +61917,7 @@ class SearchModalComponent {
     }
     static { this.ɵfac = function SearchModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchModalComponent, selectors: [["symphiq-search-modal"]], viewQuery: function SearchModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$o, 5);
+            i0.ɵɵviewQuery(_c0$n, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -61255,7 +62814,7 @@ class SimplifiedRecommendationCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimplifiedRecommendationCardComponent, { className: "SimplifiedRecommendationCardComponent", filePath: "lib/components/business-analysis-dashboard/simplified-recommendation-card.component.ts", lineNumber: 121 }); })();
 
-const _c0$n = () => [0, 1, 2];
+const _c0$m = () => [0, 1, 2];
 const _forTrack0$g = ($index, $item) => $item.id;
 function RecommendationsTiledGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
@@ -61325,7 +62884,7 @@ function RecommendationsTiledGridComponent_Conditional_15_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0$n));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0$m));
 } }
 function RecommendationsTiledGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 27);
@@ -62243,7 +63802,7 @@ class ContentGenerationProgressWithConfettiComponent {
     }], () => [], { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], confettiIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiIntensity", required: false }] }], enableConfetti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableConfetti", required: false }] }], confettiDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiDelay", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressWithConfettiComponent, { className: "ContentGenerationProgressWithConfettiComponent", filePath: "lib/components/shared/content-generation-progress-with-confetti.component.ts", lineNumber: 29 }); })();
 
-const _c0$m = () => [];
+const _c0$l = () => [];
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 8)(1, "symphiq-search-button", 19);
@@ -62377,7 +63936,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_1_
     const ɵ$index_108_r7 = i0.ɵɵnextContext().$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("subsections", ctx_r1.sections()[ɵ$index_108_r7 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$m));
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("subsections", ctx_r1.sections()[ɵ$index_108_r7 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$l));
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-profile-section", 34);
@@ -65053,7 +66612,7 @@ class FocusAreaHealthIndicatorComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], health: [{ type: i0.Input, args: [{ isSignal: true, alias: "health", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaHealthIndicatorComponent, { className: "FocusAreaHealthIndicatorComponent", filePath: "lib/components/profile-analysis-dashboard/focus-area-health-indicator.component.ts", lineNumber: 46 }); })();
 
-const _c0$l = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$k = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$e = ($index, $item) => $item.id;
 function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -65071,7 +66630,7 @@ function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$l, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$k, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedGoalChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -65144,7 +66703,7 @@ class RelatedGoalChipsComponent {
     }], null, { relatedGoalIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedGoalIds", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedGoalChipsComponent, { className: "RelatedGoalChipsComponent", filePath: "lib/components/profile-analysis-dashboard/shared/related-goal-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$k = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$j = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$9 = a0 => ({ name: "chevron-down", source: a0 });
 const _c2$7 = a0 => [a0];
 function FocusAreaExecutiveSummaryComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
@@ -65473,7 +67032,7 @@ class FocusAreaExecutiveSummaryComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getTopPrioritiesButtonTextClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(22, _c0$k, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getTopPrioritiesButtonTextClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(22, _c0$j, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getTopPrioritiesButtonTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getQuickWinsStatCardClasses());
             i0.ɵɵadvance();
@@ -65684,7 +67243,7 @@ class FocusAreaExecutiveSummaryComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaExecutiveSummaryComponent, { className: "FocusAreaExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-dashboard/focus-area-executive-summary.component.ts", lineNumber: 195 }); })();
 
-const _c0$j = a0 => ({ name: "chart-bar", source: a0 });
+const _c0$i = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$8 = a0 => ({ name: "signal", source: a0 });
 const _c2$6 = (a0, a1) => ({ name: a0, source: a1 });
 const _c3$4 = a0 => ({ name: "flag", source: a0 });
@@ -66220,7 +67779,7 @@ class MetricExecutiveSummaryComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.bannerClasses());
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(19, _c0$j, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(19, _c0$i, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -66539,7 +68098,7 @@ class MetricExecutiveSummaryComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: true }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-dashboard/metric-executive-summary.component.ts", lineNumber: 287 }); })();
 
-const _c0$i = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$h = a0 => ({ name: "chevron-right", source: a0 });
 function GoalCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
@@ -66824,7 +68383,7 @@ function GoalCardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.goal().objectives.length, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$i, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$h, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function GoalCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -67446,7 +69005,7 @@ class GoalCardComponent {
     }], () => [], { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goalIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "goalIndex", required: false }] }], sectionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIndex", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GoalCardComponent, { className: "GoalCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/goal-card.component.ts", lineNumber: 239 }); })();
 
-const _c0$h = a0 => ({ name: "link", source: a0 });
+const _c0$g = a0 => ({ name: "link", source: a0 });
 function CapabilityMatrixCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 4);
     i0.ɵɵtext(1);
@@ -67509,7 +69068,7 @@ function CapabilityMatrixCardComponent_Conditional_29_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$h, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.relatedGoalsIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$g, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.relatedGoalsIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.relatedGoalsTitleClasses());
     i0.ɵɵadvance(2);
@@ -68428,7 +69987,7 @@ class CompetitiveComparisonCardComponent {
     }], () => [], { comparison: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparison", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveComparisonCardComponent, { className: "CompetitiveComparisonCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/competitive-comparison-card.component.ts", lineNumber: 125 }); })();
 
-const _c0$g = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$f = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$c = ($index, $item) => $item.id;
 function PhaseTimelineCardComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -68446,7 +70005,7 @@ function PhaseTimelineCardComponent_Conditional_8_For_7_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$g, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$f, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function PhaseTimelineCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "h6", 10);
@@ -68854,7 +70413,7 @@ class PhaseTimelineCardComponent {
     }], () => [], { phase: [{ type: i0.Input, args: [{ isSignal: true, alias: "phase", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhaseTimelineCardComponent, { className: "PhaseTimelineCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/phase-timeline-card.component.ts", lineNumber: 123 }); })();
 
-const _c0$f = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$e = a0 => ({ name: "chevron-right", source: a0 });
 function OperationalCategoryCardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "div", 19)(2, "span", 20);
     i0.ɵɵtext(3, "Industry Benchmark");
@@ -68900,7 +70459,7 @@ function OperationalCategoryCardComponent_Conditional_20_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.strengths == null ? null : tmp_2_0.strengths.length, " Strength", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.strengths == null ? null : tmp_2_0.strengths.length) !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -68923,7 +70482,7 @@ function OperationalCategoryCardComponent_Conditional_21_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.gaps == null ? null : tmp_2_0.gaps.length, " Gap", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.gaps == null ? null : tmp_2_0.gaps.length) !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -68946,7 +70505,7 @@ function OperationalCategoryCardComponent_Conditional_22_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.opportunities == null ? null : tmp_2_0.opportunities.length, " Opportunit", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.opportunities == null ? null : tmp_2_0.opportunities.length) !== 1 ? "ies" : "y");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -69453,7 +71012,7 @@ class OperationalCategoryCardComponent {
     }], () => [], { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], categoryClick: [{ type: i0.Output, args: ["categoryClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OperationalCategoryCardComponent, { className: "OperationalCategoryCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/operational-category-card.component.ts", lineNumber: 164 }); })();
 
-const _c0$e = a0 => ({ name: "arrow-trending-up", source: a0 });
+const _c0$d = a0 => ({ name: "arrow-trending-up", source: a0 });
 const _c1$7 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$b = ($index, $item) => $item.questionId;
 function KeyDriverCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
@@ -69587,7 +71146,7 @@ class KeyDriverCardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(10, _c0$e, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(10, _c0$d, ctx.iconSource));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -69663,7 +71222,7 @@ class KeyDriverCardComponent {
     }], null, { driver: [{ type: i0.Input, args: [{ isSignal: true, alias: "driver", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyDriverCardComponent, { className: "KeyDriverCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/key-driver-card.component.ts", lineNumber: 73 }); })();
 
-const _c0$d = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$c = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$6 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$a = ($index, $item) => $item.questionId;
 function BottleneckCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
@@ -69819,7 +71378,7 @@ class BottleneckCardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(14, _c0$d, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(14, _c0$c, ctx.iconSource));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -69890,7 +71449,7 @@ class BottleneckCardComponent {
     }], null, { bottleneck: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottleneck", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BottleneckCardComponent, { className: "BottleneckCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/bottleneck-card.component.ts", lineNumber: 104 }); })();
 
-const _c0$c = a0 => ({ name: "arrow-right", source: a0 });
+const _c0$b = a0 => ({ name: "arrow-right", source: a0 });
 const _c1$5 = a0 => ({ name: "arrow-left", source: a0 });
 const _c2$5 = a0 => ({ name: "arrows-right-left", source: a0 });
 const _c3$3 = a0 => ({ name: "scale", source: a0 });
@@ -69922,7 +71481,7 @@ function MetricRelationshipsCardComponent_Conditional_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.getIconClasses("influences"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$c, ctx_r1.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$b, ctx_r1.iconSource));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
     i0.ɵɵadvance(3);
@@ -70192,7 +71751,7 @@ class MetricRelationshipsCardComponent {
     }], null, { relationships: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationships", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricRelationshipsCardComponent, { className: "MetricRelationshipsCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/metric-relationships-card.component.ts", lineNumber: 105 }); })();
 
-const _c0$b = a0 => ({ name: "link", source: a0 });
+const _c0$a = a0 => ({ name: "link", source: a0 });
 function RelatedMetricCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-icon", 10);
@@ -70203,7 +71762,7 @@ function RelatedMetricCardComponent_Conditional_13_Template(rf, ctx) { if (rf &
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.borderClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$b, ctx_r0.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r0.sharedGoalsIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$a, ctx_r0.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r0.sharedGoalsIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.sharedGoalsTextClasses());
     i0.ɵɵadvance();
@@ -70872,7 +72431,7 @@ class RelatedMetricsListComponent {
     }], null, { relatedMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedMetrics", required: true }] }], currentMetricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetricName", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricClicked: [{ type: i0.Output, args: ["metricClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedMetricsListComponent, { className: "RelatedMetricsListComponent", filePath: "lib/components/profile-analysis-dashboard/cards/related-metrics-list.component.ts", lineNumber: 170 }); })();
 
-const _c0$a = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$9 = (a0, a1) => ({ name: a0, source: a1 });
 const _c1$4 = a0 => ({ name: "signal", source: a0 });
 const _c2$4 = a0 => ({ name: "calendar", source: a0 });
 const _c3$2 = a0 => ({ name: "flag", source: a0 });
@@ -71082,7 +72641,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.trendBadgeClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(32, _c0$a, ctx.trendIcon(), ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(32, _c0$9, ctx.trendIcon(), ctx.iconSource));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.metrics().trendDirection, " ");
             i0.ɵɵadvance(2);
@@ -71230,7 +72789,7 @@ class PerformanceMetricsCardComponent {
     }], () => [], { performanceMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "performanceMetrics", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceMetricsCardComponent, { className: "PerformanceMetricsCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/performance-metrics-card.component.ts", lineNumber: 144 }); })();
 
-const _c0$9 = a0 => ({ name: "funnel", source: a0 });
+const _c0$8 = a0 => ({ name: "funnel", source: a0 });
 const _c1$3 = a0 => ({ name: "chart-bar-square", source: a0 });
 const _c2$3 = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$1 = a0 => ({ name: "arrow-left", source: a0 });
@@ -71421,7 +72980,7 @@ class FunnelContextCardComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cardClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(13, _c0$9, ctx.iconSource))("ngClass", ctx.iconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(13, _c0$8, ctx.iconSource))("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.headerClasses());
             i0.ɵɵadvance(3);
@@ -71557,7 +73116,7 @@ class FunnelContextCardComponent {
     }], () => [], { funnelContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelContext", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelContextCardComponent, { className: "FunnelContextCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/funnel-context-card.component.ts", lineNumber: 125 }); })();
 
-const _c0$8 = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$7 = (a0, a1) => ({ name: a0, source: a1 });
 const _c1$2 = a0 => ({ name: "target", source: a0 });
 const _c2$2 = a0 => ({ name: "star", source: a0 });
 class MetricComparisonStatsComponent {
@@ -71768,7 +73327,7 @@ class MetricComparisonStatsComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.statCardClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(24, _c0$8, ctx.yoyIcon(), ctx.iconSource))("ngClass", ctx.yoyIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(24, _c0$7, ctx.yoyIcon(), ctx.iconSource))("ngClass", ctx.yoyIconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -72000,7 +73559,7 @@ class PerformanceOverviewContainerComponent {
     }], () => [], { performanceOverviewData: [{ type: i0.Input, args: [{ isSignal: true, alias: "performanceOverviewData", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceOverviewContainerComponent, { className: "PerformanceOverviewContainerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/performance-overview-container.component.ts", lineNumber: 58 }); })();
 
-const _c0$7 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$6 = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$1 = a0 => ({ name: "chevron-down", source: a0 });
 const _c2$1 = a0 => ({ name: "clock", source: a0 });
 const _c3 = a0 => [a0];
@@ -72203,7 +73762,7 @@ function ProfileSectionContentComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.keyStrengthsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(26, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.keyStrengthsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(26, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.keyStrengthsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.criticalGapsCardClasses());
     i0.ɵɵadvance();
@@ -72215,7 +73774,7 @@ function ProfileSectionContentComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.criticalGapsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.criticalGapsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.criticalGapsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.quickWinsCardClasses());
     i0.ɵɵadvance();
@@ -72294,7 +73853,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaGapsStatCardClasses());
     i0.ɵɵadvance();
@@ -72306,7 +73865,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaGapsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(23, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaGapsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(23, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaGapsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaOpportunitiesStatCardClasses());
     i0.ɵɵadvance();
@@ -72318,7 +73877,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(25, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(25, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
 } }
 function ProfileSectionContentComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
@@ -72665,7 +74224,7 @@ function ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Condi
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.getTacticalRecRelatedMetricsCount(recommendation_r19), " Related Metrics");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS));
 } }
 function ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16)(1, "div", 69)(2, "h4", 75);
@@ -78080,7 +79639,7 @@ class StrategyRecommendationsModalContentComponent {
     }], null, { strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], objectiveTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectiveTitle", required: false }] }], goalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "goalTitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], allBusinessInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allBusinessInsights", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrategyRecommendationsModalContentComponent, { className: "StrategyRecommendationsModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/strategy-recommendations-modal-content.component.ts", lineNumber: 489 }); })();
 
-const _c0$6 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$5 = a0 => ({ name: "chevron-right", source: a0 });
 function CategoryDetailModalContentComponent_Conditional_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "span", 19);
     i0.ɵɵtext(2, "Industry:");
@@ -78193,7 +79752,7 @@ function CategoryDetailModalContentComponent_Conditional_17_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", strength_r3 == null ? null : strength_r3.description, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27)(1, "h4", 15);
@@ -78260,7 +79819,7 @@ function CategoryDetailModalContentComponent_Conditional_18_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", gap_r5 == null ? null : gap_r5.description, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38)(1, "h4", 15);
@@ -78327,7 +79886,7 @@ function CategoryDetailModalContentComponent_Conditional_19_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional((opportunity_r7 == null ? null : opportunity_r7.potentialImpact) ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44)(1, "h4", 15);
@@ -79209,7 +80768,7 @@ class StrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allFunnelStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "allFunnelStrengths", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrengthDetailModalContentComponent, { className: "StrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/strength-detail-modal-content.component.ts", lineNumber: 124 }); })();
 
-const _c0$5 = () => [];
+const _c0$4 = () => [];
 function GapDetailModalContentComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 9);
     i0.ɵɵtext(1);
@@ -79322,7 +80881,7 @@ function GapDetailModalContentComponent_Conditional_16_Template(rf, ctx) { if (r
     i0.ɵɵclassMap(ctx_r0.isDark() ? "border-slate-700" : "border-slate-200");
     i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("relatedGoalIds", ((tmp_4_0 = ctx_r0.gap()) == null ? null : tmp_4_0.linkedGoalIds) ?? i0.ɵɵpureFunction0(7, _c0$5))("allGoals", ctx_r0.allGoals())("viewMode", ctx_r0.viewMode());
+    i0.ɵɵproperty("relatedGoalIds", ((tmp_4_0 = ctx_r0.gap()) == null ? null : tmp_4_0.linkedGoalIds) ?? i0.ɵɵpureFunction0(7, _c0$4))("allGoals", ctx_r0.allGoals())("viewMode", ctx_r0.viewMode());
 } }
 function GapDetailModalContentComponent_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
@@ -79606,7 +81165,7 @@ class GapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allWeaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "allWeaknesses", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GapDetailModalContentComponent, { className: "GapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/gap-detail-modal-content.component.ts", lineNumber: 129 }); })();
 
-const _c0$4 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$3 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$3 = ($index, $item) => $item.id || $index;
 function OpportunityDetailModalContentComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "h4", 10);
@@ -79711,7 +81270,7 @@ function OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_For
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r5.title || goal_r5.id);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$4, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$3, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "h4", 24);
@@ -81313,7 +82872,7 @@ class CollapsibleAnalysisSectionGroupComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], executiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "executiveSummary", required: false }] }], focusAreaExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaExecutiveSummary", required: false }] }], metricExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricExecutiveSummary", required: false }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleAnalysisSectionGroupComponent, { className: "CollapsibleAnalysisSectionGroupComponent", filePath: "lib/components/profile-analysis-dashboard/cards/collapsible-analysis-section-group.component.ts", lineNumber: 172 }); })();
 
-const _c0$3 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$2 = a0 => ({ name: "chevron-right", source: a0 });
 const _c1 = a0 => ({ name: "chevron-down", source: a0 });
 const _c2 = a0 => [a0];
 const _forTrack0 = ($index, $item) => $item.id;
@@ -81590,7 +83149,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_0_T
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.getKeyStrengthsButtonTextClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$3, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.getKeyStrengthsButtonTextClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$2, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.getKeyStrengthsButtonTextClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.getCriticalGapsStatCardClasses());
     i0.ɵɵadvance();
@@ -81602,7 +83161,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_0_T
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.getCriticalGapsButtonTextClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(30, _c0$3, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.getCriticalGapsButtonTextClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(30, _c0$2, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.getCriticalGapsButtonTextClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.getQuickWinsStatCardClasses());
     i0.ɵɵadvance();
@@ -83233,469 +84792,6 @@ class ScrollProgressBarComponent {
     }], null, { progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ScrollProgressBarComponent, { className: "ScrollProgressBarComponent", filePath: "lib/components/shared/scroll-progress-bar.component.ts", lineNumber: 23 }); })();
 
-const _c0$2 = ["chartdiv"];
-class LineChartComponent {
-    constructor() {
-        this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
-        this.showAxisLabels = input(false, ...(ngDevMode ? [{ debugName: "showAxisLabels" }] : []));
-        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.currencySymbol = input('$', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : []));
-        // Memoized computed signals to avoid recalculation on every change detection
-        this.chartHeight = computed(() => this.showAxisLabels() ? '500px' : '133px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
-        this.cursorColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x94a3b8, ...(ngDevMode ? [{ debugName: "cursorColor" }] : []));
-        this.tooltipTextColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x000000, ...(ngDevMode ? [{ debugName: "tooltipTextColor" }] : []));
-        this.chartHash = computed(() => this.generateChartHash(this.chart()), ...(ngDevMode ? [{ debugName: "chartHash" }] : []));
-        this.lastChartHash = '';
-        this.chartNeedsRender = false;
-        this.isVisible = false;
-        this.animationsEnabled = false;
-        // Monitor for actual data changes using memoized hash
-        effect(() => {
-            const newHash = this.chartHash();
-            if (newHash !== this.lastChartHash) {
-                this.lastChartHash = newHash;
-                this.chartNeedsRender = true;
-            }
-        });
-    }
-    ngOnInit() {
-    }
-    /**
-     * Generate a hash of the chart data to detect actual changes
-     * This prevents unnecessary re-renders when data hasn't truly changed
-     */
-    generateChartHash(chart) {
-        const data = chart.lineChartData;
-        if (!data)
-            return 'empty';
-        const seriesCount = data.series?.length ?? 0;
-        const dataPoints = data.series?.reduce((sum, s) => sum + (s.data?.length ?? 0), 0) ?? 0;
-        return `${chart.title}-${seriesCount}-${dataPoints}-${chart.lineChartUseCase}`;
-    }
-    ngAfterViewInit() {
-        this.setupIntersectionObserver();
-        this.setupResizeObserver();
-    }
-    ngOnDestroy() {
-        this.cleanupIntersectionObserver();
-        this.cleanupResizeObserver();
-        if (this.chartElement) {
-            this.chartElement.series.clear();
-            this.chartElement.xAxes.clear();
-            this.chartElement.yAxes.clear();
-        }
-        if (this.root) {
-            this.root.dispose();
-        }
-        this.chartElement = undefined;
-        this.root = undefined;
-    }
-    setupResizeObserver() {
-        if (!this.chartDiv?.nativeElement || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.resizeTimeout) {
-                clearTimeout(this.resizeTimeout);
-            }
-            this.resizeTimeout = window.setTimeout(() => {
-                // AmCharts handles resize automatically, but we debounce to prevent
-                // excessive Angular change detection cycles during window resize
-                if (this.root && !this.root.isDisposed()) {
-                    // Force a single layout recalculation after resize settles
-                    this.root.resize();
-                }
-            }, 150);
-        });
-        this.resizeObserver.observe(this.chartDiv.nativeElement);
-    }
-    cleanupResizeObserver() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-            this.resizeTimeout = undefined;
-        }
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-    }
-    setupIntersectionObserver() {
-        if (!this.chartDiv?.nativeElement || typeof IntersectionObserver === 'undefined') {
-            // Fallback: render immediately if IntersectionObserver not supported
-            this.isVisible = true;
-            this.animationsEnabled = true;
-            if (this.chartNeedsRender || !this.root) {
-                this.createChart();
-                this.chartNeedsRender = false;
-            }
-            return;
-        }
-        // Use IntersectionObserver to detect when chart enters viewport
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && !this.isVisible) {
-                    this.isVisible = true;
-                    // Create chart without animations initially for faster rendering
-                    if (this.chartNeedsRender || !this.root) {
-                        this.createChart();
-                        this.chartNeedsRender = false;
-                    }
-                    // Enable animations after initial render completes
-                    setTimeout(() => {
-                        this.animationsEnabled = true;
-                    }, 100);
-                    // Stop observing once visible (one-time initialization)
-                    this.intersectionObserver?.disconnect();
-                }
-            });
-        }, {
-            // Trigger when 10% of the chart is visible
-            threshold: 0.1,
-            // Start observing slightly before element enters viewport
-            rootMargin: '50px'
-        });
-        this.intersectionObserver.observe(this.chartDiv.nativeElement);
-    }
-    cleanupIntersectionObserver() {
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = undefined;
-        }
-    }
-    /**
-     * Create chart with early exit optimization
-     * Prevents unnecessary re-initialization if no data changes detected
-     */
-    formatValue(value, valueFormat) {
-        const formattedNumber = value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        if (valueFormat === 'CURRENCY') {
-            return `${this.currencySymbol()}${formattedNumber}`;
-        }
-        else if (valueFormat === 'PERCENTAGE') {
-            return `${formattedNumber}%`;
-        }
-        return formattedNumber;
-    }
-    isPriorYearSeries(seriesData) {
-        if (!seriesData || !seriesData.name) {
-            return false;
-        }
-        // Check if series name indicates it's a prior year series
-        const name = seriesData.name.toLowerCase();
-        const currentYear = new Date().getFullYear();
-        // Check for explicit keywords
-        if (name.includes('last year') ||
-            name.includes('prior year') ||
-            name.includes('previous year')) {
-            return true;
-        }
-        // Check for year patterns - extract any 4-digit year and compare to current year
-        const yearMatch = seriesData.name.match(/\b(20\d{2})\b/);
-        if (yearMatch) {
-            const year = parseInt(yearMatch[1], 10);
-            return year < currentYear;
-        }
-        return false;
-    }
-    extractMetricName(seriesName) {
-        // Extract metric name from series name by removing year patterns
-        // e.g., "Purchase Revenue (2025)" -> "Purchase Revenue"
-        //       "Revenue 2024" -> "Revenue"
-        //       "Sessions (2024)" -> "Sessions"
-        if (!seriesName)
-            return '';
-        return seriesName.replace(/\s*\(?\s*20\d{2}\s*\)?/g, '').trim();
-    }
-    createChart() {
-        const chartData = this.chart().lineChartData;
-        if (!chartData || !this.chartDiv)
-            return;
-        // Check if this is a YoY chart from the chart configuration
-        const isYoYChart = this.chart().lineChartUseCase === LineChartUseCaseEnum.THIS_YEAR_VS_LAST_YEAR;
-        this.root = Root.new(this.chartDiv.nativeElement);
-        // Only enable animations if chart is visible to improve initial load performance
-        if (this.animationsEnabled) {
-            this.root.setThemes([am5themes_Animated.new(this.root)]);
-        }
-        this.chartElement = this.root.container.children.push(XYChart.new(this.root, {
-            panX: false,
-            panY: false,
-            wheelX: 'none',
-            wheelY: 'none',
-            paddingLeft: 0,
-            paddingRight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            maxTooltipDistance: -1
-        }));
-        const dateAxis = this.chartElement.xAxes.push(DateAxis.new(this.root, {
-            baseInterval: { timeUnit: 'month', count: 1 },
-            renderer: AxisRendererX.new(this.root, {}),
-            tooltip: Tooltip.new(this.root, {})
-        }));
-        dateAxis.get('renderer').labels.template.setAll({
-            fontSize: 12,
-            fill: color(0x94a3b8),
-            visible: this.showAxisLabels(),
-            paddingTop: 0,
-            paddingBottom: 0,
-            marginTop: 0,
-            marginBottom: 0
-        });
-        // Create Y-axes based on yaxisLabels if provided
-        const yaxisLabels = chartData.yaxisLabels || ['Value'];
-        const yAxesMap = new Map();
-        const axisColors = {};
-        const axisColorPalette = [
-            0x4A90E2, // Blue
-            0x10b981, // Green
-            0xf59e0b, // Amber
-            0xef4444, // Red
-            0x8b5cf6, // Purple
-            0x06b6d4 // Cyan
-        ];
-        yaxisLabels.forEach((label, index) => {
-            const isRightAxis = index % 2 === 1;
-            const colorValue = axisColorPalette[index % axisColorPalette.length];
-            axisColors[label] = colorValue;
-            if (!this.chartElement || !this.root)
-                return;
-            const yAxis = this.chartElement.yAxes.push(ValueAxis.new(this.root, {
-                renderer: AxisRendererY.new(this.root, {
-                    opposite: isRightAxis
-                })
-            }));
-            // Only show axis labels when there's a single Y-axis
-            if (yaxisLabels.length === 1) {
-                yAxis.get('renderer').labels.template.setAll({
-                    fontSize: 12,
-                    fill: color(colorValue),
-                    visible: this.showAxisLabels(),
-                    paddingLeft: 0,
-                    paddingRight: 0,
-                    marginLeft: 0,
-                    marginRight: 0
-                });
-                // Don't show axis title/name for single Y-axis, only values
-            }
-            else {
-                // Hide labels when multiple axes
-                yAxis.get('renderer').labels.template.setAll({
-                    visible: false
-                });
-            }
-            yAxesMap.set(label, yAxis);
-        });
-        // Create cursor for mouse tracking - use memoized cursorColor
-        const cursor = XYCursor.new(this.root, {
-            behavior: 'zoomX'
-        });
-        this.chartElement.set('cursor', cursor);
-        cursor.lineY.set('visible', false);
-        cursor.lineX.set('visible', true);
-        cursor.lineX.set('stroke', color(this.cursorColor()));
-        cursor.set('xAxis', dateAxis);
-        // Create free-floating tooltip for the chart
-        const tooltip = Tooltip.new(this.root, {});
-        this.chartElement.plotContainer.set('tooltipPosition', 'pointer');
-        this.chartElement.plotContainer.set('tooltip', tooltip);
-        this.chartElement.plotContainer.set('tooltipText', '{name}'); // Enable tooltip trigger
-        // Make tooltip background transparent with white border
-        const tooltipBg = tooltip.get('background');
-        if (tooltipBg) {
-            tooltipBg.setAll({
-                fill: color(0x000000),
-                fillOpacity: 0,
-                stroke: color(0xffffff),
-                strokeOpacity: 1,
-                strokeWidth: 2
-            });
-        }
-        // Style the tooltip label - white text for dark mode, black for light mode - use memoized color
-        tooltip.label.setAll({
-            fontSize: 12,
-            fill: color(this.tooltipTextColor()),
-            paddingTop: 8,
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 10
-        });
-        // Add tooltip text adapter to format values from all series with colored dots
-        tooltip.label.adapters.add('text', () => {
-            let text = '';
-            let count = 0;
-            let monthText = '';
-            this.chartElement?.series.each((series) => {
-                const dataItem = series.get('tooltipDataItem');
-                if (dataItem) {
-                    // Extract month and year from the first series that has a dataItem
-                    if (monthText === '') {
-                        const valueX = dataItem.get('valueX');
-                        if (valueX) {
-                            const date = new Date(valueX);
-                            const month = date.toLocaleString('default', { month: 'long', timeZone: 'UTC' });
-                            const year = date.toLocaleString('default', { year: 'numeric', timeZone: 'UTC' });
-                            monthText = `${month} ${year}`;
-                        }
-                    }
-                    if (count > 0)
-                        text += '\n';
-                    const name = series.get('name');
-                    const value = dataItem.get('valueY');
-                    const seriesFormat = series.get('userData')?.valueFormat;
-                    const formattedValue = seriesFormat === 'CURRENCY'
-                        ? ChartValueFormatter.formatValue(value, seriesFormat, this.currencySymbol())
-                        : this.formatValue(value, seriesFormat);
-                    // Get the series color (stroke color)
-                    const stroke = series.get('stroke');
-                    let colorHex = 'FFFFFF'; // Default white
-                    if (stroke) {
-                        colorHex = stroke.toString().substring(1).toUpperCase(); // Remove '#' and convert to uppercase
-                    }
-                    // Format with colored bullet: [color]●[/] SeriesName: Value
-                    text += `[fontSize: 24px][${colorHex}]●[/][/] [bold]${name}:[/] ${formattedValue}`;
-                    count++;
-                }
-            });
-            // Prepend month to the text if available
-            if (monthText) {
-                text = `[bold]${monthText}[/]\n${text}`;
-            }
-            return text;
-        });
-        // For YoY charts, build a metric-to-color map to ensure both years of the same metric have the same color
-        const metricColorMap = new Map();
-        if (isYoYChart && chartData.series) {
-            const uniqueMetrics = new Set();
-            chartData.series.forEach(seriesData => {
-                const metricName = this.extractMetricName(seriesData.name);
-                uniqueMetrics.add(metricName);
-            });
-            let colorIndex = 0;
-            uniqueMetrics.forEach(metricName => {
-                metricColorMap.set(metricName, axisColorPalette[colorIndex % axisColorPalette.length]);
-                colorIndex++;
-            });
-        }
-        chartData.series?.forEach((seriesData, index) => {
-            const parsedData = (seriesData.data || []).map(d => ({
-                date: new Date(`${d.date}T00:00:00Z`).getTime(),
-                value: d.value
-            }));
-            // Get the Y-axis for this series, or use the first one as default
-            const yaxisLabel = seriesData.yaxisLabel || yaxisLabels[0];
-            const yAxis = yAxesMap.get(yaxisLabel) || Array.from(yAxesMap.values())[0];
-            // Determine series color: for YoY charts use metric-based colors, otherwise use axis-based colors
-            let seriesColorValue;
-            if (isYoYChart) {
-                const metricName = this.extractMetricName(seriesData.name);
-                seriesColorValue = metricColorMap.get(metricName) || axisColorPalette[index % axisColorPalette.length];
-            }
-            else {
-                seriesColorValue = axisColors[yaxisLabel] || axisColorPalette[index % axisColorPalette.length];
-            }
-            const seriesColor = color(seriesColorValue);
-            // Check if this is a prior year series for YoY charts
-            const isPriorYear = isYoYChart && this.isPriorYearSeries(seriesData);
-            if (!this.chartElement || !this.root)
-                return;
-            const series = this.chartElement.series.push(LineSeries.new(this.root, {
-                name: seriesData.name,
-                xAxis: dateAxis,
-                yAxis: yAxis,
-                valueYField: 'value',
-                valueXField: 'date',
-                stroke: seriesColor
-            }));
-            // Store valueFormat and prior year flag in userData for tooltip formatting
-            series.set('userData', { valueFormat: seriesData.valueFormat, isPriorYear });
-            // Disable individual series tooltips - use floating tooltip instead
-            series.set('tooltip', undefined);
-            // Configure stroke styling based on whether it's a prior year series
-            series.strokes.template.setAll({
-                strokeWidth: 2
-            });
-            if (isPriorYear) {
-                // Apply dashed line and reduced opacity for prior year data
-                series.strokes.template.setAll({
-                    strokeDasharray: [5, 5],
-                    strokeOpacity: 0.4
-                });
-                // Also set on each individual stroke
-                series.strokes.each((stroke) => {
-                    stroke.set('strokeDasharray', [5, 5]);
-                    stroke.set('strokeOpacity', 0.4);
-                });
-            }
-            // Add bullets with larger hit area for better hover detection
-            series.bullets.push(() => {
-                const bulletConfig = {
-                    radius: 5,
-                    fill: seriesColor
-                };
-                if (isPriorYear) {
-                    bulletConfig['fillOpacity'] = 0.4;
-                }
-                if (!this.root)
-                    return Bullet.new({}, { sprite: Circle.new({}, {}) });
-                const circle = Circle.new(this.root, bulletConfig);
-                return Bullet.new(this.root, {
-                    sprite: circle
-                });
-            });
-            series.data.setAll(parsedData);
-            series.appear(1000);
-        });
-        // Only show legend in modal view (when showAxisLabels is true)
-        if (this.showAxisLabels()) {
-            const legend = this.chartElement.children.push(Legend.new(this.root, {
-                centerX: percent(50),
-                x: percent(50)
-            }));
-            legend.labels.template.setAll({
-                fontSize: 12,
-                fill: color(0x94a3b8)
-            });
-            // Reverse the series order in the legend so 2025 series appear on the right
-            const reversedSeries = Array.from(this.chartElement.series.values).reverse();
-            legend.data.setAll(reversedSeries);
-        }
-        this.chartElement.appear(1000, 100);
-    }
-    static { this.ɵfac = function LineChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LineChartComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["symphiq-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$2, 7);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function LineChartComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 1);
-            i0.ɵɵdomElement(1, "div", 2, 0);
-            i0.ɵɵdomElementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassProp("mini-mode", !ctx.showAxisLabels());
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("height", ctx.chartHeight());
-        } }, styles: [".chart-container[_ngcontent-%COMP%]{width:100%;padding:1rem}.chart-container.mini-mode[_ngcontent-%COMP%]{padding:.25rem}"], changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineChartComponent, [{
-        type: Component,
-        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
-      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
-    </div>
-  `, styles: [".chart-container{width:100%;padding:1rem}.chart-container.mini-mode{padding:.25rem}\n"] }]
-    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], chartDiv: [{
-            type: ViewChild,
-            args: ['chartdiv', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LineChartComponent, { className: "LineChartComponent", filePath: "lib/components/funnel-analysis-dashboard/charts/line-chart.component.ts", lineNumber: 38 }); })();
-
-var lineChart_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LineChartComponent: LineChartComponent
-});
-
 const _c0$1 = ["chartdiv"];
 class BarChartComponent {
     constructor() {
@@ -84634,5 +85730,5 @@ var pieChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
 //# sourceMappingURL=symphiq-components.mjs.map