@eric-emg/symphiq-components 1.2.50 → 1.2.52

package/fesm2022/symphiq-components.mjs

@@ -21601,33 +21601,33 @@ class SymphiqFunnelAnalysisDashboardComponent {
         effect(() => {
             this.searchService.setData(this.allMetrics(), this.insights(), this.allBreakdowns());
         });
-        // Handle scroll events from parent
+        // Handle scroll events from parent - unified scroll event handler for ALL features
         effect(() => {
             const scrollEvent = this.scrollEvent();
             const isEmbedded = this.embedded();
-            console.log('[SCROLL v6] Effect triggered', {
+            console.log('[SCROLL v7] Effect triggered', {
                 hasScrollEvent: !!scrollEvent,
                 isEmbedded,
                 scrollEventType: scrollEvent?.type,
                 scrollEventDetail: scrollEvent?.detail
             });
             if (!scrollEvent) {
-                console.log('[SCROLL v6] No scroll event provided');
+                console.log('[SCROLL v7] No scroll event provided');
                 return;
             }
             if (!isEmbedded) {
-                console.log('[SCROLL v6] Not in embedded mode, ignoring scroll event');
+                console.log('[SCROLL v7] Not in embedded mode, ignoring scroll event');
                 return;
             }
             const detail = scrollEvent.detail;
             if (!detail) {
-                console.log('[SCROLL v6] No detail in scroll event');
+                console.log('[SCROLL v7] No detail in scroll event');
                 return;
             }
             const scrollTop = detail.scrollTop || 0;
             const scrollLeft = detail.scrollLeft || 0;
             const isScrolling = detail.isScrolling;
-            console.log('[SCROLL v6] Processing scroll event', {
+            console.log('[SCROLL v7] Processing scroll event', {
                 scrollTop,
                 scrollLeft,
                 isScrolling,
@@ -21636,29 +21636,109 @@ class SymphiqFunnelAnalysisDashboardComponent {
             });
             // Skip during programmatic scrolling
             if (this.isProgrammaticScroll) {
-                console.log('[SCROLL v6] Skipping - programmatic scroll in progress');
+                console.log('[SCROLL v7] Skipping - programmatic scroll in progress');
                 return;
             }
-            // Simple threshold-based state changes with hysteresis
-            const COLLAPSE_THRESHOLD = 50;
-            const EXPAND_THRESHOLD = 30;
+            // ========================================
+            // FEATURE 1: Header Collapse/Expand
+            // ========================================
+            const COLLAPSE_THRESHOLD = 20;
+            const EXPAND_THRESHOLD = 10;
             const currentState = this.isScrolled();
             if (!currentState && scrollTop > COLLAPSE_THRESHOLD) {
-                console.log('[SCROLL v6] ✓ COLLAPSING HEADER', { scrollTop, threshold: COLLAPSE_THRESHOLD });
+                console.log('[SCROLL v7] ✓ COLLAPSING HEADER', { scrollTop, threshold: COLLAPSE_THRESHOLD });
                 this.isScrolled.set(true);
             }
             else if (currentState && scrollTop < EXPAND_THRESHOLD) {
-                console.log('[SCROLL v6] ✓ EXPANDING HEADER', { scrollTop, threshold: EXPAND_THRESHOLD });
+                console.log('[SCROLL v7] ✓ EXPANDING HEADER', { scrollTop, threshold: EXPAND_THRESHOLD });
                 this.isScrolled.set(false);
             }
             else {
-                console.log('[SCROLL v6] No state change needed', {
+                console.log('[SCROLL v7] No header state change needed', {
                     currentState: currentState ? 'collapsed' : 'expanded',
                     scrollTop,
                     collapseThreshold: COLLAPSE_THRESHOLD,
                     expandThreshold: EXPAND_THRESHOLD
                 });
             }
+            // ========================================
+            // 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;
+                const maxScroll = scrollHeight - clientHeight;
+                if (maxScroll > 0) {
+                    const progress = (scrollTop / maxScroll) * 100;
+                    this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
+                    console.log('[SCROLL v7] ✓ Progress bar updated', {
+                        progress: progress.toFixed(2),
+                        scrollTop,
+                        scrollHeight,
+                        clientHeight,
+                        maxScroll
+                    });
+                }
+                else {
+                    console.log('[SCROLL v7] Cannot calculate progress - maxScroll is 0', { scrollHeight, clientHeight });
+                }
+            }
+            else {
+                console.log('[SCROLL v7] Cannot calculate progress - no target element');
+            }
+            // ========================================
+            // 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
+                            });
+                        }
+                    }
+                }
+            }
         });
         // Manage loading state with minimum display time
         effect(() => {
@@ -23295,7 +23375,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 1027 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 1047 }); })();
 
 /**
  * Shared Theme Color Utilities