@eric-emg/symphiq-components 1.2.0 → 1.2.2

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.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +755 -734
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts.map +1 -1
  4. package/package.json +1 -1
  5. package/styles.css +242 -37
package/fesm2022/symphiq-components.mjs CHANGED
@@ -3,9 +3,7 @@ export * from '@jebgem/model';
3
3
  import * as i0 from '@angular/core';
4
4
  import { Injectable, Component, Input } from '@angular/core';
5
5
  import { BehaviorSubject } from 'rxjs';
6
- import * as i2 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
- import * as i3 from '@angular/forms';
6
+ import * as i2 from '@angular/forms';
9
7
  import { FormsModule } from '@angular/forms';
10
8
 
11
9
  class FunnelOrderService {
@@ -122,44 +120,44 @@ class ModalService {
122
120
  }], null, null); })();
123
121
 
124
122
  function OverallAssessmentComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
125
- i0.ɵɵdomElementStart(0, "div", 9)(1, "div", 35)(2, "div", 36)(3, "div", 37)(4, "div", 38);
123
+ i0.ɵɵdomElementStart(0, "div", 11)(1, "div", 37)(2, "div", 38)(3, "div", 39)(4, "div", 40);
126
124
  i0.ɵɵnamespaceSVG();
127
- i0.ɵɵdomElementStart(5, "svg", 39);
128
- i0.ɵɵdomElement(6, "path", 40);
125
+ i0.ɵɵdomElementStart(5, "svg", 41);
126
+ i0.ɵɵdomElement(6, "path", 42);
129
127
  i0.ɵɵdomElementEnd()();
130
128
  i0.ɵɵnamespaceHTML();
131
- i0.ɵɵdomElementStart(7, "div")(8, "h3", 41);
129
+ i0.ɵɵdomElementStart(7, "div", 43)(8, "h3", 44);
132
130
  i0.ɵɵtext(9, "Your Revenue");
133
131
  i0.ɵɵdomElementEnd();
134
- i0.ɵɵdomElementStart(10, "p", 42);
132
+ i0.ɵɵdomElementStart(10, "p", 45);
135
133
  i0.ɵɵtext(11);
136
134
  i0.ɵɵdomElementEnd()()();
137
- i0.ɵɵdomElementStart(12, "div", 43)(13, "div", 44);
135
+ i0.ɵɵdomElementStart(12, "div", 46)(13, "div", 47);
138
136
  i0.ɵɵnamespaceSVG();
139
- i0.ɵɵdomElementStart(14, "svg", 45);
140
- i0.ɵɵdomElement(15, "path", 46);
137
+ i0.ɵɵdomElementStart(14, "svg", 48);
138
+ i0.ɵɵdomElement(15, "path", 49);
141
139
  i0.ɵɵdomElementEnd();
142
140
  i0.ɵɵnamespaceHTML();
143
- i0.ɵɵdomElementStart(16, "span", 47);
141
+ i0.ɵɵdomElementStart(16, "span", 50);
144
142
  i0.ɵɵtext(17);
145
143
  i0.ɵɵdomElementEnd();
146
- i0.ɵɵdomElementStart(18, "span", 48);
144
+ i0.ɵɵdomElementStart(18, "span", 51);
147
145
  i0.ɵɵtext(19, "vs last year");
148
146
  i0.ɵɵdomElementEnd()();
149
- i0.ɵɵdomElement(20, "div", 49);
150
- i0.ɵɵdomElementStart(21, "div")(22, "span", 48);
147
+ i0.ɵɵdomElement(20, "div", 52);
148
+ i0.ɵɵdomElementStart(21, "div")(22, "span", 51);
151
149
  i0.ɵɵtext(23, "Target: ");
152
150
  i0.ɵɵdomElementEnd();
153
- i0.ɵɵdomElementStart(24, "span", 50);
151
+ i0.ɵɵdomElementStart(24, "span", 53);
154
152
  i0.ɵɵtext(25);
155
153
  i0.ɵɵdomElementEnd()()()();
156
- i0.ɵɵdomElementStart(26, "div", 51)(27, "div", 6);
154
+ i0.ɵɵdomElementStart(26, "div", 54)(27, "div", 7);
157
155
  i0.ɵɵtext(28, "Status");
158
156
  i0.ɵɵdomElementEnd();
159
- i0.ɵɵdomElementStart(29, "div", 52);
157
+ i0.ɵɵdomElementStart(29, "div", 55);
160
158
  i0.ɵɵtext(30);
161
159
  i0.ɵɵdomElementEnd();
162
- i0.ɵɵdomElementStart(31, "div", 53);
160
+ i0.ɵɵdomElementStart(31, "div", 56);
163
161
  i0.ɵɵtext(32);
164
162
  i0.ɵɵdomElementEnd()()()();
165
163
  } if (rf & 2) {
@@ -232,75 +230,75 @@ class OverallAssessmentComponent {
232
230
  }
233
231
  }
234
232
  static { this.ɵfac = function OverallAssessmentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverallAssessmentComponent)(); }; }
