@eric-emg/symphiq-components 1.2.212 → 1.2.213

package/fesm2022/symphiq-components.mjs

@@ -56288,10 +56288,10 @@ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf
 } }
 function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "span", 35);
+    i0.ɵɵelementStart(0, "div", 34)(1, "span", 36);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 36, 0);
+    i0.ɵɵelementStart(3, "input", 37, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
@@ -56305,11 +56305,11 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "input", 37, 1);
+    i0.ɵɵelementStart(0, "div", 34)(1, "input", 38, 1);
     i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 38);
+    i0.ɵɵelementStart(3, "span", 39);
     i0.ɵɵtext(4, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56320,6 +56320,17 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
+function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "button", 40);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
+    i0.ɵɵtext(2, " Cancel ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
+} }
 function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
@@ -56331,6 +56342,7 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
     i0.ɵɵtext(4, " % Increase ");
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_22_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_22_Conditional_6_Template, 5, 3, "div", 34);
+    i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_22_Conditional_7_Template, 3, 1, "div", 35);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -56339,6 +56351,8 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngClass", ctx_r0.inputModeButtonClasses("percentage"));
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.hasStoredResponse() ? 7 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 22);
@@ -56347,7 +56361,7 @@ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
 } }
 function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
+    i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56355,40 +56369,52 @@ function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
+function InitialTargetSettingComponent_Conditional_33_Conditional_7_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.calculatedRevenue()), " ");
+} }
 function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
+} }
+function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 52);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
     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_33_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
-    i0.ɵɵelement(2, "div", 46);
-    i0.ɵɵelementStart(3, "span", 47);
+function InitialTargetSettingComponent_Conditional_33_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
+    i0.ɵɵelement(2, "div", 48);
+    i0.ɵɵelementStart(3, "span", 49);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 46);
+    i0.ɵɵelement(5, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 41);
+    i0.ɵɵelementStart(6, "div", 50)(7, "div")(8, "p", 43);
     i0.ɵɵtext(9, " Gap to Close ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 49);
+    i0.ɵɵelementStart(10, "p", 51);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div")(13, "div", 51)(14, "p", 13);
+    i0.ɵɵelementStart(12, "div")(13, "div", 53)(14, "p", 13);
     i0.ɵɵtext(15, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 52);
+    i0.ɵɵelementStart(16, "button", 54);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(17, "svg", 53);
-    i0.ɵɵelement(18, "path", 54);
+    i0.ɵɵelementStart(17, "svg", 55);
+    i0.ɵɵelement(18, "path", 56);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(19, "p", 49);
+    i0.ɵɵelementStart(19, "p", 51);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -56417,34 +56443,34 @@ function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
 function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 40)(3, "div")(4, "p", 41);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 42)(3, "div")(4, "p", 43);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 42);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(6, "p", 44);
+    i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_33_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 2, 1, "button", 43);
+    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_33_Conditional_9_Template, 2, 1, "button", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 44)(10, "div", 45);
-    i0.ɵɵelement(11, "div", 46);
-    i0.ɵɵelementStart(12, "span", 47);
-    i0.ɵɵtext(13);
+    i0.ɵɵelementStart(10, "div", 46)(11, "div", 47);
+    i0.ɵɵelement(12, "div", 48);
+    i0.ɵɵelementStart(13, "span", 49);
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(14, "div", 46);
+    i0.ɵɵelement(15, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 48)(16, "div")(17, "p", 41);
-    i0.ɵɵtext(18, " Increase Amount ");
+    i0.ɵɵelementStart(16, "div", 50)(17, "div")(18, "p", 43);
+    i0.ɵɵtext(19, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "p", 49);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(20, "p", 51);
+    i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div")(22, "p", 41);
-    i0.ɵɵtext(23, " % Growth ");
+    i0.ɵɵelementStart(22, "div")(23, "p", 43);
+    i0.ɵɵtext(24, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "p", 49);
-    i0.ɵɵtext(25);
+    i0.ɵɵelementStart(25, "p", 51);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(26, InitialTargetSettingComponent_Conditional_33_Conditional_26_Template, 21, 13, "div", 44);
+    i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_33_Conditional_27_Template, 21, 13, "div", 46);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56456,9 +56482,9 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.calculationState() === "results" ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 7 : 8);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 9 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
     i0.ɵɵadvance();
