@eric-emg/symphiq-components 1.2.211 → 1.2.213

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.
@@ -54704,10 +54704,17 @@ class RevenueCalculatorWelcomeBannerComponent {
54704
54704
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], hasTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTargets", required: false }] }] }); })();
54705
54705
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RevenueCalculatorWelcomeBannerComponent, { className: "RevenueCalculatorWelcomeBannerComponent", filePath: "lib/components/revenue-calculator-dashboard/revenue-calculator-welcome-banner.component.ts", lineNumber: 85 }); })();
54706
54706
 
54707
- function calculatePacingStatus(projectedValue, targetValue) {
54707
+ function calculatePacingStatus(projectedValue, targetValue, increaseBad = false) {
54708
54708
  if (targetValue <= 0)
54709
54709
  return 'on-pace';
54710
54710
  const pacingPercent = ((projectedValue - targetValue) / targetValue) * 100;
54711
+ if (increaseBad) {
54712
+ if (pacingPercent <= -5)
54713
+ return 'ahead';
54714
+ if (pacingPercent <= 5)
54715
+ return 'on-pace';
54716
+ return 'behind';
54717
+ }
54711
54718
  if (pacingPercent >= 5)
54712
54719
  return 'ahead';
54713
54720
  if (pacingPercent >= -5)
@@ -54801,13 +54808,16 @@ function getPacingDisplayInfo(pacingPercentage, status, isDark) {
54801
54808
  displayText
54802
54809
  };
54803
54810
  }
54804
- function calculateMetricPacing(projectedValue, targetValue) {
54811
+ function calculateMetricPacing(projectedValue, targetValue, increaseBad = false) {
54805
54812
  console.group(`[PACING] calculateMetricPacing`);
54806
- console.log('[PACING] Input:', { projectedValue, targetValue });
54807
- const pacingPercentage = targetValue > 0
54813
+ console.log('[PACING] Input:', { projectedValue, targetValue, increaseBad });
54814
+ let pacingPercentage = targetValue > 0
54808
54815
  ? ((projectedValue - targetValue) / targetValue) * 100
54809
54816
  : 0;
54810
- const status = calculatePacingStatus(projectedValue, targetValue);
54817
+ if (increaseBad) {
54818
+ pacingPercentage = -pacingPercentage;
54819
+ }
54820
+ const status = calculatePacingStatus(projectedValue, targetValue, increaseBad);
54811
54821
  console.log('[PACING] Result:', { pacingPercentage, status, projectedValue });
54812
54822
  console.groupEnd();
54813
54823
  return {
@@ -55023,7 +55033,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template
55023
55033
  i0.ɵɵadvance(2);
55024
55034
  i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
55025
55035
  i0.ɵɵadvance();
55026
- i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric));
55036
+ i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false));
55027
55037
  } }
55028
55038
  function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, ctx) { if (rf & 1) {
55029
55039
  i0.ɵɵelement(0, "div", 16);
@@ -55101,7 +55111,7 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
55101
55111
  i0.ɵɵadvance();
55102
55112
  i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
55103
55113
  i0.ɵɵadvance();
55104
- i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric), " ");
55114
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
55105
55115
  i0.ɵɵadvance();
55106
55116
  i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 23 : -1);
55107
55117
  } }
@@ -55134,14 +55144,16 @@ class FunnelMetricsVisualizationComponent {
55134
55144
  console.log(`[PACING] Processing stage: ${stageMetric.metric}`);
55135
55145
  const stageProjectedValue = extractProjectedValue(pacingResponse, stageMetric.metric);
55136
55146
  console.log(`[PACING] stageProjectedValue for ${stageMetric.metric}:`, stageProjectedValue);
55147
+ const stageIncreaseBad = MetricEnumUtil.increaseBad(stageMetric.metric);
55137
55148
  const stagePacingInfo = stageProjectedValue !== null
55138
- ? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue)
55149
+ ? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue, stageIncreaseBad)
55139
55150
  : null;
55140
55151
  console.log(`[PACING] stagePacingInfo for ${stageMetric.metric}:`, stagePacingInfo);
55141
55152
  const relatedWithPacing = related.map(relMetric => {
55142
55153
  const relProjectedValue = extractProjectedValue(pacingResponse, relMetric.metric);
55154
+ const relIncreaseBad = MetricEnumUtil.increaseBad(relMetric.metric);
55143
55155
  const relPacingInfo = relProjectedValue !== null
55144
- ? calculateMetricPacing(relProjectedValue, relMetric.targetValue)
55156
+ ? calculateMetricPacing(relProjectedValue, relMetric.targetValue, relIncreaseBad)
55145
55157
  : null;
55146
55158
  return { calc: relMetric, pacingInfo: relPacingInfo };
55147
55159
  });
