@eric-emg/symphiq-components 1.2.136 → 1.2.138

package/fesm2022/symphiq-components.mjs

@@ -24750,7 +24750,7 @@ const _forTrack0$x = ($index, $item) => $item.id;
 function JourneyProgressIndicatorComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 22);
-    i0.ɵɵelement(1, "path", 28);
+    i0.ɵɵelement(1, "path", 29);
     i0.ɵɵelementEnd();
 } }
 function JourneyProgressIndicatorComponent_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -24760,7 +24760,13 @@ function JourneyProgressIndicatorComponent_For_5_Conditional_3_Template(rf, ctx)
     i0.ɵɵproperty("ngClass", ctx_r2.getCurrentDotClasses());
 } }
 function JourneyProgressIndicatorComponent_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵelement(0, "div", 24);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.getAccessibleDotClasses());
+} }
+function JourneyProgressIndicatorComponent_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -24772,8 +24778,8 @@ function JourneyProgressIndicatorComponent_For_5_Conditional_4_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ɵ$index_9_r2 + 1, " ");
 } }
-function JourneyProgressIndicatorComponent_For_5_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 35);
+function JourneyProgressIndicatorComponent_For_5_Conditional_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -24783,14 +24789,14 @@ function JourneyProgressIndicatorComponent_For_5_Conditional_7_Conditional_8_Tem
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", step_r5.description, " ");
 } }
-function JourneyProgressIndicatorComponent_For_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "div", 31)(3, "span", 32);
+function JourneyProgressIndicatorComponent_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31)(2, "div", 32)(3, "span", 33);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 33)(6, "span", 34);
+    i0.ɵɵelementStart(5, "div", 34)(6, "span", 35);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, JourneyProgressIndicatorComponent_For_5_Conditional_7_Conditional_8_Template, 2, 2, "p", 35);
+    i0.ɵɵconditionalCreate(8, JourneyProgressIndicatorComponent_For_5_Conditional_8_Conditional_8_Template, 2, 2, "p", 36);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext();
@@ -24811,8 +24817,8 @@ function JourneyProgressIndicatorComponent_For_5_Conditional_7_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.shouldShowDetailedTooltip() ? 8 : -1);
 } }
-function JourneyProgressIndicatorComponent_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 27);
+function JourneyProgressIndicatorComponent_For_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 28);
 } if (rf & 2) {
     const step_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24823,16 +24829,16 @@ function JourneyProgressIndicatorComponent_For_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵlistener("mouseenter", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseenter_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setHoveredStep(ɵ$index_9_r2)); })("mouseleave", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearHoveredStep()); });
     i0.ɵɵelementStart(1, "div", 21);
