@eric-emg/symphiq-components 1.2.522 → 1.2.524

package/fesm2022/symphiq-components.mjs

@@ -46531,14 +46531,14 @@ function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 16);
+    i0.ɵɵelementStart(0, "symphiq-search-button", 17);
     i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_13_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 17);
+    i0.ɵɵelementStart(1, "button", 18);
     i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 18);
-    i0.ɵɵelement(3, "path", 19)(4, "path", 20);
+    i0.ɵɵelementStart(2, "svg", 19);
+    i0.ɵɵelement(3, "path", 20)(4, "path", 21);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(5, "span");
@@ -46553,10 +46553,10 @@ function DashboardHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
 } }
 function DashboardHeaderComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
     i0.ɵɵtext(2, "Generated At");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵelementStart(3, "div", 24);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -46569,10 +46569,10 @@ function DashboardHeaderComponent_Conditional_15_Conditional_1_Template(rf, ctx)
     i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
 } }
 function DashboardHeaderComponent_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
     i0.ɵɵtext(2, "Requested by");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵelementStart(3, "div", 24);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -46586,9 +46586,9 @@ function DashboardHeaderComponent_Conditional_15_Conditional_2_Template(rf, ctx)
     i0.ɵɵtextInterpolate2("", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.firstName, " ", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.lastName);
 } }
 function DashboardHeaderComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_15_Conditional_1_Template, 5, 5, "div", 21);
-    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_15_Conditional_2_Template, 5, 6, "div", 21);
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_15_Conditional_1_Template, 5, 5, "div", 22);
+    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_15_Conditional_2_Template, 5, 6, "div", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -46598,10 +46598,10 @@ function DashboardHeaderComponent_Conditional_15_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
 } }
 function DashboardHeaderComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1, "\u2014");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 25);
+    i0.ɵɵelementStart(2, "span", 26);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -46613,10 +46613,10 @@ function DashboardHeaderComponent_Conditional_22_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate1(" ", ctx_r1.subtitle(), " ");
 } }
 function DashboardHeaderComponent_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelementStart(0, "span", 27);
     i0.ɵɵtext(1, "\u203A");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 26);
+    i0.ɵɵelementStart(2, "span", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -46630,7 +46630,7 @@ function DashboardHeaderComponent_Conditional_25_Conditional_3_Template(rf, ctx)
     i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
 } }
 function DashboardHeaderComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "span", 26);
+    i0.ɵɵelementStart(0, "div", 16)(1, "span", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_25_Conditional_3_Template, 4, 11);
@@ -46647,14 +46647,14 @@ function DashboardHeaderComponent_Conditional_25_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardHeaderComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 27);
+    i0.ɵɵelementStart(0, "symphiq-search-button", 28);
     i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_26_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 28);
+    i0.ɵɵelementStart(1, "button", 29);
     i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_26_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 18);