@@ -55350,7 +55362,7 @@ class FunnelMetricsVisualizationComponent {
55350
55362
  {{ currentYear() }} Target
55351
55363
  </p>
55352
55364
  <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
55353
- {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
55365
+ {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
55354
55366
  </p>
55355
55367
  </div>
55356
55368
  </div>
@@ -55407,7 +55419,7 @@ class FunnelMetricsVisualizationComponent {
55407
55419
  </div>
55408
55420
  }
55409
55421
  <div>
55410
- <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
55422
+ <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}</p>
55411
55423
  </div>
55412
55424
  </div>
55413
55425
  </div>
@@ -56276,10 +56288,10 @@ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf
56276
56288
  } }
56277
56289
  function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56278
56290
  const _r3 = i0.ɵɵgetCurrentView();
56279
- i0.ɵɵelementStart(0, "div", 34)(1, "span", 35);
56291
+ i0.ɵɵelementStart(0, "div", 34)(1, "span", 36);
56280
56292
  i0.ɵɵtext(2, " $ ");
56281
56293
  i0.ɵɵelementEnd();
56282
- i0.ɵɵelementStart(3, "input", 36, 0);
56294
+ i0.ɵɵelementStart(3, "input", 37, 0);
56283
56295
  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); });
56284
56296
  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()); });
56285
56297
  i0.ɵɵelementEnd()();
@@ -56293,11 +56305,11 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf,
56293
56305
  } }
56294
56306
  function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56295
56307
  const _r4 = i0.ɵɵgetCurrentView();
56296
- i0.ɵɵelementStart(0, "div", 34)(1, "input", 37, 1);
56308
+ i0.ɵɵelementStart(0, "div", 34)(1, "input", 38, 1);
56297
56309
  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); });
56298
56310
  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()); });
56299
56311
  i0.ɵɵelementEnd();
56300
- i0.ɵɵelementStart(3, "span", 38);
56312
+ i0.ɵɵelementStart(3, "span", 39);
56301
56313
  i0.ɵɵtext(4, " % ");
56302
56314
  i0.ɵɵelementEnd()();
56303
56315
  } if (rf & 2) {
@@ -56308,6 +56320,17 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf,
56308
56320
  i0.ɵɵadvance(2);
56309
56321
  i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
56310
56322
  } }
56323
+ function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56324
+ const _r5 = i0.ɵɵgetCurrentView();
56325
+ i0.ɵɵelementStart(0, "div", 35)(1, "button", 40);
56326
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
56327
+ i0.ɵɵtext(2, " Cancel ");
56328
+ i0.ɵɵelementEnd()();
56329
+ } if (rf & 2) {
56330
+ const ctx_r0 = i0.ɵɵnextContext(2);
56331
+ i0.ɵɵadvance();
56332
+ i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
56333
+ } }
56311
56334
  function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
56312
56335
  const _r2 = i0.ɵɵgetCurrentView();
56313
56336
  i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
@@ -56319,6 +56342,7 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
56319
56342
  i0.ɵɵtext(4, " % Increase ");
56320
56343
  i0.ɵɵelementEnd()();
56321
56344
  i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_22_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_22_Conditional_6_Template, 5, 3, "div", 34);
56345
+ i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_22_Conditional_7_Template, 3, 1, "div", 35);
56322
56346
  } if (rf & 2) {
56323
56347
  const ctx_r0 = i0.ɵɵnextContext();
56324
56348
  i0.ɵɵadvance();
@@ -56327,6 +56351,8 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
56327
56351
  i0.ɵɵproperty("ngClass", ctx_r0.inputModeButtonClasses("percentage"));
56328
56352
  i0.ɵɵadvance(2);
56329
56353
  i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
56354
+ i0.ɵɵadvance(2);
56355
+ i0.ɵɵconditional(ctx_r0.hasStoredResponse() ? 7 : -1);
56330
56356
  } }
56331
56357
  function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
56332
56358
  i0.ɵɵelement(0, "symphiq-area-chart", 22);
@@ -56335,7 +56361,7 @@ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf
56335
56361
  i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
56336
56362
  } }
56337
56363
  function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
56338
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
56364
+ i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56339
56365
  i0.ɵɵtext(2, " No revenue data available ");
56340
56366
  i0.ɵɵelementEnd()();
56341
56367
  } if (rf & 2) {
@@ -56343,40 +56369,52 @@ function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf
56343
56369
  i0.ɵɵadvance();
56344
56370
  i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
56345
56371
  } }
56372
+ function InitialTargetSettingComponent_Conditional_33_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56373
+ i0.ɵɵtext(0);
56374
+ } if (rf & 2) {
56375
+ const ctx_r0 = i0.ɵɵnextContext(2);
56376
+ i0.ɵɵtextInterpolate1(" > ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue()), " ");
56377
+ } }
56346
56378
  function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
