@eric-emg/symphiq-components 1.2.159 → 1.2.160

package/fesm2022/symphiq-components.mjs

@@ -52436,7 +52436,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Te
     i0.ɵɵelementStart(3, "span", 31);
     i0.ɵɵtext(4, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "input", 51);
+    i0.ɵɵelement(5, "input", 52);
     i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template, 2, 1, "p", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -52519,7 +52519,9 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵtext(59, " Same as Shop Name ");
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template, 2, 1, "p", 33);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(61, "input", 51);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_18_0;
     let tmp_23_0;
@@ -52585,7 +52587,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵconditional(ctx_r1.isFieldInvalid("companyName") ? 60 : -1);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -52596,11 +52598,11 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Fo
     i0.ɵɵtextInterpolate1(" ", tool_r5, " ");
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
+    i0.ɵɵelementStart(0, "div", 60)(1, "span", 61);
     i0.ɵɵtext(2, "Tools:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 61);
-    i0.ɵɵrepeaterCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_For_5_Template, 2, 2, "span", 62, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 62);
+    i0.ɵɵrepeaterCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_For_5_Template, 2, 2, "span", 63, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const focusArea_r6 = i0.ɵɵnextContext().$implicit;
@@ -52611,13 +52613,13 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Fo
     i0.ɵɵrepeater(focusArea_r6.tools);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "h4", 57);
+    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57)(2, "h4", 58);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 58);
+    i0.ɵɵelementStart(4, "span", 59);
     i0.ɵɵtext(5, " Engaged ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_Template, 6, 1, "div", 59);
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_Template, 6, 1, "div", 60);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r6 = ctx.$implicit;
@@ -52633,12 +52635,12 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Fo
     i0.ɵɵconditional(focusArea_r6.tools && focusArea_r6.tools.length > 0 ? 6 : -1);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 52);
-    i0.ɵɵelement(2, "span", 53);
+    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 53);
+    i0.ɵɵelement(2, "span", 54);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 54);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 55, _forTrack0$i);
+    i0.ɵɵelementStart(4, "div", 55);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 56, _forTrack0$i);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52650,7 +52652,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Te
     i0.ɵɵrepeater(ctx_r1.engagedFocusAreas());
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65)(1, "h4", 57);
+    i0.ɵɵelementStart(0, "div", 66)(1, "h4", 58);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -52663,12 +52665,12 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Fo
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r7.focusAreaDomain), " ");
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 52);
-    i0.ɵɵelement(2, "span", 63);
+    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 53);
+    i0.ɵɵelement(2, "span", 64);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 64);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 65, _forTrack0$i);
+    i0.ɵɵelementStart(4, "div", 65);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 66, _forTrack0$i);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52680,7 +52682,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Te
     i0.ɵɵrepeater(ctx_r1.interestedFocusAreas());
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "span", 60);
+    i0.ɵɵelementStart(0, "div", 69)(1, "span", 61);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -52693,12 +52695,12 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Fo
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r8.focusAreaDomain), " ");
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "h3", 52);
-    i0.ɵɵelement(2, "span", 66);
+    i0.ɵɵelementStart(0, "div")(1, "h3", 53);
+    i0.ɵɵelement(2, "span", 67);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 67);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 68, _forTrack0$i);
+    i0.ɵɵelementStart(4, "div", 68);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 69, _forTrack0$i);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52748,33 +52750,33 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Template(rf, ctx)
     i0.ɵɵconditional(ctx_r1.notInterestedFocusAreas().length > 0 ? 14 : -1);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 72);
