@eric-emg/symphiq-components 1.2.113 → 1.2.115

package/fesm2022/symphiq-components.mjs

@@ -53728,7 +53728,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_41_Conditional_0_
     i0.ɵɵelement(0, "symphiq-journey-progress-indicator", 26);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode)("currentStepId", "business-analysis")("showNextStepAction", true);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("currentStepId", "business-analysis")("showNextStepAction", true);
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -53747,11 +53747,11 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_41_Template(rf, c
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(!ctx_r0.isOnboarded() ? 0 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode)("businessName", ((tmp_3_0 = ctx_r0.currentProfile()) == null ? null : tmp_3_0.profileStructured == null ? null : tmp_3_0.profileStructured.businessName) || "your business")("isOnboarded", ctx_r0.isOnboarded());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("businessName", ((tmp_3_0 = ctx_r0.currentProfile()) == null ? null : tmp_3_0.profileStructured == null ? null : tmp_3_0.profileStructured.businessName) || "your business")("isOnboarded", ctx_r0.isOnboarded());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("recommendations", ctx_r0.recommendationItems())("viewMode", ctx_r0.viewMode);
+    i0.ɵɵproperty("recommendations", ctx_r0.recommendationItems())("viewMode", ctx_r0.viewMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("sections", ctx_r0.nonRecommendationSections())("viewMode", ctx_r0.viewMode);
+    i0.ɵɵproperty("sections", ctx_r0.nonRecommendationSections())("viewMode", ctx_r0.viewMode());
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_42_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 32);
@@ -53761,7 +53761,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_42_For_1_Conditio
     const ɵ$index_109_r3 = i0.ɵɵnextContext().$index;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode)("subsections", ctx_r0.sections()[ɵ$index_109_r3 + 1].subsections);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("subsections", ctx_r0.sections()[ɵ$index_109_r3 + 1].subsections);
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_42_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-profile-section", 31);
@@ -53771,7 +53771,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_42_For_1_Template
     const ɵ$index_109_r3 = ctx.$index;
     const ɵ$count_109_r5 = ctx.$count;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("section", section_r4)("viewMode", ctx_r0.viewMode)("forceExpanded", !ctx_r0.isCompactView());
+    i0.ɵɵproperty("section", section_r4)("viewMode", ctx_r0.viewMode())("forceExpanded", !ctx_r0.isCompactView());
     i0.ɵɵadvance();
     i0.ɵɵconditional(!(ɵ$index_109_r3 === ɵ$count_109_r5 - 1) ? 1 : -1);
 } }