235
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverallAssessmentComponent, selectors: [["symphiq-funnel-analysis-overall-assessment"]], inputs: { assessment: "assessment", revenueMetric: "revenueMetric" }, decls: 59, vars: 13, consts: [[1, "bg-gradient-to-br", "from-slate-800", "to-slate-900", "rounded-2xl", "p-8", "border", "border-slate-700", "shadow-xl"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-3xl", "font-bold", "text-white", "mb-2"], [1, "text-slate-400"], [1, "flex", "items-center", "gap-4"], [1, "text-center"], [1, "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider", "mb-1"], [1, "text-lg", "font-bold"], [1, "text-4xl", "font-bold"], [1, "bg-gradient-to-r", "from-emerald-500/20", "to-blue-500/20", "rounded-xl", "p-6", "mb-6", "border-2", "border-emerald-500/40"], [1, "bg-slate-900/50", "rounded-xl", "p-6", "mb-6", "border", "border-slate-700"], [1, "text-slate-300", "leading-relaxed"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-6"], [1, "bg-emerald-500/10", "rounded-xl", "p-6", "border", "border-emerald-500/30"], [1, "flex", "items-center", "gap-3", "mb-3"], [1, "w-10", "h-10", "bg-emerald-500/20", "rounded-lg", "flex", "items-center", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "text-emerald-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-lg", "font-semibold", "text-emerald-400"], [1, "text-sm", "text-slate-300", "leading-relaxed"], [1, "bg-amber-500/10", "rounded-xl", "p-6", "border", "border-amber-500/30"], [1, "w-10", "h-10", "bg-amber-500/20", "rounded-lg", "flex", "items-center", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "text-amber-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "text-lg", "font-semibold", "text-amber-400"], [1, "bg-blue-500/10", "rounded-xl", "p-6", "border", "border-blue-500/30"], [1, "w-10", "h-10", "bg-blue-500/20", "rounded-lg", "flex", "items-center", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "text-blue-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "text-lg", "font-semibold", "text-blue-400"], [1, "bg-purple-500/10", "rounded-xl", "p-6", "border", "border-purple-500/30"], [1, "w-10", "h-10", "bg-purple-500/20", "rounded-lg", "flex", "items-center", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "text-purple-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"], [1, "text-lg", "font-semibold", "text-purple-400"], [1, "flex", "items-center", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "w-12", "h-12", "bg-emerald-500/30", "rounded-lg", "flex", "items-center", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-7", "h-7", "text-emerald-400"], ["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-sm", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [1, "text-4xl", "font-bold", "text-white"], [1, "flex", "items-center", "gap-4", "mt-3"], [1, "flex", "items-center", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "text-emerald-400"], ["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"], [1, "text-emerald-400", "font-semibold", "text-lg"], [1, "text-slate-400", "text-sm"], [1, "h-6", "w-px", "bg-slate-600"], [1, "text-white", "font-semibold"], [1, "text-right"], [1, "inline-block", "px-4", "py-2", "rounded-lg", "font-bold", "text-lg"], [1, "mt-2", "text-sm", "text-slate-400"]], template: function OverallAssessmentComponent_Template(rf, ctx) { if (rf & 1) {
236
- i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div")(3, "h2", 2);
233
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverallAssessmentComponent, selectors: [["symphiq-funnel-analysis-overall-assessment"]], inputs: { assessment: "assessment", revenueMetric: "revenueMetric" }, decls: 59, vars: 13, consts: [[1, "bg-gradient-to-br", "from-slate-800", "to-slate-900", "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "border-slate-700", "shadow-xl"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "justify-between", "gap-4", "mb-4", "sm:mb-6"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "text-white", "mb-2"], [1, "text-sm", "sm:text-base", "text-slate-400"], [1, "flex", "items-center", "gap-3", "sm:gap-4", "w-full", "sm:w-auto"], [1, "text-center", "flex-1", "sm:flex-initial"], [1, "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider", "mb-1"], [1, "text-base", "sm:text-lg", "font-bold"], [1, "flex-1", "sm:flex-initial"], [1, "text-3xl", "sm:text-4xl", "font-bold"], [1, "bg-gradient-to-r", "from-emerald-500/20", "to-blue-500/20", "rounded-xl", "p-4", "sm:p-6", "mb-4", "sm:mb-6", "border-2", "border-emerald-500/40"], [1, "bg-slate-900/50", "rounded-xl", "p-4", "sm:p-6", "mb-4", "sm:mb-6", "border", "border-slate-700"], [1, "text-sm", "sm:text-base", "text-slate-300", "leading-relaxed"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "sm:gap-6"], [1, "bg-emerald-500/10", "rounded-xl", "p-4", "sm:p-6", "border", "border-emerald-500/30"], [1, "flex", "items-center", "gap-3", "mb-3"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "bg-emerald-500/20", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6", "text-emerald-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-base", "sm:text-lg", "font-semibold", "text-emerald-400"], [1, "text-xs", "sm:text-sm", "text-slate-300", "leading-relaxed"], [1, "bg-amber-500/10", "rounded-xl", "p-4", "sm:p-6", "border", "border-amber-500/30"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "bg-amber-500/20", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6", "text-amber-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "text-base", "sm:text-lg", "font-semibold", "text-amber-400"], [1, "bg-blue-500/10", "rounded-xl", "p-4", "sm:p-6", "border", "border-blue-500/30"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "bg-blue-500/20", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6", "text-blue-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "text-base", "sm:text-lg", "font-semibold", "text-blue-400"], [1, "bg-purple-500/10", "rounded-xl", "p-4", "sm:p-6", "border", "border-purple-500/30"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "bg-purple-500/20", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6", "text-purple-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"], [1, "text-base", "sm:text-lg", "font-semibold", "text-purple-400"], [1, "flex", "flex-col", "md:flex-row", "items-start", "md:items-center", "gap-4", "md:gap-0"], [1, "flex-1", "w-full"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "w-10", "h-10", "sm:w-12", "sm:h-12", "bg-emerald-500/30", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "sm:w-7", "sm:h-7", "text-emerald-400"], ["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, "min-w-0", "flex-1"], [1, "text-xs", "sm:text-sm", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [1, "text-2xl", "sm:text-3xl", "lg:text-4xl", "font-bold", "text-white", "truncate"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "gap-2", "sm:gap-4", "mt-3"], [1, "flex", "items-center", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4", "sm:w-5", "sm:h-5", "text-emerald-400", "flex-shrink-0"], ["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"], [1, "text-emerald-400", "font-semibold", "text-base", "sm:text-lg"], [1, "text-slate-400", "text-xs", "sm:text-sm"], [1, "hidden", "sm:block", "h-6", "w-px", "bg-slate-600"], [1, "text-white", "font-semibold", "text-sm", "sm:text-base"], [1, "w-full", "md:w-auto", "md:text-right", "md:ml-4"], [1, "inline-block", "px-3", "sm:px-4", "py-1.5", "sm:py-2", "rounded-lg", "font-bold", "text-base", "sm:text-lg"], [1, "mt-2", "text-xs", "sm:text-sm", "text-slate-400"]], template: function OverallAssessmentComponent_Template(rf, ctx) { if (rf & 1) {
234
+ i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
237
235
  i0.ɵɵtext(4, "Overall Performance");
238
236
  i0.ɵɵdomElementEnd();
239
- i0.ɵɵdomElementStart(5, "p", 3);
237
+ i0.ɵɵdomElementStart(5, "p", 4);
240
238
  i0.ɵɵtext(6);
241
239
  i0.ɵɵdomElementEnd()();
242
- i0.ɵɵdomElementStart(7, "div", 4)(8, "div", 5)(9, "div", 6);
240
+ i0.ɵɵdomElementStart(7, "div", 5)(8, "div", 6)(9, "div", 7);
243
241
  i0.ɵɵtext(10, "Status");
244
242
  i0.ɵɵdomElementEnd();
245
- i0.ɵɵdomElementStart(11, "div", 7);
243
+ i0.ɵɵdomElementStart(11, "div", 8);
246
244
  i0.ɵɵtext(12);
247
245
  i0.ɵɵdomElementEnd()();
248
- i0.ɵɵdomElementStart(13, "div")(14, "div", 6);
246
+ i0.ɵɵdomElementStart(13, "div", 9)(14, "div", 7);
249
247
  i0.ɵɵtext(15, "Grade");
250
248
  i0.ɵɵdomElementEnd();
251
- i0.ɵɵdomElementStart(16, "div", 8);
249
+ i0.ɵɵdomElementStart(16, "div", 10);
252
250
  i0.ɵɵtext(17);
253
251
  i0.ɵɵdomElementEnd()()()();
254
- i0.ɵɵconditionalCreate(18, OverallAssessmentComponent_Conditional_18_Template, 33, 7, "div", 9);
255
- i0.ɵɵdomElementStart(19, "div", 10)(20, "p", 11);
252
+ i0.ɵɵconditionalCreate(18, OverallAssessmentComponent_Conditional_18_Template, 33, 7, "div", 11);
253
+ i0.ɵɵdomElementStart(19, "div", 12)(20, "p", 13);
256
254
  i0.ɵɵtext(21);
257
255
  i0.ɵɵdomElementEnd()();
258
- i0.ɵɵdomElementStart(22, "div", 12)(23, "div", 13)(24, "div", 14)(25, "div", 15);
256
+ i0.ɵɵdomElementStart(22, "div", 14)(23, "div", 15)(24, "div", 16)(25, "div", 17);
259
257
  i0.ɵɵnamespaceSVG();
260
- i0.ɵɵdomElementStart(26, "svg", 16);
261
- i0.ɵɵdomElement(27, "path", 17);
258
+ i0.ɵɵdomElementStart(26, "svg", 18);
259
+ i0.ɵɵdomElement(27, "path", 19);
262
260
  i0.ɵɵdomElementEnd()();
263
261
  i0.ɵɵnamespaceHTML();
264
- i0.ɵɵdomElementStart(28, "h3", 18);
262
+ i0.ɵɵdomElementStart(28, "h3", 20);
265
263
  i0.ɵɵtext(29, "Key Strengths");
266
264
  i0.ɵɵdomElementEnd()();
267
- i0.ɵɵdomElementStart(30, "p", 19);
265
+ i0.ɵɵdomElementStart(30, "p", 21);
268
266
  i0.ɵɵtext(31);
269
267
  i0.ɵɵdomElementEnd()();
270
- i0.ɵɵdomElementStart(32, "div", 20)(33, "div", 14)(34, "div", 21);
268
+ i0.ɵɵdomElementStart(32, "div", 22)(33, "div", 16)(34, "div", 23);
271
269
  i0.ɵɵnamespaceSVG();
272
- i0.ɵɵdomElementStart(35, "svg", 22);
273
- i0.ɵɵdomElement(36, "path", 23);
270
+ i0.ɵɵdomElementStart(35, "svg", 24);
271
+ i0.ɵɵdomElement(36, "path", 25);
274
272
  i0.ɵɵdomElementEnd()();
275
273
  i0.ɵɵnamespaceHTML();
276
- i0.ɵɵdomElementStart(37, "h3", 24);
274
+ i0.ɵɵdomElementStart(37, "h3", 26);
277
275
  i0.ɵɵtext(38, "Areas for Improvement");
278
276
  i0.ɵɵdomElementEnd()();
279
- i0.ɵɵdomElementStart(39, "p", 19);
277
+ i0.ɵɵdomElementStart(39, "p", 21);
280
278
  i0.ɵɵtext(40);
281
279
  i0.ɵɵdomElementEnd()();
282
- i0.ɵɵdomElementStart(41, "div", 25)(42, "div", 14)(43, "div", 26);
280
+ i0.ɵɵdomElementStart(41, "div", 27)(42, "div", 16)(43, "div", 28);
283
281
  i0.ɵɵnamespaceSVG();
284
- i0.ɵɵdomElementStart(44, "svg", 27);
285
- i0.ɵɵdomElement(45, "path", 28);
282
+ i0.ɵɵdomElementStart(44, "svg", 29);
283
+ i0.ɵɵdomElement(45, "path", 30);
286
284
  i0.ɵɵdomElementEnd()();
287
285
  i0.ɵɵnamespaceHTML();
288
- i0.ɵɵdomElementStart(46, "h3", 29);
286
+ i0.ɵɵdomElementStart(46, "h3", 31);
289
287
  i0.ɵɵtext(47, "Prior Year Trend");
290
288
  i0.ɵɵdomElementEnd()();
291
- i0.ɵɵdomElementStart(48, "p", 19);
289
+ i0.ɵɵdomElementStart(48, "p", 21);
292
290
  i0.ɵɵtext(49);
293
291
  i0.ɵɵdomElementEnd()();
294
- i0.ɵɵdomElementStart(50, "div", 30)(51, "div", 14)(52, "div", 31);
292
+ i0.ɵɵdomElementStart(50, "div", 32)(51, "div", 16)(52, "div", 33);
295
293
  i0.ɵɵnamespaceSVG();
296
- i0.ɵɵdomElementStart(53, "svg", 32);
297
- i0.ɵɵdomElement(54, "path", 33);
294
+ i0.ɵɵdomElementStart(53, "svg", 34);
295
+ i0.ɵɵdomElement(54, "path", 35);
298
296
  i0.ɵɵdomElementEnd()();
299
297
  i0.ɵɵnamespaceHTML();
300
- i0.ɵɵdomElementStart(55, "h3", 34);
298
+ i0.ɵɵdomElementStart(55, "h3", 36);
301
299
  i0.ɵɵtext(56, "Recommended Actions");
302
300
  i0.ɵɵdomElementEnd()();
303
- i0.ɵɵdomElementStart(57, "p", 19);
301
+ i0.ɵɵdomElementStart(57, "p", 21);
304
302
  i0.ɵɵtext(58);
305
303
  i0.ɵɵdomElementEnd()()()();
306
304
  } if (rf & 2) {
@@ -335,116 +333,116 @@ class OverallAssessmentComponent {
335
333
  standalone: true,
336
334
  imports: [],
337
335
  template: `
338
- <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-8 border border-slate-700 shadow-xl">
339
- <div class="flex items-start justify-between mb-6">
340
- <div>
341
- <h2 class="text-3xl font-bold text-white mb-2">Overall Performance</h2>
342
- <p class="text-slate-400">{{ assessment.targetPacingStatus }}</p>
336
+ <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-4 sm:p-6 lg:p-8 border border-slate-700 shadow-xl">
337
+ <div class="flex flex-col sm:flex-row items-start justify-between gap-4 mb-4 sm:mb-6">
338
+ <div class="flex-1">
339
+ <h2 class="text-2xl sm:text-3xl font-bold text-white mb-2">Overall Performance</h2>
340
+ <p class="text-sm sm:text-base text-slate-400">{{ assessment.targetPacingStatus }}</p>
343
341
  </div>
344
- <div class="flex items-center gap-4">
345
- <div [class]="getStatusBadgeClass()" class="text-center">
342
+ <div class="flex items-center gap-3 sm:gap-4 w-full sm:w-auto">
343
+ <div [class]="getStatusBadgeClass()" class="text-center flex-1 sm:flex-initial">
346
344
  <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Status</div>
347
- <div class="text-lg font-bold">{{ getStatusLabel() }}</div>
345
+ <div class="text-base sm:text-lg font-bold">{{ getStatusLabel() }}</div>
348
346
  </div>
349
- <div [class]="getGradeBadgeClass()">
347
+ <div [class]="getGradeBadgeClass()" class="flex-1 sm:flex-initial">
350
348
  <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Grade</div>
351
- <div class="text-4xl font-bold">{{ assessment.grade }}</div>
349
+ <div class="text-3xl sm:text-4xl font-bold">{{ assessment.grade }}</div>
352
350
  </div>
353
351
  </div>
354
352
  </div>
355
353
 
356
354
  @if (revenueMetric) {
357
- <div class="bg-gradient-to-r from-emerald-500/20 to-blue-500/20 rounded-xl p-6 mb-6 border-2 border-emerald-500/40">
358
- <div class="flex items-center justify-between">
359
- <div class="flex-1">
355
+ <div class="bg-gradient-to-r from-emerald-500/20 to-blue-500/20 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 border-2 border-emerald-500/40">
356
+ <div class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-0">
357
+ <div class="flex-1 w-full">
360
358
  <div class="flex items-center gap-3 mb-2">
361
- <div class="w-12 h-12 bg-emerald-500/30 rounded-lg flex items-center justify-center">
362
- <svg class="w-7 h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
359
+ <div class="w-10 h-10 sm:w-12 sm:h-12 bg-emerald-500/30 rounded-lg flex items-center justify-center flex-shrink-0">
360
+ <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
363
361
  <path 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" />
364
362
  </svg>
365
363
  </div>
366
- <div>
367
- <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Your Revenue</h3>
368
- <p class="text-4xl font-bold text-white">{{ formatRevenue(revenueMetric.currentValue || 0) }}</p>
364
+ <div class="min-w-0 flex-1">
365
+ <h3 class="text-xs sm:text-sm font-semibold text-slate-400 uppercase tracking-wider">Your Revenue</h3>
366
+ <p class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white truncate">{{ formatRevenue(revenueMetric.currentValue || 0) }}</p>
369
367
  </div>
370
368
  </div>
371
- <div class="flex items-center gap-4 mt-3">
369
+ <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-3">
372
370
  <div class="flex items-center gap-2">
373
- <svg class="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
371
+ <svg class="w-4 h-4 sm:w-5 sm:h-5 text-emerald-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
374
372
  <path 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" />
375
373
  </svg>
376
- <span class="text-emerald-400 font-semibold text-lg">{{ formatPercent(revenueMetric.trendPercent || 0) }}%</span>
377
- <span class="text-slate-400 text-sm">vs last year</span>
374
+ <span class="text-emerald-400 font-semibold text-base sm:text-lg">{{ formatPercent(revenueMetric.trendPercent || 0) }}%</span>
375
+ <span class="text-slate-400 text-xs sm:text-sm">vs last year</span>
378
376
  </div>
379
- <div class="h-6 w-px bg-slate-600"></div>
377
+ <div class="hidden sm:block h-6 w-px bg-slate-600"></div>
380
378
  <div>
381
- <span class="text-slate-400 text-sm">Target: </span>
382
- <span class="text-white font-semibold">{{ formatRevenue(revenueMetric.targetValue || 0) }}</span>
379
+ <span class="text-slate-400 text-xs sm:text-sm">Target: </span>
380
+ <span class="text-white font-semibold text-sm sm:text-base">{{ formatRevenue(revenueMetric.targetValue || 0) }}</span>
383
381
  </div>
384
382
  </div>
385
383
  </div>
386
- <div class="text-right">
384
+ <div class="w-full md:w-auto md:text-right md:ml-4">
387
385
  <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Status</div>
388
- <div [class]="getRevenueStatusClass()" class="inline-block px-4 py-2 rounded-lg font-bold text-lg">
386
+ <div [class]="getRevenueStatusClass()" class="inline-block px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg font-bold text-base sm:text-lg">
389
387
  {{ (revenueMetric.status || 'ON_TRACK').replace('_', ' ') }}
390
388
  </div>
391
- <div class="mt-2 text-sm text-slate-400">{{ revenueMetric.description }}</div>
389
+ <div class="mt-2 text-xs sm:text-sm text-slate-400">{{ revenueMetric.description }}</div>
392
390
  </div>
393
391
  </div>
394
392
  </div>
395
393
  }
396
394
 
397
- <div class="bg-slate-900/50 rounded-xl p-6 mb-6 border border-slate-700">
398
- <p class="text-slate-300 leading-relaxed">{{ assessment.narrative }}</p>
395
+ <div class="bg-slate-900/50 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 border border-slate-700">
396
+ <p class="text-sm sm:text-base text-slate-300 leading-relaxed">{{ assessment.narrative }}</p>
399
397
  </div>
400
398
 
401
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
402
- <div class="bg-emerald-500/10 rounded-xl p-6 border border-emerald-500/30">
399
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
400
+ <div class="bg-emerald-500/10 rounded-xl p-4 sm:p-6 border border-emerald-500/30">
403
401
  <div class="flex items-center gap-3 mb-3">
404
- <div class="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center">
405
- <svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
402
+ <div class="w-8 h-8 sm:w-10 sm:h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
403
+ <svg class="w-5 h-5 sm:w-6 sm:h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
406
404
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
407
405
  </svg>
408
406
  </div>
409
- <h3 class="text-lg font-semibold text-emerald-400">Key Strengths</h3>
407
+ <h3 class="text-base sm:text-lg font-semibold text-emerald-400">Key Strengths</h3>
410
408
  </div>
411
- <p class="text-sm text-slate-300 leading-relaxed">{{ assessment.keyStrengths }}</p>
409
+ <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">{{ assessment.keyStrengths }}</p>
412
410
  </div>
413
411
 
414
- <div class="bg-amber-500/10 rounded-xl p-6 border border-amber-500/30">
412
+ <div class="bg-amber-500/10 rounded-xl p-4 sm:p-6 border border-amber-500/30">
415
413
  <div class="flex items-center gap-3 mb-3">
416
- <div class="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center">
417
- <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
414
+ <div class="w-8 h-8 sm:w-10 sm:h-10 bg-amber-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
415
+ <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
418
416
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
419
417
  </svg>
420
418
  </div>
421
- <h3 class="text-lg font-semibold text-amber-400">Areas for Improvement</h3>
419
+ <h3 class="text-base sm:text-lg font-semibold text-amber-400">Areas for Improvement</h3>
422
420
  </div>
423
- <p class="text-sm text-slate-300 leading-relaxed">{{ assessment.areasForImprovement }}</p>
421
+ <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">{{ assessment.areasForImprovement }}</p>
424
422
  </div>
425
423
 
426
- <div class="bg-blue-500/10 rounded-xl p-6 border border-blue-500/30">
424
+ <div class="bg-blue-500/10 rounded-xl p-4 sm:p-6 border border-blue-500/30">
427
425
  <div class="flex items-center gap-3 mb-3">
428
- <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
429
- <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
426
+ <div class="w-8 h-8 sm:w-10 sm:h-10 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
427
+ <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
430
428
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
431
429
  </svg>
432
430
  </div>
433
- <h3 class="text-lg font-semibold text-blue-400">Prior Year Trend</h3>
431
+ <h3 class="text-base sm:text-lg font-semibold text-blue-400">Prior Year Trend</h3>
434
432
  </div>
435
- <p class="text-sm text-slate-300 leading-relaxed">{{ assessment.priorYearTrend }}</p>
433
+ <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">{{ assessment.priorYearTrend }}</p>
436
434
  </div>
437
435
 
438
- <div class="bg-purple-500/10 rounded-xl p-6 border border-purple-500/30">
436
+ <div class="bg-purple-500/10 rounded-xl p-4 sm:p-6 border border-purple-500/30">
439
437
  <div class="flex items-center gap-3 mb-3">
440
- <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
441
- <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
438
+ <div class="w-8 h-8 sm:w-10 sm:h-10 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
439
+ <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
442
440
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
443
441
  </svg>
444
442
  </div>
445
- <h3 class="text-lg font-semibold text-purple-400">Recommended Actions</h3>
443
+ <h3 class="text-base sm:text-lg font-semibold text-purple-400">Recommended Actions</h3>
446
444
  </div>
447
- <p class="text-sm text-slate-300 leading-relaxed">{{ assessment.recommendedActions }}</p>
445
+ <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">{{ assessment.recommendedActions }}</p>
448
446
  </div>
449
447
  </div>
450
448
  </div>
@@ -458,44 +456,44 @@ class OverallAssessmentComponent {
458
456
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/overall-assessment.component.ts", lineNumber: 124 }); })();
459
457
 
460
458
  const _c0$1 = () => [];
461
- function InsightCardComponent_button_22_Template(rf, ctx) { if (rf & 1) {
459
+ function InsightCardComponent_For_23_Template(rf, ctx) { if (rf & 1) {
462
460
  const _r1 = i0.ɵɵgetCurrentView();
463
- i0.ɵɵelementStart(0, "button", 10);
464
- i0.ɵɵlistener("click", function InsightCardComponent_button_22_Template_button_click_0_listener() { const metricName_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openMetricModal(metricName_r2)); });
461
+ i0.ɵɵdomElementStart(0, "button", 9);
462
+ i0.ɵɵdomListener("click", function InsightCardComponent_For_23_Template_button_click_0_listener() { const metricName_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openMetricModal(metricName_r2)); });
465
463
  i0.ɵɵtext(1);
466
- i0.ɵɵelementEnd();
464
+ i0.ɵɵdomElementEnd();
467
465
  } if (rf & 2) {
468
466
  const metricName_r2 = ctx.$implicit;
469
467
  const ctx_r2 = i0.ɵɵnextContext();
470
468
  i0.ɵɵadvance();
471
469
  i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricName(metricName_r2), " ");
472
470
  } }
473
- function InsightCardComponent_div_23_li_4_Template(rf, ctx) { if (rf & 1) {
474
- i0.ɵɵelementStart(0, "li", 14);
471
+ function InsightCardComponent_Conditional_24_For_5_Template(rf, ctx) { if (rf & 1) {
472
+ i0.ɵɵdomElementStart(0, "li", 12);
475
473
  i0.ɵɵnamespaceSVG();
476
- i0.ɵɵelementStart(1, "svg", 15);
477
- i0.ɵɵelement(2, "path", 16);
478
- i0.ɵɵelementEnd();
474
+ i0.ɵɵdomElementStart(1, "svg", 13);
475
+ i0.ɵɵdomElement(2, "path", 14);
476
+ i0.ɵɵdomElementEnd();
479
477
  i0.ɵɵnamespaceHTML();
480
- i0.ɵɵelementStart(3, "span", 17);
478
+ i0.ɵɵdomElementStart(3, "span", 15);
481
479
  i0.ɵɵtext(4);
482
- i0.ɵɵelementEnd()();
480
+ i0.ɵɵdomElementEnd()();
483
481
  } if (rf & 2) {
484
482
  const rec_r4 = ctx.$implicit;
485
483
  i0.ɵɵadvance(4);
486
484
  i0.ɵɵtextInterpolate(rec_r4);
487
485
  } }
488
- function InsightCardComponent_div_23_Template(rf, ctx) { if (rf & 1) {
489
- i0.ɵɵelementStart(0, "div")(1, "h4", 11);
486
+ function InsightCardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
487
+ i0.ɵɵdomElementStart(0, "div")(1, "h4", 10);
490
488
  i0.ɵɵtext(2, "Recommendations");
491
- i0.ɵɵelementEnd();
492
- i0.ɵɵelementStart(3, "ul", 12);
493
- i0.ɵɵtemplate(4, InsightCardComponent_div_23_li_4_Template, 5, 1, "li", 13);
494
- i0.ɵɵelementEnd()();
489
+ i0.ɵɵdomElementEnd();
490
+ i0.ɵɵdomElementStart(3, "ul", 11);
491
+ i0.ɵɵrepeaterCreate(4, InsightCardComponent_Conditional_24_For_5_Template, 5, 1, "li", 12, i0.ɵɵrepeaterTrackByIndex);
492
+ i0.ɵɵdomElementEnd()();
495
493
  } if (rf & 2) {
496
494
  const ctx_r2 = i0.ɵɵnextContext();
497
495
  i0.ɵɵadvance(4);
498
- i0.ɵɵproperty("ngForOf", ctx_r2.insight.recommendations || i0.ɵɵpureFunction0(1, _c0$1));
496
+ i0.ɵɵrepeater(ctx_r2.insight.recommendations || i0.ɵɵpureFunction0(0, _c0$1));
499
497
  } }
500
498
  class InsightCardComponent {
501
499
  constructor(modalService) {
@@ -526,33 +524,33 @@ class InsightCardComponent {
526
524
  }
527
525
  }
528
526
  static { this.ɵfac = function InsightCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InsightCardComponent)(i0.ɵɵdirectiveInject(ModalService)); }; }
529
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InsightCardComponent, selectors: [["symphiq-funnel-analysis-insight-card"]], inputs: { insight: "insight", allMetrics: "allMetrics" }, decls: 24, vars: 8, consts: [[1, "bg-slate-800", "rounded-xl", "p-6", "border", "border-slate-700", "hover:border-slate-600", "transition-all", "duration-300"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex", "items-center", "gap-3"], [1, "text-lg", "font-semibold", "text-white"], [1, "space-y-4"], [1, "text-sm", "font-medium", "text-slate-400", "mb-2"], [1, "text-sm", "text-slate-300", "leading-relaxed"], [1, "flex", "flex-wrap", "gap-2"], ["class", "px-3 py-1 bg-slate-700 hover:bg-slate-600 text-slate-300 hover:text-white text-xs font-medium rounded-full border border-slate-600 hover:border-blue-500 transition-all cursor-pointer", 3, "click", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "px-3", "py-1", "bg-slate-700", "hover:bg-slate-600", "text-slate-300", "hover:text-white", "text-xs", "font-medium", "rounded-full", "border", "border-slate-600", "hover:border-blue-500", "transition-all", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", "text-slate-400", "mb-3"], [1, "space-y-2"], ["class", "flex items-start gap-2 text-sm text-slate-300", 4, "ngFor", "ngForOf"], [1, "flex", "items-start", "gap-2", "text-sm", "text-slate-300"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-blue-400", "flex-shrink-0", "mt-0.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "leading-relaxed"]], template: function InsightCardComponent_Template(rf, ctx) { if (rf & 1) {
530
- i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div");
527
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InsightCardComponent, selectors: [["symphiq-funnel-analysis-insight-card"]], inputs: { insight: "insight", allMetrics: "allMetrics" }, decls: 25, vars: 7, consts: [[1, "bg-slate-800", "rounded-xl", "p-6", "border", "border-slate-700", "hover:border-slate-600", "transition-all", "duration-300"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex", "items-center", "gap-3"], [1, "text-lg", "font-semibold", "text-white"], [1, "space-y-4"], [1, "text-sm", "font-medium", "text-slate-400", "mb-2"], [1, "text-sm", "text-slate-300", "leading-relaxed"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "bg-slate-700", "hover:bg-slate-600", "text-slate-300", "hover:text-white", "text-xs", "font-medium", "rounded-full", "border", "border-slate-600", "hover:border-blue-500", "transition-all", "cursor-pointer"], [1, "px-3", "py-1", "bg-slate-700", "hover:bg-slate-600", "text-slate-300", "hover:text-white", "text-xs", "font-medium", "rounded-full", "border", "border-slate-600", "hover:border-blue-500", "transition-all", "cursor-pointer", 3, "click"], [1, "text-sm", "font-medium", "text-slate-400", "mb-3"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", "text-slate-300"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-blue-400", "flex-shrink-0", "mt-0.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "leading-relaxed"]], template: function InsightCardComponent_Template(rf, ctx) { if (rf & 1) {
528
+ i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div");
531
529
  i0.ɵɵtext(4);
532
- i0.ɵɵelementEnd();
533
- i0.ɵɵelementStart(5, "h3", 3);
530
+ i0.ɵɵdomElementEnd();
531
+ i0.ɵɵdomElementStart(5, "h3", 3);
534
532
  i0.ɵɵtext(6);
535
- i0.ɵɵelementEnd()()();
536
- i0.ɵɵelementStart(7, "div", 4)(8, "div")(9, "h4", 5);
533
+ i0.ɵɵdomElementEnd()()();
534
+ i0.ɵɵdomElementStart(7, "div", 4)(8, "div")(9, "h4", 5);
537
535
  i0.ɵɵtext(10, "Context");
538
- i0.ɵɵelementEnd();
539
- i0.ɵɵelementStart(11, "p", 6);
536
+ i0.ɵɵdomElementEnd();
537
+ i0.ɵɵdomElementStart(11, "p", 6);
540
538
  i0.ɵɵtext(12);
541
- i0.ɵɵelementEnd()();
542
- i0.ɵɵelementStart(13, "div")(14, "h4", 5);
539
+ i0.ɵɵdomElementEnd()();
540
+ i0.ɵɵdomElementStart(13, "div")(14, "h4", 5);
543
541
  i0.ɵɵtext(15, "Description");
544
- i0.ɵɵelementEnd();
545
- i0.ɵɵelementStart(16, "p", 6);
542
+ i0.ɵɵdomElementEnd();
543
+ i0.ɵɵdomElementStart(16, "p", 6);
546
544
  i0.ɵɵtext(17);
547
- i0.ɵɵelementEnd()();
548
- i0.ɵɵelementStart(18, "div")(19, "h4", 5);
545
+ i0.ɵɵdomElementEnd()();
546
+ i0.ɵɵdomElementStart(18, "div")(19, "h4", 5);
549
547
  i0.ɵɵtext(20, "Related Metrics");
550
- i0.ɵɵelementEnd();
551
- i0.ɵɵelementStart(21, "div", 7);
552
- i0.ɵɵtemplate(22, InsightCardComponent_button_22_Template, 2, 1, "button", 8);
553
- i0.ɵɵelementEnd()();
554
- i0.ɵɵtemplate(23, InsightCardComponent_div_23_Template, 5, 2, "div", 9);
555
- i0.ɵɵelementEnd()();
548
+ i0.ɵɵdomElementEnd();
549
+ i0.ɵɵdomElementStart(21, "div", 7);
550
+ i0.ɵɵrepeaterCreate(22, InsightCardComponent_For_23_Template, 2, 1, "button", 8, i0.ɵɵrepeaterTrackByIdentity);
551
+ i0.ɵɵdomElementEnd()();
552
+ i0.ɵɵconditionalCreate(24, InsightCardComponent_Conditional_24_Template, 6, 1, "div");
553
+ i0.ɵɵdomElementEnd()();
556
554
  } if (rf & 2) {
557
555
  i0.ɵɵadvance(3);
558
556
  i0.ɵɵclassMap(ctx.getPriorityBadgeClass());
@@ -565,17 +563,17 @@ class InsightCardComponent {
565
563
  i0.ɵɵadvance(5);
566
564
  i0.ɵɵtextInterpolate(ctx.insight.description);
567
565
  i0.ɵɵadvance(5);
568
- i0.ɵɵproperty("ngForOf", ctx.insight.relatedMetrics);
569
- i0.ɵɵadvance();
570
- i0.ɵɵproperty("ngIf", ((ctx.insight.recommendations == null ? null : ctx.insight.recommendations.length) || 0) > 0);
571
- } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf], encapsulation: 2 }); }
566
+ i0.ɵɵrepeater(ctx.insight.relatedMetrics);
567
+ i0.ɵɵadvance(2);
568
+ i0.ɵɵconditional(((ctx.insight.recommendations == null ? null : ctx.insight.recommendations.length) || 0) > 0 ? 24 : -1);
569
+ } }, encapsulation: 2 }); }
572
570
  }
573
571
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InsightCardComponent, [{
574
572
  type: Component,
575
573
  args: [{
576
574
  selector: 'symphiq-funnel-analysis-insight-card',
577
575
  standalone: true,
578
- imports: [CommonModule],
576
+ imports: [],
579
577
  template: `
580
578
  <div class="bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-slate-600 transition-all duration-300">
581
579
  <div class="flex items-start justify-between mb-4">
@@ -601,26 +599,31 @@ class InsightCardComponent {
601
599
  <div>
602
600
  <h4 class="text-sm font-medium text-slate-400 mb-2">Related Metrics</h4>
603
601
  <div class="flex flex-wrap gap-2">
604
- <button
605
- *ngFor="let metricName of insight.relatedMetrics"
606
- (click)="openMetricModal(metricName)"
607
- class="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-slate-300 hover:text-white text-xs font-medium rounded-full border border-slate-600 hover:border-blue-500 transition-all cursor-pointer">
608
- {{ formatMetricName(metricName) }}
609
- </button>
602
+ @for (metricName of insight.relatedMetrics; track metricName) {
603
+ <button
604
+ (click)="openMetricModal(metricName)"
605
+ class="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-slate-300 hover:text-white text-xs font-medium rounded-full border border-slate-600 hover:border-blue-500 transition-all cursor-pointer">
606
+ {{ formatMetricName(metricName) }}
607
+ </button>
608
+ }
610
609
  </div>
611
610
  </div>
612
611
 
613
- <div *ngIf="(insight.recommendations?.length || 0) > 0">
614
- <h4 class="text-sm font-medium text-slate-400 mb-3">Recommendations</h4>
615
- <ul class="space-y-2">
616
- <li *ngFor="let rec of (insight.recommendations || [])" class="flex items-start gap-2 text-sm text-slate-300">
617
- <svg class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
618
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
619
- </svg>
620
- <span class="leading-relaxed">{{ rec }}</span>
621
- </li>
622
- </ul>
623
- </div>
612
+ @if ((insight.recommendations?.length || 0) > 0) {
613
+ <div>
614
+ <h4 class="text-sm font-medium text-slate-400 mb-3">Recommendations</h4>
615
+ <ul class="space-y-2">
616
+ @for (rec of (insight.recommendations || []); track $index) {
617
+ <li class="flex items-start gap-2 text-sm text-slate-300">
618
+ <svg class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
619
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
620
+ </svg>
621
+ <span class="leading-relaxed">{{ rec }}</span>
622
+ </li>
623
+ }
624
+ </ul>
625
+ </div>
626
+ }
624
627
  </div>
625
628
  </div>
626
629
  `,
@@ -630,39 +633,39 @@ class InsightCardComponent {
630
633
  }], allMetrics: [{
631
634
  type: Input
632
635
  }] }); })();
633
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InsightCardComponent, { className: "InsightCardComponent", filePath: "lib/components/insight-card.component.ts", lineNumber: 59 }); })();
636
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InsightCardComponent, { className: "InsightCardComponent", filePath: "lib/components/insight-card.component.ts", lineNumber: 63 }); })();
634
637
 
635
- function MetricCardComponent_span_6_Template(rf, ctx) { if (rf & 1) {
636
- i0.ɵɵelementStart(0, "span", 19);
638
+ function MetricCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
639
+ i0.ɵɵdomElementStart(0, "span", 4);
637
640
  i0.ɵɵtext(1, " FUNNEL STAGE ");
638
- i0.ɵɵelementEnd();
641
+ i0.ɵɵdomElementEnd();
639
642
  } }
640
- function MetricCardComponent__svg_svg_11_Template(rf, ctx) { if (rf & 1) {
643
+ function MetricCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
641
644
  i0.ɵɵnamespaceSVG();
642
- i0.ɵɵelementStart(0, "svg", 20);
643
- i0.ɵɵelement(1, "path", 21);
644
- i0.ɵɵelementEnd();
645
+ i0.ɵɵdomElementStart(0, "svg", 8);
646
+ i0.ɵɵdomElement(1, "path", 19);
647
+ i0.ɵɵdomElementEnd();
645
648
  } }
646
- function MetricCardComponent__svg_svg_12_Template(rf, ctx) { if (rf & 1) {
649
+ function MetricCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
647
650
  i0.ɵɵnamespaceSVG();
648
- i0.ɵɵelementStart(0, "svg", 20);
649
- i0.ɵɵelement(1, "path", 22);
650
- i0.ɵɵelementEnd();
651
+ i0.ɵɵdomElementStart(0, "svg", 8);
652
+ i0.ɵɵdomElement(1, "path", 20);
653
+ i0.ɵɵdomElementEnd();
651
654
  } }
652
- function MetricCardComponent_div_31_button_7_Template(rf, ctx) { if (rf & 1) {
655
+ function MetricCardComponent_Conditional_31_For_8_Template(rf, ctx) { if (rf & 1) {
653
656
  const _r1 = i0.ɵɵgetCurrentView();
654
- i0.ɵɵelementStart(0, "button", 30);
655
- i0.ɵɵlistener("click", function MetricCardComponent_div_31_button_7_Template_button_click_0_listener() { const insight_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openInsightModal(insight_r2)); });
656
- i0.ɵɵelementStart(1, "span", 31);
657
+ i0.ɵɵdomElementStart(0, "button", 27);
658
+ i0.ɵɵdomListener("click", function MetricCardComponent_Conditional_31_For_8_Template_button_click_0_listener() { const insight_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openInsightModal(insight_r2)); });
659
+ i0.ɵɵdomElementStart(1, "span", 28);
657
660
  i0.ɵɵtext(2);
658
- i0.ɵɵelementEnd();
659
- i0.ɵɵelementStart(3, "span", 32);
661
+ i0.ɵɵdomElementEnd();
662
+ i0.ɵɵdomElementStart(3, "span", 29);
660
663
  i0.ɵɵtext(4);
661
- i0.ɵɵelementEnd();
664
+ i0.ɵɵdomElementEnd();
662
665
  i0.ɵɵnamespaceSVG();
663
- i0.ɵɵelementStart(5, "svg", 33);
664
- i0.ɵɵelement(6, "path", 34);
665
- i0.ɵɵelementEnd()();
666
+ i0.ɵɵdomElementStart(5, "svg", 30);
667
+ i0.ɵɵdomElement(6, "path", 31);
668
+ i0.ɵɵdomElementEnd()();
666
669
  } if (rf & 2) {
667
670
  const insight_r2 = ctx.$implicit;
668
671
  i0.ɵɵadvance(2);
@@ -670,23 +673,23 @@ function MetricCardComponent_div_31_button_7_Template(rf, ctx) { if (rf & 1) {
670
673
  i0.ɵɵadvance(2);
671
674
  i0.ɵɵtextInterpolate(insight_r2.title);
672
675
  } }
673
- function MetricCardComponent_div_31_Template(rf, ctx) { if (rf & 1) {
674
- i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
676
+ function MetricCardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
677
+ i0.ɵɵdomElementStart(0, "div", 18)(1, "div", 21);
675
678
  i0.ɵɵnamespaceSVG();
676
- i0.ɵɵelementStart(2, "svg", 25);
677
- i0.ɵɵelement(3, "path", 26);
678
- i0.ɵɵelementEnd();
679
+ i0.ɵɵdomElementStart(2, "svg", 22);
680
+ i0.ɵɵdomElement(3, "path", 23);
681
+ i0.ɵɵdomElementEnd();
679
682
  i0.ɵɵnamespaceHTML();
680
- i0.ɵɵelementStart(4, "h4", 27);
683
+ i0.ɵɵdomElementStart(4, "h4", 24);
681
684
  i0.ɵɵtext(5, "Related Insights");
682
- i0.ɵɵelementEnd()();
683
- i0.ɵɵelementStart(6, "div", 28);
684
- i0.ɵɵtemplate(7, MetricCardComponent_div_31_button_7_Template, 7, 2, "button", 29);
685
- i0.ɵɵelementEnd()();
685
+ i0.ɵɵdomElementEnd()();
686
+ i0.ɵɵdomElementStart(6, "div", 25);
687
+ i0.ɵɵrepeaterCreate(7, MetricCardComponent_Conditional_31_For_8_Template, 7, 2, "button", 26, i0.ɵɵrepeaterTrackByIndex);
688
+ i0.ɵɵdomElementEnd()();
686
689
  } if (rf & 2) {
687
690
  const ctx_r2 = i0.ɵɵnextContext();
688
691
  i0.ɵɵadvance(7);
689
- i0.ɵɵproperty("ngForOf", ctx_r2.relatedInsights);
692
+ i0.ɵɵrepeater(ctx_r2.relatedInsights);
690
693
  } }
691
694
  class MetricCardComponent {
692
695
  constructor(modalService, funnelOrderService) {
@@ -776,56 +779,57 @@ class MetricCardComponent {
776
779
  return 'bg-gradient-to-r from-blue-500 to-blue-400';
777
780
  }
778
781
  static { this.ɵfac = function MetricCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricCardComponent)(i0.ɵɵdirectiveInject(ModalService), i0.ɵɵdirectiveInject(FunnelOrderService)); }; }
779
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricCardComponent, selectors: [["symphiq-funnel-analysis-metric-card"]], inputs: { metric: "metric", insights: "insights" }, decls: 32, vars: 23, consts: [[1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-sm", "font-medium", "text-slate-400"], ["class", "px-2 py-0.5 bg-purple-500/20 text-purple-300 text-xs font-semibold rounded border border-purple-500/30", 4, "ngIf"], [1, "flex", "items-baseline", "gap-2"], [1, "text-3xl", "font-bold", "text-white"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1"], ["class", "w-4 h-4", "fill", "currentColor", "viewBox", "0 0 20 20", 4, "ngIf"], [1, "space-y-3"], [1, "flex", "justify-between", "items-center", "text-sm"], [1, "text-slate-400"], [1, "text-white", "font-medium"], [1, "w-full", "bg-slate-700", "rounded-full", "h-2.5", "overflow-hidden"], [1, "h-2.5", "rounded-full", "transition-all", "duration-500"], [1, "flex", "justify-between", "items-center", "text-xs"], [1, "text-slate-500"], [1, "mt-4", "text-sm", "text-slate-400", "leading-relaxed", "flex-grow"], ["class", "mt-6 flex-shrink-0", 4, "ngIf"], [1, "px-2", "py-0.5", "bg-purple-500/20", "text-purple-300", "text-xs", "font-semibold", "rounded", "border", "border-purple-500/30"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "mt-6", "flex-shrink-0"], [1, "flex", "items-center", "gap-2", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-blue-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "text-slate-300", "uppercase", "tracking-wide"], [1, "space-y-2"], ["class", "w-full text-left flex items-center gap-2 p-3 bg-slate-900/30 hover:bg-slate-900/50 rounded-lg border border-slate-700/50 hover:border-blue-500/50 transition-all cursor-pointer group", 3, "click", 4, "ngFor", "ngForOf"], [1, "w-full", "text-left", "flex", "items-center", "gap-2", "p-3", "bg-slate-900/30", "hover:bg-slate-900/50", "rounded-lg", "border", "border-slate-700/50", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", 3, "click"], [1, "inline-flex", "items-center", "justify-center", "w-6", "h-6", "rounded-full", "bg-blue-500/20", "text-blue-400", "text-xs", "font-bold", "flex-shrink-0", "group-hover:bg-blue-500/30"], [1, "text-sm", "text-slate-300", "group-hover:text-white", "transition-colors", "flex-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-slate-500", "group-hover:text-blue-400", "transition-colors"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function MetricCardComponent_Template(rf, ctx) { if (rf & 1) {
780
- i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "div", 1)(3, "div", 2)(4, "h3", 3);
782
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricCardComponent, selectors: [["symphiq-funnel-analysis-metric-card"]], inputs: { metric: "metric", insights: "insights" }, decls: 32, vars: 23, consts: [[1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-sm", "font-medium", "text-slate-400"], [1, "px-2", "py-0.5", "bg-purple-500/20", "text-purple-300", "text-xs", "font-semibold", "rounded", "border", "border-purple-500/30"], [1, "flex", "items-baseline", "gap-2"], [1, "text-3xl", "font-bold", "text-white"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "space-y-3"], [1, "flex", "justify-between", "items-center", "text-sm"], [1, "text-slate-400"], [1, "text-white", "font-medium"], [1, "w-full", "bg-slate-700", "rounded-full", "h-2.5", "overflow-hidden"], [1, "h-2.5", "rounded-full", "transition-all", "duration-500"], [1, "flex", "justify-between", "items-center", "text-xs"], [1, "text-slate-500"], [1, "mt-4", "text-sm", "text-slate-400", "leading-relaxed", "flex-grow"], [1, "mt-6", "flex-shrink-0"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "flex", "items-center", "gap-2", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-blue-400"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "text-slate-300", "uppercase", "tracking-wide"], [1, "space-y-2"], [1, "w-full", "text-left", "flex", "items-center", "gap-2", "p-3", "bg-slate-900/30", "hover:bg-slate-900/50", "rounded-lg", "border", "border-slate-700/50", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group"], [1, "w-full", "text-left", "flex", "items-center", "gap-2", "p-3", "bg-slate-900/30", "hover:bg-slate-900/50", "rounded-lg", "border", "border-slate-700/50", "hover:border-blue-500/50", "transition-all", "cursor-pointer", "group", 3, "click"], [1, "inline-flex", "items-center", "justify-center", "w-6", "h-6", "rounded-full", "bg-blue-500/20", "text-blue-400", "text-xs", "font-bold", "flex-shrink-0", "group-hover:bg-blue-500/30"], [1, "text-sm", "text-slate-300", "group-hover:text-white", "transition-colors", "flex-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-slate-500", "group-hover:text-blue-400", "transition-colors"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function MetricCardComponent_Template(rf, ctx) { if (rf & 1) {
783
+ i0.ɵɵdomElementStart(0, "div")(1, "div", 0)(2, "div", 1)(3, "div", 2)(4, "h3", 3);
781
784
  i0.ɵɵtext(5);
782
- i0.ɵɵelementEnd();
783
- i0.ɵɵtemplate(6, MetricCardComponent_span_6_Template, 2, 0, "span", 4);
784
- i0.ɵɵelementEnd();
785
- i0.ɵɵelementStart(7, "div", 5)(8, "span", 6);
785
+ i0.ɵɵdomElementEnd();
786
+ i0.ɵɵconditionalCreate(6, MetricCardComponent_Conditional_6_Template, 2, 0, "span", 4);
787
+ i0.ɵɵdomElementEnd();
788
+ i0.ɵɵdomElementStart(7, "div", 5)(8, "span", 6);
786
789
  i0.ɵɵtext(9);
787
- i0.ɵɵelementEnd();
788
- i0.ɵɵelementStart(10, "span", 7);
789
- i0.ɵɵtemplate(11, MetricCardComponent__svg_svg_11_Template, 2, 0, "svg", 8)(12, MetricCardComponent__svg_svg_12_Template, 2, 0, "svg", 8);
790
+ i0.ɵɵdomElementEnd();
791
+ i0.ɵɵdomElementStart(10, "span", 7);
792
+ i0.ɵɵconditionalCreate(11, MetricCardComponent_Conditional_11_Template, 2, 0, ":svg:svg", 8);
793
+ i0.ɵɵconditionalCreate(12, MetricCardComponent_Conditional_12_Template, 2, 0, ":svg:svg", 8);
790
794
  i0.ɵɵtext(13);
791
- i0.ɵɵelementEnd()()();
792
- i0.ɵɵelementStart(14, "div");
795
+ i0.ɵɵdomElementEnd()()();
796
+ i0.ɵɵdomElementStart(14, "div");
793
797
  i0.ɵɵtext(15);
794
- i0.ɵɵelementEnd()();
795
- i0.ɵɵelementStart(16, "div", 9)(17, "div", 10)(18, "span", 11);
798
+ i0.ɵɵdomElementEnd()();
799
+ i0.ɵɵdomElementStart(16, "div", 9)(17, "div", 10)(18, "span", 11);
796
800
  i0.ɵɵtext(19, "Target");
797
- i0.ɵɵelementEnd();
798
- i0.ɵɵelementStart(20, "span", 12);
801
+ i0.ɵɵdomElementEnd();
802
+ i0.ɵɵdomElementStart(20, "span", 12);
799
803
  i0.ɵɵtext(21);
800
- i0.ɵɵelementEnd()();
801
- i0.ɵɵelementStart(22, "div", 13);
802
- i0.ɵɵelement(23, "div", 14);
803
- i0.ɵɵelementEnd();
804
- i0.ɵɵelementStart(24, "div", 15)(25, "span", 16);
804
+ i0.ɵɵdomElementEnd()();
805
+ i0.ɵɵdomElementStart(22, "div", 13);
806
+ i0.ɵɵdomElement(23, "div", 14);
807
+ i0.ɵɵdomElementEnd();
808
+ i0.ɵɵdomElementStart(24, "div", 15)(25, "span", 16);
805
809
  i0.ɵɵtext(26);
806
- i0.ɵɵelementEnd();
807
- i0.ɵɵelementStart(27, "span", 16);
810
+ i0.ɵɵdomElementEnd();
811
+ i0.ɵɵdomElementStart(27, "span", 16);
808
812
  i0.ɵɵtext(28);
809
- i0.ɵɵelementEnd()()();
810
- i0.ɵɵelementStart(29, "p", 17);
813
+ i0.ɵɵdomElementEnd()()();
814
+ i0.ɵɵdomElementStart(29, "p", 17);
811
815
  i0.ɵɵtext(30);
812
- i0.ɵɵelementEnd();
813
- i0.ɵɵtemplate(31, MetricCardComponent_div_31_Template, 8, 1, "div", 18);
814
- i0.ɵɵelementEnd();
816
+ i0.ɵɵdomElementEnd();
817
+ i0.ɵɵconditionalCreate(31, MetricCardComponent_Conditional_31_Template, 9, 0, "div", 18);
818
+ i0.ɵɵdomElementEnd();
815
819
  } if (rf & 2) {
816
820
  i0.ɵɵclassMap(ctx.getCardClass());
817
821
  i0.ɵɵadvance(5);
818
822
  i0.ɵɵtextInterpolate(ctx.formatMetricName(ctx.metric.metric || "UNKNOWN"));
819
823
  i0.ɵɵadvance();
820
- i0.ɵɵproperty("ngIf", ctx.isFunnelStage);
824
+ i0.ɵɵconditional(ctx.isFunnelStage ? 6 : -1);
821
825
  i0.ɵɵadvance(3);
822
826
  i0.ɵɵtextInterpolate(ctx.formatValue(ctx.metric.currentValue || 0));
823
827
  i0.ɵɵadvance();
824
828
  i0.ɵɵclassMap(ctx.getTrendClass());
825
829
  i0.ɵɵadvance();
826
- i0.ɵɵproperty("ngIf", ctx.metric.trendDirection === "UP");
830
+ i0.ɵɵconditional(ctx.metric.trendDirection === "UP" ? 11 : -1);
827
831
  i0.ɵɵadvance();
828
- i0.ɵɵproperty("ngIf", ctx.metric.trendDirection === "DOWN");
832
+ i0.ɵɵconditional(ctx.metric.trendDirection === "DOWN" ? 12 : -1);
829
833
  i0.ɵɵadvance();
830
834
  i0.ɵɵtextInterpolate1(" ", ctx.Math.abs(ctx.metric.trendPercent || 0).toFixed(1), "% ");
831
835
  i0.ɵɵadvance();
@@ -844,34 +848,40 @@ class MetricCardComponent {
844
848
  i0.ɵɵadvance(2);
845
849
  i0.ɵɵtextInterpolate(ctx.metric.description);
846
850
  i0.ɵɵadvance();
847
- i0.ɵɵproperty("ngIf", ctx.relatedInsights.length > 0);
848
- } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf], encapsulation: 2 }); }
851
+ i0.ɵɵconditional(ctx.relatedInsights.length > 0 ? 31 : -1);
852
+ } }, encapsulation: 2 }); }
849
853
  }
850
854
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetricCardComponent, [{
851
855
  type: Component,
852
856
  args: [{
853
857
  selector: 'symphiq-funnel-analysis-metric-card',
854
858
  standalone: true,
855
- imports: [CommonModule],
859
+ imports: [],
856
860
  template: `
857
861
  <div [class]="getCardClass()">
858
862
  <div class="flex items-start justify-between mb-4">
859
863
  <div class="flex-1">
860
864
  <div class="flex items-center gap-2 mb-1">
861
865
  <h3 class="text-sm font-medium text-slate-400">{{ formatMetricName(metric.metric || 'UNKNOWN') }}</h3>
862
- <span *ngIf="isFunnelStage" class="px-2 py-0.5 bg-purple-500/20 text-purple-300 text-xs font-semibold rounded border border-purple-500/30">
863
- FUNNEL STAGE
864
- </span>
866
+ @if (isFunnelStage) {
867
+ <span class="px-2 py-0.5 bg-purple-500/20 text-purple-300 text-xs font-semibold rounded border border-purple-500/30">
868
+ FUNNEL STAGE
869
+ </span>
870
+ }
865
871
  </div>
866
872
  <div class="flex items-baseline gap-2">
867
873
  <span class="text-3xl font-bold text-white">{{ formatValue(metric.currentValue || 0) }}</span>
868
874
  <span [class]="getTrendClass()" class="text-sm font-semibold flex items-center gap-1">
869
- <svg *ngIf="metric.trendDirection === 'UP'" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
870
- <path 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" />
871
- </svg>
872
- <svg *ngIf="metric.trendDirection === 'DOWN'" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
873
- <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
874
- </svg>
875
+ @if (metric.trendDirection === 'UP') {
876
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
877
+ <path 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" />
878
+ </svg>
879
+ }
880
+ @if (metric.trendDirection === 'DOWN') {
881
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
882
+ <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
883
+ </svg>
884
+ }
875
885
  {{ Math.abs(metric.trendPercent || 0).toFixed(1) }}%
876
886
  </span>
877
887
  </div>
@@ -903,26 +913,29 @@ class MetricCardComponent {
903
913
 
904
914
  <p class="mt-4 text-sm text-slate-400 leading-relaxed flex-grow">{{ metric.description }}</p>
905
915
 
906
- <div *ngIf="relatedInsights.length > 0" class="mt-6 flex-shrink-0">
907
- <div class="flex items-center gap-2 mb-3">
908
- <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
909
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
910
- </svg>
911
- <h4 class="text-xs font-semibold text-slate-300 uppercase tracking-wide">Related Insights</h4>
912
- </div>
913
- <div class="space-y-2">
914
- <button
915
- *ngFor="let insight of relatedInsights"
916
- (click)="openInsightModal(insight)"
917
- class="w-full text-left flex items-center gap-2 p-3 bg-slate-900/30 hover:bg-slate-900/50 rounded-lg border border-slate-700/50 hover:border-blue-500/50 transition-all cursor-pointer group">
918
- <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold flex-shrink-0 group-hover:bg-blue-500/30">{{ insight.priority }}</span>
919
- <span class="text-sm text-slate-300 group-hover:text-white transition-colors flex-1">{{ insight.title }}</span>
920
- <svg class="w-4 h-4 text-slate-500 group-hover:text-blue-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
921
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
916
+ @if (relatedInsights.length > 0) {
917
+ <div class="mt-6 flex-shrink-0">
918
+ <div class="flex items-center gap-2 mb-3">
919
+ <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
920
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
922
921
  </svg>
923
- </button>
922
+ <h4 class="text-xs font-semibold text-slate-300 uppercase tracking-wide">Related Insights</h4>
923
+ </div>
924
+ <div class="space-y-2">
925
+ @for (insight of relatedInsights; track $index) {
926
+ <button
927
+ (click)="openInsightModal(insight)"
928
+ class="w-full text-left flex items-center gap-2 p-3 bg-slate-900/30 hover:bg-slate-900/50 rounded-lg border border-slate-700/50 hover:border-blue-500/50 transition-all cursor-pointer group">
929
+ <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold flex-shrink-0 group-hover:bg-blue-500/30">{{ insight.priority }}</span>
930
+ <span class="text-sm text-slate-300 group-hover:text-white transition-colors flex-1">{{ insight.title }}</span>
931
+ <svg class="w-4 h-4 text-slate-500 group-hover:text-blue-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
932
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
933
+ </svg>
934
+ </button>
935
+ }
936
+ </div>
924
937
  </div>
925
- </div>
938
+ }
926
939
  </div>
927
940
  `,
928
941
  }]
@@ -931,48 +944,48 @@ class MetricCardComponent {
931
944
  }], insights: [{
932
945
  type: Input
933
946
  }] }); })();
934
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/metric-card.component.ts", lineNumber: 84 }); })();
947
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/metric-card.component.ts", lineNumber: 92 }); })();
935
948
 
936
- function BreakdownSectionComponent_div_7_ng_container_18__svg_svg_13_Template(rf, ctx) { if (rf & 1) {
949
+ const _forTrack0$1 = ($index, $item) => $item.metric;
950
+ function BreakdownSectionComponent_For_8_For_19_Conditional_12_Template(rf, ctx) { if (rf & 1) {
937
951
  i0.ɵɵnamespaceSVG();
938
- i0.ɵɵelementStart(0, "svg", 28);
939
- i0.ɵɵelement(1, "path", 29);
940
- i0.ɵɵelementEnd();
952
+ i0.ɵɵdomElementStart(0, "svg", 20);
953
+ i0.ɵɵdomElement(1, "path", 26);
954
+ i0.ɵɵdomElementEnd();
941
955
  } }
942
- function BreakdownSectionComponent_div_7_ng_container_18__svg_svg_14_Template(rf, ctx) { if (rf & 1) {
956
+ function BreakdownSectionComponent_For_8_For_19_Conditional_13_Template(rf, ctx) { if (rf & 1) {
943
957
  i0.ɵɵnamespaceSVG();
944
- i0.ɵɵelementStart(0, "svg", 28);
945
- i0.ɵɵelement(1, "path", 30);
946
- i0.ɵɵelementEnd();
958
+ i0.ɵɵdomElementStart(0, "svg", 20);
959
+ i0.ɵɵdomElement(1, "path", 27);
960
+ i0.ɵɵdomElementEnd();
947
961
  } }
948
- function BreakdownSectionComponent_div_7_ng_container_18_Template(rf, ctx) { if (rf & 1) {
949
- i0.ɵɵelementContainerStart(0);
950
- i0.ɵɵelementStart(1, "tr", 15)(2, "td", 16)(3, "div")(4, "div", 17);
951
- i0.ɵɵtext(5);
952
- i0.ɵɵelementEnd();
953
- i0.ɵɵelementStart(6, "div", 18);
954
- i0.ɵɵtext(7);
955
- i0.ɵɵelementEnd()()();
956
- i0.ɵɵelementStart(8, "td", 19)(9, "div", 20);
957
- i0.ɵɵtext(10);
958
- i0.ɵɵelementEnd()();
959
- i0.ɵɵelementStart(11, "td", 19)(12, "div", 21);
960
- i0.ɵɵtemplate(13, BreakdownSectionComponent_div_7_ng_container_18__svg_svg_13_Template, 2, 0, "svg", 22)(14, BreakdownSectionComponent_div_7_ng_container_18__svg_svg_14_Template, 2, 0, "svg", 22);
961
- i0.ɵɵtext(15);
962
- i0.ɵɵelementEnd()();
963
- i0.ɵɵelementStart(16, "td", 19)(17, "span", 23);
964
- i0.ɵɵtext(18);
965
- i0.ɵɵelementEnd()()();
966
- i0.ɵɵelementStart(19, "tr", 24)(20, "td", 25)(21, "div", 26)(22, "p", 27);
967
- i0.ɵɵtext(23);
968
- i0.ɵɵelementEnd()()()();
969
- i0.ɵɵelementContainerEnd();
962
+ function BreakdownSectionComponent_For_8_For_19_Template(rf, ctx) { if (rf & 1) {
963
+ i0.ɵɵdomElementStart(0, "tr", 13)(1, "td", 14)(2, "div")(3, "div", 15);
964
+ i0.ɵɵtext(4);
965
+ i0.ɵɵdomElementEnd();
966
+ i0.ɵɵdomElementStart(5, "div", 16);
967
+ i0.ɵɵtext(6);
968
+ i0.ɵɵdomElementEnd()()();
969
+ i0.ɵɵdomElementStart(7, "td", 17)(8, "div", 18);
970
+ i0.ɵɵtext(9);
971
+ i0.ɵɵdomElementEnd()();
972
+ i0.ɵɵdomElementStart(10, "td", 17)(11, "div", 19);
973
+ i0.ɵɵconditionalCreate(12, BreakdownSectionComponent_For_8_For_19_Conditional_12_Template, 2, 0, ":svg:svg", 20);
974
+ i0.ɵɵconditionalCreate(13, BreakdownSectionComponent_For_8_For_19_Conditional_13_Template, 2, 0, ":svg:svg", 20);
975
+ i0.ɵɵtext(14);
976
+ i0.ɵɵdomElementEnd()();
977
+ i0.ɵɵdomElementStart(15, "td", 17)(16, "span", 21);
978
+ i0.ɵɵtext(17);
979
+ i0.ɵɵdomElementEnd()()();
980
+ i0.ɵɵdomElementStart(18, "tr", 22)(19, "td", 23)(20, "div", 24)(21, "p", 25);
981
+ i0.ɵɵtext(22);
982
+ i0.ɵɵdomElementEnd()()()();
970
983
  } if (rf & 2) {
971
984
  const metric_r1 = ctx.$implicit;
972
- const i_r2 = ctx.index;
985
+ const ɵ$index_44_r2 = ctx.$index;
973
986
  const group_r3 = i0.ɵɵnextContext().$implicit;
974
987
  const ctx_r3 = i0.ɵɵnextContext();
975
- i0.ɵɵadvance(5);
988
+ i0.ɵɵadvance(4);
976
989
  i0.ɵɵtextInterpolate(ctx_r3.formatDimensionValue(metric_r1.dimensionValue));
977
990
  i0.ɵɵadvance(2);
978
991
  i0.ɵɵtextInterpolate1("Priority ", metric_r1.priority);
@@ -981,9 +994,9 @@ function BreakdownSectionComponent_div_7_ng_container_18_Template(rf, ctx) { if
981
994
  i0.ɵɵadvance(2);
982
995
  i0.ɵɵclassMap(ctx_r3.getTrendClass(metric_r1));
983
996
  i0.ɵɵadvance();
984
- i0.ɵɵproperty("ngIf", metric_r1.trendDirection === "UP");
997
+ i0.ɵɵconditional(metric_r1.trendDirection === "UP" ? 12 : -1);
985
998
  i0.ɵɵadvance();
986
- i0.ɵɵproperty("ngIf", metric_r1.trendDirection === "DOWN");
999
+ i0.ɵɵconditional(metric_r1.trendDirection === "DOWN" ? 13 : -1);
987
1000
  i0.ɵɵadvance();
988
1001
  i0.ɵɵtextInterpolate1(" ", ctx_r3.Math.abs(metric_r1.trendPercent || 0).toFixed(1), "% ");
989
1002
  i0.ɵɵadvance(2);
@@ -991,31 +1004,31 @@ function BreakdownSectionComponent_div_7_ng_container_18_Template(rf, ctx) { if
991
1004
  i0.ɵɵadvance();
992
1005
  i0.ɵɵtextInterpolate1(" ", ctx_r3.getStatusLabel(metric_r1.status || "ON_TRACK"), " ");
993
1006
  i0.ɵɵadvance();
994
- i0.ɵɵclassProp("border-b", i_r2 < group_r3.values.length - 1);
1007
+ i0.ɵɵclassProp("border-b", ɵ$index_44_r2 < group_r3.values.length - 1);
995
1008
  i0.ɵɵadvance(4);
996
1009
  i0.ɵɵtextInterpolate(metric_r1.description);
997
1010
  } }
998
- function BreakdownSectionComponent_div_7_Template(rf, ctx) { if (rf & 1) {
999
- i0.ɵɵelementStart(0, "div", 6)(1, "h4", 7);
1011
+ function BreakdownSectionComponent_For_8_Template(rf, ctx) { if (rf & 1) {
1012
+ i0.ɵɵdomElementStart(0, "div", 5)(1, "h4", 6);
1000
1013
  i0.ɵɵtext(2);
1001
- i0.ɵɵelementStart(3, "span", 8);
1014
+ i0.ɵɵdomElementStart(3, "span", 7);
1002
1015
  i0.ɵɵtext(4);
1003
- i0.ɵɵelementEnd()();
1004
- i0.ɵɵelementStart(5, "div", 9)(6, "table", 10)(7, "thead")(8, "tr", 11)(9, "th", 12);
1016
+ i0.ɵɵdomElementEnd()();
1017
+ i0.ɵɵdomElementStart(5, "div", 8)(6, "table", 9)(7, "thead")(8, "tr", 10)(9, "th", 11);
1005
1018
  i0.ɵɵtext(10);
1006
- i0.ɵɵelementEnd();
1007
- i0.ɵɵelementStart(11, "th", 13);
1019
+ i0.ɵɵdomElementEnd();
1020
+ i0.ɵɵdomElementStart(11, "th", 12);
1008
1021
  i0.ɵɵtext(12, "Current");
1009
- i0.ɵɵelementEnd();
1010
- i0.ɵɵelementStart(13, "th", 13);
1022
+ i0.ɵɵdomElementEnd();
1023
+ i0.ɵɵdomElementStart(13, "th", 12);
1011
1024
  i0.ɵɵtext(14, "Trend");
1012
- i0.ɵɵelementEnd();
1013
- i0.ɵɵelementStart(15, "th", 13);
1025
+ i0.ɵɵdomElementEnd();
1026
+ i0.ɵɵdomElementStart(15, "th", 12);
1014
1027
  i0.ɵɵtext(16, "Status");
1015
- i0.ɵɵelementEnd()()();
1016
- i0.ɵɵelementStart(17, "tbody");
1017
- i0.ɵɵtemplate(18, BreakdownSectionComponent_div_7_ng_container_18_Template, 24, 14, "ng-container", 14);
1018
- i0.ɵɵelementEnd()()()();
1028
+ i0.ɵɵdomElementEnd()()();
1029
+ i0.ɵɵdomElementStart(17, "tbody");
1030
+ i0.ɵɵrepeaterCreate(18, BreakdownSectionComponent_For_8_For_19_Template, 23, 14, null, null, i0.ɵɵrepeaterTrackByIndex);
1031
+ i0.ɵɵdomElementEnd()()()();
1019
1032
  } if (rf & 2) {
1020
1033
  const group_r3 = ctx.$implicit;
1021
1034
  const ctx_r3 = i0.ɵɵnextContext();
@@ -1026,7 +1039,7 @@ function BreakdownSectionComponent_div_7_Template(rf, ctx) { if (rf & 1) {
1026
1039
  i0.ɵɵadvance(6);
1027
1040
  i0.ɵɵtextInterpolate(ctx_r3.breakdown.dimensionLabel);
1028
1041
  i0.ɵɵadvance(8);
1029
- i0.ɵɵproperty("ngForOf", group_r3.values);
1042
+ i0.ɵɵrepeater(group_r3.values);
1030
1043
  } }
1031
1044
  class BreakdownSectionComponent {
1032
1045
  constructor() {
@@ -1099,31 +1112,31 @@ class BreakdownSectionComponent {
1099
1112
  return (status || '').replace(/_/g, ' ');
1100
1113
  }
1101
1114
  static { this.ɵfac = function BreakdownSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BreakdownSectionComponent)(); }; }
1102
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BreakdownSectionComponent, selectors: [["symphiq-funnel-analysis-breakdown-section"]], inputs: { breakdown: "breakdown" }, decls: 8, vars: 3, consts: [[1, "bg-slate-800", "rounded-xl", "p-6", "border", "border-slate-700", 2, "margin-bottom", "2rem"], [1, "mb-6"], [1, "text-xl", "font-bold", "text-white", "mb-2"], [1, "text-sm", "text-slate-400", "leading-relaxed"], [1, "space-y-8"], ["class", "border-t border-slate-700 pt-6 first:border-t-0 first:pt-0", 4, "ngFor", "ngForOf"], [1, "border-t", "border-slate-700", "pt-6", "first:border-t-0", "first:pt-0"], [1, "text-base", "font-semibold", "text-white", "mb-4", "flex", "items-center", "gap-2"], [1, "text-xs", "font-normal", "text-slate-500", "px-2", "py-1", "bg-slate-700/50", "rounded"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", "border-slate-700"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [4, "ngFor", "ngForOf"], [1, "hover:bg-slate-700/30", "transition-colors"], [1, "py-3", "px-4", "pb-1"], [1, "text-sm", "font-medium", "text-white"], [1, "text-xs", "text-slate-500", "mt-1"], [1, "text-right", "py-3", "px-4", "pb-1"], [1, "text-sm", "font-semibold", "text-white"], [1, "text-sm", "font-semibold", "flex", "items-center", "justify-end", "gap-1"], ["class", "w-4 h-4", "fill", "currentColor", "viewBox", "0 0 20 20", 4, "ngIf"], [1, "inline-block"], [1, "border-slate-700"], ["colspan", "4", 1, "px-4", "pt-0", "pb-4"], [1, "bg-slate-900/50", "rounded-lg", "p-3", "border", "border-slate-700/50"], [1, "text-xs", "text-slate-400", "leading-relaxed"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"]], template: function BreakdownSectionComponent_Template(rf, ctx) { if (rf & 1) {
1103
- i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
1115
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BreakdownSectionComponent, selectors: [["symphiq-funnel-analysis-breakdown-section"]], inputs: { breakdown: "breakdown" }, decls: 9, vars: 2, consts: [[1, "bg-slate-800", "rounded-xl", "p-6", "border", "border-slate-700", 2, "margin-bottom", "2rem"], [1, "mb-6"], [1, "text-xl", "font-bold", "text-white", "mb-2"], [1, "text-sm", "text-slate-400", "leading-relaxed"], [1, "space-y-8"], [1, "border-t", "border-slate-700", "pt-6", "first:border-t-0", "first:pt-0"], [1, "text-base", "font-semibold", "text-white", "mb-4", "flex", "items-center", "gap-2"], [1, "text-xs", "font-normal", "text-slate-500", "px-2", "py-1", "bg-slate-700/50", "rounded"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", "border-slate-700"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "text-slate-400", "uppercase", "tracking-wider"], [1, "hover:bg-slate-700/30", "transition-colors"], [1, "py-3", "px-4", "pb-1"], [1, "text-sm", "font-medium", "text-white"], [1, "text-xs", "text-slate-500", "mt-1"], [1, "text-right", "py-3", "px-4", "pb-1"], [1, "text-sm", "font-semibold", "text-white"], [1, "text-sm", "font-semibold", "flex", "items-center", "justify-end", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "inline-block"], [1, "border-slate-700"], ["colspan", "4", 1, "px-4", "pt-0", "pb-4"], [1, "bg-slate-900/50", "rounded-lg", "p-3", "border", "border-slate-700/50"], [1, "text-xs", "text-slate-400", "leading-relaxed"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"]], template: function BreakdownSectionComponent_Template(rf, ctx) { if (rf & 1) {
1116
+ i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
1104
1117
  i0.ɵɵtext(3);
1105
- i0.ɵɵelementEnd();
1106
- i0.ɵɵelementStart(4, "p", 3);
1118
+ i0.ɵɵdomElementEnd();
1119
+ i0.ɵɵdomElementStart(4, "p", 3);
1107
1120
  i0.ɵɵtext(5);
1108
- i0.ɵɵelementEnd()();
1109
- i0.ɵɵelementStart(6, "div", 4);
1110
- i0.ɵɵtemplate(7, BreakdownSectionComponent_div_7_Template, 19, 4, "div", 5);
1111
- i0.ɵɵelementEnd()();
1121
+ i0.ɵɵdomElementEnd()();
1122
+ i0.ɵɵdomElementStart(6, "div", 4);
1123
+ i0.ɵɵrepeaterCreate(7, BreakdownSectionComponent_For_8_Template, 20, 3, "div", 5, _forTrack0$1);
1124
+ i0.ɵɵdomElementEnd()();
1112
1125
  } if (rf & 2) {
1113
1126
  i0.ɵɵadvance(3);
1114
1127
  i0.ɵɵtextInterpolate1("", ctx.breakdown.dimensionLabel, " Analysis");
1115
1128
  i0.ɵɵadvance(2);
1116
1129
  i0.ɵɵtextInterpolate(ctx.breakdown.summaryAnalysis);
1117
1130
  i0.ɵɵadvance(2);
1118
- i0.ɵɵproperty("ngForOf", ctx.metricGroups);
1119
- } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf], encapsulation: 2 }); }
1131
+ i0.ɵɵrepeater(ctx.metricGroups);
1132
+ } }, encapsulation: 2 }); }
1120
1133
  }
1121
1134
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BreakdownSectionComponent, [{
1122
1135
  type: Component,
1123
1136
  args: [{
1124
1137
  selector: 'symphiq-funnel-analysis-breakdown-section',
1125
1138
  standalone: true,
1126
- imports: [CommonModule],
1139
+ imports: [],
1127
1140
  template: `
1128
1141
  <div class="bg-slate-800 rounded-xl p-6 border border-slate-700" style="margin-bottom: 2rem;">
1129
1142
  <div class="mb-6">
@@ -1132,63 +1145,69 @@ class BreakdownSectionComponent {
1132
1145
  </div>
1133
1146
 
1134
1147
  <div class="space-y-8">
1135
- <div *ngFor="let group of metricGroups" class="border-t border-slate-700 pt-6 first:border-t-0 first:pt-0">
1136
- <h4 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
1137
- {{ group.metricLabel }}
1138
- <span class="text-xs font-normal text-slate-500 px-2 py-1 bg-slate-700/50 rounded">{{ group.category }}</span>
1139
- </h4>
1148
+ @for (group of metricGroups; track group.metric) {
1149
+ <div class="border-t border-slate-700 pt-6 first:border-t-0 first:pt-0">
1150
+ <h4 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
1151
+ {{ group.metricLabel }}
1152
+ <span class="text-xs font-normal text-slate-500 px-2 py-1 bg-slate-700/50 rounded">{{ group.category }}</span>
1153
+ </h4>
1140
1154
 
1141
- <div class="overflow-x-auto">
1142
- <table class="w-full">
1143
- <thead>
1144
- <tr class="border-b border-slate-700">
1145
- <th class="text-left py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">{{ breakdown.dimensionLabel }}</th>
1146
- <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Current</th>
1147
- <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Trend</th>
1148
- <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
1149
- </tr>
1150
- </thead>
1151
- <tbody>
1152
- <ng-container *ngFor="let metric of group.values; let i = index">
1153
- <tr class="hover:bg-slate-700/30 transition-colors">
1154
- <td class="py-3 px-4 pb-1">
1155
- <div>
1156
- <div class="text-sm font-medium text-white">{{ formatDimensionValue(metric.dimensionValue) }}</div>
1157
- <div class="text-xs text-slate-500 mt-1">Priority {{ metric.priority }}</div>
1158
- </div>
1159
- </td>
1160
- <td class="text-right py-3 px-4 pb-1">
1161
- <div class="text-sm font-semibold text-white">{{ formatValue(metric.currentValue || 0, metric.category, metric.metric) }}</div>
1162
- </td>
1163
- <td class="text-right py-3 px-4 pb-1">
1164
- <div [class]="getTrendClass(metric)" class="text-sm font-semibold flex items-center justify-end gap-1">
1165
- <svg *ngIf="metric.trendDirection === 'UP'" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
1166
- <path 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" />
1167
- </svg>
1168
- <svg *ngIf="metric.trendDirection === 'DOWN'" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
1169
- <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
1170
- </svg>
1171
- {{ Math.abs(metric.trendPercent || 0).toFixed(1) }}%
1172
- </div>
1173
- </td>
1174
- <td class="text-right py-3 px-4 pb-1">
1175
- <span [class]="getStatusBadgeClass(metric.status || 'ON_TRACK')" class="inline-block">
1176
- {{ getStatusLabel(metric.status || 'ON_TRACK') }}
1177
- </span>
1178
- </td>
1179
- </tr>
1180
- <tr [class.border-b]="i < group.values.length - 1" class="border-slate-700">
1181
- <td colspan="4" class="px-4 pt-0 pb-4">
1182
- <div class="bg-slate-900/50 rounded-lg p-3 border border-slate-700/50">
1183
- <p class="text-xs text-slate-400 leading-relaxed">{{ metric.description }}</p>
1184
- </div>
1185
- </td>
1155
+ <div class="overflow-x-auto">
1156
+ <table class="w-full">
1157
+ <thead>
1158
+ <tr class="border-b border-slate-700">
1159
+ <th class="text-left py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">{{ breakdown.dimensionLabel }}</th>
1160
+ <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Current</th>
1161
+ <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Trend</th>
1162
+ <th class="text-right py-3 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
1186
1163
  </tr>
1187
- </ng-container>
1188
- </tbody>
1189
- </table>
1164
+ </thead>
1165
+ <tbody>
1166
+ @for (metric of group.values; track $index; let i = $index) {
1167
+ <tr class="hover:bg-slate-700/30 transition-colors">
1168
+ <td class="py-3 px-4 pb-1">
1169
+ <div>
1170
+ <div class="text-sm font-medium text-white">{{ formatDimensionValue(metric.dimensionValue) }}</div>
1171
+ <div class="text-xs text-slate-500 mt-1">Priority {{ metric.priority }}</div>
1172
+ </div>
1173
+ </td>
1174
+ <td class="text-right py-3 px-4 pb-1">
1175
+ <div class="text-sm font-semibold text-white">{{ formatValue(metric.currentValue || 0, metric.category, metric.metric) }}</div>
1176
+ </td>
1177
+ <td class="text-right py-3 px-4 pb-1">
1178
+ <div [class]="getTrendClass(metric)" class="text-sm font-semibold flex items-center justify-end gap-1">
1179
+ @if (metric.trendDirection === 'UP') {
1180
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
1181
+ <path 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" />
1182
+ </svg>
1183
+ }
1184
+ @if (metric.trendDirection === 'DOWN') {
1185
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
1186
+ <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
1187
+ </svg>
1188
+ }
1189
+ {{ Math.abs(metric.trendPercent || 0).toFixed(1) }}%
1190
+ </div>
1191
+ </td>
1192
+ <td class="text-right py-3 px-4 pb-1">
1193
+ <span [class]="getStatusBadgeClass(metric.status || 'ON_TRACK')" class="inline-block">
1194
+ {{ getStatusLabel(metric.status || 'ON_TRACK') }}
1195
+ </span>
1196
+ </td>
1197
+ </tr>
1198
+ <tr [class.border-b]="i < group.values.length - 1" class="border-slate-700">
1199
+ <td colspan="4" class="px-4 pt-0 pb-4">
1200
+ <div class="bg-slate-900/50 rounded-lg p-3 border border-slate-700/50">
1201
+ <p class="text-xs text-slate-400 leading-relaxed">{{ metric.description }}</p>
1202
+ </div>
1203
+ </td>
1204
+ </tr>
1205
+ }
1206
+ </tbody>
1207
+ </table>
1208
+ </div>
1190
1209
  </div>
1191
- </div>
1210
+ }
1192
1211
  </div>
1193
1212
  </div>
1194
1213
  `,
@@ -1196,64 +1215,64 @@ class BreakdownSectionComponent {
1196
1215
  }], null, { breakdown: [{
1197
1216
  type: Input
1198
1217
  }] }); })();
1199
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BreakdownSectionComponent, { className: "BreakdownSectionComponent", filePath: "lib/components/breakdown-section.component.ts", lineNumber: 85 }); })();
1218
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BreakdownSectionComponent, { className: "BreakdownSectionComponent", filePath: "lib/components/breakdown-section.component.ts", lineNumber: 90 }); })();
1200
1219
 
1201
- function ModalComponent_div_0_div_14_li_21_Template(rf, ctx) { if (rf & 1) {
1202
- i0.ɵɵelementStart(0, "li", 28);
1220
+ function ModalComponent_Conditional_0_Conditional_14_For_22_Template(rf, ctx) { if (rf & 1) {
1221
+ i0.ɵɵdomElementStart(0, "li", 24);
1203
1222
  i0.ɵɵnamespaceSVG();
1204
- i0.ɵɵelementStart(1, "svg", 29);
1205
- i0.ɵɵelement(2, "path", 30);
1206
- i0.ɵɵelementEnd();
1223
+ i0.ɵɵdomElementStart(1, "svg", 27);
1224
+ i0.ɵɵdomElement(2, "path", 28);
1225
+ i0.ɵɵdomElementEnd();
1207
1226
  i0.ɵɵnamespaceHTML();
1208
- i0.ɵɵelementStart(3, "span", 21);
1227
+ i0.ɵɵdomElementStart(3, "span", 20);
1209
1228
  i0.ɵɵtext(4);
1210
- i0.ɵɵelementEnd()();
1229
+ i0.ɵɵdomElementEnd()();
1211
1230
  } if (rf & 2) {
1212
1231
  const rec_r3 = ctx.$implicit;
1213
1232
  i0.ɵɵadvance(4);
1214
1233
  i0.ɵɵtextInterpolate(rec_r3);
1215
1234
  } }
1216
- function ModalComponent_div_0_div_14_span_26_Template(rf, ctx) { if (rf & 1) {
1217
- i0.ɵɵelementStart(0, "span", 31);
1235
+ function ModalComponent_Conditional_0_Conditional_14_For_28_Template(rf, ctx) { if (rf & 1) {
1236
+ i0.ɵɵdomElementStart(0, "span", 26);
1218
1237
  i0.ɵɵtext(1);
1219
- i0.ɵɵelementEnd();
1238
+ i0.ɵɵdomElementEnd();
1220
1239
  } if (rf & 2) {
1221
1240
  const metric_r4 = ctx.$implicit;
1222
1241
  const ctx_r1 = i0.ɵɵnextContext(3);
1223
1242
  i0.ɵɵadvance();
1224
1243
  i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricName(metric_r4), " ");
1225
1244
  } }
1226
- function ModalComponent_div_0_div_14_Template(rf, ctx) { if (rf & 1) {
1227
- i0.ɵɵelementStart(0, "div")(1, "div", 16)(2, "span", 17);
1245
+ function ModalComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
1246
+ i0.ɵɵdomElementStart(0, "div")(1, "div", 15)(2, "span", 16);
1228
1247
  i0.ɵɵtext(3);
1229
- i0.ɵɵelementEnd();
1230
- i0.ɵɵelementStart(4, "div", 18);
1248
+ i0.ɵɵdomElementEnd();
1249
+ i0.ɵɵdomElementStart(4, "div", 17);
1231
1250
  i0.ɵɵtext(5);
1232
- i0.ɵɵelementEnd()();
1233
- i0.ɵɵelementStart(6, "div", 19)(7, "div")(8, "h4", 20);
1251
+ i0.ɵɵdomElementEnd()();
1252
+ i0.ɵɵdomElementStart(6, "div", 18)(7, "div")(8, "h4", 19);
1234
1253
  i0.ɵɵtext(9, "Description");
1235
- i0.ɵɵelementEnd();
1236
- i0.ɵɵelementStart(10, "p", 21);
1254
+ i0.ɵɵdomElementEnd();
1255
+ i0.ɵɵdomElementStart(10, "p", 20);
1237
1256
  i0.ɵɵtext(11);
1238
- i0.ɵɵelementEnd()();
1239
- i0.ɵɵelementStart(12, "div")(13, "h4", 20);
1257
+ i0.ɵɵdomElementEnd()();
1258
+ i0.ɵɵdomElementStart(12, "div")(13, "h4", 19);
1240
1259
  i0.ɵɵtext(14, "Business Context");
1241
- i0.ɵɵelementEnd();
1242
- i0.ɵɵelementStart(15, "p", 22);
1260
+ i0.ɵɵdomElementEnd();
1261
+ i0.ɵɵdomElementStart(15, "p", 21);
1243
1262
  i0.ɵɵtext(16);
1244
- i0.ɵɵelementEnd()();
1245
- i0.ɵɵelementStart(17, "div")(18, "h4", 23);
1263
+ i0.ɵɵdomElementEnd()();
1264
+ i0.ɵɵdomElementStart(17, "div")(18, "h4", 22);
1246
1265
  i0.ɵɵtext(19, "Recommendations");
1247
- i0.ɵɵelementEnd();
1248
- i0.ɵɵelementStart(20, "ul", 24);
1249
- i0.ɵɵtemplate(21, ModalComponent_div_0_div_14_li_21_Template, 5, 1, "li", 25);
1250
- i0.ɵɵelementEnd()();
1251
- i0.ɵɵelementStart(22, "div")(23, "h4", 23);
1252
- i0.ɵɵtext(24, "Related Metrics");
1253
- i0.ɵɵelementEnd();
1254
- i0.ɵɵelementStart(25, "div", 26);
1255
- i0.ɵɵtemplate(26, ModalComponent_div_0_div_14_span_26_Template, 2, 1, "span", 27);
1256
- i0.ɵɵelementEnd()()()();
1266
+ i0.ɵɵdomElementEnd();
1267
+ i0.ɵɵdomElementStart(20, "ul", 23);
1268
+ i0.ɵɵrepeaterCreate(21, ModalComponent_Conditional_0_Conditional_14_For_22_Template, 5, 1, "li", 24, i0.ɵɵrepeaterTrackByIndex);
1269
+ i0.ɵɵdomElementEnd()();
1270
+ i0.ɵɵdomElementStart(23, "div")(24, "h4", 22);
1271
+ i0.ɵɵtext(25, "Related Metrics");
1272
+ i0.ɵɵdomElementEnd();
1273
+ i0.ɵɵdomElementStart(26, "div", 25);
1274
+ i0.ɵɵrepeaterCreate(27, ModalComponent_Conditional_0_Conditional_14_For_28_Template, 2, 1, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
1275
+ i0.ɵɵdomElementEnd()()()();
1257
1276
  } if (rf & 2) {
1258
1277
  const ctx_r1 = i0.ɵɵnextContext(2);
1259
1278
  i0.ɵɵadvance(3);
@@ -1265,76 +1284,77 @@ function ModalComponent_div_0_div_14_Template(rf, ctx) { if (rf & 1) {
1265
1284
  i0.ɵɵadvance(5);
1266
1285
  i0.ɵɵtextInterpolate(ctx_r1.insightData.businessContext);
1267
1286
  i0.ɵɵadvance(5);
1268
- i0.ɵɵproperty("ngForOf", ctx_r1.insightData.recommendations);
1269
- i0.ɵɵadvance(5);
1270
- i0.ɵɵproperty("ngForOf", ctx_r1.insightData.relatedMetrics);
1287
+ i0.ɵɵrepeater(ctx_r1.insightData.recommendations);
1288
+ i0.ɵɵadvance(6);
1289
+ i0.ɵɵrepeater(ctx_r1.insightData.relatedMetrics);
1271
1290
  } }
1272
- function ModalComponent_div_0_div_15__svg_svg_8_Template(rf, ctx) { if (rf & 1) {
1291
+ function ModalComponent_Conditional_0_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1273
1292
  i0.ɵɵnamespaceSVG();
1274
- i0.ɵɵelementStart(0, "svg", 47);
1275
- i0.ɵɵelement(1, "path", 48);
1276
- i0.ɵɵelementEnd();
1293
+ i0.ɵɵdomElementStart(0, "svg", 33);
1294
+ i0.ɵɵdomElement(1, "path", 44);
1295
+ i0.ɵɵdomElementEnd();
1277
1296
  } }
1278
- function ModalComponent_div_0_div_15__svg_svg_9_Template(rf, ctx) { if (rf & 1) {
1297
+ function ModalComponent_Conditional_0_Conditional_15_Conditional_9_Template(rf, ctx) { if (rf & 1) {
1279
1298
  i0.ɵɵnamespaceSVG();
1280
- i0.ɵɵelementStart(0, "svg", 47);
1281
- i0.ɵɵelement(1, "path", 49);
1282
- i0.ɵɵelementEnd();
1299
+ i0.ɵɵdomElementStart(0, "svg", 33);
1300
+ i0.ɵɵdomElement(1, "path", 45);
1301
+ i0.ɵɵdomElementEnd();
1283
1302
  } }
1284
- function ModalComponent_div_0_div_15_Template(rf, ctx) { if (rf & 1) {
1285
- i0.ɵɵelementStart(0, "div")(1, "div", 19)(2, "div", 7)(3, "div", 32)(4, "div", 33)(5, "span", 34);
1303
+ function ModalComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
1304
+ i0.ɵɵdomElementStart(0, "div")(1, "div", 18)(2, "div", 7)(3, "div", 29)(4, "div", 30)(5, "span", 31);
1286
1305
  i0.ɵɵtext(6);
1287
- i0.ɵɵelementEnd();
1288
- i0.ɵɵelementStart(7, "span", 35);
1289
- i0.ɵɵtemplate(8, ModalComponent_div_0_div_15__svg_svg_8_Template, 2, 0, "svg", 36)(9, ModalComponent_div_0_div_15__svg_svg_9_Template, 2, 0, "svg", 36);
1306
+ i0.ɵɵdomElementEnd();
1307
+ i0.ɵɵdomElementStart(7, "span", 32);
1308
+ i0.ɵɵconditionalCreate(8, ModalComponent_Conditional_0_Conditional_15_Conditional_8_Template, 2, 0, ":svg:svg", 33);
1309
+ i0.ɵɵconditionalCreate(9, ModalComponent_Conditional_0_Conditional_15_Conditional_9_Template, 2, 0, ":svg:svg", 33);
1290
1310
  i0.ɵɵtext(10);
1291
- i0.ɵɵelementEnd()();
1292
- i0.ɵɵelementStart(11, "div", 37);
1311
+ i0.ɵɵdomElementEnd()();
1312
+ i0.ɵɵdomElementStart(11, "div", 34);
1293
1313
  i0.ɵɵtext(12);
1294
- i0.ɵɵelementEnd()();
1295
- i0.ɵɵelementStart(13, "div", 18)(14, "div");
1314
+ i0.ɵɵdomElementEnd()();
1315
+ i0.ɵɵdomElementStart(13, "div", 17)(14, "div");
1296
1316
  i0.ɵɵtext(15, "Priority: ");
1297
- i0.ɵɵelementStart(16, "span", 38);
1317
+ i0.ɵɵdomElementStart(16, "span", 35);
1298
1318
  i0.ɵɵtext(17);
1299
- i0.ɵɵelementEnd()();
1300
- i0.ɵɵelementStart(18, "div");
1319
+ i0.ɵɵdomElementEnd()();
1320
+ i0.ɵɵdomElementStart(18, "div");
1301
1321
  i0.ɵɵtext(19, "Category: ");
1302
- i0.ɵɵelementStart(20, "span", 38);
1322
+ i0.ɵɵdomElementStart(20, "span", 35);
1303
1323
  i0.ɵɵtext(21);
1304
- i0.ɵɵelementEnd()()()();
1305
- i0.ɵɵelementStart(22, "div", 39)(23, "div", 40)(24, "div")(25, "div", 41);
1324
+ i0.ɵɵdomElementEnd()()()();
1325
+ i0.ɵɵdomElementStart(22, "div", 36)(23, "div", 37)(24, "div")(25, "div", 38);
1306
1326
  i0.ɵɵtext(26, "Target");
1307
- i0.ɵɵelementEnd();
1308
- i0.ɵɵelementStart(27, "div", 42);
1327
+ i0.ɵɵdomElementEnd();
1328
+ i0.ɵɵdomElementStart(27, "div", 39);
1309
1329
  i0.ɵɵtext(28);
1310
- i0.ɵɵelementEnd()();
1311
- i0.ɵɵelementStart(29, "div")(30, "div", 41);
1330
+ i0.ɵɵdomElementEnd()();
1331
+ i0.ɵɵdomElementStart(29, "div")(30, "div", 38);
1312
1332
  i0.ɵɵtext(31, "Pacing");
1313
- i0.ɵɵelementEnd();
1314
- i0.ɵɵelementStart(32, "div", 43);
1333
+ i0.ɵɵdomElementEnd();
1334
+ i0.ɵɵdomElementStart(32, "div", 40);
1315
1335
  i0.ɵɵtext(33);
1316
- i0.ɵɵelementEnd()();
1317
- i0.ɵɵelementStart(34, "div")(35, "div", 41);
1336
+ i0.ɵɵdomElementEnd()();
1337
+ i0.ɵɵdomElementStart(34, "div")(35, "div", 38);
1318
1338
  i0.ɵɵtext(36, "Prior YTD");
1319
- i0.ɵɵelementEnd();
1320
- i0.ɵɵelementStart(37, "div", 44);
1339
+ i0.ɵɵdomElementEnd();
1340
+ i0.ɵɵdomElementStart(37, "div", 41);
1321
1341
  i0.ɵɵtext(38);
1322
- i0.ɵɵelementEnd()();
1323
- i0.ɵɵelementStart(39, "div")(40, "div", 41);
1342
+ i0.ɵɵdomElementEnd()();
1343
+ i0.ɵɵdomElementStart(39, "div")(40, "div", 38);
1324
1344
  i0.ɵɵtext(41, "Projected");
1325
- i0.ɵɵelementEnd();
1326
- i0.ɵɵelementStart(42, "div", 44);
1345
+ i0.ɵɵdomElementEnd();
1346
+ i0.ɵɵdomElementStart(42, "div", 41);
1327
1347
  i0.ɵɵtext(43);
1328
- i0.ɵɵelementEnd()()()();
1329
- i0.ɵɵelementStart(44, "div", 45);
1330
- i0.ɵɵelement(45, "div", 46);
1331
- i0.ɵɵelementEnd();
1332
- i0.ɵɵelementStart(46, "div")(47, "h4", 20);
1348
+ i0.ɵɵdomElementEnd()()()();
1349
+ i0.ɵɵdomElementStart(44, "div", 42);
1350
+ i0.ɵɵdomElement(45, "div", 43);
1351
+ i0.ɵɵdomElementEnd();
1352
+ i0.ɵɵdomElementStart(46, "div")(47, "h4", 19);
1333
1353
  i0.ɵɵtext(48, "Analysis");
1334
- i0.ɵɵelementEnd();
1335
- i0.ɵɵelementStart(49, "p", 21);
1354
+ i0.ɵɵdomElementEnd();
1355
+ i0.ɵɵdomElementStart(49, "p", 20);
1336
1356
  i0.ɵɵtext(50);
1337
- i0.ɵɵelementEnd()()()();
1357
+ i0.ɵɵdomElementEnd()()()();
1338
1358
  } if (rf & 2) {
1339
1359
  const ctx_r1 = i0.ɵɵnextContext(2);
1340
1360
  i0.ɵɵadvance(6);
@@ -1342,9 +1362,9 @@ function ModalComponent_div_0_div_15_Template(rf, ctx) { if (rf & 1) {
1342
1362
  i0.ɵɵadvance();
1343
1363
  i0.ɵɵclassMap(ctx_r1.getTrendClass());
1344
1364
  i0.ɵɵadvance();
1345
- i0.ɵɵproperty("ngIf", ctx_r1.metricData.trendDirection === "UP");
1365
+ i0.ɵɵconditional(ctx_r1.metricData.trendDirection === "UP" ? 8 : -1);
1346
1366
  i0.ɵɵadvance();
1347
- i0.ɵɵproperty("ngIf", ctx_r1.metricData.trendDirection === "DOWN");
1367
+ i0.ɵɵconditional(ctx_r1.metricData.trendDirection === "DOWN" ? 9 : -1);
1348
1368
  i0.ɵɵadvance();
1349
1369
  i0.ɵɵtextInterpolate1(" ", ctx_r1.Math.abs(ctx_r1.metricData.trendPercent || 0).toFixed(1), "% ");
1350
1370
  i0.ɵɵadvance();
@@ -1371,42 +1391,43 @@ function ModalComponent_div_0_div_15_Template(rf, ctx) { if (rf & 1) {
1371
1391
  i0.ɵɵadvance(5);
1372
1392
  i0.ɵɵtextInterpolate(ctx_r1.metricData.description);
1373
1393
  } }
1374
- function ModalComponent_div_0_Template(rf, ctx) { if (rf & 1) {
1394
+ function ModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
1375
1395
  const _r1 = i0.ɵɵgetCurrentView();
1376
- i0.ɵɵelementStart(0, "div", 1);
1377
- i0.ɵɵlistener("click", function ModalComponent_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1378
- i0.ɵɵelementStart(1, "div", 2);
1379
- i0.ɵɵelement(2, "div", 3);
1380
- i0.ɵɵelementStart(3, "span", 4);
1396
+ i0.ɵɵdomElementStart(0, "div", 1);
1397
+ i0.ɵɵdomListener("click", function ModalComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1398
+ i0.ɵɵdomElementStart(1, "div", 2);
1399
+ i0.ɵɵdomElement(2, "div", 3);
1400
+ i0.ɵɵdomElementStart(3, "span", 4);
1381
1401
  i0.ɵɵtext(4, "\u200B");
1382
- i0.ɵɵelementEnd();
1383
- i0.ɵɵelementStart(5, "div", 5);
1384
- i0.ɵɵlistener("click", function ModalComponent_div_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
1385
- i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "h3", 8);
1402
+ i0.ɵɵdomElementEnd();
1403
+ i0.ɵɵdomElementStart(5, "div", 5);
1404
+ i0.ɵɵdomListener("click", function ModalComponent_Conditional_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
1405
+ i0.ɵɵdomElementStart(6, "div", 6)(7, "div", 7)(8, "h3", 8);
1386
1406
  i0.ɵɵtext(9);
1387
- i0.ɵɵelementEnd();
1388
- i0.ɵɵelementStart(10, "button", 9);
1389
- i0.ɵɵlistener("click", function ModalComponent_div_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1407
+ i0.ɵɵdomElementEnd();
1408
+ i0.ɵɵdomElementStart(10, "button", 9);
1409
+ i0.ɵɵdomListener("click", function ModalComponent_Conditional_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1390
1410
  i0.ɵɵnamespaceSVG();
1391
- i0.ɵɵelementStart(11, "svg", 10);
1392
- i0.ɵɵelement(12, "path", 11);
1393
- i0.ɵɵelementEnd()()()();
1411
+ i0.ɵɵdomElementStart(11, "svg", 10);
1412
+ i0.ɵɵdomElement(12, "path", 11);
1413
+ i0.ɵɵdomElementEnd()()()();
1394
1414
  i0.ɵɵnamespaceHTML();
1395
- i0.ɵɵelementStart(13, "div", 12);
1396
- i0.ɵɵtemplate(14, ModalComponent_div_0_div_14_Template, 27, 6, "div", 13)(15, ModalComponent_div_0_div_15_Template, 51, 25, "div", 13);
1397
- i0.ɵɵelementEnd();
1398
- i0.ɵɵelementStart(16, "div", 14)(17, "button", 15);
1399
- i0.ɵɵlistener("click", function ModalComponent_div_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1415
+ i0.ɵɵdomElementStart(13, "div", 12);
1416
+ i0.ɵɵconditionalCreate(14, ModalComponent_Conditional_0_Conditional_14_Template, 29, 4, "div");
1417
+ i0.ɵɵconditionalCreate(15, ModalComponent_Conditional_0_Conditional_15_Template, 51, 25, "div");
1418
+ i0.ɵɵdomElementEnd();
1419
+ i0.ɵɵdomElementStart(16, "div", 13)(17, "button", 14);
1420
+ i0.ɵɵdomListener("click", function ModalComponent_Conditional_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
1400
1421
  i0.ɵɵtext(18, " Close ");
1401
- i0.ɵɵelementEnd()()()()();
1422
+ i0.ɵɵdomElementEnd()()()()();
1402
1423
  } if (rf & 2) {
1403
1424
  const ctx_r1 = i0.ɵɵnextContext();
1404
1425
  i0.ɵɵadvance(9);
1405
1426
  i0.ɵɵtextInterpolate1(" ", ctx_r1.modalTitle, " ");
1406
1427
  i0.ɵɵadvance(5);
1407
- i0.ɵɵproperty("ngIf", ctx_r1.modalType === "insight" && ctx_r1.insightData);
1428
+ i0.ɵɵconditional(ctx_r1.modalType === "insight" && ctx_r1.insightData ? 14 : -1);
1408
1429
  i0.ɵɵadvance();
1409
- i0.ɵɵproperty("ngIf", ctx_r1.modalType === "metric" && ctx_r1.metricData);
1430
+ i0.ɵɵconditional(ctx_r1.modalType === "metric" && ctx_r1.metricData ? 15 : -1);
1410
1431
  } }
1411
1432
  class ModalComponent {
1412
1433
  constructor(modalService) {
@@ -1514,167 +1535,180 @@ class ModalComponent {
1514
1535
  return 'bg-gradient-to-r from-blue-500 to-blue-400';
1515
1536
  }
1516
1537
  static { this.ɵfac = function ModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalComponent)(i0.ɵɵdirectiveInject(ModalService)); }; }
1517
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalComponent, selectors: [["symphiq-funnel-analysis-modal"]], decls: 1, vars: 1, consts: [["class", "fixed inset-0 z-50 overflow-y-auto", 3, "click", 4, "ngIf"], [1, "fixed", "inset-0", "z-50", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "transition-opacity", "bg-slate-950/80", "backdrop-blur-sm"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "inline-block", "align-bottom", "bg-slate-800", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "transform", "transition-all", "sm:my-8", "sm:align-middle", "sm:max-w-3xl", "sm:w-full", "border", "border-slate-700", 3, "click"], [1, "bg-slate-800", "px-6", "py-5", "border-b", "border-slate-700"], [1, "flex", "items-start", "justify-between"], [1, "text-xl", "font-bold", "text-white"], [1, "text-slate-400", "hover:text-white", "transition-colors", "rounded-lg", "p-1", "hover:bg-slate-700", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "bg-slate-800", "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto"], [4, "ngIf"], [1, "bg-slate-900/50", "px-6", "py-4", "border-t", "border-slate-700"], [1, "w-full", "px-4", "py-2", "bg-slate-700", "hover:bg-slate-600", "text-white", "rounded-lg", "transition-colors", "font-medium", 3, "click"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full", "bg-blue-500/20", "text-blue-400", "text-sm", "font-bold"], [1, "text-sm", "text-slate-400"], [1, "space-y-6"], [1, "text-sm", "font-semibold", "text-slate-300", "uppercase", "tracking-wide", "mb-2"], [1, "text-slate-300", "leading-relaxed"], [1, "text-slate-400", "leading-relaxed"], [1, "text-sm", "font-semibold", "text-slate-300", "uppercase", "tracking-wide", "mb-3"], [1, "space-y-3"], ["class", "flex items-start gap-3 p-3 bg-slate-900/50 rounded-lg border border-slate-700/50", 4, "ngFor", "ngForOf"], [1, "flex", "flex-wrap", "gap-2"], ["class", "px-3 py-1.5 bg-slate-700/50 text-slate-300 rounded-lg text-sm font-medium border border-slate-600", 4, "ngFor", "ngForOf"], [1, "flex", "items-start", "gap-3", "p-3", "bg-slate-900/50", "rounded-lg", "border", "border-slate-700/50"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "text-emerald-400", "mt-0.5", "flex-shrink-0"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "px-3", "py-1.5", "bg-slate-700/50", "text-slate-300", "rounded-lg", "text-sm", "font-medium", "border", "border-slate-600"], [1, "flex-1"], [1, "flex", "items-baseline", "gap-3", "mb-2"], [1, "text-4xl", "font-bold", "text-white"], [1, "text-lg", "font-semibold", "flex", "items-center", "gap-1"], ["class", "w-5 h-5", "fill", "currentColor", "viewBox", "0 0 20 20", 4, "ngIf"], [1, "inline-block"], [1, "text-white", "font-medium"], [1, "bg-slate-900/50", "rounded-lg", "p-4", "border", "border-slate-700/50"], [1, "grid", "grid-cols-2", "gap-4"], [1, "text-xs", "text-slate-500", "mb-1"], [1, "text-lg", "font-semibold", "text-white"], [1, "text-lg", "font-semibold"], [1, "text-lg", "font-semibold", "text-slate-300"], [1, "w-full", "bg-slate-700", "rounded-full", "h-3", "overflow-hidden"], [1, "h-3", "rounded-full", "transition-all", "duration-500"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
1518
- i0.ɵɵtemplate(0, ModalComponent_div_0_Template, 19, 3, "div", 0);
1538
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalComponent, selectors: [["symphiq-funnel-analysis-modal"]], decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-50", "overflow-y-auto"], [1, "fixed", "inset-0", "z-50", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "z-40", "transition-opacity", "bg-slate-950/80", "backdrop-blur-sm"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "z-50", "inline-block", "align-bottom", "bg-slate-800", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "transform", "transition-all", "sm:my-8", "sm:align-middle", "sm:max-w-3xl", "sm:w-full", "border", "border-slate-700", 3, "click"], [1, "bg-slate-800", "px-6", "py-5", "border-b", "border-slate-700"], [1, "flex", "items-start", "justify-between"], [1, "text-xl", "font-bold", "text-white"], [1, "text-slate-400", "hover:text-white", "transition-colors", "rounded-lg", "p-1", "hover:bg-slate-700", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "bg-slate-800", "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto"], [1, "bg-slate-900/50", "px-6", "py-4", "border-t", "border-slate-700"], [1, "w-full", "px-4", "py-2", "bg-slate-700", "hover:bg-slate-600", "text-white", "rounded-lg", "transition-colors", "font-medium", 3, "click"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full", "bg-blue-500/20", "text-blue-400", "text-sm", "font-bold"], [1, "text-sm", "text-slate-400"], [1, "space-y-6"], [1, "text-sm", "font-semibold", "text-slate-300", "uppercase", "tracking-wide", "mb-2"], [1, "text-slate-300", "leading-relaxed"], [1, "text-slate-400", "leading-relaxed"], [1, "text-sm", "font-semibold", "text-slate-300", "uppercase", "tracking-wide", "mb-3"], [1, "space-y-3"], [1, "flex", "items-start", "gap-3", "p-3", "bg-slate-900/50", "rounded-lg", "border", "border-slate-700/50"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "bg-slate-700/50", "text-slate-300", "rounded-lg", "text-sm", "font-medium", "border", "border-slate-600"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "text-emerald-400", "mt-0.5", "flex-shrink-0"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "flex-1"], [1, "flex", "items-baseline", "gap-3", "mb-2"], [1, "text-4xl", "font-bold", "text-white"], [1, "text-lg", "font-semibold", "flex", "items-center", "gap-1"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "inline-block"], [1, "text-white", "font-medium"], [1, "bg-slate-900/50", "rounded-lg", "p-4", "border", "border-slate-700/50"], [1, "grid", "grid-cols-2", "gap-4"], [1, "text-xs", "text-slate-500", "mb-1"], [1, "text-lg", "font-semibold", "text-white"], [1, "text-lg", "font-semibold"], [1, "text-lg", "font-semibold", "text-slate-300"], [1, "w-full", "bg-slate-700", "rounded-full", "h-3", "overflow-hidden"], [1, "h-3", "rounded-full", "transition-all", "duration-500"], ["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"], ["fill-rule", "evenodd", "d", "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z", "clip-rule", "evenodd"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
1539
+ i0.ɵɵconditionalCreate(0, ModalComponent_Conditional_0_Template, 19, 3, "div", 0);
1519
1540
  } if (rf & 2) {
1520
- i0.ɵɵproperty("ngIf", ctx.isOpen);
1521
- } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf], encapsulation: 2 }); }
1541
+ i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
1542
+ } }, encapsulation: 2 }); }
1522
1543
  }
1523
1544
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalComponent, [{
1524
1545
  type: Component,
1525
1546
  args: [{
1526
1547
  selector: 'symphiq-funnel-analysis-modal',
1527
1548
  standalone: true,
1528
- imports: [CommonModule],
1549
+ imports: [],
1529
1550
  template: `
1530
- <div *ngIf="isOpen" class="fixed inset-0 z-50 overflow-y-auto" (click)="closeModal()">
1531
- <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
1532
- <div class="fixed inset-0 transition-opacity bg-slate-950/80 backdrop-blur-sm" aria-hidden="true"></div>
1551
+ @if (isOpen) {
1552
+ <div class="fixed inset-0 z-50 overflow-y-auto" (click)="closeModal()">
1553
+ <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
1554
+ <div class="fixed inset-0 z-40 transition-opacity bg-slate-950/80 backdrop-blur-sm" aria-hidden="true"></div>
1533
1555
 
1534
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
1556
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
1535
1557
 
1536
- <div
1537
- (click)="$event.stopPropagation()"
1538
- class="inline-block align-bottom bg-slate-800 rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full border border-slate-700">
1539
-
1540
- <div class="bg-slate-800 px-6 py-5 border-b border-slate-700">
1541
- <div class="flex items-start justify-between">
1542
- <h3 class="text-xl font-bold text-white">
1543
- {{ modalTitle }}
1544
- </h3>
1545
- <button
1546
- (click)="closeModal()"
1547
- class="text-slate-400 hover:text-white transition-colors rounded-lg p-1 hover:bg-slate-700">
1548
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1549
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
1550
- </svg>
1551
- </button>
1552
- </div>
1553
- </div>
1558
+ <div
1559
+ (click)="$event.stopPropagation()"
1560
+ class="relative z-50 inline-block align-bottom bg-slate-800 rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full border border-slate-700">
1554
1561
 
1555
- <div class="bg-slate-800 px-6 py-6 max-h-[70vh] overflow-y-auto">
1556
- <div *ngIf="modalType === 'insight' && insightData">
1557
- <div class="flex items-center gap-3 mb-4">
1558
- <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500/20 text-blue-400 text-sm font-bold">
1559
- {{ insightData.priority }}
1560
- </span>
1561
- <div class="text-sm text-slate-400">Priority {{ insightData.priority }}</div>
1562
+ <div class="bg-slate-800 px-6 py-5 border-b border-slate-700">
1563
+ <div class="flex items-start justify-between">
1564
+ <h3 class="text-xl font-bold text-white">
1565
+ {{ modalTitle }}
1566
+ </h3>
1567
+ <button
1568
+ (click)="closeModal()"
1569
+ class="text-slate-400 hover:text-white transition-colors rounded-lg p-1 hover:bg-slate-700">
1570
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1571
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
1572
+ </svg>
1573
+ </button>
1562
1574
  </div>
1575
+ </div>
1563
1576
 
1564
- <div class="space-y-6">
1565
- <div>
1566
- <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Description</h4>
1567
- <p class="text-slate-300 leading-relaxed">{{ insightData.description }}</p>
1568
- </div>
1569
-
1570
- <div>
1571
- <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Business Context</h4>
1572
- <p class="text-slate-400 leading-relaxed">{{ insightData.businessContext }}</p>
1573
- </div>
1574
-
1575
- <div>
1576
- <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-3">Recommendations</h4>
1577
- <ul class="space-y-3">
1578
- <li *ngFor="let rec of insightData.recommendations" class="flex items-start gap-3 p-3 bg-slate-900/50 rounded-lg border border-slate-700/50">
1579
- <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
1580
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
1581
- </svg>
1582
- <span class="text-slate-300 leading-relaxed">{{ rec }}</span>
1583
- </li>
1584
- </ul>
1585
- </div>
1586
-
1577
+ <div class="bg-slate-800 px-6 py-6 max-h-[70vh] overflow-y-auto">
1578
+ @if (modalType === 'insight' && insightData) {
1587
1579
  <div>
1588
- <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-3">Related Metrics</h4>
1589
- <div class="flex flex-wrap gap-2">
1590
- <span *ngFor="let metric of insightData.relatedMetrics"
1591
- class="px-3 py-1.5 bg-slate-700/50 text-slate-300 rounded-lg text-sm font-medium border border-slate-600">
1592
- {{ formatMetricName(metric) }}
1580
+ <div class="flex items-center gap-3 mb-4">
1581
+ <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500/20 text-blue-400 text-sm font-bold">
1582
+ {{ insightData.priority }}
1593
1583
  </span>
1584
+ <div class="text-sm text-slate-400">Priority {{ insightData.priority }}</div>
1594
1585
  </div>
1595
- </div>
1596
- </div>
1597
- </div>
1598
-
1599
- <div *ngIf="modalType === 'metric' && metricData">
1600
- <div class="space-y-6">
1601
- <div class="flex items-start justify-between">
1602
- <div class="flex-1">
1603
- <div class="flex items-baseline gap-3 mb-2">
1604
- <span class="text-4xl font-bold text-white">{{ formatValue(metricData.currentValue || 0) }}</span>
1605
- <span [class]="getTrendClass()" class="text-lg font-semibold flex items-center gap-1">
1606
- <svg *ngIf="metricData.trendDirection === 'UP'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
1607
- <path 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" />
1608
- </svg>
1609
- <svg *ngIf="metricData.trendDirection === 'DOWN'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
1610
- <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
1611
- </svg>
1612
- {{ Math.abs(metricData.trendPercent || 0).toFixed(1) }}%
1613
- </span>
1614
- </div>
1615
- <div [class]="getStatusBadgeClass()" class="inline-block">
1616
- {{ getStatusLabel() }}
1617
- </div>
1618
- </div>
1619
- <div class="text-sm text-slate-400">
1620
- <div>Priority: <span class="text-white font-medium">{{ metricData.priority }}</span></div>
1621
- <div>Category: <span class="text-white font-medium">{{ metricData.category }}</span></div>
1622
- </div>
1623
- </div>
1624
1586
 
1625
- <div class="bg-slate-900/50 rounded-lg p-4 border border-slate-700/50">
1626
- <div class="grid grid-cols-2 gap-4">
1587
+ <div class="space-y-6">
1627
1588
  <div>
1628
- <div class="text-xs text-slate-500 mb-1">Target</div>
1629
- <div class="text-lg font-semibold text-white">{{ formatValue(metricData.targetValue || 0) }}</div>
1589
+ <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Description</h4>
1590
+ <p class="text-slate-300 leading-relaxed">{{ insightData.description }}</p>
1630
1591
  </div>
1592
+
1631
1593
  <div>
1632
- <div class="text-xs text-slate-500 mb-1">Pacing</div>
1633
- <div class="text-lg font-semibold" [class.text-emerald-400]="(metricData.pacingPercentage || 0) > 0" [class.text-red-400]="(metricData.pacingPercentage || 0) < 0">
1634
- {{ (metricData.pacingPercentage || 0) > 0 ? '+' : '' }}{{ (metricData.pacingPercentage || 0).toFixed(1) }}%
1635
- </div>
1594
+ <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Business Context</h4>
1595
+ <p class="text-slate-400 leading-relaxed">{{ insightData.businessContext }}</p>
1636
1596
  </div>
1597
+
1637
1598
  <div>
1638
- <div class="text-xs text-slate-500 mb-1">Prior YTD</div>
1639
- <div class="text-lg font-semibold text-slate-300">{{ formatValue(metricData.priorYtdValue || 0) }}</div>
1599
+ <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-3">Recommendations</h4>
1600
+ <ul class="space-y-3">
1601
+ @for (rec of insightData.recommendations; track $index) {
1602
+ <li class="flex items-start gap-3 p-3 bg-slate-900/50 rounded-lg border border-slate-700/50">
1603
+ <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
1604
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
1605
+ </svg>
1606
+ <span class="text-slate-300 leading-relaxed">{{ rec }}</span>
1607
+ </li>
1608
+ }
1609
+ </ul>
1640
1610
  </div>
1611
+
1641
1612
  <div>
1642
- <div class="text-xs text-slate-500 mb-1">Projected</div>
1643
- <div class="text-lg font-semibold text-slate-300">{{ formatValue(metricData.projectedValue || 0) }}</div>
1613
+ <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-3">Related Metrics</h4>
1614
+ <div class="flex flex-wrap gap-2">
1615
+ @for (metric of insightData.relatedMetrics; track metric) {
1616
+ <span class="px-3 py-1.5 bg-slate-700/50 text-slate-300 rounded-lg text-sm font-medium border border-slate-600">
1617
+ {{ formatMetricName(metric) }}
1618
+ </span>
1619
+ }
1620
+ </div>
1644
1621
  </div>
1645
1622
  </div>
1646
1623
  </div>
1624
+ }
1647
1625
 
1648
- <div class="w-full bg-slate-700 rounded-full h-3 overflow-hidden">
1649
- <div
1650
- [style.width.%]="getPacingPercentage()"
1651
- [class]="getPacingBarClass()"
1652
- class="h-3 rounded-full transition-all duration-500">
1653
- </div>
1654
- </div>
1655
-
1626
+ @if (modalType === 'metric' && metricData) {
1656
1627
  <div>
1657
- <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Analysis</h4>
1658
- <p class="text-slate-300 leading-relaxed">{{ metricData.description }}</p>
1628
+ <div class="space-y-6">
1629
+ <div class="flex items-start justify-between">
1630
+ <div class="flex-1">
1631
+ <div class="flex items-baseline gap-3 mb-2">
1632
+ <span class="text-4xl font-bold text-white">{{ formatValue(metricData.currentValue || 0) }}</span>
1633
+ <span [class]="getTrendClass()" class="text-lg font-semibold flex items-center gap-1">
1634
+ @if (metricData.trendDirection === 'UP') {
1635
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
1636
+ <path 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" />
1637
+ </svg>
1638
+ }
1639
+ @if (metricData.trendDirection === 'DOWN') {
1640
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
1641
+ <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
1642
+ </svg>
1643
+ }
1644
+ {{ Math.abs(metricData.trendPercent || 0).toFixed(1) }}%
1645
+ </span>
1646
+ </div>
1647
+ <div [class]="getStatusBadgeClass()" class="inline-block">
1648
+ {{ getStatusLabel() }}
1649
+ </div>
1650
+ </div>
1651
+ <div class="text-sm text-slate-400">
1652
+ <div>Priority: <span class="text-white font-medium">{{ metricData.priority }}</span></div>
1653
+ <div>Category: <span class="text-white font-medium">{{ metricData.category }}</span></div>
1654
+ </div>
1655
+ </div>
1656
+
1657
+ <div class="bg-slate-900/50 rounded-lg p-4 border border-slate-700/50">
1658
+ <div class="grid grid-cols-2 gap-4">
1659
+ <div>
1660
+ <div class="text-xs text-slate-500 mb-1">Target</div>
1661
+ <div class="text-lg font-semibold text-white">{{ formatValue(metricData.targetValue || 0) }}</div>
1662
+ </div>
1663
+ <div>
1664
+ <div class="text-xs text-slate-500 mb-1">Pacing</div>
1665
+ <div class="text-lg font-semibold" [class.text-emerald-400]="(metricData.pacingPercentage || 0) > 0" [class.text-red-400]="(metricData.pacingPercentage || 0) < 0">
1666
+ {{ (metricData.pacingPercentage || 0) > 0 ? '+' : '' }}{{ (metricData.pacingPercentage || 0).toFixed(1) }}%
1667
+ </div>
1668
+ </div>
1669
+ <div>
1670
+ <div class="text-xs text-slate-500 mb-1">Prior YTD</div>
1671
+ <div class="text-lg font-semibold text-slate-300">{{ formatValue(metricData.priorYtdValue || 0) }}</div>
1672
+ </div>
1673
+ <div>
1674
+ <div class="text-xs text-slate-500 mb-1">Projected</div>
1675
+ <div class="text-lg font-semibold text-slate-300">{{ formatValue(metricData.projectedValue || 0) }}</div>
1676
+ </div>
1677
+ </div>
1678
+ </div>
1679
+
1680
+ <div class="w-full bg-slate-700 rounded-full h-3 overflow-hidden">
1681
+ <div
1682
+ [style.width.%]="getPacingPercentage()"
1683
+ [class]="getPacingBarClass()"
1684
+ class="h-3 rounded-full transition-all duration-500">
1685
+ </div>
1686
+ </div>
1687
+
1688
+ <div>
1689
+ <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wide mb-2">Analysis</h4>
1690
+ <p class="text-slate-300 leading-relaxed">{{ metricData.description }}</p>
1691
+ </div>
1692
+ </div>
1659
1693
  </div>
1660
- </div>
1694
+ }
1661
1695
  </div>
1662
- </div>
1663
1696
 
1664
- <div class="bg-slate-900/50 px-6 py-4 border-t border-slate-700">
1665
- <button
1666
- (click)="closeModal()"
1667
- class="w-full px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors font-medium">
1668
- Close
1669
- </button>
1697
+ <div class="bg-slate-900/50 px-6 py-4 border-t border-slate-700">
1698
+ <button
1699
+ (click)="closeModal()"
1700
+ class="w-full px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors font-medium">
1701
+ Close
1702
+ </button>
1703
+ </div>
1670
1704
  </div>
1671
1705
  </div>
1672
1706
  </div>
1673
- </div>
1707
+ }
1674
1708
  `,
1675
1709
  }]
1676
1710
  }], () => [{ type: ModalService }], null); })();
1677
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "lib/components/modal.component.ts", lineNumber: 157 }); })();
1711
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "lib/components/modal.component.ts", lineNumber: 169 }); })();
1678
1712
 
1679
1713
  const PERFORMANCE_DATA = ({
1680
1714
  schemaVersion: 3,
@@ -2686,15 +2720,18 @@ const PERFORMANCE_DATA = ({
2686
2720
  });
2687
2721
 
2688
2722
  const _c0 = () => ({});
2689
- function SymphiqFunnelAnalysisDashboardComponent_symphiq_funnel_analysis_insight_card_24_Template(rf, ctx) { if (rf & 1) {
2690
- i0.ɵɵelement(0, "symphiq-funnel-analysis-insight-card", 32);
2723
+ const _forTrack0 = ($index, $item) => $item.value;
2724
+ const _forTrack1 = ($index, $item) => $item.funnelMetric.metric;
2725
+ const _forTrack2 = ($index, $item) => $item.metric;
2726
+ function SymphiqFunnelAnalysisDashboardComponent_For_12_Template(rf, ctx) { if (rf & 1) {
2727
+ i0.ɵɵelement(0, "symphiq-funnel-analysis-insight-card", 9);
2691
2728
  } if (rf & 2) {
2692
2729
  const insight_r1 = ctx.$implicit;
2693
2730
  const ctx_r1 = i0.ɵɵnextContext();
2694
2731
  i0.ɵɵproperty("insight", insight_r1)("allMetrics", ctx_r1.allMetrics);
2695
2732
  } }
2696
- function SymphiqFunnelAnalysisDashboardComponent_option_31_Template(rf, ctx) { if (rf & 1) {
2697
- i0.ɵɵelementStart(0, "option", 33);
2733
+ function SymphiqFunnelAnalysisDashboardComponent_For_20_Template(rf, ctx) { if (rf & 1) {
2734
+ i0.ɵɵelementStart(0, "option", 13);
2698
2735
  i0.ɵɵtext(1);
2699
2736
  i0.ɵɵelementEnd();
2700
2737
  } if (rf & 2) {
@@ -2703,17 +2740,17 @@ function SymphiqFunnelAnalysisDashboardComponent_option_31_Template(rf, ctx) { i
2703
2740
  i0.ɵɵadvance();
2704
2741
  i0.ɵɵtextInterpolate(cat_r3.label);
2705
2742
  } }
2706
- function SymphiqFunnelAnalysisDashboardComponent__svg_path_34_Template(rf, ctx) { if (rf & 1) {
2743
+ function SymphiqFunnelAnalysisDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
2707
2744
  i0.ɵɵnamespaceSVG();
2708
- i0.ɵɵelement(0, "path", 34);
2745
+ i0.ɵɵelement(0, "path", 16);
2709
2746
  } }
2710
- function SymphiqFunnelAnalysisDashboardComponent__svg_path_35_Template(rf, ctx) { if (rf & 1) {
2747
+ function SymphiqFunnelAnalysisDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
2711
2748
  i0.ɵɵnamespaceSVG();
2712
- i0.ɵɵelement(0, "path", 35);
2749
+ i0.ɵɵelement(0, "path", 17);
2713
2750
  } }
2714
- function SymphiqFunnelAnalysisDashboardComponent_ng_container_39_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
2715
- i0.ɵɵelementStart(0, "div", 41);
2716
- i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 42);
2751
+ function SymphiqFunnelAnalysisDashboardComponent_For_29_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
2752
+ i0.ɵɵelementStart(0, "div", 25);
2753
+ i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 26);
2717
2754
  i0.ɵɵelementEnd();
2718
2755
  } if (rf & 2) {
2719
2756
  const metric_r4 = ctx.$implicit;
@@ -2721,32 +2758,30 @@ function SymphiqFunnelAnalysisDashboardComponent_ng_container_39_div_3_div_1_Tem
2721
2758
  i0.ɵɵadvance();
2722
2759
  i0.ɵɵproperty("metric", metric_r4)("insights", ctx_r1.insights);
2723
2760
  } }
2724
- function SymphiqFunnelAnalysisDashboardComponent_ng_container_39_div_3_Template(rf, ctx) { if (rf & 1) {
2725
- i0.ɵɵelementStart(0, "div", 39);
2726
- i0.ɵɵtemplate(1, SymphiqFunnelAnalysisDashboardComponent_ng_container_39_div_3_div_1_Template, 2, 2, "div", 40);
2761
+ function SymphiqFunnelAnalysisDashboardComponent_For_29_Conditional_2_Template(rf, ctx) { if (rf & 1) {
2762
+ i0.ɵɵelementStart(0, "div", 24);
2763
+ i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_For_29_Conditional_2_For_2_Template, 2, 2, "div", 25, _forTrack2);
2727
2764
  i0.ɵɵelementEnd();
2728
2765
  } if (rf & 2) {
2729
2766
  const funnelGroup_r5 = i0.ɵɵnextContext().$implicit;
2730
2767
  i0.ɵɵadvance();
2731
- i0.ɵɵproperty("ngForOf", funnelGroup_r5.relatedMetrics);
2768
+ i0.ɵɵrepeater(funnelGroup_r5.relatedMetrics);
2732
2769
  } }
2733
- function SymphiqFunnelAnalysisDashboardComponent_ng_container_39_Template(rf, ctx) { if (rf & 1) {
2734
- i0.ɵɵelementContainerStart(0);
2735
- i0.ɵɵelementStart(1, "div", 36);
2736
- i0.ɵɵelement(2, "symphiq-funnel-analysis-metric-card", 37);
2770
+ function SymphiqFunnelAnalysisDashboardComponent_For_29_Template(rf, ctx) { if (rf & 1) {
2771
+ i0.ɵɵelementStart(0, "div", 22);
2772
+ i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 23);
2737
2773
  i0.ɵɵelementEnd();
2738
- i0.ɵɵtemplate(3, SymphiqFunnelAnalysisDashboardComponent_ng_container_39_div_3_Template, 2, 1, "div", 38);
2739
- i0.ɵɵelementContainerEnd();
2774
+ i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_For_29_Conditional_2_Template, 3, 0, "div", 24);
2740
2775
  } if (rf & 2) {
2741
2776
  const funnelGroup_r5 = ctx.$implicit;
2742
2777
  const ctx_r1 = i0.ɵɵnextContext();
2743
- i0.ɵɵadvance(2);
2778
+ i0.ɵɵadvance();
2744
2779
  i0.ɵɵproperty("metric", funnelGroup_r5.funnelMetric)("insights", ctx_r1.insights);
2745
2780
  i0.ɵɵadvance();
2746
- i0.ɵɵproperty("ngIf", funnelGroup_r5.relatedMetrics.length > 0);
2781
+ i0.ɵɵconditional(funnelGroup_r5.relatedMetrics.length > 0 ? 2 : -1);
2747
2782
  } }
2748
- function SymphiqFunnelAnalysisDashboardComponent_symphiq_funnel_analysis_breakdown_section_44_Template(rf, ctx) { if (rf & 1) {
2749
- i0.ɵɵelement(0, "symphiq-funnel-analysis-breakdown-section", 43);
2783
+ function SymphiqFunnelAnalysisDashboardComponent_For_35_Template(rf, ctx) { if (rf & 1) {
2784
+ i0.ɵɵelement(0, "symphiq-funnel-analysis-breakdown-section", 21);
2750
2785
  } if (rf & 2) {
2751
2786
  const breakdown_r6 = ctx.$implicit;
2752
2787
  i0.ɵɵproperty("breakdown", breakdown_r6);
@@ -2828,87 +2863,69 @@ class SymphiqFunnelAnalysisDashboardComponent {
2828
2863
  });
2829
2864
  }
2830
2865
  static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService)); }; }
2831
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], inputs: { data: "data" }, decls: 53, vars: 13, consts: [[1, "min-h-screen", "bg-gradient-to-br", "from-slate-950", "via-slate-900", "to-slate-950"], [1, "bg-slate-900/50", "backdrop-blur-sm", "border-b", "border-slate-800", "sticky", "top-0", "z-50"], [1, "max-w-7xl", "mx-auto", "px-6", "py-6"], [1, "flex", "items-center", "justify-between"], [1, "text-3xl", "font-bold", "text-white", "mb-1"], [1, "text-slate-400"], [1, "text-right"], [1, "text-sm", "text-slate-500"], [1, "text-white", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-6", "py-8"], [1, "space-y-8"], [3, "assessment", "revenueMetric"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", "text-white"], [1, "text-sm", "text-slate-400"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [3, "insight", "allMetrics", 4, "ngFor", "ngForOf"], [1, "flex", "gap-3", "items-center"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "bg-slate-700", "text-white", "border", "border-slate-600", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value", 4, "ngFor", "ngForOf"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "bg-slate-700", "text-white", "border", "border-slate-600", "hover:bg-slate-600", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", 3, "click", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12", 4, "ngIf"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4", 4, "ngIf"], [1, "hidden", "sm:inline"], [1, "space-y-6"], [4, "ngFor", "ngForOf"], [1, "text-2xl", "font-bold", "text-white", "mb-6"], [3, "breakdown", 4, "ngFor", "ngForOf"], [1, "bg-slate-900/50", "backdrop-blur-sm", "border-t", "border-slate-800", "mt-12"], [1, "text-center", "text-slate-500", "text-sm"], [1, "mt-1"], [3, "insight", "allMetrics"], [3, "value"], ["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, "w-full"], [3, "metric", "insights"], ["class", "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch", 4, "ngIf"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6", "items-stretch"], ["class", "flex", 4, "ngFor", "ngForOf"], [1, "flex"], [1, "flex-1", 3, "metric", "insights"], [3, "breakdown"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
2832
- i0.ɵɵelementStart(0, "div", 0)(1, "header", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "h1", 4);
2833
- i0.ɵɵtext(6, "Symphiq Dashboard");
2834
- i0.ɵɵelementEnd();
2835
- i0.ɵɵelementStart(7, "p", 5);
2836
- i0.ɵɵtext(8, "Revenue Orchestration & Funnel Analysis");
2837
- i0.ɵɵelementEnd()();
2838
- i0.ɵɵelementStart(9, "div", 6)(10, "div", 7);
2839
- i0.ɵɵtext(11, "Generated At");
2840
- i0.ɵɵelementEnd();
2841
- i0.ɵɵelementStart(12, "div", 8);
2842
- i0.ɵɵtext(13);
2843
- i0.ɵɵelementEnd()()()()();
2844
- i0.ɵɵelementStart(14, "main", 9)(15, "div", 10);
2845
- i0.ɵɵelement(16, "symphiq-funnel-analysis-overall-assessment", 11);
2846
- i0.ɵɵelementStart(17, "section")(18, "div", 12)(19, "h2", 13);
2847
- i0.ɵɵtext(20, "Key Insights");
2866
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], inputs: { data: "data" }, decls: 37, vars: 8, consts: [[1, "min-h-screen", "bg-transparent"], [1, "max-w-7xl", "mx-auto"], [1, "space-y-6", "sm:space-y-8"], [3, "assessment", "revenueMetric"], [1, "mt-6", "sm:mt-8"], [1, "flex", "items-center", "justify-between", "mb-4", "sm:mb-6"], [1, "text-xl", "sm:text-2xl", "font-bold", "text-white"], [1, "text-xs", "sm:text-sm", "text-slate-400"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-4", "sm:gap-6"], [3, "insight", "allMetrics"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "justify-between", "gap-3", "sm:gap-0", "mb-4", "sm:mb-6"], [1, "flex", "gap-2", "sm:gap-3", "items-center", "w-full", "sm:w-auto"], [1, "flex-1", "sm:flex-initial", "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "bg-slate-700", "text-white", "border", "border-slate-600", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "bg-slate-700", "text-white", "border", "border-slate-600", "hover:bg-slate-600", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", 3, "click", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["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, "hidden", "sm:inline"], [1, "space-y-4", "sm:space-y-6"], [1, "text-xl", "sm:text-2xl", "font-bold", "text-white", "mb-4", "sm:mb-6"], [3, "breakdown"], [1, "w-full"], [3, "metric", "insights"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4", "sm:gap-6", "items-stretch"], [1, "flex"], [1, "flex-1", 3, "metric", "insights"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
2867
+ i0.ɵɵelementStart(0, "div", 0)(1, "main", 1)(2, "div", 2);
2868
+ i0.ɵɵelement(3, "symphiq-funnel-analysis-overall-assessment", 3);
2869
+ i0.ɵɵelementStart(4, "section", 4)(5, "div", 5)(6, "h2", 6);
2870
+ i0.ɵɵtext(7, "Key Insights");
2848
2871
  i0.ɵɵelementEnd();
2849
- i0.ɵɵelementStart(21, "span", 14);
2850
- i0.ɵɵtext(22);
2872
+ i0.ɵɵelementStart(8, "span", 7);
2873
+ i0.ɵɵtext(9);
2851
2874
  i0.ɵɵelementEnd()();
2852
- i0.ɵɵelementStart(23, "div", 15);
2853
- i0.ɵɵtemplate(24, SymphiqFunnelAnalysisDashboardComponent_symphiq_funnel_analysis_insight_card_24_Template, 1, 2, "symphiq-funnel-analysis-insight-card", 16);
2875
+ i0.ɵɵelementStart(10, "div", 8);
2876
+ i0.ɵɵrepeaterCreate(11, SymphiqFunnelAnalysisDashboardComponent_For_12_Template, 1, 2, "symphiq-funnel-analysis-insight-card", 9, i0.ɵɵrepeaterTrackByIndex);
2854
2877
  i0.ɵɵelementEnd()();
2855
- i0.ɵɵelementStart(25, "section")(26, "div", 12)(27, "h2", 13);
2856
- i0.ɵɵtext(28, "Performance Metrics");
2878
+ i0.ɵɵelementStart(13, "section")(14, "div", 10)(15, "h2", 6);
2879
+ i0.ɵɵtext(16, "Performance Metrics");
2857
2880
  i0.ɵɵelementEnd();
2858
- i0.ɵɵelementStart(29, "div", 17)(30, "select", 18);
2859
- i0.ɵɵtwoWayListener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_30_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedCategory, $event) || (ctx.selectedCategory = $event); return $event; });
2860
- i0.ɵɵtemplate(31, SymphiqFunnelAnalysisDashboardComponent_option_31_Template, 2, 2, "option", 19);
2881
+ i0.ɵɵelementStart(17, "div", 11)(18, "select", 12);
2882
+ i0.ɵɵtwoWayListener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedCategory, $event) || (ctx.selectedCategory = $event); return $event; });
2883
+ i0.ɵɵrepeaterCreate(19, SymphiqFunnelAnalysisDashboardComponent_For_20_Template, 2, 2, "option", 13, _forTrack0);
2861
2884
  i0.ɵɵelementEnd();
2862
- i0.ɵɵelementStart(32, "button", 20);
2863
- i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_32_listener() { return ctx.reverseSortOrder = !ctx.reverseSortOrder; });
2885
+ i0.ɵɵelementStart(21, "button", 14);
2886
+ i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_21_listener() { return ctx.reverseSortOrder = !ctx.reverseSortOrder; });
2864
2887
  i0.ɵɵnamespaceSVG();
2865
- i0.ɵɵelementStart(33, "svg", 21);
2866
- i0.ɵɵtemplate(34, SymphiqFunnelAnalysisDashboardComponent__svg_path_34_Template, 1, 0, "path", 22)(35, SymphiqFunnelAnalysisDashboardComponent__svg_path_35_Template, 1, 0, "path", 23);
2888
+ i0.ɵɵelementStart(22, "svg", 15);
2889
+ i0.ɵɵconditionalCreate(23, SymphiqFunnelAnalysisDashboardComponent_Conditional_23_Template, 1, 0, ":svg:path", 16);
2890
+ i0.ɵɵconditionalCreate(24, SymphiqFunnelAnalysisDashboardComponent_Conditional_24_Template, 1, 0, ":svg:path", 17);
2867
2891
  i0.ɵɵelementEnd();
2868
2892
  i0.ɵɵnamespaceHTML();
2869
- i0.ɵɵelementStart(36, "span", 24);
2870
- i0.ɵɵtext(37, "Sort");
2893
+ i0.ɵɵelementStart(25, "span", 18);
2894
+ i0.ɵɵtext(26, "Sort");
2871
2895
  i0.ɵɵelementEnd()()()();
2872
- i0.ɵɵelementStart(38, "div", 25);
2873
- i0.ɵɵtemplate(39, SymphiqFunnelAnalysisDashboardComponent_ng_container_39_Template, 4, 3, "ng-container", 26);
2896
+ i0.ɵɵelementStart(27, "div", 19);
2897
+ i0.ɵɵrepeaterCreate(28, SymphiqFunnelAnalysisDashboardComponent_For_29_Template, 3, 3, null, null, _forTrack1);
2874
2898
  i0.ɵɵelementEnd()();
2875
- i0.ɵɵelementStart(40, "section")(41, "h2", 27);
2876
- i0.ɵɵtext(42, "Performance Breakdowns");
2899
+ i0.ɵɵelementStart(30, "section")(31, "h2", 20);
2900
+ i0.ɵɵtext(32, "Performance Breakdowns");
2877
2901
  i0.ɵɵelementEnd();
2878
- i0.ɵɵelementStart(43, "div");
2879
- i0.ɵɵtemplate(44, SymphiqFunnelAnalysisDashboardComponent_symphiq_funnel_analysis_breakdown_section_44_Template, 1, 1, "symphiq-funnel-analysis-breakdown-section", 28);
2902
+ i0.ɵɵelementStart(33, "div");
2903
+ i0.ɵɵrepeaterCreate(34, SymphiqFunnelAnalysisDashboardComponent_For_35_Template, 1, 1, "symphiq-funnel-analysis-breakdown-section", 21, i0.ɵɵrepeaterTrackByIndex);
2880
2904
  i0.ɵɵelementEnd()()()();
2881
- i0.ɵɵelement(45, "symphiq-funnel-analysis-modal");
2882
- i0.ɵɵelementStart(46, "footer", 29)(47, "div", 9)(48, "div", 30)(49, "p");
2883
- i0.ɵɵtext(50, "Symphiq Revenue Orchestration Workspace");
2905
+ i0.ɵɵelement(36, "symphiq-funnel-analysis-modal");
2884
2906
  i0.ɵɵelementEnd();
2885
- i0.ɵɵelementStart(51, "p", 31);
2886
- i0.ɵɵtext(52, "\u00A9 2025 Symphiq. All rights reserved.");
2887
- i0.ɵɵelementEnd()()()()();
2888
2907
  } if (rf & 2) {
2889
- i0.ɵɵadvance(13);
2890
- i0.ɵɵtextInterpolate(ctx.formatDate(ctx.data.generatedAt || "2025-11-30"));
2891
2908
  i0.ɵɵadvance(3);
2892
- i0.ɵɵproperty("assessment", ctx.data.overallAssessment || i0.ɵɵpureFunction0(12, _c0))("revenueMetric", ctx.revenueMetric);
2909
+ i0.ɵɵproperty("assessment", ctx.data.overallAssessment || i0.ɵɵpureFunction0(7, _c0))("revenueMetric", ctx.revenueMetric);
2893
2910
  i0.ɵɵadvance(6);
2894
2911
  i0.ɵɵtextInterpolate1("", ctx.insights.length, " insights");
2895
2912
  i0.ɵɵadvance(2);
2896
- i0.ɵɵproperty("ngForOf", ctx.insights);
2897
- i0.ɵɵadvance(6);
2913
+ i0.ɵɵrepeater(ctx.insights);
2914
+ i0.ɵɵadvance(7);
2898
2915
  i0.ɵɵtwoWayProperty("ngModel", ctx.selectedCategory);
2899
2916
  i0.ɵɵadvance();
2900
- i0.ɵɵproperty("ngForOf", ctx.categories);
2901
- i0.ɵɵadvance();
2917
+ i0.ɵɵrepeater(ctx.categories);
2918
+ i0.ɵɵadvance(2);
2902
2919
  i0.ɵɵproperty("title", ctx.reverseSortOrder ? "Sort: Revenue to Views" : "Sort: Views to Revenue");
2903
2920
  i0.ɵɵadvance(2);
2904
- i0.ɵɵproperty("ngIf", !ctx.reverseSortOrder);
2921
+ i0.ɵɵconditional(!ctx.reverseSortOrder ? 23 : -1);
2905
2922
  i0.ɵɵadvance();
2906
- i0.ɵɵproperty("ngIf", ctx.reverseSortOrder);
2923
+ i0.ɵɵconditional(ctx.reverseSortOrder ? 24 : -1);
2907
2924
  i0.ɵɵadvance(4);
2908
- i0.ɵɵproperty("ngForOf", ctx.getGroupedMetrics());
2909
- i0.ɵɵadvance(5);
2910
- i0.ɵɵproperty("ngForOf", ctx.breakdowns);
2911
- } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf, FormsModule, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, OverallAssessmentComponent,
2925
+ i0.ɵɵrepeater(ctx.getGroupedMetrics());
2926
+ i0.ɵɵadvance(6);
2927
+ i0.ɵɵrepeater(ctx.breakdowns);
2928
+ } }, dependencies: [FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, OverallAssessmentComponent,
2912
2929
  InsightCardComponent,
2913
2930
  MetricCardComponent,
2914
2931
  BreakdownSectionComponent,
@@ -2920,7 +2937,6 @@ class SymphiqFunnelAnalysisDashboardComponent {
2920
2937
  selector: 'symphiq-funnel-analysis-dashboard',
2921
2938
  standalone: true,
2922
2939
  imports: [
2923
- CommonModule,
2924
2940
  FormsModule,
2925
2941
  OverallAssessmentComponent,
2926
2942
  InsightCardComponent,
@@ -2929,99 +2945,104 @@ class SymphiqFunnelAnalysisDashboardComponent {
2929
2945
  ModalComponent,
2930
2946
  ],
2931
2947
  template: `
2932
- <div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
2933
- <header class="bg-slate-900/50 backdrop-blur-sm border-b border-slate-800 sticky top-0 z-50">
2934
- <div class="max-w-7xl mx-auto px-6 py-6">
2935
- <div class="flex items-center justify-between">
2936
- <div>
2937
- <h1 class="text-3xl font-bold text-white mb-1">Symphiq Dashboard</h1>
2938
- <p class="text-slate-400">Revenue Orchestration & Funnel Analysis</p>
2939
- </div>
2940
- <div class="text-right">
2941
- <div class="text-sm text-slate-500">Generated At</div>
2942
- <div class="text-white font-medium">{{ formatDate(data.generatedAt || '2025-11-30') }}</div>
2943
- </div>
2944
- </div>
2945
- </div>
2946
- </header>
2948
+ <div class="min-h-screen bg-transparent">
2949
+ <!-- <header class="bg-slate-900/50 backdrop-blur-sm border-b border-slate-800 sticky top-0 z-50">-->
2950
+ <!-- <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 sm:py-6">-->
2951
+ <!-- <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">-->
2952
+ <!-- <div>-->
2953
+ <!-- <h1 class="text-2xl sm:text-3xl font-bold text-white mb-1">Symphiq Dashboard</h1>-->
2954
+ <!-- <p class="text-sm sm:text-base text-slate-400">Revenue Orchestration & Funnel Analysis</p>-->
2955
+ <!-- </div>-->
2956
+ <!-- <div class="text-left sm:text-right">-->
2957
+ <!-- <div class="text-xs sm:text-sm text-slate-500">Generated At</div>-->
2958
+ <!-- <div class="text-sm sm:text-base text-white font-medium">{{ formatDate(data.generatedAt || '2025-11-30') }}</div>-->
2959
+ <!-- </div>-->
2960
+ <!-- </div>-->
2961
+ <!-- </div>-->
2962
+ <!-- </header>-->
2947
2963
 
2948
- <main class="max-w-7xl mx-auto px-6 py-8">
2949
- <div class="space-y-8">
2964
+ <main class="max-w-7xl mx-auto">
2965
+ <div class="space-y-6 sm:space-y-8">
2950
2966
  <symphiq-funnel-analysis-overall-assessment
2951
2967
  [assessment]="data.overallAssessment || {}"
2952
2968
  [revenueMetric]="revenueMetric" />
2953
2969
 
2954
- <section>
2955
- <div class="flex items-center justify-between mb-6">
2956
- <h2 class="text-2xl font-bold text-white">Key Insights</h2>
2957
- <span class="text-sm text-slate-400">{{ insights.length }} insights</span>
2970
+ <section class="mt-6 sm:mt-8">
2971
+ <div class="flex items-center justify-between mb-4 sm:mb-6">
2972
+ <h2 class="text-xl sm:text-2xl font-bold text-white">Key Insights</h2>
2973
+ <span class="text-xs sm:text-sm text-slate-400">{{ insights.length }} insights</span>
2958
2974
  </div>
2959
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
2960
- <symphiq-funnel-analysis-insight-card *ngFor="let insight of insights" [insight]="insight" [allMetrics]="allMetrics" />
2975
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
2976
+ @for (insight of insights; track $index) {
2977
+ <symphiq-funnel-analysis-insight-card [insight]="insight" [allMetrics]="allMetrics" />
2978
+ }
2961
2979
  </div>
2962
2980
  </section>
2963
2981
 
2964
2982
  <section>
2965
- <div class="flex items-center justify-between mb-6">
2966
- <h2 class="text-2xl font-bold text-white">Performance Metrics</h2>
2967
- <div class="flex gap-3 items-center">
2983
+ <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0 mb-4 sm:mb-6">
2984
+ <h2 class="text-xl sm:text-2xl font-bold text-white">Performance Metrics</h2>
2985
+ <div class="flex gap-2 sm:gap-3 items-center w-full sm:w-auto">
2968
2986
  <select
2969
2987
  [(ngModel)]="selectedCategory"
2970
- class="px-4 py-2 rounded-lg text-sm font-medium bg-slate-700 text-white border border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all cursor-pointer">
2971
- <option *ngFor="let cat of categories" [value]="cat.value">{{ cat.label }}</option>
2988
+ class="flex-1 sm:flex-initial px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium bg-slate-700 text-white border border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all cursor-pointer">
2989
+ @for (cat of categories; track cat.value) {
2990
+ <option [value]="cat.value">{{ cat.label }}</option>
2991
+ }
2972
2992
  </select>
2973
2993
  <button
2974
2994
  (click)="reverseSortOrder = !reverseSortOrder"
2975
- class="px-4 py-2 rounded-lg text-sm font-medium bg-slate-700 text-white border border-slate-600 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all flex items-center gap-2"
2995
+ class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium bg-slate-700 text-white border border-slate-600 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all flex items-center gap-2"
2976
2996
  [title]="reverseSortOrder ? 'Sort: Revenue to Views' : 'Sort: Views to Revenue'">
2977
2997
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2978
- <path *ngIf="!reverseSortOrder" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
2979
- <path *ngIf="reverseSortOrder" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
2998
+ @if (!reverseSortOrder) {
2999
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
3000
+ }
3001
+ @if (reverseSortOrder) {
3002
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
3003
+ }
2980
3004
  </svg>
2981
3005
  <span class="hidden sm:inline">Sort</span>
2982
3006
  </button>
2983
3007
  </div>
2984
3008
  </div>
2985
- <div class="space-y-6">
2986
- <ng-container *ngFor="let funnelGroup of getGroupedMetrics()">
3009
+ <div class="space-y-4 sm:space-y-6">
3010
+ @for (funnelGroup of getGroupedMetrics(); track funnelGroup.funnelMetric.metric) {
2987
3011
  <div class="w-full">
2988
3012
  <symphiq-funnel-analysis-metric-card [metric]="funnelGroup.funnelMetric" [insights]="insights" />
2989
3013
  </div>
2990
- <div *ngIf="funnelGroup.relatedMetrics.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch">
2991
- <div *ngFor="let metric of funnelGroup.relatedMetrics" class="flex">
2992
- <symphiq-funnel-analysis-metric-card class="flex-1" [metric]="metric" [insights]="insights" />
3014
+ @if (funnelGroup.relatedMetrics.length > 0) {
3015
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 items-stretch">
3016
+ @for (metric of funnelGroup.relatedMetrics; track metric.metric) {
3017
+ <div class="flex">
3018
+ <symphiq-funnel-analysis-metric-card class="flex-1" [metric]="metric" [insights]="insights" />
3019
+ </div>
3020
+ }
2993
3021
  </div>
2994
- </div>
2995
- </ng-container>
3022
+ }
3023
+ }
2996
3024
  </div>
2997
3025
  </section>
2998
3026
 
2999
3027
  <section>
3000
- <h2 class="text-2xl font-bold text-white mb-6">Performance Breakdowns</h2>
3028
+ <h2 class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6">Performance Breakdowns</h2>
3001
3029
  <div>
3002
- <symphiq-funnel-analysis-breakdown-section *ngFor="let breakdown of breakdowns" [breakdown]="breakdown" />
3030
+ @for (breakdown of breakdowns; track $index) {
3031
+ <symphiq-funnel-analysis-breakdown-section [breakdown]="breakdown" />
3032
+ }
3003
3033
  </div>
3004
3034
  </section>
3005
3035
  </div>
3006
3036
  </main>
3007
3037
 
3008
3038
  <symphiq-funnel-analysis-modal></symphiq-funnel-analysis-modal>
3009
-
3010
- <footer class="bg-slate-900/50 backdrop-blur-sm border-t border-slate-800 mt-12">
3011
- <div class="max-w-7xl mx-auto px-6 py-8">
3012
- <div class="text-center text-slate-500 text-sm">
3013
- <p>Symphiq Revenue Orchestration Workspace</p>
3014
- <p class="mt-1">© 2025 Symphiq. All rights reserved.</p>
3015
- </div>
3016
- </div>
3017
- </footer>
3018
3039
  </div>
3019
3040
  `,
3020
3041
  }]
3021
3042
  }], () => [{ type: FunnelOrderService }], { data: [{
3022
3043
  type: Input
3023
3044
  }] }); })();
3024
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 115 }); })();
3045
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 118 }); })();
3025
3046
 
3026
3047
  /*
3027
3048
  * Public API Surface of symphiq-components