@eric-emg/symphiq-components 1.2.430 → 1.2.431

package/fesm2022/symphiq-components.mjs

@@ -68362,14 +68362,14 @@ function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 16);
+    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 13);
     i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 17);
+    i0.ɵɵelementStart(2, "button", 14);
     i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 18);
-    i0.ɵɵelement(4, "path", 19)(5, "path", 20);
+    i0.ɵɵelementStart(3, "svg", 15);
+    i0.ɵɵelement(4, "path", 16)(5, "path", 17);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(6, "span");
@@ -68384,15 +68384,15 @@ function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
 } }
-function DashboardHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
+function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
     i0.ɵɵtext(2, "Generated At");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 11);
+    i0.ɵɵelementStart(3, "div", 20);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.metaLabelClass());
     i0.ɵɵadvance(2);
@@ -68400,7 +68400,36 @@ function DashboardHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
 } }
-function DashboardHeaderComponent_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵtext(2, "Requested by");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 20);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
+    i0.ɵɵadvance();
+    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_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 18);
+    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.formattedGeneratedDate() ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
+} }
+function DashboardHeaderComponent_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1, "\u203A");
     i0.ɵɵelementEnd();
@@ -68415,11 +68444,11 @@ function DashboardHeaderComponent_Conditional_26_Conditional_3_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
 } }
-function DashboardHeaderComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "span", 5);
+function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "span", 5);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_26_Conditional_3_Template, 4, 3);
+    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_20_Conditional_3_Template, 4, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -68430,16 +68459,16 @@ function DashboardHeaderComponent_Conditional_26_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
 } }
-function DashboardHeaderComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-search-button", 21);
-    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_27_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_21_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", 22);
-    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_27_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_21_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", 15);
+    i0.ɵɵelement(3, "path", 16)(4, "path", 17);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -68515,7 +68544,7 @@ 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"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 28, vars: 42, consts: [[1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-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", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [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"], [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"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 22, vars: 36, consts: [[1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-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", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [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"], [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.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
@@ -68525,23 +68554,16 @@ class DashboardHeaderComponent {
             i0.ɵɵtext(10);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
-            i0.ɵɵelementStart(12, "div", 8);
-            i0.ɵɵconditionalCreate(13, DashboardHeaderComponent_Conditional_13_Template, 5, 5, "div", 9);
-            i0.ɵɵelementStart(14, "div", 9)(15, "div", 10);
-            i0.ɵɵtext(16, "Requested by");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "div", 11);
+            i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(13, "div", 1)(14, "div", 9)(15, "div", 3)(16, "div", 10)(17, "h1", 5);
             i0.ɵɵtext(18);
-            i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(19, "div", 1)(20, "div", 12)(21, "div", 3)(22, "div", 13)(23, "h1", 5);
-            i0.ɵɵtext(24);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(25, "div", 14);
-            i0.ɵɵconditionalCreate(26, DashboardHeaderComponent_Conditional_26_Template, 4, 3, "div", 15);
-            i0.ɵɵconditionalCreate(27, DashboardHeaderComponent_Conditional_27_Template, 5, 3);
+            i0.ɵɵelementStart(19, "div", 11);
+            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 4, 3, "div", 12);
+            i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 5, 3);
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            let tmp_16_0;
             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());
@@ -68559,14 +68581,8 @@ class DashboardHeaderComponent {
             i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.formattedGeneratedDate() ? 13 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassMap(ctx.metaLabelClass());
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassMap(ctx.headerTitleClass());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate2("", (tmp_16_0 = ctx.requestedByUser()) == null ? null : tmp_16_0.firstName, " ", (tmp_16_0 = ctx.requestedByUser()) == null ? null : tmp_16_0.lastName);
+            i0.ɵɵconditional(ctx.formattedGeneratedDate() || ctx.requestedByUser() ? 12 : -1);
             i0.ɵɵadvance();
             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.ɵɵadvance();
@@ -68576,9 +68592,9 @@ class DashboardHeaderComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.currentSection() ? 26 : -1);
+            i0.ɵɵconditional(ctx.currentSection() ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showControls() ? 27 : -1);
+            i0.ɵɵconditional(ctx.showControls() ? 21 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
@@ -68634,18 +68650,22 @@ class DashboardHeaderComponent {
                 </button>
               </div>
             }
-            <div class="flex flex-col gap-4 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>
-              }
-              <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>
+            @if (formattedGeneratedDate() || requestedByUser()) {
+              <div class="flex flex-col gap-4 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>
+                }
+                @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>
+                }
               </div>
-            </div>
+            }
           </div>
         </div>
       </div>