+    i0.ɵɵelement(0, "div", 73);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.dividerClasses());
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-focus-area-question", 71);
+    i0.ɵɵelementStart(0, "symphiq-focus-area-question", 72);
     i0.ɵɵlistener("statusChange", function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template_symphiq_focus_area_question_statusChange_0_listener($event) { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFocusAreaStatusChange(domain_r10, $event)); })("toolsClick", function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template_symphiq_focus_area_question_toolsClick_0_listener() { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFocusAreaToolsClick(domain_r10)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Conditional_1_Template, 1, 1, "div", 72);
+    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Conditional_1_Template, 1, 1, "div", 73);
 } if (rf & 2) {
     const domain_r10 = ctx.$implicit;
-    const ɵ$index_340_r11 = ctx.$index;
+    const ɵ$index_342_r11 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("focusAreaDomain", domain_r10)("selectedStatus", ctx_r1.getFocusAreaStatus(domain_r10))("selectedTools", ctx_r1.getFocusAreaTools(domain_r10))("viewMode", ctx_r1.viewMode())("title", ctx_r1.getFocusAreaTitle(domain_r10))("description", ctx_r1.getFocusAreaDescription(domain_r10));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ɵ$index_340_r11 < ctx_r1.allFocusAreaDomains().length - 1 ? 1 : -1);
+    i0.ɵɵconditional(ɵ$index_342_r11 < ctx_r1.allFocusAreaDomains().length - 1 ? 1 : -1);
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18)(2, "div", 28)(3, "div", 69)(4, "div")(5, "h2", 20);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18)(2, "div", 28)(3, "div", 70)(4, "div")(5, "h2", 20);
     i0.ɵɵtext(6, " Focus Areas ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "p", 1);
     i0.ɵɵtext(8, " Tell us about your marketing and operational focus areas ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 70);
+    i0.ɵɵelementStart(9, "div", 71);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(11, "div", 24);
@@ -52798,7 +52800,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_26_Template(rf, ctx)
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵelementStart(0, "button", 78);
     i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.cancelFocusAreasEditMode() : ctx_r1.cancelEditMode()); });
     i0.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
@@ -52817,8 +52819,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Con
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 78);
-    i0.ɵɵelement(1, "circle", 79)(2, "path", 80);
+    i0.ɵɵelementStart(0, "svg", 79);
+    i0.ɵɵelement(1, "circle", 80)(2, "path", 81);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_5_Template, 1, 0);
 } if (rf & 2) {
@@ -52838,8 +52840,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Con
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_2_Template, 1, 0);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 81);
-    i0.ɵɵelement(4, "path", 82);
+    i0.ɵɵelementStart(3, "svg", 82);
+    i0.ɵɵelement(4, "path", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52847,9 +52849,9 @@ function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Tem
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 73)(2, "div", 74);
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template, 2, 1, "button", 75);
-    i0.ɵɵelementStart(4, "button", 76);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 74)(2, "div", 75);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template, 2, 1, "button", 76);
+    i0.ɵɵelementStart(4, "button", 77);
     i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.handleSaveFocusAreas() : ctx_r1.handleContinue()); });
     i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template, 5, 1);
     i0.ɵɵelementEnd()()()();
