@eric-emg/symphiq-components 1.2.204 → 1.2.206

package/fesm2022/symphiq-components.mjs

@@ -56226,17 +56226,17 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
 
 const _c0$r = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
-function InitialTargetSettingComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
+function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 10);
-    i0.ɵɵelement(2, "path", 23);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 32);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "div")(4, "p", 12);
+    i0.ɵɵelementStart(3, "div")(4, "p", 15);
     i0.ɵɵtext(5, " Current Pace Projection ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 13);
+    i0.ɵɵelementStart(6, "p", 16);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -56250,14 +56250,14 @@ function InitialTargetSettingComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26)(1, "span", 27);
+    i0.ɵɵelementStart(0, "div", 35)(1, "span", 36);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 28, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_17_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_17_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
+    i0.ɵɵelementStart(3, "input", 37, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_20_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_20_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -56267,13 +56267,13 @@ function InitialTargetSettingComponent_Conditional_17_Conditional_5_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
     i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
 } }
-function InitialTargetSettingComponent_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26)(1, "input", 29, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_17_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_17_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
+    i0.ɵɵelementStart(0, "div", 35)(1, "input", 38, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_20_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_20_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", 30);
+    i0.ɵɵelementStart(3, "span", 39);
     i0.ɵɵtext(4, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56284,17 +56284,17 @@ function InitialTargetSettingComponent_Conditional_17_Conditional_6_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
-function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24)(1, "button", 25);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
+    i0.ɵɵelementStart(0, "div", 33)(1, "button", 34);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_20_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
     i0.ɵɵtext(2, " Absolute Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 25);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_17_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
+    i0.ɵɵelementStart(3, "button", 34);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_20_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
     i0.ɵɵtext(4, " % Increase ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_17_Conditional_5_Template, 5, 3, "div", 26)(6, InitialTargetSettingComponent_Conditional_17_Conditional_6_Template, 5, 3, "div", 26);
+    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_20_Conditional_5_Template, 5, 3, "div", 35)(6, InitialTargetSettingComponent_Conditional_20_Conditional_6_Template, 5, 3, "div", 35);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -56304,30 +56304,45 @@ function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
 } }
-function InitialTargetSettingComponent_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 21);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
+} }
+function InitialTargetSettingComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "p", 40);
+    i0.ɵɵtext(2, " No revenue data available ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
+} }
+function InitialTargetSettingComponent_Conditional_31_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 41);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_20_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_31_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); 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_20_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 37)(2, "span", 38);
+function InitialTargetSettingComponent_Conditional_31_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47)(2, "span", 48);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 39)(5, "div")(6, "p", 33);
+    i0.ɵɵelementStart(4, "div", 49)(5, "div")(6, "p", 43);
     i0.ɵɵtext(7, " Gap to Close ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "p", 40);
+    i0.ɵɵelementStart(8, "p", 50);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div")(11, "p", 33);
+    i0.ɵɵelementStart(10, "div")(11, "p", 43);
     i0.ɵɵtext(12, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "p", 40);
+    i0.ɵɵelementStart(13, "p", 50);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -56350,31 +56365,31 @@ function InitialTargetSettingComponent_Conditional_20_Conditional_24_Template(rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
-function InitialTargetSettingComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16)(1, "div", 31)(2, "div", 32)(3, "div")(4, "p", 33);
+function InitialTargetSettingComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 41)(2, "div", 42)(3, "div")(4, "p", 43);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 34);
+    i0.ɵɵelementStart(6, "p", 44);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_20_Conditional_8_Template, 2, 1, "button", 35);
+    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_31_Conditional_8_Template, 2, 1, "button", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 36)(10, "div", 37)(11, "span", 38);
+    i0.ɵɵelementStart(9, "div", 46)(10, "div", 47)(11, "span", 48);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 39)(14, "div")(15, "p", 33);
+    i0.ɵɵelementStart(13, "div", 49)(14, "div")(15, "p", 43);
     i0.ɵɵtext(16, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "p", 40);
+    i0.ɵɵelementStart(17, "p", 50);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div")(20, "p", 33);
+    i0.ɵɵelementStart(19, "div")(20, "p", 43);
     i0.ɵɵtext(21, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "p", 40);
