@eric-emg/symphiq-components 1.2.266 → 1.2.268

package/fesm2022/symphiq-components.mjs

@@ -55256,8 +55256,8 @@ 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", 15);
-    i0.ɵɵelement(2, "path", 19);
+    i0.ɵɵelementStart(1, "svg", 16);
+    i0.ɵɵelement(2, "path", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
@@ -55265,13 +55265,24 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ct
     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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const stage_r2 = i0.ɵɵnextContext().$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) {
     i0.ɵɵelementStart(0, "div")(1, "p", 9);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 11);
+    i0.ɵɵelementStart(3, "p", 21);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 20);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
@@ -55287,25 +55298,36 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_19_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_28_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 28);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 30);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 37);
-    i0.ɵɵelement(2, "path", 19);
+    i0.ɵɵelementStart(1, "svg", 40);
+    i0.ɵɵelement(2, "path", 20);
     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_28_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 30);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 35);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const metric_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedOriginalValueClasses());
+    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);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 32);
+    i0.ɵɵelementStart(3, "p", 41);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 38);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r5 = i0.ɵɵnextContext().$implicit;
@@ -55321,62 +55343,64 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_28_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_28_For_6_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_26_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", 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.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 15);
-    i0.ɵɵelement(2, "path", 39);
+    i0.ɵɵelementStart(1, "svg", 16);
+    i0.ɵɵelement(2, "path", 43);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵelementStart(3, "span", 18);
     i0.ɵɵtext(4, "Edit Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 18);
+    i0.ɵɵelementStart(5, "span", 19);
     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_28_For_6_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "p", 27);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28)(2, "p", 29);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_4_Template, 3, 2, "button", 28);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_4_Template, 3, 2, "button", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 29)(6, "div")(7, "p", 30);
+    i0.ɵɵelementStart(5, "div", 31)(6, "div")(7, "p", 32);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 31);
+    i0.ɵɵelementStart(9, "p", 33);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 30);
+    i0.ɵɵelementStart(11, "div")(12, "p", 32);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 32);
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(14, "div", 34)(15, "p", 33);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "symphiq-target-change-badge", 33);
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_17_Template, 2, 2, "p", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_17_Template, 6, 10, "div");
+    i0.ɵɵelement(18, "symphiq-target-change-badge", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 34)(19, "button", 35);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template_button_click_19_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.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_30_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.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(20, "svg", 15);
-    i0.ɵɵelement(21, "path", 16);
+    i0.ɵɵelementStart(22, "svg", 16);
+    i0.ɵɵelement(23, "path", 17);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(22, "span", 17);
-    i0.ɵɵtext(23, "View Report");
-    i0.ɵɵelementEnd();
     i0.ɵɵelementStart(24, "span", 18);
-    i0.ɵɵtext(25, "Report");
+    i0.ɵɵtext(25, "View Report");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 19);
+    i0.ɵɵtext(27, "Report");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(26, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_26_Template, 7, 1, "button", 36);
+    i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Conditional_28_Template, 7, 1, "button", 39);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r5 = ctx.$implicit;
@@ -55400,28 +55424,30 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template
     i0.ɵɵproperty("ngClass", ctx_r2.relatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.currentYear(), " Target ");
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.relatedTargetValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(metric_r5.calc.targetValue, metric_r5.calc.metric, false), " ");
     i0.ɵɵadvance();
