@eric-emg/symphiq-components 1.2.45 → 1.2.47

package/fesm2022/symphiq-components.mjs

@@ -21425,11 +21425,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }, ...(ngDevMode ? [{ debugName: "chartsById" }] : []));
         // Pre-computed styling classes
         this.headerClass = computed(() => {
-            const scrolled = this.isScrolled();
-            const baseClass = scrolled
-                ? (this.isLightMode() ? 'bg-white/95 backdrop-blur-xl border-b border-slate-300 shadow-lg' : 'bg-slate-900/95 backdrop-blur-xl border-b border-slate-700 shadow-2xl')
-                : (this.isLightMode() ? 'bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm' : 'bg-slate-900/80 backdrop-blur-md border-b border-slate-800 shadow-lg');
-            return `${baseClass} transition-all duration-300`;
+            return 'bg-transparent transition-all duration-300';
         }, ...(ngDevMode ? [{ debugName: "headerClass" }] : []));
         this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
         this.headerSubtitleClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-400', ...(ngDevMode ? [{ debugName: "headerSubtitleClass" }] : []));
@@ -21632,27 +21628,23 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // Manage overall assessment loading state during view mode transitions
     }
     ngAfterViewInit() {
-        console.log('[DASHBOARD v5] ngAfterViewInit called', {
-            embedded: this.embedded(),
-            scrollContainerId: this.scrollContainerId(),
-            isScrolled: this.isScrolled(),
-            viewMode: this.viewMode()
-        });
+        console.log('[DASHBOARD v6] ngAfterViewInit - event-driven scroll approach');
         // Ensure modal has data after view is initialized
         if (this.modalComponent) {
             this.modalComponent.setMetricsAndInsights(this.allMetrics(), this.insights(), this.allCharts());
         }
-        // Set up container scroll listener when in embedded mode
+        // v6 - Pure event-driven scroll detection
+        // No initial state checking, no timeouts, no ResizeObserver
+        // Header state only updates on actual scroll events
         if (this.embedded()) {
             let container = null;
-            // If a scroll container ID is provided, use that element
             if (this.scrollContainerId()) {
                 const setupScrollContainer = () => {
                     const element = document.getElementById(this.scrollContainerId());
-                    console.log('[SCROLL DEBUG v2] setupScrollContainer attempt', {
+                    console.log('[SCROLL v6] Setup attempt', {
                         scrollContainerId: this.scrollContainerId(),
-                        elementFound: !!element,
-                        elementTag: element?.tagName
+                        found: !!element,
+                        tag: element?.tagName
                     });
                     if (!element) {
                         return false;
@@ -21660,104 +21652,16 @@ class SymphiqFunnelAnalysisDashboardComponent {
                     // 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) => {
-                                console.log('[SCROLL DEBUG v2] Ionic scroll element found', {
-                                    scrollTop: scrollElement.scrollTop,
-                                    scrollHeight: scrollElement.scrollHeight,
-                                    clientHeight: scrollElement.clientHeight
-                                });
-                                // Store reference for use in scrollToSection and tooltips
+                                console.log('[SCROLL v6] Ionic scroll element ready - attaching listeners');
+                                // Store reference for tooltips and programmatic scrolling
                                 this.embeddedScrollContainer = scrollElement;
                                 this.tooltipService.setScrollContainer(scrollElement);
-                                // 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 v5] Checking initial scroll position', {
-                                        scrollTop: currentScrollTop,
-                                        scrollHeight,
-                                        clientHeight,
-                                        shouldCollapse: currentScrollTop > 50
-                                    });
-                                    // Only make a decision if we have substantial content
-                                    if (scrollHeight < 500) {
-                                        console.log('[SCROLL DEBUG v5] Content too small, skipping check');
-                                        return;
-                                    }
-                                    if (currentScrollTop > 50) {
-                                        console.log('[SCROLL DEBUG v5] Collapsing header due to scroll position', { currentScrollTop });
-                                        this.isScrolled.set(true);
-                                    }
-                                    else {
-                                        console.log('[SCROLL DEBUG v5] Expanding header due to scroll position', { currentScrollTop });
-                                        this.isScrolled.set(false);
-                                    }
-                                };
-                                // Use ResizeObserver to detect when content has finished rendering
-                                // Only check scroll position once content has substantial height
-                                const MIN_CONTENT_HEIGHT = 500; // Content should be at least this tall before we check scroll
-                                let lastHeight = scrollElement.scrollHeight;
-                                let stableCount = 0;
-                                let scrollCheckTimeout = null;
-                                const resizeObserver = new ResizeObserver(() => {
-                                    const currentHeight = scrollElement.scrollHeight;
-                                    console.log('[SCROLL DEBUG v5] Content height changed', {
-                                        lastHeight,
-                                        currentHeight,
-                                        stableCount,
-                                        minHeightReached: currentHeight >= MIN_CONTENT_HEIGHT
-                                    });
-                                    // Clear any pending scroll check
-                                    if (scrollCheckTimeout) {
-                                        clearTimeout(scrollCheckTimeout);
-                                    }
-                                    // Only start checking when we have substantial content
-                                    if (currentHeight >= MIN_CONTENT_HEIGHT) {
-                                        if (currentHeight === lastHeight) {
-                                            stableCount++;
-                                            // Height has been stable for 2 consecutive observations
-                                            if (stableCount >= 2) {
-                                                console.log('[SCROLL DEBUG v5] Content height stabilized, scheduling scroll check');
-                                                // Wait longer for Ionic to restore scroll position
-                                                scrollCheckTimeout = setTimeout(() => {
-                                                    console.log('[SCROLL DEBUG v5] Performing delayed scroll check after stabilization');
-                                                    checkInitialScroll();
-                                                }, 150);
-                                                resizeObserver.disconnect();
-                                            }
-                                        }
-                                        else {
-                                            stableCount = 0;
-                                            lastHeight = currentHeight;
-                                            // Schedule a check after height change
-                                            scrollCheckTimeout = setTimeout(() => {
-                                                console.log('[SCROLL DEBUG v5] Checking scroll after height change');
-                                                checkInitialScroll();
-                                            }, 100);
-                                        }
-                                    }
-                                    else {
-                                        // Reset tracking if height drops below threshold (component being destroyed)
-                                        stableCount = 0;
-                                        lastHeight = currentHeight;
-                                    }
-                                });
-                                // Observe the scroll element for size changes
-                                resizeObserver.observe(scrollElement);
-                                // Check immediately if we already have content, but allow time for scroll restoration
-                                if (scrollElement.scrollHeight >= MIN_CONTENT_HEIGHT) {
-                                    scrollCheckTimeout = setTimeout(() => {
-                                        console.log('[SCROLL DEBUG v5] Initial scroll check after delay');
-                                        checkInitialScroll();
-                                    }, 200);
-                                }
-                                // Attach scroll listeners
+                                // v6 - Attach scroll event listeners
                                 scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
                                 ionContent.addEventListener('ionScroll', () => this.onContainerScroll(scrollElement), { passive: true });
-                                // Polling fallback for reliable scroll detection
+                                // Add polling as fallback since Ionic scroll events can be unreliable
                                 let lastScrollTop = 0;
                                 const pollScroll = () => {
                                     const currentScrollTop = scrollElement.scrollTop;
@@ -21768,140 +21672,33 @@ class SymphiqFunnelAnalysisDashboardComponent {
                                     requestAnimationFrame(pollScroll);
                                 };
                                 requestAnimationFrame(pollScroll);
+                                console.log('[SCROLL v6] Event listeners and polling attached');
                             }).catch((error) => {
-                                console.error('Error getting Ionic scroll element:', error);
+                                console.error('[SCROLL v6] Error getting Ionic scroll element:', error);
                             });
                             return true;
                         }
                         else {
                             // Fallback for older Ionic versions
-                            console.log('[SCROLL DEBUG v2] Using fallback for older Ionic', {
-                                scrollTop: element.scrollTop
-                            });
+                            console.log('[SCROLL v6] Using fallback for older Ionic');
                             this.embeddedScrollContainer = element;
                             this.tooltipService.setScrollContainer(element);
-                            // Helper function to check and update scroll state
-                            const checkInitialScroll = () => {
-                                const currentScrollTop = element.scrollTop;
-                                console.log('[SCROLL DEBUG v2] Checking initial scroll position (fallback)', {
-                                    scrollTop: currentScrollTop,
-                                    shouldCollapse: currentScrollTop > 50
-                                });
-                                if (currentScrollTop > 50) {
-                                    console.log('[SCROLL DEBUG v2] Collapsing header due to scroll position', { currentScrollTop });
-                                    this.isScrolled.set(true);
-                                }
-                                else {
-                                    console.log('[SCROLL DEBUG v2] Expanding header due to scroll position', { currentScrollTop });
-                                    this.isScrolled.set(false);
-                                }
-                            };
-                            // Use ResizeObserver to detect when content has finished rendering
-                            const MIN_CONTENT_HEIGHT = 500;
-                            let lastHeight = element.scrollHeight;
-                            let stableCount = 0;
-                            const resizeObserver = new ResizeObserver(() => {
-                                const currentHeight = element.scrollHeight;
-                                console.log('[SCROLL DEBUG v2] Content height changed (fallback)', {
-                                    lastHeight,
-                                    currentHeight,
-                                    stableCount,
-                                    minHeightReached: currentHeight >= MIN_CONTENT_HEIGHT
-                                });
-                                if (currentHeight >= MIN_CONTENT_HEIGHT) {
-                                    if (currentHeight === lastHeight) {
-                                        stableCount++;
-                                        if (stableCount >= 2) {
-                                            console.log('[SCROLL DEBUG v2] Content height stabilized (fallback), checking scroll position');
-                                            checkInitialScroll();
-                                            resizeObserver.disconnect();
-                                        }
-                                    }
-                                    else {
-                                        stableCount = 0;
-                                        lastHeight = currentHeight;
-                                        checkInitialScroll();
-                                    }
-                                }
-                                else {
-                                    stableCount = 0;
-                                    lastHeight = currentHeight;
-                                }
-                            });
-                            resizeObserver.observe(element);
-                            if (element.scrollHeight >= MIN_CONTENT_HEIGHT) {
-                                checkInitialScroll();
-                            }
                             element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
                             return true;
                         }
                     }
                     else {
                         // Regular HTML element
-                        console.log('[SCROLL DEBUG v2] Regular HTML element setup', {
-                            scrollTop: element.scrollTop
-                        });
+                        console.log('[SCROLL v6] Regular HTML element');
                         this.embeddedScrollContainer = element;
                         this.tooltipService.setScrollContainer(element);
-                        // Helper function to check and update scroll state
-                        const checkInitialScroll = () => {
-                            const currentScrollTop = element.scrollTop;
-                            console.log('[SCROLL DEBUG v2] Checking initial scroll position (regular)', {
-                                scrollTop: currentScrollTop,
-                                shouldCollapse: currentScrollTop > 50
-                            });
-                            if (currentScrollTop > 50) {
-                                console.log('[SCROLL DEBUG v2] Collapsing header due to scroll position', { currentScrollTop });
-                                this.isScrolled.set(true);
-                            }
-                            else {
-                                console.log('[SCROLL DEBUG v2] Expanding header due to scroll position', { currentScrollTop });
-                                this.isScrolled.set(false);
-                            }
-                        };
-                        // Use ResizeObserver to detect when content has finished rendering
-                        const MIN_CONTENT_HEIGHT = 500;
-                        let lastHeight = element.scrollHeight;
-                        let stableCount = 0;
-                        const resizeObserver = new ResizeObserver(() => {
-                            const currentHeight = element.scrollHeight;
-                            console.log('[SCROLL DEBUG v2] Content height changed (regular)', {
-                                lastHeight,
-                                currentHeight,
-                                stableCount,
-                                minHeightReached: currentHeight >= MIN_CONTENT_HEIGHT
-                            });
-                            if (currentHeight >= MIN_CONTENT_HEIGHT) {
-                                if (currentHeight === lastHeight) {
-                                    stableCount++;
-                                    if (stableCount >= 2) {
-                                        console.log('[SCROLL DEBUG v2] Content height stabilized (regular), checking scroll position');
-                                        checkInitialScroll();
-                                        resizeObserver.disconnect();
-                                    }
-                                }
-                                else {
-                                    stableCount = 0;
-                                    lastHeight = currentHeight;
-                                    checkInitialScroll();
-                                }
-                            }
-                            else {
-                                stableCount = 0;
-                                lastHeight = currentHeight;
-                            }
-                        });
-                        resizeObserver.observe(element);
-                        if (element.scrollHeight >= MIN_CONTENT_HEIGHT) {
-                            checkInitialScroll();
-                        }
                         element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
                         return true;
                     }
                 };
                 // Try to set up immediately
                 if (!setupScrollContainer()) {
-                    // If not found, retry with delays (element might not be in DOM yet)
+                    // Retry if element not found yet
                     let retries = 0;
                     const maxRetries = 10;
                     const retryInterval = setInterval(() => {
@@ -21909,7 +21706,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
                         if (setupScrollContainer() || retries >= maxRetries) {
                             clearInterval(retryInterval);
                             if (retries >= maxRetries) {
-                                console.warn(`Scroll container with id "${this.scrollContainerId()}" not found after ${maxRetries} retries.`);
+                                console.warn(`[SCROLL v6] Container "${this.scrollContainerId()}" not found after ${maxRetries} retries`);
                             }
                         }
                     }, 100);
@@ -22134,11 +21931,9 @@ class SymphiqFunnelAnalysisDashboardComponent {
             return;
         }
         const scrollPosition = container.scrollTop;
-        console.log('[SCROLL DEBUG] onContainerScroll', {
+        console.log('[SCROLL v6] onContainerScroll', {
             scrollPosition,
-            isScrolled: this.isScrolled(),
-            isProgrammaticScroll: this.isProgrammaticScroll,
-            lastScrollPosition: this.lastScrollPosition
+            currentState: this.isScrolled()
         });
         // Update scroll progress for smooth bar animation
         const containerHeight = container.clientHeight;
@@ -22146,39 +21941,23 @@ class SymphiqFunnelAnalysisDashboardComponent {
         const maxScroll = scrollHeight - containerHeight;
         const progress = maxScroll > 0 ? (scrollPosition / maxScroll) * 100 : 0;
         this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
-        // Skip header state updates during programmatic scrolling or cooldown
+        // Skip header state updates during programmatic scrolling
         if (this.isProgrammaticScroll) {
-            console.log('[SCROLL DEBUG] Skipping - programmatic scroll');
+            console.log('[SCROLL v6] Skipping - programmatic scroll');
             return;
         }
-        const now = Date.now();
-        const timeSinceLastChange = now - this.lastStateChangeTime;
-        if (timeSinceLastChange < this.STATE_CHANGE_COOLDOWN) {
-            console.log('[SCROLL DEBUG] Skipping - within cooldown', { timeSinceLastChange });
-            return;
-        }
-        if (this.scrollTimeout) {
-            clearTimeout(this.scrollTimeout);
-        }
-        // Use hysteresis to prevent bounce
+        // v6 - Simple threshold-based state changes with hysteresis
         const COLLAPSE_THRESHOLD = 50;
         const EXPAND_THRESHOLD = 30;
         const currentState = this.isScrolled();
-        let newState = currentState;
         if (!currentState && scrollPosition > COLLAPSE_THRESHOLD) {
-            newState = true;
-            console.log('[SCROLL DEBUG] Should collapse header', { scrollPosition, COLLAPSE_THRESHOLD });
+            console.log('[SCROLL v6] Collapsing header', { scrollPosition });
+            this.isScrolled.set(true);
         }
         else if (currentState && scrollPosition < EXPAND_THRESHOLD) {
-            newState = false;
-            console.log('[SCROLL DEBUG] Should expand header', { scrollPosition, EXPAND_THRESHOLD });
-        }
-        if (newState !== currentState) {
-            console.log('[SCROLL DEBUG] Changing header state', { from: currentState, to: newState });
-            this.isScrolled.set(newState);
-            this.lastStateChangeTime = Date.now();
+            console.log('[SCROLL v6] Expanding header', { scrollPosition });
+            this.isScrolled.set(false);
         }
-        this.lastScrollPosition = scrollPosition;
     }
     onScroll() {
         if (this.embedded()) {