@eric-emg/symphiq-components 1.2.41 → 1.2.42

package/fesm2022/symphiq-components.mjs

@@ -21670,16 +21670,56 @@ class SymphiqFunnelAnalysisDashboardComponent {
                                 // Store reference for use in scrollToSection and tooltips
                                 this.embeddedScrollContainer = scrollElement;
                                 this.tooltipService.setScrollContainer(scrollElement);
-                                // Check initial scroll position and update header state
-                                const initialScrollTop = scrollElement.scrollTop;
-                                if (initialScrollTop > 50) {
-                                    console.log('[SCROLL DEBUG] Initial scroll position > 50, collapsing header', { initialScrollTop });
-                                    this.isScrolled.set(true);
-                                }
-                                else {
-                                    console.log('[SCROLL DEBUG] Initial scroll position <= 50, expanding header', { initialScrollTop });
-                                    this.isScrolled.set(false);
-                                }
+                                // Helper function to check and update scroll state
+                                const checkInitialScroll = () => {
+                                    const currentScrollTop = scrollElement.scrollTop;
+                                    const scrollHeight = scrollElement.scrollHeight;
+                                    const clientHeight = scrollElement.clientHeight;
+                                    console.log('[SCROLL DEBUG] Checking initial scroll position', {
+                                        scrollTop: currentScrollTop,
+                                        scrollHeight,
+                                        clientHeight,
+                                        shouldCollapse: currentScrollTop > 50
+                                    });
+                                    if (currentScrollTop > 50) {
+                                        console.log('[SCROLL DEBUG] Collapsing header due to scroll position', { currentScrollTop });
+                                        this.isScrolled.set(true);
+                                    }
+                                    else {
+                                        console.log('[SCROLL DEBUG] Expanding header due to scroll position', { currentScrollTop });
+                                        this.isScrolled.set(false);
+                                    }
+                                };
+                                // Use ResizeObserver to detect when content has finished rendering
+                                let lastHeight = scrollElement.scrollHeight;
+                                let stableCount = 0;
+                                const resizeObserver = new ResizeObserver(() => {
+                                    const currentHeight = scrollElement.scrollHeight;
+                                    console.log('[SCROLL DEBUG] Content height changed', {
+                                        lastHeight,
+                                        currentHeight,
+                                        stableCount
+                                    });
+                                    if (currentHeight === lastHeight) {
+                                        stableCount++;
+                                        // Height has been stable for 2 consecutive observations
+                                        if (stableCount >= 2) {
+                                            console.log('[SCROLL DEBUG] Content height stabilized, checking scroll position');
+                                            checkInitialScroll();
+                                            resizeObserver.disconnect();
+                                        }
+                                    }
+                                    else {
+                                        stableCount = 0;
+                                        lastHeight = currentHeight;
+                                        // Check on each significant height change
+                                        checkInitialScroll();
+                                    }
+                                });
+                                // Observe the scroll element for size changes
+                                resizeObserver.observe(scrollElement);
+                                // Also check immediately
+                                checkInitialScroll();
                                 // Attach scroll listeners
                                 scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
                                 ionContent.addEventListener('ionScroll', () => this.onContainerScroll(scrollElement), { passive: true });
@@ -21706,12 +21746,48 @@ class SymphiqFunnelAnalysisDashboardComponent {
                             });
                             this.embeddedScrollContainer = element;
                             this.tooltipService.setScrollContainer(element);
