@eric-emg/symphiq-components 1.2.208 → 1.2.210

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 (4) hide show
  1. package/fesm2022/symphiq-components.mjs +447 -291
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles.css +0 -3
package/fesm2022/symphiq-components.mjs CHANGED
@@ -54808,13 +54808,23 @@ function getPacingDisplayInfo(pacingPercentage, status, isDark) {
54808
54808
  };
54809
54809
  }
54810
54810
  function calculateMetricPacing(metric) {
54811
+ console.group(`[PACING] calculateMetricPacing for ${metric.metric}`);
54812
+ console.log('[PACING] Input metric:', JSON.stringify(metric, null, 2));
54811
54813
  const currentValue = metric.currentValue || 0;
54812
54814
  const priorYtdValue = metric.priorYtdValue || 0;
54813
54815
  const targetValue = metric.targetValue;
54814
- const pacingPercentage = metric.pacingPercentage ||
54815
- (priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0);
54816
+ console.log('[PACING] Extracted values:', { currentValue, priorYtdValue, targetValue });
54817
+ const calculatedPacingPct = priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0;
54818
+ const pacingPercentage = metric.pacingPercentage || calculatedPacingPct;
54819
+ console.log('[PACING] Pacing calculation:', {
54820
+ 'metric.pacingPercentage (pre-calculated)': metric.pacingPercentage,
54821
+ 'calculatedPacingPct': calculatedPacingPct,
54822
+ 'final pacingPercentage': pacingPercentage
54823
+ });
54816
54824
  const projectedValue = metric.projectedValue || currentValue;
54817
54825
  const status = calculatePacingStatus(currentValue, priorYtdValue, targetValue);
54826
+ console.log('[PACING] Result:', { pacingPercentage, status, projectedValue });
54827
+ console.groupEnd();
54818
54828
  return {
54819
54829
  pacingPercentage,
54820
54830
  status,
@@ -54822,20 +54832,55 @@ function calculateMetricPacing(metric) {
54822
54832
  };
54823
54833
  }
54824
54834
  function extractMetricPacing(pacingResponse, metricEnum) {
54825
- if (!pacingResponse)
54835
+ console.group(`[PACING] extractMetricPacing for ${metricEnum}`);
54836
+ if (!pacingResponse) {
54837
+ console.log('[PACING] No pacingResponse provided - returning null');
54838
+ console.groupEnd();
54826
54839
  return null;
54840
+ }
54841
+ console.log('[PACING] pacingResponse structure:', {
54842
+ hasSoFarMetricValues: !!pacingResponse.soFarMetricValues,
54843
+ soFarMetricValuesCount: pacingResponse.soFarMetricValues?.length ?? 0,
54844
+ soFarMetrics: pacingResponse.soFarMetricValues?.map(m => m.metric),
54845
+ hasProjectedMetricValues: !!pacingResponse.projectedMetricValues,
54846
+ projectedMetricValuesCount: pacingResponse.projectedMetricValues?.length ?? 0,
54847
+ projectedMetrics: pacingResponse.projectedMetricValues?.map(m => m.metric),
54848
+ hasLastYearMetricValuesMonthly: !!pacingResponse.lastYearMetricValuesMonthly,
54849
+ lastYearMetricValuesMonthlyCount: pacingResponse.lastYearMetricValuesMonthly?.length ?? 0,
54850
+ lastYearMetrics: [...new Set(pacingResponse.lastYearMetricValuesMonthly?.map(m => m.metric))]
54851
+ });
54827
54852
  const soFarMetric = pacingResponse.soFarMetricValues?.find(m => m.metric === metricEnum);
54828
54853
  const projectedMetric = pacingResponse.projectedMetricValues?.find(m => m.metric === metricEnum);
54829
54854
  const lastYearMetrics = pacingResponse.lastYearMetricValuesMonthly?.filter(m => m.metric === metricEnum) || [];
54830
- if (!soFarMetric && !projectedMetric)
54855
+ console.log('[PACING] Found metrics for', metricEnum, ':', {
54856
+ soFarMetric: soFarMetric ? { metric: soFarMetric.metric, value: soFarMetric.value } : null,
54857
+ projectedMetric: projectedMetric ? { metric: projectedMetric.metric, value: projectedMetric.value } : null,
54858
+ lastYearMetricsCount: lastYearMetrics.length,
54859
+ lastYearMetricsValues: lastYearMetrics.map(m => ({ metric: m.metric, value: m.value }))
54860
+ });
54861
+ if (!soFarMetric && !projectedMetric) {
54862
+ console.log('[PACING] No soFarMetric and no projectedMetric found - returning null');
54863
+ console.groupEnd();
54831
54864
  return null;
54865
+ }
54832
54866
  const currentValue = soFarMetric?.value ? parseFloat(soFarMetric.value) : 0;
54833
54867
  const projectedValue = projectedMetric?.value ? parseFloat(projectedMetric.value) : 0;
54834
54868
  const priorYtdValue = lastYearMetrics.reduce((sum, m) => {
54835
54869
  return sum + (m.value ? parseFloat(m.value) : 0);
54836
54870
  }, 0);
54837
- const pacingPercentage = priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0;
54838
- return {
54871
+ console.log('[PACING] Calculated values:', {
54872
+ currentValue,
54873
+ projectedValue,
54874
+ priorYtdValue,
54875
+ 'priorYtdValue === 0': priorYtdValue === 0
54876
+ });
54877
+ if (priorYtdValue === 0) {
54878
+ console.log('[PACING] priorYtdValue is 0 - returning null (no prior year data to compare)');
54879
+ console.groupEnd();
54880
+ return null;
54881
+ }
54882
+ const pacingPercentage = ((currentValue - priorYtdValue) / priorYtdValue) * 100;
54883
+ const result = {
54839
54884
  metric: metricEnum,
54840
54885
  currentValue,
54841
54886
  priorYtdValue,
@@ -54843,6 +54888,9 @@ function extractMetricPacing(pacingResponse, metricEnum) {
54843
54888
  pacingPercentage,
54844
54889
  ytdVariancePercent: pacingPercentage
54845
54890
  };
54891
+ console.log('[PACING] Returning PerformanceMetricInterface:', result);
54892
+ console.groupEnd();
54893
+ return result;
54846
54894
  }
54847
54895
 
54848
54896
  class PacingStatusBadgeComponent {
@@ -55015,7 +55063,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template
55015
55063
  i0.ɵɵadvance();
55016
55064
  i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
55017
55065
  i0.ɵɵadvance();
55018
- i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(metric_r3.calc.percentageIncrease, 1), " ");
55066
+ i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(metric_r3.calc.metric), "", ctx_r1.formatPercentage(metric_r3.calc.percentageIncrease, 1), " ");
55019
55067
  i0.ɵɵadvance();
55020
55068
  i0.ɵɵproperty("ngClass", metric_r3.pacingInfo ? "grid-cols-3" : "grid-cols-2");
55021
55069
  i0.ɵɵadvance(2);
@@ -55035,7 +55083,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, c
55035
55083
  i0.ɵɵtext(3, " Related Metrics ");
55036
55084
  i0.ɵɵelementEnd();
55037
55085
  i0.ɵɵelementStart(4, "div", 19);
55038
- i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 14, "div", 20, _forTrack1$3);
55086
+ i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 15, "div", 20, _forTrack1$3);
55039
55087
  i0.ɵɵelementEnd()();