+    i0.ɵɵconditional(metric_r5.calc.originalTargetValue !== undefined ? 17 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("percentageChange", metric_r5.calc.percentageIncrease)("metric", metric_r5.calc.metric)("priorYear", ctx_r2.priorYear())("isCompact", true);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r5.pacingInfo ? 17 : -1);
+    i0.ɵɵconditional(metric_r5.pacingInfo ? 19 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.relatedActionBarClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.relatedActionButtonClasses());
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r2.hasExistingTargets() ? 26 : -1);
+    i0.ɵɵconditional(ctx_r2.hasExistingTargets() ? 28 : -1);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 21);
-    i0.ɵɵelementStart(1, "div", 22)(2, "p", 23);
+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);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 24);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template, 27, 21, "div", 25, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 26);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_30_For_6_Template, 29, 22, "div", 27, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r2 = i0.ɵɵnextContext().$implicit;
@@ -55447,27 +55473,29 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(13, "div")(14, "p", 9);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 11);
-    i0.ɵɵtext(17);
+    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.ɵɵelementEnd();
-    i0.ɵɵelement(18, "symphiq-target-change-badge", 12);
+    i0.ɵɵelement(20, "symphiq-target-change-badge", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template, 6, 9, "div");
+    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 13)(21, "button", 14);
-    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Template_button_click_21_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(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.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(22, "svg", 15);
-    i0.ɵɵelement(23, "path", 16);
+    i0.ɵɵelementStart(24, "svg", 16);
+    i0.ɵɵelement(25, "path", 17);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(24, "span", 17);
-    i0.ɵɵtext(25, "View Report");
-    i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "span", 18);
-    i0.ɵɵtext(27, "Report");
+    i0.ɵɵtext(27, "View Report");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span", 19);
+    i0.ɵɵtext(29, "Report");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template, 7, 1);
+    i0.ɵɵconditionalCreate(30, FunnelMetricsVisualizationComponent_For_4_Conditional_30_Template, 7, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r2 = ctx.$implicit;
@@ -55491,20 +55519,22 @@ 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();
+    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 ? 19 : -1);
+    i0.ɵɵconditional(stage_r2.pacingInfo ? 21 : -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 ? 28 : -1);
+    i0.ɵɵconditional(stage_r2.relatedMetrics.length > 0 ? 30 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
@@ -55583,6 +55613,11 @@ class FunnelMetricsVisualizationComponent {
             ? 'text-purple-300'
             : 'text-purple-700';
     }
+    originalValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-slate-400'
+            : 'text-slate-500';
+    }
     projectedValueClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-amber-300'
@@ -55623,6 +55658,11 @@ class FunnelMetricsVisualizationComponent {
             ? 'text-purple-200'
             : 'text-purple-800';
     }
+    relatedOriginalValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-slate-400'
+            : 'text-slate-500';
+    }
     relatedProjectedValueClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-amber-200'
@@ -55691,11 +55731,11 @@ class FunnelMetricsVisualizationComponent {
         this.editRelatedMetricTarget.emit(metric);
     }
     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, "text-2xl", "font-bold", "mb-3", 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"], [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, "text-lg", "font-bold", "mb-2", 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"], [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"], 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) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 29, 20, "div", 2, _forTrack0$j);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 31, 21, "div", 2, _forTrack0$j);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55751,9 +55791,16 @@ class FunnelMetricsVisualizationComponent {
                 <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
                   {{ currentYear() }} Target
                 </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
-                </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) }}
+                    </p>
+                  }
+                </div>
                 <symphiq-target-change-badge
                   [viewMode]="viewMode()"
                   [percentageChange]="stage.stageMetric.percentageIncrease"
