@eric-emg/symphiq-components 1.2.61 → 1.2.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -169,11 +169,15 @@ class TooltipService {
169
169
  });
170
170
  this.tooltipState$ = this.tooltipState.asObservable();
171
171
  this.scrollContainer = null;
172
+ this.viewportBounds = null;
172
173
  this.isTooltipHovered = false;
173
174
  }
174
175
  setScrollContainer(container) {
175
176
  this.scrollContainer = container;
176
177
  }
178
+ setViewportBounds(bounds) {
179
+ this.viewportBounds = bounds;
180
+ }
177
181
  setTooltipHovered(hovered) {
178
182
  this.isTooltipHovered = hovered;
179
183
  }
@@ -193,11 +197,16 @@ class TooltipService {
193
197
  // Insight tooltips can be quite tall, so need more space
194
198
  const HORIZONTAL_THRESHOLD = 200;
195
199
  const VERTICAL_THRESHOLD = type === 'insight' ? 350 : 200;
196
- // Calculate space available around target element (using window bounds)
197
- const spaceLeft = targetRect.left;
198
- const spaceRight = window.innerWidth - targetRect.right;
199
- const spaceTop = targetRect.top;
200
- const spaceBelow = window.innerHeight - targetRect.bottom;
200
+ // Calculate effective viewport boundaries
201
+ const effectiveLeft = this.viewportBounds?.left ?? 0;
202
+ const effectiveRight = this.viewportBounds?.right ?? window.innerWidth;
203
+ const effectiveTop = this.viewportBounds?.top ?? 0;
204
+ const effectiveBottom = this.viewportBounds?.bottom ?? window.innerHeight;
205
+ // Calculate space available around target element
206
+ const spaceLeft = targetRect.left - effectiveLeft;
207
+ const spaceRight = effectiveRight - targetRect.right;
208
+ const spaceTop = targetRect.top - effectiveTop;
209
+ const spaceBelow = effectiveBottom - targetRect.bottom;
201
210
  // Check left edge
202
211
  if (position === 'left' && spaceLeft < HORIZONTAL_THRESHOLD) {
203
212
  adjustedPosition = 'right';
@@ -233,6 +242,7 @@ class TooltipService {
233
242
  mousePosition,
234
243
  visible: true,
235
244
  scrollContainer: this.scrollContainer,
245
+ viewportBounds: this.viewportBounds,
236
246
  checkHideCallback
237
247
  });
238
248
  }
@@ -245,6 +255,7 @@ class TooltipService {
245
255
  targetRect: null,
246
256
  visible: false,
247
257
  scrollContainer: this.scrollContainer,
258
+ viewportBounds: this.viewportBounds,
248
259
  checkHideCallback: undefined
249
260
  });
250
261
  }
@@ -11058,7 +11069,8 @@ class TooltipContainerComponent {
11058
11069
  targetRect: null,
11059
11070
  mousePosition: undefined,
11060
11071
  visible: false,
11061
- scrollContainer: null
11072
+ scrollContainer: null,
11073
+ viewportBounds: null
11062
11074
  }, ...(ngDevMode ? [{ debugName: "tooltipStateSignal" }] : []));
