npm - @eric-emg/symphiq-components - Versions diffs - 1.2.358 → 1.2.360 - Mend

@eric-emg/symphiq-components 1.2.358 → 1.2.360

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/symphiq-components.mjs +1411 -1304
package/fesm2022/symphiq-components.mjs.map +1 -1
package/index.d.ts +106 -69
package/index.d.ts.map +1 -1
package/package.json +1 -1
package/styles.css +22 -0

package/fesm2022/symphiq-components.mjs CHANGED Viewed

@@ -3888,7 +3888,7 @@ class CompetitiveScoreService {
             }]
     }], null, null); })();
-const _forTrack0$V = ($index, $item) => $item.category;
+const _forTrack0$W = ($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);
@@ -4047,7 +4047,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$V);
+    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$W);
     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()); });
@@ -4256,7 +4256,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$V);
+    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$W);
     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()); });
@@ -8933,7 +8933,7 @@ class MetricCardComponent {
 const _c0$17 = () => [1, 2, 3];
 const _c1$D = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
-const _forTrack0$U = ($index, $item) => $item.metric;
+const _forTrack0$V = ($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);
@@ -9256,7 +9256,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$U);
+    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$V);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -10654,7 +10654,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$T = ($index, $item) => $item.id;
+const _forTrack0$U = ($index, $item) => $item.id;
 function FunnelStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵnamespaceSVG();
@@ -10768,7 +10768,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$T);
+    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$U);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -10978,7 +10978,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$S = ($index, $item) => $item.severity;
+const _forTrack0$T = ($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);
@@ -11157,7 +11157,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$S);
+    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$T);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -12932,7 +12932,7 @@ class ProfileItemLookupService {
     }], null, null); })();
 const _c0$14 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$R = ($index, $item) => $item.id;
+const _forTrack0$S = ($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);
@@ -12953,7 +12953,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$R);
+    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$S);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -13178,7 +13178,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$Q = ($index, $item) => $item.id;
+const _forTrack0$R = ($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);
@@ -13261,7 +13261,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$Q);
+    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$R);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -13452,7 +13452,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$12 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$P = ($index, $item) => $item.id;
+const _forTrack0$Q = ($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);
@@ -13495,7 +13495,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$P);
+    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$Q);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template, 5, 4, "button", 3);
     i0.ɵɵelementEnd();
@@ -13951,7 +13951,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$O = ($index, $item) => $item.order;
+const _forTrack0$P = ($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);
@@ -14304,7 +14304,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$O);
+    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$P);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -15143,7 +15143,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$N = ($index, $item) => $item.id || $index;
+const _forTrack0$O = ($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);
@@ -15517,7 +15517,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$N);
+    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$O);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -19754,7 +19754,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$M = ($index, $item) => $item.name;
+const _forTrack0$N = ($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);
@@ -19798,7 +19798,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$M);
+    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$N);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20045,7 +20045,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$L = ($index, $item) => $item.name;
+const _forTrack0$M = ($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);
@@ -20085,7 +20085,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$L);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$M);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20135,7 +20135,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$L);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$M);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20185,7 +20185,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$L);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$M);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21449,7 +21449,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$K = ($index, $item) => $item.id;
+const _forTrack0$L = ($index, $item) => $item.id;
 function MobileBottomNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 3);
@@ -21507,7 +21507,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$K);
+            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$L);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClass());
@@ -21712,7 +21712,7 @@ class SearchService {
     }], null, null); })();
 const _c0$10 = ["searchInput"];
-const _forTrack0$J = ($index, $item) => $item.id;
+const _forTrack0$K = ($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);
@@ -21805,7 +21805,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$J);
+    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$K);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -22296,7 +22296,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$I = ($index, $item) => $item.value;
+const _forTrack0$J = ($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);
@@ -22671,7 +22671,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$I);
+            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$J);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 8)(14, "table", 9)(15, "thead")(16, "tr", 10)(17, "th", 11);
             i0.ɵɵtext(18, "Metric");
@@ -23306,7 +23306,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$H = ($index, $item) => $item.id;
+const _forTrack0$I = ($index, $item) => $item.id;
 function FloatingTocComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 8);
@@ -23358,7 +23358,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$H);
+    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$I);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r2 = i0.ɵɵnextContext().$implicit;
@@ -23748,7 +23748,7 @@ class FloatingTocComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(17, "nav", 9);
-            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$H);
+            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$I);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(20, "div", 11)(21, "button", 7);
             i0.ɵɵlistener("click", function FloatingTocComponent_Template_button_click_21_listener() { return ctx.scrollToTop(); });
@@ -23902,7 +23902,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$G = ($index, $item) => $item.id;
+const _forTrack0$H = ($index, $item) => $item.id;
 function JourneyProgressIndicatorComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 22);
@@ -24135,7 +24135,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$G);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$H);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24584,7 +24584,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$G);
+            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 10, null, null, _forTrack0$H);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
             i0.ɵɵelementEnd();
@@ -26735,7 +26735,7 @@ class ViewModeSwitcherModalComponent {
 const _c0$_ = a0 => ({ name: "check-badge", source: a0 });
 const _c1$B = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$F = ($index, $item) => $item.area;
+const _forTrack0$G = ($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);
@@ -26804,7 +26804,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$F);
+    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$G);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -26968,7 +26968,7 @@ const _c0$Z = a0 => ({ name: "shield-check", source: a0 });
 const _c1$A = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$i = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$E = ($index, $item) => $item.area;
+const _forTrack0$F = ($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);
@@ -27053,7 +27053,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$E);
+    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$F);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -27282,7 +27282,7 @@ class CriticalGapsListModalContentComponent {
 const _c0$Y = a0 => ({ name: "check-circle", source: a0 });
 const _c1$z = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$D = ($index, $item) => $item.questionId;
+const _forTrack0$E = ($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);
@@ -27329,7 +27329,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$D);
+    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$E);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -27524,7 +27524,7 @@ class KeyStrengthDetailModalContentComponent {
 const _c0$X = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$y = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$C = ($index, $item) => $item.questionId;
+const _forTrack0$D = ($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: ");
@@ -27592,7 +27592,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$C);
+    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$D);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -29388,7 +29388,7 @@ const _c0$W = a0 => ({ name: "check-badge", source: a0 });
 const _c1$x = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$h = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$B = ($index, $item) => $item.capability;
+const _forTrack0$C = ($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);
@@ -29503,7 +29503,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$B);
+    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$C);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -29710,7 +29710,7 @@ class FocusAreaStrengthsListModalContentComponent {
 const _c0$V = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$w = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
-function _forTrack0$A($index, $item) { return this.getGapTitle($item); }
+function _forTrack0$B($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);
@@ -29827,7 +29827,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$A, true);
+    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$B, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30104,7 +30104,7 @@ class FocusAreaGapsListModalContentComponent {
 const _c0$U = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$v = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$z = ($index, $item) => $item.opportunity;
+const _forTrack0$A = ($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);
@@ -30195,7 +30195,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$z);
+    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$A);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30372,7 +30372,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
 const _c0$T = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$u = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$y = ($index, $item) => $item.performanceItemId;
+const _forTrack0$z = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -30442,7 +30442,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$y);
+    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$z);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31093,7 +31093,7 @@ class FocusAreaGapDetailModalContentComponent {
 const _c0$R = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$t = () => [];
-const _forTrack0$x = ($index, $item) => $item.performanceItemId;
+const _forTrack0$y = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -31145,7 +31145,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$x);
+    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$y);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -36288,7 +36288,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$w = ($index, $item) => $item.name;
+const _forTrack0$x = ($index, $item) => $item.name;
 function ProductCategoryCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
     i0.ɵɵtext(1);
@@ -36419,7 +36419,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$w);
+    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$x);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -41408,7 +41408,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$9 = a0 => ({ name: "arrow-left", source: a0 });
 const _c4$5 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$v = ($index, $item) => $item.performanceItemId || $index;
+const _forTrack0$w = ($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();
@@ -41619,7 +41619,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$v);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r11 = ctx;
@@ -41699,7 +41699,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$v);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r14 = ctx;
@@ -41818,7 +41818,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$v);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -41852,7 +41852,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$v);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -41884,7 +41884,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$v);
+    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$w);
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(data_r32.metrics);
@@ -44538,7 +44538,7 @@ const _c0$B = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$g = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$7 = a0 => ({ name: "exclamation-circle", source: a0 });
-const _forTrack0$u = ($index, $item) => $item.order;
+const _forTrack0$v = ($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);
@@ -44692,7 +44692,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$u);
+            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$v);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, RecommendationActionStepsModalComponent_Conditional_5_Template, 4, 5, "div", 4);
             i0.ɵɵelementEnd();
@@ -45941,7 +45941,7 @@ const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$6 = () => [1, 2, 3];
 const _c4$3 = () => [1, 2, 3, 4];
 const _c5$2 = () => [1, 2];
-const _forTrack0$t = ($index, $item) => $item.value;
+const _forTrack0$u = ($index, $item) => $item.value;
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } }
@@ -45980,7 +45980,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", 49);
     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", 50, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 50, _forTrack0$u);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46060,7 +46060,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", 55);
     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", 50, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 50, _forTrack0$u);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46834,7 +46834,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Te
     i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Conditional_14_Template, 2, 0, "div", 125);
     i0.ɵɵelementStart(15, "select", 126);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$u);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "button", 127);
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
@@ -46848,7 +46848,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Te
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(24, "div", 130)(25, "div", 131);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$u);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Conditional_28_Template, 3, 1, "div", 132)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_4_Conditional_29_Template, 4, 5, "div", 133);
     i0.ɵɵelementEnd()();
@@ -47025,7 +47025,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_Te
     i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_Conditional_12_Template, 2, 0, "div", 125);
     i0.ɵɵelementStart(13, "select", 167);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$u);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_Conditional_16_Template, 3, 1, "div", 98)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_5_Conditional_17_Template, 4, 5, "div", 168);
     i0.ɵɵelementEnd()();
@@ -47136,7 +47136,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_Te
     i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_Conditional_13_Template, 2, 0, "div", 125);
     i0.ɵɵelementStart(14, "select", 126);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$u);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_Conditional_17_Template, 6, 5, "div", 98)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_53_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 95);
     i0.ɵɵelementEnd()();
@@ -49744,7 +49744,7 @@ function getTrendClasses(trendPercent, viewMode) {
     }
 }
-const _forTrack0$s = ($index, $item) => $item.performanceItemId;
+const _forTrack0$t = ($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);
@@ -50363,7 +50363,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$s);
+            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$t);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisPreviewComponent_Conditional_17_Template, 9, 11, "div", 9);
             i0.ɵɵconditionalCreate(18, SymphiqFunnelAnalysisPreviewComponent_Conditional_18_Template, 14, 19, "div", 9);
@@ -50606,7 +50606,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$r = ($index, $item) => $item.id;
+const _forTrack0$s = ($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);
@@ -50901,7 +50901,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$r);
+            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$s);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(66, "div", 32);
             i0.ɵɵnamespaceSVG();
@@ -51940,7 +51940,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$y = ["shopNameInput"];
-const _forTrack0$q = ($index, $item) => $item.focusAreaDomain;
+const _forTrack0$r = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 17);
@@ -52285,7 +52285,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 58);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Template, 7, 5, "div", 59, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Template, 7, 5, "div", 59, _forTrack0$r);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52315,7 +52315,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 68);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_For_6_Template, 3, 3, "div", 69, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_For_6_Template, 3, 3, "div", 69, _forTrack0$r);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52345,7 +52345,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 71);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_For_6_Template, 3, 3, "div", 72, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_For_6_Template, 3, 3, "div", 72, _forTrack0$r);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -53760,7 +53760,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: 642 }); })();
-const _forTrack0$p = ($index, $item) => $item.id;
+const _forTrack0$q = ($index, $item) => $item.id;
 function SymphiqConnectGaDashboardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15);
     i0.ɵɵelement(3, "symphiq-indeterminate-spinner", 16);
@@ -53989,7 +53989,7 @@ function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_14_For_2_
 function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_14_For_2_Template, 11, 8, "label", 57, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_14_For_2_Template, 11, 8, "label", 57, _forTrack0$q);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(3, "div", 58);
     i0.ɵɵelementStart(4, "button", 59);
@@ -55945,7 +55945,7 @@ class TargetChangeBadgeComponent {
     }], () => [{ type: i0.ElementRef }], { 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: 27 }); })();
-const _forTrack0$o = ($index, $item) => $item.stageMetric.metric;
+const _forTrack0$p = ($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);
@@ -56462,7 +56462,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, 28, 15, "div", 2, _forTrack0$o);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 28, 15, "div", 2, _forTrack0$p);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -58274,7 +58274,7 @@ class ProgressToTargetChartComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressToTargetChartComponent, { className: "ProgressToTargetChartComponent", filePath: "lib/components/revenue-calculator-dashboard/progress-to-target-chart.component.ts", lineNumber: 66 }); })();
-const _forTrack0$n = ($index, $item) => $item.metric;
+const _forTrack0$o = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 10);
     i0.ɵɵnamespaceSVG();