-    i0.ɵɵelement(3, "path", 19)(4, "path", 20);
+    i0.ɵɵelementStart(2, "svg", 19);
+    i0.ɵɵelement(3, "path", 20)(4, "path", 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -46677,10 +46677,14 @@ class DashboardHeaderComponent {
         this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
         this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
         this.hasCondensedLeftContent = input(false, ...(ngDevMode ? [{ debugName: "hasCondensedLeftContent" }] : []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.searchClick = output();
         this.viewModeClick = output();
         this.headerScrollService = inject(HeaderScrollService);
+        this.tooltipService = inject(TooltipService);
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.isLargeSize = computed(() => this.size() === 'large', ...(ngDevMode ? [{ debugName: "isLargeSize" }] : []));
+        this.expandedHeight = computed(() => this.isLargeSize() ? '140px' : '100px', ...(ngDevMode ? [{ debugName: "expandedHeight" }] : []));
         this.dateFormatCache = new StringMemoizeCache();
         this.formattedGeneratedDate = computed(() => {
             let formatted = '';
@@ -46693,12 +46697,25 @@ class DashboardHeaderComponent {
         this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
         this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
     }
+    ngOnInit() {
+        this.headerScrollService.resetState();
+    }
     onSearchClick() {
         this.searchClick.emit();
     }
     onViewModeClick() {
         this.viewModeClick.emit();
     }
+    onTitleMouseEnter(event) {
+        const target = event.target;
+        if (target.scrollWidth > target.clientWidth) {
+            const rect = target.getBoundingClientRect();
+            this.tooltipService.show('text', this.title(), rect, 'bottom');
+        }
+    }
+    onTitleMouseLeave() {
+        this.tooltipService.hide();
+    }
     formatDate(dateString) {
         // Cache date formatting operations
         return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
@@ -46708,16 +46725,31 @@ class DashboardHeaderComponent {
         }));
     }
     getHeaderClasses() {
+        if (this.isLargeSize()) {
+            return this.isLightMode()
+                ? 'backdrop-blur-sm bg-white/50'
+                : 'backdrop-blur-sm bg-slate-900/50';
+        }
         return this.isLightMode()
             ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
             : 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
     }
     getMainTitleClasses() {
+        if (this.isLargeSize()) {
+            return this.isLightMode()
+                ? 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
+                : 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
+        }
         return this.isLightMode()
             ? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
             : 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
     }
     getSubtitleClasses() {
+        if (this.isLargeSize()) {
+            return this.isLightMode()
+                ? 'text-slate-600 mt-2 text-lg'
+                : 'text-slate-400 mt-2 text-lg';
+        }
         return this.isLightMode()
             ? 'text-slate-600 mt-1 text-sm'
             : 'text-slate-400 mt-1 text-sm';
@@ -46738,35 +46770,36 @@ class DashboardHeaderComponent {
             : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
     }
     static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"], hasCondensedLeftContent: [1, "hasCondensedLeftContent"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, ngContentSelectors: _c1$i, decls: 28, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex-1"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "h-full", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "h-full", "flex", "items-center"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0", "mr-4"], [1, "flex-shrink-0", "!mb-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [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, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "hidden", "sm:inline", 3, "ngClass"], [1, "hidden", "sm:block", "truncate", "min-w-0", 3, "ngClass"], [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"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"], hasCondensedLeftContent: [1, "hasCondensedLeftContent"], size: [1, "size"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, ngContentSelectors: _c1$i, decls: 28, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-3", "min-w-0"], [1, "truncate", 3, "mouseenter", "mouseleave", "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [3, "ngClass"], [1, "flex", "items-center", "gap-4"], [1, "flex", "flex-col", "gap-1", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "h-full", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "h-full", "flex", "items-center"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0", "mr-4"], [1, "flex-shrink-0", "!mb-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [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, "text-left", "sm:text-right"], [1, "text-xs"], [1, "text-sm", "font-medium"], [1, "hidden", "sm:inline", 3, "ngClass"], [1, "hidden", "sm:block", "truncate", "min-w-0", 3, "ngClass"], [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"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$G);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div", 5)(6, "h1", 6);
+            i0.ɵɵlistener("mouseenter", function DashboardHeaderComponent_Template_h1_mouseenter_6_listener($event) { return ctx.onTitleMouseEnter($event); })("mouseleave", function DashboardHeaderComponent_Template_h1_mouseleave_6_listener() { return ctx.onTitleMouseLeave(); });
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 8)(10, "p", 6);
+            i0.ɵɵelementStart(9, "div", 8)(10, "p", 9);
             i0.ɵɵtext(11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "div", 9);
+            i0.ɵɵelementStart(12, "div", 10);
             i0.ɵɵconditionalCreate(13, DashboardHeaderComponent_Conditional_13_Template, 7, 3);
             i0.ɵɵprojection(14);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(15, DashboardHeaderComponent_Conditional_15_Template, 3, 2, "div", 10);
+            i0.ɵɵconditionalCreate(15, DashboardHeaderComponent_Conditional_15_Template, 3, 2, "div", 11);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(16, "div", 11)(17, "div", 12)(18, "div", 3)(19, "div", 13)(20, "h1", 14);
+            i0.ɵɵelementStart(16, "div", 12)(17, "div", 13)(18, "div", 3)(19, "div", 14)(20, "h1", 15);
             i0.ɵɵtext(21);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(22, DashboardHeaderComponent_Conditional_22_Template, 4, 3);
             i0.ɵɵprojection(23, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 9);
-            i0.ɵɵconditionalCreate(25, DashboardHeaderComponent_Conditional_25_Template, 4, 7, "div", 15);
+            i0.ɵɵelementStart(24, "div", 10);
+            i0.ɵɵconditionalCreate(25, DashboardHeaderComponent_Conditional_25_Template, 4, 7, "div", 16);
             i0.ɵɵconditionalCreate(26, DashboardHeaderComponent_Conditional_26_Template, 5, 3);
             i0.ɵɵprojection(27, 2);
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "100px");
+            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : ctx.expandedHeight());
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
@@ -46806,7 +46839,7 @@ class DashboardHeaderComponent {
                 imports: [CommonModule, SearchButtonComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
-    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
+    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : expandedHeight()" style="transition: height 300ms ease-in-out;">
         <!-- Expanded Header (default state) -->
         <div
           class="transition-opacity duration-300 ease-in-out h-full"
@@ -46816,9 +46849,9 @@ class DashboardHeaderComponent {
           <div
             class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
           <div class="flex items-center justify-between w-full">
-            <div class="flex-1">
-              <div class="flex items-center gap-3">
-                <h1 [ngClass]="getMainTitleClasses()">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-3 min-w-0">
+                <h1 [ngClass]="getMainTitleClasses()" class="truncate" (mouseenter)="onTitleMouseEnter($event)" (mouseleave)="onTitleMouseLeave()">
                   {{ title() }}
                 </h1>
                 @if (isLoading()) {
@@ -46852,17 +46885,17 @@ class DashboardHeaderComponent {
               </div>
             </div>
             @if (formattedGeneratedDate() || requestedByUser()) {
-              <div class="flex flex-col gap-4 min-w-[180px]">
+              <div class="flex flex-col gap-1 min-w-[180px]">
                 @if (formattedGeneratedDate()) {
                   <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
+                    <div [class]="metaLabelClass()" class="text-xs">Generated At</div>
+                    <div [class]="headerTitleClass()" class="text-sm font-medium">{{ formattedGeneratedDate() }}</div>
                   </div>
                 }
                 @if (requestedByUser()) {
                   <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+                    <div [class]="metaLabelClass()" class="text-xs">Requested by</div>
+                    <div [class]="headerTitleClass()" class="text-sm font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
                   </div>
                 }
               </div>
@@ -46931,8 +46964,8 @@ class DashboardHeaderComponent {
     </header>
   `
             }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], hasCondensedLeftContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCondensedLeftContent", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 139 }); })();
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], hasCondensedLeftContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCondensedLeftContent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 140 }); })();
 
 const _c0$F = ["dashboardContainer"];
 const _c1$h = () => ({});
@@ -48139,13 +48172,14 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Template(rf, ctx
     i0.ɵɵconditional(ctx_r2.showCompetitiveIntelligence() ? 6 : -1);
 } }
 class SymphiqFunnelAnalysisDashboardComponent {
-    constructor(funnelOrderService, viewModeService, searchService, tooltipService, profileContextService, profileItemLookupService) {
+    constructor(funnelOrderService, viewModeService, searchService, tooltipService, profileContextService, profileItemLookupService, headerScrollService) {
         this.funnelOrderService = funnelOrderService;
         this.viewModeService = viewModeService;
         this.searchService = searchService;
         this.tooltipService = tooltipService;
         this.profileContextService = profileContextService;
         this.profileItemLookupService = profileItemLookupService;
+        this.headerScrollService = headerScrollService;
         this.ViewModeEnum = ViewModeEnum;
         // Input signals (Angular 20 signal-based inputs)
         this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
@@ -48191,7 +48225,6 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.selectedSectionFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedSectionFilter" }] : []));
         this.selectedBreakdownFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedBreakdownFilter" }] : []));
         this.selectedCompetitiveFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedCompetitiveFilter" }] : []));
-        this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.fabExpanded = signal(false, ...(ngDevMode ? [{ debugName: "fabExpanded" }] : []));
         this.activeNavSection = signal('overview', ...(ngDevMode ? [{ debugName: "activeNavSection" }] : []));
@@ -48713,12 +48746,12 @@ class SymphiqFunnelAnalysisDashboardComponent {
             if (!this.isProgrammaticScroll) {
                 const COLLAPSE_THRESHOLD = 20;
                 const EXPAND_THRESHOLD = 10;
-                const currentState = this.isScrolled();
+                const currentState = this.headerScrollService.isScrolled();
                 if (!currentState && scrollTop > COLLAPSE_THRESHOLD) {
-                    this.isScrolled.set(true);
+                    this.headerScrollService.isScrolled.set(true);
                 }
                 else if (currentState && scrollTop < EXPAND_THRESHOLD) {
-                    this.isScrolled.set(false);
+                    this.headerScrollService.isScrolled.set(false);
                 }
             }
             // ========================================
@@ -49075,7 +49108,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // This 20px gap prevents rapid toggling when hovering near a single threshold
         const COLLAPSE_THRESHOLD = 50;
         const EXPAND_THRESHOLD = 30;
-        const currentState = this.isScrolled();
+        const currentState = this.headerScrollService.isScrolled();
         // Determine new state based on current position and hysteresis logic
         let newState = currentState;
         // If currently expanded and we scroll past collapse threshold, collapse
@@ -49092,7 +49125,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             this.scrollTimeout = setTimeout(() => {
                 // Double-check position and state during debounce
                 const finalPosition = window.scrollY;
-                const finalCurrentState = this.isScrolled();
+                const finalCurrentState = this.headerScrollService.isScrolled();
                 let finalState = finalCurrentState;
                 if (!finalCurrentState && finalPosition > COLLAPSE_THRESHOLD) {
                     finalState = true;
@@ -49100,8 +49133,8 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 else if (finalCurrentState && finalPosition < EXPAND_THRESHOLD) {
                     finalState = false;
                 }
-                if (this.isScrolled() !== finalState) {
-                    this.isScrolled.set(finalState);
+                if (this.headerScrollService.isScrolled() !== finalState) {
+                    this.headerScrollService.isScrolled.set(finalState);
                     this.lastStateChangeTime = Date.now();
                 }
             }, 100);
@@ -49124,7 +49157,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }
         setTimeout(() => {
             this.isProgrammaticScroll = false;
-            this.isScrolled.set(false);
+            this.headerScrollService.isScrolled.set(false);
         }, 800);
     }
     scrollToSection(sectionId) {
@@ -49157,10 +49190,10 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 ? this.embeddedScrollContainer.scrollTop
                 : window.scrollY;
             if (finalPosition > 50) {
-                this.isScrolled.set(true);
+                this.headerScrollService.isScrolled.set(true);
             }
             else if (finalPosition < 30) {
-                this.isScrolled.set(false);
+                this.headerScrollService.isScrolled.set(false);
             }
         }, 800);
     }
@@ -49206,7 +49239,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }
         return value.toLocaleString('en-US', { maximumFractionDigits: 0 });
     }
-    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
+    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService), i0.ɵɵdirectiveInject(HeaderScrollService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
             i0.ɵɵviewQuery(_c0$F, 5);
@@ -49268,7 +49301,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-400 to-purple-400");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("title", ((tmp_9_0 = ctx.analysisData()) == null ? null : tmp_9_0.title) || "")("subtitle", "Revenue Orchestration & Funnel Analysis")("viewMode", ctx.isLightMode() ? ctx.ViewModeEnum.LIGHT : ctx.ViewModeEnum.DARK)("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading() && !ctx.isShowingLoader())("requestedByUser", ctx.requestedByUser())("createdDate", ctx.analysisCreatedDate())("showControls", !ctx.isSimplifiedView())("hasCondensedLeftContent", !!ctx.revenueMetric());
+            i0.ɵɵproperty("title", ((tmp_9_0 = ctx.analysisData()) == null ? null : tmp_9_0.title) || "")("subtitle", "Revenue Orchestration & Funnel Analysis")("viewMode", ctx.isLightMode() ? ctx.ViewModeEnum.LIGHT : ctx.ViewModeEnum.DARK)("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading() && !ctx.isShowingLoader())("requestedByUser", ctx.requestedByUser())("createdDate", ctx.analysisCreatedDate())("showControls", true)("hasCondensedLeftContent", !!ctx.revenueMetric());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(!ctx.isSimplifiedView() ? 7 : -1);
             i0.ɵɵadvance(2);
@@ -49383,7 +49416,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         [isLoading]="isLoading() && !isShowingLoader()"
         [requestedByUser]="requestedByUser()"
         [createdDate]="analysisCreatedDate()"
-        [showControls]="!isSimplifiedView()"
+        [showControls]="true"
         [hasCondensedLeftContent]="!!revenueMetric()"
         (searchClick)="searchService.openSearch()"
         (viewModeClick)="openViewModeSwitcher()"
@@ -50301,7 +50334,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
 
     </div>
   `, styles: [":host{display:block;min-height:100%}.bg-gradient-radial{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid{grid-template-columns:repeat(6,1fr)}}.bento-small{grid-column:span 2;grid-row:span 1}.bento-medium{grid-column:span 3;grid-row:span 1}.bento-large{grid-column:span 4;grid-row:span 1}.bento-featured{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small,.bento-medium,.bento-large,.bento-featured{grid-column:span 1}}.masonry-grid{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid{column-count:2}}@media (min-width: 1280px){.masonry-grid{column-count:3}}.masonry-grid>div{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured{column-span:all}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up{animation-duration:.4s}}\n"] }]
-    }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }, { type: ProfileContextService }, { type: ProfileItemLookupService }], { modalComponent: [{
+    }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }, { type: ProfileContextService }, { type: ProfileItemLookupService }, { type: HeaderScrollService }], { modalComponent: [{
             type: ViewChild,
             args: [ModalComponent]
         }], dashboardContainer: [{
@@ -51444,14 +51477,14 @@ class SymphiqFunnelAnalysisPreviewComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 228 }); })();
 
 const _forTrack0$C = ($index, $item) => $item.id;
-function SymphiqWelcomeDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "div", 37)(3, "span", 38);
+function SymphiqWelcomeDashboardComponent_For_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 32)(2, "div", 33)(3, "span", 34);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 23);
+    i0.ɵɵelementStart(5, "div", 19);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 39);
+    i0.ɵɵelementStart(7, "div", 35);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -51590,21 +51623,6 @@ class SymphiqWelcomeDashboardComponent {
         }
         return 'relative min-h-screen';
     }