-                            // Check initial scroll position
-                            const initialScrollTop = element.scrollTop;
-                            if (initialScrollTop > 50) {
-                                console.log('[SCROLL DEBUG] Initial scroll position > 50, collapsing header', { initialScrollTop });
-                                this.isScrolled.set(true);
-                            }
+                            // Helper function to check and update scroll state
+                            const checkInitialScroll = () => {
+                                const currentScrollTop = element.scrollTop;
+                                console.log('[SCROLL DEBUG] Checking initial scroll position (fallback)', {
+                                    scrollTop: currentScrollTop,
+                                    shouldCollapse: currentScrollTop > 50
+                                });
+                                if (currentScrollTop > 50) {
+                                    console.log('[SCROLL DEBUG] Collapsing header due to scroll position', { currentScrollTop });
+                                    this.isScrolled.set(true);
+                                }
+                                else {
+                                    console.log('[SCROLL DEBUG] Expanding header due to scroll position', { currentScrollTop });
+                                    this.isScrolled.set(false);
+                                }
+                            };
+                            // Use ResizeObserver to detect when content has finished rendering
+                            let lastHeight = element.scrollHeight;
+                            let stableCount = 0;
+                            const resizeObserver = new ResizeObserver(() => {
+                                const currentHeight = element.scrollHeight;
+                                console.log('[SCROLL DEBUG] Content height changed (fallback)', {
+                                    lastHeight,
+                                    currentHeight,
+                                    stableCount
+                                });
+                                if (currentHeight === lastHeight) {
+                                    stableCount++;
+                                    if (stableCount >= 2) {
+                                        console.log('[SCROLL DEBUG] Content height stabilized (fallback), checking scroll position');
+                                        checkInitialScroll();
+                                        resizeObserver.disconnect();
+                                    }
+                                }
+                                else {
+                                    stableCount = 0;
+                                    lastHeight = currentHeight;
+                                    checkInitialScroll();
+                                }
+                            });
+                            resizeObserver.observe(element);
+                            checkInitialScroll();
                             element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
                             return true;
                         }
@@ -21723,12 +21799,48 @@ class SymphiqFunnelAnalysisDashboardComponent {
                         });
                         this.embeddedScrollContainer = element;
                         this.tooltipService.setScrollContainer(element);
-                        // Check initial scroll position
-                        const initialScrollTop = element.scrollTop;
-                        if (initialScrollTop > 50) {
-                            console.log('[SCROLL DEBUG] Initial scroll position > 50, collapsing header', { initialScrollTop });
-                            this.isScrolled.set(true);
-                        }
+                        // Helper function to check and update scroll state
+                        const checkInitialScroll = () => {
+                            const currentScrollTop = element.scrollTop;
+                            console.log('[SCROLL DEBUG] Checking initial scroll position (regular)', {
+                                scrollTop: currentScrollTop,
+                                shouldCollapse: currentScrollTop > 50
+                            });
+                            if (currentScrollTop > 50) {
+                                console.log('[SCROLL DEBUG] Collapsing header due to scroll position', { currentScrollTop });
+                                this.isScrolled.set(true);
+                            }
+                            else {
+                                console.log('[SCROLL DEBUG] Expanding header due to scroll position', { currentScrollTop });
+                                this.isScrolled.set(false);
+                            }
+                        };
+                        // Use ResizeObserver to detect when content has finished rendering
+                        let lastHeight = element.scrollHeight;
+                        let stableCount = 0;
+                        const resizeObserver = new ResizeObserver(() => {
+                            const currentHeight = element.scrollHeight;
+                            console.log('[SCROLL DEBUG] Content height changed (regular)', {
+                                lastHeight,
+                                currentHeight,
+                                stableCount
+                            });
+                            if (currentHeight === lastHeight) {
+                                stableCount++;
+                                if (stableCount >= 2) {
+                                    console.log('[SCROLL DEBUG] Content height stabilized (regular), checking scroll position');
+                                    checkInitialScroll();
+                                    resizeObserver.disconnect();
+                                }
+                            }
+                            else {
+                                stableCount = 0;
+                                lastHeight = currentHeight;
+                                checkInitialScroll();
+                            }
+                        });
+                        resizeObserver.observe(element);
+                        checkInitialScroll();
                         element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
                         return true;
                     }