+    i0.ɵɵelementStart(22, "p", 50);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_20_Conditional_24_Template, 15, 10, "div", 36);
+    i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_31_Conditional_24_Template, 15, 10, "div", 46);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56410,14 +56425,14 @@ function InitialTargetSettingComponent_Conditional_20_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 24 : -1);
 } }
-function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-area-chart", 20);
+function InitialTargetSettingComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 21);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
 } }
-function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "p", 42);
+function InitialTargetSettingComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "p", 40);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56425,14 +56440,14 @@ function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
-function InitialTargetSettingComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 43)(2, "h2", 44);
+function InitialTargetSettingComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 52)(2, "h2", 53);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 42);
+    i0.ɵɵelementStart(4, "p", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 45);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56875,38 +56890,46 @@ 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: 29, vars: 24, 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, "p-6", "rounded-xl", "border-2", "space-y-6", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4"], [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, "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, "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"], [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, "space-y-6"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6", 3, "ngClass"], [1, "absolute", "top-0", "left-1/2", "-translate-x-1/2", "-translate-y-1/2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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: 44, vars: 35, 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, "form-area-collapse"], [1, "form-area-content"], [1, "p-6", "rounded-xl", "border-2", "space-y-6", 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, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "chart-section-collapse"], [1, "chart-section-content"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6", 3, "ngClass"], [1, "absolute", "top-0", "left-1/2", "-translate-x-1/2", "-translate-y-1/2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8)(8, "div", 9);
+            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8)(8, "div", 9)(9, "div", 10)(10, "div", 11)(11, "div", 12);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(9, "svg", 10);
-            i0.ɵɵelement(10, "path", 11);
+            i0.ɵɵelementStart(12, "svg", 13);
+            i0.ɵɵelement(13, "path", 14);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(11, "div")(12, "p", 12);
-            i0.ɵɵtext(13);
+            i0.ɵɵelementStart(14, "div")(15, "p", 15);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "p", 13);
-            i0.ɵɵtext(15);
+            i0.ɵɵelementStart(17, "p", 16);
+            i0.ɵɵtext(18);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(16, InitialTargetSettingComponent_Conditional_16_Template, 8, 4, "div", 9);
+            i0.ɵɵconditionalCreate(19, InitialTargetSettingComponent_Conditional_19_Template, 8, 4, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(17, InitialTargetSettingComponent_Conditional_17_Template, 7, 3);
+            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 7, 3);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(21, "div", 17)(22, "div", 18)(23, "div")(24, "p", 19);
+            i0.ɵɵtext(25, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 14)(19, "div", 15);
-            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 25, 16, "div", 16);
+            i0.ɵɵelementStart(26, "div", 20);
+            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 1, 5, "symphiq-area-chart", 21)(28, InitialTargetSettingComponent_Conditional_28_Template, 3, 1, "div", 22);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(29, "div", 23)(30, "div", 24);
+            i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_31_Template, 25, 16, "div", 25);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(21, "div", 17)(22, "p", 18);
-            i0.ɵɵtext(23, " Year-over-Year Revenue Trend ");
+            i0.ɵɵelementStart(32, "div", 26)(33, "div", 27)(34, "div", 28)(35, "p", 19);
+            i0.ɵɵtext(36, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 19);
-            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 5, "symphiq-area-chart", 20)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 21);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 3);
-            i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 22);
-            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_28_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_28_listener() { return ctx.handleCancel(); });
+            i0.ɵɵelementStart(37, "div", 20);
+            i0.ɵɵconditionalCreate(38, InitialTargetSettingComponent_Conditional_38_Template, 1, 5, "symphiq-area-chart", 21)(39, InitialTargetSettingComponent_Conditional_39_Template, 3, 1, "div", 22);
+            i0.ɵɵelementEnd()()()()()();
+            i0.ɵɵelementStart(40, "div", 29)(41, "div", 30);
+            i0.ɵɵconditionalCreate(42, InitialTargetSettingComponent_Conditional_42_Template, 7, 7, "div", 3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(43, "symphiq-sticky-submit-bar", 31);
+            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_43_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_43_listener() { return ctx.handleCancel(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -56915,7 +56938,9 @@ class InitialTargetSettingComponent {
             i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" Calculate Your ", ctx.currentYear(), " Revenue Target ");
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results");
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.formAreaClasses());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.baselineIconClasses());
@@ -56928,26 +56953,38 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 16 : -1);
+            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 17 : -1);
+            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
+            i0.ɵɵclassProp("chart-in-column-active", ctx.calculationState() === "results");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.chartTitleClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.revenueChartData() ? 27 : 28);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 20 : -1);
+            i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
             i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 31 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("chart-section-collapse-hidden", ctx.calculationState() === "results");
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.chartTitleClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.revenueChartData() ? 25 : 26);
+            i0.ɵɵconditional(ctx.revenueChartData() ? 38 : 39);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("metrics-section-enter-active", ctx.showMetricsVisualization());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 27 : -1);
+            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 42 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
             StickySubmitBarComponent,