55040
55088
  } if (rf & 2) {
55041
55089
  const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55087,7 +55135,7 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
55087
55135
  i0.ɵɵadvance();
55088
55136
  i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
55089
55137
  i0.ɵɵadvance();
55090
- i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(stage_r1.stageMetric.percentageIncrease, 1), " ");
55138
+ i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(stage_r1.stageMetric.metric), "", ctx_r1.formatPercentage(stage_r1.stageMetric.percentageIncrease, 1), " ");
55091
55139
  i0.ɵɵadvance(3);
55092
55140
  i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
55093
55141
  i0.ɵɵadvance();
@@ -55119,13 +55167,26 @@ class FunnelMetricsVisualizationComponent {
55119
55167
  this.funnelStages = computed(() => {
55120
55168
  const calcs = this.calculations();
55121
55169
  const pacingResponse = this.pacingMetrics();
55170
+ console.group('[PACING] funnelStages computed');
55171
+ console.log('[PACING] calculations count:', calcs.length);
55172
+ console.log('[PACING] calculations:', calcs.map(c => ({ metric: c.metric, isFunnelStage: c.isFunnelStage, funnelMetric: c.funnelMetric })));
55173
+ console.log('[PACING] pacingResponse exists:', !!pacingResponse);
55174
+ if (pacingResponse) {
55175
+ console.log('[PACING] pacingResponse raw:', JSON.stringify(pacingResponse, null, 2));
55176
+ }
55122
55177
  const grouped = new Map();
55123
55178
  const stageMetrics = calcs.filter(c => c.isFunnelStage);
55124
55179
  const relatedMetrics = calcs.filter(c => !c.isFunnelStage);
55180
+ console.log('[PACING] stageMetrics count:', stageMetrics.length);
55181
+ console.log('[PACING] stageMetrics:', stageMetrics.map(s => s.metric));
55182
+ console.log('[PACING] relatedMetrics count:', relatedMetrics.length);
55125
55183
  stageMetrics.forEach(stageMetric => {
55126
55184
  const related = relatedMetrics.filter(rm => rm.funnelMetric === stageMetric.metric);
55185
+ console.log(`[PACING] Processing stage: ${stageMetric.metric}`);
55127
55186
  const stagePacingMetric = extractMetricPacing(pacingResponse, stageMetric.metric);
55187
+ console.log(`[PACING] stagePacingMetric for ${stageMetric.metric}:`, stagePacingMetric);
55128
55188
  const stagePacingInfo = stagePacingMetric ? calculateMetricPacing(stagePacingMetric) : null;
55189
+ console.log(`[PACING] stagePacingInfo for ${stageMetric.metric}:`, stagePacingInfo);
55129
55190
  const relatedWithPacing = related.map(relMetric => {
55130
55191
  const relPacingMetric = extractMetricPacing(pacingResponse, relMetric.metric);
55131
55192
  const relPacingInfo = relPacingMetric ? calculateMetricPacing(relPacingMetric) : null;
@@ -55137,11 +55198,18 @@ class FunnelMetricsVisualizationComponent {
55137
55198
  pacingInfo: stagePacingInfo
55138
55199
  });
55139
55200
  });
55140
- return Array.from(grouped.values()).sort((a, b) => {
55201
+ const result = Array.from(grouped.values()).sort((a, b) => {
55141
55202
  const aInd = a.stageMetric.funnelInd ?? 999;
55142
55203
  const bInd = b.stageMetric.funnelInd ?? 999;
55143
55204
  return aInd - bInd;
55144
55205
  });
55206
+ console.log('[PACING] Final funnelStages result:', result.map(r => ({
55207
+ stage: r.stageMetric.metric,
55208
+ hasPacingInfo: !!r.pacingInfo,
55209
+ pacingPercentage: r.pacingInfo?.pacingPercentage
55210
+ })));
55211
+ console.groupEnd();
55212
+ return result;
55145
55213
  }, ...(ngDevMode ? [{ debugName: "funnelStages" }] : []));
55146
55214
  }
55147
55215
  stageCardClasses() {
@@ -55242,12 +55310,15 @@ class FunnelMetricsVisualizationComponent {
55242
55310
  getMarkdownTooltipContent(markdown, title) {
55243
55311
  return { title, markdown };
55244
55312
  }
55313
+ getGrowthSign(metric) {
55314
+ return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
55315
+ }
55245
55316
  static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
55246
55317
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["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, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-2", "flex-1"], [1, "text-sm", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
55247
55318
  i0.ɵɵelementStart(0, "div", 0);
55248
55319
  i0.ɵɵelement(1, "symphiq-tooltip-container");
55249
55320
  i0.ɵɵelementStart(2, "div", 1);
55250
- i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 17, "div", 2, _forTrack0$i);
55321
+ i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 18, "div", 2, _forTrack0$i);
55251
55322
  i0.ɵɵelementEnd()();
55252
55323
  } if (rf & 2) {
55253
55324
  i0.ɵɵadvance(3);
@@ -55261,140 +55332,140 @@ class FunnelMetricsVisualizationComponent {
55261
55332
  standalone: true,
55262
55333
  imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent],
55263
55334
  changeDetection: ChangeDetectionStrategy.OnPush,
55264
- template: `
55265
- <div class="space-y-6">
55266
- <symphiq-tooltip-container />
55267
- <div class="space-y-8">
55268
- @for (stage of funnelStages(); track stage.stageMetric.metric) {
55269
- <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
55270
- <div class="flex items-start justify-between mb-4">
55271
- <div class="flex-1">
55272
- <div class="flex items-center gap-2 mb-1">
55273
- <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
55274
- {{ getMetricTitle(stage.stageMetric) }}
55275
- </h3>
55276
- @if (stage.stageMetric.description) {
55277
- <button
55278
- type="button"
55279
- [ngClass]="infoIconClasses()"
55280
- class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
55281
- [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
55282
- tooltipType="markdown"
55283
- tooltipPosition="right">
55284
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55285
- <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" />
55286
- </svg>
55287
- </button>
55288
- }
55289
- </div>
55290
- </div>
55291
- <div class="flex items-center gap-3">
55292
- @if (stage.pacingInfo) {
55293
- <symphiq-pacing-status-badge
55294
- [viewMode]="viewMode()"
55295
- [pacingPercentage]="stage.pacingInfo.pacingPercentage"
55296
- [status]="stage.pacingInfo.status"
55297
- />
55298
- }
55299
- <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
55300
- +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
55301
- </div>
55302
- </div>
55303
- </div>
55304
-
55305
- <div class="grid grid-cols-3 gap-4 mb-4">
55306
- <div>
55307
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55308
- {{ priorYear() }} Actual
55309
- </p>
55310
- <p [ngClass]="valueClasses()" class="text-2xl font-bold">
55311
- {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
55312
- </p>
55313
- </div>
55314
- @if (stage.pacingInfo) {
55315
- <div>
55316
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55317
- {{ currentYear() }} Projected
55318
- </p>
55319
- <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
55320
- {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
55321
- </p>
55322
- </div>
55323
- }
55324
- <div>
55325
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55326
- {{ currentYear() }} Target
55327
- </p>
55328
- <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
55329
- {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
55330
- </p>
55331
- </div>
55332
- </div>
55333
-
55334
- @if (stage.relatedMetrics.length > 0) {
55335
- <div [ngClass]="dividerClasses()" class="my-4"></div>
55336
-
55337
- <div class="space-y-2">
55338
- <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
55339
- Related Metrics
55340
- </p>
55341
- <div class="grid gap-2">
55342
- @for (metric of stage.relatedMetrics; track metric.calc.metric) {
55343
- <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
55344
- <div class="flex items-center justify-between mb-2">
55345
- <div class="flex items-center gap-2 flex-1">
55346
- <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
55347
- {{ getMetricTitle(metric.calc) }}
55348
- </p>
55349
- @if (metric.calc.description) {
55350
- <button
55351
- type="button"
55352
- [ngClass]="infoIconClasses()"
55353
- class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
55354
- [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
55355
- tooltipType="markdown"
55356
- tooltipPosition="right">
55357
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55358
- <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" />
55359
- </svg>
55360
- </button>
55361
- }
55362
- </div>
55363
- <div class="flex items-center gap-2">
55364
- @if (metric.pacingInfo) {
55365
- <symphiq-pacing-status-badge
55366
- [viewMode]="viewMode()"
55367
- [pacingPercentage]="metric.pacingInfo.pacingPercentage"
55368
- [status]="metric.pacingInfo.status"
55369
- />
55370
- }
55371
- <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
55372
- +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
55373
- </span>
55374
- </div>
55375
- </div>
55376
- <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
55377
- <div>
55378
- <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
55379
- </div>
55380
- @if (metric.pacingInfo) {
55381
- <div>
55382
- <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
55383
- </div>
55384
- }
55385
- <div>
55386
- <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
55387
- </div>
55388
- </div>
55389
- </div>
55390
- }
55391
- </div>
55392
- </div>
55393
- }
55394
- </div>
55395
- }
55396
- </div>
55397
- </div>
55335
+ template: `
55336
+ <div class="space-y-6">
55337
+ <symphiq-tooltip-container />
55338
+ <div class="space-y-8">
55339
+ @for (stage of funnelStages(); track stage.stageMetric.metric) {
55340
+ <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
55341
+ <div class="flex items-start justify-between mb-4">
55342
+ <div class="flex-1">
55343
+ <div class="flex items-center gap-2 mb-1">
55344
+ <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
55345
+ {{ getMetricTitle(stage.stageMetric) }}
55346
+ </h3>
55347
+ @if (stage.stageMetric.description) {
55348
+ <button
55349
+ type="button"
55350
+ [ngClass]="infoIconClasses()"
55351
+ class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
55352
+ [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
55353
+ tooltipType="markdown"
55354
+ tooltipPosition="right">
55355
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55356
+ <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" />
55357
+ </svg>
55358
+ </button>
55359
+ }
55360
+ </div>
55361
+ </div>
55362
+ <div class="flex items-center gap-3">
55363
+ @if (stage.pacingInfo) {
55364
+ <symphiq-pacing-status-badge
55365
+ [viewMode]="viewMode()"
55366
+ [pacingPercentage]="stage.pacingInfo.pacingPercentage"
55367
+ [status]="stage.pacingInfo.status"
55368
+ />
55369
+ }
55370
+ <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
55371
+ {{ getGrowthSign(stage.stageMetric.metric) }}{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
55372
+ </div>
55373
+ </div>
55374
+ </div>
55375
+
55376
+ <div class="grid grid-cols-3 gap-4 mb-4">
55377
+ <div>
55378
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55379
+ {{ priorYear() }} Actual
55380
+ </p>
55381
+ <p [ngClass]="valueClasses()" class="text-2xl font-bold">
55382
+ {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
55383
+ </p>
55384
+ </div>
55385
+ @if (stage.pacingInfo) {
55386
+ <div>
55387
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55388
+ {{ currentYear() }} Projected
55389
+ </p>
55390
+ <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
55391
+ {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
55392
+ </p>
55393
+ </div>
55394
+ }
55395
+ <div>
55396
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
55397
+ {{ currentYear() }} Target
55398
+ </p>
55399
+ <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
55400
+ {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
55401
+ </p>
55402
+ </div>
55403
+ </div>
55404
+
55405
+ @if (stage.relatedMetrics.length > 0) {
55406
+ <div [ngClass]="dividerClasses()" class="my-4"></div>
55407
+
55408
+ <div class="space-y-2">
55409
+ <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
55410
+ Related Metrics
55411
+ </p>
55412
+ <div class="grid gap-2">
55413
+ @for (metric of stage.relatedMetrics; track metric.calc.metric) {
55414
+ <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
55415
+ <div class="flex items-center justify-between mb-2">
55416
+ <div class="flex items-center gap-2 flex-1">
55417
+ <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
55418
+ {{ getMetricTitle(metric.calc) }}
55419
+ </p>
55420
+ @if (metric.calc.description) {
55421
+ <button
55422
+ type="button"
55423
+ [ngClass]="infoIconClasses()"
55424
+ class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
55425
+ [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
55426
+ tooltipType="markdown"
55427
+ tooltipPosition="right">
55428
+ <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55429
+ <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" />
55430
+ </svg>
55431
+ </button>
55432
+ }
55433
+ </div>
55434
+ <div class="flex items-center gap-2">
55435
+ @if (metric.pacingInfo) {
55436
+ <symphiq-pacing-status-badge
55437
+ [viewMode]="viewMode()"
55438
+ [pacingPercentage]="metric.pacingInfo.pacingPercentage"
55439
+ [status]="metric.pacingInfo.status"
55440
+ />
55441
+ }
55442
+ <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
55443
+ {{ getGrowthSign(metric.calc.metric) }}{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
55444
+ </span>
55445
+ </div>
55446
+ </div>
55447
+ <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
55448
+ <div>
55449
+ <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
55450
+ </div>
55451
+ @if (metric.pacingInfo) {
55452
+ <div>
55453
+ <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
55454
+ </div>
55455
+ }
55456
+ <div>
55457
+ <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
55458
+ </div>
55459
+ </div>
55460
+ </div>
55461
+ }
55462
+ </div>
55463
+ </div>
55464
+ }
55465
+ </div>
55466
+ }
55467
+ </div>
55468
+ </div>
55398
55469
  `
55399
55470
  }]
55400
55471
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
@@ -56226,11 +56297,11 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
56226
56297
 
56227
56298
  const _c0$r = ["absoluteInputRef"];
56228
56299
  const _c1$b = ["percentageInputRef"];
56229
- function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
56300
+ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
56230
56301
  i0.ɵɵelementStart(0, "div", 10);
56231
56302
  i0.ɵɵnamespaceSVG();
56232
56303
  i0.ɵɵelementStart(1, "svg", 11);
56233
- i0.ɵɵelement(2, "path", 33);
56304
+ i0.ɵɵelement(2, "path", 31);
56234
56305
  i0.ɵɵelementEnd();
56235
56306
  i0.ɵɵnamespaceHTML();
56236
56307
  i0.ɵɵelementStart(3, "div")(4, "p", 13);
@@ -56250,14 +56321,14 @@ function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf
56250
56321
  i0.ɵɵadvance();
56251
56322
  i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
56252
56323
  } }
56253
- function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56324
+ function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56254
56325
  const _r3 = i0.ɵɵgetCurrentView();
56255
- i0.ɵɵelementStart(0, "div", 36)(1, "span", 37);
56326
+ i0.ɵɵelementStart(0, "div", 34)(1, "span", 35);
56256
56327
  i0.ɵɵtext(2, " $ ");
56257
56328
  i0.ɵɵelementEnd();
56258
- i0.ɵɵelementStart(3, "input", 38, 0);
56259
- i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
56260
- i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
56329
+ i0.ɵɵelementStart(3, "input", 36, 0);
56330
+ i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
56331
+ i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
56261
56332
  i0.ɵɵelementEnd()();
56262
56333
  } if (rf & 2) {
56263
56334
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -56267,13 +56338,13 @@ function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template(rf,
56267
56338
  i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
56268
56339
  i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
56269
56340
  } }
56270
- function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56341
+ function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56271
56342
  const _r4 = i0.ɵɵgetCurrentView();
56272
- i0.ɵɵelementStart(0, "div", 36)(1, "input", 39, 1);
56273
- i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
56274
- i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
56343
+ i0.ɵɵelementStart(0, "div", 34)(1, "input", 37, 1);
56344
+ i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
56345
+ i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
56275
56346
  i0.ɵɵelementEnd();
56276
- i0.ɵɵelementStart(3, "span", 40);
56347
+ i0.ɵɵelementStart(3, "span", 38);
56277
56348
  i0.ɵɵtext(4, " % ");
56278
56349
  i0.ɵɵelementEnd()();
56279
56350
  } if (rf & 2) {
@@ -56284,17 +56355,17 @@ function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template(rf,
56284
56355
  i0.ɵɵadvance(2);
56285
56356
  i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
56286
56357
  } }
56287
- function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
56358
+ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
56288
56359
  const _r2 = i0.ɵɵgetCurrentView();
56289
- i0.ɵɵelementStart(0, "div", 34)(1, "button", 35);
56290
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_21_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
56360
+ i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
56361
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
56291
56362
  i0.ɵɵtext(2, " Absolute Amount ");
56292
56363
  i0.ɵɵelementEnd();
56293
- i0.ɵɵelementStart(3, "button", 35);
56294
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_21_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
56364
+ i0.ɵɵelementStart(3, "button", 33);
56365
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
56295
56366
  i0.ɵɵtext(4, " % Increase ");
56296
56367
  i0.ɵɵelementEnd()();
56297
- i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_21_Conditional_5_Template, 5, 3, "div", 36)(6, InitialTargetSettingComponent_Conditional_21_Conditional_6_Template, 5, 3, "div", 36);
56368
+ i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_22_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_22_Conditional_6_Template, 5, 3, "div", 34);
56298
56369
  } if (rf & 2) {
56299
56370
  const ctx_r0 = i0.ɵɵnextContext();
56300
56371
  i0.ɵɵadvance();
@@ -56304,14 +56375,14 @@ function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf
56304
56375
  i0.ɵɵadvance(2);
56305
56376
  i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
56306
56377
  } }
56307
- function InitialTargetSettingComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
56378
+ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
56308
56379
  i0.ɵɵelement(0, "symphiq-area-chart", 22);
56309
56380
  } if (rf & 2) {
56310
56381
  const ctx_r0 = i0.ɵɵnextContext();
56311
- i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "200px");
56382
+ i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
56312
56383
  } }
56313
- function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
56314
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56384
+ function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
56385
+ i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
56315
56386
  i0.ɵɵtext(2, " No revenue data available ");
56316
56387
  i0.ɵɵelementEnd()();
56317
56388
  } if (rf & 2) {
@@ -56319,77 +56390,96 @@ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf
56319
56390
  i0.ɵɵadvance();
56320
56391
  i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
56321
56392
  } }
56322
- function InitialTargetSettingComponent_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
56393
+ function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
56323
56394
  const _r5 = i0.ɵɵgetCurrentView();
56324
- i0.ɵɵelementStart(0, "button", 51);
56325
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
56395
+ i0.ɵɵelementStart(0, "button", 50);
56396
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
56326
56397
  i0.ɵɵtext(1, " Adjust Revenue Target ");
56327
56398
  i0.ɵɵelementEnd();
56328
56399
  } if (rf & 2) {
56329
56400
  const ctx_r0 = i0.ɵɵnextContext(2);
56330
56401
  i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
56331
56402
  } }
56332
- function InitialTargetSettingComponent_Conditional_32_Conditional_24_Template(rf, ctx) { if (rf & 1) {
56333
- i0.ɵɵelementStart(0, "div", 46)(1, "div", 47)(2, "span", 48);
56334
- i0.ɵɵtext(3);
56335
- i0.ɵɵelementEnd()();
56336
- i0.ɵɵelementStart(4, "div", 49)(5, "div")(6, "p", 43);
56337
- i0.ɵɵtext(7, " Gap to Close ");
56403
+ function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf, ctx) { if (rf & 1) {
56404
+ i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
56405
+ i0.ɵɵelement(2, "div", 46);
56406
+ i0.ɵɵelementStart(3, "span", 47);
56407
+ i0.ɵɵtext(4);
56338
56408
  i0.ɵɵelementEnd();
56339
- i0.ɵɵelementStart(8, "p", 50);
56340
- i0.ɵɵtext(9);
56409
+ i0.ɵɵelement(5, "div", 46);
56410
+ i0.ɵɵelementEnd();
56411
+ i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 41);
56412
+ i0.ɵɵtext(9, " Gap to Close ");
56413
+ i0.ɵɵelementEnd();
56414
+ i0.ɵɵelementStart(10, "p", 49);
56415
+ i0.ɵɵtext(11);
56341
56416
  i0.ɵɵelementEnd()();
56342
- i0.ɵɵelementStart(10, "div")(11, "p", 43);
56343
- i0.ɵɵtext(12, " Additional Growth Needed ");
56417
+ i0.ɵɵelementStart(12, "div")(13, "div", 51)(14, "p", 13);
56418
+ i0.ɵɵtext(15, " Additional Growth Needed ");
56344
56419
  i0.ɵɵelementEnd();
56345
- i0.ɵɵelementStart(13, "p", 50);
56346
- i0.ɵɵtext(14);
56420
+ i0.ɵɵelementStart(16, "button", 52);
56421
+ i0.ɵɵnamespaceSVG();
56422
+ i0.ɵɵelementStart(17, "svg", 53);
56423
+ i0.ɵɵelement(18, "path", 54);
56424
+ i0.ɵɵelementEnd()()();
56425
+ i0.ɵɵnamespaceHTML();
56426
+ i0.ɵɵelementStart(19, "p", 49);
56427
+ i0.ɵɵtext(20);
56347
56428
  i0.ɵɵelementEnd()()()();
56348
56429
  } if (rf & 2) {
56349
56430
  const ctx_r0 = i0.ɵɵnextContext(2);
56350
- i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
56351
56431
  i0.ɵɵadvance(2);
56432
+ i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56433
+ i0.ɵɵadvance();
56352
56434
  i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
56353
56435
  i0.ɵɵadvance();
56354
56436
  i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " YTD Gap ");
56437
+ i0.ɵɵadvance();
56438
+ i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56355
56439
  i0.ɵɵadvance(3);
56356
56440
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
56357
56441
  i0.ɵɵadvance(2);
56358
56442
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
56359
56443
  i0.ɵɵadvance();
56360
56444
  i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.absValue(ctx_r0.gapToClose().amount)), " ");
56361
- i0.ɵɵadvance(2);
56445
+ i0.ɵɵadvance(3);
56362
56446
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
56363
56447
  i0.ɵɵadvance(2);
56448
+ i0.ɵɵproperty("ngClass", ctx_r0.infoIconClasses())("libSymphiqTooltip", ctx_r0.additionalGrowthTooltip);
56449
+ i0.ɵɵadvance(3);
56364
56450
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
56365
56451
  i0.ɵɵadvance();
56366
56452
  i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
56367
56453
  } }
56368
- function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
56369
- i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 42)(3, "div")(4, "p", 43);
56454
+ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
56455
+ i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 40)(3, "div")(4, "p", 41);
56370
56456
  i0.ɵɵtext(5);
56371
56457
  i0.ɵɵelementEnd();
56372
- i0.ɵɵelementStart(6, "p", 44);
56458
+ i0.ɵɵelementStart(6, "p", 42);
56373
56459
  i0.ɵɵtext(7);
56374
56460
  i0.ɵɵelementEnd()();
56375
- i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_32_Conditional_8_Template, 2, 1, "button", 45);
56461
+ i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 2, 1, "button", 43);
56376
56462
  i0.ɵɵelementEnd();
56377
- i0.ɵɵelementStart(9, "div", 46)(10, "div", 47)(11, "span", 48);
56378
- i0.ɵɵtext(12);
56379
- i0.ɵɵelementEnd()();
56380
- i0.ɵɵelementStart(13, "div", 49)(14, "div")(15, "p", 43);
56381
- i0.ɵɵtext(16, " Increase Amount ");
56463
+ i0.ɵɵelementStart(9, "div", 44)(10, "div", 45);
56464
+ i0.ɵɵelement(11, "div", 46);
56465
+ i0.ɵɵelementStart(12, "span", 47);
56466
+ i0.ɵɵtext(13);
56382
56467
  i0.ɵɵelementEnd();
56383
- i0.ɵɵelementStart(17, "p", 50);
56384
- i0.ɵɵtext(18);
56468
+ i0.ɵɵelement(14, "div", 46);
56469
+ i0.ɵɵelementEnd();
56470
+ i0.ɵɵelementStart(15, "div", 48)(16, "div")(17, "p", 41);
56471
+ i0.ɵɵtext(18, " Increase Amount ");
56472
+ i0.ɵɵelementEnd();
56473
+ i0.ɵɵelementStart(19, "p", 49);
56474
+ i0.ɵɵtext(20);
56385
56475
  i0.ɵɵelementEnd()();
56386
- i0.ɵɵelementStart(19, "div")(20, "p", 43);
56387
- i0.ɵɵtext(21, " % Growth ");
56476
+ i0.ɵɵelementStart(21, "div")(22, "p", 41);
56477
+ i0.ɵɵtext(23, " % Growth ");
56388
56478
  i0.ɵɵelementEnd();
56389
- i0.ɵɵelementStart(22, "p", 50);
56390
- i0.ɵɵtext(23);
56479
+ i0.ɵɵelementStart(24, "p", 49);
56480
+ i0.ɵɵtext(25);
56391
56481
  i0.ɵɵelementEnd()()()();
56392
- i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_32_Conditional_24_Template, 15, 10, "div", 46);
56482
+ i0.ɵɵconditionalCreate(26, InitialTargetSettingComponent_Conditional_33_Conditional_26_Template, 21, 13, "div", 44);
56393
56483
  i0.ɵɵelementEnd()();
56394
56484
  } if (rf & 2) {
56395
56485
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56404,12 +56494,14 @@ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf
56404
56494
  i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
56405
56495
  i0.ɵɵadvance();
56406
56496
  i0.ɵɵconditional(ctx_r0.calculationState() === "results" ? 8 : -1);
56497
+ i0.ɵɵadvance(3);
56498
+ i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56407
56499
  i0.ɵɵadvance();
56408
- i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
56409
- i0.ɵɵadvance(2);
56410
56500
  i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
56411
56501
  i0.ɵɵadvance();
56412
56502
  i0.ɵɵtextInterpolate1(" vs. ", ctx_r0.priorYear(), " ");
56503
+ i0.ɵɵadvance();
56504
+ i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56413
56505
  i0.ɵɵadvance(3);
56414
56506
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
56415
56507
  i0.ɵɵadvance(2);
@@ -56423,31 +56515,47 @@ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf
56423
56515
  i0.ɵɵadvance();
56424
56516
  i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
56425
56517
  i0.ɵɵadvance();
56426
- i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 24 : -1);
56518
+ i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 26 : -1);
56427
56519
  } }
56428
- function InitialTargetSettingComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
56520
+ function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
56429
56521
  i0.ɵɵelement(0, "symphiq-area-chart", 22);
56430
56522
  } if (rf & 2) {
56431
- const ctx_r0 = i0.ɵɵnextContext();
56523
+ const ctx_r0 = i0.ɵɵnextContext(2);
56432
56524
  i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
56433
56525
  } }
56434
- function InitialTargetSettingComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
56435
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56526
+ function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56527
+ i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
56436
56528
  i0.ɵɵtext(2, " No revenue data available ");
56437
56529
  i0.ɵɵelementEnd()();
56438
56530
  } if (rf & 2) {
56439
- const ctx_r0 = i0.ɵɵnextContext();
56531
+ const ctx_r0 = i0.ɵɵnextContext(2);
56440
56532
  i0.ɵɵadvance();
56441
56533
  i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
56442
56534
  } }
56443
- function InitialTargetSettingComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
56444
- i0.ɵɵelementStart(0, "div", 3)(1, "div", 52)(2, "h2", 53);
56535
+ function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
56536
+ i0.ɵɵelementStart(0, "div", 27)(1, "p", 20);
56537
+ i0.ɵɵtext(2, " Year-over-Year Revenue Trend ");
56538
+ i0.ɵɵelementEnd();
56539
+ i0.ɵɵelementStart(3, "div", 21);
56540
+ i0.ɵɵconditionalCreate(4, InitialTargetSettingComponent_Conditional_34_Conditional_4_Template, 1, 5, "symphiq-area-chart", 22)(5, InitialTargetSettingComponent_Conditional_34_Conditional_5_Template, 3, 1, "div", 23);
56541
+ i0.ɵɵelementEnd()();
56542
+ } if (rf & 2) {
56543
+ const ctx_r0 = i0.ɵɵnextContext();
56544
+ i0.ɵɵadvance();
56545
+ i0.ɵɵproperty("ngClass", ctx_r0.chartTitleClasses());
56546
+ i0.ɵɵadvance(2);
56547
+ i0.ɵɵproperty("ngClass", ctx_r0.chartContainerClasses());
56548
+ i0.ɵɵadvance();
56549
+ i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
56550
+ } }
56551
+ function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
56552
+ i0.ɵɵelementStart(0, "div", 3)(1, "div", 55)(2, "h2", 56);
56445
56553
  i0.ɵɵtext(3, " Contributing Metrics ");
56446
56554
  i0.ɵɵelementEnd();
56447
- i0.ɵɵelementStart(4, "p", 41);
56555
+ i0.ɵɵelementStart(4, "p", 39);
56448
56556
  i0.ɵɵtext(5);
56449
56557
  i0.ɵɵelementEnd()();
56450
- i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 54);
56558
+ i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 57);
56451
56559
  i0.ɵɵelementEnd();
56452
56560
  } if (rf & 2) {
56453
56561
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56519,16 +56627,33 @@ class InitialTargetSettingComponent {
56519
56627
  }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
56520
56628
  this.displayedMetricCalculations = computed(() => {
56521
56629
  const response = this.storedResponse();
56630
+ const pacingData = this.pacingMetrics();
56631
+ console.group('[PACING] displayedMetricCalculations computed');
56632
+ console.log('[PACING] storedResponse exists:', !!response);
56633
+ console.log('[PACING] pacingMetrics exists:', !!pacingData);
56634
+ if (pacingData) {
56635
+ console.log('[PACING] pacingMetrics summary:', {
56636
+ soFarMetricValuesCount: pacingData.soFarMetricValues?.length ?? 0,
56637
+ soFarMetrics: pacingData.soFarMetricValues?.map(m => ({ metric: m.metric, value: m.value })),
56638
+ projectedMetricValuesCount: pacingData.projectedMetricValues?.length ?? 0,
56639
+ lastYearMetricValuesMonthlyCount: pacingData.lastYearMetricValuesMonthly?.length ?? 0,
56640
+ lastYearUniqueMetrics: [...new Set(pacingData.lastYearMetricValuesMonthly?.map(m => m.metric))]
56641
+ });
56642
+ }
56522
56643
  if (!response) {
56644
+ console.log('[PACING] No storedResponse - returning empty array');
56645
+ console.groupEnd();
56523
56646
  return [];
56524
56647
  }
56525
56648
  const results = [];
56526
56649
  if (response.funnelMetricValues) {
56650
+ console.log('[PACING] Processing funnelMetricValues:', response.funnelMetricValues.length);
56527
56651
  response.funnelMetricValues.forEach((metricValue) => {
56528
56652
  const metric = metricValue.metric;
56529
56653
  const funnelMetric = this.funnelMetrics().find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
56530
56654
  const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
56531
56655
  const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
56656
+ console.log(`[PACING] Stage metric ${metric}:`, { currentValue, targetValue, percentageIncrease, funnelInd: funnelMetric?.funnelInd });
56532
56657
  results.push({
56533
56658
  metric,
56534
56659
  funnelMetric: metric,
@@ -56543,6 +56668,7 @@ class InitialTargetSettingComponent {
56543
56668
  });
56544
56669
  }
56545
56670
  if (response.relatedMetricTargets) {
56671
+ console.log('[PACING] Processing relatedMetricTargets:', response.relatedMetricTargets.length);
56546
56672
  response.relatedMetricTargets.forEach((metricValue) => {
56547
56673
  const metric = metricValue.metric;
56548
56674
  const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
@@ -56561,6 +56687,10 @@ class InitialTargetSettingComponent {
56561
56687
  });
56562
56688
  });
56563
56689
  }
56690
+ console.log('[PACING] Final results count:', results.length);
56691
+ console.log('[PACING] Stage metrics:', results.filter(r => r.isFunnelStage).map(r => r.metric));
56692
+ console.log('[PACING] Related metrics:', results.filter(r => !r.isFunnelStage).map(r => r.metric));
56693
+ console.groupEnd();
56564
56694
  return results;
56565
56695
  }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
56566
56696
  this.displayedTargetRevenue = computed(() => {
@@ -56627,6 +56757,10 @@ class InitialTargetSettingComponent {
56627
56757
  }, ...(ngDevMode ? [{ debugName: "revenueChartData" }] : []));
56628
56758
  this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
56629
56759
  this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
56760
+ this.additionalGrowthTooltip = {
56761
+ title: 'Additional Growth Needed',
56762
+ markdown: 'This percentage represents the additional growth required beyond your current projected pace to reach your revenue target. It shows how much more improvement is needed in your funnel metrics to close the gap between your projected performance and your goal.'
56763
+ };
56630
56764
  effect(() => {
56631
56765
  const response = this.reverseCalculationResponse();
56632
56766
  if (response) {
@@ -56812,6 +56946,11 @@ class InitialTargetSettingComponent {
56812
56946
  ? 'border-t border-purple-500/20'
56813
56947
  : 'border-t border-purple-200';
56814
56948
  }
56949
+ dividerBorderClasses() {
56950
+ return this.viewMode() === ViewModeEnum.DARK
56951
+ ? 'bg-purple-500/20'
56952
+ : 'bg-purple-200';
56953
+ }
56815
56954
  chartTitleClasses() {
56816
56955
  return this.viewMode() === ViewModeEnum.DARK
56817
56956
  ? 'text-slate-200'
@@ -56882,6 +57021,11 @@ class InitialTargetSettingComponent {
56882
57021
  ? 'bg-slate-800/60 border-slate-600'
56883
57022
  : 'bg-slate-50 border-slate-300';
56884
57023
  }
57024
+ infoIconClasses() {
57025
+ return this.viewMode() === ViewModeEnum.DARK
57026
+ ? 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300'
57027
+ : 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700';
57028
+ }
56885
57029
  static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
56886
57030
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], viewQuery: function InitialTargetSettingComponent_Query(rf, ctx) { if (rf & 1) {
56887
57031
  i0.ɵɵviewQuery(_c0$r, 5);
@@ -56890,50 +57034,48 @@ class InitialTargetSettingComponent {
56890
57034
  let _t;
56891
57035
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
56892
57036
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
56893
- } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 45, vars: 37, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "chart-section-collapse"], [1, "chart-section-content"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6", 3, "ngClass"], [1, "absolute", "top-0", "left-1/2", "-translate-x-1/2", "-translate-y-1/2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
56894
- i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
56895
- i0.ɵɵtext(3);
57037
+ } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
57038
+ i0.ɵɵelementStart(0, "div", 2);
57039
+ i0.ɵɵelement(1, "symphiq-tooltip-container");
57040
+ i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
57041
+ i0.ɵɵtext(4);
56896
57042
  i0.ɵɵelementEnd();
56897
- i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8)(8, "div", 9)(9, "div", 10);
57043
+ i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "div", 10);
56898
57044
  i0.ɵɵnamespaceSVG();
56899
- i0.ɵɵelementStart(10, "svg", 11);
56900
- i0.ɵɵelement(11, "path", 12);
57045
+ i0.ɵɵelementStart(11, "svg", 11);
57046
+ i0.ɵɵelement(12, "path", 12);
56901
57047
  i0.ɵɵelementEnd();
56902
57048
  i0.ɵɵnamespaceHTML();
56903
- i0.ɵɵelementStart(12, "div")(13, "p", 13);
56904
- i0.ɵɵtext(14);
57049
+ i0.ɵɵelementStart(13, "div")(14, "p", 13);
57050
+ i0.ɵɵtext(15);
56905
57051
  i0.ɵɵelementEnd();
56906
- i0.ɵɵelementStart(15, "p", 14);
56907
- i0.ɵɵtext(16);
57052
+ i0.ɵɵelementStart(16, "p", 14);
57053
+ i0.ɵɵtext(17);
56908
57054
  i0.ɵɵelementEnd()()();
56909
- i0.ɵɵconditionalCreate(17, InitialTargetSettingComponent_Conditional_17_Template, 8, 4, "div", 10);
57055
+ i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
56910
57056
  i0.ɵɵelementEnd();
56911
- i0.ɵɵelementStart(18, "div", 15)(19, "div", 16)(20, "div", 17);
56912
- i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_21_Template, 7, 3);
57057
+ i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
57058
+ i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 7, 3);
56913
57059
  i0.ɵɵelementEnd()()()();
56914
- i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "div")(25, "p", 20);
56915
- i0.ɵɵtext(26, " Year-over-Year Revenue Trend ");
57060
+ i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
57061
+ i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
56916
57062
  i0.ɵɵelementEnd();
56917
- i0.ɵɵelementStart(27, "div", 21);
56918
- i0.ɵɵconditionalCreate(28, InitialTargetSettingComponent_Conditional_28_Template, 1, 5, "symphiq-area-chart", 22)(29, InitialTargetSettingComponent_Conditional_29_Template, 3, 1, "div", 23);
57063
+ i0.ɵɵelementStart(28, "div", 21);
57064
+ i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
56919
57065
  i0.ɵɵelementEnd()()()()();
56920
- i0.ɵɵelementStart(30, "div", 24)(31, "div", 25);
56921
- i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 25, 16, "div", 26);
57066
+ i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
57067
+ i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 27, 17, "div", 26);
56922
57068
  i0.ɵɵelementEnd()()();
56923
- i0.ɵɵelementStart(33, "div", 27)(34, "div", 28)(35, "div", 29)(36, "p", 20);
56924
- i0.ɵɵtext(37, " Year-over-Year Revenue Trend ");
56925
- i0.ɵɵelementEnd();
56926
- i0.ɵɵelementStart(38, "div", 21);
56927
- i0.ɵɵconditionalCreate(39, InitialTargetSettingComponent_Conditional_39_Template, 1, 5, "symphiq-area-chart", 22)(40, InitialTargetSettingComponent_Conditional_40_Template, 3, 1, "div", 23);
56928
- i0.ɵɵelementEnd()()()()()();
56929
- i0.ɵɵelementStart(41, "div", 30)(42, "div", 31);
56930
- i0.ɵɵconditionalCreate(43, InitialTargetSettingComponent_Conditional_43_Template, 7, 7, "div", 3);
57069
+ i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
56931
57070
  i0.ɵɵelementEnd()();
56932
- i0.ɵɵelementStart(44, "symphiq-sticky-submit-bar", 32);
56933
- i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_44_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_44_listener() { return ctx.handleCancel(); });
57071
+ i0.ɵɵelementStart(35, "div", 28)(36, "div", 29);
57072
+ i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 7, 7, "div", 3);
57073
+ i0.ɵɵelementEnd()();
57074
+ i0.ɵɵelementStart(38, "symphiq-sticky-submit-bar", 30);
57075
+ i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_38_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_38_listener() { return ctx.handleCancel(); });
56934
57076
  i0.ɵɵelementEnd()();
56935
57077
  } if (rf & 2) {
56936
- i0.ɵɵadvance();
57078
+ i0.ɵɵadvance(2);
56937
57079
  i0.ɵɵproperty("ngClass", ctx.sectionCardClasses());
56938
57080
  i0.ɵɵadvance();
56939
57081
  i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
@@ -56942,7 +57084,7 @@ class InitialTargetSettingComponent {
56942
57084
  i0.ɵɵadvance(4);
56943
57085
  i0.ɵɵproperty("ngClass", ctx.formAreaClasses());
56944
57086
  i0.ɵɵadvance();
56945
- i0.ɵɵclassProp("mb-0", ctx.calculationState() === "results");
57087
+ i0.ɵɵclassProp("mb-6", ctx.calculationState() !== "results");
56946
57088
  i0.ɵɵadvance(2);
56947
57089
  i0.ɵɵproperty("ngClass", ctx.baselineIconClasses());
56948
57090
  i0.ɵɵadvance(3);
@@ -56954,11 +57096,11 @@ class InitialTargetSettingComponent {
56954
57096
  i0.ɵɵadvance();
56955
57097
  i0.ɵɵtextInterpolate1(" ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
56956
57098
  i0.ɵɵadvance();
56957
- i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 17 : -1);
57099
+ i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 18 : -1);
56958
57100
  i0.ɵɵadvance();
56959
57101
  i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results");
56960
57102
  i0.ɵɵadvance(3);
56961
- i0.ɵɵconditional(ctx.calculationState() !== "results" ? 21 : -1);
57103
+ i0.ɵɵconditional(ctx.calculationState() !== "results" ? 22 : -1);
56962
57104
  i0.ɵɵadvance();
56963
57105
  i0.ɵɵclassProp("chart-in-column-active", ctx.calculationState() === "results");
56964
57106
  i0.ɵɵadvance(3);
@@ -56966,28 +57108,24 @@ class InitialTargetSettingComponent {
56966
57108
  i0.ɵɵadvance(2);
56967
57109
  i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
56968
57110
  i0.ɵɵadvance();
56969
- i0.ɵɵconditional(ctx.revenueChartData() ? 28 : 29);
57111
+ i0.ɵɵconditional(ctx.revenueChartData() ? 29 : 30);
56970
57112
  i0.ɵɵadvance(2);
56971
57113
  i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
56972
57114
  i0.ɵɵadvance(2);
56973
- i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 32 : -1);
57115
+ i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 33 : -1);
56974
57116
  i0.ɵɵadvance();
56975
- i0.ɵɵclassProp("chart-section-collapse-hidden", ctx.calculationState() === "results");
56976
- i0.ɵɵadvance(3);
56977
- i0.ɵɵproperty("ngClass", ctx.chartTitleClasses());
56978
- i0.ɵɵadvance(2);
56979
- i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
57117
+ i0.ɵɵconditional(ctx.calculationState() !== "results" ? 34 : -1);
56980
57118
  i0.ɵɵadvance();
56981
- i0.ɵɵconditional(ctx.revenueChartData() ? 39 : 40);
56982
- i0.ɵɵadvance(2);
56983
57119
  i0.ɵɵclassProp("metrics-section-enter-active", ctx.showMetricsVisualization());
56984
57120
  i0.ɵɵadvance(2);
56985
- i0.ɵɵconditional(ctx.showMetricsVisualization() ? 43 : -1);
57121
+ i0.ɵɵconditional(ctx.showMetricsVisualization() ? 37 : -1);
56986
57122
  i0.ɵɵadvance();
56987
57123
  i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
56988
57124
  } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
56989
57125
  StickySubmitBarComponent,
56990
- AreaChartComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
57126
+ AreaChartComponent,
57127
+ TooltipDirective,
57128
+ TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
56991
57129
  }
56992
57130
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
56993
57131
  type: Component,
@@ -56996,9 +57134,12 @@ class InitialTargetSettingComponent {
56996
57134
  FormsModule,
56997
57135
  FunnelMetricsVisualizationComponent,
56998
57136
  StickySubmitBarComponent,
56999
- AreaChartComponent
57137
+ AreaChartComponent,
57138
+ TooltipDirective,
57139
+ TooltipContainerComponent
57000
57140
  ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
57001
57141
  <div class="space-y-8 pb-32">
57142
+ <symphiq-tooltip-container />
57002
57143
  <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
57003
57144
  <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
57004
57145
  Calculate Your {{ currentYear() }} Revenue Target
@@ -57008,7 +57149,7 @@ class InitialTargetSettingComponent {
57008
57149
  <div class="grid lg:grid-cols-2 gap-8">
57009
57150
  <div class="flex flex-col gap-4">
57010
57151
  <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2">
57011
- <div class="flex flex-wrap gap-4 place-content-between mb-6" [class.mb-0]="calculationState() === 'results'">
57152
+ <div class="flex flex-wrap gap-4 place-content-between" [class.mb-6]="calculationState() !== 'results'">
57012
57153
  <div class="flex items-center gap-2">
57013
57154
  <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57014
57155
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
@@ -57111,7 +57252,7 @@ class InitialTargetSettingComponent {
57111
57252
  [showAxisLabels]="true"
57112
57253
  [viewMode]="viewMode()"
57113
57254
  [currencySymbol]="'$'"
57114
- [height]="'200px'"
57255
+ [height]="'108px'"
57115
57256
  />
57116
57257
  } @else {
57117
57258
  <div class="h-64 flex items-center justify-center">
@@ -57150,11 +57291,13 @@ class InitialTargetSettingComponent {
57150
57291
  }
57151
57292
  </div>
57152
57293
 
57153
- <div class="relative pt-6 mt-6" [ngClass]="calculatedDividerClasses()">
57154
- <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
57294
+ <div class="relative pt-6 mt-6">
57295
+ <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57296
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57155
57297
  <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57156
57298
  vs. {{ priorYear() }}
57157
57299
  </span>
57300
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57158
57301
  </div>
57159
57302
  <div class="grid grid-cols-2 gap-4 pt-2">
57160
57303
  <div>
@@ -57177,11 +57320,13 @@ class InitialTargetSettingComponent {
57177
57320
  </div>
57178
57321
 
57179
57322
  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
57180
- <div class="relative pt-6 mt-6" [ngClass]="calculatedDividerClasses()">
57181
- <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
57323
+ <div class="relative pt-6 mt-6">
57324
+ <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57325
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57182
57326
  <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57183
57327
  {{ currentYear() }} YTD Gap
57184
57328
  </span>
57329
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57185
57330
  </div>
57186
57331
  <div class="grid grid-cols-2 gap-4 pt-2">
57187
57332
  <div>
@@ -57193,9 +57338,22 @@ class InitialTargetSettingComponent {
57193
57338
  </p>
57194
57339
  </div>
57195
57340
  <div>
57196
- <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57197
- Additional Growth Needed
57198
- </p>
57341
+ <div class="flex items-center gap-1 mb-1">
57342
+ <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
57343
+ Additional Growth Needed
57344
+ </p>
57345
+ <button
57346
+ type="button"
57347
+ [ngClass]="infoIconClasses()"
57348
+ class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
57349
+ [libSymphiqTooltip]="additionalGrowthTooltip"
57350
+ tooltipType="markdown"
57351
+ tooltipPosition="top">
57352
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57353
+ <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" />
57354
+ </svg>
57355
+ </button>
57356
+ </div>
57199
57357
  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57200
57358
  {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
57201
57359
  </p>
@@ -57210,32 +57368,30 @@ class InitialTargetSettingComponent {
57210
57368
  </div>
57211
57369
  </div>
57212
57370
 
57213
- <div class="chart-section-collapse" [class.chart-section-collapse-hidden]="calculationState() === 'results'">
57214
- <div class="chart-section-content">
57215
- <div class="w-full">
57216
- <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
57217
- Year-over-Year Revenue Trend
57218
- </p>
57219
- <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
57220
- @if (revenueChartData()) {
57221
- <symphiq-area-chart
57222
- [chart]="revenueChartData()!"
57223
- [showAxisLabels]="true"
57224
- [viewMode]="viewMode()"
57225
- [currencySymbol]="'$'"
57226
- [height]="'320px'"
57227
- />
57228
- } @else {
57229
- <div class="h-64 flex items-center justify-center">
57230
- <p [ngClass]="noDataClasses()" class="text-sm">
57231
- No revenue data available
57232
- </p>
57233
- </div>
57234
- }
57235
- </div>
57371
+ @if (calculationState() !== 'results') {
57372
+ <div class="w-full">
57373
+ <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
57374
+ Year-over-Year Revenue Trend
57375
+ </p>
57376
+ <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
57377
+ @if (revenueChartData()) {
57378
+ <symphiq-area-chart
57379
+ [chart]="revenueChartData()!"
57380
+ [showAxisLabels]="true"
57381
+ [viewMode]="viewMode()"
57382
+ [currencySymbol]="'$'"
57383
+ [height]="'320px'"
57384
+ />
57385
+ } @else {
57386
+ <div class="h-64 flex items-center justify-center">
57387
+ <p [ngClass]="noDataClasses()" class="text-sm">
57388
+ No revenue data available
57389
+ </p>
57390
+ </div>
57391
+ }
57236
57392
  </div>
57237
57393
  </div>
57238
- </div>
57394
+ }
57239
57395
  </div>
57240
57396
  </div>
57241
57397
 
@@ -57281,7 +57437,7 @@ class InitialTargetSettingComponent {
57281
57437
  type: ViewChild,
57282
57438
  args: ['percentageInputRef']
57283
57439
  }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
57284
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 398 }); })();
57440
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 418 }); })();
57285
57441
 
57286
57442
  function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
57287
57443
  i0.ɵɵelement(0, "div", 5);