@@ -52925,6 +52927,7 @@ class SymphiqCreateAccountDashboardComponent {
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.formChanged = signal(false, ...(ngDevMode ? [{ debugName: "formChanged" }] : []));
         this.originalFormValue = null;
+        this.loadTime = Date.now();
         this.ShopPlatformEnum = ShopPlatformEnum;
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.FocusAreaDomainEnum = FocusAreaDomainEnum;
@@ -52983,7 +52986,8 @@ class SymphiqCreateAccountDashboardComponent {
             shopUrl: ['', Validators.required],
             shopPlatform: [ShopPlatformEnum.SHOPIFY, Validators.required],
             otherPlatformName: [''],
-            companyName: ['', Validators.required]
+            companyName: ['', Validators.required],
+            website: ['']
         });
         this.initializeFocusAreasMap();
         effect(() => {
@@ -53094,6 +53098,12 @@ class SymphiqCreateAccountDashboardComponent {
         return true;
     }
     handleContinue() {
+        if (this.accountForm.get('website')?.value) {
+            return;
+        }
+        if (Date.now() - this.loadTime < 3000) {
+            return;
+        }
         if (this.accountForm.valid && this.allFocusAreasAnswered() && !this.isLoading()) {
             this.isLoading.set(true);
             const formData = {
@@ -53104,6 +53114,12 @@ class SymphiqCreateAccountDashboardComponent {
         }
     }
     handleSaveFocusAreas() {
+        if (this.accountForm.get('website')?.value) {
+            return;
+        }
+        if (Date.now() - this.loadTime < 3000) {
+            return;
+        }
         if (this.allFocusAreasAnswered() && !this.isLoading()) {
             this.isLoading.set(true);
             const formData = {
@@ -53465,7 +53481,7 @@ class SymphiqCreateAccountDashboardComponent {
             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: 29, vars: 51, 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", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [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, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 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) {
+        } }, 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: 29, vars: 51, 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", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [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"], ["formControlName", "website", "tabindex", "-1", "autocomplete", "off", 1, "absolute", "-left-[9999px]", "opacity-0"], ["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, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 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();
@@ -53484,7 +53500,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵelementEnd();
             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.ɵɵconditionalCreate(24, SymphiqCreateAccountDashboardComponent_Conditional_24_Template, 62, 35, "div", 14);
             i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 15, 8, "div", 15);
             i0.ɵɵconditionalCreate(26, SymphiqCreateAccountDashboardComponent_Conditional_26_Template, 14, 7, "div", 15);
             i0.ɵɵelementEnd()();
@@ -53846,6 +53862,8 @@ class SymphiqCreateAccountDashboardComponent {
                         </p>
                       }
                     </div>
+
+                    <input formControlName="website" class="absolute -left-[9999px] opacity-0" tabindex="-1" autocomplete="off" />
                   </form>
                 </div>
               </div>
@@ -54068,7 +54086,7 @@ class SymphiqCreateAccountDashboardComponent {
             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: 623 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 625 }); })();
 
 class SymphiqConnectGaDashboardComponent {
     constructor() {
@@ -58143,11 +58161,11 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Template(rf, c
     i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 27);
     i0.ɵɵelement(1, "symphiq-content-generation-progress", 28);
 } if (rf & 2) {
-    let tmp_3_0;
+    let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(!ctx_r1.isOnboarded() ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("title", "We are generating a new Business Analysis for " + (((tmp_3_0 = ctx_r1.currentProfile()) == null ? null : tmp_3_0.profileStructured == null ? null : tmp_3_0.profileStructured.businessName) || "your business") + ".")("subtitle", "It will appear here when ready. You can check back later as this will take a few minutes to complete.");
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("itemStatus", ctx_r1.itemStatus())("title", "We are generating a new Business Analysis for " + (((tmp_4_0 = ctx_r1.currentProfile()) == null ? null : tmp_4_0.profileStructured == null ? null : tmp_4_0.profileStructured.businessName) || "your business") + ".")("subtitle", "It will appear here when ready. You can check back later as this will take a few minutes to complete.");
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -58262,6 +58280,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
+        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
         this.stepClick = output();
         this.nextStepClick = output();
         this.JourneyStepIdEnum = JourneyStepIdEnum;
@@ -58726,7 +58745,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 35, vars: 59, 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, "flex", "items-center", "gap-2"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [1, "relative"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 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", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "title", "subtitle"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 35, vars: 59, 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, "flex", "items-center", "gap-2"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [1, "relative"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 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", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "itemStatus", "title", "subtitle"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -58747,7 +58766,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             i0.ɵɵconditionalCreate(23, SymphiqBusinessAnalysisDashboardComponent_Conditional_23_Template, 5, 3);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(24, "main", 13);
-            i0.ɵɵconditionalCreate(25, SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Template, 2, 4)(26, SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Template, 2, 1);
+            i0.ɵɵconditionalCreate(25, SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Template, 2, 5)(26, SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Template, 2, 1);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(27, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Template, 1, 4, "symphiq-section-navigation", 14);
             i0.ɵɵconditionalCreate(28, SymphiqBusinessAnalysisDashboardComponent_Conditional_28_Template, 1, 4, "symphiq-floating-toc", 14);
@@ -58823,263 +58842,264 @@ class SymphiqBusinessAnalysisDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar (fixed at top) -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-      
-      <div class="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 (default state) -->
-          <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()">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Business Profile & Analysis
-                  </p>
-                </div>
-                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                  <div class="flex items-center gap-2">
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                      <span>{{ displayModeLabel() }}</span>
-                    </button>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header (scrolled state) -->
-          <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-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                </div>
-                <div class="flex items-center gap-4">
-                  @if (!isSimplifiedView()) {
-                    <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                      <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
-                        {{ currentSectionTitle() }}
-                      </span>
-                      @if (currentSubsectionTitle()) {
-                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
-                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
-                          {{ currentSubsectionTitle() }}
-                        </span>
-                      }
-                    </div>
-                  }
-                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      [minimized]="true"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <main class="relative">
-          @if (isContentGenerating()) {
-            <!-- Journey Progress Banner (always show when not onboarded) -->
-            @if (!isOnboarded()) {
-              <symphiq-journey-progress-indicator
-                [viewMode]="viewMode()"
-                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                [showNextStepAction]="false"
-                [forDemo]="forDemo()"
-                [maxAccessibleStepId]="maxAccessibleStepId()"
-                (stepClick)="stepClick.emit($event)"
-                (nextStepClick)="nextStepClick.emit()"
-              />
-            }
-
-            <!-- Content Generation Progress Component -->
-            <symphiq-content-generation-progress
-              [viewMode]="viewMode()"
-              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
-              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
-            />
-          } @else {
-            @if (isSimplifiedView()) {
-              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
-              @if (!isOnboarded()) {
-                <symphiq-journey-progress-indicator
-                  [viewMode]="viewMode()"
-                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                  [showNextStepAction]="showNextStepAction()"
-                  [forDemo]="forDemo()"
-                  [maxAccessibleStepId]="maxAccessibleStepId()"
-                  (stepClick)="stepClick.emit($event)"
-                  (nextStepClick)="nextStepClick.emit()"
-                />
-              }
-
-              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div class="mb-8">
-                  <symphiq-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
-                    [isOnboarded]="isOnboarded()"
-                  />
-                </div>
-
-                <div class="mb-8">
-                  <symphiq-recommendations-tiled-grid
-                    [recommendations]="recommendationItems()"
-                    [viewMode]="viewMode()"
-                    (viewMoreClick)="openRecommendationDetailsModal($event)"
-                  />
-                </div>
-
-                <div>
-                  <symphiq-collapsible-section-group
-                    [sections]="nonRecommendationSections()"
-                    [viewMode]="viewMode()"
-                  />
-                </div>
-              </div>
-            } @else {
-              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
-                <symphiq-profile-section
-                  [section]="section"
-                  [viewMode]="viewMode()"
-                  [forceExpanded]="!isCompactView()"
-                />
-                @if (!last) {
-                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <symphiq-section-divider
-                      [viewMode]="viewMode()"
-                      [subsections]="sections()[idx + 1].subsections || []" />
-                  </div>
-                }
-              }
-            }
-          }
-        </main>
-
-        @if (!isSimplifiedView()) {
-          <symphiq-section-navigation
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        @if (!isSimplifiedView()) {
-          <symphiq-floating-toc
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <symphiq-floating-back-button
-          [viewMode]="viewMode()"
-          [embedded]="embedded()"
-        />
-      </div>
-
-      @if (isLoading()) {
-        <div [ngClass]="getLoadingOverlayClasses()">
-          <div [ngClass]="getSpinnerClasses()"></div>
-        </div>
-      }
-
-      <symphiq-tooltip-container />
-      <symphiq-business-analysis-modal
-        [isLightMode]="isLightMode()"
-        (viewInContextRequested)="handleViewInContext($event)" />
-
-      <symphiq-search-modal
-        [isLightMode]="isLightMode()"
-        [isOpen]="searchService.isSearchOpen()"
-        [searchQuery]="searchService.getSearchQuery()"
-        [results]="searchService.searchResults()"
-        [hasResults]="searchService.hasResults()"
-        [selectedIndex]="selectedSearchIndex()"
-        [placeholder]="'Search sections, items, and analysis...'"
-        (searchChange)="onSearchChange($event)"
-        (resultSelected)="onSearchResultSelected($event)"
-        (close)="closeSearch()"
-      />
-
-      <symphiq-view-mode-switcher-modal
-        [isOpen]="isViewModeSwitcherOpen()"
-        [currentMode]="displayMode()"
-        [viewMode]="viewMode()"
-        [isLoading]="isViewModeSwitching()"
-        (close)="closeViewModeSwitcher()"
-        (modeSelected)="handleDisplayModeChange($event)"
-      />
-    </div>
+        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar (fixed at top) -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+      
+      <div class="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 (default state) -->
+          <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()">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Business Profile & Analysis
+                  </p>
+                </div>
+                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                  <div class="flex items-center gap-2">
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [ngClass]="getViewModeButtonClasses()"
+                      class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                      <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                      </svg>
+                      <span>{{ displayModeLabel() }}</span>
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header (scrolled state) -->
+          <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-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                </div>
+                <div class="flex items-center gap-4">
+                  @if (!isSimplifiedView()) {
+                    <div class="flex items-center gap-2 text-sm flex-shrink-0">
+                      <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
+                        {{ currentSectionTitle() }}
+                      </span>
+                      @if (currentSubsectionTitle()) {
+                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
+                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
+                          {{ currentSubsectionTitle() }}
+                        </span>
+                      }
+                    </div>
+                  }
+                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      [minimized]="true"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [ngClass]="getViewModeButtonClasses()"
+                      class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                      <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <main class="relative">
+          @if (isContentGenerating()) {
+            <!-- Journey Progress Banner (always show when not onboarded) -->
+            @if (!isOnboarded()) {
+              <symphiq-journey-progress-indicator
+                [viewMode]="viewMode()"
+                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                [showNextStepAction]="false"
+                [forDemo]="forDemo()"
+                [maxAccessibleStepId]="maxAccessibleStepId()"
+                (stepClick)="stepClick.emit($event)"
+                (nextStepClick)="nextStepClick.emit()"
+              />
+            }
+
+            <!-- Content Generation Progress Component -->
+            <symphiq-content-generation-progress
+              [viewMode]="viewMode()"
+              [itemStatus]="itemStatus()"
+              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
+              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
+            />
+          } @else {
+            @if (isSimplifiedView()) {
+              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
+              @if (!isOnboarded()) {
+                <symphiq-journey-progress-indicator
+                  [viewMode]="viewMode()"
+                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                  [showNextStepAction]="showNextStepAction()"
+                  [forDemo]="forDemo()"
+                  [maxAccessibleStepId]="maxAccessibleStepId()"
+                  (stepClick)="stepClick.emit($event)"
+                  (nextStepClick)="nextStepClick.emit()"
+                />
+              }
+
+              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div class="mb-8">
+                  <symphiq-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
+                    [isOnboarded]="isOnboarded()"
+                  />
+                </div>
+
+                <div class="mb-8">
+                  <symphiq-recommendations-tiled-grid
+                    [recommendations]="recommendationItems()"
+                    [viewMode]="viewMode()"
+                    (viewMoreClick)="openRecommendationDetailsModal($event)"
+                  />
+                </div>
+
+                <div>
+                  <symphiq-collapsible-section-group
+                    [sections]="nonRecommendationSections()"
+                    [viewMode]="viewMode()"
+                  />
+                </div>
+              </div>
+            } @else {
+              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
+                <symphiq-profile-section
+                  [section]="section"
+                  [viewMode]="viewMode()"
+                  [forceExpanded]="!isCompactView()"
+                />
+                @if (!last) {
+                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <symphiq-section-divider
+                      [viewMode]="viewMode()"
+                      [subsections]="sections()[idx + 1].subsections || []" />
+                  </div>
+                }
+              }
+            }
+          }
+        </main>
+
+        @if (!isSimplifiedView()) {
+          <symphiq-section-navigation
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        @if (!isSimplifiedView()) {
+          <symphiq-floating-toc
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <symphiq-floating-back-button
+          [viewMode]="viewMode()"
+          [embedded]="embedded()"
+        />
+      </div>
+
+      @if (isLoading()) {
+        <div [ngClass]="getLoadingOverlayClasses()">
+          <div [ngClass]="getSpinnerClasses()"></div>
+        </div>
+      }
+
+      <symphiq-tooltip-container />
+      <symphiq-business-analysis-modal
+        [isLightMode]="isLightMode()"
+        (viewInContextRequested)="handleViewInContext($event)" />
+
+      <symphiq-search-modal
+        [isLightMode]="isLightMode()"
+        [isOpen]="searchService.isSearchOpen()"
+        [searchQuery]="searchService.getSearchQuery()"
+        [results]="searchService.searchResults()"
+        [hasResults]="searchService.hasResults()"
+        [selectedIndex]="selectedSearchIndex()"
+        [placeholder]="'Search sections, items, and analysis...'"
+        (searchChange)="onSearchChange($event)"
+        (resultSelected)="onSearchResultSelected($event)"
+        (close)="closeSearch()"
+      />
+
+      <symphiq-view-mode-switcher-modal
+        [isOpen]="isViewModeSwitcherOpen()"
+        [currentMode]="displayMode()"
+        [viewMode]="viewMode()"
+        [isLoading]="isViewModeSwitching()"
+        (close)="closeViewModeSwitcher()"
+        (modeSelected)="handleDisplayModeChange($event)"
+      />
+    </div>
   `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
-    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", 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 }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", 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 }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }], handleKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 331 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 333 }); })();
 
 function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 6);