@eric-emg/symphiq-components 1.2.16 → 1.2.18

package/fesm2022/symphiq-components.mjs

@@ -21360,21 +21360,39 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // Set up container scroll listener when in embedded mode
         if (this.embedded()) {
             let container = null;
+            console.log('[Scroll Debug] Embedded mode detected, setting up scroll listener');
+            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) {
-                    console.warn(`Scroll container with id "${this.scrollContainerId()}" not found. Scroll tracking will not work.`);
+                    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.info(`Scroll container with id "${this.scrollContainerId()}" found!`);
             }
             else if (this.dashboardContainer) {
                 // Fall back to internal dashboard container
                 container = this.dashboardContainer.nativeElement;
+                console.log('[Scroll Debug] Using internal dashboard container:', container);
             }
             if (container) {
+                console.log('[Scroll Debug] Attaching scroll listener to container');
                 container.addEventListener('scroll', () => this.onContainerScroll(container), { passive: true });
             }
+            else {
+                console.warn('[Scroll Debug] No scroll container found!');
+            }
+        }
+        else {
+            console.log('[Scroll Debug] Not in embedded mode, using window scroll');
         }
     }
     handleSearchResult(result) {
@@ -21584,6 +21602,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
     }
     onContainerScroll(container) {
         if (!this.embedded()) {
+            console.log('[Scroll Debug] onContainerScroll called but not in embedded mode, returning');
             return;
         }
         const scrollPosition = container.scrollTop;
@@ -21592,15 +21611,26 @@ class SymphiqFunnelAnalysisDashboardComponent {
         const scrollHeight = container.scrollHeight;
         const maxScroll = scrollHeight - containerHeight;
         const progress = maxScroll > 0 ? (scrollPosition / maxScroll) * 100 : 0;
+        console.log('[Scroll Debug] Container scroll event:', {
+            scrollPosition,
+            containerHeight,
+            scrollHeight,
+            maxScroll,
+            progress: progress.toFixed(2) + '%',
+            currentScrollProgress: this.scrollProgress(),
+            isScrolled: this.isScrolled()
+        });
         this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
         // Skip header state updates during programmatic scrolling
         if (this.isProgrammaticScroll) {
+            console.log('[Scroll Debug] Skipping header update - programmatic scroll');
             return;
         }
         // Check if we're in cooldown period after a recent state change
         const now = Date.now();
         const timeSinceLastChange = now - this.lastStateChangeTime;
         if (timeSinceLastChange < this.STATE_CHANGE_COOLDOWN) {
+            console.log('[Scroll Debug] Skipping header update - in cooldown period', timeSinceLastChange + 'ms');
             return;
         }
         // Clear any pending timeout
@@ -21616,16 +21646,22 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // If currently expanded and we scroll past collapse threshold, collapse
         if (!currentState && scrollPosition > COLLAPSE_THRESHOLD) {
             newState = true;
+            console.log('[Scroll Debug] Triggering COLLAPSE - scrollPosition:', scrollPosition, '> threshold:', COLLAPSE_THRESHOLD);
         }
         // If currently collapsed and we scroll back above expand threshold, expand
         else if (currentState && scrollPosition < EXPAND_THRESHOLD) {
             newState = false;
+            console.log('[Scroll Debug] Triggering EXPAND - scrollPosition:', scrollPosition, '< threshold:', EXPAND_THRESHOLD);
         }
         // Only update state if it actually changed
         if (newState !== currentState) {
+            console.log('[Scroll Debug] State change detected:', currentState, '->', newState);
             this.isScrolled.set(newState);
             this.lastStateChangeTime = Date.now();
         }
+        else {
+            console.log('[Scroll Debug] No state change needed. Current state:', currentState, 'Position:', scrollPosition);
+        }
         this.lastScrollPosition = scrollPosition;
     }
     onScroll() {
@@ -23504,7 +23540,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
         this.onViewAnalysis.emit();
     }
     static { this.ɵfac = function SymphiqFunnelAnalysisPreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisPreviewComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"] }, outputs: { onViewAnalysis: "onViewAnalysis" }, decls: 34, vars: 40, consts: [[1, "w-full", "sm:max-w-md", "mx-auto", "rounded-xl", "border", "shadow-lg", "backdrop-blur-lg", "transition-all", "duration-300", "sm:hover:shadow-xl", "sm:hover:scale-[1.01]", "overflow-hidden"], [1, "px-3", "py-2", "sm:px-4", "sm:py-3", "border-b", "flex", "items-center", "justify-between", "gap-2", "sm:gap-3"], [1, "flex-1", "min-w-0"], [1, "text-sm", "font-bold", "truncate"], [1, "text-xs", "truncate", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2", "flex-shrink-0"], ["tooltipType", "badge", 1, "px-2", "py-1", "rounded", "text-center", "min-w-[44px]", "min-h-[44px]", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-lg", "font-bold"], [1, "p-3", "sm:p-4", "space-y-2.5", "sm:space-y-3"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "grid", "grid-cols-2", "gap-1.5", "sm:gap-2"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2"], [1, "text-lg"], [1, "text-xs", "sm:text-sm", "font-bold"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "class", "animate-pulse", "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "narrative", 1, "text-xs", "leading-relaxed", "line-clamp-3", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "px-3", "py-1.5", "sm:px-4", "sm:py-2", "border-t"], [1, "w-full", "py-2.5", "sm:py-2", "rounded-lg", "font-semibold", "text-xs", "transition-all", "duration-300", "sm:hover:scale-105", "active:scale-[0.98]", "flex", "items-center", "justify-center", "gap-2", "group", "cursor-pointer", "min-h-[44px]", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "transition-transform", "duration-300", "group-hover:translate-x-1"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "sm:w-4", "sm:h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold"], ["tooltipType", "status", 1, "px-2", "py-1", "rounded", "text-xs", "font-bold", "flex", "items-center", "gap-1", "relative", "z-10", "min-h-[32px]", 3, "mouseenter", "mouseleave", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-baseline", "justify-between"], [1, "text-lg", "sm:text-xl", "font-bold"], [1, "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "justify-between", "mb-1"], [1, "text-xs", "font-medium", "truncate", "flex-1"], [1, "w-2", "h-2", "rounded-full", "flex-shrink-0"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], ["tooltipType", "insightsList", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"]], template: function SymphiqFunnelAnalysisPreviewComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"] }, outputs: { onViewAnalysis: "onViewAnalysis" }, decls: 34, vars: 40, consts: [[1, "w-full", "sm:max-w-md", "rounded-xl", "border", "shadow-lg", "backdrop-blur-lg", "transition-all", "duration-300", "sm:hover:shadow-xl", "sm:hover:scale-[1.01]", "overflow-hidden"], [1, "px-3", "py-2", "sm:px-4", "sm:py-3", "border-b", "flex", "items-center", "justify-between", "gap-2", "sm:gap-3"], [1, "flex-1", "min-w-0"], [1, "text-sm", "font-bold", "truncate"], [1, "text-xs", "truncate", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2", "flex-shrink-0"], ["tooltipType", "badge", 1, "px-2", "py-1", "rounded", "text-center", "min-w-[44px]", "min-h-[44px]", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-lg", "font-bold"], [1, "p-3", "sm:p-4", "space-y-2.5", "sm:space-y-3"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "grid", "grid-cols-2", "gap-1.5", "sm:gap-2"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "class"], [1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-1.5", "sm:gap-2"], [1, "text-lg"], [1, "text-xs", "sm:text-sm", "font-bold"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "class", "animate-pulse", "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "narrative", 1, "text-xs", "leading-relaxed", "line-clamp-3", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "px-3", "py-1.5", "sm:px-4", "sm:py-2", "border-t"], [1, "w-full", "py-2.5", "sm:py-2", "rounded-lg", "font-semibold", "text-xs", "transition-all", "duration-300", "sm:hover:scale-105", "active:scale-[0.98]", "flex", "items-center", "justify-center", "gap-2", "group", "cursor-pointer", "min-h-[44px]", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3", "transition-transform", "duration-300", "group-hover:translate-x-1"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], ["tooltipType", "metric", 1, "rounded-lg", "p-2.5", "sm:p-3", "border", "transition-all", "duration-200", "sm:hover:scale-105", "cursor-help", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "sm:w-4", "sm:h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold"], ["tooltipType", "status", 1, "px-2", "py-1", "rounded", "text-xs", "font-bold", "flex", "items-center", "gap-1", "relative", "z-10", "min-h-[32px]", 3, "mouseenter", "mouseleave", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-baseline", "justify-between"], [1, "text-lg", "sm:text-xl", "font-bold"], [1, "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], ["tooltipType", "metric", 1, "rounded-lg", "p-1.5", "sm:p-2", "border", "transition-all", "duration-200", "sm:hover:scale-105", "active:scale-[0.98]", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "justify-between", "mb-1"], [1, "text-xs", "font-medium", "truncate", "flex-1"], [1, "w-2", "h-2", "rounded-full", "flex-shrink-0"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], ["tooltipType", "insightsList", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "competitive", 1, "px-2", "py-0.5", "rounded", "text-xs", "font-bold", 3, "libSymphiqTooltip", "tooltipPosition"]], template: function SymphiqFunnelAnalysisPreviewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
             i0.ɵɵtext(4, "Funnel Analysis");
             i0.ɵɵelementEnd();
@@ -23594,7 +23630,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
         args: [{ selector: 'symphiq-funnel-analysis-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TooltipDirective, TooltipContainerComponent], template: `
     <div
       [class]="containerClass()"
-      class="w-full sm:max-w-md mx-auto rounded-xl border shadow-lg backdrop-blur-lg transition-all duration-300 sm:hover:shadow-xl sm:hover:scale-[1.01] overflow-hidden">
+      class="w-full sm:max-w-md rounded-xl border shadow-lg backdrop-blur-lg transition-all duration-300 sm:hover:shadow-xl sm:hover:scale-[1.01] overflow-hidden">
 
       <!-- Compact Header -->
       <div [class]="headerClass()" class="px-3 py-2 sm:px-4 sm:py-3 border-b flex items-center justify-between gap-2 sm:gap-3">