@@ -55835,9 +55882,16 @@ class FunnelMetricsVisualizationComponent {
                           <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
                             {{ currentYear() }} Target
                           </p>
-                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
-                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
-                          </p>
+                          <div class="flex items-baseline gap-2 mb-2">
+                            <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold">
+                              {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
+                            </p>
+                            @if (metric.calc.originalTargetValue !== undefined) {
+                              <p [ngClass]="relatedOriginalValueClasses()" class="text-sm line-through opacity-60">
+                                {{ formatMetricValue(metric.calc.originalTargetValue, metric.calc.metric, false) }}
+                              </p>
+                            }
+                          </div>
                           <symphiq-target-change-badge
                             [viewMode]="viewMode()"
                             [percentageChange]="metric.calc.percentageIncrease"
@@ -55904,7 +55958,7 @@ class FunnelMetricsVisualizationComponent {
   `
             }]
     }], 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: 211 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 225 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -59068,12 +59122,24 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
 function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
-function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    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_25_Conditional_21_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_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_Conditional_0_Template, 1, 1)(1, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_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_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
@@ -59087,13 +59153,13 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵelement(5, "div", 46);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 49);
-    i0.ɵɵtext(9, " Gap to Close ");
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "p", 50);
     i0.ɵɵconditionalCreate(11, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_11_Template, 1, 1)(12, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_12_Template, 1, 0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(13, "div")(14, "div", 51)(15, "p", 21);
-    i0.ɵɵtext(16, " Additional Growth Needed ");
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "button", 33);
     i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
@@ -59103,7 +59169,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(20, "p", 50);
-    i0.ɵɵconditionalCreate(21, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_Template, 1, 2)(22, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_22_Template, 1, 0);
+    i0.ɵɵconditionalCreate(21, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_21_Template, 2, 1)(22, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_22_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -59112,19 +59178,23 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.dividerLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " YTD Gap ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapDividerLabel(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.dividerBorderClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapLabel(), " ");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isTargetValid() ? 11 : 12);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.additionalGrowthTooltip);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapPercentageLabel(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.gapTooltip());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
@@ -59156,7 +59226,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf
     i0.ɵɵelementStart(22, "p", 50);
     i0.ɵɵconditionalCreate(23, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_23_Template, 1, 2)(24, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_24_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template, 23, 12, "div", 44);
+    i0.ɵɵconditionalCreate(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template, 23, 14, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -59420,14 +59490,43 @@ class EditMetricTargetModalComponent {
             const percentage = (amount / projection) * 100;
             return { amount, percentage };
         }, ...(ngDevMode ? [{ debugName: "gapToClose" }] : []));
+        this.isPaceAhead = computed(() => {
+            const target = this.calculatedTarget();
+            const projection = this.currentPaceProjection();
+            if (target === 0 || projection === 0)
+                return false;
+            if (this.isIncreaseBad()) {
+                return projection < target;
+            }
+            return projection > target;
+        }, ...(ngDevMode ? [{ debugName: "isPaceAhead" }] : []));
+        this.gapLabel = computed(() => {
+            return this.isPaceAhead() ? 'Ahead by' : 'Gap to Close';
+        }, ...(ngDevMode ? [{ debugName: "gapLabel" }] : []));
+        this.gapPercentageLabel = computed(() => {
+            return this.isPaceAhead() ? 'Ahead of Target' : 'Additional Growth Needed';
+        }, ...(ngDevMode ? [{ debugName: "gapPercentageLabel" }] : []));
+        this.gapDividerLabel = computed(() => {
+            return this.isPaceAhead()
+                ? `${this.currentYear()} Pace Status`
+                : `${this.currentYear()} YTD Gap`;
+        }, ...(ngDevMode ? [{ debugName: "gapDividerLabel" }] : []));
+        this.gapTooltip = computed(() => {
+            if (this.isPaceAhead()) {
+                return {
+                    title: 'Ahead of Target',
+                    markdown: 'This percentage represents how far ahead your current projected pace is compared to your target. You are on track to exceed your goal if you maintain your current performance.'
+                };
+            }
+            return {
+                title: 'Additional Growth Needed',
+                markdown: 'This percentage represents the additional improvement required beyond your current projected pace to reach your target. It shows how much more change is needed to close the gap between your projected performance and your goal.'
+            };
+        }, ...(ngDevMode ? [{ debugName: "gapTooltip" }] : []));
         this.currentPaceProjectionTooltip = {
             title: 'Current Pace Projection',
             markdown: 'This is your projected year-end value based on your current performance trends. It extrapolates your year-to-date results to estimate where you will finish the year if you maintain your current pace.'
         };
-        this.additionalGrowthTooltip = {
-            title: 'Additional Growth Needed',
-            markdown: 'This percentage represents the additional improvement required beyond your current projected pace to reach your target. It shows how much more change is needed to close the gap between your projected performance and your goal.'
-        };
         effect(() => {
             if (this.isOpen()) {
                 const metricData = this.metricData();
@@ -60022,14 +60121,14 @@ class EditMetricTargetModalComponent {
                         <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
                           <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                           <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                            {{ currentYear() }} YTD Gap
+                            {{ gapDividerLabel() }}
                           </span>
                           <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                         </div>
                         <div class="grid grid-cols-2 gap-4 pt-2">
                           <div>
                             <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                              Gap to Close
+                              {{ gapLabel() }}
                             </p>
                             <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
                               @if (isTargetValid()) {
@@ -60042,13 +60141,13 @@ class EditMetricTargetModalComponent {
                           <div>
                             <div class="flex items-center gap-1 mb-1">
                               <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                                Additional Growth Needed
+                                {{ gapPercentageLabel() }}
                               </p>
                               <button
                                 type="button"
                                 [ngClass]="infoIconClasses()"
                                 class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                                [libSymphiqTooltip]="additionalGrowthTooltip"
+                                [libSymphiqTooltip]="gapTooltip()"
                                 tooltipType="markdown"
                                 tooltipPosition="top"
                                 (click)="$event.stopPropagation()">
@@ -60059,7 +60158,11 @@ class EditMetricTargetModalComponent {
                             </div>
                             <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
                               @if (isTargetValid()) {
-                                {{ animatedGapPercentage() > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                @if (isPaceAhead()) {
+                                  +{{ formatPercentage(Math.abs(animatedGapPercentage()), 1) }}
+                                } @else {
+                                  {{ animatedGapPercentage() > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                }
                               } @else {
                                 --
                               }
@@ -60106,7 +60209,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: 327 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 331 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
@@ -60508,11 +60611,11 @@ function InitialTargetSettingComponent_Conditional_41_Template(rf, ctx) { if (rf
 function InitialTargetSettingComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 33)(1, "p", 52);
-    i0.ɵɵtext(2, " Edit individual metric targets above, then save your changes. ");
+    i0.ɵɵtext(2, " You have unsaved target changes. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 72)(4, "button", 73);
     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, " Discard Changes ");
+    i0.ɵɵtext(5, " Reset ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "button", 73);
     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()); });
@@ -60544,6 +60647,11 @@ class InitialTargetSettingComponent {
         this.editRelatedMetricTarget = output();
         this.saveTargetsClick = output();
         this.discardChangesClick = output();
+        this.targetsUpdated = output();
+        this.pendingTargetChanges = signal(new Map(), ...(ngDevMode ? [{ debugName: "pendingTargetChanges" }] : []));
+        this.hasPendingChanges = computed(() => {
+            return this.pendingTargetChanges().size > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasPendingChanges" }] : []));
         this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
         this.absoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "absoluteInput" }] : []));
         this.percentageInput = signal(null, ...(ngDevMode ? [{ debugName: "percentageInput" }] : []));
@@ -60628,53 +60736,70 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "isTargetValid" }] : []));
         this.displayedMetricCalculations = computed(() => {
             const targets = this.targets();
+            const pendingChanges = this.pendingTargetChanges();
+            let baseResults = [];
             if (targets && targets.length > 0) {
-                return this.buildCalculationsFromTargets(targets);
-            }
-            const response = this.storedResponse();
-            if (!response) {
-                return [];
+                baseResults = this.buildCalculationsFromTargets(targets);
             }
-            const results = [];
-            if (response.funnelMetricValues) {
-                response.funnelMetricValues.forEach((metricValue) => {
-                    const metric = metricValue.metric;
-                    const funnelMetric = this.funnelMetrics().find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
-                    const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
-                    const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
-                    results.push({
-                        metric,
-                        funnelMetric: metric,
-                        currentValue,
-                        targetValue,
-                        percentageIncrease: metric === MetricEnum.PURCHASE_REVENUE ? this.percentageIncrease() : percentageIncrease,
-                        isFunnelStage: true,
-                        funnelInd: funnelMetric?.funnelInd,
-                        relatedInd: 0,
-                        description: funnelMetric?.funnelMetricDescription
+            else {
+                const response = this.storedResponse();
+                if (!response) {
+                    return [];
+                }
+                if (response.funnelMetricValues) {
+                    response.funnelMetricValues.forEach((metricValue) => {
+                        const metric = metricValue.metric;
+                        const funnelMetric = this.funnelMetrics().find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
+                        const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
+                        const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
+                        baseResults.push({
+                            metric,
+                            funnelMetric: metric,
+                            currentValue,
+                            targetValue,
+                            percentageIncrease: metric === MetricEnum.PURCHASE_REVENUE ? this.percentageIncrease() : percentageIncrease,
+                            isFunnelStage: true,
+                            funnelInd: funnelMetric?.funnelInd,
+                            relatedInd: 0,
+                            description: funnelMetric?.funnelMetricDescription
+                        });
                     });
-                });
-            }
-            if (response.relatedMetricTargets) {
-                response.relatedMetricTargets.forEach((metricValue) => {
-                    const metric = metricValue.metric;
-                    const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
-                    const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
-                    const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
-                    results.push({
-                        metric,
-                        funnelMetric: funnelMetric?.funnelMetric,
-                        currentValue,
-                        targetValue,
-                        percentageIncrease: percentageIncrease || response.equalRelatedMetricIncreasePercent || 0,
-                        isFunnelStage: false,
-                        funnelInd: funnelMetric?.funnelInd,
-                        relatedInd: funnelMetric?.relatedInd,
-                        description: funnelMetric?.relatedMetricDescription
+                }
+                if (response.relatedMetricTargets) {
+                    response.relatedMetricTargets.forEach((metricValue) => {
+                        const metric = metricValue.metric;
+                        const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
+                        const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
+                        const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
+                        baseResults.push({
+                            metric,
+                            funnelMetric: funnelMetric?.funnelMetric,
+                            currentValue,
+                            targetValue,
+                            percentageIncrease: percentageIncrease || response.equalRelatedMetricIncreasePercent || 0,
+                            isFunnelStage: false,
+                            funnelInd: funnelMetric?.funnelInd,
+                            relatedInd: funnelMetric?.relatedInd,
+                            description: funnelMetric?.relatedMetricDescription
+                        });
                     });
-                });
+                }
+            }
+            if (pendingChanges.size === 0) {
+                return baseResults;
             }
-            return results;
+            return baseResults.map(calc => {
+                const pending = pendingChanges.get(calc.metric);
+                if (pending) {
+                    return {
+                        ...calc,
+                        originalTargetValue: pending.originalValue,
+                        targetValue: pending.newValue,
+                        percentageIncrease: pending.percentageChange
+                    };
+                }
+                return calc;
+            });
         }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
         this.displayedTargetRevenue = computed(() => {
             const targets = this.targets();
@@ -61174,12 +61299,38 @@ class InitialTargetSettingComponent {
         this.editMetricEnum.set('');
     }
     onEditMetricTargetApplied(event) {
-        this.editRelatedMetricTarget.emit(event.metric);
+        const pendingChanges = new Map(this.pendingTargetChanges());
+        const existingPending = pendingChanges.get(event.metric);
+        const originalValue = existingPending
+            ? existingPending.originalValue
+            : (this.displayedMetricCalculations().find(c => c.metric === event.metric)?.targetValue ?? 0);
+        pendingChanges.set(event.metric, {
+            newValue: event.targetValue,
+            originalValue,
+            percentageChange: event.percentageChange
+        });
+        this.pendingTargetChanges.set(pendingChanges);
+        this.closeEditMetricModal();
     }
     onSaveTargets() {
+        const pendingChanges = this.pendingTargetChanges();
+        if (pendingChanges.size > 0) {
+            const updates = [];
+            pendingChanges.forEach((change, metric) => {
+                updates.push({
+                    metric,
+                    targetValue: change.newValue,
+                    percentageChange: change.percentageChange,
+                    originalValue: change.originalValue
+                });
+            });
+            this.targetsUpdated.emit(updates);
+            this.pendingTargetChanges.set(new Map());
+        }
         this.saveTargetsClick.emit();
     }
     onDiscardChanges() {
+        this.pendingTargetChanges.set(new Map());
         this.discardChangesClick.emit();
     }
     saveFooterClasses() {
@@ -61210,7 +61361,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" }, 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, "mt-8", "p-6", "rounded-xl", "border-2", "flex", "flex-col", "sm:flex-row", "items-center", "justify-between", "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"], 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) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -61312,7 +61463,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.hasExistingTargets() ? 41 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasExistingTargets() ? 42 : -1);
+            i0.ɵɵconditional(ctx.hasPendingChanges() ? 42 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("trendChartData", ctx.revenueChartData())("isOpen", ctx.isMetricReportOpen());
             i0.ɵɵadvance();
@@ -61714,10 +61865,10 @@ class InitialTargetSettingComponent {
         />
       }
 
-      @if (hasExistingTargets()) {
-        <div [ngClass]="saveFooterClasses()" class="mt-8 p-6 rounded-xl border-2 flex flex-col sm:flex-row items-center justify-between gap-4">
+      @if (hasPendingChanges()) {
+        <div [ngClass]="saveFooterClasses()" class="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">
           <p [ngClass]="saveFooterTextClasses()" class="text-sm">
-            Edit individual metric targets above, then save your changes.
+            You have unsaved target changes.
           </p>
           <div class="flex items-center gap-3">
             <button
@@ -61725,7 +61876,7 @@ class InitialTargetSettingComponent {
               (click)="onDiscardChanges()"
               [ngClass]="discardButtonClasses()"
               class="px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200">
-              Discard Changes
+              Reset
             </button>
             <button
               type="button"
@@ -61767,7 +61918,7 @@ 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"] }] }); })();
+        }], 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 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {