@eric-emg/symphiq-components 1.2.52 → 1.2.53

package/fesm2022/symphiq-components.mjs

@@ -21639,6 +21639,15 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 console.log('[SCROLL v7] Skipping - programmatic scroll in progress');
                 return;
             }
+            // Get the scrollable element once for all features
+            const scrollContainerId = this.scrollContainerId();
+            let scrollElement = null;
+            if (scrollContainerId) {
+                const ionContent = document.getElementById(scrollContainerId);
+                if (ionContent?.shadowRoot) {
+                    scrollElement = ionContent.shadowRoot.querySelector('.inner-scroll');
+                }
+            }
             // ========================================
             // FEATURE 1: Header Collapse/Expand
             // ========================================
@@ -21664,11 +21673,9 @@ class SymphiqFunnelAnalysisDashboardComponent {
             // ========================================
             // FEATURE 2: Progress Bar Calculation
             // ========================================
-            // Calculate scroll progress using the scroll event target element
-            if (scrollEvent.target) {
-                const target = scrollEvent.target;
-                const scrollHeight = target.scrollHeight || 0;
-                const clientHeight = target.clientHeight || 0;
+            if (scrollElement) {
+                const scrollHeight = scrollElement.scrollHeight || 0;
+                const clientHeight = scrollElement.clientHeight || 0;
                 const maxScroll = scrollHeight - clientHeight;
                 if (maxScroll > 0) {
                     const progress = (scrollTop / maxScroll) * 100;
@@ -21686,58 +21693,50 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 }
             }
             else {
-                console.log('[SCROLL v7] Cannot calculate progress - no target element');
+                console.log('[SCROLL v7] Cannot calculate progress - no scroll element found');
             }
             // ========================================
             // FEATURE 3: Navigation Dots Active Section
             // ========================================
-            // Determine which section is currently visible based on scroll position
-            const scrollContainerId = this.scrollContainerId();
-            if (scrollContainerId) {
-                const ionContent = document.getElementById(scrollContainerId);
-                if (ionContent) {
-                    const scrollElement = ionContent.shadowRoot?.querySelector('.inner-scroll');
-                    if (scrollElement) {
-                        // Get all section elements
-                        const sectionMap = [
-                            { id: 'overview', elementId: 'overall-section' },
-                            { id: 'insights', elementId: 'insights-section' },
-                            { id: 'metrics', elementId: 'metrics-section' },
-                            { id: 'breakdowns', elementId: 'breakdowns-section' },
-                            { id: 'competitive', elementId: 'competitive-section' }
-                        ];
-                        // Find the section that's most visible in the viewport
-                        let activeSection = 'overview'; // default
-                        const viewportHeight = scrollElement.clientHeight;
-                        const viewportTop = scrollTop;
-                        const viewportBottom = viewportTop + viewportHeight;
-                        const viewportCenter = viewportTop + (viewportHeight / 2);
-                        for (const section of sectionMap) {
-                            const element = scrollElement.querySelector(`#${section.elementId}`);
-                            if (element) {
-                                const elementTop = element.offsetTop;
-                                const elementBottom = elementTop + element.offsetHeight;
-                                // Check if the section's center is in the upper half of the viewport
-                                // This provides better UX for navigation dot highlighting
-                                const elementCenter = elementTop + (element.offsetHeight / 2);
-                                if (elementTop <= viewportCenter && elementBottom >= viewportTop) {
-                                    activeSection = section.id;
-                                    // Don't break - continue to find the best match
-                                }
-                            }
-                        }
-                        const previousActiveSection = this.activeNavSection();
-                        if (previousActiveSection !== activeSection) {
-                            this.activeNavSection.set(activeSection);
-                            console.log('[SCROLL v7] ✓ Active nav section updated', {
-                                from: previousActiveSection,
-                                to: activeSection,
-                                scrollTop,
-                                viewportCenter
-                            });
+            if (scrollElement) {
+                // Get all section elements
+                const sectionMap = [
+                    { id: 'overview', elementId: 'overall-section' },
+                    { id: 'insights', elementId: 'insights-section' },
+                    { id: 'metrics', elementId: 'metrics-section' },
+                    { id: 'breakdowns', elementId: 'breakdowns-section' },
+                    { id: 'competitive', elementId: 'competitive-section' }
+                ];
+                // Find the section that's most visible in the viewport
+                let activeSection = 'overview'; // default
+                const viewportHeight = scrollElement.clientHeight;
+                const viewportTop = scrollTop;
+                const viewportBottom = viewportTop + viewportHeight;
+                const viewportCenter = viewportTop + (viewportHeight / 2);
+                for (const section of sectionMap) {
+                    const element = scrollElement.querySelector(`#${section.elementId}`);
+                    if (element) {
+                        const elementTop = element.offsetTop;
+                        const elementBottom = elementTop + element.offsetHeight;
+                        // Check if the section's center is in the upper half of the viewport
+                        // This provides better UX for navigation dot highlighting
+                        const elementCenter = elementTop + (element.offsetHeight / 2);
+                        if (elementTop <= viewportCenter && elementBottom >= viewportTop) {
+                            activeSection = section.id;
+                            // Don't break - continue to find the best match
                         }
                     }
                 }
+                const previousActiveSection = this.activeNavSection();
+                if (previousActiveSection !== activeSection) {
+                    this.activeNavSection.set(activeSection);
+                    console.log('[SCROLL v7] ✓ Active nav section updated', {
+                        from: previousActiveSection,
+                        to: activeSection,
+                        scrollTop,
+                        viewportCenter
+                    });
+                }
             }
         });
         // Manage loading state with minimum display time