-            AreaChartComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
+            AreaChartComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
@@ -56966,89 +57003,122 @@ class InitialTargetSettingComponent {
 
         <div class="flex flex-col gap-8">
           <div class="grid lg:grid-cols-2 gap-8">
-            <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2 space-y-6">
-              <div class="flex flex-wrap gap-4">
-                <div class="flex items-center gap-2">
-                  <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                  </svg>
-                  <div>
-                    <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                      {{ priorYear() }} Revenue
-                    </p>
-                    <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
-                      {{ formatCurrency(priorYearRevenue()) }}
-                    </p>
-                  </div>
-                </div>
-                @if (currentPaceProjection() > 0) {
-                  <div class="flex items-center gap-2">
-                    <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
-                    </svg>
-                    <div>
-                      <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        Current Pace Projection
-                      </p>
-                      <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
-                        {{ formatCurrency(currentPaceProjection()) }}
-                      </p>
+            <div class="flex flex-col gap-4">
+              <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'">
+                <div class="form-area-content">
+                  <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2 space-y-6">
+                    <div class="flex flex-wrap gap-4 place-content-between">
+                      <div class="flex items-center gap-2">
+                        <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                        </svg>
+                        <div>
+                          <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            {{ priorYear() }} Revenue
+                          </p>
+                          <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
+                            {{ formatCurrency(priorYearRevenue()) }}
+                          </p>
+                        </div>
+                      </div>
+                      @if (currentPaceProjection() > 0) {
+                        <div class="flex items-center gap-2">
+                          <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                          </svg>
+                          <div>
+                            <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                              Current Pace Projection
+                            </p>
+                            <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
+                              {{ formatCurrency(currentPaceProjection()) }}
+                            </p>
+                          </div>
+                        </div>
+                      }
                     </div>
-                  </div>
-                }
-              </div>
 
-              @if (calculationState() !== 'results') {
-                <div class="flex gap-2">
-                  <button
-                    (click)="setInputMode('absolute')"
-                    [ngClass]="inputModeButtonClasses('absolute')"
-                    class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                    Absolute Amount
-                  </button>
-                  <button
-                    (click)="setInputMode('percentage')"
-                    [ngClass]="inputModeButtonClasses('percentage')"
-                    class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                    % Increase
-                  </button>
-                </div>
+                    @if (calculationState() !== 'results') {
+                      <div class="flex gap-2">
+                        <button
+                          (click)="setInputMode('absolute')"
+                          [ngClass]="inputModeButtonClasses('absolute')"
+                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                          Absolute Amount
+                        </button>
+                        <button
+                          (click)="setInputMode('percentage')"
+                          [ngClass]="inputModeButtonClasses('percentage')"
+                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                          % Increase
+                        </button>
+                      </div>
 
-                @if (inputMode() === 'absolute') {
-                  <div class="relative">
-                    <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                      $
-                    </span>
-                    <input
-                      #absoluteInputRef
-                      type="number"
-                      [(ngModel)]="absoluteInput"
-                      (ngModelChange)="onAbsoluteInputChange()"
-                      [ngClass]="inputClasses()"
-                      class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                      placeholder="0"
-                      min="0"
-                      step="1000">
+                      @if (inputMode() === 'absolute') {
+                        <div class="relative">
+                          <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                            $
+                          </span>
+                          <input
+                            #absoluteInputRef
+                            type="number"
+                            [(ngModel)]="absoluteInput"
+                            (ngModelChange)="onAbsoluteInputChange()"
+                            [ngClass]="inputClasses()"
+                            class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                            placeholder="0"
+                            min="0"
+                            step="1000">
+                        </div>
+                      } @else {
+                        <div class="relative">
+                          <input
+                            #percentageInputRef
+                            type="number"
+                            [(ngModel)]="percentageInput"
+                            (ngModelChange)="onPercentageInputChange()"
+                            [ngClass]="inputClasses()"
+                            class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                            placeholder="0"
+                            min="0"
+                            max="1000"
+                            step="0.1">
+                          <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                            %
+                          </span>
+                        </div>
+                      }
+                    }
                   </div>
-                } @else {
-                  <div class="relative">
-                    <input
-                      #percentageInputRef
-                      type="number"
-                      [(ngModel)]="percentageInput"
-                      (ngModelChange)="onPercentageInputChange()"
-                      [ngClass]="inputClasses()"
-                      class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                      placeholder="0"
-                      min="0"
-                      max="1000"
-                      step="0.1">
-                    <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                      %
-                    </span>
+                </div>
+              </div>
+
+              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results'">
+                <div class="chart-in-column-content">
+                  <div>
+                    <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+                      Year-over-Year Revenue Trend
+                    </p>
+                    <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+                      @if (revenueChartData()) {
+                        <symphiq-area-chart
+                          [chart]="revenueChartData()!"
+                          [showAxisLabels]="true"
+                          [viewMode]="viewMode()"
+                          [currencySymbol]="'$'"
+                          [height]="'320px'"
+                        />
+                      } @else {
+                        <div class="h-64 flex items-center justify-center">
+                          <p [ngClass]="noDataClasses()" class="text-sm">
+                            No revenue data available
+                          </p>
+                        </div>
+                      }
+                    </div>
                   </div>
-                }
-              }
+                </div>
+              </div>
             </div>
 
             <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
@@ -57135,49 +57205,57 @@ class InitialTargetSettingComponent {
             </div>
           </div>
 
-          <div class="w-full">
-            <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
-              Year-over-Year Revenue Trend
-            </p>
-            <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
-              @if (revenueChartData()) {
-                <symphiq-area-chart
-                  [chart]="revenueChartData()!"
-                  [showAxisLabels]="true"
-                  [viewMode]="viewMode()"
-                  [currencySymbol]="'$'"
-                  [height]="'320px'"
-                />
-              } @else {
-                <div class="h-64 flex items-center justify-center">
-                  <p [ngClass]="noDataClasses()" class="text-sm">
-                    No revenue data available
-                  </p>
+          <div class="chart-section-collapse" [class.chart-section-collapse-hidden]="calculationState() === 'results'">
+            <div class="chart-section-content">
+              <div class="w-full">
+                <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+                  Year-over-Year Revenue Trend
+                </p>
+                <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+                  @if (revenueChartData()) {
+                    <symphiq-area-chart
+                      [chart]="revenueChartData()!"
+                      [showAxisLabels]="true"
+                      [viewMode]="viewMode()"
+                      [currencySymbol]="'$'"
+                      [height]="'320px'"
+                    />
+                  } @else {
+                    <div class="h-64 flex items-center justify-center">
+                      <p [ngClass]="noDataClasses()" class="text-sm">
+                        No revenue data available
+                      </p>
+                    </div>
+                  }
                 </div>
-              }
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      @if (showMetricsVisualization()) {
-        <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-          <div class="mb-6">
-            <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-              Contributing Metrics
-            </h2>
-            <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
-              To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-            </p>
-          </div>
+      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
+        <div class="metrics-section-content">
+          @if (showMetricsVisualization()) {
+            <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+              <div class="mb-6">
+                <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                  Contributing Metrics
+                </h2>
+                <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
+                  To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+                </p>
+              </div>
 
-          <symphiq-funnel-metrics-visualization
-            [viewMode]="viewMode()"
-            [calculations]="displayedMetricCalculations()"
-            [pacingMetrics]="pacingMetrics()"
-          />
+              <symphiq-funnel-metrics-visualization
+                [viewMode]="viewMode()"
+                [calculations]="displayedMetricCalculations()"
+                [pacingMetrics]="pacingMetrics()"
+              />
+            </div>
+          }
         </div>
-      }
+      </div>
 
       <symphiq-sticky-submit-bar
         [viewMode]="viewMode()"
@@ -57190,7 +57268,7 @@ class InitialTargetSettingComponent {
         (cancelClick)="handleCancel()"
       />
     </div>
-  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}\n"] }]
+  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
             args: ['absoluteInputRef']
@@ -57198,7 +57276,7 @@ class InitialTargetSettingComponent {
             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: 299 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 396 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);