@eric-emg/symphiq-components 1.2.18 → 1.2.20

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,52 @@ 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);
+                                console.log('[Scroll Debug] Ionic scroll element dimensions:', {
+                                    clientHeight: scrollElement.clientHeight,
+                                    scrollHeight: scrollElement.scrollHeight,
+                                    scrollTop: scrollElement.scrollTop,
+                                    hasOverflow: scrollElement.scrollHeight > scrollElement.clientHeight
+                                });
+                                scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
+                                console.log('[Scroll Debug] Attached scroll listener to Ionic scroll element');
+                            }).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 +21417,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!');
             }
         }