@@ -68706,7 +68726,7 @@ class DashboardHeaderComponent {
   `
             }]
     }], 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 }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", 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: 130 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 134 }); })();
 
 class GradeBadgeComponent {
     constructor() {
@@ -94426,34 +94446,71 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_6_Templa
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("currentStepId", ctx_r1.currentStepId())("showNextStepAction", true)("forDemo", ctx_r1.forDemo())("maxAccessibleStepId", ctx_r1.maxAccessibleStepId());
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const focusArea_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.getEngagementBadgeClasses(focusArea_r4.engagementStatus));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getEngagementStatusLabel(focusArea_r4.engagementStatus), " ");
+} }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
     i0.ɵɵtext(1, " Analysis Ready ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tool_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.getToolChipClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", tool_r5, " ");
+} }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 48)(2, "span", 49);
+    i0.ɵɵtext(3, "Marketing Tools:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 50);
+    i0.ɵɵrepeaterCreate(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_12_For_6_Template, 2, 2, "span", 51, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const focusArea_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.getToolsLabelClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(focusArea_r4.tools);
+} }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 45);
+    i0.ɵɵelementStart(1, "svg", 52);
     i0.ɵɵelement(2, "path", 26);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " Complete ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 45);
-    i0.ɵɵelement(2, "path", 46);
+    i0.ɵɵelementStart(1, "svg", 52);
+    i0.ɵɵelement(2, "path", 53);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " In Progress ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 45);
-    i0.ɵɵelement(2, "path", 47);
+    i0.ɵɵelementStart(1, "svg", 52);
+    i0.ɵɵelement(2, "path", 54);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " Not Started ");
     i0.ɵɵelementEnd();
@@ -94465,31 +94522,34 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template(rf,
     i0.ɵɵelementStart(1, "div", 31)(2, "div", 32)(3, "div", 33);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_5_Template, 2, 0, "div", 34);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3");
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "p");
+    i0.ɵɵelementStart(5, "div", 34);
+    i0.ɵɵconditionalCreate(6, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_6_Template, 2, 2, "div", 35);
+    i0.ɵɵconditionalCreate(7, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_7_Template, 2, 0, "div", 36);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "h3");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 35)(11, "div", 36)(12, "span");
-    i0.ɵɵtext(13, "Progress");
+    i0.ɵɵelementStart(10, "p");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_12_Template, 7, 1, "div", 37);
+    i0.ɵɵelementStart(13, "div", 38)(14, "div", 39)(15, "span");
+    i0.ɵɵtext(16, "Progress");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span");
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div");
-    i0.ɵɵelement(17, "div", 37);
+    i0.ɵɵelementStart(19, "div");
+    i0.ɵɵelement(20, "div", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(18, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_18_Template, 4, 0, "div", 38)(19, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_19_Template, 4, 0, "div", 39)(20, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_20_Template, 4, 0, "div", 40);
+    i0.ɵɵconditionalCreate(21, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_21_Template, 4, 0, "div", 41)(22, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_22_Template, 4, 0, "div", 42)(23, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Conditional_23_Template, 4, 0, "div", 43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div")(22, "div", 41)(23, "span", 42);
-    i0.ɵɵtext(24, "View Details");
+    i0.ɵɵelementStart(24, "div")(25, "div", 44)(26, "span", 45);
+    i0.ɵɵtext(27, "View Details");
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(25, "svg", 43);
-    i0.ɵɵelement(26, "path", 44);
+    i0.ɵɵelementStart(28, "svg", 46);
+    i0.ɵɵelement(29, "path", 47);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const focusArea_r4 = ctx.$implicit;
@@ -94497,8 +94557,10 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template(rf,
     i0.ɵɵclassMap(ctx_r1.getCardClasses());
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(focusArea_r4.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(focusArea_r4.engagementStatus ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(focusArea_r4.hasAnalysis ? 5 : -1);
+    i0.ɵɵconditional(focusArea_r4.hasAnalysis ? 7 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.getTitleClasses());
     i0.ɵɵadvance();
@@ -94507,6 +94569,8 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template(rf,
     i0.ɵɵclassMap(ctx_r1.getDescriptionClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", focusArea_r4.description, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(focusArea_r4.engagementStatus === ctx_r1.FocusAreaDetailStatusEnum.ENGAGED && focusArea_r4.tools.length > 0 ? 12 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap(ctx_r1.getLabelClasses());
     i0.ɵɵadvance(2);
@@ -94518,14 +94582,14 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", focusArea_r4.progressPercent, "%");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(focusArea_r4.status === "complete" ? 18 : focusArea_r4.status === "in-progress" ? 19 : 20);
+    i0.ɵɵconditional(focusArea_r4.status === "complete" ? 21 : focusArea_r4.status === "in-progress" ? 22 : 23);
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap(ctx_r1.getCardFooterClasses());
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-modal", 48);
-    i0.ɵɵlistener("closeModal", function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_55_Template_symphiq_search_modal_closeModal_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleCloseSearchModal()); });
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-search-modal", 55);
+    i0.ɵɵlistener("closeModal", function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_55_Template_symphiq_search_modal_closeModal_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleCloseSearchModal()); });
     i0.ɵɵelementEnd();
 } }
 class SymphiqProfileFocusAreasAnalysesDashboardComponent {
@@ -94561,11 +94625,13 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
         this.focusAreaProfileAdminAnswerAction = output();
         this.showSearchModal = signal(false, ...(ngDevMode ? [{ debugName: "showSearchModal" }] : []));
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
+        this.headerScrollService = inject(HeaderScrollService);
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.isSimplifiedView = computed(() => this.displayMode() === DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "isSimplifiedView" }] : []));
+        this.FocusAreaDetailStatusEnum = FocusAreaDetailStatusEnum;
         this.focusAreaCards = computed(() => {
             const allDomains = FocusAreaDomainEnumUtil.sorted();
-            const detailsMap = new Map(this.focusAreaDetails()?.map(detail => [detail.focusAreaDomain, detail]));
+            const focusAreaDetailsData = this.focusAreaDetails();
             const mockProgressData = {
                 [FocusAreaDomainEnum.AFFILIATE_AND_REFERRAL_PROGRAMS]: { answered: 8, total: 12, hasAnalysis: true },
                 [FocusAreaDomainEnum.AI_SEARCH_OPTIMIZATION]: { answered: 5, total: 10, hasAnalysis: false },
@@ -94584,6 +94650,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                 [FocusAreaDomainEnum.SOCIAL_MEDIA_ENGAGEMENT]: { answered: 6, total: 12, hasAnalysis: false },
                 [FocusAreaDomainEnum.USER_EXPERIENCE_OPTIMIZATION]: { answered: 9, total: 11, hasAnalysis: true }
             };
+            const focusAreaDetailsMap = new Map(focusAreaDetailsData?.map(fad => [fad.focusAreaDomain, fad]));
             return allDomains.map(domain => {
                 const mockData = mockProgressData[domain];
                 const questionsAnswered = mockData.answered;
@@ -94596,6 +94663,9 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                 else if (questionsAnswered > 0) {
                     status = 'in-progress';
                 }
+                const focusAreaDetail = focusAreaDetailsMap.get(domain);
+                const engagementStatus = focusAreaDetail?.status ?? null;
+                const tools = focusAreaDetail?.tools ?? [];
                 return {
                     domain,
                     title: FocusAreaDomainEnumUtil.title(domain),
@@ -94605,11 +94675,16 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                     hasAnalysis: mockData.hasAnalysis,
                     icon: this.getIconForDomain(domain),
                     progressPercent,
-                    status
+                    status,
+                    engagementStatus,
+                    tools
                 };
             });
         }, ...(ngDevMode ? [{ debugName: "focusAreaCards" }] : []));
     }
+    onScroll() {
+        this.headerScrollService.handleScroll(this.embedded());
+    }
     handleFocusAreaClick(domain) {
         this.focusAreaClicked.emit(domain);
     }
@@ -94706,8 +94781,45 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
         };
         return iconMap[domain] || '🎯';
     }
+    getEngagementBadgeClasses(status) {
+        const baseClasses = 'px-3 py-1 text-xs font-semibold rounded-full';
+        switch (status) {
+            case FocusAreaDetailStatusEnum.ENGAGED:
+                return `${baseClasses} bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400`;
+            case FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO:
+                return `${baseClasses} bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400`;
+            case FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST:
+                return `${baseClasses} bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-400`;
+            default:
+                return baseClasses;
+        }
+    }
+    getEngagementStatusLabel(status) {
+        switch (status) {
+            case FocusAreaDetailStatusEnum.ENGAGED:
+                return 'Engaged';
+            case FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO:
+                return 'Interested';
+            case FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST:
+                return 'Not Interested';
+            default:
+                return '';
+        }
+    }
+    getToolsLabelClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    getToolChipClasses() {
+        return this.isLightMode()
+            ? 'bg-emerald-100 text-emerald-700'
+            : 'bg-emerald-900/30 text-emerald-400';
+    }
     static { this.ɵfac = function SymphiqProfileFocusAreasAnalysesDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileFocusAreasAnalysesDashboardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileFocusAreasAnalysesDashboardComponent, selectors: [["symphiq-profile-focus-areas-analyses-dashboard"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalyses: [1, "profileAnalyses"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileFocusAreas: [1, "profileFocusAreas"], itemStatusesProfileFocusArea: [1, "itemStatusesProfileFocusArea"], itemStatusesProfileAnalysis: [1, "itemStatusesProfileAnalysis"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], viewMode: [1, "viewMode"], displayMode: [1, "displayMode"], currentStepId: [1, "currentStepId"] }, outputs: { focusAreaClicked: "focusAreaClicked", stepClick: "stepClick", nextStepClick: "nextStepClick", answerFocusAreaProfileQuestions: "answerFocusAreaProfileQuestions", continueFocusAreaProfileQuestions: "continueFocusAreaProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", focusAreaProfileAdminAnswerAction: "focusAreaProfileAdminAnswerAction" }, decls: 56, vars: 22, consts: [[1, "min-h-screen", "relative"], [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, "fixed", "top-0", "left-0", "right-0", "h-1", "z-[60]", "bg-slate-200/30"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "container", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "md:py-12", "relative", "z-10"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8"], [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", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-3", "mb-6"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [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-2", 3, "ngClass"], [1, "space-y-2", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [3, "class"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "click"], [1, "p-6"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "text-4xl"], [1, "px-3", "py-1", "bg-green-100", "dark:bg-green-900/30", "text-green-700", "dark:text-green-400", "text-xs", "font-semibold", "rounded-full"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between", "text-sm"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "flex", "items-center", "gap-1", "text-xs", "text-green-600", "dark:text-green-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-blue-600", "dark:text-blue-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-slate-500", "dark:text-slate-400", "font-medium"], [1, "flex", "items-center", "justify-between"], [1, "text-sm", "font-medium", "text-slate-600", "dark:text-slate-400"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-slate-400", "dark:text-slate-500", "group-hover:text-blue-500", "dark:group-hover:text-blue-400", "group-hover:translate-x-1", "transition-all"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", "clip-rule", "evenodd"], [3, "closeModal"]], template: function SymphiqProfileFocusAreasAnalysesDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileFocusAreasAnalysesDashboardComponent, selectors: [["symphiq-profile-focus-areas-analyses-dashboard"]], hostBindings: function SymphiqProfileFocusAreasAnalysesDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("scroll", function SymphiqProfileFocusAreasAnalysesDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
+        } }, inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalyses: [1, "profileAnalyses"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileFocusAreas: [1, "profileFocusAreas"], itemStatusesProfileFocusArea: [1, "itemStatusesProfileFocusArea"], itemStatusesProfileAnalysis: [1, "itemStatusesProfileAnalysis"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], viewMode: [1, "viewMode"], displayMode: [1, "displayMode"], currentStepId: [1, "currentStepId"] }, outputs: { focusAreaClicked: "focusAreaClicked", stepClick: "stepClick", nextStepClick: "nextStepClick", answerFocusAreaProfileQuestions: "answerFocusAreaProfileQuestions", continueFocusAreaProfileQuestions: "continueFocusAreaProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", focusAreaProfileAdminAnswerAction: "focusAreaProfileAdminAnswerAction" }, decls: 56, vars: 22, consts: [[1, "min-h-screen", "relative"], [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, "fixed", "top-0", "left-0", "right-0", "h-1", "z-[60]", "bg-slate-200/30"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "container", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "md:py-12", "relative", "z-10"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8"], [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", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-3", "mb-6"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [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-2", 3, "ngClass"], [1, "space-y-2", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [3, "class"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "click"], [1, "p-6"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "text-4xl"], [1, "flex", "flex-col", "items-end", "gap-2"], [3, "ngClass"], [1, "px-3", "py-1", "bg-green-100", "dark:bg-green-900/30", "text-green-700", "dark:text-green-400", "text-xs", "font-semibold", "rounded-full"], [1, "mt-3", "mb-2"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between", "text-sm"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "flex", "items-center", "gap-1", "text-xs", "text-green-600", "dark:text-green-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-blue-600", "dark:text-blue-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-slate-500", "dark:text-slate-400", "font-medium"], [1, "flex", "items-center", "justify-between"], [1, "text-sm", "font-medium", "text-slate-600", "dark:text-slate-400"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-slate-400", "dark:text-slate-500", "group-hover:text-blue-500", "dark:group-hover:text-blue-400", "group-hover:translate-x-1", "transition-all"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", "clip-rule", "evenodd"], [3, "closeModal"]], template: function SymphiqProfileFocusAreasAnalysesDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
@@ -94776,7 +94888,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
             i0.ɵɵtext(51, " \u2014 Complete assessments to receive tailored recommendations and insights");
             i0.ɵɵelementEnd()()()()()()()()();
             i0.ɵɵelementStart(52, "div", 27);
-            i0.ɵɵrepeaterCreate(53, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template, 27, 23, "div", 28, _forTrack0);
+            i0.ɵɵrepeaterCreate(53, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_54_Template, 30, 25, "div", 28, _forTrack0);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(55, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_55_Template, 1, 0, "symphiq-search-modal");
             i0.ɵɵelementEnd();
@@ -94924,11 +95036,18 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                 <div class="p-6">
                   <div class="flex items-start justify-between mb-4">
                     <div class="text-4xl">{{ focusArea.icon }}</div>
-                    @if (focusArea.hasAnalysis) {
-                      <div class="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-semibold rounded-full">
-                        Analysis Ready
-                      </div>
-                    }
+                    <div class="flex flex-col items-end gap-2">
+                      @if (focusArea.engagementStatus) {
+                        <div [ngClass]="getEngagementBadgeClasses(focusArea.engagementStatus)">
+                          {{ getEngagementStatusLabel(focusArea.engagementStatus) }}
+                        </div>
+                      }
+                      @if (focusArea.hasAnalysis) {
+                        <div class="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-semibold rounded-full">
+                          Analysis Ready
+                        </div>
+                      }
+                    </div>
                   </div>
 
                   <h3 [class]="getTitleClasses()">
@@ -94939,6 +95058,21 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                     {{ focusArea.description }}
                   </p>
 
+                  @if (focusArea.engagementStatus === FocusAreaDetailStatusEnum.ENGAGED && focusArea.tools.length > 0) {
+                    <div class="mt-3 mb-2">
+                      <div class="flex items-center gap-2">
+                        <span [ngClass]="getToolsLabelClasses()" class="text-xs font-medium">Marketing Tools:</span>
+                        <div class="flex flex-wrap gap-1.5">
+                          @for (tool of focusArea.tools; track tool) {
+                            <span [ngClass]="getToolChipClasses()" class="px-2 py-0.5 rounded text-xs">
+                              {{ tool }}
+                            </span>
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  }
+
                   <div class="space-y-2">
                     <div class="flex items-center justify-between text-sm">
                       <span [class]="getLabelClasses()">Progress</span>
@@ -95001,8 +95135,11 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
       }
     </div>
   `, styles: [".animated-bubbles{background:linear-gradient(135deg,#6366f10d,#a855f70d)}.animated-bubbles.light-mode{background:linear-gradient(135deg,#3b82f608,#9333ea08)}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out}.animated-bubbles:before{width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles:after{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}\n"] }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalyses: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalyses", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileFocusAreas: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreas", required: false }] }], itemStatusesProfileFocusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileFocusArea", required: false }] }], itemStatusesProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileAnalysis", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaClicked: [{ type: i0.Output, args: ["focusAreaClicked"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], answerFocusAreaProfileQuestions: [{ type: i0.Output, args: ["answerFocusAreaProfileQuestions"] }], continueFocusAreaProfileQuestions: [{ type: i0.Output, args: ["continueFocusAreaProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], focusAreaProfileAdminAnswerAction: [{ type: i0.Output, args: ["focusAreaProfileAdminAnswerAction"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileFocusAreasAnalysesDashboardComponent, { className: "SymphiqProfileFocusAreasAnalysesDashboardComponent", filePath: "lib/components/profile-analyses-focus-areas-dashboard/symphiq-profile-focus-areas-analyses-dashboard.component.ts", lineNumber: 285 }); })();
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalyses: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalyses", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileFocusAreas: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreas", required: false }] }], itemStatusesProfileFocusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileFocusArea", required: false }] }], itemStatusesProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileAnalysis", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaClicked: [{ type: i0.Output, args: ["focusAreaClicked"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], answerFocusAreaProfileQuestions: [{ type: i0.Output, args: ["answerFocusAreaProfileQuestions"] }], continueFocusAreaProfileQuestions: [{ type: i0.Output, args: ["continueFocusAreaProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], focusAreaProfileAdminAnswerAction: [{ type: i0.Output, args: ["focusAreaProfileAdminAnswerAction"] }], onScroll: [{
+            type: HostListener,
+            args: ['window:scroll', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileFocusAreasAnalysesDashboardComponent, { className: "SymphiqProfileFocusAreasAnalysesDashboardComponent", filePath: "lib/components/profile-analyses-focus-areas-dashboard/symphiq-profile-focus-areas-analyses-dashboard.component.ts", lineNumber: 313 }); })();
 
 function FocusAreaStatusCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);