@@ -58410,7 +58410,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 47, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 47, _forTrack0$o);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -59725,9 +59725,203 @@ class MetricReportModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 483 }); })();
+function UserAvatarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r0.user().avatarImg, i0.ɵɵsanitizeUrl)("alt", ctx_r0.displayName());
+} }
+function UserAvatarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.initials());
+} }
+const AVATAR_COLORS = [
+    { bg: 'bg-purple-600', text: 'text-white' },
+    { bg: 'bg-blue-600', text: 'text-white' },
+    { bg: 'bg-emerald-600', text: 'text-white' },
+    { bg: 'bg-amber-500', text: 'text-white' },
+    { bg: 'bg-rose-600', text: 'text-white' },
+    { bg: 'bg-cyan-600', text: 'text-white' },
+    { bg: 'bg-indigo-600', text: 'text-white' },
+    { bg: 'bg-pink-600', text: 'text-white' },
+    { bg: 'bg-teal-600', text: 'text-white' },
+    { bg: 'bg-orange-500', text: 'text-white' },
+];
+class UserAvatarComponent {
+    constructor() {
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.displayName = computed(() => {
+            const u = this.user();
+            if (!u)
+                return '';
+            if (u.firstName && u.lastName)
+                return `${u.firstName} ${u.lastName}`;
+            if (u.firstName)
+                return u.firstName;
+            return u.email || '';
+        }, ...(ngDevMode ? [{ debugName: "displayName" }] : []));
+        this.initials = computed(() => {
+            const u = this.user();
+            if (!u)
+                return '?';
+            if (u.firstName && u.lastName) {
+                return `${u.firstName.charAt(0)}${u.lastName.charAt(0)}`.toUpperCase();
+            }
+            if (u.firstName) {
+                return u.firstName.charAt(0).toUpperCase();
+            }
+            if (u.email) {
+                return u.email.charAt(0).toUpperCase();
+            }
+            return '?';
+        }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+        this.avatarColor = computed(() => {
+            const u = this.user();
+            if (!u || !u.id)
+                return AVATAR_COLORS[0];
+            const index = u.id % AVATAR_COLORS.length;
+            return AVATAR_COLORS[index];
+        }, ...(ngDevMode ? [{ debugName: "avatarColor" }] : []));
+        this.containerClasses = computed(() => {
+            const color = this.avatarColor();
+            const hasImage = !!this.user()?.avatarImg;
+            const sizeClasses = {
+                'small': 'w-8 h-8 text-xs',
+                'medium': 'w-10 h-10 text-sm',
+                'large': 'w-12 h-12 text-base'
+            };
+            if (hasImage) {
+                return sizeClasses[this.size()];
+            }
+            return `${sizeClasses[this.size()]} ${color.bg} ${color.text}`;
+        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    }
+    static { this.ɵfac = function UserAvatarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserAvatarComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAvatarComponent, selectors: [["symphiq-user-avatar"]], inputs: { viewMode: [1, "viewMode"], user: [1, "user"], size: [1, "size"] }, decls: 3, vars: 2, consts: [[1, "rounded-full", "flex", "items-center", "justify-center", "font-medium", "overflow-hidden", "flex-shrink-0", 3, "ngClass"], [1, "w-full", "h-full", "object-cover", 3, "src", "alt"]], template: function UserAvatarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, UserAvatarComponent_Conditional_1_Template, 1, 2, "img", 1)(2, UserAvatarComponent_Conditional_2_Template, 2, 1, "span");
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(((tmp_1_0 = ctx.user()) == null ? null : tmp_1_0.avatarImg) ? 1 : 2);
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserAvatarComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-user-avatar',
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-full flex items-center justify-center font-medium overflow-hidden flex-shrink-0">
+      @if (user()?.avatarImg) {
+        <img [src]="user()!.avatarImg" [alt]="displayName()" class="w-full h-full object-cover">
+      } @else {
+        <span>{{ initials() }}</span>
+      }
+    </div>
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAvatarComponent, { className: "UserAvatarComponent", filePath: "lib/components/shared/user-avatar.component.ts", lineNumber: 35 }); })();
+function UserDisplayComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.emailClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.user().email);
+} }
+class UserDisplayComponent {
+    constructor() {
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : []));
+        this.avatarSize = input('medium', ...(ngDevMode ? [{ debugName: "avatarSize" }] : []));
+        this.showEmail = input(true, ...(ngDevMode ? [{ debugName: "showEmail" }] : []));
+        this.displayName = computed(() => {
+            const u = this.user();
+            if (!u)
+                return 'Unknown User';
+            if (u.firstName && u.lastName)
+                return `${u.firstName} ${u.lastName}`;
+            if (u.firstName)
+                return u.firstName;
+            return u.email || 'Unknown User';
+        }, ...(ngDevMode ? [{ debugName: "displayName" }] : []));
+        this.nameClasses = computed(() => {
+            return this.viewMode() === ViewModeEnum.DARK
+                ? 'text-white'
+                : 'text-slate-900';
+        }, ...(ngDevMode ? [{ debugName: "nameClasses" }] : []));
+        this.emailClasses = computed(() => {
+            return this.viewMode() === ViewModeEnum.DARK
+                ? 'text-slate-400'
+                : 'text-slate-500';
+        }, ...(ngDevMode ? [{ debugName: "emailClasses" }] : []));
+    }
+    static { this.ɵfac = function UserDisplayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserDisplayComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDisplayComponent, selectors: [["symphiq-user-display"]], inputs: { viewMode: [1, "viewMode"], user: [1, "user"], avatarSize: [1, "avatarSize"], showEmail: [1, "showEmail"] }, decls: 6, vars: 6, consts: [[1, "flex", "items-center", "gap-3"], [3, "viewMode", "user", "size"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function UserDisplayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "symphiq-user-avatar", 1);
+            i0.ɵɵelementStart(2, "div")(3, "p", 2);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, UserDisplayComponent_Conditional_5_Template, 2, 2, "p", 3);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            let tmp_5_0;
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("user", ctx.user())("size", ctx.avatarSize());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.nameClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.displayName());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showEmail() && ((tmp_5_0 = ctx.user()) == null ? null : tmp_5_0.email) ? 5 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserDisplayComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-user-display',
+                standalone: true,
+                imports: [CommonModule, UserAvatarComponent],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div class="flex items-center gap-3">
+      <symphiq-user-avatar
+        [viewMode]="viewMode()"
+        [user]="user()"
+        [size]="avatarSize()"
+      />
+      <div>
+        <p [ngClass]="nameClasses()" class="text-sm font-medium">{{ displayName() }}</p>
+        @if (showEmail() && user()?.email) {
+          <p [ngClass]="emailClasses()" class="text-xs">{{ user()!.email }}</p>
+        }
+      </div>
+    </div>
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], showEmail: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmail", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserDisplayComponent, { className: "UserDisplayComponent", filePath: "lib/components/shared/user-display.component.ts", lineNumber: 27 }); })();
 const _c0$u = ["absoluteInputRef"];
 const _c1$d = ["percentageInputRef"];
-const _forTrack0$m = ($index, $item) => $item.id;
+const _forTrack0$n = ($index, $item) => $item.id;
 function EditMetricTargetModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 18);
@@ -60087,82 +60281,28 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentPaceProjectionRaw() > 0 ? 31 : -1);
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 68);
-} if (rf & 2) {
-    const user_r9 = i0.ɵɵnextContext();
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("src", user_r9.avatarImg, i0.ɵɵsanitizeUrl)("alt", ctx_r1.getUserDisplayName(user_r9));
-} }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-} if (rf & 2) {
-    const user_r9 = i0.ɵɵnextContext();
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getUserInitial(user_r9), " ");
-} }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵconditionalCreate(1, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Conditional_1_Template, 1, 2, "img", 68)(2, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Conditional_2_Template, 1, 1);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div")(4, "p", 69);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 66);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const user_r9 = ctx;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.avatarClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(user_r9.avatarImg ? 1 : 2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.historyUserNameClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.getUserDisplayName(user_r9));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.historyUserEmailClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(user_r9.email);
-} }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵtext(1, " ? ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div")(3, "p", 69);
-    i0.ɵɵtext(4, "Unknown User");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.avatarClasses());
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.historyUserNameClasses());
-} }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵconditionalCreate(2, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_2_Template, 8, 6)(3, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Conditional_3_Template, 5, 2);
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelement(1, "symphiq-user-display", 63);
+    i0.ɵɵelementStart(2, "div", 64)(3, "p", 65);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 64)(5, "p", 65);
+    i0.ɵɵelementStart(5, "p", 66);
     i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 66);
-    i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    let tmp_12_0;
-    const history_r10 = ctx.$implicit;
+    const history_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("user", ctx_r1.getUserById(history_r9.creatorUserId));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_12_0 = ctx_r1.getUserById(history_r10.creatorUserId)) ? 2 : 3, tmp_12_0);
-    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.historyValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatHistoryValue(history_r10.amount ?? 0));
+    i0.ɵɵtextInterpolate(ctx_r1.formatHistoryValue(history_r9.amount ?? 0));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.historyDateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatHistoryDate(history_r10.createdDate));
+    i0.ɵɵtextInterpolate(ctx_r1.formatHistoryDate(history_r9.createdDate));
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_37_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 28)(1, "h4", 58);
@@ -60175,7 +60315,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_37_Template(rf
     i0.ɵɵtext(8, "Amount set");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 61);
-    i0.ɵɵrepeaterCreate(10, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Template, 9, 5, "div", 62, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(10, EditMetricTargetModalComponent_Conditional_0_Conditional_37_For_11_Template, 7, 6, "div", 62, _forTrack0$n);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -60190,9 +60330,9 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_37_Template(rf
     i0.ɵɵrepeater(ctx_r1.filteredHistories());
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetToInitial()); });
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetToInitial()); });
     i0.ɵɵtext(1, " Reset ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -60603,24 +60743,6 @@ class EditMetricTargetModalComponent {
             return undefined;
         return this.users().find(u => u.id === userId);
     }
-    getUserDisplayName(user) {
-        if (user.firstName && user.lastName) {
-            return `${user.firstName} ${user.lastName}`;
-        }
-        if (user.firstName) {
-            return user.firstName;
-        }
-        return user.email || 'Unknown User';
-    }
-    getUserInitial(user) {
-        if (user.firstName) {
-            return user.firstName.charAt(0).toUpperCase();
-        }
-        if (user.email) {
-            return user.email.charAt(0).toUpperCase();
-        }
-        return '?';
-    }
     formatHistoryDate(date) {
         if (!date)
             return '';
@@ -60918,21 +61040,6 @@ class EditMetricTargetModalComponent {
             ? 'divide-slate-700/50'
             : 'divide-slate-200';
     }
-    avatarClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-slate-700 text-slate-300'
-            : 'bg-slate-200 text-slate-600';
-    }
-    historyUserNameClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'text-white'
-            : 'text-slate-900';
-    }
-    historyUserEmailClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'text-slate-400'
-            : 'text-slate-500';
-    }
     historyValueClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-purple-400'
@@ -60953,11 +61060,11 @@ class EditMetricTargetModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
         } }, hostBindings: function EditMetricTargetModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function EditMetricTargetModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingResponse: [1, "pacingResponse"], targetHistories: [1, "targetHistories"], users: [1, "users"], currencySymbol: [1, "currencySymbol"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[100]", 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-0", 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, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [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, "space-y-6"], [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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "mt-6", "p-6", "rounded-xl", "border", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "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, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 3, "ngClass"], [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, "flex", "items-baseline", "gap-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-base", "font-semibold", "mb-4", 3, "ngClass"], [1, "overflow-hidden"], [1, "flex", "justify-between", "items-center", "px-4", "py-2", "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "divide-y", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "px-4", "py-4"], [1, "flex", "items-center", "gap-3"], [1, "text-right"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "w-10", "h-10", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-medium", "overflow-hidden", 3, "ngClass"], [1, "w-full", "h-full", "object-cover", 3, "src", "alt"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "w-10", "h-10", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-medium", 3, "ngClass"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingResponse: [1, "pacingResponse"], targetHistories: [1, "targetHistories"], users: [1, "users"], currencySymbol: [1, "currencySymbol"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[100]", 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-0", 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, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [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, "space-y-6"], [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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "mt-6", "p-6", "rounded-xl", "border", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "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, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 3, "ngClass"], [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, "flex", "items-baseline", "gap-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-base", "font-semibold", "mb-4", 3, "ngClass"], [1, "overflow-hidden"], [1, "flex", "justify-between", "items-center", "px-4", "py-2", "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "divide-y", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "px-4", "py-4"], [3, "viewMode", "user"], [1, "text-right"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Template, 44, 29);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, TooltipDirective, TooltipContainerComponent], encapsulation: 2, data: { animation: [
+        } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, TooltipDirective, TooltipContainerComponent, UserDisplayComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0 }),
@@ -60977,7 +61084,7 @@ class EditMetricTargetModalComponent {
         args: [{
                 selector: 'symphiq-edit-metric-target-modal',
                 standalone: true,
-                imports: [CommonModule, FormsModule, TooltipDirective, TooltipContainerComponent],
+                imports: [CommonModule, FormsModule, TooltipDirective, TooltipContainerComponent, UserDisplayComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('fadeIn', [
@@ -61318,28 +61425,10 @@ class EditMetricTargetModalComponent {
                     <div class="divide-y" [ngClass]="historyDividerClasses()">
                       @for (history of filteredHistories(); track history.id) {
                         <div class="flex justify-between items-center px-4 py-4">
-                          <div class="flex items-center gap-3">
-                            @if (getUserById(history.creatorUserId); as user) {
-                              <div [ngClass]="avatarClasses()" class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium overflow-hidden">
-                                @if (user.avatarImg) {
-                                  <img [src]="user.avatarImg" [alt]="getUserDisplayName(user)" class="w-full h-full object-cover">
-                                } @else {
-                                  {{ getUserInitial(user) }}
-                                }
-                              </div>
-                              <div>
-                                <p [ngClass]="historyUserNameClasses()" class="text-sm font-medium">{{ getUserDisplayName(user) }}</p>
-                                <p [ngClass]="historyUserEmailClasses()" class="text-xs">{{ user.email }}</p>
-                              </div>
-                            } @else {
-                              <div [ngClass]="avatarClasses()" class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium">
-                                ?
-                              </div>
-                              <div>
-                                <p [ngClass]="historyUserNameClasses()" class="text-sm font-medium">Unknown User</p>
-                              </div>
-                            }
-                          </div>
+                          <symphiq-user-display
+                            [viewMode]="viewMode()"
+                            [user]="getUserById(history.creatorUserId)"
+                          />
                           <div class="text-right">
                             <p [ngClass]="historyValueClasses()" class="text-sm font-bold">{{ formatHistoryValue(history.amount ?? 0) }}</p>
                             <p [ngClass]="historyDateClasses()" class="text-xs">{{ formatHistoryDate(history.createdDate) }}</p>
@@ -61394,7 +61483,7 @@ class EditMetricTargetModalComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 424 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 407 }); })();
 const _c0$t = ["absoluteInputRef"];
 const _c1$c = ["percentageInputRef"];
@@ -65259,7 +65348,7 @@ class SearchButtonComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
 const _c0$q = ["searchInput"];
-const _forTrack0$l = ($index, $item) => $item.id;
+const _forTrack0$m = ($index, $item) => $item.id;
 function SearchModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 18);
@@ -65387,7 +65476,7 @@ function SearchModalComponent_Conditional_0_Conditional_14_For_2_Template(rf, ct
 } }
 function SearchModalComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, SearchModalComponent_Conditional_0_Conditional_14_For_2_Template, 17, 13, "button", 19, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(1, SearchModalComponent_Conditional_0_Conditional_14_For_2_Template, 17, 13, "button", 19, _forTrack0$m);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -66521,7 +66610,7 @@ class SimplifiedRecommendationCardComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimplifiedRecommendationCardComponent, { className: "SimplifiedRecommendationCardComponent", filePath: "lib/components/business-analysis-dashboard/simplified-recommendation-card.component.ts", lineNumber: 121 }); })();
 const _c0$p = () => [0, 1, 2];