-    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_div_click_1_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r3.$implicit; const ɵ$index_9_r2 = ctx_r3.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((step_r5.status === "completed" || ctx_r2.forDemo() && step_r5.status === "upcoming") && ctx_r2.stepClick.emit(ɵ$index_9_r2 + 1)); });
-    i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 22)(3, JourneyProgressIndicatorComponent_For_5_Conditional_3_Template, 1, 1, "div", 23)(4, JourneyProgressIndicatorComponent_For_5_Conditional_4_Template, 2, 2, "span", 24);
+    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_div_click_1_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r3.$implicit; const ɵ$index_9_r2 = ctx_r3.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((step_r5.status === "completed" || step_r5.status === "accessible") && ctx_r2.stepClick.emit(ɵ$index_9_r2 + 1)); });
+    i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 22)(3, JourneyProgressIndicatorComponent_For_5_Conditional_3_Template, 1, 1, "div", 23)(4, JourneyProgressIndicatorComponent_For_5_Conditional_4_Template, 1, 1, "div", 24)(5, JourneyProgressIndicatorComponent_For_5_Conditional_5_Template, 2, 2, "span", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 25);
-    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_span_click_5_listener() { const ctx_r6 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r6.$implicit; const ɵ$index_9_r2 = ctx_r6.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((step_r5.status === "completed" || ctx_r2.forDemo() && step_r5.status === "upcoming") && ctx_r2.stepClick.emit(ɵ$index_9_r2 + 1)); });
-    i0.ɵɵtext(6);
+    i0.ɵɵelementStart(6, "span", 26);
+    i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_span_click_6_listener() { const ctx_r6 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r6.$implicit; const ɵ$index_9_r2 = ctx_r6.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((step_r5.status === "completed" || step_r5.status === "accessible") && ctx_r2.stepClick.emit(ɵ$index_9_r2 + 1)); });
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, JourneyProgressIndicatorComponent_For_5_Conditional_7_Template, 9, 16, "div", 26);
+    i0.ɵɵconditionalCreate(8, JourneyProgressIndicatorComponent_For_5_Conditional_8_Template, 9, 16, "div", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, JourneyProgressIndicatorComponent_For_5_Conditional_8_Template, 1, 1, "div", 27);
+    i0.ɵɵconditionalCreate(9, JourneyProgressIndicatorComponent_For_5_Conditional_9_Template, 1, 1, "div", 28);
 } if (rf & 2) {
     const step_r5 = ctx.$implicit;
     const ɵ$index_9_r2 = ctx.$index;
@@ -24840,28 +24846,28 @@ function JourneyProgressIndicatorComponent_For_5_Template(rf, ctx) { if (rf & 1)
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", "64px");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || ctx_r2.forDemo() && step_r5.status === "upcoming");
+    i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || step_r5.status === "accessible");
     i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r5));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(step_r5.status === "completed" ? 2 : step_r5.status === "current" ? 3 : 4);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || ctx_r2.forDemo() && step_r5.status === "upcoming");
+    i0.ɵɵconditional(step_r5.status === "completed" ? 2 : step_r5.status === "current" ? 3 : step_r5.status === "accessible" ? 4 : 5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || step_r5.status === "accessible");
     i0.ɵɵproperty("ngClass", ctx_r2.getAbbreviatedTitleClasses(step_r5));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getAbbreviatedTitle(step_r5.title), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.hoveredStepIndex() === ɵ$index_9_r2 ? 7 : -1);
+    i0.ɵɵconditional(ctx_r2.hoveredStepIndex() === ɵ$index_9_r2 ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!(ɵ$index_9_r2 === ɵ$count_9_r8 - 1) ? 8 : -1);
+    i0.ɵɵconditional(!(ɵ$index_9_r2 === ɵ$count_9_r8 - 1) ? 9 : -1);
 } }
 function JourneyProgressIndicatorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
+    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", 37);
-    i0.ɵɵelement(3, "path", 38);
+    i0.ɵɵelementStart(2, "svg", 38);
+    i0.ɵɵelement(3, "path", 39);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24872,7 +24878,7 @@ function JourneyProgressIndicatorComponent_Conditional_6_Template(rf, ctx) { if
 function JourneyProgressIndicatorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 9);
-    i0.ɵɵelement(1, "path", 28);
+    i0.ɵɵelement(1, "path", 29);
     i0.ɵɵelementEnd();
 } }
 function JourneyProgressIndicatorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
@@ -24893,54 +24899,60 @@ 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", 43);
-    i0.ɵɵelement(1, "path", 28);
+    i0.ɵɵelementStart(0, "svg", 44);
+    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", 44);
+    i0.ɵɵelement(0, "div", 45);
 } 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.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(0, "div", 46);
+} 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.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const step_r11 = ctx_r9.$implicit;
-    const ɵ$index_103_r12 = ctx_r9.$index;
+    const ɵ$index_106_r12 = ctx_r9.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.getStepNumberClasses(step_r11));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ɵ$index_103_r12 + 1, " ");
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_106_r12 + 1, " ");
 } }
 function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 42);
-    i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 43)(3, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_3_Template, 1, 1, "div", 44)(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_4_Template, 2, 2, "span", 45);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 46)(6, "div", 47)(7, "span", 24);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(6, "div", 48)(7, "div", 49)(8, "span", 25);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 48);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(10, "span", 50);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "p", 49);
-    i0.ɵɵtext(12);
+    i0.ɵɵelementStart(12, "p", 51);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const step_r11 = ctx.$implicit;
-    const ɵ$index_103_r12 = ctx.$index;
+    const ɵ$index_106_r12 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r11));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(step_r11.status === "completed" ? 2 : step_r11.status === "current" ? 3 : 4);
-    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(step_r11.status === "completed" ? 2 : step_r11.status === "current" ? 3 : step_r11.status === "accessible" ? 4 : 5);
+    i0.ɵɵadvance(6);
     i0.ɵɵproperty("ngClass", ctx_r2.tooltipStepNumberClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ɵ$index_103_r12 + 1, ".");
+    i0.ɵɵtextInterpolate1("", ɵ$index_106_r12 + 1, ".");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(step_r11));
     i0.ɵɵadvance();
@@ -24951,11 +24963,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", 39);
+    i0.ɵɵelementStart(0, "div", 18)(1, "h4", 40);
     i0.ɵɵtext(2, "Journey Progress");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 40);
-    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 13, 8, "div", 41, _forTrack0$x);
+    i0.ɵɵelementStart(3, "div", 41);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 42, _forTrack0$x);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24967,12 +24979,12 @@ function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if
 } }
 function JourneyProgressIndicatorComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