11063
11075
  this.isVisible = computed(() => this.tooltipStateSignal().visible, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
11064
11076
  this.tooltipType = computed(() => this.tooltipStateSignal().type, ...(ngDevMode ? [{ debugName: "tooltipType" }] : []));
@@ -11067,6 +11079,7 @@ class TooltipContainerComponent {
11067
11079
  this.targetRect = computed(() => this.tooltipStateSignal().targetRect, ...(ngDevMode ? [{ debugName: "targetRect" }] : []));
11068
11080
  this.mousePosition = computed(() => this.tooltipStateSignal().mousePosition, ...(ngDevMode ? [{ debugName: "mousePosition" }] : []));
11069
11081
  this.scrollContainer = computed(() => this.tooltipStateSignal().scrollContainer, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
11082
+ this.viewportBounds = computed(() => this.tooltipStateSignal().viewportBounds, ...(ngDevMode ? [{ debugName: "viewportBounds" }] : []));
11070
11083
  // Type-safe content accessors for each tooltip type
11071
11084
  this.metricContent = computed(() => {
11072
11085
  const content = this.tooltipContent();
@@ -11113,6 +11126,10 @@ class TooltipContainerComponent {
11113
11126
  const position = this.tooltipPosition();
11114
11127
  const tooltipWidth = 384;
11115
11128
  const padding = 10;
11129
+ const bounds = this.viewportBounds();
11130
+ // Calculate effective viewport width
11131
+ const effectiveLeft = bounds?.left ?? 0;
11132
+ const effectiveRight = bounds?.right ?? window.innerWidth;
11116
11133
  // For 'auto' positioning, always center horizontally
11117
11134
  if (position === 'auto') {
11118
11135
  return true;
@@ -11120,8 +11137,8 @@ class TooltipContainerComponent {
11120
11137
  if (position === 'top' || position === 'bottom') {
11121
11138
  const centerPosition = rect.left + rect.width / 2;
11122
11139
  const halfWidth = tooltipWidth / 2;
11123
- const wouldGoOffLeft = centerPosition - halfWidth < padding;
11124
- const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - padding;
11140
+ const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
11141
+ const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
11125
11142
  return !wouldGoOffLeft && !wouldGoOffRight;
11126
11143
  }
11127
11144
  return false;
@@ -11144,7 +11161,8 @@ class TooltipContainerComponent {
11144
11161
  ...state,
11145
11162
  mousePosition: state.mousePosition || undefined,
11146
11163
  content: state.content ?? undefined,
11147
- scrollContainer: state.scrollContainer || null
11164
+ scrollContainer: state.scrollContainer || null,
11165
+ viewportBounds: state.viewportBounds || null
11148
11166
  });
11149
11167
  });
11150
11168
  effect(() => {
@@ -11172,16 +11190,22 @@ class TooltipContainerComponent {
11172
11190
  const mousePos = this.mousePosition();
11173
11191
  const tooltipWidth = 384;
11174
11192
  const padding = 10;
11193
+ const bounds = this.viewportBounds();
11194
+ // Calculate effective viewport boundaries
11195
+ // Only use actual window edges (0 and window.innerWidth) for constraints
11196
+ // Don't let container bounds force tooltips away from edges
11197
+ const effectiveLeft = 0;
11198
+ const effectiveRight = bounds?.right ?? window.innerWidth;
11175
11199
  // Handle 'auto' positioning with mouse coordinates
11176
11200
  if (position === 'auto' && mousePos) {
11177
11201
  const halfWidth = tooltipWidth / 2;
11178
11202
  let leftPos = mousePos.x;
11179
11203
  // Keep tooltip in bounds
11180
- if (leftPos - halfWidth < padding) {
11181
- leftPos = padding + halfWidth;
11204
+ if (leftPos - halfWidth < effectiveLeft + padding) {
11205
+ leftPos = effectiveLeft + padding + halfWidth;
11182
11206
  }
11183
- else if (leftPos + halfWidth > window.innerWidth - padding) {
11184
- leftPos = window.innerWidth - padding - halfWidth;
11207
+ else if (leftPos + halfWidth > effectiveRight - padding) {
11208
+ leftPos = effectiveRight - padding - halfWidth;
11185
11209
  }
11186
11210
  return leftPos;
11187
11211
  }
@@ -11191,15 +11215,15 @@ class TooltipContainerComponent {
11191
11215
  const centerPosition = rect.left + rect.width / 2;
11192
11216
  const halfWidth = tooltipWidth / 2;
11193
11217
  // Check if centered tooltip would go off bounds
11194
- const wouldGoOffLeft = centerPosition - halfWidth < padding;
11195
- const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - padding;
11218
+ const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
11219
+ const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
11196
11220
  if (wouldGoOffLeft) {
11197
11221
  // Align to left edge with padding
11198
- return padding + halfWidth;
11222
+ return effectiveLeft + padding + halfWidth;
11199
11223
  }
11200
11224
  else if (wouldGoOffRight) {
11201
11225
  // Align to right edge with padding
11202
- return window.innerWidth - padding - halfWidth;
11226
+ return effectiveRight - padding - halfWidth;
11203
11227
  }
11204
11228
  else {
11205
11229
  // Center normally (transform will be applied)
@@ -11209,7 +11233,7 @@ class TooltipContainerComponent {
11209
11233
  case 'left': {
11210
11234
  const leftPosition = rect.left - tooltipWidth - 8;
11211
11235
  // If tooltip would go off left edge, position it to the right instead
11212
- if (leftPosition < padding) {
11236
+ if (leftPosition < effectiveLeft + padding) {
11213
11237
  return rect.right + 8;
11214
11238
  }
11215
11239
  return leftPosition;
@@ -11217,7 +11241,7 @@ class TooltipContainerComponent {
11217
11241
  case 'right': {
11218
11242
  const rightPosition = rect.right + 8;
11219
11243
  // If tooltip would go off right edge, position it to the left instead
11220
- if (rightPosition + tooltipWidth > window.innerWidth - padding) {
11244
+ if (rightPosition + tooltipWidth > effectiveRight - padding) {
11221
11245
  return rect.left - tooltipWidth - 8;
11222
11246
  }
11223
11247
  return rightPosition;
@@ -11234,6 +11258,11 @@ class TooltipContainerComponent {
11234
11258
  const mousePos = this.mousePosition();
11235
11259
  const type = this.tooltipType();
11236
11260
  const padding = 10;
11261
+ const bounds = this.viewportBounds();
11262
+ // Calculate effective viewport boundaries
11263
+ // Use actual window edges for constraints
11264
+ const effectiveTop = 0;
11265
+ const effectiveBottom = bounds?.bottom ?? window.innerHeight;
11237
11266
  // Estimate tooltip height based on type
11238
11267
  let estimatedHeight = 100;
11239
11268
  if (type === 'insight') {
@@ -11247,12 +11276,12 @@ class TooltipContainerComponent {
11247
11276
  const offset = 20; // Offset from mouse cursor
11248
11277
  let topPos = mousePos.y + offset;
11249
11278
  // If tooltip would go off bottom, position above cursor
11250
- if (topPos + estimatedHeight > window.innerHeight - padding) {
11279
+ if (topPos + estimatedHeight > effectiveBottom - padding) {
11251
11280
  topPos = mousePos.y - estimatedHeight - offset;
11252
11281
  }
11253
11282
  // Ensure it doesn't go off top
11254
- if (topPos < padding) {
11255
- topPos = padding;
11283
+ if (topPos < effectiveTop + padding) {
11284
+ topPos = effectiveTop + padding;
11256
11285
  }
11257
11286
  return topPos;
11258
11287
  }
@@ -11260,7 +11289,7 @@ class TooltipContainerComponent {
11260
11289
  case 'top': {
11261
11290
  const topPosition = rect.top - estimatedHeight - 8;
11262
11291
  // If tooltip would go off top edge, position it below instead
11263
- if (topPosition < padding) {
11292
+ if (topPosition < effectiveTop + padding) {
11264
11293
  return rect.bottom + 8;
11265
11294
  }
11266
11295
  return topPosition;
@@ -11268,7 +11297,7 @@ class TooltipContainerComponent {
11268
11297
  case 'bottom': {
11269
11298
  const bottomPosition = rect.bottom + 8;
11270
11299
  // If tooltip would go off bottom edge, position it above instead
11271
- if (bottomPosition + estimatedHeight > window.innerHeight - padding) {
11300
+ if (bottomPosition + estimatedHeight > effectiveBottom - padding) {
11272
11301
  return rect.top - estimatedHeight - 8;
11273
11302
  }
11274
11303
  return bottomPosition;
@@ -11277,8 +11306,8 @@ class TooltipContainerComponent {
11277
11306
  case 'right': {
11278
11307
  const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
11279
11308
  // Keep within bounds
11280
- const maxTop = window.innerHeight - padding - estimatedHeight;
11281
- return Math.max(padding, Math.min(centerPosition, maxTop));
11309
+ const maxTop = effectiveBottom - padding - estimatedHeight;
11310
+ return Math.max(effectiveTop + padding, Math.min(centerPosition, maxTop));
11282
11311
  }
11283
11312
  default:
11284
11313
  return rect.top - estimatedHeight - 8;
@@ -21274,6 +21303,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
21274
21303
  this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
21275
21304
  this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
21276
21305
  this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
21306
+ this.containerElement = input(...(ngDevMode ? [undefined, { debugName: "containerElement" }] : []));
21277
21307
  this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
21278
21308
  this.useSampleData = input(false, ...(ngDevMode ? [{ debugName: "useSampleData" }] : []));
21279
21309
  // State signals
@@ -21637,6 +21667,23 @@ class SymphiqFunnelAnalysisDashboardComponent {
21637
21667
  this.tooltipService.setScrollContainer(scrollEl);
21638
21668
  }
21639
21669
  });
21670
+ // Set up viewport bounds for tooltips when containerElement changes
21671
+ effect(() => {
21672
+ const container = this.containerElement();
21673
+ if (container) {
21674
+ const rect = container.getBoundingClientRect();
21675
+ this.tooltipService.setViewportBounds({
21676
+ left: rect.left,
21677
+ top: rect.top,
21678
+ right: rect.right,
21679
+ bottom: rect.bottom
21680
+ });
21681
+ }
21682
+ else {
21683
+ // No container specified, reset to null (use full window)
21684
+ this.tooltipService.setViewportBounds(null);
21685
+ }
21686
+ });
21640
21687
  // Handle scroll events from parent - unified scroll event handler for ALL features
21641
21688
  effect(() => {
21642
21689
  const scrollEvent = this.scrollEvent();
@@ -22142,7 +22189,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
22142
22189
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dashboardContainer = _t.first);
22143
22190
  } }, hostBindings: function SymphiqFunnelAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
22144
22191
  i0.ɵɵlistener("scroll", function SymphiqFunnelAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
22145
- } }, inputs: { requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], funnelAnalysis: [1, "funnelAnalysis"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], useSampleData: [1, "useSampleData"] }, decls: 88, vars: 102, consts: [["dashboardContainer", ""], [1, "bg-transparent"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "absolute", "inset-0", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-[0.03]", "z-20", 2, "background-image", "url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"], [1, "absolute", "top-0", "right-0", "w-[800px]", "h-[800px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "bottom-0", "left-0", "w-[600px]", "h-[600px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "top-1/2", "left-1/2", "-translate-x-1/2", "-translate-y-1/2", "w-[700px]", "h-[700px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "sticky", "top-0", "z-50", "animate-fade-in", 2, "animation-delay", "0s"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-6", "sm:py-8"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "justify-between", "gap-3", "sm:gap-0"], [1, "flex-1"], [1, "flex", "items-center", "gap-3"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-4"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "flex", "items-center", "gap-2"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [1, "text-xs", "sm:text-sm", "font-medium"], [3, "click", "mousedown", "pointerdown"], [1, "px-3", "sm:px-4", "py-1.5", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-3"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex", "items-center", "gap-4", "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "truncate", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], [1, "hidden", "lg:flex", "items-center", "gap-3", "px-4", "py-1.5", "rounded-lg", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], [1, "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-3"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "title", "ngClass"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], ["id", "overall-section", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-sm", "font-semibold", "truncate", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-medium", "uppercase", "border", "flex-shrink-0", 3, "ngClass"], ["title", "Clear search", 1, "p-2", "rounded-lg", "transition-colors", "flex-shrink-0", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "click", "title", "ngClass"], [1, "rounded-xl", "border", "p-6", "sm:p-8", "animate-pulse", 3, "ngClass"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "space-y-6"], [3, "width", "height", "isLightMode"], [1, "flex-1", "space-y-2"], [1, "space-y-2"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "mt-6"], [3, "scrollToSection", "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "relative", "mb-16", "sm:mb-20", "animate-fade-in", 2, "animation-delay", "0.15s"], ["id", "insights-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at center, black 0%, transparent 70%)", 3, "ngClass"], [1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.2s"], [1, "pl-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", 3, "ngClass"], ["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"], [1, "text-xl", "sm:text-2xl", "font-bold"], [1, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], ["aria-hidden", "true", 1, "absolute", "inset-0", "flex", "items-center"], [1, "w-full", "h-px", "bg-gradient-to-r", 3, "ngClass"], [1, "relative", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-full", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[280px]", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "mt-6", "space-y-2"], [1, "flex", "gap-2", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "insight", "allMetrics", "charts", "allCharts", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "relative", "mb-14", "sm:mb-24", "mt-24", "sm:mt-32", "animate-fade-in", 2, "animation-delay", "0.35s"], ["id", "metrics-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at top right, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.4s"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "hidden", "sm:flex", "gap-2", "sm:gap-3", "items-center", "relative"], [1, "absolute", "-right-2", "top-1/2", "-translate-y-1/2", "z-10"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", "cursor-pointer", "hover:scale-105", "active:scale-95", 3, "click", "title"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"], [1, "sm:hidden", "-mx-6", "px-6"], [1, "flex", "gap-2", "overflow-x-auto", "pb-2", "snap-x", "snap-mandatory", "scrollbar-hide"], [1, "space-y-8", "sm:space-y-10"], [1, "space-y-8", "sm:space-y-10", 3, "animate-content-change", "transition-opacity-slow"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], [1, "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "animate-spin"], ["disabled", "", 1, "font-semibold", 3, "value"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "ngClass", "opacity-70"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "click", "ngClass"], [1, "rounded-xl", "border", "p-6", "animate-pulse", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-4"], [1, "grid", "grid-cols-2", "md:grid-cols-4", "gap-4", "mt-6"], [1, "rounded-xl", "p-12", "border", "text-center", "animate-fade-in", 3, "ngClass"], [1, "w-full", "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [1, "bento-grid", "mt-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-3", "sm:gap-4", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay"], [1, "animate-fade-in-up"], [1, "h-full", 3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[240px]", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mt-4"], [1, "mt-4"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.65s"], ["id", "breakdowns-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at bottom left, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "justify-between", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.7s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "inline-block", 3, "click", "mousedown", "pointerdown"], [1, "px-3", "py-2", "text-sm", "rounded-lg", "border", "transition-all", "duration-200", "cursor-pointer", "focus:ring-2", "focus:ring-blue-500", "focus:outline-none", 3, "ngModelChange", "ngModel", "ngClass"], [1, "space-y-6", 3, "animate-content-change", "transition-opacity-slow"], [1, "w-4", "h-4", "border-2", "border-purple-500/30", "border-t-purple-500", "rounded-full", "animate-spin"], [1, "space-y-3"], [1, "flex", "items-center", "justify-between", "p-3", "rounded-lg", 3, "ngClass"], [3, "breakdown", "charts", "isLightMode", "isCompactMode"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.85s"], ["id", "competitive-section", 1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.9s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "hidden", "sm:block", "relative"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode"], [1, "w-4", "h-4", "border-2", "border-indigo-500/30", "border-t-indigo-500", "rounded-full", "animate-spin"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4", "mt-6"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
22192
+ } }, inputs: { requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], funnelAnalysis: [1, "funnelAnalysis"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], containerElement: [1, "containerElement"], isLoading: [1, "isLoading"], useSampleData: [1, "useSampleData"] }, decls: 88, vars: 102, consts: [["dashboardContainer", ""], [1, "bg-transparent"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "absolute", "inset-0", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-[0.03]", "z-20", 2, "background-image", "url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"], [1, "absolute", "top-0", "right-0", "w-[800px]", "h-[800px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "bottom-0", "left-0", "w-[600px]", "h-[600px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "top-1/2", "left-1/2", "-translate-x-1/2", "-translate-y-1/2", "w-[700px]", "h-[700px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "sticky", "top-0", "z-50", "animate-fade-in", 2, "animation-delay", "0s"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-6", "sm:py-8"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "justify-between", "gap-3", "sm:gap-0"], [1, "flex-1"], [1, "flex", "items-center", "gap-3"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-4"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "flex", "items-center", "gap-2"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [1, "text-xs", "sm:text-sm", "font-medium"], [3, "click", "mousedown", "pointerdown"], [1, "px-3", "sm:px-4", "py-1.5", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-3"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex", "items-center", "gap-4", "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "truncate", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], [1, "hidden", "lg:flex", "items-center", "gap-3", "px-4", "py-1.5", "rounded-lg", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], [1, "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-3"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "title", "ngClass"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], ["id", "overall-section", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-sm", "font-semibold", "truncate", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-medium", "uppercase", "border", "flex-shrink-0", 3, "ngClass"], ["title", "Clear search", 1, "p-2", "rounded-lg", "transition-colors", "flex-shrink-0", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "click", "title", "ngClass"], [1, "rounded-xl", "border", "p-6", "sm:p-8", "animate-pulse", 3, "ngClass"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "space-y-6"], [3, "width", "height", "isLightMode"], [1, "flex-1", "space-y-2"], [1, "space-y-2"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "mt-6"], [3, "scrollToSection", "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "relative", "mb-16", "sm:mb-20", "animate-fade-in", 2, "animation-delay", "0.15s"], ["id", "insights-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at center, black 0%, transparent 70%)", 3, "ngClass"], [1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.2s"], [1, "pl-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", 3, "ngClass"], ["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"], [1, "text-xl", "sm:text-2xl", "font-bold"], [1, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], ["aria-hidden", "true", 1, "absolute", "inset-0", "flex", "items-center"], [1, "w-full", "h-px", "bg-gradient-to-r", 3, "ngClass"], [1, "relative", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-full", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[280px]", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "mt-6", "space-y-2"], [1, "flex", "gap-2", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "insight", "allMetrics", "charts", "allCharts", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "relative", "mb-14", "sm:mb-24", "mt-24", "sm:mt-32", "animate-fade-in", 2, "animation-delay", "0.35s"], ["id", "metrics-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at top right, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.4s"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "hidden", "sm:flex", "gap-2", "sm:gap-3", "items-center", "relative"], [1, "absolute", "-right-2", "top-1/2", "-translate-y-1/2", "z-10"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", "cursor-pointer", "hover:scale-105", "active:scale-95", 3, "click", "title"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"], [1, "sm:hidden", "-mx-6", "px-6"], [1, "flex", "gap-2", "overflow-x-auto", "pb-2", "snap-x", "snap-mandatory", "scrollbar-hide"], [1, "space-y-8", "sm:space-y-10"], [1, "space-y-8", "sm:space-y-10", 3, "animate-content-change", "transition-opacity-slow"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], [1, "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "animate-spin"], ["disabled", "", 1, "font-semibold", 3, "value"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "ngClass", "opacity-70"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "click", "ngClass"], [1, "rounded-xl", "border", "p-6", "animate-pulse", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-4"], [1, "grid", "grid-cols-2", "md:grid-cols-4", "gap-4", "mt-6"], [1, "rounded-xl", "p-12", "border", "text-center", "animate-fade-in", 3, "ngClass"], [1, "w-full", "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [1, "bento-grid", "mt-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-3", "sm:gap-4", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay"], [1, "animate-fade-in-up"], [1, "h-full", 3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[240px]", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mt-4"], [1, "mt-4"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.65s"], ["id", "breakdowns-section", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at bottom left, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "justify-between", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.7s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "inline-block", 3, "click", "mousedown", "pointerdown"], [1, "px-3", "py-2", "text-sm", "rounded-lg", "border", "transition-all", "duration-200", "cursor-pointer", "focus:ring-2", "focus:ring-blue-500", "focus:outline-none", 3, "ngModelChange", "ngModel", "ngClass"], [1, "space-y-6", 3, "animate-content-change", "transition-opacity-slow"], [1, "w-4", "h-4", "border-2", "border-purple-500/30", "border-t-purple-500", "rounded-full", "animate-spin"], [1, "space-y-3"], [1, "flex", "items-center", "justify-between", "p-3", "rounded-lg", 3, "ngClass"], [3, "breakdown", "charts", "isLightMode", "isCompactMode"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.85s"], ["id", "competitive-section", 1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.9s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "hidden", "sm:block", "relative"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode"], [1, "w-4", "h-4", "border-2", "border-indigo-500/30", "border-t-indigo-500", "rounded-full", "animate-spin"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4", "mt-6"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
22146
22193
  const _r1 = i0.ɵɵgetCurrentView();
22147
22194
  i0.ɵɵelementStart(0, "div", 1, 0);
22148
22195
  i0.ɵɵelement(2, "div", 2);
@@ -23240,7 +23287,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
23240
23287
  }], dashboardContainer: [{
23241
23288
  type: ViewChild,
23242
23289
  args: ['dashboardContainer', { static: false }]
23243
- }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], onScroll: [{
23290
+ }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], containerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], onScroll: [{
23244
23291
  type: HostListener,
23245
23292
  args: ['window:scroll', ['$event']]
23246
23293
  }] }); })();
@@ -23646,6 +23693,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
23646
23693
  this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
23647
23694
  this.useSampleData = input(false, ...(ngDevMode ? [{ debugName: "useSampleData" }] : []));
23648
23695
  this.scrollElement = input(undefined, ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
23696
+ this.containerElement = input(undefined, ...(ngDevMode ? [{ debugName: "containerElement" }] : []));
23649
23697
  // Computed theme
23650
23698
  this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
23651
23699
  // Outputs
@@ -23874,6 +23922,23 @@ class SymphiqFunnelAnalysisPreviewComponent {
23874
23922
  this.tooltipService.setScrollContainer(null);
23875
23923
  }
23876
23924
  });
23925
+ // Set up viewport bounds for tooltips when containerElement changes
23926
+ effect(() => {
23927
+ const container = this.containerElement();
23928
+ if (container) {
23929
+ const rect = container.getBoundingClientRect();
23930
+ this.tooltipService.setViewportBounds({
23931
+ left: rect.left,
23932
+ top: rect.top,
23933
+ right: rect.right,
23934
+ bottom: rect.bottom
23935
+ });
23936
+ }
23937
+ else {
23938
+ // No container specified, reset to null (use full window)
23939
+ this.tooltipService.setViewportBounds(null);
23940
+ }
23941
+ });
23877
23942
  }
23878
23943
  // Helper methods for metrics
23879
23944
  metricMiniCardClass(metric) {
@@ -23975,7 +24040,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
23975
24040
  this.onViewAnalysis.emit();
23976
24041
  }
23977
24042
  static { this.ɵfac = function SymphiqFunnelAnalysisPreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisPreviewComponent)(); }; }
23978
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"], useSampleData: [1, "useSampleData"], scrollElement: [1, "scrollElement"] }, 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) {
24043
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisPreviewComponent, selectors: [["symphiq-funnel-analysis-preview"]], inputs: { analysisInput: [1, "funnelAnalysis", "analysisInput"], viewMode: [1, "viewMode"], useSampleData: [1, "useSampleData"], scrollElement: [1, "scrollElement"], containerElement: [1, "containerElement"] }, 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) {
23979
24044
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
23980
24045
  i0.ɵɵtext(4, "Funnel Analysis");
23981
24046
  i0.ɵɵelementEnd();
@@ -24237,7 +24302,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
24237
24302
  <!-- Tooltip Container -->
24238
24303
  <symphiq-tooltip-container />
24239
24304
  `, styles: ["@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.6}}.status-pulse{animation:statusPulse 2s ease-in-out infinite}\n"] }]
24240
- }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
24305
+ }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], containerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
24241
24306
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 217 }); })();
24242
24307
 
24243
24308
  const _c0$3 = ["chartdiv"];