@eric-emg/symphiq-components 1.2.18 → 1.2.21

package/README.md

@@ -82,6 +82,26 @@ Embedded mode:
 
 **Note:** When `embedded` is `true` and you have a custom scrolling container outside the dashboard component, you should provide the `scrollContainerId` input with the ID of that container element. If `scrollContainerId` is not provided, the component will fall back to using its internal container for scroll tracking.
 
+#### Ionic Framework Support
+
+The component automatically detects and supports **Ionic `<ion-content>` elements**:
+
+```typescript
+@Component({
+  template: `
+    <ion-content id="mainContent">
+      <symphiq-funnel-analysis-dashboard
+        [funnelAnalysis]="data"
+        [embedded]="true"
+        [scrollContainerId]="'mainContent'">
+      </symphiq-funnel-analysis-dashboard>
+    </ion-content>
+  `
+})
+```
+
+When an `ion-content` element is detected, the component will automatically call `getScrollElement()` to attach the scroll listener to the correct internal scrollable element within the shadow DOM.
+
 ### Preview Component
 
 The library includes a compact preview component for displaying funnel analysis summaries:

package/fesm2022/symphiq-components.mjs

@@ -21364,18 +21364,88 @@ class SymphiqFunnelAnalysisDashboardComponent {
             console.log('[Scroll Debug] scrollContainerId:', this.scrollContainerId());
             // If a scroll container ID is provided, use that element
             if (this.scrollContainerId()) {
-                container = document.getElementById(this.scrollContainerId());
-                if (!container) {
+                const element = document.getElementById(this.scrollContainerId());
+                if (!element) {
                     console.warn(`[Scroll Debug] Scroll container with id "${this.scrollContainerId()}" not found. Scroll tracking will not work.`);
                 }
                 else {
-                    console.log('[Scroll Debug] Found external scroll container:', container);
-                    console.log('[Scroll Debug] Container dimensions:', {
-                        clientHeight: container.clientHeight,
-                        scrollHeight: container.scrollHeight,
-                        scrollTop: container.scrollTop,
-                        hasOverflow: container.scrollHeight > container.clientHeight
-                    });
+                    console.log('[Scroll Debug] Found external scroll container:', element);
+                    console.log('[Scroll Debug] Container tag name:', element.tagName);
+                    // Check if this is an Ionic ion-content element
+                    if (element.tagName.toLowerCase() === 'ion-content') {
+                        console.log('[Scroll Debug] Detected Ionic ion-content, attempting to get scrollable element');
+                        // Try to get the scroll element from Ionic's ion-content
+                        // Ionic stores the scrollable element in the component itself
+                        const ionContent = element;
+                        // Method 1: Try getScrollElement() method (Ionic 4+)
+                        if (typeof ionContent.getScrollElement === 'function') {
+                            console.log('[Scroll Debug] Using getScrollElement() method');
+                            ionContent.getScrollElement().then((scrollElement) => {
+                                console.log('[Scroll Debug] Got Ionic scroll element:', scrollElement);
+                                const dimensions = {
+                                    clientHeight: scrollElement.clientHeight,
+                                    scrollHeight: scrollElement.scrollHeight,
+                                    scrollTop: scrollElement.scrollTop,
+                                    hasOverflow: scrollElement.scrollHeight > scrollElement.clientHeight
+                                };
+                                console.log('[Scroll Debug] Ionic scroll element dimensions:', dimensions);
+                                if (!dimensions.hasOverflow) {
+                                    console.warn('[Scroll Debug] ⚠️ WARNING: Scroll element has no overflow! Content may still be loading.');
+                                    console.warn('[Scroll Debug] The dashboard content needs to be taller than', dimensions.clientHeight, 'px to enable scrolling');
+                                    // Set up a MutationObserver to detect when content becomes scrollable
+                                    const observer = new MutationObserver(() => {
+                                        const newScrollHeight = scrollElement.scrollHeight;
+                                        const newClientHeight = scrollElement.clientHeight;
+                                        if (newScrollHeight > newClientHeight) {
+                                            console.log('[Scroll Debug] ✓ Content is now scrollable!', {
+                                                clientHeight: newClientHeight,
+                                                scrollHeight: newScrollHeight,
+                                                hasOverflow: true
+                                            });
+                                            observer.disconnect();
+                                        }
+                                    });
+                                    observer.observe(scrollElement, {
+                                        childList: true,
+                                        subtree: true,
+                                        attributes: true
+                                    });
+                                    console.log('[Scroll Debug] Monitoring for content changes...');
+                                }
+                                scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
+                                console.log('[Scroll Debug] Attached scroll listener to Ionic scroll element');
+                                // Test if scroll event fires by manually triggering a test
+                                console.log('[Scroll Debug] Testing scroll event by programmatically scrolling to 1px...');
+                                scrollElement.scrollTop = 1;
+                                setTimeout(() => {
+                                    if (scrollElement.scrollTop === 1) {
+                                        console.log('[Scroll Debug] ✓ Scroll position changed successfully');
+                                        scrollElement.scrollTop = 0; // Reset
+                                    }
+                                    else {
+                                        console.warn('[Scroll Debug] ⚠️ Could not change scroll position - element may not be scrollable');
+                                    }
+                                }, 50);
+                            }).catch((error) => {
+                                console.error('[Scroll Debug] Error getting Ionic scroll element:', error);
+                            });
+                        }
+                        else {
+                            console.warn('[Scroll Debug] ion-content does not have getScrollElement() method');
+                            // Fallback: attach to ion-content itself (may not work)
+                            container = element;
+                        }
+                    }
+                    else {
+                        // Regular HTML element
+                        container = element;
+                        console.log('[Scroll Debug] Container dimensions:', {
+                            clientHeight: container.clientHeight,
+                            scrollHeight: container.scrollHeight,
+                            scrollTop: container.scrollTop,
+                            hasOverflow: container.scrollHeight > container.clientHeight
+                        });
+                    }
                 }
             }
             else if (this.dashboardContainer) {
@@ -21383,11 +21453,12 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 container = this.dashboardContainer.nativeElement;
                 console.log('[Scroll Debug] Using internal dashboard container:', container);
             }
+            // Only attach listener for non-Ionic elements (Ionic handled above)
             if (container) {
                 console.log('[Scroll Debug] Attaching scroll listener to container');
                 container.addEventListener('scroll', () => this.onContainerScroll(container), { passive: true });
             }
-            else {
+            else if (!this.scrollContainerId() || document.getElementById(this.scrollContainerId())?.tagName.toLowerCase() !== 'ion-content') {
                 console.warn('[Scroll Debug] No scroll container found!');
             }
         }