+    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", 51);
-    i0.ɵɵelement(3, "path", 38);
+    i0.ɵɵelementStart(2, "svg", 53);
+    i0.ɵɵelement(3, "path", 39);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -24986,6 +24998,7 @@ class JourneyProgressIndicatorComponent {
         this.currentStepId = input('business-analysis', ...(ngDevMode ? [{ debugName: "currentStepId" }] : []));
         this.showNextStepAction = input(true, ...(ngDevMode ? [{ debugName: "showNextStepAction" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
+        this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
         this.nextStepClick = output();
         this.stepClick = output();
         // Hover state for desktop tooltips
@@ -25066,10 +25079,40 @@ class JourneyProgressIndicatorComponent {
         ];
         this.steps = computed(() => {
             const currentIndex = this.stepDefinitions.findIndex(s => s.id === this.currentStepId());
-            return this.stepDefinitions.map((step, index) => ({
-                ...step,
-                status: index < currentIndex ? 'completed' : (index === currentIndex ? 'current' : 'upcoming')
-            }));
+            // Determine max accessible index
+            let maxAccessibleIndex;
+            if (this.forDemo()) {
+                // In demo mode, all steps are accessible
+                maxAccessibleIndex = this.stepDefinitions.length - 1;
+            }
+            else if (this.maxAccessibleStepId()) {
+                // Use the provided max accessible step ID
+                const maxIndex = this.stepDefinitions.findIndex(s => s.id === this.maxAccessibleStepId());
+                maxAccessibleIndex = maxIndex >= 0 ? maxIndex : currentIndex;
+            }
+            else {
+                // Default: only current and completed steps are accessible
+                maxAccessibleIndex = currentIndex;
+            }
+            return this.stepDefinitions.map((step, index) => {
+                let status;
+                if (index < currentIndex) {
+                    status = 'completed';
+                }
+                else if (index === currentIndex) {
+                    status = 'current';
+                }
+                else if (index <= maxAccessibleIndex) {
+                    status = 'accessible';
+                }
+                else {
+                    status = 'locked';
+                }
+                return {
+                    ...step,
+                    status
+                };
+            });
         }, ...(ngDevMode ? [{ debugName: "steps" }] : []));
         effect(() => {
             const currentIndex = this.stepDefinitions.findIndex(s => s.id === this.currentStepId());
@@ -25146,6 +25189,13 @@ class JourneyProgressIndicatorComponent {
             const glowClass = isDark ? 'step-glow-current-dark' : 'step-glow-current';
             baseClasses.push(colorClasses, glowClass);
         }
+        else if (step.status === 'accessible') {
+            const colorClasses = isDark
+                ? 'bg-slate-700/50 text-slate-300 border-2 border-slate-500/50'
+                : 'bg-slate-50 text-slate-600 border-2 border-slate-300';
+            const glowClass = isDark ? 'step-glow-accessible-dark' : 'step-glow-accessible';
+            baseClasses.push(colorClasses, glowClass);
+        }
         else {
             const colorClasses = isDark
                 ? 'bg-slate-700 text-slate-400 border-2 border-slate-600'
@@ -25159,11 +25209,17 @@ class JourneyProgressIndicatorComponent {
             ? 'bg-blue-400'
             : 'bg-blue-600';
     }
+    getAccessibleDotClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-400'
+            : 'bg-slate-500';
+    }
     getStepNumberClasses(step) {
         const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return step.status === 'upcoming'
-            ? isDark ? 'text-slate-500' : 'text-slate-400'
-            : isDark ? 'text-slate-300' : 'text-slate-600';
+        if (step.status === 'locked') {
+            return isDark ? 'text-slate-500' : 'text-slate-400';
+        }
+        return isDark ? 'text-slate-300' : 'text-slate-600';
     }
     getStepTitleClasses(step) {
         const isDark = this.viewMode() === ViewModeEnum.DARK;
@@ -25173,6 +25229,9 @@ class JourneyProgressIndicatorComponent {
         if (step.status === 'completed') {
             return isDark ? 'text-emerald-400' : 'text-emerald-600';
         }
+        if (step.status === 'accessible') {
+            return isDark ? 'text-slate-300' : 'text-slate-700';
+        }
         return isDark ? 'text-slate-400' : 'text-slate-600';
     }
     getStepDescriptionClasses(step) {
@@ -25294,6 +25353,9 @@ class JourneyProgressIndicatorComponent {
         if (step.status === 'completed') {
             return isDark ? 'text-emerald-400 font-medium' : 'text-emerald-600 font-medium';
         }
+        if (step.status === 'accessible') {
+            return isDark ? 'text-slate-300 font-medium' : 'text-slate-700 font-medium';
+        }
         return isDark ? 'text-slate-500 font-medium' : 'text-slate-400 font-medium';
     }
     getExpandedCardClasses(idx) {
@@ -25309,9 +25371,9 @@ 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"] }, 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, "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, "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, "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) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
-            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 9, 12, null, null, _forTrack0$x);
+            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.ɵɵelementEnd();
@@ -25359,205 +25421,209 @@ class JourneyProgressIndicatorComponent {
             i0.ɵɵconditional(ctx.showMobileTooltip() ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showNextStepAction() && ctx.getNextStep() && ctx.getCurrentStep().status === "current" ? 24 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: [".scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}.step-glow-current[_ngcontent-%COMP%]{box-shadow:0 0 0 3px #3b82f64d;animation:_ngcontent-%COMP%_pulseGlow 2s ease-in-out infinite}.step-glow-current-dark[_ngcontent-%COMP%]{box-shadow:0 0 0 3px #60a5fa4d;animation:_ngcontent-%COMP%_pulseGlow 2s ease-in-out infinite}.step-glow-completed[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #34d39933}@keyframes _ngcontent-%COMP%_pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column[_ngcontent-%COMP%]{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle[_ngcontent-%COMP%]{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column[_ngcontent-%COMP%]:hover   .step-circle[_ngcontent-%COMP%]{transform:scale(1.05)}.expanded-card-right[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes _ngcontent-%COMP%_expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes _ngcontent-%COMP%_expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fadeIn .15s ease-out forwards;opacity:0}@keyframes _ngcontent-%COMP%_fadeIn{to{opacity:1}}.expanded-content[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes _ngcontent-%COMP%_contentFadeIn{to{opacity:1}}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: [".scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}.step-glow-current[_ngcontent-%COMP%]{box-shadow:0 0 0 3px #3b82f64d;animation:_ngcontent-%COMP%_pulseGlow 2s ease-in-out infinite}.step-glow-current-dark[_ngcontent-%COMP%]{box-shadow:0 0 0 3px #60a5fa4d;animation:_ngcontent-%COMP%_pulseGlow 2s ease-in-out infinite}.step-glow-completed[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #34d39933}.step-glow-accessible[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #64748b26}.step-glow-accessible-dark[_ngcontent-%COMP%]{box-shadow:0 0 0 2px #94a3b826}@keyframes _ngcontent-%COMP%_pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column[_ngcontent-%COMP%]{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle[_ngcontent-%COMP%]{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column[_ngcontent-%COMP%]:hover   .step-circle[_ngcontent-%COMP%]{transform:scale(1.05)}.expanded-card-right[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes _ngcontent-%COMP%_expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes _ngcontent-%COMP%_expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fadeIn .15s ease-out forwards;opacity:0}@keyframes _ngcontent-%COMP%_fadeIn{to{opacity:1}}.expanded-content[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes _ngcontent-%COMP%_contentFadeIn{to{opacity:1}}"], changeDetection: 0 }); }
 }
 (() => { (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' || (forDemo() && step.status === 'upcoming')) && stepClick.emit(idx + 1)"
-                    [class.cursor-pointer]="step.status === 'completed' || (forDemo() && step.status === 'upcoming')">
-                    @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 {
-                      <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' || (forDemo() && step.status === 'upcoming')) && stepClick.emit(idx + 1)"
-                    [class.cursor-pointer]="step.status === 'completed' || (forDemo() && step.status === 'upcoming')">
-                    {{ 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() === '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 {
-                                <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() === '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}@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 }] }], 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: 319 }); })();
+        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() === '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() === '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 #64748b26}.step-glow-accessible-dark{box-shadow:0 0 0 2px #94a3b826}@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: 331 }); })();
 
 class ConfidenceLevelCardComponent {
     constructor() {
@@ -51659,6 +51725,7 @@ class SymphiqCreateAccountDashboardComponent {
         this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
         this.accountData = input(...(ngDevMode ? [undefined, { debugName: "accountData" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
+        this.showNextStepAction = input(true, ...(ngDevMode ? [{ debugName: "showNextStepAction" }] : []));
         this.onContinue = output();
         this.stepClick = output();
         this.nextStepClick = output();
@@ -51885,7 +51952,7 @@ class SymphiqCreateAccountDashboardComponent {
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], 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"] }, outputs: { onContinue: "onContinue", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 26, vars: 42, 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"], ["currentStepId", "create-account", 3, "stepClick", "nextStepClick", "viewMode", "showNextStepAction", "forDemo"], [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) {
+        } }, 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"] }, outputs: { onContinue: "onContinue", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 26, vars: 42, 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"], ["currentStepId", "create-account", 3, "stepClick", "nextStepClick", "viewMode", "showNextStepAction", "forDemo"], [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);
             i0.ɵɵelementEnd();
@@ -51934,7 +52001,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.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");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("showNextStepAction", true)("forDemo", ctx.forDemo());
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("showNextStepAction", ctx.showNextStepAction())("forDemo", ctx.forDemo());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.accountData() && !ctx.editMode() ? 23 : -1);
             i0.ɵɵadvance();
@@ -52010,7 +52077,7 @@ class SymphiqCreateAccountDashboardComponent {
         <symphiq-journey-progress-indicator
           [viewMode]="viewMode()"
           currentStepId="create-account"
-          [showNextStepAction]="true"
+          [showNextStepAction]="showNextStepAction()"
           [forDemo]="forDemo()"
           (stepClick)="stepClick.emit($event)"
           (nextStepClick)="nextStepClick.emit()"
@@ -52285,7 +52352,7 @@ class SymphiqCreateAccountDashboardComponent {
       </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 }] }], onContinue: [{ type: i0.Output, args: ["onContinue"] }], 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 }] }], onContinue: [{ type: i0.Output, args: ["onContinue"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();