@eric-emg/symphiq-components 1.2.101 → 1.2.102

package/fesm2022/symphiq-components.mjs

@@ -24940,6 +24940,7 @@ class FloatingTocComponent {
         this.sections = [];
         this.viewMode = ViewModeEnum.LIGHT;
         this.embedded = false;
+        this.parentHeaderOffset = 0;
         this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
         this.isPinned = signal(false, ...(ngDevMode ? [{ debugName: "isPinned" }] : []));
         this.activeSection = signal('', ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
@@ -25081,12 +25082,39 @@ class FloatingTocComponent {
         window.addEventListener('scroll', this.scrollListener, { passive: true });
     }
     calculateContainerOffset() {
-        if (this.embedded && this.containerElement) {
-            const rect = this.containerElement.getBoundingClientRect();
-            const stickyHeader = document.querySelector('header');
-            const headerHeight = stickyHeader ? stickyHeader.getBoundingClientRect().height : 0;
-            const viewportOffset = Math.max(0, rect.top);
-            this.containerTopOffset.set(viewportOffset + headerHeight);
+        if (this.embedded) {
+            // If scrollElement is provided, use its top position to know where content starts
+            if (this.scrollElement) {
+                const scrollRect = this.scrollElement.getBoundingClientRect();
+                // The top position tells us exactly how much space headers take above it
+                this.containerTopOffset.set(Math.max(0, scrollRect.top));
+                return;
+            }
+            // Fallback: use containerElement
+            if (this.containerElement) {
+                const rect = this.containerElement.getBoundingClientRect();
+                const viewportOffset = Math.max(0, rect.top);
+                // If parentHeaderOffset is manually provided, use it
+                if (this.parentHeaderOffset > 0) {
+                    this.containerTopOffset.set(viewportOffset + this.parentHeaderOffset);
+                    return;
+                }
+                // Otherwise, try to detect all fixed/sticky headers
+                let totalHeaderHeight = 0;
+                const allHeaders = document.querySelectorAll('header, [class*="header"], [class*="navbar"]');
+                allHeaders.forEach(header => {
+                    const htmlHeader = header;
+                    const style = window.getComputedStyle(htmlHeader);
+                    const position = style.position;
+                    if (position === 'fixed' || position === 'sticky') {
+                        const headerRect = htmlHeader.getBoundingClientRect();
+                        if (headerRect.top < 100) {
+                            totalHeaderHeight += headerRect.height;
+                        }
+                    }
+                });
+                this.containerTopOffset.set(viewportOffset + totalHeaderHeight);
+            }
         }
         else {
             this.containerTopOffset.set(0);
@@ -25251,7 +25279,7 @@ class FloatingTocComponent {
     `.trim();
     }
     static { this.ɵfac = function FloatingTocComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FloatingTocComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FloatingTocComponent, selectors: [["symphiq-floating-toc"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded", containerElement: "containerElement" }, decls: 26, vars: 16, consts: [[3, "mouseenter", "mouseleave", "ngClass"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], [1, "flex", "items-center", "justify-between", "mb-4", "pb-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["type", "button", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"], [1, "space-y-1", "overflow-y-auto", "max-h-[60vh]", "pr-2", 3, "ngClass"], [1, "space-y-0.5"], [1, "mt-4", "pt-3", "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 10l7-7m0 0l7 7m-7-7v18"], [1, "text-sm"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "flex-shrink-0"], [1, "truncate", "text-sm", "font-medium"], [1, "ml-6", "space-y-0.5", "mt-1"], ["size", "w-4 h-4", 3, "icon", "ngClass"], ["type", "button", 3, "ngClass"], [1, "truncate", "text-xs"]], template: function FloatingTocComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FloatingTocComponent, selectors: [["symphiq-floating-toc"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded", containerElement: "containerElement", scrollElement: "scrollElement", parentHeaderOffset: "parentHeaderOffset" }, decls: 26, vars: 16, consts: [[3, "mouseenter", "mouseleave", "ngClass"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], [1, "flex", "items-center", "justify-between", "mb-4", "pb-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["type", "button", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"], [1, "space-y-1", "overflow-y-auto", "max-h-[60vh]", "pr-2", 3, "ngClass"], [1, "space-y-0.5"], [1, "mt-4", "pt-3", "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 10l7-7m0 0l7 7m-7-7v18"], [1, "text-sm"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "flex-shrink-0"], [1, "truncate", "text-sm", "font-medium"], [1, "ml-6", "space-y-0.5", "mt-1"], ["size", "w-4 h-4", 3, "icon", "ngClass"], ["type", "button", 3, "ngClass"], [1, "truncate", "text-xs"]], template: function FloatingTocComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("mouseenter", function FloatingTocComponent_Template_div_mouseenter_0_listener() { return ctx.onMouseEnter(); })("mouseleave", function FloatingTocComponent_Template_div_mouseleave_0_listener() { return ctx.onMouseLeave(); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 1);
@@ -25436,6 +25464,10 @@ class FloatingTocComponent {
             type: Input
         }], containerElement: [{
             type: Input
+        }], scrollElement: [{
+            type: Input
+        }], parentHeaderOffset: [{
+            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FloatingTocComponent, { className: "FloatingTocComponent", filePath: "lib/components/business-analysis-dashboard/floating-toc.component.ts", lineNumber: 125 }); })();
 
@@ -49485,7 +49517,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, c
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("sections", ctx_r1.sections())("viewMode", ctx_r1.viewMode)("embedded", ctx_r1.embedded);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("sections", ctx_r1.sections())("viewMode", ctx_r1.viewMode)("embedded", ctx_r1.embedded)("containerElement", dashboardContainer_r9);
+    i0.ɵɵproperty("sections", ctx_r1.sections())("viewMode", ctx_r1.viewMode)("embedded", ctx_r1.embedded)("containerElement", dashboardContainer_r9)("scrollElement", ctx_r1.scrollElement)("parentHeaderOffset", ctx_r1.parentHeaderOffset);
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode)("embedded", ctx_r1.embedded);
 } }
@@ -49517,6 +49549,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.embedded = false;
         this.isLoading = false;
         this.useSampleData = false;
+        this.parentHeaderOffset = 0;
         this.headerScrollService = inject(HeaderScrollService);
         this.lookupService = inject(ProfileItemLookupService);
         this.navigationService = inject(NavigationStateService);
@@ -49909,7 +49942,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", scrollEvent: "scrollEvent", scrollElement: "scrollElement", isLoading: "isLoading", useSampleData: "useSampleData", profile: "profile" }, decls: 19, vars: 19, consts: [["dashboardContainer", ""], [3, "ngClass"], [3, "class"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "relative"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "space-y-8"], [3, "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "justify-between"], [3, "toggle", "viewModeSelected", "currentViewMode", "viewMode"], [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", "gap-2"], [3, "searchClick", "isLightMode"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], [3, "toggle", "viewModeSelected", "currentViewMode", "viewMode", "minimized"], [3, "getStarted", "dismiss", "businessName", "viewMode", "showCta"], [3, "currentStep", "completedSteps", "viewMode"], [3, "profile", "viewMode"], [3, "analyzeFunnel", "exploreMore", "viewMode"], [3, "sections", "viewMode", "embedded"], [3, "sections", "viewMode", "embedded", "containerElement"], [3, "viewMode", "embedded"], [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: { requestedByUser: "requestedByUser", viewMode: "viewMode", embedded: "embedded", scrollEvent: "scrollEvent", scrollElement: "scrollElement", isLoading: "isLoading", useSampleData: "useSampleData", profile: "profile", parentHeaderOffset: "parentHeaderOffset" }, decls: 19, vars: 19, consts: [["dashboardContainer", ""], [3, "ngClass"], [3, "class"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "relative"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "space-y-8"], [3, "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "justify-between"], [3, "toggle", "viewModeSelected", "currentViewMode", "viewMode"], [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", "gap-2"], [3, "searchClick", "isLightMode"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], [3, "toggle", "viewModeSelected", "currentViewMode", "viewMode", "minimized"], [3, "getStarted", "dismiss", "businessName", "viewMode", "showCta"], [3, "currentStep", "completedSteps", "viewMode"], [3, "profile", "viewMode"], [3, "analyzeFunnel", "exploreMore", "viewMode"], [3, "sections", "viewMode", "embedded"], [3, "sections", "viewMode", "embedded", "containerElement", "scrollElement", "parentHeaderOffset"], [3, "viewMode", "embedded"], [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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵconditionalCreate(2, SymphiqBusinessAnalysisDashboardComponent_Conditional_2_Template, 2, 5, "div", 2);
@@ -49919,7 +49952,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             i0.ɵɵelementStart(9, "div", 3);
             i0.ɵɵconditionalCreate(10, SymphiqBusinessAnalysisDashboardComponent_Conditional_10_Template, 9, 6, "header", 4)(11, SymphiqBusinessAnalysisDashboardComponent_Conditional_11_Template, 25, 45, "header", 4);
             i0.ɵɵelementStart(12, "main", 5);
-            i0.ɵɵconditionalCreate(13, SymphiqBusinessAnalysisDashboardComponent_Conditional_13_Template, 6, 11, "div", 6)(14, SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template, 5, 9);
+            i0.ɵɵconditionalCreate(13, SymphiqBusinessAnalysisDashboardComponent_Conditional_13_Template, 6, 11, "div", 6)(14, SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template, 5, 11);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(15, SymphiqBusinessAnalysisDashboardComponent_Conditional_15_Template, 2, 2, "div", 1);
             i0.ɵɵelement(16, "symphiq-tooltip-container")(17, "symphiq-business-analysis-modal", 7);
@@ -50155,6 +50188,8 @@ class SymphiqBusinessAnalysisDashboardComponent {
               [viewMode]="viewMode"
               [embedded]="embedded"
               [containerElement]="dashboardContainer"
+              [scrollElement]="scrollElement"
+              [parentHeaderOffset]="parentHeaderOffset"
             />
 
             <symphiq-floating-back-button
@@ -50204,6 +50239,8 @@ class SymphiqBusinessAnalysisDashboardComponent {
             type: Input
         }], profile: [{
             type: Input
+        }], parentHeaderOffset: [{
+            type: Input
         }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
@@ -50211,7 +50248,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             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: 290 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 292 }); })();
 
 class ScrollProgressBarComponent {
     constructor() {