@@ -23687,12 +23799,14 @@ class SymphiqFunnelAnalysisPreviewComponent {
         this.analysisInput = input(undefined, ...(ngDevMode ? [{ debugName: "analysisInput", alias: 'funnelAnalysis' }] : [{ alias: 'funnelAnalysis' }]));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.useSampleData = input(false, ...(ngDevMode ? [{ debugName: "useSampleData" }] : []));
+        this.scrollContainerId = input(undefined, ...(ngDevMode ? [{ debugName: "scrollContainerId" }] : []));
         // Computed theme
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         // Outputs
         this.onViewAnalysis = output();
         // Services
         this.tooltipDataService = inject(TooltipDataService);
+        this.tooltipService = inject(TooltipService);
         this.competitiveScoreService = inject(CompetitiveScoreService);
         // Analysis data - use sample data if useSampleData is true, otherwise use provided data
         this.analysisData = computed(() => {
@@ -23902,6 +24016,60 @@ class SymphiqFunnelAnalysisPreviewComponent {
         }, ...(ngDevMode ? [{ debugName: "statusIconClass" }] : []));
         this.insightsCardClass = computed(() => getInsightsCardClasses(this.viewMode()), ...(ngDevMode ? [{ debugName: "insightsCardClass" }] : []));
         this.insightsBadgeClass = computed(() => getInsightsBadgeClasses(this.viewMode()), ...(ngDevMode ? [{ debugName: "insightsBadgeClass" }] : []));
+        // Set up scroll container for tooltips when scrollContainerId changes
+        effect(() => {
+            const containerId = this.scrollContainerId();
+            if (containerId) {
+                const setupTooltipScrollContainer = () => {
+                    const element = document.getElementById(containerId);
+                    if (!element) {
+                        return false;
+                    }
+                    // Check if this is an Ionic ion-content element
+                    if (element.tagName.toLowerCase() === 'ion-content') {
+                        const ionContent = element;
+                        // Get the scrollable element from Ionic
+                        if (typeof ionContent.getScrollElement === 'function') {
+                            ionContent.getScrollElement().then((scrollElement) => {
+                                this.tooltipService.setScrollContainer(scrollElement);
+                            }).catch((error) => {
+                                console.error('Error getting Ionic scroll element for tooltips:', error);
+                            });
+                            return true;
+                        }
+                        else {
+                            // Fallback for older Ionic versions
+                            this.tooltipService.setScrollContainer(element);
+                            return true;
+                        }
+                    }
+                    else {
+                        // Regular HTML element
+                        this.tooltipService.setScrollContainer(element);
+                        return true;
+                    }
+                };
+                // Try to set up immediately
+                if (!setupTooltipScrollContainer()) {
+                    // If not found, retry with delays (element might not be in DOM yet)
+                    let retries = 0;
+                    const maxRetries = 10;
+                    const retryInterval = setInterval(() => {
+                        retries++;
+                        if (setupTooltipScrollContainer() || retries >= maxRetries) {
+                            clearInterval(retryInterval);
+                            if (retries >= maxRetries) {
+                                console.warn(`Tooltip scroll container with id "${containerId}" not found after ${maxRetries} retries.`);
+                            }
+                        }
+                    }, 100);
+                }
+            }
+            else {
+                // No scroll container specified, reset to null (use window)
+                this.tooltipService.setScrollContainer(null);
+            }
+        });
     }
     // Helper methods for metrics
     metricMiniCardClass(metric) {
@@ -24014,7 +24182,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
         this.onViewAnalysis.emit();
     }
     static { this.ɵfac = function SymphiqFunnelAnalysisPreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisPreviewComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"], useSampleData: [1, "useSampleData"] }, outputs: { onViewAnalysis: "onViewAnalysis" }, decls: 34, vars: 40, consts: [[1, "w-full", "sm:max-w-md", "rounded-xl", "border", "shadow-lg", "backdrop-blur-lg", "transition-all", "duration-300", "sm:hover:shadow-xl", "sm:hover:scale-[1.01]", "overflow-hidden"], [1, "px-3", "py-2", "sm:px-4", "sm:py-3", "border-b", "flex", "items-center", "justify-between", "gap-2", "sm:gap-3"], [1, "flex-1", "min-w-0"], [1, "text-sm", "font-bold", "truncate"], [1, "text-xs", "truncate", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2", "flex-shrink-0"], ["tooltipType", "badge", 1, "px-2", "py-1", "rounded", "text-center", "min-w-[44px]", "min-h-[44px]", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-lg", "font-bold"], [1, "p-3", "sm:p-4", "space-y-2.5", "sm:space-y-3"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "grid", "grid-cols-2", "gap-1.5", "sm:gap-2"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2"], [1, "text-lg"], [1, "text-xs", "sm:text-sm", "font-bold"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "class", "animate-pulse", "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "narrative", 1, "text-xs", "leading-relaxed", "line-clamp-3", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "px-3", "py-1.5", "sm:px-4", "sm:py-2", "border-t"], [1, "w-full", "py-2.5", "sm:py-2", "rounded-lg", "font-semibold", "text-xs", "transition-all", "duration-300", "sm:hover:scale-105", "active:scale-[0.98]", "flex", "items-center", "justify-center", "gap-2", "group", "cursor-pointer", "min-h-[44px]", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "transition-transform", "duration-300", "group-hover:translate-x-1"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "sm:w-4", "sm:h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold"], ["tooltipType", "status", 1, "px-2", "py-1", "rounded", "text-xs", "font-bold", "flex", "items-center", "gap-1", "relative", "z-10", "min-h-[32px]", 3, "mouseenter", "mouseleave", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-baseline", "justify-between"], [1, "text-lg", "sm:text-xl", "font-bold"], [1, "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "justify-between", "mb-1"], [1, "text-xs", "font-medium", "truncate", "flex-1"], [1, "w-2", "h-2", "rounded-full", "flex-shrink-0"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], ["tooltipType", "insightsList", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"]], template: function SymphiqFunnelAnalysisPreviewComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"], useSampleData: [1, "useSampleData"], scrollContainerId: [1, "scrollContainerId"] }, outputs: { onViewAnalysis: "onViewAnalysis" }, decls: 34, vars: 40, consts: [[1, "w-full", "sm:max-w-md", "rounded-xl", "border", "shadow-lg", "backdrop-blur-lg", "transition-all", "duration-300", "sm:hover:shadow-xl", "sm:hover:scale-[1.01]", "overflow-hidden"], [1, "px-3", "py-2", "sm:px-4", "sm:py-3", "border-b", "flex", "items-center", "justify-between", "gap-2", "sm:gap-3"], [1, "flex-1", "min-w-0"], [1, "text-sm", "font-bold", "truncate"], [1, "text-xs", "truncate", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2", "flex-shrink-0"], ["tooltipType", "badge", 1, "px-2", "py-1", "rounded", "text-center", "min-w-[44px]", "min-h-[44px]", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-lg", "font-bold"], [1, "p-3", "sm:p-4", "space-y-2.5", "sm:space-y-3"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "grid", "grid-cols-2", "gap-1.5", "sm:gap-2"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2"], [1, "text-lg"], [1, "text-xs", "sm:text-sm", "font-bold"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "class", "animate-pulse", "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "narrative", 1, "text-xs", "leading-relaxed", "line-clamp-3", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "px-3", "py-1.5", "sm:px-4", "sm:py-2", "border-t"], [1, "w-full", "py-2.5", "sm:py-2", "rounded-lg", "font-semibold", "text-xs", "transition-all", "duration-300", "sm:hover:scale-105", "active:scale-[0.98]", "flex", "items-center", "justify-center", "gap-2", "group", "cursor-pointer", "min-h-[44px]", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "transition-transform", "duration-300", "group-hover:translate-x-1"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "sm:w-4", "sm:h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold"], ["tooltipType", "status", 1, "px-2", "py-1", "rounded", "text-xs", "font-bold", "flex", "items-center", "gap-1", "relative", "z-10", "min-h-[32px]", 3, "mouseenter", "mouseleave", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-baseline", "justify-between"], [1, "text-lg", "sm:text-xl", "font-bold"], [1, "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "justify-between", "mb-1"], [1, "text-xs", "font-medium", "truncate", "flex-1"], [1, "w-2", "h-2", "rounded-full", "flex-shrink-0"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], ["tooltipType", "insightsList", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"]], template: function SymphiqFunnelAnalysisPreviewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
             i0.ɵɵtext(4, "Funnel Analysis");
             i0.ɵɵelementEnd();
@@ -24276,8 +24444,8 @@ class SymphiqFunnelAnalysisPreviewComponent {
     <!-- Tooltip Container -->
     <symphiq-tooltip-container />
   `, styles: ["@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.6}}.status-pulse{animation:statusPulse 2s ease-in-out infinite}\n"] }]
-    }], null, { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 214 }); })();
+    }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 216 }); })();
 
 const _c0$3 = ["chartdiv"];
 class LineChartComponent {