-const _forTrack0$k = ($index, $item) => $item.id;
+const _forTrack0$l = ($index, $item) => $item.id;
 function RecommendationsTiledGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵtext(1);
@@ -66545,7 +66634,7 @@ function RecommendationsTiledGridComponent_Conditional_14_For_2_Template(rf, ctx
 } }
 function RecommendationsTiledGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵrepeaterCreate(1, RecommendationsTiledGridComponent_Conditional_14_For_2_Template, 1, 3, "symphiq-simplified-recommendation-card", 13, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(1, RecommendationsTiledGridComponent_Conditional_14_For_2_Template, 1, 3, "symphiq-simplified-recommendation-card", 13, _forTrack0$l);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -66837,7 +66926,7 @@ class RecommendationsTiledGridComponent {
     }], null, { recommendations: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendations", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecommendationsTiledGridComponent, { className: "RecommendationsTiledGridComponent", filePath: "lib/components/business-analysis-dashboard/recommendations-tiled-grid.component.ts", lineNumber: 92 }); })();
-const _forTrack0$j = ($index, $item) => $item.id;
+const _forTrack0$k = ($index, $item) => $item.id;
 function CollapsibleSectionGroupComponent_For_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "symphiq-icon", 30);
@@ -67064,7 +67153,7 @@ class CollapsibleSectionGroupComponent {
             i0.ɵɵtext(20, " The information below was gathered from your website and competitor research. While recommendations above are based on this initial analysis, connecting your GA4 data will provide quantitative insights that dramatically improve recommendation accuracy. ");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(21, "div", 16);
-            i0.ɵɵrepeaterCreate(22, CollapsibleSectionGroupComponent_For_23_Template, 15, 17, "div", 17, _forTrack0$j);
+            i0.ɵɵrepeaterCreate(22, CollapsibleSectionGroupComponent_For_23_Template, 15, 17, "div", 17, _forTrack0$k);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -69998,7 +70087,7 @@ class FocusAreaHealthIndicatorComponent {
 (() => { (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$n = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$i = ($index, $item) => $item.id;
+const _forTrack0$j = ($index, $item) => $item.id;
 function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -70019,7 +70108,7 @@ function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
 } }
 function RelatedGoalChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, RelatedGoalChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(1, RelatedGoalChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$j);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -72878,7 +72967,7 @@ class CapabilityMatrixCardComponent {
     }], () => [], { capability: [{ type: i0.Input, args: [{ isSignal: true, alias: "capability", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CapabilityMatrixCardComponent, { className: "CapabilityMatrixCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/capability-matrix-card.component.ts", lineNumber: 118 }); })();
-const _forTrack0$h = ($index, $item) => $item.competitorId || $index;
+const _forTrack0$i = ($index, $item) => $item.competitorId || $index;
 function CompetitiveComparisonCardComponent_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵtext(1);
@@ -72991,7 +73080,7 @@ function CompetitiveComparisonCardComponent_Conditional_13_Template(rf, ctx) { i
     i0.ɵɵelementStart(0, "div", 12)(1, "h6", 21);
     i0.ɵɵtext(2, " Competitor Positions ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, CompetitiveComparisonCardComponent_Conditional_13_For_4_Template, 7, 6, "div", 22, _forTrack0$h);
+    i0.ɵɵrepeaterCreate(3, CompetitiveComparisonCardComponent_Conditional_13_For_4_Template, 7, 6, "div", 22, _forTrack0$i);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -73373,7 +73462,7 @@ class CompetitiveComparisonCardComponent {
 (() => { (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$i = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$g = ($index, $item) => $item.id;
+const _forTrack0$h = ($index, $item) => $item.id;
 function PhaseTimelineCardComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 15);
@@ -73402,7 +73491,7 @@ function PhaseTimelineCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(5, "div", 13);
-    i0.ɵɵrepeaterCreate(6, PhaseTimelineCardComponent_Conditional_8_For_7_Template, 4, 5, "button", 14, _forTrack0$g);
+    i0.ɵɵrepeaterCreate(6, PhaseTimelineCardComponent_Conditional_8_For_7_Template, 4, 5, "button", 14, _forTrack0$h);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -74399,7 +74488,7 @@ class OperationalCategoryCardComponent {
 const _c0$g = a0 => ({ name: "arrow-trending-up", source: a0 });
 const _c1$8 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$f = ($index, $item) => $item.questionId;
+const _forTrack0$g = ($index, $item) => $item.questionId;
 function KeyDriverCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
     i0.ɵɵtext(2);
@@ -74419,7 +74508,7 @@ function KeyDriverCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(3, "span", 12);
     i0.ɵɵtext(4, " Supporting Profile Insights ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(5, KeyDriverCardComponent_Conditional_12_For_6_Template, 3, 3, "div", 13, _forTrack0$f);
+    i0.ɵɵrepeaterCreate(5, KeyDriverCardComponent_Conditional_12_For_6_Template, 3, 3, "div", 13, _forTrack0$g);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -74609,7 +74698,7 @@ class KeyDriverCardComponent {
 const _c0$f = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$7 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$e = ($index, $item) => $item.questionId;
+const _forTrack0$f = ($index, $item) => $item.questionId;
 function BottleneckCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
     i0.ɵɵtext(2);
@@ -74629,7 +74718,7 @@ function BottleneckCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(3, "span", 12);
     i0.ɵɵtext(4, " Supporting Profile Insights ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(5, BottleneckCardComponent_Conditional_12_For_6_Template, 3, 3, "div", 13, _forTrack0$e);
+    i0.ɵɵrepeaterCreate(5, BottleneckCardComponent_Conditional_12_For_6_Template, 3, 3, "div", 13, _forTrack0$f);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -74838,7 +74927,7 @@ const _c0$e = a0 => ({ name: "arrow-right", source: a0 });
 const _c1$6 = a0 => ({ name: "arrow-left", source: a0 });
 const _c2$5 = a0 => ({ name: "arrows-right-left", source: a0 });
 const _c3$4 = a0 => ({ name: "scale", source: a0 });
-const _forTrack0$d = ($index, $item) => $item.metric;
+const _forTrack0$e = ($index, $item) => $item.metric;
 function MetricRelationshipsCardComponent_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
@@ -74937,7 +75026,7 @@ function MetricRelationshipsCardComponent_Conditional_3_Template(rf, ctx) { if (
     i0.ɵɵtext(5, " Trade-offs ");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div", 8);
-    i0.ɵɵrepeaterCreate(7, MetricRelationshipsCardComponent_Conditional_3_For_8_Template, 7, 9, "div", 9, _forTrack0$d);
+    i0.ɵɵrepeaterCreate(7, MetricRelationshipsCardComponent_Conditional_3_For_8_Template, 7, 9, "div", 9, _forTrack0$e);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -75374,7 +75463,7 @@ class RelatedMetricCardComponent {
     }], null, { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }], relationship: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationship", required: true }] }], relationshipDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationshipDescription", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: true }] }], sharedGoalIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharedGoalIds", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedMetricCardComponent, { className: "RelatedMetricCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/related-metric-card.component.ts", lineNumber: 68 }); })();
-const _forTrack0$c = ($index, $item) => $item.metric;
+const _forTrack0$d = ($index, $item) => $item.metric;
 function RelatedMetricsListComponent_Conditional_1_For_14_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-related-metric-card", 12);
@@ -75402,7 +75491,7 @@ function RelatedMetricsListComponent_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "div", 10);
-    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_1_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$c);
+    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_1_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$d);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -75448,7 +75537,7 @@ function RelatedMetricsListComponent_Conditional_2_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "div", 10);
-    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_2_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$c);
+    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_2_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$d);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -75494,7 +75583,7 @@ function RelatedMetricsListComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "div", 10);
-    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_3_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$c);
+    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_3_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$d);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -75540,7 +75629,7 @@ function RelatedMetricsListComponent_Conditional_4_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "div", 10);
-    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_4_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$c);
+    i0.ɵɵrepeaterCreate(13, RelatedMetricsListComponent_Conditional_4_For_14_Template, 1, 6, "symphiq-related-metric-card", 11, _forTrack0$d);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -76951,7 +77040,7 @@ const _c3$1 = a0 => [a0];
 const _c4 = () => [];
 const _c5 = a0 => ({ name: "chart-bar", source: a0 });
 const _c6 = a0 => ({ name: "user", source: a0 });
-const _forTrack0$b = ($index, $item) => $item.id || $index;
+const _forTrack0$c = ($index, $item) => $item.id || $index;
 const _forTrack1$2 = ($index, $item) => $item.dimension || $index;
 const _forTrack2$1 = ($index, $item) => $item.phase || $index;
 const _forTrack3$1 = ($index, $item) => $item.driver;
@@ -77277,7 +77366,7 @@ function ProfileSectionContentComponent_Conditional_4_For_2_Template(rf, ctx) {
 } }
 function ProfileSectionContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_4_For_2_Template, 2, 3, "div", null, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_4_For_2_Template, 2, 3, "div", null, _forTrack0$c);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -77294,7 +77383,7 @@ function ProfileSectionContentComponent_Conditional_5_For_2_Template(rf, ctx) {
 } }
 function ProfileSectionContentComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_5_For_2_Template, 1, 8, "symphiq-goal-card", 48, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_5_For_2_Template, 1, 8, "symphiq-goal-card", 48, _forTrack0$c);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -77310,7 +77399,7 @@ function ProfileSectionContentComponent_Conditional_6_For_2_Template(rf, ctx) {
 } }
 function ProfileSectionContentComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_6_For_2_Template, 1, 3, "symphiq-capability-matrix-card", 49, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_6_For_2_Template, 1, 3, "symphiq-capability-matrix-card", 49, _forTrack0$c);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -77365,7 +77454,7 @@ function ProfileSectionContentComponent_Conditional_9_For_2_Template(rf, ctx) {
 } }
 function ProfileSectionContentComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_9_For_2_Template, 1, 2, "symphiq-operational-category-card", 53, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(1, ProfileSectionContentComponent_Conditional_9_For_2_Template, 1, 2, "symphiq-operational-category-card", 53, _forTrack0$c);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -77661,7 +77750,7 @@ function ProfileSectionContentComponent_Conditional_11_Conditional_2_Template(rf
     i0.ɵɵtext(2, "Tactical Recommendations");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 74);
-    i0.ɵɵrepeaterCreate(4, ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Template, 14, 12, "div", 16, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(4, ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Template, 14, 12, "div", 16, _forTrack0$c);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -79698,7 +79787,7 @@ class ProfileSectionContentComponent {
     }], null, { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], executiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "executiveSummary", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], sectionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIndex", 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(ProfileSectionContentComponent, { className: "ProfileSectionContentComponent", filePath: "lib/components/profile-analysis-dashboard/profile-section-content.component.ts", lineNumber: 760 }); })();
-const _forTrack0$a = ($index, $item) => $item.id || $index;
+const _forTrack0$b = ($index, $item) => $item.id || $index;
 function GoalObjectivesModalContentComponent_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 9);
     i0.ɵɵtext(1);
@@ -79956,7 +80045,7 @@ class GoalObjectivesModalContentComponent {
     static { this.ɵfac = function GoalObjectivesModalContentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GoalObjectivesModalContentComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GoalObjectivesModalContentComponent, selectors: [["symphiq-goal-objectives-modal-content"]], inputs: { goal: [1, "goal"], viewMode: [1, "viewMode"] }, decls: 3, vars: 0, consts: [[1, "space-y-6"], [1, "rounded-lg", "p-5", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "font-semibold", "text-base", "mb-2", 3, "ngClass"], [1, "text-sm", "mb-3", 3, "ngClass"], [1, "p-3", "rounded-lg", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-3", "mb-3"], [1, "w-full", "px-5", "py-4", "rounded-lg", "border-2", "transition-all", "duration-200", "hover:scale-[1.01]", "active:scale-[0.99]", "cursor-pointer", "group", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "mt-0.5", 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, "flex-1"], [1, "text-xs", "font-medium", "mb-1", 3, "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "w-full", "px-5", "py-4", "rounded-lg", "border-2", "transition-all", "duration-200", "hover:scale-[1.01]", "active:scale-[0.99]", "cursor-pointer", "group", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "rounded-lg", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "text-left"], [1, "text-xs", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "transition-transform", "group-hover:translate-x-1", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function GoalObjectivesModalContentComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, GoalObjectivesModalContentComponent_For_2_Template, 14, 9, "div", 1, _forTrack0$a);
+            i0.ɵɵrepeaterCreate(1, GoalObjectivesModalContentComponent_For_2_Template, 14, 9, "div", 1, _forTrack0$b);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             let tmp_0_0;
@@ -80056,7 +80145,7 @@ class GoalObjectivesModalContentComponent {
     }], null, { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GoalObjectivesModalContentComponent, { className: "GoalObjectivesModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/goal-objectives-modal-content.component.ts", lineNumber: 94 }); })();
-const _forTrack0$9 = ($index, $item) => $item.id || $index;
+const _forTrack0$a = ($index, $item) => $item.id || $index;
 const _forTrack1$1 = ($index, $item) => ($item == null ? null : $item.questionId) || $index;
 function ObjectiveStrategiesModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "p", 6);
