@eric-emg/symphiq-components 1.2.143 → 1.2.144

package/fesm2022/symphiq-components.mjs

@@ -2436,7 +2436,7 @@ class CrossDashboardRelationshipsService {
             }]
     }], null, null); })();
 
-const _c0$12 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
+const _c0$13 = 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() {
@@ -2453,7 +2453,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$12, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$13, 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 }); }
@@ -2493,7 +2493,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$11 = (a0, a1) => [a0, a1];
+const _c0$12 = (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);
@@ -2545,7 +2545,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$11, 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$12, 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);
@@ -4147,7 +4147,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$10 = () => [1, 2, 3, 4];
+const _c0$11 = () => [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);
@@ -4181,7 +4181,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$10));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$11));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
@@ -5396,7 +5396,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$$ = () => [1, 2, 3];
+const _c0$10 = () => [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) {
@@ -5434,7 +5434,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$$));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$10));
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c1$B));
 } }
@@ -8134,7 +8134,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$$ = () => [1, 2, 3];
 const _c1$A = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
 const _forTrack0$L = ($index, $item) => $item.metric;
@@ -8164,7 +8164,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$$));
 } }
 function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
@@ -8183,7 +8183,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$$));
 } }
 function BreakdownSectionComponent_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -12352,7 +12352,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$Z = () => [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) {
@@ -12628,7 +12628,7 @@ class FunnelStrengthDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$Z));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$_));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -12804,7 +12804,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$Y = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$Z = () => [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) {
@@ -13315,7 +13315,7 @@ class FunnelWeaknessDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$Y));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$Z));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -13784,7 +13784,7 @@ class ProfileItemLookupService {
             }]
     }], null, null); })();
 
-const _c0$X = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$Y = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$I = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -13802,7 +13802,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$X, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Y, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13891,7 +13891,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$W = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$X = 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);
@@ -13908,7 +13908,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$W, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$X, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function CompetitorChipListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -14319,7 +14319,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$V = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$W = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$G = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -14340,7 +14340,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$V, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$W, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -21304,7 +21304,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$U = () => [];
+const _c0$V = () => [];
 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) {
@@ -21468,7 +21468,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$U));
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$V));
 } }
 function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -22549,7 +22549,7 @@ class SearchService {
             }]
     }], null, null); })();
 
-const _c0$T = ["searchInput"];
+const _c0$U = ["searchInput"];
 const _forTrack0$A = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -22911,7 +22911,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$T, 5);
+            i0.ɵɵviewQuery(_c0$U, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -24860,20 +24860,35 @@ function JourneyProgressIndicatorComponent_For_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(!(ɵ$index_9_r2 === ɵ$count_9_r8 - 1) ? 9 : -1);
 } }
+function JourneyProgressIndicatorComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 38);
+    i0.ɵɵelement(1, "circle", 39)(2, "path", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Loading... ");
+} }
+function JourneyProgressIndicatorComponent_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 41);
+    i0.ɵɵelement(2, "path", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
+} }
 function JourneyProgressIndicatorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.nextStepClick.emit()); });
-    i0.ɵɵtext(1);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 38);
-    i0.ɵɵelement(3, "path", 39);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
+    i0.ɵɵconditionalCreate(1, JourneyProgressIndicatorComponent_Conditional_6_Conditional_1_Template, 4, 0)(2, JourneyProgressIndicatorComponent_Conditional_6_Conditional_2_Template, 3, 1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r2.nextStepButtonClasses());
+    i0.ɵɵclassProp("cursor-pointer", !ctx_r2.isLoading())("cursor-not-allowed", ctx_r2.isLoading())("opacity-50", ctx_r2.isLoading())("hover:scale-105", !ctx_r2.isLoading());
+    i0.ɵɵproperty("disabled", ctx_r2.isLoading())("ngClass", ctx_r2.nextStepButtonClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
+    i0.ɵɵconditional(ctx_r2.isLoading() ? 1 : 2);
 } }
 function JourneyProgressIndicatorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -24899,51 +24914,51 @@ function JourneyProgressIndicatorComponent_Conditional_13_Template(rf, ctx) { if
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 44);
+    i0.ɵɵelementStart(0, "svg", 47);
     i0.ɵɵelement(1, "path", 29);
     i0.ɵɵelementEnd();
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 45);
+    i0.ɵɵelement(0, "div", 48);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r2.getCurrentDotClasses());
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 46);
+    i0.ɵɵelement(0, "div", 49);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r2.getAccessibleDotClasses());
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelementStart(0, "span", 50);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const step_r11 = ctx_r9.$implicit;
-    const ɵ$index_106_r12 = ctx_r9.$index;
+    const ɵ$index_115_r12 = ctx_r9.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getStepNumberClasses(step_r11));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ɵ$index_106_r12 + 1, " ");
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_115_r12 + 1, " ");
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "div", 43);
-    i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 44)(3, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_3_Template, 1, 1, "div", 45)(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_4_Template, 1, 1, "div", 46)(5, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_5_Template, 2, 2, "span", 47);
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46);
+    i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 47)(3, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_3_Template, 1, 1, "div", 48)(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_4_Template, 1, 1, "div", 49)(5, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_5_Template, 2, 2, "span", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 48)(7, "div", 49)(8, "span", 25);
+    i0.ɵɵelementStart(6, "div", 51)(7, "div", 52)(8, "span", 25);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 50);
+    i0.ɵɵelementStart(10, "span", 53);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "p", 51);
+    i0.ɵɵelementStart(12, "p", 54);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const step_r11 = ctx.$implicit;
-    const ɵ$index_106_r12 = ctx.$index;
+    const ɵ$index_115_r12 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r11));
@@ -24952,7 +24967,7 @@ function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx
     i0.ɵɵadvance(6);
     i0.ɵɵproperty("ngClass", ctx_r2.tooltipStepNumberClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ɵ$index_106_r12 + 1, ".");
+    i0.ɵɵtextInterpolate1("", ɵ$index_115_r12 + 1, ".");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(step_r11));
     i0.ɵɵadvance();
@@ -24963,11 +24978,11 @@ function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx
     i0.ɵɵtextInterpolate1(" ", step_r11.description, " ");
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "h4", 40);
+    i0.ɵɵelementStart(0, "div", 18)(1, "h4", 43);
     i0.ɵɵtext(2, "Journey Progress");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 41);
-    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 42, _forTrack0$x);
+    i0.ɵɵelementStart(3, "div", 44);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$x);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24977,20 +24992,35 @@ function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r2.steps());
 } }
+function JourneyProgressIndicatorComponent_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 56);
+    i0.ɵɵelement(1, "circle", 39)(2, "path", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Loading... ");
+} }
+function JourneyProgressIndicatorComponent_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 57);
+    i0.ɵɵelement(2, "path", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
+} }
 function JourneyProgressIndicatorComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 52);