@@ -53785,13 +53785,13 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template(rf, c
     i0.ɵɵelement(0, "symphiq-section-navigation", 20);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-floating-toc", 20);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -53817,9 +53817,11 @@ class SymphiqBusinessAnalysisDashboardComponent {
         return hasItems || hasContent || hasVisual;
     }
     constructor() {
-        this.viewMode = ViewModeEnum.LIGHT;
-        this.embedded = false;
-        this.parentHeaderOffset = 0;
+        this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
+        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
+        this.parentHeaderOffset = input(0, ...(ngDevMode ? [{ debugName: "parentHeaderOffset" }] : []));
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
         this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
         this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -53831,8 +53833,39 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.searchService = inject(BusinessProfileSearchService);
         this.modalService = inject(ModalService);
         this.currentProfile = signal(undefined, ...(ngDevMode ? [{ debugName: "currentProfile" }] : []));
+        this.COLLAPSE_THRESHOLD = 20;
+        this.EXPAND_THRESHOLD = 10;
+        this.embeddedScrollEffect = effect(() => {
+            const scrollEvent = this.scrollEvent();
+            const isEmbedded = this.embedded();
+            if (!scrollEvent || !isEmbedded) {
+                return;
+            }
+            const detail = scrollEvent.detail;
+            if (!detail) {
+                return;
+            }
+            const scrollTop = detail.scrollTop || 0;
+            const currentState = this.headerScrollService.isScrolled();
+            if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(true);
+            }
+            else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(false);
+            }
+            const scrollElement = this.scrollElement();
+            if (scrollElement) {
+                const scrollHeight = scrollElement.scrollHeight || 0;
+                const clientHeight = scrollElement.clientHeight || 0;
+                const maxScroll = scrollHeight - clientHeight;
+                if (maxScroll > 0) {
+                    const progress = (scrollTop / maxScroll) * 100;
+                    this.headerScrollService.scrollProgress.set(Math.min(100, Math.max(0, progress)));
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
         this.scrollProgress = computed(() => this.headerScrollService.scrollProgress(), ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
-        this.isLightMode = computed(() => this.viewMode === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.displayMode = signal(DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
         this.isCompactView = computed(() => this.displayMode() === DisplayModeEnum.COMPACT, ...(ngDevMode ? [{ debugName: "isCompactView" }] : []));
         this.isSimplifiedView = computed(() => this.displayMode() === DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "isSimplifiedView" }] : []));
@@ -53876,7 +53909,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.scrollDirection = 'down';
     }
     onScroll() {
-        this.headerScrollService.handleScroll(this.embedded);
+        this.headerScrollService.handleScroll(this.embedded());
         const navState = this.navigationService.getNavigationState()();
         if (navState.sourceElementId && navState.targetElementId && !navState.isBackButtonVisible) {
             const currentScrollPosition = window.scrollY;
@@ -53917,10 +53950,10 @@ class SymphiqBusinessAnalysisDashboardComponent {
             label: recommendation.title,
             value: recommendation.description
         };
-        this.modalService.openItemDetailModal(itemAdapter, this.viewMode, 'recommendation', 'Strategic Insights', recommendation.title, undefined, this.isSimplifiedView() || this.isCompactView());
+        this.modalService.openItemDetailModal(itemAdapter, this.viewMode(), 'recommendation', 'Strategic Insights', recommendation.title, undefined, this.isSimplifiedView() || this.isCompactView());
     }
     getViewModeButtonClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         if (isDark) {
             return 'bg-slate-800/60 border border-slate-700/50 text-slate-300 hover:bg-slate-700/60 hover:border-slate-600/50';
         }
@@ -54034,14 +54067,15 @@ class SymphiqBusinessAnalysisDashboardComponent {
         }, 2000);
     }
     ngOnInit() {
-        this.currentProfile.set(this.profile);
-        this.lookupService.setProfile(this.profile);
-        if (this.profile) {
-            this.searchService.setProfile(this.profile);
+        this.currentProfile.set(this.profile());
+        this.lookupService.setProfile(this.profile());
+        const profile = this.profile();
+        if (profile) {
+            this.searchService.setProfile(profile);
         }
-        if (this.profile?.profileStructured?.sections) {
-            const recommendations = this.profile.profileStructured?.recommendations;
-            this.profileContextService.indexProfile(this.profile.profileStructured.sections, recommendations);
+        if (profile?.profileStructured?.sections) {
+            const recommendations = profile.profileStructured?.recommendations;
+            this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
         }
     }
     ngAfterViewInit() {
@@ -54180,28 +54214,28 @@ class SymphiqBusinessAnalysisDashboardComponent {
         }
     }
     getContainerClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         const bgColor = isDark ? 'bg-slate-900' : 'bg-slate-50';
-        const positioning = this.embedded ? '' : 'relative';
+        const positioning = this.embedded() ? '' : 'relative';
         return `${positioning} min-h-screen ${bgColor}`.trim();
     }
     getBackgroundClasses() {
-        const positioning = this.embedded ? 'absolute' : 'fixed';
+        const positioning = this.embedded() ? 'absolute' : 'fixed';
         return `${positioning} inset-0 overflow-hidden pointer-events-none`;
     }
     getMeshGradientClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         if (isDark) {
             return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-slate-900';
         }
         return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-100/50 via-purple-100/50 to-slate-50';
     }
     getTopoPatternClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         return isDark ? 'absolute inset-0 opacity-5' : 'absolute inset-0 opacity-5 mix-blend-overlay';
     }
     getOrbClasses(index) {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         if (!isDark)
             return 'hidden';
         const positions = [
@@ -54212,29 +54246,29 @@ class SymphiqBusinessAnalysisDashboardComponent {
         return positions[index - 1] || '';
     }
     getHeaderClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        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;
+        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;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         return isDark ? 'text-lg mt-2 text-slate-400' : 'text-lg mt-2 text-slate-600';
     }
     getLoadingOverlayClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         if (isDark) {
             return 'fixed inset-0 z-50 flex items-center justify-center bg-slate-900/80 backdrop-blur-sm';
         }
         return 'fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm';
     }
     getSpinnerClasses() {
-        const isDark = this.viewMode === ViewModeEnum.DARK;
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
         if (isDark) {
             return 'w-16 h-16 border-4 rounded-full animate-spin border-slate-700 border-t-blue-400';
         }
@@ -54246,7 +54280,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { requestedByUser: "requestedByUser", viewMode: "viewMode", embedded: "embedded", profile: "profile", parentHeaderOffset: "parentHeaderOffset", scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-2"], [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, "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", "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"], [1, "relative"], [3, "sections", "viewMode", "embedded"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-2"], [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, "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", "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"], [1, "relative"], [3, "sections", "viewMode", "embedded"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -54310,7 +54344,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             let tmp_30_0;
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵclassMap(ctx.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");
+            i0.ɵɵclassMap(ctx.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");
             i0.ɵɵadvance();
             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");
@@ -54365,7 +54399,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isSimplifiedView() ? 44 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode)("embedded", ctx.embedded);
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("embedded", ctx.embedded());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading() ? 46 : -1);
             i0.ɵɵadvance(2);
@@ -54373,7 +54407,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("isOpen", ctx.searchService.isSearchOpen())("searchQuery", ctx.searchService.getSearchQuery())("results", ctx.searchService.searchResults())("hasResults", ctx.searchService.hasResults())("selectedIndex", ctx.selectedSearchIndex())("placeholder", "Search sections, items, and analysis...");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("isOpen", ctx.isViewModeSwitcherOpen())("currentMode", ctx.displayMode())("viewMode", ctx.viewMode)("isLoading", ctx.isViewModeSwitching());
+            i0.ɵɵproperty("isOpen", ctx.isViewModeSwitcherOpen())("currentMode", ctx.displayMode())("viewMode", ctx.viewMode())("isLoading", ctx.isViewModeSwitching());
         } }, dependencies: [CommonModule, i1$1.NgClass, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}[_nghost-%COMP%]     .search-highlight-pulse{animation:_ngcontent-%COMP%_pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
@@ -54381,7 +54415,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
         args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [ngClass]="getContainerClasses()">
       <!-- Scroll Progress Bar (fixed at top) -->
-      <div [class]="embedded ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
         <div
           [style.width.%]="scrollProgress()"
           [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
@@ -54497,7 +54531,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
             @if (!isOnboarded()) {
               <symphiq-journey-progress-indicator
-                [viewMode]="viewMode"
+                [viewMode]="viewMode()"
                 [currentStepId]="'business-analysis'"
                 [showNextStepAction]="true"
               />
@@ -54506,7 +54540,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
               <div class="mb-8">
                 <symphiq-welcome-banner
-                  [viewMode]="viewMode"
+                  [viewMode]="viewMode()"
                   [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
                   [isOnboarded]="isOnboarded()"
                 />
@@ -54515,7 +54549,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
               <div class="mb-8">
                 <symphiq-recommendations-tiled-grid
                   [recommendations]="recommendationItems()"
-                  [viewMode]="viewMode"
+                  [viewMode]="viewMode()"
                   (viewMoreClick)="openRecommendationDetailsModal($event)"
                 />
               </div>
@@ -54523,7 +54557,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
               <div>
                 <symphiq-collapsible-section-group
                   [sections]="nonRecommendationSections()"
-                  [viewMode]="viewMode"
+                  [viewMode]="viewMode()"
                 />
               </div>
             </div>
@@ -54531,13 +54565,13 @@ class SymphiqBusinessAnalysisDashboardComponent {
             @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
               <symphiq-profile-section
                 [section]="section"
-                [viewMode]="viewMode"
+                [viewMode]="viewMode()"
                 [forceExpanded]="!isCompactView()"
               />
               @if (!last) {
                 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                   <symphiq-section-divider
-                    [viewMode]="viewMode"
+                    [viewMode]="viewMode()"
                     [subsections]="sections()[idx + 1].subsections" />
                 </div>
               }
@@ -54548,22 +54582,22 @@ class SymphiqBusinessAnalysisDashboardComponent {
         @if (!isSimplifiedView()) {
           <symphiq-section-navigation
             [sections]="sections()"
-            [viewMode]="viewMode"
-            [embedded]="embedded"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
           />
         }
 
         @if (!isSimplifiedView()) {
           <symphiq-floating-toc
             [sections]="sections()"
-            [viewMode]="viewMode"
-            [embedded]="embedded"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
           />
         }
 
         <symphiq-floating-back-button
-          [viewMode]="viewMode"
-          [embedded]="embedded"
+          [viewMode]="viewMode()"
+          [embedded]="embedded()"
         />
       </div>
 
@@ -54594,31 +54628,21 @@ class SymphiqBusinessAnalysisDashboardComponent {
       <symphiq-view-mode-switcher-modal
         [isOpen]="isViewModeSwitcherOpen()"
         [currentMode]="displayMode()"
-        [viewMode]="viewMode"
+        [viewMode]="viewMode()"
         [isLoading]="isViewModeSwitching()"
         (close)="closeViewModeSwitcher()"
         (modeSelected)="handleDisplayModeChange($event)"
       />
     </div>
   `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
-    }], () => [], { requestedByUser: [{
-            type: Input
-        }], viewMode: [{
-            type: Input
-        }], embedded: [{
-            type: Input
-        }], profile: [{
-            type: Input
-        }], parentHeaderOffset: [{
-            type: Input
-        }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], onScroll: [{
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }], handleKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 285 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 301 }); })();
 
 function DashboardHeaderComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 4);