@@ -80497,7 +80586,7 @@ class ObjectiveStrategiesModalContentComponent {
             i0.ɵɵconditionalCreate(3, ObjectiveStrategiesModalContentComponent_Conditional_3_Template, 10, 5, "div", 3);
             i0.ɵɵconditionalCreate(4, ObjectiveStrategiesModalContentComponent_Conditional_4_Template, 6, 2, "div", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(5, ObjectiveStrategiesModalContentComponent_For_6_Template, 17, 10, "div", 5, _forTrack0$9);
+            i0.ɵɵrepeaterCreate(5, ObjectiveStrategiesModalContentComponent_For_6_Template, 17, 10, "div", 5, _forTrack0$a);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             let tmp_1_0;
@@ -80798,7 +80887,7 @@ class TooltipContentBuilder {
     }
 }
-const _forTrack0$8 = ($index, $item) => $item.id || $index;
+const _forTrack0$9 = ($index, $item) => $item.id || $index;
 const _forTrack1 = ($index, $item) => $item.type + $item.label;
 const _forTrack2 = ($index, $item) => $item.order || $index;
 const _forTrack3 = ($index, $item) => ($item == null ? null : $item.questionId) || $index;
@@ -82521,7 +82610,7 @@ class StrategyRecommendationsModalContentComponent {
             i0.ɵɵconditionalCreate(5, StrategyRecommendationsModalContentComponent_Conditional_5_Template, 2, 2, "span", 4);
             i0.ɵɵconditionalCreate(6, StrategyRecommendationsModalContentComponent_Conditional_6_Template, 2, 2, "span", 4);
             i0.ɵɵelementEnd()();
-            i0.ɵɵrepeaterCreate(7, StrategyRecommendationsModalContentComponent_For_8_Template, 35, 31, "div", 5, _forTrack0$8);
+            i0.ɵɵrepeaterCreate(7, StrategyRecommendationsModalContentComponent_For_8_Template, 35, 31, "div", 5, _forTrack0$9);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             let tmp_1_0;
@@ -84551,7 +84640,7 @@ class GapDetailModalContentComponent {
 (() => { (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$6 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$7 = ($index, $item) => $item.id || $index;
+const _forTrack0$8 = ($index, $item) => $item.id || $index;
 function OpportunityDetailModalContentComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "h4", 10);
     i0.ɵɵnamespaceSVG();
@@ -84662,7 +84751,7 @@ function OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_Tem
     i0.ɵɵtext(2, " Related Goals ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 25);
-    i0.ɵɵrepeaterCreate(4, OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_For_5_Template, 4, 6, "div", 26, _forTrack0$7);
+    i0.ɵɵrepeaterCreate(4, OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_For_5_Template, 4, 6, "div", 26, _forTrack0$8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const goals_r6 = i0.ɵɵnextContext();
@@ -85455,7 +85544,7 @@ class SimplifiedGoalCardComponent {
     }], null, { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: true }] }], 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(SimplifiedGoalCardComponent, { className: "SimplifiedGoalCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/simplified-goal-card.component.ts", lineNumber: 127 }); })();
-const _forTrack0$6 = ($index, $item) => $item.id;
+const _forTrack0$7 = ($index, $item) => $item.id;
 function StrategicGoalsTiledGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵtext(1);
@@ -85479,7 +85568,7 @@ function StrategicGoalsTiledGridComponent_Conditional_14_For_2_Template(rf, ctx)
 } }
 function StrategicGoalsTiledGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵrepeaterCreate(1, StrategicGoalsTiledGridComponent_Conditional_14_For_2_Template, 1, 3, "symphiq-simplified-goal-card", 13, _forTrack0$6);
+    i0.ɵɵrepeaterCreate(1, StrategicGoalsTiledGridComponent_Conditional_14_For_2_Template, 1, 3, "symphiq-simplified-goal-card", 13, _forTrack0$7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -85693,7 +85782,7 @@ class StrategicGoalsTiledGridComponent {
     }], null, { goals: [{ type: i0.Input, args: [{ isSignal: true, alias: "goals", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrategicGoalsTiledGridComponent, { className: "StrategicGoalsTiledGridComponent", filePath: "lib/components/profile-analysis-dashboard/cards/strategic-goals-tiled-grid.component.ts", lineNumber: 69 }); })();
-const _forTrack0$5 = ($index, $item) => $item.id;
+const _forTrack0$6 = ($index, $item) => $item.id;
 function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "symphiq-icon", 31);
@@ -86063,7 +86152,7 @@ class CollapsibleAnalysisSectionGroupComponent {
             i0.ɵɵtext(20);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(21, "div", 16);
-            i0.ɵɵrepeaterCreate(22, CollapsibleAnalysisSectionGroupComponent_For_23_Template, 16, 14, "div", 17, _forTrack0$5);
+            i0.ɵɵrepeaterCreate(22, CollapsibleAnalysisSectionGroupComponent_For_23_Template, 16, 14, "div", 17, _forTrack0$6);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -86257,7 +86346,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 _forTrack0$4 = ($index, $item) => $item.code;
+const _forTrack0$5 = ($index, $item) => $item.code;
 function BillingCurrencySelectorCardComponent_For_15_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "label", 11)(1, "input", 12);
@@ -86406,7 +86495,7 @@ class BillingCurrencySelectorCardComponent {
             i0.ɵɵtext(10, " Choose the currency for your subscription ");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
-            i0.ɵɵrepeaterCreate(14, BillingCurrencySelectorCardComponent_For_15_Template, 10, 12, "label", 11, _forTrack0$4);
+            i0.ɵɵrepeaterCreate(14, BillingCurrencySelectorCardComponent_For_15_Template, 10, 12, "label", 11, _forTrack0$5);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -87438,7 +87527,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], monthlyComparisonPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyComparisonPrice", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 274 }); })();
-const _forTrack0$3 = ($index, $item) => $item.planItemPrice.id;
+const _forTrack0$4 = ($index, $item) => $item.planItemPrice.id;
 function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14);
     i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 18);
@@ -87464,7 +87553,7 @@ function PlanSelectionContainerComponent_Conditional_20_For_2_Template(rf, ctx)
 } }
 function PlanSelectionContainerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, PlanSelectionContainerComponent_Conditional_20_For_2_Template, 1, 5, "symphiq-plan-card", 20, _forTrack0$3);
+    i0.ɵɵrepeaterCreate(1, PlanSelectionContainerComponent_Conditional_20_For_2_Template, 1, 5, "symphiq-plan-card", 20, _forTrack0$4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -87778,7 +87867,7 @@ class PlanSelectionContainerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }], checkout: [{ type: i0.Output, args: ["checkout"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanSelectionContainerComponent, { className: "PlanSelectionContainerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-selection-container.component.ts", lineNumber: 107 }); })();
-const _forTrack0$2 = ($index, $item) => $item.id;
+const _forTrack0$3 = ($index, $item) => $item.id;
 function ShopProfileCategoryListComponent_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 0)(2, "div", 2)(3, "div", 3)(4, "div", 4);
@@ -87889,7 +87978,7 @@ class ShopProfileCategoryListComponent {
     static { this.ɵfac = function ShopProfileCategoryListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileCategoryListComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileCategoryListComponent, selectors: [["symphiq-shop-profile-category-list"]], inputs: { viewMode: [1, "viewMode"], items: [1, "items"] }, outputs: { itemClick: "itemClick" }, decls: 3, vars: 0, consts: [[1, "space-y-4"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", "hover:scale-[1.01]", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-lg", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", 1, "flex-shrink-0", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "flex", "justify-between", "items-center"], [1, "text-sm", "font-medium", 3, "ngClass"]], template: function ShopProfileCategoryListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, ShopProfileCategoryListComponent_For_2_Template, 19, 14, "div", 1, _forTrack0$2);
+            i0.ɵɵrepeaterCreate(1, ShopProfileCategoryListComponent_For_2_Template, 19, 14, "div", 1, _forTrack0$3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -88035,8 +88124,19 @@ class ShopProfileViewToggleComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileViewToggleComponent, { className: "ShopProfileViewToggleComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-view-toggle.component.ts", lineNumber: 33 }); })();
-function ShopProfileQuestionCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 2);
+const _forTrack0$2 = ($index, $item) => $item.answer.id;
+function ShopProfileQuestionCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 11);
+    i0.ɵɵelement(2, "path", 13);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.checkboxClasses());
+} }
+function ShopProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -88045,31 +88145,23 @@ function ShopProfileQuestionCardComponent_Conditional_3_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.question().context, " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_4_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
+function ShopProfileQuestionCardComponent_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const focusArea_r3 = ctx.$implicit;
+    const focusArea_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.focusAreaChipClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r3), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r2), " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 10)(2, "span", 11);
+function ShopProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 14)(2, "span", 15);
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 12);
-    i0.ɵɵlistener("mouseenter", function ShopProfileQuestionCardComponent_Conditional_4_Template_button_mouseenter_4_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showFocusAreaTooltip($event)); })("mouseleave", function ShopProfileQuestionCardComponent_Conditional_4_Template_button_mouseleave_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.hideTooltip()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 13);
-    i0.ɵɵelement(6, "path", 14);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(7, "div", 15);
-    i0.ɵɵrepeaterCreate(8, ShopProfileQuestionCardComponent_Conditional_4_For_9_Template, 2, 2, "span", 16, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 16);
+    i0.ɵɵrepeaterCreate(5, ShopProfileQuestionCardComponent_Conditional_7_For_6_Template, 2, 2, "span", 17, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -88077,49 +88169,55 @@ function ShopProfileQuestionCardComponent_Conditional_4_Template(rf, ctx) { if (
     i0.ɵɵproperty("ngClass", ctx_r0.relatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Related to ", ctx_r0.relatedFocusAreas().length, " focus area(s) ");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.infoIconClasses());
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.relatedFocusAreas());
 } }
-function ShopProfileQuestionCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 17)(2, "div", 18);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 8);
-    i0.ɵɵelement(4, "path", 19);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(5, "div", 20)(6, "div", 21);
-    i0.ɵɵtext(7, " Your Answer ");
+function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "symphiq-user-avatar", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 21);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 22);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.answeredContainerClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.checkmarkClasses());
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngClass", ctx_r0.answerLabelClasses());
-    i0.ɵɵadvance(2);
+    const answerData_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.getAnswerDisplay(), " ");
+    i0.ɵɵtextInterpolate1(" ", answerData_r3.answer.answer, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("user", answerData_r3.user);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 23)(2, "div", 24);
+function ShopProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 7, null, null, _forTrack0$2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.questionAnswers());
+} }
+function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 22)(2, "div", 23);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 25);
-    i0.ɵɵelement(4, "path", 26);
+    i0.ɵɵelementStart(3, "svg", 24);
+    i0.ɵɵelement(4, "path", 25);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(5, "div", 27);
+    i0.ɵɵelement(5, "div", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div")(7, "div", 28);
+    i0.ɵɵelementStart(6, "div")(7, "div", 27);
     i0.ɵɵtext(8, " Not answered yet ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 29);
+    i0.ɵɵelementStart(9, "div", 28);
     i0.ɵɵtext(10, " Click the button below to provide your answer ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -88141,10 +88239,24 @@ class ShopProfileQuestionCardComponent {
         this.question = input.required(...(ngDevMode ? [{ debugName: "question" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.viewType = input('category', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+        this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
+        this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.answerClick = output();
-        this.tooltipService = inject(TooltipService);
+        this.questionAnswers = computed(() => {
+            const questionId = this.question().id;
+            const answers = this.profileShopAnswers();
+            const allUsers = this.users();
+            if (!questionId || !answers)
+                return [];
+            return answers
+                .filter(a => a.profileQuestionId === questionId)
+                .map(answer => ({
+                answer,
+                user: allUsers.find(u => u.id === answer.creatorUserId)
+            }));
+        }, ...(ngDevMode ? [{ debugName: "questionAnswers" }] : []));
         this.isAnswered = computed(() => {
-            return this.question().answered === true;
+            return this.questionAnswers().length > 0;
         }, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
         this.showFocusAreaChips = computed(() => {
             return this.viewType() === 'category';
@@ -88157,30 +88269,11 @@ class ShopProfileQuestionCardComponent {
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
     }
-    getAnswerDisplay() {
-        const q = this.question();
-        if (q.answer) {
-            return q.answer;
-        }
-        if (q.answerText) {
-            return q.answerText;
-        }
-        if (q.answerDetails) {
-            return JSON.stringify(q.answerDetails);
-        }
-        return 'Answer provided';
-    }
-    showFocusAreaTooltip(event) {
-        const target = event.target;
-        const rect = target.getBoundingClientRect();
-        const focusAreas = this.relatedFocusAreas();
-        const tooltipContent = focusAreas
-            .map(fa => `• ${this.getFocusAreaTitle(fa)}`)
-            .join('\n');
-        this.tooltipService.show('text', tooltipContent, rect, 'top');
-    }
-    hideTooltip() {
-        this.tooltipService.hide();
+    formatAnswerDate(date) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
     }
     onAnswerClick() {
         this.answerClick.emit(this.question());
@@ -88208,35 +88301,30 @@ class ShopProfileQuestionCardComponent {
             ? 'text-slate-600'
             : 'text-slate-400';
     }
-    infoIconClasses() {
-        return this.isLightMode()
-            ? 'text-slate-500 hover:text-slate-700 hover:bg-slate-100'
-            : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700';
-    }
     focusAreaChipClasses() {
         return this.isLightMode()
             ? 'bg-blue-100 text-blue-700 border border-blue-200'
             : 'bg-blue-900/30 text-blue-300 border border-blue-700/50';
     }
-    answeredContainerClasses() {
-        return this.isLightMode()
-            ? 'bg-emerald-50 border-emerald-200'
-            : 'bg-emerald-900/20 border-emerald-700/50';
-    }
-    checkmarkClasses() {
+    checkboxClasses() {
         return this.isLightMode()
-            ? 'bg-emerald-500 text-white'
-            : 'bg-emerald-400 text-slate-900';
+            ? 'bg-blue-600 text-white'
+            : 'bg-blue-500 text-white';
     }
-    answerLabelClasses() {
+    answerChipClasses() {
         return this.isLightMode()
-            ? 'text-emerald-700'
-            : 'text-emerald-400';
+            ? 'bg-slate-100 border border-slate-200'
+            : 'bg-slate-700/50 border border-slate-600/50';
     }
     answerTextClasses() {
         return this.isLightMode()
             ? 'text-slate-700'
-            : 'text-slate-300';
+            : 'text-slate-200';
+    }
+    answerDateClasses() {
+        return this.isLightMode()
+            ? 'text-slate-500'
+            : 'text-slate-400';
     }
     unansweredContainerClasses() {
         return this.isLightMode()
@@ -88280,149 +88368,155 @@ class ShopProfileQuestionCardComponent {
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg shadow-blue-500/20';
     }
     static { this.ɵfac = function ShopProfileQuestionCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileQuestionCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"] }, outputs: { answerClick: "answerClick" }, decls: 13, vars: 8, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "rounded-lg", "p-4", "border", 3, "ngClass"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "justify-end"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["type", "button", 1, "w-4", "h-4", "rounded-full", "flex", "items-center", "justify-center", "transition-colors", 3, "mouseenter", "mouseleave", "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, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "h3", 1);
-            i0.ɵɵtext(2);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"] }, outputs: { answerClick: "answerClick" }, decls: 16, vars: 9, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "justify-end"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(5, ShopProfileQuestionCardComponent_Conditional_5_Template, 3, 1, "div", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(3, ShopProfileQuestionCardComponent_Conditional_3_Template, 2, 2, "p", 2);
-            i0.ɵɵconditionalCreate(4, ShopProfileQuestionCardComponent_Conditional_4_Template, 10, 3, "div", 3);
-            i0.ɵɵconditionalCreate(5, ShopProfileQuestionCardComponent_Conditional_5_Template, 10, 5, "div", 4)(6, ShopProfileQuestionCardComponent_Conditional_6_Template, 11, 6, "div", 5);
-            i0.ɵɵelementStart(7, "div", 6)(8, "button", 7);
-            i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Template_button_click_8_listener() { return ctx.onAnswerClick(); });
-            i0.ɵɵelementStart(9, "span");
-            i0.ɵɵtext(10);
+            i0.ɵɵconditionalCreate(6, ShopProfileQuestionCardComponent_Conditional_6_Template, 2, 2, "p", 5);
+            i0.ɵɵconditionalCreate(7, ShopProfileQuestionCardComponent_Conditional_7_Template, 7, 2, "div", 6);
+            i0.ɵɵconditionalCreate(8, ShopProfileQuestionCardComponent_Conditional_8_Template, 3, 0, "div", 7)(9, ShopProfileQuestionCardComponent_Conditional_9_Template, 11, 6, "div", 8);
+            i0.ɵɵelementStart(10, "div", 9)(11, "button", 10);
+            i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Template_button_click_11_listener() { return ctx.onAnswerClick(); });
+            i0.ɵɵelementStart(12, "span");
+            i0.ɵɵtext(13);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(11, "svg", 8);
-            i0.ɵɵelement(12, "path", 9);
+            i0.ɵɵelementStart(14, "svg", 11);
+            i0.ɵɵelement(15, "path", 12);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.questionTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.question().question, " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.question().context ? 3 : -1);
+            i0.ɵɵconditional(ctx.isAnswered() ? 5 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 4 : -1);
+            i0.ɵɵconditional(ctx.question().context ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isAnswered() ? 5 : 6);
+            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.questionAnswers().length > 0 ? 8 : 9);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
-        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
         args: [{
                 selector: 'symphiq-shop-profile-question-card',
                 standalone: true,
-                imports: [CommonModule],
+                imports: [CommonModule, UserAvatarComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
-      <!-- Question Text -->
-      <h3 [ngClass]="questionTextClasses()" class="text-lg font-bold mb-2">
-        {{ question().question }}
-      </h3>
-      <!-- Context -->
-      @if (question().context) {
-        <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mb-4">
-          {{ question().context }}
-        </p>
-      }
-      <!-- Related Focus Areas (only show when viewing by category) -->
-      @if (showFocusAreaChips() && relatedFocusAreas().length > 0) {
-        <div class="mb-4">
-          <div class="flex items-center gap-2 mb-2">
-            <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
-              Related to {{ relatedFocusAreas().length }} focus area(s)
-            </span>
-            <button
-              type="button"
-              (mouseenter)="showFocusAreaTooltip($event)"
-              (mouseleave)="hideTooltip()"
-              [ngClass]="infoIconClasses()"
-              class="w-4 h-4 rounded-full flex items-center justify-center transition-colors">
-              <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"></path>
-              </svg>
-            </button>
-          </div>
-          <div class="flex flex-wrap gap-2">
-            @for (focusArea of relatedFocusAreas(); track focusArea) {
-              <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
-                {{ getFocusAreaTitle(focusArea) }}
-              </span>
-            }
-          </div>
-        </div>
-      }
-      <!-- Answer Section -->
-      @if (isAnswered()) {
-        <div [ngClass]="answeredContainerClasses()" class="rounded-lg p-4 border">
-          <div class="flex items-start gap-3">
-            <div [ngClass]="checkmarkClasses()" class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center">
-              <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="M5 13l4 4L19 7"></path>
-              </svg>
-            </div>
-            <div class="flex-1 min-w-0">
-              <div [ngClass]="answerLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
-                Your Answer
-              </div>
-              <div [ngClass]="answerTextClasses()" class="text-sm">
-                {{ getAnswerDisplay() }}
-              </div>
-            </div>
-          </div>
-        </div>
-      } @else {
-        <!-- Unanswered State -->
-        <div [ngClass]="unansweredContainerClasses()" class="rounded-lg p-6 border-2 border-dashed text-center">
-          <div class="flex flex-col items-center gap-3">
-            <!-- Empty State Icon -->
-            <div [ngClass]="emptyStateIconContainerClasses()" class="relative w-16 h-16">
-              <svg [ngClass]="emptyStateIconClasses()" class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-              <div [ngClass]="emptyStateDotClasses()" class="absolute top-1 right-1 w-3 h-3 rounded-full border-2"></div>
-            </div>
-            <div>
-              <div [ngClass]="unansweredLabelClasses()" class="text-sm font-semibold mb-1">
-                Not answered yet
-              </div>
-              <div [ngClass]="unansweredTextClasses()" class="text-xs">
-                Click the button below to provide your answer
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-      <!-- Action Button -->
-      <div class="mt-4 flex justify-end">
-        <button
-          type="button"
-          (click)="onAnswerClick()"
-          [ngClass]="buttonClasses()"
-          class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
-          <span>{{ isAnswered() ? 'Edit Answer' : 'Answer' }}</span>
-          <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="M9 5l7 7-7 7"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
+      <!-- Question Header with Checkbox -->
+      <div class="flex items-start gap-3">
+        <div class="flex-1 min-w-0">
+          <h3 [ngClass]="questionTextClasses()" class="text-lg font-bold mb-2">
+            {{ question().question }}
+          </h3>
+        </div>
+        @if (isAnswered()) {
+          <div [ngClass]="checkboxClasses()" class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center">
+            <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="M5 13l4 4L19 7"></path>
+            </svg>
+          </div>
+        }
+      </div>
+      <!-- Context -->
+      @if (question().context) {
+        <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mb-4">
+          {{ question().context }}
+        </p>
+      }
+      <!-- Related Focus Areas (only show when viewing by category) -->
+      @if (showFocusAreaChips() && relatedFocusAreas().length > 0) {
+        <div class="mb-4">
+          <div class="mb-2">
+            <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
+              Related to {{ relatedFocusAreas().length }} focus area(s)
+            </span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            @for (focusArea of relatedFocusAreas(); track focusArea) {
+              <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
+                {{ getFocusAreaTitle(focusArea) }}
+              </span>
+            }
+          </div>
+        </div>
+      }
+      <!-- Answer Section -->
+      @if (questionAnswers().length > 0) {
+        <!-- Answered State - Show answer chips -->
+        <div class="flex flex-wrap gap-3">
+          @for (answerData of questionAnswers(); track answerData.answer.id) {
+            <div [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+              <span [ngClass]="answerTextClasses()" class="text-sm font-medium">
+                {{ answerData.answer.answer }}
+              </span>
+              <symphiq-user-avatar
+                [viewMode]="viewMode()"
+                [user]="answerData.user"
+                size="small"
+              />
+            </div>
+            <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+              Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
+            </div>
+          }
+        </div>
+      } @else {
+        <!-- Unanswered State -->
+        <div [ngClass]="unansweredContainerClasses()" class="rounded-lg p-6 border-2 border-dashed text-center">
+          <div class="flex flex-col items-center gap-3">
+            <!-- Empty State Icon -->
+            <div [ngClass]="emptyStateIconContainerClasses()" class="relative w-16 h-16">
+              <svg [ngClass]="emptyStateIconClasses()" class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+              <div [ngClass]="emptyStateDotClasses()" class="absolute top-1 right-1 w-3 h-3 rounded-full border-2"></div>
+            </div>
+            <div>
+              <div [ngClass]="unansweredLabelClasses()" class="text-sm font-semibold mb-1">
+                Not answered yet
+              </div>
+              <div [ngClass]="unansweredTextClasses()" class="text-xs">
+                Click the button below to provide your answer
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+      <!-- Action Button -->
+      <div class="mt-4 flex justify-end">
+        <button
+          type="button"
+          (click)="onAnswerClick()"
+          [ngClass]="buttonClasses()"
+          class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
+          <span>{{ isAnswered() ? 'Edit Answer' : 'Answer' }}</span>
+          <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="M9 5l7 7-7 7"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
   `
             }]
-    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 118 }); })();
+    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 119 }); })();
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];
@@ -88459,11 +88553,11 @@ function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_25_For_2_T
 } if (rf & 2) {
     const question_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("question", question_r4)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType());
+    i0.ɵɵproperty("question", question_r4)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType())("profileShopAnswers", ctx_r1.profileShopAnswers())("users", ctx_r1.users());
 } }
 function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionsModalComponent_Conditional_0_Conditional_25_For_2_Template, 1, 3, "symphiq-shop-profile-question-card", 28, _forTrack0$1);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionsModalComponent_Conditional_0_Conditional_25_For_2_Template, 1, 5, "symphiq-shop-profile-question-card", 28, _forTrack0$1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -88539,6 +88633,8 @@ class ShopProfileQuestionsModalComponent {
     constructor() {
         this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.questions = input([], ...(ngDevMode ? [{ debugName: "questions" }] : []));
+        this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
+        this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.selectedCategoryId = input(null, ...(ngDevMode ? [{ debugName: "selectedCategoryId" }] : []));
         this.selectedFocusAreaId = input(null, ...(ngDevMode ? [{ debugName: "selectedFocusAreaId" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -88735,7 +88831,7 @@ class ShopProfileQuestionsModalComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
-        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 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-sm", 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-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 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-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "space-y-4"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "question", "viewMode", "viewType"], [3, "answerClick", "question", "viewMode", "viewType"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 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-sm", 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-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 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-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "space-y-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "question", "viewMode", "viewType", "profileShopAnswers", "users"], [3, "answerClick", "question", "viewMode", "viewType", "profileShopAnswers", "users"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ShopProfileQuestionsModalComponent_Conditional_0_Template, 26, 19, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -88775,111 +88871,113 @@ class ShopProfileQuestionsModalComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isOpen()) {
-      <div
-        #modalWrapper
-        class="fixed inset-0 overflow-y-auto z-[9000]"
-        (click)="onBackdropClick()">
-        <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-sm"
-            aria-hidden="true"
-            @fadeIn></div>
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-          <div
-            #modalContent
-            (click)="$event.stopPropagation()"
-            [ngClass]="containerClasses()"
-            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">
-                  <!-- Label -->
-                  <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
-                    {{ viewType() === 'category' ? 'Category' : 'Focus Area' }}
-                  </div>
-                  <!-- Title -->
-                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-3">
-                    {{ displayTitle() }}
-                  </h3>
-                  <!-- Progress Bar -->
-                  <div class="space-y-2">
-                    <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
-                      <div
-                        [ngClass]="progressBarFillClasses()"
-                        class="h-full transition-all duration-500 ease-out rounded-full"
-                        [style.width.%]="progressPercentage()"></div>
-                    </div>
-                    <div [ngClass]="progressTextClasses()" class="text-sm font-medium">
-                      {{ answeredCount() }} / {{ totalCount() }} questions answered
-                    </div>
-                  </div>
-                </div>
-                <!-- Close Button -->
-                <button
-                  type="button"
-                  (click)="onClose()"
-                  [ngClass]="closeButtonClasses()"
-                  class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4">
-                  <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-8 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
-              @if (filteredQuestions().length === 0) {
-                <div class="text-center py-12">
-                  <div [ngClass]="emptyStateIconClasses()" class="w-16 h-16 mx-auto mb-4">
-                    <svg class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                    </svg>
-                  </div>
-                  <h3 [ngClass]="emptyStateTitleClasses()" class="text-lg font-semibold mb-2">
-                    No questions found
-                  </h3>
-                  <p [ngClass]="emptyStateTextClasses()" class="text-sm">
-                    There are no questions for this {{ viewType() === 'category' ? 'category' : 'focus area' }}.
-                  </p>
-                </div>
-              } @else {
-                <div class="space-y-4">
-                  @for (question of filteredQuestions(); track question.id) {
-                    <symphiq-shop-profile-question-card
-                      [question]="question"
-                      [viewMode]="viewMode()"
-                      [viewType]="viewType()"
-                      (answerClick)="onQuestionAnswerClick($event)" />
-                  }
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    }
+                template: `
+    @if (isOpen()) {
+      <div
+        #modalWrapper
+        class="fixed inset-0 overflow-y-auto z-[9000]"
+        (click)="onBackdropClick()">
+        <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-sm"
+            aria-hidden="true"
+            @fadeIn></div>
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+          <div
+            #modalContent
+            (click)="$event.stopPropagation()"
+            [ngClass]="containerClasses()"
+            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">
+                  <!-- Label -->
+                  <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
+                    {{ viewType() === 'category' ? 'Category' : 'Focus Area' }}
+                  </div>
+                  <!-- Title -->
+                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-3">
+                    {{ displayTitle() }}
+                  </h3>
+                  <!-- Progress Bar -->
+                  <div class="space-y-2">
+                    <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
+                      <div
+                        [ngClass]="progressBarFillClasses()"
+                        class="h-full transition-all duration-500 ease-out rounded-full"
+                        [style.width.%]="progressPercentage()"></div>
+                    </div>
+                    <div [ngClass]="progressTextClasses()" class="text-sm font-medium">
+                      {{ answeredCount() }} / {{ totalCount() }} questions answered
+                    </div>
+                  </div>
+                </div>
+                <!-- Close Button -->
+                <button
+                  type="button"
+                  (click)="onClose()"
+                  [ngClass]="closeButtonClasses()"
+                  class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4">
+                  <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-8 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
+              @if (filteredQuestions().length === 0) {
+                <div class="text-center py-12">
+                  <div [ngClass]="emptyStateIconClasses()" class="w-16 h-16 mx-auto mb-4">
+                    <svg class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                  </div>
+                  <h3 [ngClass]="emptyStateTitleClasses()" class="text-lg font-semibold mb-2">
+                    No questions found
+                  </h3>
+                  <p [ngClass]="emptyStateTextClasses()" class="text-sm">
+                    There are no questions for this {{ viewType() === 'category' ? 'category' : 'focus area' }}.
+                  </p>
+                </div>
+              } @else {
+                <div class="space-y-6">
+                  @for (question of filteredQuestions(); track question.id) {
+                    <symphiq-shop-profile-question-card
+                      [question]="question"
+                      [viewMode]="viewMode()"
+                      [viewType]="viewType()"
+                      [profileShopAnswers]="profileShopAnswers()"
+                      [users]="users()"
+                      (answerClick)="onQuestionAnswerClick($event)" />
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
   `
             }]
-    }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], questionAnswerClick: [{ type: i0.Output, args: ["questionAnswerClick"] }], modalContent: [{
+    }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], questionAnswerClick: [{ type: i0.Output, args: ["questionAnswerClick"] }], modalContent: [{
             type: ViewChild,
             args: ['modalContent']
         }], modalWrapper: [{
             type: ViewChild,
             args: ['modalWrapper']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 135 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 137 }); })();
 const _c0$3 = ["chartdiv"];
 function ShopProfileStatusCardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
@@ -88930,6 +89028,8 @@ class ShopProfileStatusCardComponent {
         this.totalQuestions = input(0, ...(ngDevMode ? [{ debugName: "totalQuestions" }] : []));
         this.answeredQuestions = input(0, ...(ngDevMode ? [{ debugName: "answeredQuestions" }] : []));
         this.questions = input([], ...(ngDevMode ? [{ debugName: "questions" }] : []));
+        this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
+        this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.startCategoryQuestions = output();
         this.questionAnswerRequested = output();
         this.currentView = signal('category', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
@@ -89222,7 +89322,7 @@ class ShopProfileStatusCardComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested" }, decls: 26, vars: 17, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "items-center", "justify-center", "mb-8"], [1, "w-full", 2, "height", "300px"], [1, "rounded-xl", "p-6", "mb-8", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "leading-relaxed", 3, "ngClass"], [3, "close", "questionAnswerClick", "isOpen", "questions", "selectedCategoryId", "selectedFocusAreaId", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested" }, decls: 26, vars: 19, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "items-center", "justify-center", "mb-8"], [1, "w-full", 2, "height", "300px"], [1, "rounded-xl", "p-6", "mb-8", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "leading-relaxed", 3, "ngClass"], [3, "close", "questionAnswerClick", "isOpen", "questions", "profileShopAnswers", "users", "selectedCategoryId", "selectedFocusAreaId", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5);
             i0.ɵɵnamespaceSVG();
@@ -89276,7 +89376,7 @@ class ShopProfileStatusCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.hasQuestions() ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("isOpen", ctx.questionsModalOpen())("questions", ctx.questions())("selectedCategoryId", ctx.selectedCategoryId())("selectedFocusAreaId", ctx.selectedFocusAreaId())("viewMode", ctx.viewMode());
+            i0.ɵɵproperty("isOpen", ctx.questionsModalOpen())("questions", ctx.questions())("profileShopAnswers", ctx.profileShopAnswers())("users", ctx.users())("selectedCategoryId", ctx.selectedCategoryId())("selectedFocusAreaId", ctx.selectedFocusAreaId())("viewMode", ctx.viewMode());
         } }, dependencies: [CommonModule, i1$1.NgClass, ShopProfileCategoryListComponent, ShopProfileViewToggleComponent, ShopProfileQuestionsModalComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileStatusCardComponent, [{
@@ -89286,95 +89386,97 @@ class ShopProfileStatusCardComponent {
                 standalone: true,
                 imports: [CommonModule, ShopProfileCategoryListComponent, ShopProfileViewToggleComponent, ShopProfileQuestionsModalComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-              </svg>
-            </div>
-            <div>
-              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-                Shop Profile
-              </h2>
-              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-                {{ answeredQuestions() }} of {{ totalQuestions() }} questions answered
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div [ngClass]="contentClasses()" class="p-6">
-        <!-- Donut Chart -->
-        <div class="flex items-center justify-center mb-8">
-          <div #chartdiv class="w-full" style="height: 300px;"></div>
-        </div>
-        <!-- Explanatory Text -->
-        <div [ngClass]="getIntroductionContainerClasses()" class="rounded-xl p-6 mb-8">
-          <div class="flex items-start gap-4">
-            <div [ngClass]="getIntroIconClasses()" class="flex-shrink-0 p-2 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-            </div>
-            <div class="flex-1">
-              @if (shouldShowFullIntro()) {
-                <h3 [ngClass]="getIntroTitleClasses()" class="font-semibold text-lg mb-3">
-                  Why Shop Profile Questions Matter
-                </h3>
-                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
-                  Shop Profile questions are a <strong>critical part of your onboarding journey</strong>. These questions provide crucial qualitative data to the Symphiq engine, enabling personalized analysis and strategic recommendations tailored to your business. Your insights help us understand your unique operations, challenges, and goals.
-                </p>
-              } @else {
-                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
-                  <strong>Great progress!</strong> Continue answering questions to unlock deeper insights and more accurate recommendations. Each answer helps Symphiq better understand your business context.
-                </p>
-              }
-            </div>
-          </div>
-        </div>
-        <!-- View Toggle -->
-        @if (hasQuestions()) {
-          <div class="flex justify-center mb-6">
-            <symphiq-shop-profile-view-toggle
-              [viewMode]="viewMode()"
-              [currentView]="currentView()"
-              (viewChanged)="handleViewChange($event)"
-            />
-          </div>
-          <!-- Category/Focus Area List -->
-          <symphiq-shop-profile-category-list
-            [viewMode]="viewMode()"
-            [items]="currentGroupedQuestions()"
-            (itemClick)="handleItemClick($event)"
-          />
-        }
-      </div>
-    </div>
-    <!-- Questions Modal -->
-    <symphiq-shop-profile-questions-modal
-      [isOpen]="questionsModalOpen()"
-      [questions]="questions()"
-      [selectedCategoryId]="selectedCategoryId()"
-      [selectedFocusAreaId]="selectedFocusAreaId()"
-      [viewMode]="viewMode()"
-      (close)="onQuestionsModalClose()"
-      (questionAnswerClick)="onQuestionAnswerClick($event)" />
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
+              </svg>
+            </div>
+            <div>
+              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+                Shop Profile
+              </h2>
+              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+                {{ answeredQuestions() }} of {{ totalQuestions() }} questions answered
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div [ngClass]="contentClasses()" class="p-6">
+        <!-- Donut Chart -->
+        <div class="flex items-center justify-center mb-8">
+          <div #chartdiv class="w-full" style="height: 300px;"></div>
+        </div>
+        <!-- Explanatory Text -->
+        <div [ngClass]="getIntroductionContainerClasses()" class="rounded-xl p-6 mb-8">
+          <div class="flex items-start gap-4">
+            <div [ngClass]="getIntroIconClasses()" class="flex-shrink-0 p-2 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div class="flex-1">
+              @if (shouldShowFullIntro()) {
+                <h3 [ngClass]="getIntroTitleClasses()" class="font-semibold text-lg mb-3">
+                  Why Shop Profile Questions Matter
+                </h3>
+                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
+                  Shop Profile questions are a <strong>critical part of your onboarding journey</strong>. These questions provide crucial qualitative data to the Symphiq engine, enabling personalized analysis and strategic recommendations tailored to your business. Your insights help us understand your unique operations, challenges, and goals.
+                </p>
+              } @else {
+                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
+                  <strong>Great progress!</strong> Continue answering questions to unlock deeper insights and more accurate recommendations. Each answer helps Symphiq better understand your business context.
+                </p>
+              }
+            </div>
+          </div>
+        </div>
+        <!-- View Toggle -->
+        @if (hasQuestions()) {
+          <div class="flex justify-center mb-6">
+            <symphiq-shop-profile-view-toggle
+              [viewMode]="viewMode()"
+              [currentView]="currentView()"
+              (viewChanged)="handleViewChange($event)"
+            />
+          </div>
+          <!-- Category/Focus Area List -->
+          <symphiq-shop-profile-category-list
+            [viewMode]="viewMode()"
+            [items]="currentGroupedQuestions()"
+            (itemClick)="handleItemClick($event)"
+          />
+        }
+      </div>
+    </div>
+    <!-- Questions Modal -->
+    <symphiq-shop-profile-questions-modal
+      [isOpen]="questionsModalOpen()"
+      [questions]="questions()"
+      [profileShopAnswers]="profileShopAnswers()"
+      [users]="users()"
+      [selectedCategoryId]="selectedCategoryId()"
+      [selectedFocusAreaId]="selectedFocusAreaId()"
+      [viewMode]="viewMode()"
+      (close)="onQuestionsModalClose()"
+      (questionAnswerClick)="onQuestionAnswerClick($event)" />
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], chartDiv: [{
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 117 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 119 }); })();
 function ShopProfileStickyFooterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -90225,7 +90327,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Te
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("totalQuestions", ctx_r1.totalShopQuestions())("answeredQuestions", ctx_r1.answeredShopQuestions())("questions", ctx_r1.profileShopQuestions() || i0.ɵɵpureFunction0(4, _c0$2));
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("totalQuestions", ctx_r1.totalShopQuestions())("answeredQuestions", ctx_r1.answeredShopQuestions())("questions", ctx_r1.profileShopQuestions() || i0.ɵɵpureFunction0(6, _c0$2))("profileShopAnswers", ctx_r1.profileShopAnswers() || i0.ɵɵpureFunction0(7, _c0$2))("users", ctx_r1.users() || i0.ɵɵpureFunction0(8, _c0$2));
 } }
 function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_1_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
@@ -90320,7 +90422,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Te
     i0.ɵɵproperty("sections", ctx_r1.nonStrategicSections())("viewMode", ctx_r1.viewMode())("executiveSummary", ctx_r1.executiveSummary())("focusAreaExecutiveSummary", ctx_r1.focusAreaExecutiveSummary())("metricExecutiveSummary", ctx_r1.metricExecutiveSummary())("metricName", ctx_r1.metricName())("allGoals", ctx_r1.allGoals())("allMetrics", ctx_r1.allMetrics())("allCharts", ctx_r1.allCharts())("allInsights", ctx_r1.allInsights())("businessProfile", ctx_r1.profile());
 } }
 function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template, 2, 5, "div", 29);
+    i0.ɵɵconditionalCreate(0, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template, 2, 9, "div", 29);
     i0.ɵɵconditionalCreate(1, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_1_Template, 3, 1, "div", 29);
     i0.ɵɵconditionalCreate(2, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Template, 2, 11, "div");
 } if (rf & 2) {
@@ -90836,12 +90938,15 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : []));
         this.profileShop = input(...(ngDevMode ? [undefined, { debugName: "profileShop" }] : []));
         this.profileShopQuestions = input(...(ngDevMode ? [undefined, { debugName: "profileShopQuestions" }] : []));
+        this.profileShopAnswers = input(...(ngDevMode ? [undefined, { debugName: "profileShopAnswers" }] : []));
+        this.profileShopAnswerHistories = input(...(ngDevMode ? [undefined, { debugName: "profileShopAnswerHistories" }] : []));
         this.itemStatusProfileShop = input(...(ngDevMode ? [undefined, { debugName: "itemStatusProfileShop" }] : []));
         this.itemStatusProfileAnalysis = input(...(ngDevMode ? [undefined, { debugName: "itemStatusProfileAnalysis" }] : []));
         this.planCardInfos = input(...(ngDevMode ? [undefined, { debugName: "planCardInfos" }] : []));
         this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
         this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
         this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
+        this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
@@ -91737,7 +91842,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _t.first);
         } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 51, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "viewMode", "totalQuestions", "answeredQuestions", "questions"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileShopAnswers: [1, "profileShopAnswers"], profileShopAnswerHistories: [1, "profileShopAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 51, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileShopAnswers", "users"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div");
@@ -91851,658 +91956,660 @@ class SymphiqProfileAnalysisDashboardComponent {
                 standalone: true,
                 imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, FloatingTocComponent, SectionNavigationComponent, GradeBadgeComponent, ShopWelcomeBannerComponent, FocusAreaWelcomeBannerComponent, MetricWelcomeBannerComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent, NapkinVisualPlaceholderComponent, TooltipContainerComponent, ProfileSectionContentComponent, ProfileAnalysisModalComponent, ModalComponent, GoalCardComponent, GoalObjectivesModalContentComponent, ObjectiveStrategiesModalContentComponent, StrategyRecommendationsModalContentComponent, CategoryDetailModalContentComponent, StrengthDetailModalContentComponent, GapDetailModalContentComponent, OpportunityDetailModalContentComponent, BusinessAnalysisModalComponent, SectionDividerComponent, SymphiqIconComponent, RelatedGoalChipsComponent, StrategicGoalsTiledGridComponent, CollapsibleAnalysisSectionGroupComponent, BillingCurrencySelectorCardComponent, PlanSelectionPlaceholderCardComponent, PlanSelectionContainerComponent, SubscriptionValuePropositionCardComponent, StickySubscriptionContinueButtonComponent, ContentGenerationProgressComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-      <!-- Scroll Progress Bar -->
-      <div
-          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-            [style.width.%]="scrollProgress()"
-            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-            class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-      <div class="relative z-[51]">
-        <!-- Dashboard Header -->
-        <symphiq-dashboard-header
-            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
-            [subtitle]="getAnalysisSubtitle()"
-            [currentSection]="getAnalysisSubtitle()"
-            [viewMode]="viewMode()"
-            [viewModeLabel]="displayModeLabel()"
-            [isLoading]="isLoading()"
-            [requestedByUser]="requestedByUser()"
-            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
-            (searchClick)="openSearch()"
-            (viewModeClick)="openViewModeSwitcher()"
-        />
-        <!-- Journey Progress Banner -->
-        @if (isSimplifiedView() && !isOnboarded()) {
-          <symphiq-journey-progress-indicator
-              [viewMode]="viewMode()"
-              [currentStepId]="currentStepId()"
-              [showNextStepAction]="shouldShowContinueButton()"
-              [forDemo]="forDemo()"
-              [maxAccessibleStepId]="maxAccessibleStepId()"
-              (nextStepClick)="nextStepClick.emit()"
-              (stepClick)="stepClick.emit($event)"
-          />
-        }
-        <!-- Main Content -->
-        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton() || shouldShowShopProfileStickyFooter()">
-          <!-- Welcome Banner (Simplified View Only) -->
-          @if (isSimplifiedView()) {
-            <div class="mb-12">
-              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
-                <symphiq-shop-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-              @if (isFocusAreaAnalysis()) {
-                <symphiq-focus-area-welcome-banner
-                    [viewMode]="viewMode()"
-                    [focusAreaDomain]="focusAreaDomain()"
-                    [focusAreaName]="focusAreaName()"
-                    [focusAreaDetails]="focusAreaDetails()"
-                />
-              }
-              @if (isMetricAnalysis()) {
-                <symphiq-metric-welcome-banner
-                    [viewMode]="viewMode()"
-                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-            </div>
-          }
-          <!-- Simplified View Content -->
-          @if (isSimplifiedView()) {
-            <!-- Shop Profile Status Card -->
-            @if (shouldShowShopProfileStatus() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-              <div class="mb-8">
-                <symphiq-shop-profile-status-card
-                    [viewMode]="viewMode()"
-                    [totalQuestions]="totalShopQuestions()"
-                    [answeredQuestions]="answeredShopQuestions()"
-                    [questions]="profileShopQuestions() || []"
-                    (startCategoryQuestions)="handleStartCategoryQuestions($event)"
-                />
-              </div>
-            }
-            <!-- Strategic Insights & Goals (or Subscription Flow) -->
-            @if (profileAnalysis()) {
-              <div class="mb-8">
-                @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
-                  @if (isProfileShopGenerating() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-                    <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                      <symphiq-content-generation-progress
-                          [itemStatus]="itemStatusProfileShop()"
-                          [viewMode]="viewMode()"
-                          title="Generating Your Shop Profile"
-                          subtitle="We're analyzing your data to create shop specific questions and answers. They will appear when ready."
-                      />
-                    </div>
-                  } @else {
-                    <symphiq-strategic-goals-tiled-grid
-                        [goals]="strategicRoadmapGoals()"
-                        [viewMode]="viewMode()"
-                        (viewMoreClick)="openGoalModal($event)"
-                    />
-                  }
-              } @else {
-                <!-- Subscription Value Proposition -->
-                @if (!hasBillingCurrency() || isEditingCurrency()) {
-                  @if (!hasBillingCurrency()) {
-                    <div class="mb-8">
-                      <symphiq-subscription-value-proposition-card
-                          [viewMode]="viewMode()"
-                      />
-                    </div>
-                  }
-                  <!-- Currency Selection -->
-                  <symphiq-billing-currency-selector-card
-                      [viewMode]="viewMode()"
-                      [isLoading]="isCurrencySelectionLoading()"
-                      [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
-                      (currencySelected)="handleCurrencyChange($event)"
-                  />
-                } @else if (showPlanSelection()) {
-                  <!-- Plan Selection -->
-                  <div class="mb-32">
-                    <symphiq-plan-selection-container
-                        [viewMode]="viewMode()"
-                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                        [planCardInfos]="planCardInfos()"
-                        [isLoading]="isPlanLoading()"
-                        [selectedPeriodUnit]="selectedPeriodUnit()"
-                        (periodUnitChanged)="handlePeriodUnitChange($event)"
-                        (planSelected)="handlePlanSelection($event)"
-                        (editCurrency)="handleEditCurrencyClick()"
-                        (checkout)="checkoutPlanClick.emit($event)"
-                    />
-                  </div>
-                } @else {
-                  <symphiq-plan-selection-placeholder-card
-                      [viewMode]="viewMode()"
-                      [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                      (editCurrency)="handleEditCurrencyClick()"
-                  />
-                }
-              }
-              </div>
-            }
-            <!-- Supporting Business Context -->
-            @if (nonStrategicSections().length > 0) {
-              <div>
-                <symphiq-collapsible-analysis-section-group
-                    [sections]="nonStrategicSections()"
-                    [viewMode]="viewMode()"
-                    [executiveSummary]="executiveSummary()"
-                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
-                    [metricExecutiveSummary]="metricExecutiveSummary()"
-                    [metricName]="metricName()"
-                    [allGoals]="allGoals()"
-                    [allMetrics]="allMetrics()"
-                    [allCharts]="allCharts()"
-                    [allInsights]="allInsights()"
-                    [businessProfile]="profile()"
-                />
-              </div>
-            }
-          }
-          <!-- Compact & Expanded View Content -->
-          @if (!isSimplifiedView()) {
-            <!-- SHOP Executive Summary -->
-            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
-              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
-                <!-- Summary Banner -->
-                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
-                  <div class="space-y-6">
-                    <div class="flex items-start justify-between gap-4">
-                      <div class="flex-1">
-                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
-                          Executive Summary
-                        </h2>
-                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
-                          {{ summary.gradeRationale }}
-                        </p>
-                      </div>
-                      @if (summary.overallGrade) {
-                        <symphiq-grade-badge
-                            [grade]="summary.overallGrade"
-                            [gradeRationale]="summary.gradeRationale || ''"
-                            [viewMode]="viewMode()"
-                        />
-                      }
-                    </div>
-                    @if (summary.narrative) {
-                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
-                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
-                          Analysis Narrative
-                        </h3>
-                        <div class="relative">
-                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
-                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
-                              <symphiq-napkin-visual-placeholder
-                                  [visual]="summary.napkinVisual"
-                                  [viewMode]="viewMode()"
-                              />
-                            </div>
-                          }
-                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ summary.narrative }}
-                          </p>
-                          <div class="clear-both"></div>
-                        </div>
-                      </div>
-                    }
-                    <!-- Stats -->
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                      <button
-                          type="button"
-                          (click)="onKeyStrengthsClick(summary)"
-                          [ngClass]="getKeyStrengthsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Key Strengths
-                        </div>
-                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.keyStrengths?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getKeyStrengthsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="onCriticalGapsClick(summary)"
-                          [ngClass]="getCriticalGapsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Critical Gaps
-                        </div>
-                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.criticalGaps?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getCriticalGapsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="scrollToQuickWins()"
-                          [ngClass]="getQuickWinsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Quick Wins
-                        </div>
-                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.quickWins?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getQuickWinsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-y-1 animate-bounce"
-                          />
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <!-- Quick Wins -->
-                @if (summary.quickWins && summary.quickWins.length > 0) {
-                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
-                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
-                      Quick Wins
-                    </h3>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                      @for (win of summary.quickWins; track $index) {
-                        <div [ngClass]="getQuickWinCardClasses()"
-                             class="rounded-xl p-6 transition-all duration-300">
-                          <div class="space-y-4">
-                            <div class="flex items-start gap-3">
-                          <span [ngClass]="getNumberBadgeClasses()"
-                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
-                            {{ $index + 1 }}
-                          </span>
-                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
-                                {{ win.action }}
-                              </p>
-                            </div>
-                            <div class="flex flex-wrap gap-2">
-                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
-                                class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.effort) }} Effort
-                          </span>
-                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
-                                    class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.impact) }} Impact
-                          </span>
-                            </div>
-                            @if (win.estimatedTimeframe) {
-                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
-                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                                <span>{{ win.estimatedTimeframe }}</span>
-                              </div>
-                            }
-                            @if (win.relatedGoalId) {
-                              <div class="space-y-2">
-                                <h4 [ngClass]="getMetaTextClasses()"
-                                    class="text-xs font-semibold uppercase tracking-wider">
-                                  Related Goal
-                                </h4>
-                                <symphiq-related-goal-chips
-                                    [relatedGoalIds]="[win.relatedGoalId]"
-                                    [allGoals]="allGoals()"
-                                    [viewMode]="viewMode()"
-                                />
-                              </div>
-                            }
-                          </div>
-                        </div>
-                      }
-                    </div>
-                  </div>
-                }
-              </section>
-            }
-            <!-- FOCUS_AREA Executive Summary -->
-            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
-              <symphiq-focus-area-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleTopPrioritiesClick()"
-                  (priorityDetailClick)="handlePriorityDetailClick($event)"
-              />
-            }
-            <!-- METRIC Executive Summary -->
-            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
-              <symphiq-metric-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [metricName]="metricName()"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
-                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
-              />
-            }
-            <!-- Divider Before First Section -->
-            @if (sections(); as sectionList) {
-              @if (sectionList.length > 0 && sectionList[0].icon) {
-                <symphiq-section-divider
-                    [viewMode]="viewMode()"
-                    [sectionIcon]="sectionList[0].icon"
-                />
-              }
-            }
-            <!-- Profile Analysis Sections -->
-            @if (sections(); as sectionList) {
-              <section class="space-y-8">
-                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
-                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
-                       class="rounded-xl p-8 scroll-mt-24">
-                    <!-- Icon and Title -->
-                    <div class="flex items-start gap-3 mb-6">
-                      @if (section.icon) {
-                        <div [ngClass]="getSectionIconClasses()"
-                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
-                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
-                        </div>
-                      }
-                      <div class="flex-1">
-                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
-                          {{ section.title }}
-                        </h3>
-                      </div>
-                    </div>
-                    <!-- Description and Visual Side-by-Side -->
-                    @if (section.description || (section.visual && section.visual.enabled)) {
-                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
-                           [class.lg:flex-row-reverse]="idx % 2 === 0">
-                        @if (section.visual && section.visual.enabled) {
-                          <div class="w-full lg:w-2/3">
-                            <symphiq-napkin-visual-placeholder
-                                [visual]="section.visual"
-                                [viewMode]="viewMode()"
-                            />
-                          </div>
-                        }
-                        @if (section.description) {
-                          <div class="w-full"
-                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
-                          <p [ngClass]="getSectionDescriptionClasses()"
-                             class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ section.description }}
-                          </p>
-                          </div>
-                        }
-                      </div>
-                    }
-                    <!-- Section Content -->
-                    <symphiq-profile-section-content
-                        [section]="section"
-                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
-                        [viewMode]="viewMode()"
-                        [sectionIndex]="idx"
-                        [allGoals]="allGoals()"
-                        [allMetrics]="allMetrics()"
-                        [allCharts]="allCharts()"
-                        [allInsights]="allInsights()"
-                        [businessProfile]="profile()"
-                    />
-                  </div>
-                  <!-- Section Divider (between sections) -->
-                  @if (!last) {
-                    <symphiq-section-divider
-                        [viewMode]="viewMode()"
-                        [sectionIcon]="sectionList[idx + 1].icon"
-                    />
-                  }
-                }
-              </section>
-            }
-          }
-        </main>
-        <!-- Table of Contents (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-floating-toc
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-        <!-- Section Navigation Dots (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-section-navigation
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-        <!-- Search Modal -->
-        <symphiq-search-modal
-            [isOpen]="isSearchOpen()"
-            [isLightMode]="isLightMode()"
-            (close)="closeSearch()"
-        />
-        <!-- View Mode Switcher Modal -->
-        <symphiq-view-mode-switcher-modal
-            [isOpen]="isViewModeSwitcherOpen()"
-            [currentMode]="currentDisplayMode()"
-            [viewMode]="viewMode()"
-            (close)="closeViewModeSwitcher()"
-            (modeSelected)="handleDisplayModeChange($event)"
-        />
-        <!-- Profile Analysis Modal -->
-        <symphiq-profile-analysis-modal
-            [isLightMode]="isLightMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allBusinessInsights]="allBusinessInsights()"
-            [allCharts]="allCharts()"
-        >
-          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
-            <symphiq-goal-card
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-                [isInModal]="true"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [currentModalState]="getCurrentModalState()"
-                [businessProfile]="profile()"
-            />
-          }
-          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
-            <symphiq-goal-objectives-modal-content
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
-            <symphiq-objective-strategies-modal-content
-                [objective]="data.objective"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
-            <symphiq-strategy-recommendations-modal-content
-                [strategy]="data.strategy"
-                [objectiveTitle]="data.objectiveTitle"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [allBusinessInsights]="allBusinessInsights()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
-            <symphiq-category-detail-modal-content
-                [category]="data.category"
-                [viewMode]="data.viewMode"
-                [scrollToSection]="data.scrollToSection"
-            />
-          }
-          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
-            <symphiq-strength-detail-modal-content
-                [strength]="data.strength"
-                [viewMode]="data.viewMode"
-                [allFunnelStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
-            <symphiq-gap-detail-modal-content
-                [gap]="data.gap"
-                [viewMode]="data.viewMode"
-                [allGoals]="allGoals()"
-                [allWeaknesses]="funnelWeaknesses()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
-            <symphiq-opportunity-detail-modal-content
-                [opportunity]="data.opportunity"
-                [viewMode]="data.viewMode"
-                [allStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-        </symphiq-profile-analysis-modal>
-        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
-        <symphiq-funnel-analysis-modal
-            [isLightMode]="isLightMode()"
-            [viewMode]="viewMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allCharts]="allCharts()"
-        />
-        <!-- Business Analysis Modal (for napkin visuals and other content) -->
-        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
-        <!-- Tooltip Container -->
-        <symphiq-tooltip-container/>
-        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
-        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-          <symphiq-sticky-subscription-continue-button
-              [viewMode]="viewMode()"
-              [isEnabled]="hasCurrencySelected()"
-              [isLoading]="isCurrencySelectionLoading()"
-              (continueClick)="handleStickyButtonClick()"
-          />
-        }
-        <!-- Shop Profile Sticky Footer -->
-        @if (shouldShowShopProfileStickyFooter()) {
-          <symphiq-shop-profile-sticky-footer
-              [viewMode]="viewMode()"
-              [totalQuestions]="totalShopQuestions()"
-              [answeredQuestions]="answeredShopQuestions()"
-              (continueClick)="handleShopProfileContinueClick()"
-          />
-        }
-        <!-- Sticky Footer for Edit Currency Mode -->
-        @if (isEditingCurrency()) {
-          <div
-            [ngClass]="getEditCurrencyFooterClasses()"
-            class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
-          >
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-              <div class="flex items-center gap-4">
-                <button
-                  (click)="handleCancelCurrencyEdit()"
-                  [ngClass]="getEditCurrencyCancelButtonClasses()"
-                  class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
-                >
-                  Cancel
-                </button>
-                <button
-                  (click)="handleContinueToPlans()"
-                  [disabled]="!editingCurrencySelection()"
-                  [ngClass]="getEditCurrencyContinueButtonClasses()"
-                  class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
-                >
-                  <span>Continue to Plans</span>
-                  <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
+                template: `
+    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+      <!-- Scroll Progress Bar -->
+      <div
+          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+            [style.width.%]="scrollProgress()"
+            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+            class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+      <div class="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
+            [subtitle]="getAnalysisSubtitle()"
+            [currentSection]="getAnalysisSubtitle()"
+            [viewMode]="viewMode()"
+            [viewModeLabel]="displayModeLabel()"
+            [isLoading]="isLoading()"
+            [requestedByUser]="requestedByUser()"
+            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
+            (searchClick)="openSearch()"
+            (viewModeClick)="openViewModeSwitcher()"
+        />
+        <!-- Journey Progress Banner -->
+        @if (isSimplifiedView() && !isOnboarded()) {
+          <symphiq-journey-progress-indicator
+              [viewMode]="viewMode()"
+              [currentStepId]="currentStepId()"
+              [showNextStepAction]="shouldShowContinueButton()"
+              [forDemo]="forDemo()"
+              [maxAccessibleStepId]="maxAccessibleStepId()"
+              (nextStepClick)="nextStepClick.emit()"
+              (stepClick)="stepClick.emit($event)"
+          />
+        }
+        <!-- Main Content -->
+        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton() || shouldShowShopProfileStickyFooter()">
+          <!-- Welcome Banner (Simplified View Only) -->
+          @if (isSimplifiedView()) {
+            <div class="mb-12">
+              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                <symphiq-shop-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+              @if (isFocusAreaAnalysis()) {
+                <symphiq-focus-area-welcome-banner
+                    [viewMode]="viewMode()"
+                    [focusAreaDomain]="focusAreaDomain()"
+                    [focusAreaName]="focusAreaName()"
+                    [focusAreaDetails]="focusAreaDetails()"
+                />
+              }
+              @if (isMetricAnalysis()) {
+                <symphiq-metric-welcome-banner
+                    [viewMode]="viewMode()"
+                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+            </div>
+          }
+          <!-- Simplified View Content -->
+          @if (isSimplifiedView()) {
+            <!-- Shop Profile Status Card -->
+            @if (shouldShowShopProfileStatus() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+              <div class="mb-8">
+                <symphiq-shop-profile-status-card
+                    [viewMode]="viewMode()"
+                    [totalQuestions]="totalShopQuestions()"
+                    [answeredQuestions]="answeredShopQuestions()"
+                    [questions]="profileShopQuestions() || []"
+                    [profileShopAnswers]="profileShopAnswers() || []"
+                    [users]="users() || []"
+                    (startCategoryQuestions)="handleStartCategoryQuestions($event)"
+                />
+              </div>
+            }
+            <!-- Strategic Insights & Goals (or Subscription Flow) -->
+            @if (profileAnalysis()) {
+              <div class="mb-8">
+                @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
+                  @if (isProfileShopGenerating() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                    <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                      <symphiq-content-generation-progress
+                          [itemStatus]="itemStatusProfileShop()"
+                          [viewMode]="viewMode()"
+                          title="Generating Your Shop Profile"
+                          subtitle="We're analyzing your data to create shop specific questions and answers. They will appear when ready."
+                      />
+                    </div>
+                  } @else {
+                    <symphiq-strategic-goals-tiled-grid
+                        [goals]="strategicRoadmapGoals()"
+                        [viewMode]="viewMode()"
+                        (viewMoreClick)="openGoalModal($event)"
+                    />
+                  }
+              } @else {
+                <!-- Subscription Value Proposition -->
+                @if (!hasBillingCurrency() || isEditingCurrency()) {
+                  @if (!hasBillingCurrency()) {
+                    <div class="mb-8">
+                      <symphiq-subscription-value-proposition-card
+                          [viewMode]="viewMode()"
+                      />
+                    </div>
+                  }
+                  <!-- Currency Selection -->
+                  <symphiq-billing-currency-selector-card
+                      [viewMode]="viewMode()"
+                      [isLoading]="isCurrencySelectionLoading()"
+                      [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
+                      (currencySelected)="handleCurrencyChange($event)"
+                  />
+                } @else if (showPlanSelection()) {
+                  <!-- Plan Selection -->
+                  <div class="mb-32">
+                    <symphiq-plan-selection-container
+                        [viewMode]="viewMode()"
+                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                        [planCardInfos]="planCardInfos()"
+                        [isLoading]="isPlanLoading()"
+                        [selectedPeriodUnit]="selectedPeriodUnit()"
+                        (periodUnitChanged)="handlePeriodUnitChange($event)"
+                        (planSelected)="handlePlanSelection($event)"
+                        (editCurrency)="handleEditCurrencyClick()"
+                        (checkout)="checkoutPlanClick.emit($event)"
+                    />
+                  </div>
+                } @else {
+                  <symphiq-plan-selection-placeholder-card
+                      [viewMode]="viewMode()"
+                      [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                      (editCurrency)="handleEditCurrencyClick()"
+                  />
+                }
+              }
+              </div>
+            }
+            <!-- Supporting Business Context -->
+            @if (nonStrategicSections().length > 0) {
+              <div>
+                <symphiq-collapsible-analysis-section-group
+                    [sections]="nonStrategicSections()"
+                    [viewMode]="viewMode()"
+                    [executiveSummary]="executiveSummary()"
+                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
+                    [metricExecutiveSummary]="metricExecutiveSummary()"
+                    [metricName]="metricName()"
+                    [allGoals]="allGoals()"
+                    [allMetrics]="allMetrics()"
+                    [allCharts]="allCharts()"
+                    [allInsights]="allInsights()"
+                    [businessProfile]="profile()"
+                />
+              </div>
+            }
+          }
+          <!-- Compact & Expanded View Content -->
+          @if (!isSimplifiedView()) {
+            <!-- SHOP Executive Summary -->
+            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
+              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
+                <!-- Summary Banner -->
+                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
+                  <div class="space-y-6">
+                    <div class="flex items-start justify-between gap-4">
+                      <div class="flex-1">
+                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
+                          Executive Summary
+                        </h2>
+                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
+                          {{ summary.gradeRationale }}
+                        </p>
+                      </div>
+                      @if (summary.overallGrade) {
+                        <symphiq-grade-badge
+                            [grade]="summary.overallGrade"
+                            [gradeRationale]="summary.gradeRationale || ''"
+                            [viewMode]="viewMode()"
+                        />
+                      }
+                    </div>
+                    @if (summary.narrative) {
+                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
+                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
+                          Analysis Narrative
+                        </h3>
+                        <div class="relative">
+                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
+                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
+                              <symphiq-napkin-visual-placeholder
+                                  [visual]="summary.napkinVisual"
+                                  [viewMode]="viewMode()"
+                              />
+                            </div>
+                          }
+                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ summary.narrative }}
+                          </p>
+                          <div class="clear-both"></div>
+                        </div>
+                      </div>
+                    }
+                    <!-- Stats -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <button
+                          type="button"
+                          (click)="onKeyStrengthsClick(summary)"
+                          [ngClass]="getKeyStrengthsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Key Strengths
+                        </div>
+                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.keyStrengths?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getKeyStrengthsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="onCriticalGapsClick(summary)"
+                          [ngClass]="getCriticalGapsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Critical Gaps
+                        </div>
+                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.criticalGaps?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getCriticalGapsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="scrollToQuickWins()"
+                          [ngClass]="getQuickWinsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Quick Wins
+                        </div>
+                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.quickWins?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getQuickWinsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-y-1 animate-bounce"
+                          />
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <!-- Quick Wins -->
+                @if (summary.quickWins && summary.quickWins.length > 0) {
+                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
+                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
+                      Quick Wins
+                    </h3>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                      @for (win of summary.quickWins; track $index) {
+                        <div [ngClass]="getQuickWinCardClasses()"
+                             class="rounded-xl p-6 transition-all duration-300">
+                          <div class="space-y-4">
+                            <div class="flex items-start gap-3">
+                          <span [ngClass]="getNumberBadgeClasses()"
+                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
+                            {{ $index + 1 }}
+                          </span>
+                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
+                                {{ win.action }}
+                              </p>
+                            </div>
+                            <div class="flex flex-wrap gap-2">
+                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
+                                class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.effort) }} Effort
+                          </span>
+                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
+                                    class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.impact) }} Impact
+                          </span>
+                            </div>
+                            @if (win.estimatedTimeframe) {
+                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
+                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                </svg>
+                                <span>{{ win.estimatedTimeframe }}</span>
+                              </div>
+                            }
+                            @if (win.relatedGoalId) {
+                              <div class="space-y-2">
+                                <h4 [ngClass]="getMetaTextClasses()"
+                                    class="text-xs font-semibold uppercase tracking-wider">
+                                  Related Goal
+                                </h4>
+                                <symphiq-related-goal-chips
+                                    [relatedGoalIds]="[win.relatedGoalId]"
+                                    [allGoals]="allGoals()"
+                                    [viewMode]="viewMode()"
+                                />
+                              </div>
+                            }
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              </section>
+            }
+            <!-- FOCUS_AREA Executive Summary -->
+            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
+              <symphiq-focus-area-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleTopPrioritiesClick()"
+                  (priorityDetailClick)="handlePriorityDetailClick($event)"
+              />
+            }
+            <!-- METRIC Executive Summary -->
+            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
+              <symphiq-metric-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [metricName]="metricName()"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
+                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+              />
+            }
+            <!-- Divider Before First Section -->
+            @if (sections(); as sectionList) {
+              @if (sectionList.length > 0 && sectionList[0].icon) {
+                <symphiq-section-divider
+                    [viewMode]="viewMode()"
+                    [sectionIcon]="sectionList[0].icon"
+                />
+              }
+            }
+            <!-- Profile Analysis Sections -->
+            @if (sections(); as sectionList) {
+              <section class="space-y-8">
+                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
+                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
+                       class="rounded-xl p-8 scroll-mt-24">
+                    <!-- Icon and Title -->
+                    <div class="flex items-start gap-3 mb-6">
+                      @if (section.icon) {
+                        <div [ngClass]="getSectionIconClasses()"
+                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
+                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
+                        </div>
+                      }
+                      <div class="flex-1">
+                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
+                          {{ section.title }}
+                        </h3>
+                      </div>
+                    </div>
+                    <!-- Description and Visual Side-by-Side -->
+                    @if (section.description || (section.visual && section.visual.enabled)) {
+                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
+                           [class.lg:flex-row-reverse]="idx % 2 === 0">
+                        @if (section.visual && section.visual.enabled) {
+                          <div class="w-full lg:w-2/3">
+                            <symphiq-napkin-visual-placeholder
+                                [visual]="section.visual"
+                                [viewMode]="viewMode()"
+                            />
+                          </div>
+                        }
+                        @if (section.description) {
+                          <div class="w-full"
+                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
+                          <p [ngClass]="getSectionDescriptionClasses()"
+                             class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ section.description }}
+                          </p>
+                          </div>
+                        }
+                      </div>
+                    }
+                    <!-- Section Content -->
+                    <symphiq-profile-section-content
+                        [section]="section"
+                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
+                        [viewMode]="viewMode()"
+                        [sectionIndex]="idx"
+                        [allGoals]="allGoals()"
+                        [allMetrics]="allMetrics()"
+                        [allCharts]="allCharts()"
+                        [allInsights]="allInsights()"
+                        [businessProfile]="profile()"
+                    />
+                  </div>
+                  <!-- Section Divider (between sections) -->
+                  @if (!last) {
+                    <symphiq-section-divider
+                        [viewMode]="viewMode()"
+                        [sectionIcon]="sectionList[idx + 1].icon"
+                    />
+                  }
+                }
+              </section>
+            }
+          }
+        </main>
+        <!-- Table of Contents (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-floating-toc
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+        <!-- Section Navigation Dots (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-section-navigation
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+        <!-- Search Modal -->
+        <symphiq-search-modal
+            [isOpen]="isSearchOpen()"
+            [isLightMode]="isLightMode()"
+            (close)="closeSearch()"
+        />
+        <!-- View Mode Switcher Modal -->
+        <symphiq-view-mode-switcher-modal
+            [isOpen]="isViewModeSwitcherOpen()"
+            [currentMode]="currentDisplayMode()"
+            [viewMode]="viewMode()"
+            (close)="closeViewModeSwitcher()"
+            (modeSelected)="handleDisplayModeChange($event)"
+        />
+        <!-- Profile Analysis Modal -->
+        <symphiq-profile-analysis-modal
+            [isLightMode]="isLightMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allBusinessInsights]="allBusinessInsights()"
+            [allCharts]="allCharts()"
+        >
+          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
+            <symphiq-goal-card
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+                [isInModal]="true"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [currentModalState]="getCurrentModalState()"
+                [businessProfile]="profile()"
+            />
+          }
+          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
+            <symphiq-goal-objectives-modal-content
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
+            <symphiq-objective-strategies-modal-content
+                [objective]="data.objective"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
+            <symphiq-strategy-recommendations-modal-content
+                [strategy]="data.strategy"
+                [objectiveTitle]="data.objectiveTitle"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [allBusinessInsights]="allBusinessInsights()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
+            <symphiq-category-detail-modal-content
+                [category]="data.category"
+                [viewMode]="data.viewMode"
+                [scrollToSection]="data.scrollToSection"
+            />
+          }
+          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
+            <symphiq-strength-detail-modal-content
+                [strength]="data.strength"
+                [viewMode]="data.viewMode"
+                [allFunnelStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
+            <symphiq-gap-detail-modal-content
+                [gap]="data.gap"
+                [viewMode]="data.viewMode"
+                [allGoals]="allGoals()"
+                [allWeaknesses]="funnelWeaknesses()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
+            <symphiq-opportunity-detail-modal-content
+                [opportunity]="data.opportunity"
+                [viewMode]="data.viewMode"
+                [allStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+        </symphiq-profile-analysis-modal>
+        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
+        <symphiq-funnel-analysis-modal
+            [isLightMode]="isLightMode()"
+            [viewMode]="viewMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allCharts]="allCharts()"
+        />
+        <!-- Business Analysis Modal (for napkin visuals and other content) -->
+        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
+        <!-- Tooltip Container -->
+        <symphiq-tooltip-container/>
+        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
+        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+          <symphiq-sticky-subscription-continue-button
+              [viewMode]="viewMode()"
+              [isEnabled]="hasCurrencySelected()"
+              [isLoading]="isCurrencySelectionLoading()"
+              (continueClick)="handleStickyButtonClick()"
+          />
+        }
+        <!-- Shop Profile Sticky Footer -->
+        @if (shouldShowShopProfileStickyFooter()) {
+          <symphiq-shop-profile-sticky-footer
+              [viewMode]="viewMode()"
+              [totalQuestions]="totalShopQuestions()"
+              [answeredQuestions]="answeredShopQuestions()"
+              (continueClick)="handleShopProfileContinueClick()"
+          />
+        }
+        <!-- Sticky Footer for Edit Currency Mode -->
+        @if (isEditingCurrency()) {
+          <div
+            [ngClass]="getEditCurrencyFooterClasses()"
+            class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
+          >
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div class="flex items-center gap-4">
+                <button
+                  (click)="handleCancelCurrencyEdit()"
+                  [ngClass]="getEditCurrencyCancelButtonClasses()"
+                  class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  (click)="handleContinueToPlans()"
+                  [disabled]="!editingCurrencySelection()"
+                  [ngClass]="getEditCurrencyContinueButtonClasses()"
+                  class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
+                >
+                  <span>Continue to Plans</span>
+                  <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
   `
             }]
     }], () => [], { funnelModalComponent: [{
             type: ViewChild,
             args: [ModalComponent]
-        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShop", required: false }] }], profileShopQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopQuestions", required: false }] }], itemStatusProfileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileShop", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], checkoutPlanClick: [{ type: i0.Output, args: ["checkoutPlanClick"] }], answerShopProfileQuestions: [{ type: i0.Output, args: ["answerShopProfileQuestions"] }], continueShopProfileQuestions: [{ type: i0.Output, args: ["continueShopProfileQuestions"] }], onWindowScroll: [{
+        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShop", required: false }] }], profileShopQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], profileShopAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswerHistories", required: false }] }], itemStatusProfileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileShop", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], checkoutPlanClick: [{ type: i0.Output, args: ["checkoutPlanClick"] }], answerShopProfileQuestions: [{ type: i0.Output, args: ["answerShopProfileQuestions"] }], continueShopProfileQuestions: [{ type: i0.Output, args: ["continueShopProfileQuestions"] }], onWindowScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 765 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 768 }); })();
 class ScrollProgressBarComponent {
     constructor() {
@@ -93483,5 +93590,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, 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, ShopProfileCategoryListComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, 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, ShopProfileCategoryListComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, 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