56347
- const _r5 = i0.ɵɵgetCurrentView();
56348
- i0.ɵɵelementStart(0, "button", 50);
56349
- 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()); });
56379
+ i0.ɵɵtext(0);
56380
+ } if (rf & 2) {
56381
+ const ctx_r0 = i0.ɵɵnextContext(2);
56382
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
56383
+ } }
56384
+ function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
56385
+ const _r6 = i0.ɵɵgetCurrentView();
56386
+ i0.ɵɵelementStart(0, "button", 52);
56387
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
56350
56388
  i0.ɵɵtext(1, " Adjust Revenue Target ");
56351
56389
  i0.ɵɵelementEnd();
56352
56390
  } if (rf & 2) {
56353
56391
  const ctx_r0 = i0.ɵɵnextContext(2);
56354
56392
  i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
56355
56393
  } }
56356
- function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf, ctx) { if (rf & 1) {
56357
- i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
56358
- i0.ɵɵelement(2, "div", 46);
56359
- i0.ɵɵelementStart(3, "span", 47);
56394
+ function InitialTargetSettingComponent_Conditional_33_Conditional_27_Template(rf, ctx) { if (rf & 1) {
56395
+ i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
56396
+ i0.ɵɵelement(2, "div", 48);
56397
+ i0.ɵɵelementStart(3, "span", 49);
56360
56398
  i0.ɵɵtext(4);
56361
56399
  i0.ɵɵelementEnd();
56362
- i0.ɵɵelement(5, "div", 46);
56400
+ i0.ɵɵelement(5, "div", 48);
56363
56401
  i0.ɵɵelementEnd();
56364
- i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 41);
56402
+ i0.ɵɵelementStart(6, "div", 50)(7, "div")(8, "p", 43);
56365
56403
  i0.ɵɵtext(9, " Gap to Close ");
56366
56404
  i0.ɵɵelementEnd();
56367
- i0.ɵɵelementStart(10, "p", 49);
56405
+ i0.ɵɵelementStart(10, "p", 51);
56368
56406
  i0.ɵɵtext(11);
56369
56407
  i0.ɵɵelementEnd()();
56370
- i0.ɵɵelementStart(12, "div")(13, "div", 51)(14, "p", 13);
56408
+ i0.ɵɵelementStart(12, "div")(13, "div", 53)(14, "p", 13);
56371
56409
  i0.ɵɵtext(15, " Additional Growth Needed ");
56372
56410
  i0.ɵɵelementEnd();
56373
- i0.ɵɵelementStart(16, "button", 52);
56411
+ i0.ɵɵelementStart(16, "button", 54);
56374
56412
  i0.ɵɵnamespaceSVG();
56375
- i0.ɵɵelementStart(17, "svg", 53);
56376
- i0.ɵɵelement(18, "path", 54);
56413
+ i0.ɵɵelementStart(17, "svg", 55);
56414
+ i0.ɵɵelement(18, "path", 56);
56377
56415
  i0.ɵɵelementEnd()()();
56378
56416
  i0.ɵɵnamespaceHTML();
56379
- i0.ɵɵelementStart(19, "p", 49);
56417
+ i0.ɵɵelementStart(19, "p", 51);
56380
56418
  i0.ɵɵtext(20);
56381
56419
  i0.ɵɵelementEnd()()()();
56382
56420
  } if (rf & 2) {
@@ -56405,34 +56443,34 @@ function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf
56405
56443
  i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
56406
56444
  } }
56407
56445
  function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
56408
- i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 40)(3, "div")(4, "p", 41);
56446
+ i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 42)(3, "div")(4, "p", 43);
56409
56447
  i0.ɵɵtext(5);
56410
56448
  i0.ɵɵelementEnd();
56411
- i0.ɵɵelementStart(6, "p", 42);
56412
- i0.ɵɵtext(7);
56449
+ i0.ɵɵelementStart(6, "p", 44);
56450
+ i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_33_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 1, 1);
56413
56451
  i0.ɵɵelementEnd()();
56414
- i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 2, 1, "button", 43);
56452
+ i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_33_Conditional_9_Template, 2, 1, "button", 45);
56415
56453
  i0.ɵɵelementEnd();
56416
- i0.ɵɵelementStart(9, "div", 44)(10, "div", 45);
56417
- i0.ɵɵelement(11, "div", 46);
56418
- i0.ɵɵelementStart(12, "span", 47);
56419
- i0.ɵɵtext(13);
56454
+ i0.ɵɵelementStart(10, "div", 46)(11, "div", 47);
56455
+ i0.ɵɵelement(12, "div", 48);
56456
+ i0.ɵɵelementStart(13, "span", 49);
56457
+ i0.ɵɵtext(14);
56420
56458
  i0.ɵɵelementEnd();