@@ -56480,7 +56506,7 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 26 : -1);
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 27 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 22);
@@ -56489,7 +56515,7 @@ function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf,
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
 } }
 function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
+    i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56514,13 +56540,13 @@ function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
 } }
 function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 55)(2, "h2", 56);
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 57)(2, "h2", 58);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 39);
+    i0.ɵɵelementStart(4, "p", 41);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 57);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56544,6 +56570,7 @@ class InitialTargetSettingComponent {
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.reverseCalculationResponse = input(undefined, ...(ngDevMode ? [{ debugName: "reverseCalculationResponse" }] : []));
+        this.targets = input(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : []));
         this.targetsCreated = output();
         this.calculateRevenueRequest = output();
         this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
@@ -56659,6 +56686,9 @@ class InitialTargetSettingComponent {
             return results;
         }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
         this.displayedTargetRevenue = computed(() => {
+            if (this.calculationState() !== 'results') {
+                return this.calculatedRevenue();
+            }
             const response = this.storedResponse();
             if (response && response.targetRevenue) {
                 return response.targetRevenue;
@@ -56824,6 +56854,15 @@ class InitialTargetSettingComponent {
         this.calculationState.set('input');
     }
     handleCancel() {
+        const response = this.storedResponse();
+        if (response && response.targetRevenue) {
+            this.absoluteInput.set(response.targetRevenue);
+            const priorRevenue = this.priorYearRevenue();
+            if (priorRevenue > 0) {
+                const pct = ((response.targetRevenue - priorRevenue) / priorRevenue) * 100;
+                this.percentageInput.set(pct);
+            }
+        }
         this.calculationState.set('results');
     }
     formatCurrency(value) {
@@ -56999,7 +57038,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"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
@@ -57020,7 +57059,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
-            i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 7, 3);
+            i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 8, 4);
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
             i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
@@ -57029,7 +57068,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
-            i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 27, 17, "div", 26);
+            i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 28, 17, "div", 26);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
             i0.ɵɵelementEnd()();
@@ -57198,6 +57237,17 @@ class InitialTargetSettingComponent {
                           </span>
                         </div>
                       }
+
+                      @if (hasStoredResponse()) {
+                        <div class="flex justify-end">
+                          <button
+                            (click)="handleCancel()"
+                            [ngClass]="cancelButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
+                            Cancel
+                          </button>
+                        </div>
+                      }
                     }
                     </div>
                   </div>
