@eric-emg/symphiq-components 1.2.164 → 1.2.166

package/fesm2022/symphiq-components.mjs

@@ -2534,7 +2534,7 @@ class ConfettiService {
             }]
     }], null, null); })();
 
-const _c0$13 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
+const _c0$14 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
 const _c1$C = a0 => ["skeleton-shimmer-overlay", "absolute", "inset-0", "bg-gradient-to-r", a0];
 class SkeletonLoaderComponent {
     constructor() {
@@ -2551,7 +2551,7 @@ class SkeletonLoaderComponent {
         } if (rf & 2) {
             i0.ɵɵstyleProp("width", ctx.width())("height", ctx.height());
             i0.ɵɵclassProp("skeleton-shimmer", true)("skeleton-pulse", ctx.pulse());
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$13, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$14, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$C, ctx.isLightMode() ? "from-transparent via-white/60 to-transparent" : "from-transparent via-slate-500/40 to-transparent"));
         } }, dependencies: [NgClass], styles: [".skeleton-loader[_ngcontent-%COMP%]{position:relative;overflow:hidden}.skeleton-shimmer-overlay[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_shimmer 2s infinite cubic-bezier(.4,0,.6,1);transform:translate(-100%)}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes _ngcontent-%COMP%_pulse{0%,to{opacity:1}50%{opacity:.6}}"], changeDetection: 0 }); }
@@ -2591,7 +2591,7 @@ const ChartContainerComponent_Conditional_1_Conditional_13_Defer_2_DepsFn = () =
 const ChartContainerComponent_Conditional_1_Conditional_14_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_15_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_16_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _c0$12 = (a0, a1) => [a0, a1];
+const _c0$13 = (a0, a1) => [a0, a1];
 function ChartContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
     i0.ɵɵelement(2, "symphiq-skeleton-loader", 3)(3, "symphiq-skeleton-loader", 3);
@@ -2643,7 +2643,7 @@ function ChartContainerComponent_Conditional_1_Conditional_11_Template(rf, ctx)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$12, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$13, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
 } }
 function ChartContainerComponent_Conditional_1_Conditional_13_Defer_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-line-chart", 23);
@@ -4245,7 +4245,7 @@ class CompetitivePositioningSummaryComponent {
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], overallDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallDescription", required: false }] }], competitiveBenchmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitiveBenchmark", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToCompetitive: [{ type: i0.Output, args: ["scrollToCompetitive"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitivePositioningSummaryComponent, { className: "CompetitivePositioningSummaryComponent", filePath: "lib/components/funnel-analysis-dashboard/competitive-positioning-summary.component.ts", lineNumber: 298 }); })();
 
-const _c0$11 = () => [1, 2, 3, 4];
+const _c0$12 = () => [1, 2, 3, 4];
 function OverallAssessmentComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-skeleton-loader", 6)(2, "symphiq-skeleton-loader", 6);
@@ -4279,7 +4279,7 @@ function OverallAssessmentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100px")("height", "70px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$11));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$12));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
@@ -5494,7 +5494,7 @@ class OverallAssessmentComponent {
     }], null, { assessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "assessment", required: false }] }], revenueMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "revenueMetric", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isChartsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChartsLoading", required: false }] }], strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: false }] }], weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToSection: [{ type: i0.Output, args: ["scrollToSection"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 303 }); })();
 
-const _c0$10 = () => [1, 2, 3];
+const _c0$11 = () => [1, 2, 3];
 const _c1$B = () => [1, 2, 3, 4];
 const _c2$q = () => [];
 function InsightCardComponent_Conditional_0_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
@@ -5532,7 +5532,7 @@ function InsightCardComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "60%")("height", "20px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$10));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$11));
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c1$B));
 } }
@@ -8232,7 +8232,7 @@ class MetricCardComponent {
     }], () => [], { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], analysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysis", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], initialExpandedSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialExpandedSection", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/funnel-analysis-dashboard/metric-card.component.ts", lineNumber: 537 }); })();
 
-const _c0$$ = () => [1, 2, 3];
+const _c0$10 = () => [1, 2, 3];
 const _c1$A = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
 const _forTrack0$M = ($index, $item) => $item.metric;
@@ -8262,7 +8262,7 @@ function BreakdownSectionComponent_Conditional_0_For_7_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "30%")("height", "18px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$$));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$10));
 } }
 function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
@@ -8281,7 +8281,7 @@ function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "85%")("height", "14px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$$));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$10));
 } }
 function BreakdownSectionComponent_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -12450,7 +12450,7 @@ class FunnelWeaknessesListModalContentComponent {
     }], null, { weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWeaknessesListModalContentComponent, { className: "FunnelWeaknessesListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-weaknesses-list-modal-content.component.ts", lineNumber: 132 }); })();
 
-const _c0$_ = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$$ = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelStrengthDetailModalContentComponent_For_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 12);
 } if (rf & 2) {
@@ -12726,7 +12726,7 @@ class FunnelStrengthDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$_));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$$));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -12902,7 +12902,7 @@ class FunnelStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthDetailModalContentComponent, { className: "FunnelStrengthDetailModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strength-detail-modal-content.component.ts", lineNumber: 128 }); })();
 
-const _c0$Z = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$_ = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelWeaknessDetailModalContentComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 17);
 } if (rf & 2) {
@@ -13413,7 +13413,7 @@ class FunnelWeaknessDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$Z));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$_));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -13882,7 +13882,7 @@ class ProfileItemLookupService {
             }]
     }], null, null); })();
 
-const _c0$Y = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$Z = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$J = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -13900,7 +13900,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r2.label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Y, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Z, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13989,7 +13989,7 @@ class RelatedAreaChipsComponent {
     }], null, { relatedAreaIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedAreaIds", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedAreaChipsComponent, { className: "RelatedAreaChipsComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-area-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$X = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$Y = a0 => ({ name: "chevron-right", source: a0 });
 function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -14006,7 +14006,7 @@ function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getItemLabel(item_r2));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$X, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Y, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function CompetitorChipListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -14417,7 +14417,7 @@ class CompetitorContextSectionComponent {
     }], null, { contextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextType", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorContextSectionComponent, { className: "CompetitorContextSectionComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-context-section.component.ts", lineNumber: 86 }); })();
 
-const _c0$W = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$X = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$H = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -14438,7 +14438,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(rec_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$W, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$X, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -21402,7 +21402,7 @@ class FunnelStageCompetitiveTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStageCompetitiveTooltipComponent, { className: "FunnelStageCompetitiveTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/funnel-stage-competitive-tooltip.component.ts", lineNumber: 120 }); })();
 
-const _c0$V = () => [];
+const _c0$W = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
@@ -21566,7 +21566,7 @@ function TooltipContainerComponent_Conditional_0_Case_15_Conditional_1_Template(
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$V));
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$W));
 } }
 function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -22647,7 +22647,7 @@ class SearchService {
             }]
     }], null, null); })();
 
-const _c0$U = ["searchInput"];
+const _c0$V = ["searchInput"];
 const _forTrack0$B = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -23009,7 +23009,7 @@ class SearchBarComponent {
     }
     static { this.ɵfac = function SearchBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchBarComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBarComponent, selectors: [["symphiq-search-bar"]], viewQuery: function SearchBarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$U, 5);
+            i0.ɵɵviewQuery(_c0$V, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -26703,7 +26703,7 @@ class FunnelWelcomeBannerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWelcomeBannerComponent, { className: "FunnelWelcomeBannerComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-welcome-banner.component.ts", lineNumber: 113 }); })();
 
-const _c0$T = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
+const _c0$U = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
 const _c1$z = ["[slot=overall-performance]", "[slot=performance-metrics]", "[slot=performance-breakdowns]", "[slot=competitive-intelligence]"];
 class CollapsibleFunnelSectionGroupComponent {
     constructor() {
@@ -26836,7 +26836,7 @@ class CollapsibleFunnelSectionGroupComponent {
     }
     static { this.ɵfac = function CollapsibleFunnelSectionGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsibleFunnelSectionGroupComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleFunnelSectionGroupComponent, selectors: [["symphiq-collapsible-funnel-section-group"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c1$z, decls: 90, vars: 58, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "transition-colors", "duration-200", 3, "ngClass"], [1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"]], template: function CollapsibleFunnelSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$T);
+            i0.ɵɵprojectionDef(_c0$U);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -27679,7 +27679,7 @@ class ViewModeSwitcherModalComponent {
     }], null, { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], currentMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMode", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], modeSelected: [{ type: i0.Output, args: ["modeSelected"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewModeSwitcherModalComponent, { className: "ViewModeSwitcherModalComponent", filePath: "lib/components/shared/view-mode-switcher-modal.component.ts", lineNumber: 160 }); })();
 
-const _c0$S = a0 => ({ name: "check-badge", source: a0 });
+const _c0$T = a0 => ({ name: "check-badge", source: a0 });
 const _c1$y = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$x = ($index, $item) => $item.area;
@@ -27696,7 +27696,7 @@ function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$S, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$T, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -27911,7 +27911,7 @@ class KeyStrengthsListModalContentComponent {
     }], null, { keyStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyStrengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthsListModalContentComponent, { className: "KeyStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strengths-list-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$R = a0 => ({ name: "shield-check", source: a0 });
+const _c0$S = a0 => ({ name: "shield-check", source: a0 });
 const _c1$x = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
@@ -27929,7 +27929,7 @@ function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$S, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -28227,7 +28227,7 @@ class CriticalGapsListModalContentComponent {
     }], null, { criticalGaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "criticalGaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CriticalGapsListModalContentComponent, { className: "CriticalGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/critical-gaps-list-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$Q = a0 => ({ name: "check-circle", source: a0 });
+const _c0$R = a0 => ({ name: "check-circle", source: a0 });
 const _c1$w = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$v = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -28283,7 +28283,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Q, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$R, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.strength().supportingAnswers);
 } }
@@ -28468,7 +28468,7 @@ class KeyStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthDetailModalContentComponent, { className: "KeyStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strength-detail-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$P = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$Q = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$v = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$u = ($index, $item) => $item.questionId;
@@ -28746,7 +28746,7 @@ class CriticalGapDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$P, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$Q, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.impactTitleClasses());
             i0.ɵɵadvance(2);
@@ -30331,7 +30331,7 @@ class TopPriorityDetailModalContentComponent {
     }], null, { priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], focusAreaName: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaName", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TopPriorityDetailModalContentComponent, { className: "TopPriorityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/top-priority-detail-modal-content.component.ts", lineNumber: 72 }); })();
 
-const _c0$O = a0 => ({ name: "check-badge", source: a0 });
+const _c0$P = a0 => ({ name: "check-badge", source: a0 });
 const _c1$u = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
@@ -30349,7 +30349,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$O, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$P, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30654,7 +30654,7 @@ class FocusAreaStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthsListModalContentComponent, { className: "FocusAreaStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strengths-list-modal-content.component.ts", lineNumber: 109 }); })();
 
-const _c0$N = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$O = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$t = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
 function _forTrack0$s($index, $item) { return this.getGapTitle($item); }
@@ -30671,7 +30671,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$N, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$O, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -31048,7 +31048,7 @@ class FocusAreaGapsListModalContentComponent {
     }], null, { gaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapsListModalContentComponent, { className: "FocusAreaGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gaps-list-modal-content.component.ts", lineNumber: 106 }); })();
 
-const _c0$M = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$N = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$s = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
 const _forTrack0$r = ($index, $item) => $item.opportunity;
@@ -31065,7 +31065,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$M, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$N, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -31317,7 +31317,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
     }], null, { opportunities: [{ type: i0.Input, args: [{ isSignal: true, alias: "opportunities", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunitiesListModalContentComponent, { className: "FocusAreaOpportunitiesListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunities-list-modal-content.component.ts", lineNumber: 90 }); })();
 
-const _c0$L = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$M = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$q = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31382,7 +31382,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$L, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$M, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 8);
@@ -31702,7 +31702,7 @@ class FocusAreaStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthDetailModalContentComponent, { className: "FocusAreaStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strength-detail-modal-content.component.ts", lineNumber: 121 }); })();
 
-const _c0$K = a0 => ({ name: "chat-bubble-left-right", source: a0 });
+const _c0$L = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 function FocusAreaGapDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "span", 3);
     i0.ɵɵtext(2);
@@ -31799,7 +31799,7 @@ function FocusAreaGapDetailModalContentComponent_Conditional_6_For_5_Template(rf
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.answerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$K, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$L, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerQuestionClasses());
     i0.ɵɵadvance();
@@ -32038,7 +32038,7 @@ class FocusAreaGapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapDetailModalContentComponent, { className: "FocusAreaGapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gap-detail-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$J = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$K = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$q = () => [];
 const _forTrack0$p = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -32085,7 +32085,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$J, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$K, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 5);
@@ -32490,7 +32490,7 @@ class CircularProgressComponent {
     }], null, { percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], textClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClasses", required: false }] }], strokeLinecap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeLinecap", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CircularProgressComponent, { className: "CircularProgressComponent", filePath: "lib/components/business-analysis-dashboard/visualizations/circular-progress.component.ts", lineNumber: 41 }); })();
 
-const _c0$I = ["*"];
+const _c0$J = ["*"];
 const _c1$p = (a0, a1) => [a0, a1];
 function VisualizationContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -32535,7 +32535,7 @@ class VisualizationContainerComponent {
         });
     }
     static { this.ɵfac = function VisualizationContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualizationContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$I, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$J, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function VisualizationContainerComponent_Template_div_click_0_listener($event) { return ctx.onVisualizationClick($event); });
@@ -32656,7 +32656,7 @@ class MetricBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricBadgeComponent, { className: "MetricBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/metric-badge.component.ts", lineNumber: 22 }); })();
 
-const _c0$H = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$I = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$o = a0 => ({ name: "chevron-right", source: a0 });
 function OpportunityHighlightBannerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 7);
@@ -32721,7 +32721,7 @@ class OpportunityHighlightBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$H, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$I, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -32778,7 +32778,7 @@ class OpportunityHighlightBannerComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OpportunityHighlightBannerComponent, { className: "OpportunityHighlightBannerComponent", filePath: "lib/components/business-analysis-dashboard/banners/opportunity-highlight-banner.component.ts", lineNumber: 44 }); })();
 
-const _c0$G = a0 => ({ name: "users", source: a0 });
+const _c0$H = a0 => ({ name: "users", source: a0 });
 function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
     i0.ɵɵelement(2, "symphiq-icon", 7);
@@ -32793,7 +32793,7 @@ function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.competitorListLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$G, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$H, ctx_r0.iconSource));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("relatedCompetitorIds", ctx_r0.relatedCompetitorIds())("viewMode", ctx_r0.isDark() ? ctx_r0.ViewModeEnum.DARK : ctx_r0.ViewModeEnum.LIGHT)("isDark", ctx_r0.isDark());
 } }
@@ -33357,7 +33357,7 @@ class ViewportAnimationDirective {
             type: Input
         }] }); })();
 
-const _c0$F = a0 => ({ name: "star", source: a0 });
+const _c0$G = a0 => ({ name: "star", source: a0 });
 const _c1$n = a0 => ({ name: "globe-americas", source: a0 });
 const _c2$i = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$f = a0 => ({ name: "information-circle", source: a0 });
@@ -33393,7 +33393,7 @@ function RegionCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$G, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function RegionCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 14);
@@ -34435,7 +34435,7 @@ class CompetitiveInsightBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveInsightBadgeComponent, { className: "CompetitiveInsightBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/competitive-insight-badge.component.ts", lineNumber: 25 }); })();
 
-const _c0$E = a0 => ({ name: "calendar-days", source: a0 });
+const _c0$F = a0 => ({ name: "calendar-days", source: a0 });
 const _c1$m = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$h = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$e = a0 => ({ name: "information-circle", source: a0 });
@@ -34456,7 +34456,7 @@ function SeasonCardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 12);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$E, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function SeasonCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
@@ -35273,7 +35273,7 @@ class SeasonCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SeasonCardComponent, { className: "SeasonCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/season-card.component.ts", lineNumber: 270 }); })();
 
-const _c0$D = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$E = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$l = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$g = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$d = a0 => ({ name: "information-circle", source: a0 });
@@ -35418,7 +35418,7 @@ function CustomerSegmentCardComponent_Conditional_22_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$D, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$E, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function CustomerSegmentCardComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -36390,7 +36390,7 @@ class CustomerSegmentCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomerSegmentCardComponent, { className: "CustomerSegmentCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/customer-segment-card.component.ts", lineNumber: 366 }); })();
 
-const _c0$C = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$D = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$k = a0 => ({ name: "document-text", source: a0 });
 const _c2$f = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$c = a0 => ({ name: "information-circle", source: a0 });
@@ -36488,7 +36488,7 @@ function PriceTierCardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$C, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$D, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -37227,7 +37227,7 @@ class PriceTierCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PriceTierCardComponent, { className: "PriceTierCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/price-tier-card.component.ts", lineNumber: 261 }); })();
 
-const _c0$B = () => ({ name: "cube", source: "HEROICONS" });
+const _c0$C = () => ({ name: "cube", source: "HEROICONS" });
 const _c1$j = () => ({ name: "currency-dollar", source: "HEROICONS" });
 const _c2$e = () => ({ name: "chart-bar", source: "HEROICONS" });
 const _c3$b = a0 => ({ name: "chart-bar", source: a0 });
@@ -37274,7 +37274,7 @@ function ProductCategoryCardComponent_Conditional_14_Conditional_2_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatBoxClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$B))("ngClass", ctx_r0.getStatIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$C))("ngClass", ctx_r0.getStatIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatLabelClasses());
     i0.ɵɵadvance(2);
@@ -38222,13 +38222,13 @@ class ProductCategoryCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProductCategoryCardComponent, { className: "ProductCategoryCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/product-category-card.component.ts", lineNumber: 324 }); })();
 
-const _c0$A = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$B = (a0, a1) => ({ name: a0, source: a1 });
 function CompetitiveStrengthIndicatorComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-icon", 2);
 } if (rf & 2) {
     const star_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$A, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$B, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
 } }
 class CompetitiveStrengthIndicatorComponent {
     constructor() {
@@ -38384,7 +38384,7 @@ function getCategoryBadgeClasses(category, isDark) {
     return `px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${colorClasses}`;
 }
 
-const _c0$z = a0 => ({ name: "shield-check", source: a0 });
+const _c0$A = a0 => ({ name: "shield-check", source: a0 });
 const _c1$i = a0 => ({ name: "building-storefront", source: a0 });
 const _c2$d = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$a = a0 => ({ name: "information-circle", source: a0 });
@@ -38456,7 +38456,7 @@ function EnhancedListItemCardComponent_Conditional_21_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$z, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$A, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -39100,7 +39100,7 @@ class EnhancedListItemCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EnhancedListItemCardComponent, { className: "EnhancedListItemCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/enhanced-list-item-card.component.ts", lineNumber: 221 }); })();
 
-const _c0$y = a0 => ({ name: "academic-cap", source: a0 });
+const _c0$z = a0 => ({ name: "academic-cap", source: a0 });
 const _c1$h = a0 => ({ name: "information-circle", source: a0 });
 const _c2$c = a0 => ({ name: "signal", source: a0 });
 const _c3$9 = a0 => ({ name: "wrench-screwdriver", source: a0 });
@@ -39181,7 +39181,7 @@ function FocusAreaDetailCardComponent_Conditional_16_Conditional_5_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$y, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$z, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.expandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -40963,7 +40963,7 @@ class CompetitorAnalysisCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorAnalysisCardComponent, { className: "CompetitorAnalysisCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-analysis-card.component.ts", lineNumber: 312 }); })();
 
-const _c0$x = ["*"];
+const _c0$y = ["*"];
 class SkeletonCardBaseComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -40983,7 +40983,7 @@ class SkeletonCardBaseComponent {
     `.trim();
     }
     static { this.ɵfac = function SkeletonCardBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SkeletonCardBaseComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$x, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$y, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -42148,7 +42148,7 @@ class ProfileItemCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], subsectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionId", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileItemCardComponent, { className: "ProfileItemCardComponent", filePath: "lib/components/business-analysis-dashboard/profile-item-card.component.ts", lineNumber: 171 }); })();
 
-const _c0$w = ["scrollContainer"];
+const _c0$x = ["scrollContainer"];
 const _c1$g = a0 => ({ name: "arrow-right", source: a0 });
 function ItemDetailModalComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -42268,7 +42268,7 @@ class ItemDetailModalComponent {
     }
     static { this.ɵfac = function ItemDetailModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ItemDetailModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemDetailModalComponent, selectors: [["symphiq-item-detail-modal"]], viewQuery: function ItemDetailModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$w, 5);
+            i0.ɵɵviewQuery(_c0$x, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
@@ -42347,7 +42347,7 @@ class ItemDetailModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemDetailModalComponent, { className: "ItemDetailModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/item-detail-modal.component.ts", lineNumber: 53 }); })();
 
-const _c0$v = ["modalContent"];
+const _c0$w = ["modalContent"];
 const _c1$f = ["modalWrapper"];
 const _c2$b = ["*"];
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_3_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return lineChart_component; }).then(m => m.LineChartComponent)];
@@ -44642,7 +44642,7 @@ class ProfileAnalysisModalComponent {
     }
     static { this.ɵfac = function ProfileAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileAnalysisModalComponent, selectors: [["symphiq-profile-analysis-modal"]], viewQuery: function ProfileAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$v, 5);
+            i0.ɵɵviewQuery(_c0$w, 5);
             i0.ɵɵviewQuery(_c1$f, 5);
         } if (rf & 2) {
             let _t;
@@ -45197,7 +45197,7 @@ class ProfileAnalysisModalComponent {
         }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileAnalysisModalComponent, { className: "ProfileAnalysisModalComponent", filePath: "lib/components/profile-analysis-dashboard/profile-analysis-modal.component.ts", lineNumber: 554 }); })();
 
-const _c0$u = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$v = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$e = a0 => ({ name: "trophy", source: a0 });
 const _c2$a = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$7 = a0 => ({ name: "signal", source: a0 });
@@ -45407,7 +45407,7 @@ class CompetitiveGapModalComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$u, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$v, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -45528,7 +45528,7 @@ class CompetitiveGapModalComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveGapModalComponent, { className: "CompetitiveGapModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/competitive-gap-modal.component.ts", lineNumber: 101 }); })();
 
-const _c0$t = a0 => ({ name: "list-bullet", source: a0 });
+const _c0$u = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$d = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
@@ -45548,7 +45548,7 @@ function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.iconContainerClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$t, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$u, ctx_r0.iconSource));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.titleClasses());
     i0.ɵɵadvance(2);
@@ -45768,7 +45768,7 @@ class RecommendationActionStepsModalComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actionSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionSteps", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecommendationActionStepsModalComponent, { className: "RecommendationActionStepsModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/recommendation-action-steps-modal.component.ts", lineNumber: 69 }); })();
 
-const _c0$s = ["modalContent"];
+const _c0$t = ["modalContent"];
 const _c1$c = ["modalWrapper"];
 function BusinessAnalysisModalComponent_Conditional_0_Conditional_10_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -46291,7 +46291,7 @@ class BusinessAnalysisModalComponent {
     }
     static { this.ɵfac = function BusinessAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BusinessAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BusinessAnalysisModalComponent, selectors: [["symphiq-business-analysis-modal"]], viewQuery: function BusinessAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$s, 5);
+            i0.ɵɵviewQuery(_c0$t, 5);
             i0.ɵɵviewQuery(_c1$c, 5);
         } if (rf & 2) {
             let _t;
@@ -46476,7 +46476,7 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 171 }); })();
 
-const _c0$r = ["dashboardContainer"];
+const _c0$s = ["dashboardContainer"];
 const _c1$b = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
@@ -48737,7 +48737,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
-            i0.ɵɵviewQuery(_c0$r, 5);
+            i0.ɵɵviewQuery(_c0$s, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalComponent = _t.first);
@@ -52410,7 +52410,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$q = ["shopNameInput"];
+const _c0$r = ["shopNameInput"];
 const _forTrack0$i = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
@@ -53573,7 +53573,7 @@ class SymphiqCreateAccountDashboardComponent {
     }
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], viewQuery: function SymphiqCreateAccountDashboardComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$q, 5);
+            i0.ɵɵviewQuery(_c0$r, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
@@ -54345,86 +54345,79 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
         } if (rf & 2) {
             i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick" }, decls: 70, vars: 66, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 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, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["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-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div");
-            i0.ɵɵelement(2, "div", 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(3, "div", 2);
-            i0.ɵɵelementStart(4, "div", 3)(5, "header", 4)(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div")(10, "h1", 0);
-            i0.ɵɵtext(11, " Connect Google Analytics 4 ");
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick" }, decls: 68, vars: 61, consts: [[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, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["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-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "header", 3)(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "div")(8, "h1", 0);
+            i0.ɵɵtext(9, " Connect Google Analytics 4 ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Link your analytics data ");
+            i0.ɵɵelementStart(10, "p", 0);
+            i0.ɵɵtext(11, " Link your analytics data ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
-            i0.ɵɵtext(19, " Connect Google Analytics 4 ");
+            i0.ɵɵelementStart(12, "div", 4)(13, "div", 7)(14, "div", 6)(15, "div", 8)(16, "h1", 0);
+            i0.ɵɵtext(17, " Connect Google Analytics 4 ");
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 10);
-            i0.ɵɵlistener("stepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
+            i0.ɵɵelementStart(18, "symphiq-journey-progress-indicator", 9);
+            i0.ɵɵlistener("stepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_18_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_18_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "main", 11)(22, "div", 12)(23, "div", 13)(24, "div", 14)(25, "div", 15)(26, "div", 16);
+            i0.ɵɵelementStart(19, "main", 10)(20, "div", 11)(21, "div", 12)(22, "div", 13)(23, "div", 14)(24, "div", 15);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(27, "svg", 17);
-            i0.ɵɵelement(28, "path", 18);
+            i0.ɵɵelementStart(25, "svg", 16);
+            i0.ɵɵelement(26, "path", 17);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(29, "div", 19)(30, "h2", 20);
-            i0.ɵɵtext(31, " Connect Google Analytics 4 ");
+            i0.ɵɵelementStart(27, "div", 18)(28, "h2", 19);
+            i0.ɵɵtext(29, " Connect Google Analytics 4 ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "p", 21);
-            i0.ɵɵtext(33, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
+            i0.ɵɵelementStart(30, "p", 20);
+            i0.ɵɵtext(31, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "div", 22)(35, "button", 23);
-            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_button_click_35_listener() { return ctx.googleButtonClick.emit(); });
-            i0.ɵɵelement(36, "div", 24);
-            i0.ɵɵelementStart(37, "div", 25)(38, "div", 26);
+            i0.ɵɵelementStart(32, "div", 21)(33, "button", 22);
+            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_button_click_33_listener() { return ctx.googleButtonClick.emit(); });
+            i0.ɵɵelement(34, "div", 23);
+            i0.ɵɵelementStart(35, "div", 24)(36, "div", 25);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(39, "svg", 27);
-            i0.ɵɵelement(40, "path", 28)(41, "path", 29)(42, "path", 30)(43, "path", 31)(44, "path", 32);
+            i0.ɵɵelementStart(37, "svg", 26);
+            i0.ɵɵelement(38, "path", 27)(39, "path", 28)(40, "path", 29)(41, "path", 30)(42, "path", 31);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(45, "span", 33);
-            i0.ɵɵtext(46, "Continue with Google");
+            i0.ɵɵelementStart(43, "span", 32);
+            i0.ɵɵtext(44, "Continue with Google");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(47, "div", 34);
+            i0.ɵɵelementStart(45, "div", 33);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(48, "svg", 35);
-            i0.ɵɵelement(49, "path", 36);
+            i0.ɵɵelementStart(46, "svg", 34);
+            i0.ɵɵelement(47, "path", 35);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(50, "div", 19)(51, "p", 37)(52, "strong", 38);
-            i0.ɵɵtext(53, "Note:");
+            i0.ɵɵelementStart(48, "div", 18)(49, "p", 36)(50, "strong", 37);
+            i0.ɵɵtext(51, "Note:");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(54, " When you click \"Continue with Google\", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop. ");
+            i0.ɵɵtext(52, " When you click \"Continue with Google\", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop. ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(55, "div", 39)(56, "div", 40);
-            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_div_click_56_listener() { return ctx.toggleExpanded(); });
-            i0.ɵɵelementStart(57, "span", 41);
-            i0.ɵɵtext(58, " How do we use your Google Analytics data? ");
+            i0.ɵɵelementStart(53, "div", 38)(54, "div", 39);
+            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_div_click_54_listener() { return ctx.toggleExpanded(); });
+            i0.ɵɵelementStart(55, "span", 40);
+            i0.ɵɵtext(56, " How do we use your Google Analytics data? ");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(59, "svg", 42);
-            i0.ɵɵelement(60, "path", 43);
+            i0.ɵɵelementStart(57, "svg", 41);
+            i0.ɵɵelement(58, "path", 42);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(61, "div", 5)(62, "div", 44)(63, "p", 45);
-            i0.ɵɵtext(64, " We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement. ");
+            i0.ɵɵelementStart(59, "div", 4)(60, "div", 43)(61, "p", 44);
+            i0.ɵɵtext(62, " We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement. ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(65, "p", 37);
-            i0.ɵɵtext(66, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
-            i0.ɵɵelementStart(67, "strong", 46);
-            i0.ɵɵtext(68, "Google API Services User Data Policy");
+            i0.ɵɵelementStart(63, "p", 36);
+            i0.ɵɵtext(64, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
+            i0.ɵɵelementStart(65, "strong", 45);
+            i0.ɵɵtext(66, "Google API Services User Data Policy");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(69, " including the Limited Use requirements. ");
+            i0.ɵɵtext(67, " including the Limited Use requirements. ");
             i0.ɵɵelementEnd()()()()()()()()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵclassMap(ctx.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");
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
-            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-cyan-500" : "bg-gradient-to-r from-blue-400 to-cyan-400");
-            i0.ɵɵadvance();
             i0.ɵɵclassProp("light-mode", ctx.isLightMode());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
@@ -54484,184 +54477,175 @@ class SymphiqConnectGaDashboardComponent {
         args: [{ selector: 'symphiq-connect-ga-dashboard', standalone: true, imports: [CommonModule, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     '[class.light]': 'isLightMode()',
                     '[class.dark]': '!isLightMode()'
-                }, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- 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-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <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>
-
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Connect Google Analytics 4
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Link your analytics data
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate'">
-                    Connect Google Analytics 4
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.CONNECT_GA4"
-          [showNextStepAction]="true"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative">
-          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <!-- Main Content Card -->
-            <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
-              <div [ngClass]="contentClasses()" class="px-8 py-8">
-                <div class="flex items-start gap-6">
-                  <!-- Icon Container -->
-                  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
-                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                    </svg>
-                  </div>
-
-                  <div class="flex-1">
-                    <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
-                      Connect Google Analytics 4
-                    </h2>
-
-                    <!-- Description -->
-                    <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
-                      Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration.
-                    </p>
-
-                    <!-- Continue with Google Button -->
-                    <div class="mb-6">
-                      <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
-                        <div class="gsi-material-button-state"></div>
-                        <div class="gsi-material-button-content-wrapper">
-                          <div class="gsi-material-button-icon">
-                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
-                              <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-                              <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-                              <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-                              <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
-                              <path fill="none" d="M0 0h48v48H0z"></path>
-                            </svg>
-                          </div>
-                          <span class="gsi-material-button-contents">Continue with Google</span>
-                        </div>
-                      </button>
-                    </div>
-
-                    <!-- Note Section -->
-                    <div [ngClass]="noteBoxClasses()" class="p-4 rounded-lg border flex items-start gap-3">
-                      <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="noteIconClasses()" 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 class="flex-1">
-                        <p [ngClass]="noteTextClasses()" class="text-sm leading-relaxed">
-                          <strong class="font-semibold">Note:</strong> When you click "Continue with Google", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop.
-                        </p>
-                      </div>
-                    </div>
-
-                    <!-- Expandable Data Usage Card -->
-                    <div [ngClass]="expandableCardClasses()" class="mt-6 rounded-lg border overflow-hidden">
-                      <!-- Header (Clickable) -->
-                      <div
-                        (click)="toggleExpanded()"
-                        [ngClass]="expandableHeaderClasses()"
-                        class="px-4 py-4 cursor-pointer flex items-center justify-between gap-3 transition-colors duration-200">
-                        <span [ngClass]="expandableHeaderTextClasses()" class="text-base font-semibold">
-                          How do we use your Google Analytics data?
-                        </span>
-                        <svg
-                          [ngClass]="chevronClasses()"
-                          class="w-5 h-5 flex-shrink-0 transition-transform duration-300"
-                          [class.rotate-180]="isExpanded()"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                        </svg>
-                      </div>
-
-                      <!-- Expanded Content -->
-                      <div
-                        class="transition-all duration-300 ease-in-out overflow-hidden"
-                        [class.max-h-0]="!isExpanded()"
-                        [class.opacity-0]="!isExpanded()"
-                        [class.max-h-[1000px]]="isExpanded()"
-                        [class.opacity-100]="isExpanded()">
-                        <div [ngClass]="expandedContentClasses()" class="px-4 pb-4 pt-2">
-                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed mb-4">
-                            We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement.
-                          </p>
-                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed">
-                            Symphiq's use and transfer to any other app of information received from Google APIs will adhere to <strong class="font-bold">Google API Services User Data Policy</strong> including the Limited Use requirements.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
+                }, template: `
+    <div [ngClass]="getContainerClasses()">
+      <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>
+
+      <div class="relative z-[51]">
+        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+          <!-- Expanded Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="headerScrollService.isScrolled()"
+            [class.opacity-0]="headerScrollService.isScrolled()"
+            [class.max-h-96]="!headerScrollService.isScrolled()"
+            [class.opacity-100]="!headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+              [class.pointer-events-none]="headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    Connect Google Analytics 4
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Link your analytics data
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="!headerScrollService.isScrolled()"
+            [class.opacity-0]="!headerScrollService.isScrolled()"
+            [class.max-h-20]="headerScrollService.isScrolled()"
+            [class.opacity-100]="headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+              [class.pointer-events-none]="!headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0 mr-4">
+                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate'">
+                    Connect Google Analytics 4
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+          [viewMode]="viewMode()"
+          [currentStepId]="JourneyStepIdEnum.CONNECT_GA4"
+          [showNextStepAction]="true"
+          [forDemo]="forDemo()"
+          [maxAccessibleStepId]="maxAccessibleStepId()"
+          (stepClick)="stepClick.emit($event)"
+          (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative">
+          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <!-- Main Content Card -->
+            <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+              <div [ngClass]="contentClasses()" class="px-8 py-8">
+                <div class="flex items-start gap-6">
+                  <!-- Icon Container -->
+                  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                    </svg>
+                  </div>
+
+                  <div class="flex-1">
+                    <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
+                      Connect Google Analytics 4
+                    </h2>
+
+                    <!-- Description -->
+                    <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
+                      Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration.
+                    </p>
+
+                    <!-- Continue with Google Button -->
+                    <div class="mb-6">
+                      <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
+                        <div class="gsi-material-button-state"></div>
+                        <div class="gsi-material-button-content-wrapper">
+                          <div class="gsi-material-button-icon">
+                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+                              <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                              <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                              <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                              <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                              <path fill="none" d="M0 0h48v48H0z"></path>
+                            </svg>
+                          </div>
+                          <span class="gsi-material-button-contents">Continue with Google</span>
+                        </div>
+                      </button>
+                    </div>
+
+                    <!-- Note Section -->
+                    <div [ngClass]="noteBoxClasses()" class="p-4 rounded-lg border flex items-start gap-3">
+                      <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="noteIconClasses()" 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 class="flex-1">
+                        <p [ngClass]="noteTextClasses()" class="text-sm leading-relaxed">
+                          <strong class="font-semibold">Note:</strong> When you click "Continue with Google", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop.
+                        </p>
+                      </div>
+                    </div>
+
+                    <!-- Expandable Data Usage Card -->
+                    <div [ngClass]="expandableCardClasses()" class="mt-6 rounded-lg border overflow-hidden">
+                      <!-- Header (Clickable) -->
+                      <div
+                        (click)="toggleExpanded()"
+                        [ngClass]="expandableHeaderClasses()"
+                        class="px-4 py-4 cursor-pointer flex items-center justify-between gap-3 transition-colors duration-200">
+                        <span [ngClass]="expandableHeaderTextClasses()" class="text-base font-semibold">
+                          How do we use your Google Analytics data?
+                        </span>
+                        <svg
+                          [ngClass]="chevronClasses()"
+                          class="w-5 h-5 flex-shrink-0 transition-transform duration-300"
+                          [class.rotate-180]="isExpanded()"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                      </div>
+
+                      <!-- Expanded Content -->
+                      <div
+                        class="transition-all duration-300 ease-in-out overflow-hidden"
+                        [class.max-h-0]="!isExpanded()"
+                        [class.opacity-0]="!isExpanded()"
+                        [class.max-h-[1000px]]="isExpanded()"
+                        [class.opacity-100]="isExpanded()">
+                        <div [ngClass]="expandedContentClasses()" class="px-4 pb-4 pt-2">
+                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed mb-4">
+                            We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement.
+                          </p>
+                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed">
+                            Symphiq's use and transfer to any other app of information received from Google APIs will adhere to <strong class="font-bold">Google API Services User Data Policy</strong> including the Limited Use requirements.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
   `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}:host.light .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}:host.light .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.light .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.light .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.light .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.light .gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}:host.light .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.light .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.light .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.light .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}:host.light .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.light .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}:host.dark .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}:host.dark .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.dark .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.dark .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.dark .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.dark .gsi-material-button:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}:host.dark .gsi-material-button:disabled .gsi-material-button-state{background-color:#e3e3e31f}:host.dark .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.dark .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.dark .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.dark .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#fff;opacity:12%}:host.dark .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.dark .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#fff;opacity:8%}\n"] }]
     }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", 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"] }], googleButtonClick: [{ type: i0.Output, args: ["googleButtonClick"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 471 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 462 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);
@@ -55042,7 +55026,7 @@ class HierarchyDisplayComponent {
     }], null, { hierarchyData: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchyData", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HierarchyDisplayComponent, { className: "HierarchyDisplayComponent", filePath: "lib/components/business-analysis-dashboard/hierarchy-display.component.ts", lineNumber: 119 }); })();
 
-const _c0$p = a0 => ({ name: "chart-bar", source: a0 });
+const _c0$q = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$a = a0 => ({ name: "light-bulb", source: a0 });
 function CompetitiveBenchmarkCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -55238,7 +55222,7 @@ class CompetitiveBenchmarkCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$p, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$q, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionTitleClasses());
             i0.ɵɵadvance(2);
@@ -56085,7 +56069,7 @@ class SearchButtonComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
 
-const _c0$o = ["searchInput"];
+const _c0$p = ["searchInput"];
 const _forTrack0$h = ($index, $item) => $item.id;
 function SearchModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -56450,7 +56434,7 @@ class SearchModalComponent {
     }
     static { this.ɵfac = function SearchModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchModalComponent, selectors: [["symphiq-search-modal"]], viewQuery: function SearchModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$o, 5);
+            i0.ɵɵviewQuery(_c0$p, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -57347,6 +57331,7 @@ class SimplifiedRecommendationCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimplifiedRecommendationCardComponent, { className: "SimplifiedRecommendationCardComponent", filePath: "lib/components/business-analysis-dashboard/simplified-recommendation-card.component.ts", lineNumber: 121 }); })();
 
+const _c0$o = () => [0, 1, 2];
 const _forTrack0$g = ($index, $item) => $item.id;
 function RecommendationsTiledGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
@@ -57378,17 +57363,57 @@ function RecommendationsTiledGridComponent_Conditional_14_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.sortedRecommendations());
 } }
+function RecommendationsTiledGridComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16);
+    i0.ɵɵelement(2, "div", 17);
+    i0.ɵɵelementStart(3, "div", 18);
+    i0.ɵɵelement(4, "div", 19)(5, "div", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 21);
+    i0.ɵɵelement(7, "div", 22)(8, "div", 23)(9, "div", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 2);
+    i0.ɵɵelement(11, "div", 25)(12, "div", 26);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonCardClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonIconClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.skeletonLineClasses());
+} }
 function RecommendationsTiledGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 15);
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵrepeaterCreate(1, RecommendationsTiledGridComponent_Conditional_15_For_2_Template, 13, 9, "div", 15, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0$o));
+} }
+function RecommendationsTiledGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 27);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 16);
-    i0.ɵɵelement(3, "path", 17);
+    i0.ɵɵelementStart(2, "svg", 28);
+    i0.ɵɵelement(3, "path", 29);
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(4, "h3", 18);
+    i0.ɵɵelementStart(4, "h3", 30);
     i0.ɵɵtext(5, " No Recommendations Yet ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 19);
+    i0.ɵɵelementStart(6, "p", 31);
     i0.ɵɵtext(7, " Complete your business profile to receive personalized strategic recommendations ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57405,6 +57430,7 @@ class RecommendationsTiledGridComponent {
     constructor() {
         this.recommendations = input([], ...(ngDevMode ? [{ debugName: "recommendations" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.viewMoreClick = output();
         this.sortedRecommendations = computed(() => {
             return [...this.recommendations()].sort((a, b) => {
@@ -57477,8 +57503,23 @@ class RecommendationsTiledGridComponent {
             ? 'text-slate-400'
             : 'text-slate-600';
     }
+    skeletonCardClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-800/50 border-slate-700/50'
+            : 'bg-white border-slate-200';
+    }
+    skeletonIconClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700'
+            : 'bg-slate-200';
+    }
+    skeletonLineClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700'
+            : 'bg-slate-200';
+    }
     static { this.ɵfac = function RecommendationsTiledGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecommendationsTiledGridComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecommendationsTiledGridComponent, selectors: [["symphiq-recommendations-tiled-grid"]], inputs: { recommendations: [1, "recommendations"], viewMode: [1, "viewMode"] }, outputs: { viewMoreClick: "viewMoreClick" }, decls: 16, vars: 9, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "px-3", "py-1.5", "rounded-lg", "font-semibold", "text-sm", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4", "items-start"], [1, "text-center", "py-12", "rounded-xl", "border-2", "border-dashed", 3, "ngClass"], [3, "item", "viewMode", "animationIndex"], [3, "viewMoreClick", "item", "viewMode", "animationIndex"], [1, "w-16", "h-16", "mx-auto", "mb-4", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"]], template: function RecommendationsTiledGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecommendationsTiledGridComponent, selectors: [["symphiq-recommendations-tiled-grid"]], inputs: { recommendations: [1, "recommendations"], viewMode: [1, "viewMode"], isLoading: [1, "isLoading"] }, outputs: { viewMoreClick: "viewMoreClick" }, decls: 17, vars: 9, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "px-3", "py-1.5", "rounded-lg", "font-semibold", "text-sm", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4", "items-start"], [1, "text-center", "py-12", "rounded-xl", "border-2", "border-dashed", 3, "ngClass"], [3, "item", "viewMode", "animationIndex"], [3, "viewMoreClick", "item", "viewMode", "animationIndex"], [1, "rounded-xl", "border", "p-5", "animate-pulse", 3, "ngClass"], [1, "flex", "items-start", "gap-3", "mb-4"], [1, "w-10", "h-10", "rounded-lg", 3, "ngClass"], [1, "flex-1", "space-y-2"], [1, "h-4", "rounded", "w-3/4", 3, "ngClass"], [1, "h-3", "rounded", "w-1/2", 3, "ngClass"], [1, "space-y-2", "mb-4"], [1, "h-3", "rounded", "w-full", 3, "ngClass"], [1, "h-3", "rounded", "w-5/6", 3, "ngClass"], [1, "h-3", "rounded", "w-4/6", 3, "ngClass"], [1, "h-6", "rounded-full", "w-16", 3, "ngClass"], [1, "h-8", "rounded-lg", "w-24", 3, "ngClass"], [1, "w-16", "h-16", "mx-auto", "mb-4", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"]], template: function RecommendationsTiledGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -57494,7 +57535,7 @@ class RecommendationsTiledGridComponent {
             i0.ɵɵconditionalCreate(12, RecommendationsTiledGridComponent_Conditional_12_Template, 2, 2, "div", 9);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(13, "div", 10);
-            i0.ɵɵconditionalCreate(14, RecommendationsTiledGridComponent_Conditional_14_Template, 3, 0, "div", 11)(15, RecommendationsTiledGridComponent_Conditional_15_Template, 8, 4, "div", 12);
+            i0.ɵɵconditionalCreate(14, RecommendationsTiledGridComponent_Conditional_14_Template, 3, 0, "div", 11)(15, RecommendationsTiledGridComponent_Conditional_15_Template, 3, 1, "div", 11)(16, RecommendationsTiledGridComponent_Conditional_16_Template, 8, 4, "div", 12);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -57513,7 +57554,7 @@ class RecommendationsTiledGridComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.contentClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.recommendations().length > 0 ? 14 : 15);
+            i0.ɵɵconditional(ctx.recommendations().length > 0 ? 14 : ctx.isLoading() ? 15 : 16);
         } }, dependencies: [CommonModule, i1$1.NgClass, SimplifiedRecommendationCardComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecommendationsTiledGridComponent, [{
@@ -57523,66 +57564,89 @@ class RecommendationsTiledGridComponent {
                 standalone: true,
                 imports: [CommonModule, SimplifiedRecommendationCardComponent],
                 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-              </svg>
-            </div>
-            <div>
-              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-                Strategic Insights & Recommendations
-              </h2>
-              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-                {{ recommendations().length }} personalized recommendations based on your business profile
-              </p>
-            </div>
-          </div>
-          @if (recommendations().length > 0) {
-            <div [ngClass]="countBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-sm">
-              {{ recommendations().length }}
-            </div>
-          }
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-6">
-        @if (recommendations().length > 0) {
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
-            @for (recommendation of sortedRecommendations(); track recommendation.id; let idx = $index) {
-              <symphiq-simplified-recommendation-card
-                [item]="recommendation"
-                [viewMode]="viewMode()"
-                [animationIndex]="idx"
-                (viewMoreClick)="viewMoreClick.emit($event)"
-              />
-            }
-          </div>
-        } @else {
-          <div [ngClass]="emptyStateClasses()" class="text-center py-12 rounded-xl border-2 border-dashed">
-            <div [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
-              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
-              </svg>
-            </div>
-            <h3 [ngClass]="emptyTitleClasses()" class="text-lg font-semibold mb-2">
-              No Recommendations Yet
-            </h3>
-            <p [ngClass]="emptyDescriptionClasses()" class="text-sm">
-              Complete your business profile to receive personalized strategic recommendations
-            </p>
-          </div>
-        }
-      </div>
-    </div>
+                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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+              </svg>
+            </div>
+            <div>
+              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+                Strategic Insights & Recommendations
+              </h2>
+              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+                {{ recommendations().length }} personalized recommendations based on your business profile
+              </p>
+            </div>
+          </div>
+          @if (recommendations().length > 0) {
+            <div [ngClass]="countBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-sm">
+              {{ recommendations().length }}
+            </div>
+          }
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-6">
+        @if (recommendations().length > 0) {
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+            @for (recommendation of sortedRecommendations(); track recommendation.id; let idx = $index) {
+              <symphiq-simplified-recommendation-card
+                [item]="recommendation"
+                [viewMode]="viewMode()"
+                [animationIndex]="idx"
+                (viewMoreClick)="viewMoreClick.emit($event)"
+              />
+            }
+          </div>
+        } @else if (isLoading()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+            @for (i of [0, 1, 2]; track i) {
+              <div [ngClass]="skeletonCardClasses()" class="rounded-xl border p-5 animate-pulse">
+                <div class="flex items-start gap-3 mb-4">
+                  <div [ngClass]="skeletonIconClasses()" class="w-10 h-10 rounded-lg"></div>
+                  <div class="flex-1 space-y-2">
+                    <div [ngClass]="skeletonLineClasses()" class="h-4 rounded w-3/4"></div>
+                    <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-1/2"></div>
+                  </div>
+                </div>
+                <div class="space-y-2 mb-4">
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-full"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-5/6"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-4/6"></div>
+                </div>
+                <div class="flex items-center justify-between">
+                  <div [ngClass]="skeletonLineClasses()" class="h-6 rounded-full w-16"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-8 rounded-lg w-24"></div>
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <div [ngClass]="emptyStateClasses()" class="text-center py-12 rounded-xl border-2 border-dashed">
+            <div [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+              </svg>
+            </div>
+            <h3 [ngClass]="emptyTitleClasses()" class="text-lg font-semibold mb-2">
+              No Recommendations Yet
+            </h3>
+            <p [ngClass]="emptyDescriptionClasses()" class="text-sm">
+              Complete your business profile to receive personalized strategic recommendations
+            </p>
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
-    }], null, { recommendations: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendations", 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(RecommendationsTiledGridComponent, { className: "RecommendationsTiledGridComponent", filePath: "lib/components/business-analysis-dashboard/recommendations-tiled-grid.component.ts", lineNumber: 69 }); })();
+    }], 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$f = ($index, $item) => $item.id;
 function CollapsibleSectionGroupComponent_For_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -58106,87 +58170,87 @@ class ContentGenerationProgressComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
-      <div class="max-w-3xl w-full space-y-8">
-        <!-- Title Section -->
-        <div class="text-center space-y-3">
-          <div class="flex items-center justify-center mb-4">
-            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
-              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-              </svg>
-              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
-            </div>
-          </div>
-
-          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
-            {{ title() }}
-          </h2>
-
-          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
-            {{ subtitle() }}
-          </p>
-        </div>
-
-        <!-- Progress Section -->
-        <div class="space-y-4">
-          <!-- Progress Message -->
-          <div class="text-center">
-            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
-              {{ progressMessage() }}
-            </p>
-          </div>
-
-          <!-- Progress Bar Container -->
-          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
-            <!-- Background Track -->
-            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
-
-            <!-- Solid Fill with Gradient -->
-            <div
-              [ngClass]="progressBarFillClasses()"
-              [style.width.%]="progressPercentage()"
-              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
-              <!-- Inner shimmer effect -->
-              <div class="absolute inset-0 shimmer-effect"></div>
-            </div>
-
-            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                class="absolute pointer-events-none"
-                [style.left.%]="progressPercentage()"
-                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
-                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
-              </div>
-            }
-
-            <!-- Glow effect at the progress edge -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                [ngClass]="progressGlowClasses()"
-                [style.left.%]="progressPercentage()"
-                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
-                style="margin-left: -8px;">
-              </div>
-            }
-          </div>
-
-          <!-- Progress Percentage -->
-          <div class="text-center">
-            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
-              {{ progressPercentage() }}% complete
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
+      <div class="max-w-3xl w-full space-y-8">
+        <!-- Title Section -->
+        <div class="text-center space-y-3">
+          <div class="flex items-center justify-center mb-4">
+            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
+              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
+            </div>
+          </div>
+
+          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
+            {{ title() }}
+          </h2>
+
+          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
+            {{ subtitle() }}
+          </p>
+        </div>
+
+        <!-- Progress Section -->
+        <div class="space-y-4">
+          <!-- Progress Message -->
+          <div class="text-center">
+            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
+              {{ progressMessage() }}
+            </p>
+          </div>
+
+          <!-- Progress Bar Container -->
+          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
+            <!-- Background Track -->
+            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
+
+            <!-- Solid Fill with Gradient -->
+            <div
+              [ngClass]="progressBarFillClasses()"
+              [style.width.%]="progressPercentage()"
+              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
+              <!-- Inner shimmer effect -->
+              <div class="absolute inset-0 shimmer-effect"></div>
+            </div>
+
+            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                class="absolute pointer-events-none"
+                [style.left.%]="progressPercentage()"
+                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
+                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
+              </div>
+            }
+
+            <!-- Glow effect at the progress edge -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                [ngClass]="progressGlowClasses()"
+                [style.left.%]="progressPercentage()"
+                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
+                style="margin-left: -8px;">
+              </div>
+            }
+          </div>
+
+          <!-- Progress Percentage -->
+          <div class="text-center">
+            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
+              {{ progressPercentage() }}% complete
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
   `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
     }], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
@@ -58478,7 +58542,9 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.profileContextService = inject(ProfileContextService);
         this.searchService = inject(BusinessProfileSearchService);
         this.modalService = inject(ModalService);
+        this.confettiService = inject(ConfettiService);
         this.currentProfile = signal(undefined, ...(ngDevMode ? [{ debugName: "currentProfile" }] : []));
+        this.previousContentStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "previousContentStatus" }] : []));
         this.COLLAPSE_THRESHOLD = 20;
         this.EXPAND_THRESHOLD = 10;
         this.embeddedScrollEffect = effect(() => {
@@ -58568,6 +58634,19 @@ class SymphiqBusinessAnalysisDashboardComponent {
                 this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
             }
         });
+        effect(() => {
+            const currentStatus = this.profile()?.selfContentStatus;
+            const prevStatus = this.previousContentStatus();
+            if (prevStatus === AiDynamicContentStatusEnum.GENERATING &&
+                currentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                this.confettiService.trigger({
+                    intensity: 'celebration',
+                    delay: 200,
+                    viewMode: this.viewMode(),
+                });
+            }
+            this.previousContentStatus.set(currentStatus);
+        });
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
@@ -59285,7 +59364,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 335 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 336 }); })();
 
 function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 6);