56421
- i0.ɵɵelement(14, "div", 46);
56459
+ i0.ɵɵelement(15, "div", 48);
56422
56460
  i0.ɵɵelementEnd();
56423
- i0.ɵɵelementStart(15, "div", 48)(16, "div")(17, "p", 41);
56424
- i0.ɵɵtext(18, " Increase Amount ");
56461
+ i0.ɵɵelementStart(16, "div", 50)(17, "div")(18, "p", 43);
56462
+ i0.ɵɵtext(19, " Increase Amount ");
56425
56463
  i0.ɵɵelementEnd();
56426
- i0.ɵɵelementStart(19, "p", 49);
56427
- i0.ɵɵtext(20);
56464
+ i0.ɵɵelementStart(20, "p", 51);
56465
+ i0.ɵɵtext(21);
56428
56466
  i0.ɵɵelementEnd()();
56429
- i0.ɵɵelementStart(21, "div")(22, "p", 41);
56430
- i0.ɵɵtext(23, " % Growth ");
56467
+ i0.ɵɵelementStart(22, "div")(23, "p", 43);
56468
+ i0.ɵɵtext(24, " % Growth ");
56431
56469
  i0.ɵɵelementEnd();
56432
- i0.ɵɵelementStart(24, "p", 49);
56433
- i0.ɵɵtext(25);
56470
+ i0.ɵɵelementStart(25, "p", 51);
56471
+ i0.ɵɵtext(26);
56434
56472
  i0.ɵɵelementEnd()()()();
56435
- i0.ɵɵconditionalCreate(26, InitialTargetSettingComponent_Conditional_33_Conditional_26_Template, 21, 13, "div", 44);
56473
+ i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_33_Conditional_27_Template, 21, 13, "div", 46);
56436
56474
  i0.ɵɵelementEnd()();
56437
56475
  } if (rf & 2) {
56438
56476
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56444,9 +56482,9 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
56444
56482
  i0.ɵɵadvance();
56445
56483
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
56446
56484
  i0.ɵɵadvance();
56447
- i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
56448
- i0.ɵɵadvance();
56449
- i0.ɵɵconditional(ctx_r0.calculationState() === "results" ? 8 : -1);
56485
+ i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 7 : 8);
56486
+ i0.ɵɵadvance(2);
56487
+ i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 9 : -1);
56450
56488
  i0.ɵɵadvance(3);
56451
56489
  i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56452
56490
  i0.ɵɵadvance();
@@ -56468,7 +56506,7 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
56468
56506
  i0.ɵɵadvance();
56469
56507
  i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
56470
56508
  i0.ɵɵadvance();
56471
- i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 26 : -1);
56509
+ i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 27 : -1);
56472
56510
  } }
56473
56511
  function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
56474
56512
  i0.ɵɵelement(0, "symphiq-area-chart", 22);
@@ -56477,7 +56515,7 @@ function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf,
56477
56515
  i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
56478
56516
  } }
56479
56517
  function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56480
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
56518
+ i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56481
56519
  i0.ɵɵtext(2, " No revenue data available ");
56482
56520
  i0.ɵɵelementEnd()();
56483
56521
  } if (rf & 2) {
@@ -56502,13 +56540,13 @@ function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf
56502
56540
  i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
56503
56541
  } }
56504
56542
  function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
56505
- i0.ɵɵelementStart(0, "div", 3)(1, "div", 55)(2, "h2", 56);
56543
+ i0.ɵɵelementStart(0, "div", 3)(1, "div", 57)(2, "h2", 58);
56506
56544
  i0.ɵɵtext(3, " Contributing Metrics ");
56507
56545
  i0.ɵɵelementEnd();
56508
- i0.ɵɵelementStart(4, "p", 39);
56546
+ i0.ɵɵelementStart(4, "p", 41);
56509
56547
  i0.ɵɵtext(5);
56510
56548
  i0.ɵɵelementEnd()();
56511
- i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 57);
56549
+ i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 59);
56512
56550
  i0.ɵɵelementEnd();
56513
56551
  } if (rf & 2) {
56514
56552
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56532,6 +56570,7 @@ class InitialTargetSettingComponent {
56532
56570
  this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
56533
56571
  this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
56534
56572
  this.reverseCalculationResponse = input(undefined, ...(ngDevMode ? [{ debugName: "reverseCalculationResponse" }] : []));
56573
+ this.targets = input(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : []));
56535
56574
  this.targetsCreated = output();
56536
56575
  this.calculateRevenueRequest = output();
56537
56576
  this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
@@ -56647,6 +56686,9 @@ class InitialTargetSettingComponent {
56647
56686
  return results;
56648
56687
  }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
56649
56688
  this.displayedTargetRevenue = computed(() => {
56689
+ if (this.calculationState() !== 'results') {
56690
+ return this.calculatedRevenue();
56691
+ }
56650
56692
  const response = this.storedResponse();
56651
56693
  if (response && response.targetRevenue) {
56652
56694
  return response.targetRevenue;
@@ -56812,6 +56854,15 @@ class InitialTargetSettingComponent {
56812
56854
  this.calculationState.set('input');
56813
56855
  }
56814
56856
  handleCancel() {
56857
+ const response = this.storedResponse();
56858
+ if (response && response.targetRevenue) {
56859
+ this.absoluteInput.set(response.targetRevenue);
56860
+ const priorRevenue = this.priorYearRevenue();
56861
+ if (priorRevenue > 0) {
56862
+ const pct = ((response.targetRevenue - priorRevenue) / priorRevenue) * 100;
56863
+ this.percentageInput.set(pct);
56864
+ }
56865
+ }
56815
56866
  this.calculationState.set('results');
56816
56867
  }
56817
56868
  formatCurrency(value) {
@@ -56987,7 +57038,7 @@ class InitialTargetSettingComponent {
56987
57038
  let _t;
56988
57039
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
56989
57040
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
56990
- } }, 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) {
57041
+ } }, 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"], targets: [1, "targets"] }, 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, "flex", "justify-end"], [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, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "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) {
56991
57042
  i0.ɵɵelementStart(0, "div", 2);
56992
57043
  i0.ɵɵelement(1, "symphiq-tooltip-container");
56993
57044
  i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
@@ -57008,7 +57059,7 @@ class InitialTargetSettingComponent {
57008
57059
  i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
57009
57060
  i0.ɵɵelementEnd();
57010
57061
  i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
57011
- i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 7, 3);
57062
+ i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 8, 4);
57012
57063
  i0.ɵɵelementEnd()()()();
57013
57064
  i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
57014
57065
  i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
@@ -57017,7 +57068,7 @@ class InitialTargetSettingComponent {
57017
57068
  i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
57018
57069
  i0.ɵɵelementEnd()()()()();
57019
57070
  i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
57020
- i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 27, 17, "div", 26);
57071
+ i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 28, 17, "div", 26);
57021
57072
  i0.ɵɵelementEnd()()();
57022
57073
  i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
57023
57074
  i0.ɵɵelementEnd()();
@@ -57186,6 +57237,17 @@ class InitialTargetSettingComponent {
57186
57237
  </span>
57187
57238
  </div>
57188
57239
  }
57240
+
57241
+ @if (hasStoredResponse()) {
57242
+ <div class="flex justify-end">
57243
+ <button
57244
+ (click)="handleCancel()"
57245
+ [ngClass]="cancelButtonClasses()"
57246
+ class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
57247
+ Cancel
57248
+ </button>
57249
+ </div>
57250
+ }
57189
57251
  }
57190
57252
  </div>
57191
57253
  </div>
@@ -57231,10 +57293,14 @@ class InitialTargetSettingComponent {
57231
57293
  {{ currentYear() }} Revenue Target
57232
57294
  </p>
57233
57295
  <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
57234
- {{ formatCurrency(displayedTargetRevenue()) }}
57296
+ @if (calculationState() === 'results' && targets() === undefined) {
57297
+ > {{ formatCurrency(calculatedRevenue()) }}
57298
+ } @else {
57299
+ {{ formatCurrency(displayedTargetRevenue()) }}
57300
+ }
57235
57301
  </p>
57236
57302
  </div>
57237
- @if (calculationState() === 'results') {
57303
+ @if (calculationState() === 'results' && targets() === undefined) {
57238
57304
  <button
57239
57305
  (click)="handleAdjustTarget()"
57240
57306
  [ngClass]="secondaryButtonClasses()"
@@ -57389,8 +57455,8 @@ class InitialTargetSettingComponent {
57389
57455
  }], percentageInputRef: [{
57390
57456
  type: ViewChild,
57391
57457
  args: ['percentageInputRef']
57392
- }], 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"] }] }); })();
57393
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 418 }); })();
57458
+ }], 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 }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
57459
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 433 }); })();
57394
57460
 
57395
57461
  function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
57396
57462
  i0.ɵɵelement(0, "div", 5);
@@ -57570,7 +57636,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
57570
57636
  const ctx_r0 = i0.ɵɵnextContext();
57571
57637
  i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
57572
57638
  i0.ɵɵadvance(2);
57573
- i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse());
57639
+ i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
57574
57640
  } }
57575
57641
  function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
57576
57642
  i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -57744,7 +57810,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
57744
57810
  static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
57745
57811
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
57746
57812
  i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
57747
- } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
57813
+ } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
57748
57814
  i0.ɵɵelementStart(0, "div", 0)(1, "div");
57749
57815
  i0.ɵɵelement(2, "div", 1);
57750
57816
  i0.ɵɵelementEnd();
@@ -57762,7 +57828,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
57762
57828
  i0.ɵɵlistener("stepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
57763
57829
  i0.ɵɵelementEnd();
57764
57830
  i0.ɵɵelementStart(21, "main", 11)(22, "div", 6);
57765
- i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 12)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
57831
+ i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 13)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
57766
57832
  i0.ɵɵelementEnd()()()();
57767
57833
  } if (rf & 2) {
57768
57834
  i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -57811,189 +57877,190 @@ class SymphiqRevenueCalculatorDashboardComponent {
57811
57877
  IndeterminateSpinnerComponent
57812
57878
  ],
57813
57879
  changeDetection: ChangeDetectionStrategy.OnPush,
57814
- template: `
57815
- <div [ngClass]="getContainerClasses()">
57816
- <!-- Scroll Progress Bar -->
57817
- <div
57818
- [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
57819
- <div
57820
- [style.width.%]="scrollProgress()"
57821
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
57822
- class="h-full transition-all duration-200 ease-out">
57823
- </div>
57824
- </div>
57825
-
57826
- <!-- Animated Background Bubbles -->
57827
- <div class="animated-bubbles" [class.light-mode]="isLightMode()"
57828
- style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
57829
-
57830
- <div class="relative z-[51]">
57831
- <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
57832
- <!-- Expanded Header -->
57833
- <div
57834
- class="transition-all duration-300 ease-in-out overflow-hidden"
57835
- [class.max-h-0]="isScrolled()"
57836
- [class.opacity-0]="isScrolled()"
57837
- [class.max-h-96]="!isScrolled()"
57838
- [class.opacity-100]="!isScrolled()">
57839
- <div
57840
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
57841
- [class.pointer-events-none]="isScrolled()"
57842
- [class.pointer-events-auto]="!isScrolled()">
57843
- <div class="flex items-center justify-between">
57844
- <div>
57845
- <h1 [ngClass]="getMainTitleClasses()">
57846
- Revenue Calculator
57847
- </h1>
57848
- <p [ngClass]="getSubtitleClasses()">
57849
- Set Your Revenue Target and See Required Metric Improvements
57850
- </p>
57851
- </div>
57852
- </div>
57853
- </div>
57854
- </div>
57855
-
57856
- <!-- Condensed Header -->
57857
- <div
57858
- class="transition-all duration-300 ease-in-out overflow-hidden"
57859
- [class.max-h-0]="!isScrolled()"
57860
- [class.opacity-0]="!isScrolled()"
57861
- [class.max-h-20]="isScrolled()"
57862
- [class.opacity-100]="isScrolled()">
57863
- <div
57864
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
57865
- [class.pointer-events-none]="!isScrolled()"
57866
- [class.pointer-events-auto]="isScrolled()">
57867
- <div class="flex items-center justify-between">
57868
- <div class="flex-1 min-w-0 mr-4">
57869
- <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
57870
- Revenue Calculator
57871
- </h1>
57872
- </div>
57873
- </div>
57874
- </div>
57875
- </div>
57876
- </header>
57877
-
57878
- <!-- Journey Progress Indicator -->
57879
- <symphiq-journey-progress-indicator
57880
- [viewMode]="viewMode()"
57881
- [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
57882
- [showNextStepAction]="hasCurrentYearTargets()"
57883
- [forDemo]="forDemo()"
57884
- [maxAccessibleStepId]="maxAccessibleStepId()"
57885
- (stepClick)="stepClick.emit($event)"
57886
- (nextStepClick)="nextStepClick.emit()"
57887
- />
57888
-
57889
- <main class="relative">
57890
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
57891
-
57892
- <!-- State 1: Pure Loading (isLoading = true) -->
57893
- @if (isLoading()) {
57894
- <div class="flex items-center justify-center min-h-[400px]">
57895
- <symphiq-indeterminate-spinner
57896
- [viewMode]="viewMode()"
57897
- size="large"
57898
- />
57899
- </div>
57900
- }
57901
-
57902
- <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
57903
- @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
57904
- <symphiq-revenue-calculator-welcome-banner
57905
- [viewMode]="viewMode()"
57906
- [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
57907
- [hasTargets]="false"
57908
- />
57909
-
57910
- <!-- Loading Message Card -->
57911
- <div [ngClass]="loadingMessageContainerClasses()"
57912
- class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
57913
- <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
57914
- <div class="flex flex-col items-center text-center space-y-6">
57915
- <symphiq-indeterminate-spinner
57916
- [viewMode]="viewMode()"
57917
- size="large"
57918
- />
57919
- <div class="space-y-2">
57920
- <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
57921
- Downloading Your Google Analytics 4 Data
57922
- </h3>
57923
- <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
57924
- Symphiq is fetching your historical metrics to establish baseline performance. This may take a
57925
- moment as we gather your funnel data.
57926
- </p>
57927
- </div>
57928
- </div>
57929
- </div>
57930
- </div>
57931
- }
57932
-
57933
- <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
57934
- @else if (!hasCurrentYearTargets()) {
57935
- <symphiq-revenue-calculator-welcome-banner
57936
- [viewMode]="viewMode()"
57937
- [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
57938
- [hasTargets]="false"
57939
- />
57940
-
57941
- <div class="mt-8">
57942
- <symphiq-initial-target-setting
57943
- [viewMode]="viewMode()"
57944
- [funnelMetrics]="funnelMetrics() ?? []"
57945
- [mainUiData]="mainUiData()"
57946
- [trendUiData]="trendUiData()"
57947
- [shopId]="shopId()"
57948
- [pacingMetrics]="pacingResponse()"
57949
- [dataResults]="dataResults()"
57950
- [reverseCalculationResponse]="reverseCalculationResponse()"
57951
- (targetsCreated)="targetsCreated.emit($event)"
57952
- (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
57953
- />
57954
- </div>
57955
- }
57956
-
57957
- <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
57958
- @else {
57959
- <symphiq-revenue-calculator-welcome-banner
57960
- [viewMode]="viewMode()"
57961
- [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
57962
- [hasTargets]="true"
57963
- />
57964
-
57965
- <!-- Placeholder for Revenue Calculator Content -->
57966
- <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
57967
- <div class="text-center space-y-4">
57968
- <div class="flex justify-center">
57969
- <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
57970
- viewBox="0 0 24 24">
57971
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
57972
- d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
57973
- </svg>
57974
- </div>
57975
- <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
57976
- Revenue Calculator Dashboard
57977
- </h3>
57978
- <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
57979
- Your targets are set! The full revenue calculator dashboard with pacing and insights will be
57980
- displayed here.
57981
- </p>
57982
- </div>
57983
- </div>
57984
- }
57985
-
57986
- </div>
57987
- </main>
57988
- </div>
57989
- </div>
57880
+ template: `
57881
+ <div [ngClass]="getContainerClasses()">
57882
+ <!-- Scroll Progress Bar -->
57883
+ <div
57884
+ [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
57885
+ <div
57886
+ [style.width.%]="scrollProgress()"
57887
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
57888
+ class="h-full transition-all duration-200 ease-out">
57889
+ </div>
57890
+ </div>
57891
+
57892
+ <!-- Animated Background Bubbles -->
57893
+ <div class="animated-bubbles" [class.light-mode]="isLightMode()"
57894
+ style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
57895
+
57896
+ <div class="relative z-[51]">
57897
+ <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
57898
+ <!-- Expanded Header -->
57899
+ <div
57900
+ class="transition-all duration-300 ease-in-out overflow-hidden"
57901
+ [class.max-h-0]="isScrolled()"
57902
+ [class.opacity-0]="isScrolled()"
57903
+ [class.max-h-96]="!isScrolled()"
57904
+ [class.opacity-100]="!isScrolled()">
57905
+ <div
57906
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
57907
+ [class.pointer-events-none]="isScrolled()"
57908
+ [class.pointer-events-auto]="!isScrolled()">
57909
+ <div class="flex items-center justify-between">
57910
+ <div>
57911
+ <h1 [ngClass]="getMainTitleClasses()">
57912
+ Revenue Calculator
57913
+ </h1>
57914
+ <p [ngClass]="getSubtitleClasses()">
57915
+ Set Your Revenue Target and See Required Metric Improvements
57916
+ </p>
57917
+ </div>
57918
+ </div>
57919
+ </div>
57920
+ </div>
57921
+
57922
+ <!-- Condensed Header -->
57923
+ <div
57924
+ class="transition-all duration-300 ease-in-out overflow-hidden"
57925
+ [class.max-h-0]="!isScrolled()"
57926
+ [class.opacity-0]="!isScrolled()"
57927
+ [class.max-h-20]="isScrolled()"
57928
+ [class.opacity-100]="isScrolled()">
57929
+ <div
57930
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
57931
+ [class.pointer-events-none]="!isScrolled()"
57932
+ [class.pointer-events-auto]="isScrolled()">
57933
+ <div class="flex items-center justify-between">
57934
+ <div class="flex-1 min-w-0 mr-4">
57935
+ <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
57936
+ Revenue Calculator
57937
+ </h1>
57938
+ </div>
57939
+ </div>
57940
+ </div>
57941
+ </div>
57942
+ </header>
57943
+
57944
+ <!-- Journey Progress Indicator -->
57945
+ <symphiq-journey-progress-indicator
57946
+ [viewMode]="viewMode()"
57947
+ [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
57948
+ [showNextStepAction]="hasCurrentYearTargets()"
57949
+ [forDemo]="forDemo()"
57950
+ [maxAccessibleStepId]="maxAccessibleStepId()"
57951
+ (stepClick)="stepClick.emit($event)"
57952
+ (nextStepClick)="nextStepClick.emit()"
57953
+ />
57954
+
57955
+ <main class="relative">
57956
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
57957
+
57958
+ <!-- State 1: Pure Loading (isLoading = true) -->
57959
+ @if (isLoading()) {
57960
+ <div class="flex items-center justify-center min-h-[400px]">
57961
+ <symphiq-indeterminate-spinner
57962
+ [viewMode]="viewMode()"
57963
+ size="large"
57964
+ />
57965
+ </div>
57966
+ }
57967
+
57968
+ <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
57969
+ @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
57970
+ <symphiq-revenue-calculator-welcome-banner
57971
+ [viewMode]="viewMode()"
57972
+ [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
57973
+ [hasTargets]="false"
57974
+ />
57975
+
57976
+ <!-- Loading Message Card -->
57977
+ <div [ngClass]="loadingMessageContainerClasses()"
57978
+ class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
57979
+ <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
57980
+ <div class="flex flex-col items-center text-center space-y-6">
57981
+ <symphiq-indeterminate-spinner
57982
+ [viewMode]="viewMode()"
57983
+ size="large"
57984
+ />
57985
+ <div class="space-y-2">
57986
+ <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
57987
+ Downloading Your Google Analytics 4 Data
57988
+ </h3>
57989
+ <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
57990
+ Symphiq is fetching your historical metrics to establish baseline performance. This may take a
57991
+ moment as we gather your funnel data.
57992
+ </p>
57993
+ </div>
57994
+ </div>
57995
+ </div>
57996
+ </div>
57997
+ }
57998
+
57999
+ <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
58000
+ @else if (!hasCurrentYearTargets()) {
58001
+ <symphiq-revenue-calculator-welcome-banner
58002
+ [viewMode]="viewMode()"
58003
+ [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
58004
+ [hasTargets]="false"
58005
+ />
58006
+
58007
+ <div class="mt-8">
58008
+ <symphiq-initial-target-setting
58009
+ [viewMode]="viewMode()"
58010
+ [funnelMetrics]="funnelMetrics() ?? []"
58011
+ [mainUiData]="mainUiData()"
58012
+ [trendUiData]="trendUiData()"
58013
+ [shopId]="shopId()"
58014
+ [pacingMetrics]="pacingResponse()"
58015
+ [dataResults]="dataResults()"
58016
+ [reverseCalculationResponse]="reverseCalculationResponse()"
58017
+ [targets]="targets()"
58018
+ (targetsCreated)="targetsCreated.emit($event)"
58019
+ (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
58020
+ />
58021
+ </div>
58022
+ }
58023
+
58024
+ <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
58025
+ @else {
58026
+ <symphiq-revenue-calculator-welcome-banner
58027
+ [viewMode]="viewMode()"
58028
+ [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
58029
+ [hasTargets]="true"
58030
+ />
58031
+
58032
+ <!-- Placeholder for Revenue Calculator Content -->
58033
+ <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
58034
+ <div class="text-center space-y-4">
58035
+ <div class="flex justify-center">
58036
+ <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
58037
+ viewBox="0 0 24 24">
58038
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
58039
+ d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
58040
+ </svg>
58041
+ </div>
58042
+ <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
58043
+ Revenue Calculator Dashboard
58044
+ </h3>
58045
+ <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
58046
+ Your targets are set! The full revenue calculator dashboard with pacing and insights will be
58047
+ displayed here.
58048
+ </p>
58049
+ </div>
58050
+ </div>
58051
+ }
58052
+
58053
+ </div>
58054
+ </main>
58055
+ </div>
58056
+ </div>
57990
58057
  `
57991
58058
  }]
57992
58059
  }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], ytdComparisonUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ytdComparisonUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }], onWindowScroll: [{
57993
58060
  type: HostListener,
57994
58061
  args: ['window:scroll', ['$event']]
57995
58062
  }] }); })();
57996
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 222 }); })();
58063
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 223 }); })();
57997
58064
 
57998
58065
  function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
57999
58066
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);