-    getHeaderClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return isDark ? 'relative backdrop-blur-sm bg-slate-900/50' : 'relative backdrop-blur-sm bg-white/50';
-    }
-    getMainTitleClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
-        }
-        return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent';
-    }
-    getSubtitleClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return isDark ? 'text-lg mt-2 text-slate-400' : 'text-lg mt-2 text-slate-600';
-    }
     containerClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'bg-slate-800/40 border-slate-700/50'
@@ -51673,86 +51691,79 @@ class SymphiqWelcomeDashboardComponent {
     static { this.ɵfac = function SymphiqWelcomeDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqWelcomeDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqWelcomeDashboardComponent, selectors: [["symphiq-welcome-dashboard"]], hostBindings: function SymphiqWelcomeDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqWelcomeDashboardComponent_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"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 74, vars: 57, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], [3, "viewMode", "currentStepId"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-3", 3, "ngClass"], [1, "space-y-3", "text-sm", 3, "ngClass"], [1, "flex", "flex-col"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "bg-blue-100", "dark:bg-blue-900/30", "flex", "items-center", "justify-center"], [1, "text-xs", "font-bold", "text-blue-600", "dark:text-blue-400"], [1, "text-xs", "opacity-90", "ml-9"]], template: function SymphiqWelcomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 60, vars: 34, 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]"], [3, "title", "subtitle", "viewMode", "showControls", "size"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], [3, "viewMode", "currentStepId"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-3", 3, "ngClass"], [1, "space-y-3", "text-sm", 3, "ngClass"], [1, "flex", "flex-col"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "bg-blue-100", "dark:bg-blue-900/30", "flex", "items-center", "justify-center"], [1, "text-xs", "font-bold", "text-blue-600", "dark:text-blue-400"], [1, "text-xs", "opacity-90", "ml-9"]], template: function SymphiqWelcomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(3, "div", 2);