@@ -57243,10 +57293,14 @@ class InitialTargetSettingComponent {
                             {{ currentYear() }} Revenue Target
                           </p>
                           <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
-                            {{ formatCurrency(displayedTargetRevenue()) }}
+                            @if (calculationState() === 'results' && targets() === undefined) {
+                              > {{ formatCurrency(calculatedRevenue()) }}
+                            } @else {
+                              {{ formatCurrency(displayedTargetRevenue()) }}
+                            }
                           </p>
                         </div>
-                        @if (calculationState() === 'results') {
+                        @if (calculationState() === 'results' && targets() === undefined) {
                           <button
                             (click)="handleAdjustTarget()"
                             [ngClass]="secondaryButtonClasses()"
@@ -57401,8 +57455,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 }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 418 }); })();
+        }], 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"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 433 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);
@@ -57582,7 +57636,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -57756,7 +57810,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" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -57774,7 +57828,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, 12)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
+            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 13)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -57823,189 +57877,190 @@ class SymphiqRevenueCalculatorDashboardComponent {
                     IndeterminateSpinnerComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar -->
-      <div
-          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-            [style.width.%]="scrollProgress()"
-            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-            class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <!-- Animated Background Bubbles -->
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
-           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-              class="transition-all duration-300 ease-in-out overflow-hidden"
-              [class.max-h-0]="isScrolled()"
-              [class.opacity-0]="isScrolled()"
-              [class.max-h-96]="!isScrolled()"
-              [class.opacity-100]="!isScrolled()">
-            <div
-                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-                [class.pointer-events-none]="isScrolled()"
-                [class.pointer-events-auto]="!isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Revenue Calculator
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Set Your Revenue Target and See Required Metric Improvements
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-              class="transition-all duration-300 ease-in-out overflow-hidden"
-              [class.max-h-0]="!isScrolled()"
-              [class.opacity-0]="!isScrolled()"
-              [class.max-h-20]="isScrolled()"
-              [class.opacity-100]="isScrolled()">
-            <div
-                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-                [class.pointer-events-none]="!isScrolled()"
-                [class.pointer-events-auto]="isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    Revenue Calculator
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-            [viewMode]="viewMode()"
-            [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
-            [showNextStepAction]="hasCurrentYearTargets()"
-            [forDemo]="forDemo()"
-            [maxAccessibleStepId]="maxAccessibleStepId()"
-            (stepClick)="stepClick.emit($event)"
-            (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative">
-          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-
-            <!-- State 1: Pure Loading (isLoading = true) -->
-            @if (isLoading()) {
-              <div class="flex items-center justify-center min-h-[400px]">
-                <symphiq-indeterminate-spinner
-                    [viewMode]="viewMode()"
-                    size="large"
-                />
-              </div>
-            }
-
-            <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
-            @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
-              <symphiq-revenue-calculator-welcome-banner
-                  [viewMode]="viewMode()"
-                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                  [hasTargets]="false"
-              />
-
-              <!-- Loading Message Card -->
-              <div [ngClass]="loadingMessageContainerClasses()"
-                   class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
-                  <div class="flex flex-col items-center text-center space-y-6">
-                    <symphiq-indeterminate-spinner
-                        [viewMode]="viewMode()"
-                        size="large"
-                    />
-                    <div class="space-y-2">
-                      <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
-                        Downloading Your Google Analytics 4 Data
-                      </h3>
-                      <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
-                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a
-                        moment as we gather your funnel data.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            }
-
-            <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
-            @else if (!hasCurrentYearTargets()) {
-              <symphiq-revenue-calculator-welcome-banner
-                  [viewMode]="viewMode()"
-                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                  [hasTargets]="false"
-              />
-
-              <div class="mt-8">
-                <symphiq-initial-target-setting
-                    [viewMode]="viewMode()"
-                    [funnelMetrics]="funnelMetrics() ?? []"
-                    [mainUiData]="mainUiData()"
-                    [trendUiData]="trendUiData()"
-                    [shopId]="shopId()"
-                    [pacingMetrics]="pacingResponse()"
-                    [dataResults]="dataResults()"
-                    [reverseCalculationResponse]="reverseCalculationResponse()"
-                    (targetsCreated)="targetsCreated.emit($event)"
-                    (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
-                />
-              </div>
-            }
-
-            <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
-            @else {
-              <symphiq-revenue-calculator-welcome-banner
-                  [viewMode]="viewMode()"
-                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                  [hasTargets]="true"
-              />
-
-              <!-- Placeholder for Revenue Calculator Content -->
-              <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
-                <div class="text-center space-y-4">
-                  <div class="flex justify-center">
-                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
-                         viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
-                    </svg>
-                  </div>
-                  <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
-                    Revenue Calculator Dashboard
-                  </h3>
-                  <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
-                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be
-                    displayed here.
-                  </p>
-                </div>
-              </div>
-            }
-
-          </div>
-        </main>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar -->
+      <div
+          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+            [style.width.%]="scrollProgress()"
+            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+            class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <!-- Animated Background Bubbles -->
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
+           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <div class="relative z-[51]">
+        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+          <!-- Expanded Header -->
+          <div
+              class="transition-all duration-300 ease-in-out overflow-hidden"
+              [class.max-h-0]="isScrolled()"
+              [class.opacity-0]="isScrolled()"
+              [class.max-h-96]="!isScrolled()"
+              [class.opacity-100]="!isScrolled()">
+            <div
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+                [class.pointer-events-none]="isScrolled()"
+                [class.pointer-events-auto]="!isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    Revenue Calculator
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Set Your Revenue Target and See Required Metric Improvements
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header -->
+          <div
+              class="transition-all duration-300 ease-in-out overflow-hidden"
+              [class.max-h-0]="!isScrolled()"
+              [class.opacity-0]="!isScrolled()"
+              [class.max-h-20]="isScrolled()"
+              [class.opacity-100]="isScrolled()">
+            <div
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+                [class.pointer-events-none]="!isScrolled()"
+                [class.pointer-events-auto]="isScrolled()">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0 mr-4">
+                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    Revenue Calculator
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+            [viewMode]="viewMode()"
+            [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
+            [showNextStepAction]="hasCurrentYearTargets()"
+            [forDemo]="forDemo()"
+            [maxAccessibleStepId]="maxAccessibleStepId()"
+            (stepClick)="stepClick.emit($event)"
+            (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative">
+          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+            <!-- State 1: Pure Loading (isLoading = true) -->
+            @if (isLoading()) {
+              <div class="flex items-center justify-center min-h-[400px]">
+                <symphiq-indeterminate-spinner
+                    [viewMode]="viewMode()"
+                    size="large"
+                />
+              </div>
+            }
+
+            <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
+            @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
+              <symphiq-revenue-calculator-welcome-banner
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="false"
+              />
+
+              <!-- Loading Message Card -->
+              <div [ngClass]="loadingMessageContainerClasses()"
+                   class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
+                  <div class="flex flex-col items-center text-center space-y-6">
+                    <symphiq-indeterminate-spinner
+                        [viewMode]="viewMode()"
+                        size="large"
+                    />
+                    <div class="space-y-2">
+                      <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
+                        Downloading Your Google Analytics 4 Data
+                      </h3>
+                      <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
+                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a
+                        moment as we gather your funnel data.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
+            @else if (!hasCurrentYearTargets()) {
+              <symphiq-revenue-calculator-welcome-banner
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="false"
+              />
+
+              <div class="mt-8">
+                <symphiq-initial-target-setting
+                    [viewMode]="viewMode()"
+                    [funnelMetrics]="funnelMetrics() ?? []"
+                    [mainUiData]="mainUiData()"
+                    [trendUiData]="trendUiData()"
+                    [shopId]="shopId()"
+                    [pacingMetrics]="pacingResponse()"
+                    [dataResults]="dataResults()"
+                    [reverseCalculationResponse]="reverseCalculationResponse()"
+                    [targets]="targets()"
+                    (targetsCreated)="targetsCreated.emit($event)"
+                    (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
+                />
+              </div>
+            }
+
+            <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
+            @else {
+              <symphiq-revenue-calculator-welcome-banner
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="true"
+              />
+
+              <!-- Placeholder for Revenue Calculator Content -->
+              <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
+                <div class="text-center space-y-4">
+                  <div class="flex justify-center">
+                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
+                         viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                    </svg>
+                  </div>
+                  <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
+                    Revenue Calculator Dashboard
+                  </h3>
+                  <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
+                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be
+                    displayed here.
+                  </p>
+                </div>
+              </div>
+            }
+
+          </div>
+        </main>
+      </div>
+    </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"] }], 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: 222 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 223 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);