@eric-emg/symphiq-components 1.2.269 → 1.2.271

package/fesm2022/symphiq-components.mjs

@@ -55256,33 +55256,65 @@ const _forTrack1$3 = ($index, $item) => $item.calc.metric;
 function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 16);
-    i0.ɵɵelement(2, "path", 20);
+    i0.ɵɵelementStart(1, "svg", 14);
+    i0.ɵɵelement(2, "path", 18);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r2.infoIconClasses())("libSymphiqTooltip", ctx_r2.getMarkdownTooltipContent(stage_r2.stageMetric.description, ctx_r2.getMetricTitle(stage_r2.stageMetric)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 12);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "div", 19);
+    i0.ɵɵelementStart(2, "p", 20);
+    i0.ɵɵtext(3, "Calculating...");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.loadingSpinnerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.calculatingTextClasses());
+} }
+function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const stage_r2 = i0.ɵɵnextContext().$implicit;
+    const stage_r2 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r2.originalValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.stageMetric.originalTargetValue, stage_r2.stageMetric.metric, false), " ");
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "p", 10);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, FunnelMetricsVisualizationComponent_For_4_Conditional_17_Conditional_3_Template, 2, 2, "p", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "symphiq-target-change-badge", 23);
+} if (rf & 2) {
+    const stage_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.targetValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.stageMetric.targetValue, stage_r2.stageMetric.metric, false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(stage_r2.stageMetric.originalTargetValue !== undefined ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("percentageChange", stage_r2.stageMetric.percentageIncrease)("metric", stage_r2.stageMetric.metric)("priorYear", ctx_r2.priorYear());
+} }
+function FunnelMetricsVisualizationComponent_For_4_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 9);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 21);
+    i0.ɵɵelementStart(3, "p", 24);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 22);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
@@ -55298,19 +55330,19 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("pacingPercentage", stage_r2.pacingInfo.pacingPercentage)("status", stage_r2.pacingInfo.status)("showAsFullText", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 30);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 33);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 40);
-    i0.ɵɵelement(2, "path", 20);
+    i0.ɵɵelementStart(1, "svg", 43);
+    i0.ɵɵelement(2, "path", 18);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r2.infoIconClasses())("libSymphiqTooltip", ctx_r2.getMarkdownTooltipContent(metric_r5.calc.description, ctx_r2.getMetricTitle(metric_r5.calc)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 35);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -55320,14 +55352,14 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(metric_r5.calc.originalTargetValue, metric_r5.calc.metric, false), " ");
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 32);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 35);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 41);
+    i0.ɵɵelementStart(3, "p", 44);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 42);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r5 = i0.ɵɵnextContext().$implicit;
@@ -55343,64 +55375,64 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("pacingPercentage", metric_r5.pacingInfo.pacingPercentage)("status", metric_r5.pacingInfo.status)("showAsFullText", true)("isCompact", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const metric_r5 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onEditRelatedMetricTarget(metric_r5.calc.metric)); });
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const metric_r5 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onEditRelatedMetricTarget(metric_r5.calc.metric)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 16);
-    i0.ɵɵelement(2, "path", 43);
+    i0.ɵɵelementStart(1, "svg", 14);
+    i0.ɵɵelement(2, "path", 46);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "span", 18);
+    i0.ɵɵelementStart(3, "span", 16);
     i0.ɵɵtext(4, "Edit Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 19);
+    i0.ɵɵelementStart(5, "span", 17);
     i0.ɵɵtext(6, "Edit");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngClass", ctx_r2.editTargetButtonClasses());
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28)(2, "p", 29);
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31)(2, "p", 32);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_4_Template, 3, 2, "button", 30);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_4_Template, 3, 2, "button", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 31)(6, "div")(7, "p", 32);
+    i0.ɵɵelementStart(5, "div", 34)(6, "div")(7, "p", 35);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 33);
+    i0.ɵɵelementStart(9, "p", 36);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 32);
+    i0.ɵɵelementStart(11, "div")(12, "p", 35);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 34)(15, "p", 33);
+    i0.ɵɵelementStart(14, "div", 37)(15, "p", 36);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_17_Template, 2, 2, "p", 35);
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_17_Template, 2, 2, "p", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "symphiq-target-change-badge", 36);
+    i0.ɵɵelement(18, "symphiq-target-change-badge", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_19_Template, 6, 10, "div");
+    i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_19_Template, 6, 10, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 37)(21, "button", 38);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template_button_click_21_listener() { const metric_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onViewRelatedMetricReport(metric_r5.calc.metric)); });
+    i0.ɵɵelementStart(20, "div", 40)(21, "button", 41);
+    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Template_button_click_21_listener() { const metric_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onViewRelatedMetricReport(metric_r5.calc.metric)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(22, "svg", 16);
-    i0.ɵɵelement(23, "path", 17);
+    i0.ɵɵelementStart(22, "svg", 14);
+    i0.ɵɵelement(23, "path", 15);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(24, "span", 18);
+    i0.ɵɵelementStart(24, "span", 16);
     i0.ɵɵtext(25, "View Report");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "span", 19);
+    i0.ɵɵelementStart(26, "span", 17);
     i0.ɵɵtext(27, "Report");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_28_Template, 7, 1, "button", 39);
+    i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Conditional_28_Template, 7, 1, "button", 42);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r5 = ctx.$implicit;
@@ -55441,13 +55473,13 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template
     i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r2.hasExistingTargets() ? 28 : -1);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 23);
-    i0.ɵɵelementStart(1, "div", 24)(2, "p", 25);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 26);
+    i0.ɵɵelementStart(1, "div", 27)(2, "p", 28);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 26);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template, 29, 22, "div", 27, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 29);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_27_For_6_Template, 29, 22, "div", 30, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
@@ -55473,29 +55505,24 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(13, "div")(14, "p", 9);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 11)(17, "p", 10);
-    i0.ɵɵtext(18);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template, 2, 2, "p", 12);
+    i0.ɵɵconditionalCreate(16, FunnelMetricsVisualizationComponent_For_4_Conditional_16_Template, 4, 2, "div", 11)(17, FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template, 5, 7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(20, "symphiq-target-change-badge", 13);
+    i0.ɵɵconditionalCreate(18, FunnelMetricsVisualizationComponent_For_4_Conditional_18_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template, 6, 9, "div");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 14)(23, "button", 15);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Template_button_click_23_listener() { const stage_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewStageReport(stage_r2.stageMetric.metric)); });
+    i0.ɵɵelementStart(19, "div", 12)(20, "button", 13);
+    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Template_button_click_20_listener() { const stage_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewStageReport(stage_r2.stageMetric.metric)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(24, "svg", 16);
-    i0.ɵɵelement(25, "path", 17);
+    i0.ɵɵelementStart(21, "svg", 14);
+    i0.ɵɵelement(22, "path", 15);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(26, "span", 18);
-    i0.ɵɵtext(27, "View Report");
+    i0.ɵɵelementStart(23, "span", 16);
+    i0.ɵɵtext(24, "View Report");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "span", 19);
-    i0.ɵɵtext(29, "Report");
+    i0.ɵɵelementStart(25, "span", 17);
+    i0.ɵɵtext(26, "Report");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(30, FunnelMetricsVisualizationComponent_For_4_Conditional_30_Template, 7, 1);
+    i0.ɵɵconditionalCreate(27, FunnelMetricsVisualizationComponent_For_4_Conditional_27_Template, 7, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r2 = ctx.$implicit;
@@ -55519,28 +55546,23 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("ngClass", ctx_r2.labelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.currentYear(), " Target ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.targetValueClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.stageMetric.targetValue, stage_r2.stageMetric.metric, false), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r2.stageMetric.originalTargetValue !== undefined ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("percentageChange", stage_r2.stageMetric.percentageIncrease)("metric", stage_r2.stageMetric.metric)("priorYear", ctx_r2.priorYear());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r2.pacingInfo ? 21 : -1);
+    i0.ɵɵconditional(ctx_r2.isCalculatingTargets() ? 16 : 17);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(stage_r2.pacingInfo ? 18 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.stageActionBarClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.actionButtonClasses());
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(stage_r2.relatedMetrics.length > 0 ? 30 : -1);
+    i0.ɵɵconditional(stage_r2.relatedMetrics.length > 0 ? 27 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.calculations = input([], ...(ngDevMode ? [{ debugName: "calculations" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.isCalculatingTargets = input(false, ...(ngDevMode ? [{ debugName: "isCalculatingTargets" }] : []));
         this.hasExistingTargets = input(false, ...(ngDevMode ? [{ debugName: "hasExistingTargets" }] : []));
         this.viewStageReport = output();
         this.viewRelatedMetricReport = output();
@@ -55730,12 +55752,22 @@ class FunnelMetricsVisualizationComponent {
     onEditRelatedMetricTarget(metric) {
         this.editRelatedMetricTarget.emit(metric);
     }
+    loadingSpinnerClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'border-purple-400'
+            : 'border-purple-600';
+    }
+    calculatingTextClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-purple-300'
+            : 'text-purple-600';
+    }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"], hasExistingTargets: [1, "hasExistingTargets"] }, outputs: { viewStageReport: "viewStageReport", viewRelatedMetricReport: "viewRelatedMetricReport", editRelatedMetricTarget: "editRelatedMetricTarget" }, 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-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "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, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2", "mb-3"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], [1, "mt-6", "pt-4", "border-t", "flex", "justify-start", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "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", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "hidden", "sm:inline"], [1, "sm:hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-8"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "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, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2", "mb-2"], [1, "text-sm", "line-through", "opacity-60", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "mt-6", "pt-4", "border-t", "flex", "justify-between", "items-center", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"], isCalculatingTargets: [1, "isCalculatingTargets"], hasExistingTargets: [1, "hasExistingTargets"] }, outputs: { viewStageReport: "viewStageReport", viewRelatedMetricReport: "viewRelatedMetricReport", editRelatedMetricTarget: "editRelatedMetricTarget" }, 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-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "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, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-3"], [1, "mt-6", "pt-4", "border-t", "flex", "justify-start", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "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", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "hidden", "sm:inline"], [1, "sm:hidden"], ["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, "w-5", "h-5", "border-2", "border-t-transparent", "rounded-full", "animate-spin", 3, "ngClass"], [1, "text-lg", "font-medium", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2", "mb-3"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-8"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "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, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2", "mb-2"], [1, "text-sm", "line-through", "opacity-60", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "mt-6", "pt-4", "border-t", "flex", "justify-between", "items-center", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 31, 21, "div", 2, _forTrack0$j);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 28, 15, "div", 2, _forTrack0$j);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55791,22 +55823,29 @@ class FunnelMetricsVisualizationComponent {
                 <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
                   {{ currentYear() }} Target
                 </p>
-                <div class="flex items-baseline gap-2 mb-3">
-                  <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
-                    {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
-                  </p>
-                  @if (stage.stageMetric.originalTargetValue !== undefined) {
-                    <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
-                      {{ formatMetricValue(stage.stageMetric.originalTargetValue, stage.stageMetric.metric, false) }}
+                @if (isCalculatingTargets()) {
+                  <div class="flex items-center gap-2 mb-3">
+                    <div [ngClass]="loadingSpinnerClasses()" class="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin"></div>
+                    <p [ngClass]="calculatingTextClasses()" class="text-lg font-medium">Calculating...</p>
+                  </div>
+                } @else {
+                  <div class="flex items-baseline gap-2 mb-3">
+                    <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
+                      {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
                     </p>
-                  }
-                </div>
-                <symphiq-target-change-badge
-                  [viewMode]="viewMode()"
-                  [percentageChange]="stage.stageMetric.percentageIncrease"
-                  [metric]="stage.stageMetric.metric"
-                  [priorYear]="priorYear()"
-                />
+                    @if (stage.stageMetric.originalTargetValue !== undefined) {
+                      <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
+                        {{ formatMetricValue(stage.stageMetric.originalTargetValue, stage.stageMetric.metric, false) }}
+                      </p>
+                    }
+                  </div>
+                  <symphiq-target-change-badge
+                    [viewMode]="viewMode()"
+                    [percentageChange]="stage.stageMetric.percentageIncrease"
+                    [metric]="stage.stageMetric.metric"
+                    [priorYear]="priorYear()"
+                  />
+                }
               </div>
               @if (stage.pacingInfo) {
                 <div>
@@ -55957,8 +55996,8 @@ class FunnelMetricsVisualizationComponent {
     </div>
   `
             }]
-    }], 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 }] }], hasExistingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasExistingTargets", required: false }] }], viewStageReport: [{ type: i0.Output, args: ["viewStageReport"] }], viewRelatedMetricReport: [{ type: i0.Output, args: ["viewRelatedMetricReport"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 225 }); })();
+    }], 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 }] }], isCalculatingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCalculatingTargets", required: false }] }], hasExistingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasExistingTargets", required: false }] }], viewStageReport: [{ type: i0.Output, args: ["viewStageReport"] }], viewRelatedMetricReport: [{ type: i0.Output, args: ["viewRelatedMetricReport"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 232 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -59103,57 +59142,109 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.originalValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.initialTargetValue()), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.initialTargetValue(), false), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.animatedIncreaseAmount()), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 55);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.originalValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.Math.abs(ctx_r1.initialIncreaseAmount())), " ");
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate2(" ", ctx_r1.animatedPercentageGrowth() >= 0 ? "+" : "", "", ctx_r1.formatPercentage(ctx_r1.animatedPercentageGrowth(), 1), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 55);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.originalValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.initialPercentageGrowth() >= 0 ? "+" : "", "", ctx_r1.formatPercentage(ctx_r1.initialPercentageGrowth(), 1), " ");
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.animatedGapAmount()), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 55);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.originalValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.Math.abs(ctx_r1.initialGapToClose().amount)), " ");
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(ctx_r1.Math.abs(ctx_r1.animatedGapPercentage()), 1), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵtextInterpolate2(" ", ctx_r1.animatedGapPercentage() > 0 ? "+" : "", "", ctx_r1.formatPercentage(ctx_r1.animatedGapPercentage(), 1), " ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Conditional_0_Template, 1, 1)(1, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Conditional_1_Template, 1, 2);
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Conditional_0_Template, 1, 1)(1, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Conditional_1_Template, 1, 2);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r1.isPaceAhead() ? 0 : 1);
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(ctx_r1.Math.abs(ctx_r1.initialGapToClose().percentage), 1), " ");
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.initialGapToClose().percentage > 0 ? "+" : "", "", ctx_r1.formatPercentage(ctx_r1.initialGapToClose().percentage, 1), " ");
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 55);
+    i0.ɵɵconditionalCreate(1, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Conditional_1_Template, 1, 1)(2, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Conditional_2_Template, 1, 2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.originalValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.initialIsPaceAhead() ? 1 : 2);
+} }
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 47)(1, "div", 48);
     i0.ɵɵelement(2, "div", 49);
@@ -59165,21 +59256,25 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵelementStart(6, "div", 51)(7, "div")(8, "p", 52);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 53);
-    i0.ɵɵconditionalCreate(11, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_11_Template, 1, 1)(12, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_12_Template, 1, 0);
+    i0.ɵɵelementStart(10, "div", 53)(11, "p", 54);
+    i0.ɵɵconditionalCreate(12, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_12_Template, 1, 1)(13, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_13_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_14_Template, 2, 2, "p", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "div", 54)(15, "p", 21);
-    i0.ɵɵtext(16);
+    i0.ɵɵelementStart(15, "div")(16, "div", 56)(17, "p", 21);
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 34);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(19, "button", 34);
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Template_button_click_19_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(18, "svg", 35);
-    i0.ɵɵelement(19, "path", 36);
+    i0.ɵɵelementStart(20, "svg", 35);
+    i0.ɵɵelement(21, "path", 36);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(20, "p", 53);
-    i0.ɵɵconditionalCreate(21, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_21_Template, 2, 1)(22, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Conditional_22_Template, 1, 0);
+    i0.ɵɵelementStart(22, "div", 53)(23, "p", 54);
+    i0.ɵɵconditionalCreate(24, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_24_Template, 2, 1)(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_25_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(26, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Conditional_26_Template, 3, 2, "p", 55);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -59195,20 +59290,24 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.gapLabel(), " ");
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 11 : 12);
-    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 12 : 13);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasChangedFromInitial() && ctx_r1.initialGapToClose().amount !== 0 ? 14 : -1);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.gapPercentageLabel(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.gapTooltip());
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 21 : 22);
+    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 24 : 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasChangedFromInitial() && ctx_r1.initialGapToClose().percentage !== 0 ? 26 : -1);
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27)(1, "div")(2, "p", 21);
@@ -59229,16 +59328,20 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf
     i0.ɵɵelementStart(14, "div", 51)(15, "div")(16, "p", 52);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "p", 53);
-    i0.ɵɵconditionalCreate(19, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_19_Template, 1, 1)(20, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_20_Template, 1, 0);
+    i0.ɵɵelementStart(18, "div", 53)(19, "p", 54);
+    i0.ɵɵconditionalCreate(20, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_20_Template, 1, 1)(21, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_21_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(22, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_22_Template, 2, 2, "p", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div")(22, "p", 52);
-    i0.ɵɵtext(23);
+    i0.ɵɵelementStart(23, "div")(24, "p", 52);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 53)(27, "p", 54);
+    i0.ɵɵconditionalCreate(28, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_28_Template, 1, 2)(29, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_29_Template, 1, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "p", 53);
-    i0.ɵɵconditionalCreate(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template, 1, 2)(26, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_26_Template, 1, 0);
+    i0.ɵɵconditionalCreate(30, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_30_Template, 2, 3, "p", 55);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(27, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_27_Template, 23, 14, "div", 47);
+    i0.ɵɵconditionalCreate(31, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_31_Template, 27, 16, "div", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -59265,20 +59368,24 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isIncreaseBad() ? "Decrease" : "Increase", " Amount ");
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 19 : 20);
-    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 20 : 21);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasChangedFromInitial() && ctx_r1.initialIncreaseAmount() !== 0 ? 22 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" % ", ctx_r1.isIncreaseBad() ? "Change" : "Growth", " ");
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 25 : 26);
+    i0.ɵɵconditional(ctx_r1.isTargetValid() ? 28 : 29);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.currentPaceProjectionRaw() > 0 ? 27 : -1);
+    i0.ɵɵconditional(ctx_r1.hasChangedFromInitial() && ctx_r1.initialPercentageGrowth() !== 0 ? 30 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentPaceProjectionRaw() > 0 ? 31 : -1);
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -59336,7 +59443,7 @@ function EditMetricTargetModalComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(34, EditMetricTargetModalComponent_Conditional_0_Conditional_34_Template, 4, 1, "div", 26)(35, EditMetricTargetModalComponent_Conditional_0_Conditional_35_Template, 5, 3, "div", 26);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(36, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template, 28, 20, "div", 27);
+    i0.ɵɵconditionalCreate(36, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template, 32, 22, "div", 27);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(37, "div", 28)(38, "button", 29);
     i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
@@ -59421,6 +59528,38 @@ class EditMetricTargetModalComponent {
             const initial = this.initialTargetValue();
             return initial > 0 && Math.abs(current - initial) > 0.001;
         }, ...(ngDevMode ? [{ debugName: "hasChangedFromInitial" }] : []));
+        this.initialIncreaseAmount = computed(() => {
+            const initial = this.initialTargetValue();
+            if (initial <= 0)
+                return 0;
+            return initial - this.priorYearValue();
+        }, ...(ngDevMode ? [{ debugName: "initialIncreaseAmount" }] : []));
+        this.initialPercentageGrowth = computed(() => {
+            const initial = this.initialTargetValue();
+            const prior = this.priorYearValue();
+            if (initial <= 0 || prior === 0)
+                return 0;
+            return ((initial - prior) / prior) * 100;
+        }, ...(ngDevMode ? [{ debugName: "initialPercentageGrowth" }] : []));
+        this.initialGapToClose = computed(() => {
+            const initial = this.initialTargetValue();
+            const projection = this.currentPaceProjection();
+            if (initial <= 0 || projection === 0)
+                return { amount: 0, percentage: 0 };
+            const amount = initial - projection;
+            const percentage = (amount / projection) * 100;
+            return { amount, percentage };
+        }, ...(ngDevMode ? [{ debugName: "initialGapToClose" }] : []));
+        this.initialIsPaceAhead = computed(() => {
+            const initial = this.initialTargetValue();
+            const projection = this.currentPaceProjection();
+            if (initial <= 0 || projection === 0)
+                return false;
+            if (this.isIncreaseBad()) {
+                return projection < initial;
+            }
+            return projection > initial;
+        }, ...(ngDevMode ? [{ debugName: "initialIsPaceAhead" }] : []));
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
         this.metricTitle = computed(() => {
@@ -59914,7 +60053,7 @@ class EditMetricTargetModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
         } }, hostBindings: function EditMetricTargetModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function EditMetricTargetModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-0", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-6"], [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, "space-y-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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-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, "click", "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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "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, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-0", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-6"], [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, "space-y-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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-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, "click", "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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "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, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Template, 43, 28);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -60134,7 +60273,7 @@ class EditMetricTargetModalComponent {
                         </p>
                         @if (hasChangedFromInitial()) {
                           <p [ngClass]="originalValueClasses()" class="text-xl line-through opacity-60">
-                            {{ formatMetricValue(initialTargetValue()) }}
+                            {{ formatMetricValue(initialTargetValue(), false) }}
                           </p>
                         }
                       </div>
@@ -60153,25 +60292,39 @@ class EditMetricTargetModalComponent {
                           <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
                             {{ isIncreaseBad() ? 'Decrease' : 'Increase' }} Amount
                           </p>
-                          <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                            @if (isTargetValid()) {
-                              {{ formatMetricValue(animatedIncreaseAmount()) }}
-                            } @else {
-                              --
+                          <div class="flex items-baseline gap-2">
+                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                              @if (isTargetValid()) {
+                                {{ formatMetricValue(animatedIncreaseAmount()) }}
+                              } @else {
+                                --
+                              }
+                            </p>
+                            @if (hasChangedFromInitial() && initialIncreaseAmount() !== 0) {
+                              <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
+                                {{ formatMetricValue(Math.abs(initialIncreaseAmount())) }}
+                              </p>
                             }
-                          </p>
+                          </div>
                         </div>
                         <div>
                           <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
                             % {{ isIncreaseBad() ? 'Change' : 'Growth' }}
                           </p>
-                          <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                            @if (isTargetValid()) {
-                              {{ animatedPercentageGrowth() >= 0 ? '+' : '' }}{{ formatPercentage(animatedPercentageGrowth(), 1) }}
-                            } @else {
-                              --
+                          <div class="flex items-baseline gap-2">
+                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                              @if (isTargetValid()) {
+                                {{ animatedPercentageGrowth() >= 0 ? '+' : '' }}{{ formatPercentage(animatedPercentageGrowth(), 1) }}
+                              } @else {
+                                --
+                              }
+                            </p>
+                            @if (hasChangedFromInitial() && initialPercentageGrowth() !== 0) {
+                              <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
+                                {{ initialPercentageGrowth() >= 0 ? '+' : '' }}{{ formatPercentage(initialPercentageGrowth(), 1) }}
+                              </p>
                             }
-                          </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -60190,13 +60343,20 @@ class EditMetricTargetModalComponent {
                             <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
                               {{ gapLabel() }}
                             </p>
-                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                              @if (isTargetValid()) {
-                                {{ formatMetricValue(animatedGapAmount()) }}
-                              } @else {
-                                --
+                            <div class="flex items-baseline gap-2">
+                              <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                @if (isTargetValid()) {
+                                  {{ formatMetricValue(animatedGapAmount()) }}
+                                } @else {
+                                  --
+                                }
+                              </p>
+                              @if (hasChangedFromInitial() && initialGapToClose().amount !== 0) {
+                                <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
+                                  {{ formatMetricValue(Math.abs(initialGapToClose().amount)) }}
+                                </p>
                               }
-                            </p>
+                            </div>
                           </div>
                           <div>
                             <div class="flex items-center gap-1 mb-1">
@@ -60216,17 +60376,28 @@ class EditMetricTargetModalComponent {
                                 </svg>
                               </button>
                             </div>
-                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                              @if (isTargetValid()) {
-                                @if (isPaceAhead()) {
-                                  +{{ formatPercentage(Math.abs(animatedGapPercentage()), 1) }}
+                            <div class="flex items-baseline gap-2">
+                              <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                @if (isTargetValid()) {
+                                  @if (isPaceAhead()) {
+                                    +{{ formatPercentage(Math.abs(animatedGapPercentage()), 1) }}
+                                  } @else {
+                                    {{ animatedGapPercentage() > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                  }
                                 } @else {
-                                  {{ animatedGapPercentage() > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                  --
                                 }
-                              } @else {
-                                --
+                              </p>
+                              @if (hasChangedFromInitial() && initialGapToClose().percentage !== 0) {
+                                <p [ngClass]="originalValueClasses()" class="text-base line-through opacity-60">
+                                  @if (initialIsPaceAhead()) {
+                                    +{{ formatPercentage(Math.abs(initialGapToClose().percentage), 1) }}
+                                  } @else {
+                                    {{ initialGapToClose().percentage > 0 ? '+' : '' }}{{ formatPercentage(initialGapToClose().percentage, 1) }}
+                                  }
+                                </p>
                               }
-                            </p>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -60278,7 +60449,7 @@ class EditMetricTargetModalComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 347 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 379 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
@@ -60421,65 +60592,89 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
+function InitialTargetSettingComponent_Conditional_36_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "div", 66);
+    i0.ɵɵelementStart(2, "p", 67);
+    i0.ɵɵtext(3, "Calculating...");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.loadingSpinnerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatingTextClasses());
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" > ", ctx_r0.formatCurrency(ctx_r0.submittedAbsoluteInput()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 68);
+    i0.ɵɵconditionalCreate(1, InitialTargetSettingComponent_Conditional_36_Conditional_7_Conditional_1_Template, 1, 1)(2, InitialTargetSettingComponent_Conditional_36_Conditional_7_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("lg:text-3xl", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && !ctx_r0.hasExistingTargets() && ctx_r0.submittedAbsoluteInput() !== null ? 1 : 2);
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.handleAdjustTarget(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.handleAdjustTarget(); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(1, " Adjust Revenue Target ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedIncreaseAmount()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.animatedPercentageGrowth(), 1), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedGapAmount()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.animatedGapPercentage(), 1), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59)(1, "div", 60);
     i0.ɵɵelement(2, "div", 61);
@@ -60492,20 +60687,20 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf
     i0.ɵɵtext(9, " Gap to Close ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "p", 65);
-    i0.ɵɵconditionalCreate(11, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_11_Template, 1, 1)(12, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_12_Template, 1, 0);
+    i0.ɵɵconditionalCreate(11, InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_11_Template, 1, 1)(12, InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_12_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "div", 67)(15, "p", 14);
+    i0.ɵɵelementStart(13, "div")(14, "div", 70)(15, "p", 14);
     i0.ɵɵtext(16, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "button", 40);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(18, "svg", 41);
     i0.ɵɵelement(19, "path", 42);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(20, "p", 65);
-    i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_21_Template, 1, 2)(22, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_22_Template, 1, 0);
+    i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_21_Template, 1, 2)(22, InitialTargetSettingComponent_Conditional_36_Conditional_30_Conditional_22_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -60536,31 +60731,30 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 53)(1, "div")(2, "div", 54)(3, "div")(4, "p", 14);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 55);
-    i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_36_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_36_Conditional_8_Template, 1, 1);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 56);
+    i0.ɵɵconditionalCreate(6, InitialTargetSettingComponent_Conditional_36_Conditional_6_Template, 4, 2, "div", 11)(7, InitialTargetSettingComponent_Conditional_36_Conditional_7_Template, 3, 4, "p", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 57)(11, "div", 58)(12, "div", 59)(13, "div", 60);
-    i0.ɵɵelement(14, "div", 61);
-    i0.ɵɵelementStart(15, "span", 62);
-    i0.ɵɵtext(16);
+    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_36_Conditional_8_Template, 2, 1, "button", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 57)(10, "div", 58)(11, "div", 59)(12, "div", 60);
+    i0.ɵɵelement(13, "div", 61);
+    i0.ɵɵelementStart(14, "span", 62);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(17, "div", 61);
+    i0.ɵɵelement(16, "div", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 63)(19, "div")(20, "p", 64);
-    i0.ɵɵtext(21, " Increase Amount ");
+    i0.ɵɵelementStart(17, "div", 63)(18, "div")(19, "p", 64);
+    i0.ɵɵtext(20, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "p", 65);
-    i0.ɵɵconditionalCreate(23, InitialTargetSettingComponent_Conditional_36_Conditional_23_Template, 1, 1)(24, InitialTargetSettingComponent_Conditional_36_Conditional_24_Template, 1, 0);
+    i0.ɵɵelementStart(21, "p", 65);
+    i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_36_Conditional_22_Template, 1, 1)(23, InitialTargetSettingComponent_Conditional_36_Conditional_23_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div")(26, "p", 64);
-    i0.ɵɵtext(27, " % Growth ");
+    i0.ɵɵelementStart(24, "div")(25, "p", 64);
+    i0.ɵɵtext(26, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "p", 65);
-    i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 1)(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 1, 0);
+    i0.ɵɵelementStart(27, "p", 65);
+    i0.ɵɵconditionalCreate(28, InitialTargetSettingComponent_Conditional_36_Conditional_28_Template, 1, 1)(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 23, 12, "div", 59);
+    i0.ɵɵconditionalCreate(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 23, 12, "div", 59);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -60571,12 +60765,9 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("lg:text-3xl", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
-    i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && !ctx_r0.hasExistingTargets() && ctx_r0.submittedAbsoluteInput() !== null ? 7 : 8);
+    i0.ɵɵconditional(ctx_r0.isCalculatingTargets() ? 6 : 7);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && !ctx_r0.hasExistingTargets() ? 9 : -1);
+    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && !ctx_r0.hasExistingTargets() ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("details-collapse-expanded", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
     i0.ɵɵadvance(4);
@@ -60592,15 +60783,15 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 23 : 24);
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 22 : 23);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 29 : 30);
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 28 : 29);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 ? 31 : -1);
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 ? 30 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 23);
@@ -60647,13 +60838,13 @@ function InitialTargetSettingComponent_Conditional_40_Conditional_6_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 68)(2, "h2", 69);
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 71)(2, "h2", 72);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p", 52);
     i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_40_Conditional_5_Template, 1, 1)(6, InitialTargetSettingComponent_Conditional_40_Conditional_6_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "symphiq-funnel-metrics-visualization", 70);
+    i0.ɵɵelementStart(7, "symphiq-funnel-metrics-visualization", 73);
     i0.ɵɵlistener("viewStageReport", function InitialTargetSettingComponent_Conditional_40_Template_symphiq_funnel_metrics_visualization_viewStageReport_7_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openMetricReport($event)); })("viewRelatedMetricReport", function InitialTargetSettingComponent_Conditional_40_Template_symphiq_funnel_metrics_visualization_viewRelatedMetricReport_7_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openMetricReport($event)); })("editRelatedMetricTarget", function InitialTargetSettingComponent_Conditional_40_Template_symphiq_funnel_metrics_visualization_editRelatedMetricTarget_7_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditRelatedMetricTarget($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -60666,11 +60857,11 @@ function InitialTargetSettingComponent_Conditional_40_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.hasExistingTargets() && ctx_r0.submittedAbsoluteInput() !== null ? 5 : 6);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("calculations", ctx_r0.displayedMetricCalculations())("pacingMetrics", ctx_r0.pacingMetrics())("hasExistingTargets", ctx_r0.hasExistingTargets());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("calculations", ctx_r0.displayedMetricCalculations())("pacingMetrics", ctx_r0.pacingMetrics())("hasExistingTargets", ctx_r0.hasExistingTargets())("isCalculatingTargets", ctx_r0.isCalculatingTargets());
 } }
 function InitialTargetSettingComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-sticky-submit-bar", 71);
+    i0.ɵɵelementStart(0, "symphiq-sticky-submit-bar", 74);
     i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Conditional_41_Template_symphiq_sticky_submit_bar_submitClick_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleSubmitClick()); })("cancelClick", function InitialTargetSettingComponent_Conditional_41_Template_symphiq_sticky_submit_bar_cancelClick_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -60682,11 +60873,11 @@ function InitialTargetSettingComponent_Conditional_42_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 33)(1, "p", 52);
     i0.ɵɵtext(2, " You have unsaved target changes. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 72)(4, "button", 73);
+    i0.ɵɵelementStart(3, "div", 75)(4, "button", 76);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_42_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiscardChanges()); });
     i0.ɵɵtext(5, " Reset ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 73);
+    i0.ɵɵelementStart(6, "button", 76);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_42_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveTargets()); });
     i0.ɵɵtext(7, " Save Targets ");
     i0.ɵɵelementEnd()()();
@@ -60709,9 +60900,12 @@ class InitialTargetSettingComponent {
         this.shopId = input(undefined, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
-        this.reverseCalculationResponse = input(undefined, ...(ngDevMode ? [{ debugName: "reverseCalculationResponse" }] : []));
+        this.calculateRevenueReverseResponse = input(undefined, ...(ngDevMode ? [{ debugName: "calculateRevenueReverseResponse" }] : []));
+        this.calculateRevenueResponse = input(undefined, ...(ngDevMode ? [{ debugName: "calculateRevenueResponse" }] : []));
+        this.isCalculatingTargets = input(false, ...(ngDevMode ? [{ debugName: "isCalculatingTargets" }] : []));
         this.targets = input(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : []));
         this.targetsCreated = output();
+        this.calculateRevenueReverseRequest = output();
         this.calculateRevenueRequest = output();
         this.editRelatedMetricTarget = output();
         this.saveTargetsClick = output();
@@ -60726,6 +60920,7 @@ class InitialTargetSettingComponent {
         this.percentageInput = signal(null, ...(ngDevMode ? [{ debugName: "percentageInput" }] : []));
         this.calculationState = signal('input', ...(ngDevMode ? [{ debugName: "calculationState" }] : []));
         this.storedResponse = signal(null, ...(ngDevMode ? [{ debugName: "storedResponse" }] : []));
+        this.storedCalculateResponse = signal(null, ...(ngDevMode ? [{ debugName: "storedCalculateResponse" }] : []));
         this.submittedAbsoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "submittedAbsoluteInput" }] : []));
         this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
         this.isMetricReportOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMetricReportOpen" }] : []));
@@ -60854,17 +61049,35 @@ class InitialTargetSettingComponent {
                     });
                 }
             }
-            if (pendingChanges.size === 0) {
-                return baseResults;
+            let resultsWithPending = baseResults;
+            if (pendingChanges.size > 0) {
+                resultsWithPending = baseResults.map(calc => {
+                    const pending = pendingChanges.get(calc.metric);
+                    if (pending) {
+                        return {
+                            ...calc,
+                            originalTargetValue: pending.originalValue,
+                            targetValue: pending.newValue,
+                            percentageIncrease: pending.percentageChange
+                        };
+                    }
+                    return calc;
+                });
+            }
+            const calculateResponse = this.storedCalculateResponse();
+            if (!calculateResponse || !calculateResponse.metricValues || calculateResponse.metricValues.length === 0) {
+                return resultsWithPending;
             }
-            return baseResults.map(calc => {
-                const pending = pendingChanges.get(calc.metric);
-                if (pending) {
+            return resultsWithPending.map(calc => {
+                const responseMetric = calculateResponse.metricValues.find(mv => mv.metric === calc.metric);
+                if (responseMetric) {
+                    const { targetValue: newTargetValue, percentageIncrease: newPercentageIncrease } = this.parseMetricValue(responseMetric.value);
+                    const originalValue = calc.originalTargetValue !== undefined ? calc.originalTargetValue : calc.targetValue;
                     return {
                         ...calc,
-                        originalTargetValue: pending.originalValue,
-                        targetValue: pending.newValue,
-                        percentageIncrease: pending.percentageChange
+                        originalTargetValue: originalValue,
+                        targetValue: newTargetValue,
+                        percentageIncrease: newPercentageIncrease
                     };
                 }
                 return calc;
@@ -60963,12 +61176,18 @@ class InitialTargetSettingComponent {
             }
         }, { allowSignalWrites: true });
         effect(() => {
-            const response = this.reverseCalculationResponse();
+            const response = this.calculateRevenueReverseResponse();
             if (response) {
                 this.storedResponse.set(response);
                 this.calculationState.set('results');
             }
         }, { allowSignalWrites: true });
+        effect(() => {
+            const response = this.calculateRevenueResponse();
+            if (response) {
+                this.storedCalculateResponse.set(response);
+            }
+        }, { allowSignalWrites: true });
         effect(() => {
             const targetRevenue = this.displayedTargetRevenue();
             const priorRevenue = this.priorYearRevenue();
@@ -61141,7 +61360,7 @@ class InitialTargetSettingComponent {
             targetRevenue: this.calculatedRevenue(),
             funnelType: FunnelMetricTypeEnum.REVENUE,
         };
-        this.calculateRevenueRequest.emit(request);
+        this.calculateRevenueReverseRequest.emit(request);
     }
     handleSetTargets() {
         const response = this.storedResponse();
@@ -61251,6 +61470,16 @@ class InitialTargetSettingComponent {
             ? 'text-purple-300'
             : 'text-purple-700';
     }
+    loadingSpinnerClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'border-purple-400'
+            : 'border-purple-600';
+    }
+    calculatingTextClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-purple-300'
+            : 'text-purple-600';
+    }
     calculatedSecondaryClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-purple-200'
@@ -61379,6 +61608,14 @@ class InitialTargetSettingComponent {
             percentageChange: event.percentageChange
         });
         this.pendingTargetChanges.set(pendingChanges);
+        const calculations = this.displayedMetricCalculations();
+        const proposedTargets = generateTargetsFromCalculations(this.shopId(), calculations);
+        const request = {
+            shopId: this.shopId(),
+            funnelType: FunnelMetricTypeEnum.REVENUE,
+            proposedTargets
+        };
+        this.calculateRevenueRequest.emit(request);
         this.closeEditMetricModal();
     }
     onSaveTargets() {
@@ -61430,7 +61667,7 @@ class InitialTargetSettingComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, 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", editRelatedMetricTarget: "editRelatedMetricTarget", saveTargetsClick: "saveTargetsClick", discardChangesClick: "discardChangesClick", targetsUpdated: "targetsUpdated" }, decls: 45, vars: 51, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "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", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [1, "fixed", "bottom-0", "left-0", "right-0", "p-4", "border-t", "shadow-lg", "z-50", "flex", "flex-col", "sm:flex-row", "items-center", "justify-center", "gap-4", 3, "ngClass"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "trendChartData", "isOpen"], [3, "closed", "targetApplied", "viewMode", "metricData", "pacingMetrics", "isOpen"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-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, "click", "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, "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, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [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"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "editRelatedMetricTarget", "viewMode", "calculations", "pacingMetrics", "hasExistingTargets"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], calculateRevenueReverseResponse: [1, "calculateRevenueReverseResponse"], calculateRevenueResponse: [1, "calculateRevenueResponse"], isCalculatingTargets: [1, "isCalculatingTargets"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueReverseRequest: "calculateRevenueReverseRequest", calculateRevenueRequest: "calculateRevenueRequest", editRelatedMetricTarget: "editRelatedMetricTarget", saveTargetsClick: "saveTargetsClick", discardChangesClick: "discardChangesClick", targetsUpdated: "targetsUpdated" }, decls: 45, vars: 51, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "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", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [1, "fixed", "bottom-0", "left-0", "right-0", "p-4", "border-t", "shadow-lg", "z-50", "flex", "flex-col", "sm:flex-row", "items-center", "justify-center", "gap-4", 3, "ngClass"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "trendChartData", "isOpen"], [3, "closed", "targetApplied", "viewMode", "metricData", "pacingMetrics", "isOpen"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-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, "click", "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, "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, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass", "lg:text-3xl"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "w-5", "h-5", "border-2", "border-t-transparent", "rounded-full", "animate-spin", 3, "ngClass"], [1, "text-lg", "font-medium", 3, "ngClass"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 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"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "editRelatedMetricTarget", "viewMode", "calculations", "pacingMetrics", "hasExistingTargets", "isCalculatingTargets"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -61466,12 +61703,12 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 23)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 24);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(34, "div", 25)(35, "div", 26);
-            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 23, "div", 27);
+            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 31, 20, "div", 27);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 6, 3, "div", 28);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(38, "div", 29)(39, "div", 30);
-            i0.ɵɵconditionalCreate(40, InitialTargetSettingComponent_Conditional_40_Template, 8, 8, "div", 31);
+            i0.ɵɵconditionalCreate(40, InitialTargetSettingComponent_Conditional_40_Template, 8, 9, "div", 31);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(41, InitialTargetSettingComponent_Conditional_41_Template, 1, 6, "symphiq-sticky-submit-bar", 32);
             i0.ɵɵconditionalCreate(42, InitialTargetSettingComponent_Conditional_42_Template, 8, 4, "div", 33);
@@ -61745,14 +61982,21 @@ class InitialTargetSettingComponent {
                           <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
                             {{ currentYear() }} Revenue Target
                           </p>
-                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
-                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
-                            @if (calculationState() === 'results' && !hasExistingTargets() && submittedAbsoluteInput() !== null) {
-                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
-                            } @else {
-                              {{ formatCurrency(displayedTargetRevenue()) }}
-                            }
-                          </p>
+                          @if (isCalculatingTargets()) {
+                            <div class="flex items-center gap-2">
+                              <div [ngClass]="loadingSpinnerClasses()" class="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin"></div>
+                              <p [ngClass]="calculatingTextClasses()" class="text-lg font-medium">Calculating...</p>
+                            </div>
+                          } @else {
+                            <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
+                              [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
+                              @if (calculationState() === 'results' && !hasExistingTargets() && submittedAbsoluteInput() !== null) {
+                                > {{ formatCurrency(submittedAbsoluteInput()!) }}
+                              } @else {
+                                {{ formatCurrency(displayedTargetRevenue()) }}
+                              }
+                            </p>
+                          }
                         </div>
                         @if (calculationState() === 'results' && !hasExistingTargets()) {
                           <button
@@ -61912,6 +62156,7 @@ class InitialTargetSettingComponent {
                 [calculations]="displayedMetricCalculations()"
                 [pacingMetrics]="pacingMetrics()"
                 [hasExistingTargets]="hasExistingTargets()"
+                [isCalculatingTargets]="isCalculatingTargets()"
                 (viewStageReport)="openMetricReport($event)"
                 (viewRelatedMetricReport)="openMetricReport($event)"
                 (editRelatedMetricTarget)="onEditRelatedMetricTarget($event)"
@@ -61987,8 +62232,8 @@ class InitialTargetSettingComponent {
         }], percentageInputRef: [{
             type: ViewChild,
             args: ['percentageInputRef']
-        }], 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"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }], targetsUpdated: [{ type: i0.Output, args: ["targetsUpdated"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 578 }); })();
+        }], 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 }] }], calculateRevenueReverseResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueReverseResponse", required: false }] }], calculateRevenueResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueResponse", required: false }] }], isCalculatingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCalculatingTargets", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueReverseRequest: [{ type: i0.Output, args: ["calculateRevenueReverseRequest"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }], targetsUpdated: [{ type: i0.Output, args: ["targetsUpdated"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 588 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);
@@ -62162,13 +62407,13 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
     i0.ɵɵelementStart(1, "div", 21)(2, "symphiq-initial-target-setting", 22);
-    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_targetsCreated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTargetsCreated($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_calculateRevenueRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueRequest.emit($event)); })("editRelatedMetricTarget", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_editRelatedMetricTarget_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.editRelatedMetricTarget.emit($event)); })("saveTargetsClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_saveTargetsClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveTargetsClick.emit()); })("discardChangesClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_discardChangesClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.discardChangesClick.emit()); });
+    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_targetsCreated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTargetsCreated($event)); })("calculateRevenueReverseRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_calculateRevenueReverseRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueReverseRequest.emit($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_calculateRevenueRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueRequest.emit($event)); })("editRelatedMetricTarget", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_editRelatedMetricTarget_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.editRelatedMetricTarget.emit($event)); })("saveTargetsClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_saveTargetsClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveTargetsClick.emit()); })("discardChangesClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_discardChangesClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.discardChangesClick.emit()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", ctx_r0.hasCurrentYearTargets());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$p))("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());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(14, _c0$p))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("calculateRevenueReverseResponse", ctx_r0.calculateRevenueReverseResponse())("calculateRevenueResponse", ctx_r0.calculateRevenueResponse())("isCalculatingTargets", ctx_r0.isCalculatingTargets())("targets", ctx_r0.targets());
 } }
 dayjs.extend(utc);
 class SymphiqRevenueCalculatorDashboardComponent {
@@ -62189,11 +62434,14 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
-        this.reverseCalculationResponse = input(undefined, ...(ngDevMode ? [{ debugName: "reverseCalculationResponse" }] : []));
+        this.calculateRevenueReverseResponse = input(undefined, ...(ngDevMode ? [{ debugName: "calculateRevenueReverseResponse" }] : []));
+        this.calculateRevenueResponse = input(undefined, ...(ngDevMode ? [{ debugName: "calculateRevenueResponse" }] : []));
+        this.isCalculatingTargets = input(false, ...(ngDevMode ? [{ debugName: "isCalculatingTargets" }] : []));
         this.stepClick = output();
         this.nextStepClick = output();
         this.targetsCreated = output();
         this.calculateRevenueRequest = output();
+        this.calculateRevenueReverseRequest = output();
         this.editRelatedMetricTarget = output();
         this.saveTargetsClick = output();
         this.discardChangesClick = output();
@@ -62334,7 +62582,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
     static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, 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", editRelatedMetricTarget: "editRelatedMetricTarget", saveTargetsClick: "saveTargetsClick", discardChangesClick: "discardChangesClick" }, decls: 26, 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", "editRelatedMetricTarget", "saveTargetsClick", "discardChangesClick", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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"], calculateRevenueReverseResponse: [1, "calculateRevenueReverseResponse"], calculateRevenueResponse: [1, "calculateRevenueResponse"], isCalculatingTargets: [1, "isCalculatingTargets"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest", calculateRevenueReverseRequest: "calculateRevenueReverseRequest", editRelatedMetricTarget: "editRelatedMetricTarget", saveTargetsClick: "saveTargetsClick", discardChangesClick: "discardChangesClick" }, decls: 26, 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", "calculateRevenueReverseRequest", "calculateRevenueRequest", "editRelatedMetricTarget", "saveTargetsClick", "discardChangesClick", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "calculateRevenueReverseResponse", "calculateRevenueResponse", "isCalculatingTargets", "targets"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -62352,7 +62600,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             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(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(21, "main", 11)(22, "div", 6);
-            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);
+            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 15);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -62537,9 +62785,12 @@ class SymphiqRevenueCalculatorDashboardComponent {
                     [shopId]="shopId()"
                     [pacingMetrics]="pacingResponse()"
                     [dataResults]="dataResults()"
-                    [reverseCalculationResponse]="reverseCalculationResponse()"
+                    [calculateRevenueReverseResponse]="calculateRevenueReverseResponse()"
+                    [calculateRevenueResponse]="calculateRevenueResponse()"
+                    [isCalculatingTargets]="isCalculatingTargets()"
                     [targets]="targets()"
                     (targetsCreated)="onTargetsCreated($event)"
+                    (calculateRevenueReverseRequest)="calculateRevenueReverseRequest.emit($event)"
                     (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
                     (editRelatedMetricTarget)="editRelatedMetricTarget.emit($event)"
                     (saveTargetsClick)="saveTargetsClick.emit()"
@@ -62554,11 +62805,11 @@ class SymphiqRevenueCalculatorDashboardComponent {
     </div>
   `
             }]
-    }], () => [], { 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"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }], onWindowScroll: [{
+    }], () => [], { 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 }] }], calculateRevenueReverseResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueReverseResponse", required: false }] }], calculateRevenueResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueResponse", required: false }] }], isCalculatingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCalculatingTargets", 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"] }], calculateRevenueReverseRequest: [{ type: i0.Output, args: ["calculateRevenueReverseRequest"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }], onWindowScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 201 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 206 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);