-    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.nextStepClick.emit()); });
-    i0.ɵɵtext(1);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 53);
-    i0.ɵɵelement(3, "path", 39);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
+    i0.ɵɵconditionalCreate(1, JourneyProgressIndicatorComponent_Conditional_24_Conditional_1_Template, 4, 0)(2, JourneyProgressIndicatorComponent_Conditional_24_Conditional_2_Template, 3, 1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r2.nextStepButtonClasses());
+    i0.ɵɵclassProp("cursor-pointer", !ctx_r2.isLoading())("cursor-not-allowed", ctx_r2.isLoading())("opacity-50", ctx_r2.isLoading())("hover:scale-105", !ctx_r2.isLoading());
+    i0.ɵɵproperty("disabled", ctx_r2.isLoading())("ngClass", ctx_r2.nextStepButtonClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
+    i0.ɵɵconditional(ctx_r2.isLoading() ? 1 : 2);
 } }
 var JourneyStepIdEnum;
 (function (JourneyStepIdEnum) {
@@ -25023,6 +25053,8 @@ class JourneyProgressIndicatorComponent {
         this.showMobileTooltip = signal(false, ...(ngDevMode ? [{ debugName: "showMobileTooltip" }] : []));
         // Mobile navigation state
         this.mobileStepIndex = signal(0, ...(ngDevMode ? [{ debugName: "mobileStepIndex" }] : []));
+        // Loading state for next step button
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.stepDefinitions = [
             {
@@ -25164,6 +25196,12 @@ class JourneyProgressIndicatorComponent {
     toggleMobileTooltip() {
         this.showMobileTooltip.update(v => !v);
     }
+    handleNextStepClick() {
+        if (!this.isLoading()) {
+            this.isLoading.set(true);
+            this.nextStepClick.emit();
+        }
+    }
     // Mobile navigation methods
     getCurrentStepIndex() {
         return this.mobileStepIndex();
@@ -25386,11 +25424,11 @@ class JourneyProgressIndicatorComponent {
         return idx >= Math.floor(this.steps().length / 2);
     }
     static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[60px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "cursor-pointer", "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "ngClass"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "cursor-pointer", "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "hover:scale-105", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "cursor-pointer", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "click", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "click", "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "cursor-pointer", "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "cursor-pointer", "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "hover:scale-105", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[60px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "flex", "flex-col", "items-center", "cursor-pointer", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "click", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "click", "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "animate-spin"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$x);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 4, 2, "button", 4);
+            i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "div", 5)(8, "div", 6)(9, "div", 7)(10, "div", 8);
             i0.ɵɵconditionalCreate(11, JourneyProgressIndicatorComponent_Conditional_11_Template, 2, 0, ":svg:svg", 9)(12, JourneyProgressIndicatorComponent_Conditional_12_Template, 1, 1, "div", 10)(13, JourneyProgressIndicatorComponent_Conditional_13_Template, 2, 2, "span", 11);
@@ -25410,7 +25448,7 @@ class JourneyProgressIndicatorComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(23, JourneyProgressIndicatorComponent_Conditional_23_Template, 6, 2, "div", 18);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(24, JourneyProgressIndicatorComponent_Conditional_24_Template, 4, 2, "button", 19);
+            i0.ɵɵconditionalCreate(24, JourneyProgressIndicatorComponent_Conditional_24_Template, 3, 11, "button", 19);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -25440,205 +25478,231 @@ class JourneyProgressIndicatorComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JourneyProgressIndicatorComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
-    <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
-      <div class="max-w-7xl mx-auto overflow-visible">
-        <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
-        <div class="hidden lg:flex items-start justify-between overflow-visible">
-          <!-- Steps Container -->
-          <div class="flex-1 flex items-start justify-start overflow-visible">
-            @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
-              <!-- Step Column (Vertical Layout: Dot above, Label below) -->
-              <div
-                class="flex flex-col items-center cursor-pointer relative step-column overflow-visible flex-shrink-0"
-                [style.width]="'64px'"
-                (mouseenter)="setHoveredStep(idx)"
-                (mouseleave)="clearHoveredStep()">
-
-                  <!-- Icon Circle -->
-                  <div
-                    [ngClass]="getStepIconContainerClasses(step)"
-                    class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5"
-                    (click)="(step.status === 'completed' || step.status === 'accessible') && stepClick.emit(idx + 1)"
-                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
-                    @if (step.status === 'completed') {
-                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                      </svg>
-                    } @else if (step.status === 'current') {
-                      <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                    } @else if (step.status === 'accessible') {
-                      <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
-                    } @else {
-                      <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
-                        {{ idx + 1 }}
-                      </span>
-                    }
-                  </div>
-
-                  <!-- Abbreviated Title (Always Visible) -->
-                  <span
-                    [ngClass]="getAbbreviatedTitleClasses(step)"
-                    class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis"
-                    (click)="(step.status === 'completed' || step.status === 'accessible') && stepClick.emit(idx + 1)"
-                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
-                    {{ getAbbreviatedTitle(step.title) }}
-                  </span>
-
-                  <!-- Absolute Positioned Tooltip -->
-                  @if (hoveredStepIndex() === idx) {
-                    <div
-                      [ngClass]="getExpandedCardClasses(idx)"
-                      [class.expanded-card-right]="isExpandRight(idx)"
-                      [class.expanded-card-left]="isExpandLeft(idx)"
-                      class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
-                      [style.top]="'-29px'"
-                      [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
-                      [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
-                      <div class="flex items-start px-4 py-3 expanded-content">
-                        <!-- Step Number and Title with Description -->
-                        <div class="flex items-start gap-2 w-full">
-                          <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
-                          <div class="flex flex-col gap-1 flex-1">
-                            <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
-                            <!-- Description (Delayed Fade In) -->
-                            @if (shouldShowDetailedTooltip()) {
-                              <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
-                                {{ step.description }}
-                              </p>
-                            }
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-              <!-- Connector Line (Horizontal, stretches to fill available space) -->
-              @if (!isLast) {
-                <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
-              }
-            }
-          </div>
-
-          <!-- Next Step Button -->
-          @if (showNextStepAction() && getNextStep()) {
-            <button
-              type="button"
-              (click)="nextStepClick.emit()"
-              [ngClass]="nextStepButtonClasses()"
-              class="cursor-pointer px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0">
-              {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-              </svg>
-            </button>
-          }
-        </div>
-
-        <!-- Mobile Navigation (below lg) -->
-        <div class="lg:hidden">
-          <div class="flex items-center justify-between gap-4">
-            <!-- Current Step Display -->
-            <div class="flex-1 flex items-center gap-3">
-              <!-- Step Icon -->
-              <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
-                @if (getCurrentStep().status === 'completed') {
-                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                  </svg>
-                } @else if (getCurrentStep().status === 'current') {
-                  <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                } @else {
-                  <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
-                    {{ getCurrentStepIndex() + 1 }}
-                  </span>
-                }
-              </div>
-
-              <!-- Step Info -->
-              <div class="flex-1 text-left">
-                <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
-                  {{ getCurrentStep().title }}
-                </h3>
-                <!-- Step Counter with Tooltip Trigger -->
-                <div
-                  class="flex items-center gap-1.5 relative"
-                  (mouseenter)="showMobileTooltip.set(true)"
-                  (mouseleave)="showMobileTooltip.set(false)"
-                  (click)="toggleMobileTooltip()">
-                  <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
-                    Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
-                  </span>
-                  <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                  </div>
-
-                  <!-- Mobile Tooltip with All Steps -->
-                  @if (showMobileTooltip()) {
-                    <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
-                      <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
-                      <div class="space-y-2">
-                        @for (step of steps(); track step.id; let idx = $index) {
-                          <div class="flex items-start gap-2">
-                            <!-- Step Icon -->
-                            <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
-                              @if (step.status === 'completed') {
-                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                                </svg>
-                              } @else if (step.status === 'current') {
-                                <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                              } @else if (step.status === 'accessible') {
-                                <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
-                              } @else {
-                                <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
-                                  {{ idx + 1 }}
-                                </span>
-                              }
-                            </div>
-                            <!-- Step Info -->
-                            <div class="flex-1 min-w-0">
-                              <div class="flex items-center gap-2">
-                                <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
-                                <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
-                              </div>
-                              <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
-                                {{ step.description }}
-                              </p>
-                            </div>
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <!-- Get Started Button -->
-            @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
-              <button
-                type="button"
-                (click)="nextStepClick.emit()"
-                [ngClass]="nextStepButtonClasses()"
-                class="cursor-pointer px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 hover:scale-105 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap">
-                {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                </svg>
-              </button>
-            }
-          </div>
-        </div>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
+    <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
+      <div class="max-w-7xl mx-auto overflow-visible">
+        <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
+        <div class="hidden lg:flex items-start justify-between overflow-visible">
+          <!-- Steps Container -->
+          <div class="flex-1 flex items-start justify-start overflow-visible">
+            @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
+              <!-- Step Column (Vertical Layout: Dot above, Label below) -->
+              <div
+                class="flex flex-col items-center cursor-pointer relative step-column overflow-visible flex-shrink-0"
+                [style.width]="'64px'"
+                (mouseenter)="setHoveredStep(idx)"
+                (mouseleave)="clearHoveredStep()">
+
+                  <!-- Icon Circle -->
+                  <div
+                    [ngClass]="getStepIconContainerClasses(step)"
+                    class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5"
+                    (click)="(step.status === 'completed' || step.status === 'accessible') && stepClick.emit(idx + 1)"
+                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
+                    @if (step.status === 'completed') {
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                      </svg>
+                    } @else if (step.status === 'current') {
+                      <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                    } @else if (step.status === 'accessible') {
+                      <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
+                    } @else {
+                      <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
+                        {{ idx + 1 }}
+                      </span>
+                    }
+                  </div>
+
+                  <!-- Abbreviated Title (Always Visible) -->
+                  <span
+                    [ngClass]="getAbbreviatedTitleClasses(step)"
+                    class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis"
+                    (click)="(step.status === 'completed' || step.status === 'accessible') && stepClick.emit(idx + 1)"
+                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
+                    {{ getAbbreviatedTitle(step.title) }}
+                  </span>
+
+                  <!-- Absolute Positioned Tooltip -->
+                  @if (hoveredStepIndex() === idx) {
+                    <div
+                      [ngClass]="getExpandedCardClasses(idx)"
+                      [class.expanded-card-right]="isExpandRight(idx)"
+                      [class.expanded-card-left]="isExpandLeft(idx)"
+                      class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
+                      [style.top]="'-29px'"
+                      [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
+                      [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
+                      <div class="flex items-start px-4 py-3 expanded-content">
+                        <!-- Step Number and Title with Description -->
+                        <div class="flex items-start gap-2 w-full">
+                          <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
+                          <div class="flex flex-col gap-1 flex-1">
+                            <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
+                            <!-- Description (Delayed Fade In) -->
+                            @if (shouldShowDetailedTooltip()) {
+                              <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
+                                {{ step.description }}
+                              </p>
+                            }
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+
+              <!-- Connector Line (Horizontal, stretches to fill available space) -->
+              @if (!isLast) {
+                <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
+              }
+            }
+          </div>
+
+          <!-- Next Step Button -->
+          @if (showNextStepAction() && getNextStep()) {
+            <button
+              type="button"
+              (click)="handleNextStepClick()"
+              [disabled]="isLoading()"
+              [ngClass]="nextStepButtonClasses()"
+              class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0"
+              [class.cursor-pointer]="!isLoading()"
+              [class.cursor-not-allowed]="isLoading()"
+              [class.opacity-50]="isLoading()"
+              [class.hover:scale-105]="!isLoading()">
+              @if (isLoading()) {
+                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Loading...
+              } @else {
+                {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                </svg>
+              }
+            </button>
+          }
+        </div>
+
+        <!-- Mobile Navigation (below lg) -->
+        <div class="lg:hidden">
+          <div class="flex items-center justify-between gap-4">
+            <!-- Current Step Display -->
+            <div class="flex-1 flex items-center gap-3">
+              <!-- Step Icon -->
+              <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
+                @if (getCurrentStep().status === 'completed') {
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                  </svg>
+                } @else if (getCurrentStep().status === 'current') {
+                  <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                } @else {
+                  <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
+                    {{ getCurrentStepIndex() + 1 }}
+                  </span>
+                }
+              </div>
+
+              <!-- Step Info -->
+              <div class="flex-1 text-left">
+                <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
+                  {{ getCurrentStep().title }}
+                </h3>
+                <!-- Step Counter with Tooltip Trigger -->
+                <div
+                  class="flex items-center gap-1.5 relative"
+                  (mouseenter)="showMobileTooltip.set(true)"
+                  (mouseleave)="showMobileTooltip.set(false)"
+                  (click)="toggleMobileTooltip()">
+                  <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
+                    Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
+                  </span>
+                  <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                  </div>
+
+                  <!-- Mobile Tooltip with All Steps -->
+                  @if (showMobileTooltip()) {
+                    <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
+                      <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
+                      <div class="space-y-2">
+                        @for (step of steps(); track step.id; let idx = $index) {
+                          <div class="flex items-start gap-2">
+                            <!-- Step Icon -->
+                            <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
+                              @if (step.status === 'completed') {
+                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                                </svg>
+                              } @else if (step.status === 'current') {
+                                <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                              } @else if (step.status === 'accessible') {
+                                <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
+                              } @else {
+                                <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
+                                  {{ idx + 1 }}
+                                </span>
+                              }
+                            </div>
+                            <!-- Step Info -->
+                            <div class="flex-1 min-w-0">
+                              <div class="flex items-center gap-2">
+                                <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
+                                <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
+                              </div>
+                              <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
+                                {{ step.description }}
+                              </p>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <!-- Get Started Button -->
+            @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
+              <button
+                type="button"
+                (click)="handleNextStepClick()"
+                [disabled]="isLoading()"
+                [ngClass]="nextStepButtonClasses()"
+                class="px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap"
+                [class.cursor-pointer]="!isLoading()"
+                [class.cursor-not-allowed]="isLoading()"
+                [class.opacity-50]="isLoading()"
+                [class.hover:scale-105]="!isLoading()">
+                @if (isLoading()) {
+                  <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Loading...
+                } @else {
+                  {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
   `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.step-glow-current{box-shadow:0 0 0 3px #3b82f64d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-current-dark{box-shadow:0 0 0 3px #60a5fa4d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-completed{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark{box-shadow:0 0 0 2px #34d39933}.step-glow-accessible{box-shadow:0 0 0 2px #3b82f61f}.step-glow-accessible-dark{box-shadow:0 0 0 2px #60a5fa26}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column:hover .step-circle{transform:scale(1.05)}.expanded-card-right{animation:expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left{animation:expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade{animation:fadeIn .15s ease-out forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.expanded-content{animation:contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes contentFadeIn{to{opacity:1}}\n"] }]
     }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 345 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 371 }); })();
 
 class ConfidenceLevelCardComponent {
     constructor() {
@@ -26536,7 +26600,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$S = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
+const _c0$T = [[["", "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() {
@@ -26669,7 +26733,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$S);
+            i0.ɵɵprojectionDef(_c0$T);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -27512,7 +27576,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$R = a0 => ({ name: "check-badge", source: a0 });
+const _c0$S = 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$w = ($index, $item) => $item.area;
@@ -27529,7 +27593,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$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);
@@ -27744,7 +27808,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$Q = a0 => ({ name: "shield-check", source: a0 });
+const _c0$R = 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 });
@@ -27762,7 +27826,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$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -28060,7 +28124,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$P = a0 => ({ name: "check-circle", source: a0 });
+const _c0$Q = a0 => ({ name: "check-circle", source: a0 });
 const _c1$w = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$u = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -28116,7 +28180,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$P, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Q, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.strength().supportingAnswers);
 } }
@@ -28301,7 +28365,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$O = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$P = 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$t = ($index, $item) => $item.questionId;
@@ -28579,7 +28643,7 @@ class CriticalGapDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$O, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$P, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.impactTitleClasses());
             i0.ɵɵadvance(2);
@@ -30164,7 +30228,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$N = a0 => ({ name: "check-badge", source: a0 });
+const _c0$O = 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 });
@@ -30182,7 +30246,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$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);
@@ -30487,7 +30551,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$M = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$N = 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$r($index, $item) { return this.getGapTitle($item); }
@@ -30504,7 +30568,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$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);
@@ -30881,7 +30945,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$L = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$M = 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$q = ($index, $item) => $item.opportunity;
@@ -30898,7 +30962,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$L, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$M, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -31150,7 +31214,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$K = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$L = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$p = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31215,7 +31279,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$K, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$L, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 8);
@@ -31535,7 +31599,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$J = a0 => ({ name: "chat-bubble-left-right", source: a0 });
+const _c0$K = 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);
@@ -31632,7 +31696,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$J, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$K, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerQuestionClasses());
     i0.ɵɵadvance();
@@ -31871,7 +31935,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$I = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$J = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$q = () => [];
 const _forTrack0$o = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31918,7 +31982,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$I, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$J, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 5);
@@ -32323,7 +32387,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$H = ["*"];
+const _c0$I = ["*"];
 const _c1$p = (a0, a1) => [a0, a1];
 function VisualizationContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -32368,7 +32432,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$H, 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$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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function VisualizationContainerComponent_Template_div_click_0_listener($event) { return ctx.onVisualizationClick($event); });
@@ -32489,7 +32553,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$G = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$H = 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);
@@ -32554,7 +32618,7 @@ class OpportunityHighlightBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$G, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$H, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -32611,7 +32675,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$F = a0 => ({ name: "users", source: a0 });
+const _c0$G = 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);
@@ -32626,7 +32690,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$F, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$G, 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());
 } }
@@ -33190,7 +33254,7 @@ class ViewportAnimationDirective {
             type: Input
         }] }); })();
 
-const _c0$E = a0 => ({ name: "star", source: a0 });
+const _c0$F = 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 });
@@ -33226,7 +33290,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$E, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$F, 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);
@@ -34268,7 +34332,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$D = a0 => ({ name: "calendar-days", source: a0 });
+const _c0$E = 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 });
@@ -34289,7 +34353,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$D, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$E, 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);
@@ -35106,7 +35170,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$C = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$D = 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 });
@@ -35251,7 +35315,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$C, 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$D, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function CustomerSegmentCardComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -36223,7 +36287,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$B = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$C = 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 });
@@ -36321,7 +36385,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$B, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$C, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -37060,7 +37124,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$A = () => ({ name: "cube", source: "HEROICONS" });
+const _c0$B = () => ({ 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 });
@@ -37107,7 +37171,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$A))("ngClass", ctx_r0.getStatIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$B))("ngClass", ctx_r0.getStatIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatLabelClasses());
     i0.ɵɵadvance(2);
@@ -38055,13 +38119,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$z = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$A = (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$z, 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$A, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
 } }
 class CompetitiveStrengthIndicatorComponent {
     constructor() {
@@ -38217,7 +38281,7 @@ function getCategoryBadgeClasses(category, isDark) {
     return `px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${colorClasses}`;
 }
 
-const _c0$y = a0 => ({ name: "shield-check", source: a0 });
+const _c0$z = 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 });
@@ -38289,7 +38353,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$y, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$z, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -38933,7 +38997,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$x = a0 => ({ name: "academic-cap", source: a0 });
+const _c0$y = 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 });
@@ -39014,7 +39078,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$x, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$y, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.expandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -40796,7 +40860,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$w = ["*"];
+const _c0$x = ["*"];
 class SkeletonCardBaseComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -40816,7 +40880,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$w, 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$x, 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);
@@ -41981,7 +42045,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$v = ["scrollContainer"];
+const _c0$w = ["scrollContainer"];
 const _c1$g = a0 => ({ name: "arrow-right", source: a0 });
 function ItemDetailModalComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -42101,7 +42165,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$v, 5);
+            i0.ɵɵviewQuery(_c0$w, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
@@ -42180,7 +42244,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$u = ["modalContent"];
+const _c0$v = ["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)];
@@ -44475,7 +44539,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$u, 5);
+            i0.ɵɵviewQuery(_c0$v, 5);
             i0.ɵɵviewQuery(_c1$f, 5);
         } if (rf & 2) {
             let _t;
@@ -45030,7 +45094,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$t = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$u = 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 });
@@ -45240,7 +45304,7 @@ class CompetitiveGapModalComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$t, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$u, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -45361,7 +45425,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$s = a0 => ({ name: "list-bullet", source: a0 });
+const _c0$t = 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 });
@@ -45381,7 +45445,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$s, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$t, ctx_r0.iconSource));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.titleClasses());
     i0.ɵɵadvance(2);
@@ -45601,7 +45665,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$r = ["modalContent"];
+const _c0$s = ["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();
@@ -46124,7 +46188,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$r, 5);
+            i0.ɵɵviewQuery(_c0$s, 5);
             i0.ɵɵviewQuery(_c1$c, 5);
         } if (rf & 2) {
             let _t;
@@ -46309,7 +46373,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$q = ["dashboardContainer"];
+const _c0$r = ["dashboardContainer"];
 const _c1$b = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
@@ -48570,7 +48634,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$q, 5);
+            i0.ɵɵviewQuery(_c0$r, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalComponent = _t.first);
@@ -51446,6 +51510,7 @@ class SymphiqWelcomeDashboardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 201 }); })();
 
+const _c0$q = ["shopNameInput"];
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
 } }
@@ -51457,43 +51522,43 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Te
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 15)(2, "div", 16)(3, "div")(4, "h2", 17);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 16)(2, "div", 17)(3, "div")(4, "h2", 18);
     i0.ɵɵtext(5, " Account Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 0);
+    i0.ɵɵelementStart(6, "p", 1);
     i0.ɵɵtext(7, " Your shop information ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 18);
+    i0.ɵɵelementStart(8, "button", 19);
     i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.enableEditMode()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 19);
-    i0.ɵɵelement(10, "path", 20);
+    i0.ɵɵelementStart(9, "svg", 20);
+    i0.ɵɵelement(10, "path", 21);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11, " Edit ");
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(12, "div", 21)(13, "div")(14, "label", 22);
+    i0.ɵɵelementStart(12, "div", 22)(13, "div")(14, "label", 23);
     i0.ɵɵtext(15, " Shop Name ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 23);
+    i0.ɵɵelementStart(16, "p", 24);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div")(19, "label", 22);
+    i0.ɵɵelementStart(18, "div")(19, "label", 23);
     i0.ɵɵtext(20, " Shop URL ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "a", 24);
+    i0.ɵɵelementStart(21, "a", 25);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div")(24, "label", 22);
+    i0.ɵɵelementStart(23, "div")(24, "label", 23);
     i0.ɵɵtext(25, " Shop Platform ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 23);
+    i0.ɵɵelementStart(26, "p", 24);
     i0.ɵɵconditionalCreate(27, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template, 1, 0)(28, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div")(30, "label", 22);
+    i0.ɵɵelementStart(29, "div")(30, "label", 23);
     i0.ɵɵtext(31, " Company Name ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "p", 23);
+    i0.ɵɵelementStart(32, "p", 24);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -51532,44 +51597,44 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().companyName, " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 30);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Shop name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 30);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Shop URL is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 40);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 41);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 40);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 41);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_47_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 30);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Platform name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "label", 27);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "label", 28);
     i0.ɵɵtext(2, " Platform Name ");
-    i0.ɵɵelementStart(3, "span", 28);
+    i0.ɵɵelementStart(3, "span", 29);
     i0.ɵɵtext(4, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "input", 48);
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_47_Conditional_6_Template, 2, 1, "p", 30);
+    i0.ɵɵelement(5, "input", 49);
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -51580,8 +51645,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_47_Te
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isFieldInvalid("otherPlatformName") ? 6 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_59_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 30);
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Company name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51590,72 +51655,72 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_59_Te
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 15)(2, "div", 25)(3, "h2", 17);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 16)(2, "div", 26)(3, "h2", 18);
     i0.ɵɵtext(4, " Create Account ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 0);
+    i0.ɵɵelementStart(5, "p", 1);
     i0.ɵɵtext(6, " Enter your shop details to get started with Symphiq ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "form", 26)(8, "div")(9, "label", 27);
+    i0.ɵɵelementStart(7, "form", 27)(8, "div")(9, "label", 28);
     i0.ɵɵtext(10, " Shop Name ");
-    i0.ɵɵelementStart(11, "span", 28);
+    i0.ɵɵelementStart(11, "span", 29);
     i0.ɵɵtext(12, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(13, "input", 29);
-    i0.ɵɵconditionalCreate(14, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_14_Template, 2, 1, "p", 30);
+    i0.ɵɵelement(13, "input", 30, 0);
+    i0.ɵɵconditionalCreate(15, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div")(16, "label", 27);
-    i0.ɵɵtext(17, " Shop URL ");
-    i0.ɵɵelementStart(18, "span", 28);
-    i0.ɵɵtext(19, "*");
+    i0.ɵɵelementStart(16, "div")(17, "label", 28);
+    i0.ɵɵtext(18, " Shop URL ");
+    i0.ɵɵelementStart(19, "span", 29);
+    i0.ɵɵtext(20, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 31)(21, "span", 32);
-    i0.ɵɵtext(22, " https:// ");
+    i0.ɵɵelementStart(21, "div", 32)(22, "span", 33);
+    i0.ɵɵtext(23, " https:// ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "input", 33);
+    i0.ɵɵelement(24, "input", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(24, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_24_Template, 2, 1, "p", 30);
+    i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div")(26, "label", 34);
-    i0.ɵɵtext(27, " Shop Platform ");
-    i0.ɵɵelementStart(28, "span", 28);
-    i0.ɵɵtext(29, "*");
+    i0.ɵɵelementStart(26, "div")(27, "label", 35);
+    i0.ɵɵtext(28, " Shop Platform ");
+    i0.ɵɵelementStart(29, "span", 29);
+    i0.ɵɵtext(30, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 35)(31, "label", 36);
-    i0.ɵɵelement(32, "input", 37);
-    i0.ɵɵelementStart(33, "div", 38)(34, "div", 39);
-    i0.ɵɵconditionalCreate(35, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_35_Template, 1, 0, "div", 40);
+    i0.ɵɵelementStart(31, "div", 36)(32, "label", 37);
+    i0.ɵɵelement(33, "input", 38);
+    i0.ɵɵelementStart(34, "div", 39)(35, "div", 40);
+    i0.ɵɵconditionalCreate(36, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_36_Template, 1, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "div", 41)(37, "div", 42);
-    i0.ɵɵtext(38, " Shopify ");
+    i0.ɵɵelementStart(37, "div", 42)(38, "div", 43);
+    i0.ɵɵtext(39, " Shopify ");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(39, "label", 36);
-    i0.ɵɵelement(40, "input", 37);
-    i0.ɵɵelementStart(41, "div", 38)(42, "div", 39);
-    i0.ɵɵconditionalCreate(43, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_43_Template, 1, 0, "div", 40);
+    i0.ɵɵelementStart(40, "label", 37);
+    i0.ɵɵelement(41, "input", 38);
+    i0.ɵɵelementStart(42, "div", 39)(43, "div", 40);
+    i0.ɵɵconditionalCreate(44, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template, 1, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 41)(45, "div", 42);
-    i0.ɵɵtext(46, " Other ");
+    i0.ɵɵelementStart(45, "div", 42)(46, "div", 43);
+    i0.ɵɵtext(47, " Other ");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵconditionalCreate(47, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_47_Template, 7, 3, "div");
-    i0.ɵɵelementStart(48, "div")(49, "label", 27);
-    i0.ɵɵtext(50, " Company Name ");
-    i0.ɵɵelementStart(51, "span", 28);
-    i0.ɵɵtext(52, "*");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(53, "input", 43);
-    i0.ɵɵelementStart(54, "div", 44)(55, "label", 45)(56, "input", 46);
-    i0.ɵɵlistener("change", function SymphiqCreateAccountDashboardComponent_Conditional_24_Template_input_change_56_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSameAsShopName()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "span", 47);
-    i0.ɵɵtext(58, " Same as Shop Name ");
+    i0.ɵɵconditionalCreate(48, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Template, 7, 3, "div");
+    i0.ɵɵelementStart(49, "div")(50, "label", 28);
+    i0.ɵɵtext(51, " Company Name ");
+    i0.ɵɵelementStart(52, "span", 29);
+    i0.ɵɵtext(53, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(54, "input", 44);
+    i0.ɵɵelementStart(55, "div", 45)(56, "label", 46)(57, "input", 47);
+    i0.ɵɵlistener("change", function SymphiqCreateAccountDashboardComponent_Conditional_24_Template_input_change_57_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSameAsShopName()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(58, "span", 48);
+    i0.ɵɵtext(59, " Same as Shop Name ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(59, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_59_Template, 2, 1, "p", 30);
+    i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    let tmp_17_0;
-    let tmp_22_0;
-    let tmp_24_0;
+    let tmp_18_0;
+    let tmp_23_0;
+    let tmp_25_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
     i0.ɵɵadvance();
@@ -51670,8 +51735,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.inputClasses("shopName"));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isFieldInvalid("shopName") ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isFieldInvalid("shopName") ? 15 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(5);
@@ -51679,7 +51744,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.urlInputClasses("shopUrl"));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isFieldInvalid("shopUrl") ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.isFieldInvalid("shopUrl") ? 25 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(5);
@@ -51689,7 +51754,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.radioIndicatorClasses(ctx_r1.ShopPlatformEnum.SHOPIFY));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_17_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_17_0.value) === ctx_r1.ShopPlatformEnum.SHOPIFY ? 35 : -1);
+    i0.ɵɵconditional(((tmp_18_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_18_0.value) === ctx_r1.ShopPlatformEnum.SHOPIFY ? 36 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.radioLabelClasses());
     i0.ɵɵadvance(2);
@@ -51699,11 +51764,11 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.radioIndicatorClasses(ctx_r1.ShopPlatformEnum.OTHER));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_22_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_22_0.value) === ctx_r1.ShopPlatformEnum.OTHER ? 43 : -1);
+    i0.ɵɵconditional(((tmp_23_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_23_0.value) === ctx_r1.ShopPlatformEnum.OTHER ? 44 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.radioLabelClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(((tmp_24_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_24_0.value) === ctx_r1.ShopPlatformEnum.OTHER ? 47 : -1);
+    i0.ɵɵconditional(((tmp_25_0 = ctx_r1.accountForm.get("shopPlatform")) == null ? null : tmp_25_0.value) === ctx_r1.ShopPlatformEnum.OTHER ? 48 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(4);
@@ -51714,23 +51779,69 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.checkboxLabelClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isFieldInvalid("companyName") ? 59 : -1);
+    i0.ɵɵconditional(ctx_r1.isFieldInvalid("companyName") ? 60 : -1);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
+    i0.ɵɵtext(1, " Cancel ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Updating Account... ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Creating Account... ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 55);
+    i0.ɵɵelement(1, "circle", 56)(2, "path", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_4_Template, 1, 0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 3 : 4);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Edit Account ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Create Account ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_1_Template, 1, 0);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 58);
+    i0.ɵɵelement(3, "path", 59);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 0 : 1);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 49)(2, "button", 50);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleContinue()); });
-    i0.ɵɵtext(3, " Create Account ");
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(4, "svg", 51);
-    i0.ɵɵelement(5, "path", 52);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 50)(2, "div", 51);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template, 2, 1, "button", 52);
+    i0.ɵɵelementStart(4, "button", 53);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleContinue()); });
+    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Template, 5, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Template, 4, 1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("cursor-pointer", ctx_r1.isFormValid())("cursor-not-allowed", !ctx_r1.isFormValid())("opacity-50", !ctx_r1.isFormValid())("hover:scale-105", ctx_r1.isFormValid());
-    i0.ɵɵproperty("disabled", !ctx_r1.isFormValid())("ngClass", ctx_r1.continueButtonClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("cursor-pointer", ctx_r1.isButtonEnabled())("cursor-not-allowed", !ctx_r1.isButtonEnabled())("opacity-50", !ctx_r1.isButtonEnabled())("hover:scale-105", ctx_r1.isButtonEnabled());
+    i0.ɵɵproperty("disabled", !ctx_r1.isButtonEnabled())("ngClass", ctx_r1.continueButtonClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isLoading() ? 5 : 6);
 } }
 var ShopPlatformEnum;
 (function (ShopPlatformEnum) {
@@ -51756,6 +51867,9 @@ class SymphiqCreateAccountDashboardComponent {
         this.scrollProgress = computed(() => this.headerScrollService.scrollProgress(), ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
         this.sameAsShopName = signal(false, ...(ngDevMode ? [{ debugName: "sameAsShopName" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.formChanged = signal(false, ...(ngDevMode ? [{ debugName: "formChanged" }] : []));
+        this.originalFormValue = null;
         this.ShopPlatformEnum = ShopPlatformEnum;
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.accountForm = this.fb.group({
@@ -51790,11 +51904,19 @@ class SymphiqCreateAccountDashboardComponent {
                 this.accountForm.get('companyName')?.setValue(value, { emitEvent: false });
             }
         });
+        this.accountForm.valueChanges.subscribe(() => {
+            if (this.editMode() && this.originalFormValue) {
+                this.checkFormChanged();
+            }
+        });
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
     }
     ngAfterViewInit() {
+        if (!this.accountData() && this.shopNameInput) {
+            this.shopNameInput.nativeElement.focus();
+        }
     }
     ngOnDestroy() {
     }
@@ -51806,8 +51928,33 @@ class SymphiqCreateAccountDashboardComponent {
         }
     }
     enableEditMode() {
+        this.originalFormValue = { ...this.accountForm.value };
+        this.formChanged.set(false);
         this.editMode.set(true);
     }
+    cancelEditMode() {
+        if (this.originalFormValue) {
+            this.accountForm.patchValue(this.originalFormValue);
+            if (this.originalFormValue.shopName === this.originalFormValue.companyName) {
+                this.sameAsShopName.set(true);
+            }
+        }
+        this.formChanged.set(false);
+        this.editMode.set(false);
+    }
+    checkFormChanged() {
+        if (!this.originalFormValue) {
+            this.formChanged.set(false);
+            return;
+        }
+        const current = this.accountForm.value;
+        const changed = current.shopName !== this.originalFormValue.shopName ||
+            current.shopUrl !== this.originalFormValue.shopUrl ||
+            current.shopPlatform !== this.originalFormValue.shopPlatform ||
+            current.otherPlatformName !== this.originalFormValue.otherPlatformName ||
+            current.companyName !== this.originalFormValue.companyName;
+        this.formChanged.set(changed);
+    }
     isFieldInvalid(fieldName) {
         const field = this.accountForm.get(fieldName);
         return !!(field && field.invalid && (field.dirty || field.touched));
@@ -51815,8 +51962,19 @@ class SymphiqCreateAccountDashboardComponent {
     isFormValid() {
         return this.accountForm.valid;
     }
+    isButtonEnabled() {
+        if (this.isLoading())
+            return false;
+        if (!this.isFormValid())
+            return false;
+        if (this.accountData() && this.editMode()) {
+            return this.formChanged();
+        }
+        return true;
+    }
     handleContinue() {
-        if (this.accountForm.valid) {
+        if (this.accountForm.valid && !this.isLoading()) {
+            this.isLoading.set(true);
             const formData = this.accountForm.value;
             this.onCreateAccount.emit(formData);
             this.editMode.set(false);
@@ -51962,8 +52120,13 @@ class SymphiqCreateAccountDashboardComponent {
             ? 'bg-white/90 border-slate-200'
             : 'bg-slate-900/90 border-slate-700';
     }
+    cancelButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-200 text-slate-700 hover:bg-slate-300'
+            : 'bg-slate-700 text-slate-300 hover:bg-slate-600';
+    }
     continueButtonClasses() {
-        if (!this.isFormValid()) {
+        if (!this.isButtonEnabled()) {
             return this.isLightMode()
                 ? 'bg-slate-300 text-slate-500'
                 : 'bg-slate-700 text-slate-500';
@@ -51973,30 +52136,35 @@ class SymphiqCreateAccountDashboardComponent {
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white';
     }
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], hostBindings: function SymphiqCreateAccountDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    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);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
+        } }, hostBindings: function SymphiqCreateAccountDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqCreateAccountDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 26, vars: 44, 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", "pb-32"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 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", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], [1, "text-base", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], ["type", "button", 1, "w-full", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div");
-            i0.ɵɵelement(2, "div", 1);
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 26, vars: 44, consts: [["shopNameInput", ""], [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", "pb-32"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 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", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], [1, "text-base", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div");
+            i0.ɵɵelement(2, "div", 2);
             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.ɵɵelement(3, "div", 3);
+            i0.ɵɵelementStart(4, "div", 4)(5, "header", 5)(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div")(10, "h1", 1);
             i0.ɵɵtext(11, " Create Account ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 0);
+            i0.ɵɵelementStart(12, "p", 1);
             i0.ɵɵtext(13, " Tell us about your shop ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
+            i0.ɵɵelementStart(14, "div", 6)(15, "div", 9)(16, "div", 8)(17, "div", 10)(18, "h1", 1);
             i0.ɵɵtext(19, " Create Account ");
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 10);
+            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 11);
             i0.ɵɵlistener("stepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "main", 11)(22, "div", 12);
-            i0.ɵɵconditionalCreate(23, SymphiqCreateAccountDashboardComponent_Conditional_23_Template, 34, 18, "div", 13);
-            i0.ɵɵconditionalCreate(24, SymphiqCreateAccountDashboardComponent_Conditional_24_Template, 60, 35, "div", 13);
+            i0.ɵɵelementStart(21, "main", 12)(22, "div", 13);
+            i0.ɵɵconditionalCreate(23, SymphiqCreateAccountDashboardComponent_Conditional_23_Template, 34, 18, "div", 14);
+            i0.ɵɵconditionalCreate(24, SymphiqCreateAccountDashboardComponent_Conditional_24_Template, 61, 35, "div", 14);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 6, 11, "div", 14);
+            i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 7, 13, "div", 15);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -52035,352 +52203,383 @@ class SymphiqCreateAccountDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqCreateAccountDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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()">
-                    Create Account
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Tell us about your shop
-                  </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'">
-                    Create Account
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
-          [showNextStepAction]="showNextStepAction()"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative pb-32">
-          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <!-- View Mode: Display Account Data -->
-            @if (accountData() && !editMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="flex items-start justify-between mb-6">
-                    <div>
-                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                        Account Details
-                      </h2>
-                      <p [ngClass]="sectionDescriptionClasses()">
-                        Your shop information
-                      </p>
-                    </div>
-                    <button
-                      type="button"
-                      (click)="enableEditMode()"
-                      [ngClass]="editButtonClasses()"
-                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-                      </svg>
-                      Edit
-                    </button>
-                  </div>
-
-                  <div class="space-y-4">
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop Name
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        {{ accountData()!.shopName }}
-                      </p>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop URL
-                      </label>
-                      <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
-                         [ngClass]="viewLinkClasses()"
-                         class="text-base hover:underline">
-                        {{ accountData()!.shopUrl }}
-                      </a>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop Platform
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
-                          Shopify
-                        } @else {
-                          {{ accountData()!.otherPlatformName || 'Other' }}
-                        }
-                      </p>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Company Name
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        {{ accountData()!.companyName }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            }
-
-            <!-- Edit Mode: Form -->
-            @if (!accountData() || editMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="mb-6">
-                    <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                      Create Account
-                    </h2>
-                    <p [ngClass]="sectionDescriptionClasses()">
-                      Enter your shop details to get started with Symphiq
-                    </p>
-                  </div>
-
-                  <form [formGroup]="accountForm" class="space-y-6">
-                    <!-- Shop Name -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Shop Name <span class="text-red-500">*</span>
-                      </label>
-                      <input
-                        type="text"
-                        formControlName="shopName"
-                        [ngClass]="inputClasses('shopName')"
-                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                        placeholder="Enter your shop name"
-                      />
-                      @if (isFieldInvalid('shopName')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Shop name is required
-                        </p>
-                      }
-                    </div>
-
-                    <!-- Shop URL -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Shop URL <span class="text-red-500">*</span>
-                      </label>
-                      <div class="flex items-center">
-                        <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
-                          https://
-                        </span>
-                        <input
-                          type="text"
-                          formControlName="shopUrl"
-                          [ngClass]="urlInputClasses('shopUrl')"
-                          class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                          placeholder="yourshop.com"
-                        />
-                      </div>
-                      @if (isFieldInvalid('shopUrl')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Shop URL is required
-                        </p>
-                      }
-                    </div>
-
-                    <!-- Shop Platform -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
-                        Shop Platform <span class="text-red-500">*</span>
-                      </label>
-                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
-                          <input
-                            type="radio"
-                            formControlName="shopPlatform"
-                            [value]="ShopPlatformEnum.SHOPIFY"
-                            class="sr-only"
-                          />
-                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
-                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
-                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
-                                <div class="w-3 h-3 rounded-full bg-current"></div>
-                              }
-                            </div>
-                            <div class="flex-1">
-                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
-                                Shopify
-                              </div>
-                            </div>
-                          </div>
-                        </label>
-
-                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
-                          <input
-                            type="radio"
-                            formControlName="shopPlatform"
-                            [value]="ShopPlatformEnum.OTHER"
-                            class="sr-only"
-                          />
-                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
-                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
-                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
-                                <div class="w-3 h-3 rounded-full bg-current"></div>
-                              }
-                            </div>
-                            <div class="flex-1">
-                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
-                                Other
-                              </div>
-                            </div>
-                          </div>
-                        </label>
-                      </div>
-                    </div>
-
-                    <!-- Other Platform Name (Conditional) -->
-                    @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
-                      <div>
-                        <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                          Platform Name <span class="text-red-500">*</span>
-                        </label>
-                        <input
-                          type="text"
-                          formControlName="otherPlatformName"
-                          [ngClass]="inputClasses('otherPlatformName')"
-                          class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                          placeholder="Enter platform name (e.g., WooCommerce, Magento)"
-                        />
-                        @if (isFieldInvalid('otherPlatformName')) {
-                          <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                            Platform name is required
-                          </p>
-                        }
-                      </div>
-                    }
-
-                    <!-- Company Name -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Company Name <span class="text-red-500">*</span>
-                      </label>
-                      <input
-                        type="text"
-                        formControlName="companyName"
-                        [ngClass]="inputClasses('companyName')"
-                        [readonly]="sameAsShopName()"
-                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                        [class.cursor-not-allowed]="sameAsShopName()"
-                        [class.opacity-60]="sameAsShopName()"
-                        placeholder="Enter company name"
-                      />
-                      <div class="mt-2">
-                        <label class="flex items-center gap-2 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            [checked]="sameAsShopName()"
-                            (change)="toggleSameAsShopName()"
-                            [ngClass]="checkboxClasses()"
-                            class="w-4 h-4 rounded border-2 transition-all duration-200"
-                          />
-                          <span [ngClass]="checkboxLabelClasses()" class="text-sm">
-                            Same as Shop Name
-                          </span>
-                        </label>
-                      </div>
-                      @if (isFieldInvalid('companyName')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Company name is required
-                        </p>
-                      }
-                    </div>
-                  </form>
-                </div>
-              </div>
-            }
-          </div>
-        </main>
-
-        <!-- Sticky Continue Button -->
-        @if (!accountData() || editMode()) {
-          <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
-            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-              <button
-                type="button"
-                (click)="handleContinue()"
-                [disabled]="!isFormValid()"
-                [ngClass]="continueButtonClasses()"
-                class="w-full px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
-                [class.cursor-pointer]="isFormValid()"
-                [class.cursor-not-allowed]="!isFormValid()"
-                [class.opacity-50]="!isFormValid()"
-                [class.hover:scale-105]="isFormValid()">
-                Create Account
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
-                </svg>
-              </button>
-            </div>
-          </div>
-        }
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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()">
+                    Create Account
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Tell us about your shop
+                  </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'">
+                    Create Account
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+          [viewMode]="viewMode()"
+          [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
+          [showNextStepAction]="showNextStepAction()"
+          [forDemo]="forDemo()"
+          [maxAccessibleStepId]="maxAccessibleStepId()"
+          (stepClick)="stepClick.emit($event)"
+          (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative pb-32">
+          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <!-- View Mode: Display Account Data -->
+            @if (accountData() && !editMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start justify-between mb-6">
+                    <div>
+                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                        Account Details
+                      </h2>
+                      <p [ngClass]="sectionDescriptionClasses()">
+                        Your shop information
+                      </p>
+                    </div>
+                    <button
+                      type="button"
+                      (click)="enableEditMode()"
+                      [ngClass]="editButtonClasses()"
+                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                      </svg>
+                      Edit
+                    </button>
+                  </div>
+
+                  <div class="space-y-4">
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop Name
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        {{ accountData()!.shopName }}
+                      </p>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop URL
+                      </label>
+                      <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
+                         [ngClass]="viewLinkClasses()"
+                         class="text-base hover:underline">
+                        {{ accountData()!.shopUrl }}
+                      </a>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop Platform
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
+                          Shopify
+                        } @else {
+                          {{ accountData()!.otherPlatformName || 'Other' }}
+                        }
+                      </p>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Company Name
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        {{ accountData()!.companyName }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <!-- Edit Mode: Form -->
+            @if (!accountData() || editMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="mb-6">
+                    <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                      Create Account
+                    </h2>
+                    <p [ngClass]="sectionDescriptionClasses()">
+                      Enter your shop details to get started with Symphiq
+                    </p>
+                  </div>
+
+                  <form [formGroup]="accountForm" class="space-y-6">
+                    <!-- Shop Name -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Shop Name <span class="text-red-500">*</span>
+                      </label>
+                      <input
+                        #shopNameInput
+                        type="text"
+                        formControlName="shopName"
+                        [ngClass]="inputClasses('shopName')"
+                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                        placeholder="Enter your shop name"
+                      />
+                      @if (isFieldInvalid('shopName')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Shop name is required
+                        </p>
+                      }
+                    </div>
+
+                    <!-- Shop URL -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Shop URL <span class="text-red-500">*</span>
+                      </label>
+                      <div class="flex items-center">
+                        <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
+                          https://
+                        </span>
+                        <input
+                          type="text"
+                          formControlName="shopUrl"
+                          [ngClass]="urlInputClasses('shopUrl')"
+                          class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                          placeholder="yourshop.com"
+                        />
+                      </div>
+                      @if (isFieldInvalid('shopUrl')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Shop URL is required
+                        </p>
+                      }
+                    </div>
+
+                    <!-- Shop Platform -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
+                        Shop Platform <span class="text-red-500">*</span>
+                      </label>
+                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
+                          <input
+                            type="radio"
+                            formControlName="shopPlatform"
+                            [value]="ShopPlatformEnum.SHOPIFY"
+                            class="sr-only"
+                          />
+                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
+                                <div class="w-3 h-3 rounded-full bg-current"></div>
+                              }
+                            </div>
+                            <div class="flex-1">
+                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
+                                Shopify
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+
+                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
+                          <input
+                            type="radio"
+                            formControlName="shopPlatform"
+                            [value]="ShopPlatformEnum.OTHER"
+                            class="sr-only"
+                          />
+                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
+                                <div class="w-3 h-3 rounded-full bg-current"></div>
+                              }
+                            </div>
+                            <div class="flex-1">
+                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
+                                Other
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+                      </div>
+                    </div>
+
+                    <!-- Other Platform Name (Conditional) -->
+                    @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
+                      <div>
+                        <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                          Platform Name <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                          type="text"
+                          formControlName="otherPlatformName"
+                          [ngClass]="inputClasses('otherPlatformName')"
+                          class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                          placeholder="Enter platform name (e.g., WooCommerce, Magento)"
+                        />
+                        @if (isFieldInvalid('otherPlatformName')) {
+                          <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                            Platform name is required
+                          </p>
+                        }
+                      </div>
+                    }
+
+                    <!-- Company Name -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Company Name <span class="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        formControlName="companyName"
+                        [ngClass]="inputClasses('companyName')"
+                        [readonly]="sameAsShopName()"
+                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                        [class.cursor-not-allowed]="sameAsShopName()"
+                        [class.opacity-60]="sameAsShopName()"
+                        placeholder="Enter company name"
+                      />
+                      <div class="mt-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                          <input
+                            type="checkbox"
+                            [checked]="sameAsShopName()"
+                            (change)="toggleSameAsShopName()"
+                            [ngClass]="checkboxClasses()"
+                            class="w-4 h-4 rounded border-2 transition-all duration-200"
+                          />
+                          <span [ngClass]="checkboxLabelClasses()" class="text-sm">
+                            Same as Shop Name
+                          </span>
+                        </label>
+                      </div>
+                      @if (isFieldInvalid('companyName')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Company name is required
+                        </p>
+                      }
+                    </div>
+                  </form>
+                </div>
+              </div>
+            }
+          </div>
+        </main>
+
+        <!-- Sticky Continue Button -->
+        @if (!accountData() || editMode()) {
+          <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
+            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div class="flex items-center gap-3">
+                @if (accountData() && editMode()) {
+                  <button
+                    type="button"
+                    (click)="cancelEditMode()"
+                    [ngClass]="cancelButtonClasses()"
+                    class="px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-105">
+                    Cancel
+                  </button>
+                }
+                <button
+                  type="button"
+                  (click)="handleContinue()"
+                  [disabled]="!isButtonEnabled()"
+                  [ngClass]="continueButtonClasses()"
+                  class="flex-1 px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
+                  [class.cursor-pointer]="isButtonEnabled()"
+                  [class.cursor-not-allowed]="!isButtonEnabled()"
+                  [class.opacity-50]="!isButtonEnabled()"
+                  [class.hover:scale-105]="isButtonEnabled()">
+                  @if (isLoading()) {
+                    <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    @if (accountData() && editMode()) {
+                      Updating Account...
+                    } @else {
+                      Creating Account...
+                    }
+                  } @else {
+                    @if (accountData() && editMode()) {
+                      Edit Account
+                    } @else {
+                      Create Account
+                    }
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+                    </svg>
+                  }
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+      </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)}}\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 }] }], accountData: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountData", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], onCreateAccount: [{ type: i0.Output, args: ["onCreateAccount"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
+    }], () => [], { 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 }] }], accountData: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountData", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], onCreateAccount: [{ type: i0.Output, args: ["onCreateAccount"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], shopNameInput: [{
+            type: ViewChild,
+            args: ['shopNameInput']
+        }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 434 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 464 }); })();
 
 class SymphiqConnectGaDashboardComponent {
     constructor() {