-            i0.ɵɵelementStart(4, "div", 3)(5, "header", 4)(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div")(10, "h1", 0);
-            i0.ɵɵtext(11, " Welcome to Symphiq ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Your Revenue Orchestration Journey Starts Here ");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
-            i0.ɵɵtext(19, " Welcome to Symphiq ");
-            i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 10);
-            i0.ɵɵlistener("stepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵelement(5, "symphiq-dashboard-header", 4);
+            i0.ɵɵelementStart(6, "symphiq-journey-progress-indicator", 5);
+            i0.ɵɵlistener("stepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_6_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_6_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "main", 11)(22, "div", 6)(23, "div", 12)(24, "div", 13)(25, "div", 14)(26, "div", 15);
+            i0.ɵɵelementStart(7, "main", 6)(8, "div", 7)(9, "div", 8)(10, "div", 9)(11, "div", 10)(12, "div", 11);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(27, "svg", 16);
-            i0.ɵɵelement(28, "path", 17);
+            i0.ɵɵelementStart(13, "svg", 12);
+            i0.ɵɵelement(14, "path", 13);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(29, "div", 18)(30, "h2", 19);
-            i0.ɵɵtext(31, " Welcome to Symphiq ");
+            i0.ɵɵelementStart(15, "div", 14)(16, "h2", 15);
+            i0.ɵɵtext(17, " Welcome to Symphiq ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 20)(33, "div", 21)(34, "p", 22);
-            i0.ɵɵtext(35, " Symphiq is your Revenue Orchestration Workspace for eCommerce. We help you turn goals into coordinated actions by connecting every revenue touchpoint\u2014so your team plans with confidence, executes together, and measures what truly drives growth. ");
+            i0.ɵɵelementStart(18, "div", 16)(19, "div", 17)(20, "p", 18);
+            i0.ɵɵtext(21, " Symphiq is your Revenue Orchestration Workspace for eCommerce. We help you turn goals into coordinated actions by connecting every revenue touchpoint\u2014so your team plans with confidence, executes together, and measures what truly drives growth. ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "p", 22)(37, "strong", 23);
-            i0.ɵɵtext(38, "How it works:");
+            i0.ɵɵelementStart(22, "p", 18)(23, "strong", 19);
+            i0.ɵɵtext(24, "How it works:");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(39, " Symphiq guides you through a continuous journey loop. You'll ");
-            i0.ɵɵelementStart(40, "strong");
-            i0.ɵɵtext(41, "Build Revenue Targets");
+            i0.ɵɵtext(25, " Symphiq guides you through a continuous journey loop. You'll ");
+            i0.ɵɵelementStart(26, "strong");
+            i0.ɵɵtext(27, "Build Revenue Targets");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(42, " with bottom-up metric goals, ");
-            i0.ɵɵelementStart(43, "strong");
-            i0.ɵɵtext(44, "Strategize Proactively");
+            i0.ɵɵtext(28, " with bottom-up metric goals, ");
+            i0.ɵɵelementStart(29, "strong");
+            i0.ɵɵtext(30, "Strategize Proactively");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(45, " with AI-generated business goals and objectives, ");
-            i0.ɵɵelementStart(46, "strong");
-            i0.ɵɵtext(47, "Execute Together");
+            i0.ɵɵtext(31, " with AI-generated business goals and objectives, ");
+            i0.ɵɵelementStart(32, "strong");
+            i0.ɵɵtext(33, "Execute Together");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(48, " with your team on recommendations and tasks, ");
-            i0.ɵɵelementStart(49, "strong");
-            i0.ɵɵtext(50, "Measure What Matters");
+            i0.ɵɵtext(34, " with your team on recommendations and tasks, ");
+            i0.ɵɵelementStart(35, "strong");
+            i0.ɵɵtext(36, "Measure What Matters");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(51, " with pacing and impact tracking, and ");
-            i0.ɵɵelementStart(52, "strong");
-            i0.ɵɵtext(53, "Retain Knowledge");
+            i0.ɵɵtext(37, " with pacing and impact tracking, and ");
+            i0.ɵɵelementStart(38, "strong");
+            i0.ɵɵtext(39, "Retain Knowledge");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(54, " through detailed profiles that preserve institutional wisdom. This loop repeats as your business grows, learning from each cycle to refine strategies. ");
+            i0.ɵɵtext(40, " through detailed profiles that preserve institutional wisdom. This loop repeats as your business grows, learning from each cycle to refine strategies. ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(55, "div", 24);
-            i0.ɵɵelement(56, "symphiq-confidence-level-card", 25);
+            i0.ɵɵelementStart(41, "div", 20);
+            i0.ɵɵelement(42, "symphiq-confidence-level-card", 21);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(57, "div", 26);
+            i0.ɵɵelementStart(43, "div", 22);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(58, "svg", 27);
-            i0.ɵɵelement(59, "path", 28);
+            i0.ɵɵelementStart(44, "svg", 23);
+            i0.ɵɵelement(45, "path", 24);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(60, "div", 18)(61, "h3", 29);
-            i0.ɵɵtext(62, " Your Onboarding Journey ");
+            i0.ɵɵelementStart(46, "div", 14)(47, "h3", 25);
+            i0.ɵɵtext(48, " Your Onboarding Journey ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(63, "div", 30);
-            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$C);
+            i0.ɵɵelementStart(49, "div", 26);
+            i0.ɵɵrepeaterCreate(50, SymphiqWelcomeDashboardComponent_For_51_Template, 9, 3, "div", 27, _forTrack0$C);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(66, "div", 32);
+            i0.ɵɵelementStart(52, "div", 28);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(67, "svg", 27);
-            i0.ɵɵelement(68, "path", 33);
+            i0.ɵɵelementStart(53, "svg", 23);
+            i0.ɵɵelement(54, "path", 29);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(69, "div", 18)(70, "h3", 34);
-            i0.ɵɵtext(71, " Ready to Begin Your Journey? ");
+            i0.ɵɵelementStart(55, "div", 14)(56, "h3", 30);
+            i0.ɵɵtext(57, " Ready to Begin Your Journey? ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(72, "p", 35);
-            i0.ɵɵtext(73, " The next step will guide you through creating your account and entering your shop details\u2014including your business name, website URL, and ecommerce platform. Each step builds on the previous one to create comprehensive business context, enabling Symphiq to deliver increasingly accurate and personalized recommendations as you progress. ");
+            i0.ɵɵelementStart(58, "p", 31);
+            i0.ɵɵtext(59, " The next step will guide you through creating your account and entering your shop details\u2014including your business name, website URL, and ecommerce platform. Each step builds on the previous one to create comprehensive business context, enabling Symphiq to deliver increasingly accurate and personalized recommendations as you progress. ");
             i0.ɵɵelementEnd()()()()()()()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -51764,22 +51775,8 @@ class SymphiqWelcomeDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵclassProp("light-mode", ctx.isLightMode());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
+            i0.ɵɵproperty("title", "Welcome to Symphiq")("subtitle", "Your Revenue Orchestration Journey Starts Here")("viewMode", ctx.viewMode())("showControls", false)("size", "large");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.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");
-            i0.ɵɵadvance(2);
             i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.WELCOME)("showNextStepAction", true)("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -51813,11 +51810,11 @@ class SymphiqWelcomeDashboardComponent {
             i0.ɵɵproperty("ngClass", ctx.nextStepsTitleClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.nextStepsTextClasses());
-        } }, dependencies: [CommonModule, i1$1.NgClass, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, ConfidenceLevelCardComponent, DashboardHeaderComponent, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqWelcomeDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, DashboardHeaderComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [ngClass]="getContainerClasses()">
       <!-- Scroll Progress Bar -->
       <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
@@ -51831,52 +51828,13 @@ class SymphiqWelcomeDashboardComponent {
       <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
 
       <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Welcome to Symphiq
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Your Revenue Orchestration Journey Starts Here
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-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'">
-                    Welcome to Symphiq
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
+        <symphiq-dashboard-header
+          [title]="'Welcome to Symphiq'"
+          [subtitle]="'Your Revenue Orchestration Journey Starts Here'"
+          [viewMode]="viewMode()"
+          [showControls]="false"
+          [size]="'large'"
+        />
 
         <!-- Journey Progress Indicator -->
         <symphiq-journey-progress-indicator
@@ -51979,7 +51937,7 @@ class SymphiqWelcomeDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 201 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 163 }); })();
 
 function FocusAreaQuestionComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);