@eric-emg/symphiq-components 1.2.201 → 1.2.203

package/fesm2022/symphiq-components.mjs

@@ -55403,11 +55403,11 @@ class FunnelMetricsVisualizationComponent {
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 6);
-    i0.ɵɵelement(2, "path", 7);
+    i0.ɵɵelementStart(1, "svg", 8);
+    i0.ɵɵelement(2, "path", 9);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "p", 8);
+    i0.ɵɵelementStart(3, "p", 10);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -55420,11 +55420,11 @@ function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1)
 function StickySubmitBarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 9);
-    i0.ɵɵelement(2, "path", 10);
+    i0.ɵɵelementStart(1, "svg", 11);
+    i0.ɵɵelement(2, "path", 12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "p", 8);
+    i0.ɵɵelementStart(3, "p", 10);
     i0.ɵɵtext(4, " Ready to set your targets ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -55433,22 +55433,32 @@ function StickySubmitBarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("ngClass", ctx_r0.readyMessageClasses());
 } }
 function StickySubmitBarComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function StickySubmitBarComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
+    i0.ɵɵtext(1, " Cancel ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
+} }
+function StickySubmitBarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 11);
-    i0.ɵɵelement(1, "circle", 12)(2, "path", 13);
+    i0.ɵɵelementStart(0, "svg", 14);
+    i0.ɵɵelement(1, "circle", 15)(2, "path", 16);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Setting Targets...");
     i0.ɵɵelementEnd();
 } }
-function StickySubmitBarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function StickySubmitBarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 14);
-    i0.ɵɵelement(3, "path", 15);
+    i0.ɵɵelementStart(2, "svg", 17);
+    i0.ɵɵelement(3, "path", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -55462,7 +55472,9 @@ class StickySubmitBarComponent {
         this.isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.validationMessage = input('', ...(ngDevMode ? [{ debugName: "validationMessage" }] : []));
         this.buttonText = input('Set Revenue Targets', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+        this.showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : []));
         this.submitClick = output();
+        this.cancelClick = output();
     }
     containerClasses() {
         return this.viewMode() === ViewModeEnum.DARK
@@ -55490,28 +55502,40 @@ class StickySubmitBarComponent {
             ? 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-500/30 hover:shadow-purple-500/50'
             : 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-300/50 hover:shadow-purple-400/60';
     }
+    cancelButtonClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700 text-slate-300 border-2 border-slate-600 hover:bg-slate-600'
+            : 'bg-slate-100 text-slate-600 border-2 border-slate-300 hover:bg-slate-200';
+    }
     handleSubmit() {
         if (this.isValid() && !this.isSubmitting()) {
             this.submitClick.emit();
         }
     }
+    handleCancel() {
+        this.cancelClick.emit();
+    }
     static { this.ɵfac = function StickySubmitBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StickySubmitBarComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StickySubmitBarComponent, selectors: [["symphiq-sticky-submit-bar"]], inputs: { viewMode: [1, "viewMode"], isValid: [1, "isValid"], isSubmitting: [1, "isSubmitting"], validationMessage: [1, "validationMessage"], buttonText: [1, "buttonText"] }, outputs: { submitClick: "submitClick" }, decls: 9, vars: 5, consts: [[1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-md", "slide-up", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2"], [1, "px-8", "py-3", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "gap-2", "submit-button-enabled", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-yellow-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-green-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["fill", "none", "viewBox", "0 0 24 24", 1, "animate-spin", "h-5", "w-5"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function StickySubmitBarComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StickySubmitBarComponent, selectors: [["symphiq-sticky-submit-bar"]], inputs: { viewMode: [1, "viewMode"], isValid: [1, "isValid"], isSubmitting: [1, "isSubmitting"], validationMessage: [1, "validationMessage"], buttonText: [1, "buttonText"], showCancelButton: [1, "showCancelButton"] }, outputs: { submitClick: "submitClick", cancelClick: "cancelClick" }, decls: 11, vars: 6, consts: [[1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-md", "slide-up", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2"], [1, "flex", "items-center", "gap-3"], [1, "px-6", "py-3", "rounded-xl", "font-semibold", "text-base", "transition-all", "duration-200", 3, "ngClass"], [1, "px-8", "py-3", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "gap-2", "submit-button-enabled", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-yellow-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "text-sm", "font-medium", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-green-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "px-6", "py-3", "rounded-xl", "font-semibold", "text-base", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "animate-spin", "h-5", "w-5"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function StickySubmitBarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵconditionalCreate(4, StickySubmitBarComponent_Conditional_4_Template, 5, 2, "div", 4)(5, StickySubmitBarComponent_Conditional_5_Template, 5, 1, "div", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 5);
-            i0.ɵɵlistener("click", function StickySubmitBarComponent_Template_button_click_6_listener() { return ctx.handleSubmit(); });
-            i0.ɵɵconditionalCreate(7, StickySubmitBarComponent_Conditional_7_Template, 5, 0)(8, StickySubmitBarComponent_Conditional_8_Template, 4, 1);
-            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(6, "div", 5);
+            i0.ɵɵconditionalCreate(7, StickySubmitBarComponent_Conditional_7_Template, 2, 1, "button", 6);
+            i0.ɵɵelementStart(8, "button", 7);
+            i0.ɵɵlistener("click", function StickySubmitBarComponent_Template_button_click_8_listener() { return ctx.handleSubmit(); });
+            i0.ɵɵconditionalCreate(9, StickySubmitBarComponent_Conditional_9_Template, 5, 0)(10, StickySubmitBarComponent_Conditional_10_Template, 4, 1);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(!ctx.isValid() ? 4 : 5);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.showCancelButton() ? 7 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", !ctx.isValid() || ctx.isSubmitting())("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSubmitting() ? 7 : 8);
+            i0.ɵɵconditional(ctx.isSubmitting() ? 9 : 10);
         } }, dependencies: [CommonModule, i1$1.NgClass], styles: [".slide-up[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slideUp .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes _ngcontent-%COMP%_slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.submit-button-enabled[_ngcontent-%COMP%]{transition:all .2s ease-in-out}.submit-button-enabled[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.submit-button-enabled[_ngcontent-%COMP%]:active{transform:scale(.98)}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StickySubmitBarComponent, [{
@@ -55544,30 +55568,40 @@ class StickySubmitBarComponent {
             }
           </div>
 
-          <button
-            (click)="handleSubmit()"
-            [disabled]="!isValid() || isSubmitting()"
-            [ngClass]="buttonClasses()"
-            class="px-8 py-3 rounded-xl font-bold text-base transition-all duration-200 flex items-center gap-2 submit-button-enabled">
-            @if (isSubmitting()) {
-              <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-              <span>Setting Targets...</span>
-            } @else {
-              <span>{{ buttonText() }}</span>
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-              </svg>
+          <div class="flex items-center gap-3">
+            @if (showCancelButton()) {
+              <button
+                (click)="handleCancel()"
+                [ngClass]="cancelButtonClasses()"
+                class="px-6 py-3 rounded-xl font-semibold text-base transition-all duration-200">
+                Cancel
+              </button>
             }
-          </button>
+            <button
+              (click)="handleSubmit()"
+              [disabled]="!isValid() || isSubmitting()"
+              [ngClass]="buttonClasses()"
+              class="px-8 py-3 rounded-xl font-bold text-base transition-all duration-200 flex items-center gap-2 submit-button-enabled">
+              @if (isSubmitting()) {
+                <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>Setting Targets...</span>
+              } @else {
+                <span>{{ buttonText() }}</span>
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                </svg>
+              }
+            </button>
+          </div>
         </div>
       </div>
     </div>
   `, styles: [".slide-up{animation:slideUp .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.submit-button-enabled{transition:all .2s ease-in-out}.submit-button-enabled:hover{transform:scale(1.02)}.submit-button-enabled:active{transform:scale(.98)}\n"] }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], validationMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessage", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], submitClick: [{ type: i0.Output, args: ["submitClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StickySubmitBarComponent, { className: "StickySubmitBarComponent", filePath: "lib/components/revenue-calculator-dashboard/sticky-submit-bar.component.ts", lineNumber: 89 }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], validationMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessage", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], submitClick: [{ type: i0.Output, args: ["submitClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StickySubmitBarComponent, { className: "StickySubmitBarComponent", filePath: "lib/components/revenue-calculator-dashboard/sticky-submit-bar.component.ts", lineNumber: 99 }); })();
 
 /**
  * Chart Constants
@@ -56192,67 +56226,118 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
 
 const _c0$r = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
-function InitialTargetSettingComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 9);
-    i0.ɵɵtext(1);
+function InitialTargetSettingComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 9);
+    i0.ɵɵelement(2, "path", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "p", 11);
+    i0.ɵɵtext(4, " Current Pace Projection: ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 12);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.priorYearLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Current Pace Projection: ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
+    i0.ɵɵproperty("ngClass", ctx_r0.projectionIconClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.projectionLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.projectionValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "span", 21);
+function InitialTargetSettingComponent_Conditional_16_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 22, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
+    i0.ɵɵelementStart(3, "input", 26, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_16_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_16_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();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.inputPrefixClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
     i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
 } }
-function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "input", 23, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
+function InitialTargetSettingComponent_Conditional_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "input", 27, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_16_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_16_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", 24);
+    i0.ɵɵelementStart(3, "span", 28);
     i0.ɵɵtext(4, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.percentageInput);
     i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
-function InitialTargetSettingComponent_Conditional_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "div")(2, "p", 26);
-    i0.ɵɵtext(3, " Gap to Close ");
+function InitialTargetSettingComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "button", 23);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_16_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(4, "p", 29);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(3, "button", 23);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_16_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.ɵɵelementStart(6, "div")(7, "p", 26);
-    i0.ɵɵtext(8, " Additional Growth Needed ");
+    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_16_Conditional_5_Template, 5, 3, "div", 24)(6, InitialTargetSettingComponent_Conditional_16_Conditional_6_Template, 5, 3, "div", 24);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.inputModeButtonClasses("absolute"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.inputModeButtonClasses("percentage"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
+} }
+function InitialTargetSettingComponent_Conditional_19_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_19_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();
-    i0.ɵɵelementStart(9, "p", 29);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
+} }
+function InitialTargetSettingComponent_Conditional_19_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "span", 36);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 37)(5, "div")(6, "p", 31);
+    i0.ɵɵtext(7, " Gap to Close ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "p", 38);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div")(11, "p", 31);
+    i0.ɵɵtext(12, " Additional Growth Needed ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "p", 38);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " YTD Gap ");
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
@@ -56265,41 +56350,52 @@ function InitialTargetSettingComponent_Conditional_20_Conditional_18_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", 13)(1, "div", 25)(2, "div")(3, "p", 26);
-    i0.ɵɵtext(4);
+function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 29)(2, "div", 30)(3, "div")(4, "p", 31);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 27);
-    i0.ɵɵtext(6);
+    i0.ɵɵelementStart(6, "p", 32);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 28)(8, "div")(9, "p", 26);
-    i0.ɵɵtext(10, " Increase Amount ");
+    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_19_Conditional_8_Template, 2, 1, "button", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "p", 29);
+    i0.ɵɵelementStart(9, "div", 34)(10, "div", 35)(11, "span", 36);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "p", 26);
-    i0.ɵɵtext(15, " % Growth ");
+    i0.ɵɵelementStart(13, "div", 37)(14, "div")(15, "p", 31);
+    i0.ɵɵtext(16, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 29);
-    i0.ɵɵtext(17);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_20_Conditional_18_Template, 11, 8, "div", 28);
+    i0.ɵɵelementStart(17, "p", 38);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div")(20, "p", 31);
+    i0.ɵɵtext(21, " % Growth ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "p", 38);
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_19_Conditional_24_Template, 15, 10, "div", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValuesCardClasses());
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue()), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.calculationState() === "results" ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" vs. ", ctx_r0.priorYear(), " ");
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
@@ -56312,16 +56408,16 @@ function InitialTargetSettingComponent_Conditional_20_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 ? 18 : -1);
+    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", 16);
+function InitialTargetSettingComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 18);
 } 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", 17)(1, "p", 30);
+function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "p", 40);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56329,14 +56425,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", 31)(2, "h2", 32);
+function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 41)(2, "h2", 42);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 30);
+    i0.ɵɵelementStart(4, "p", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 33);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56350,28 +56446,6 @@ function InitialTargetSettingComponent_Conditional_27_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("calculations", ctx_r0.displayedMetricCalculations())("pacingMetrics", ctx_r0.pacingMetrics());
 } }
-function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 34)(2, "button", 35);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_29_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
-    i0.ɵɵtext(3, " Adjust Revenue Target ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
-} }
-function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 34)(2, "button", 35);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_30_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
-    i0.ɵɵtext(3, " Cancel ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
-} }
 class InitialTargetSettingComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -56748,6 +56822,46 @@ class InitialTargetSettingComponent {
             ? 'bg-slate-700 text-slate-300 border-2 border-slate-600 hover:bg-slate-600'
             : 'bg-slate-100 text-slate-600 border-2 border-slate-300 hover:bg-slate-200';
     }
+    baselineMetricsCardClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-800/60 border border-slate-700'
+            : 'bg-slate-50 border border-slate-200';
+    }
+    baselineIconClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-blue-400'
+            : 'text-blue-600';
+    }
+    baselineLabelClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-slate-300'
+            : 'text-slate-700';
+    }
+    baselineValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-blue-300'
+            : 'text-blue-700';
+    }
+    projectionIconClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-emerald-400'
+            : 'text-emerald-600';
+    }
+    projectionLabelClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-slate-300'
+            : 'text-slate-700';
+    }
+    projectionValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-emerald-300'
+            : 'text-emerald-700';
+    }
+    dividerLabelClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-purple-900/60 text-purple-300 border border-purple-500/30'
+            : 'bg-purple-100 text-purple-700 border border-purple-300';
+    }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], viewQuery: function InitialTargetSettingComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$r, 5);
@@ -56756,307 +56870,318 @@ 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: 31, vars: 23, 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, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [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", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [1, "fixed", "bottom-24", "left-0", "right-0", "z-40", "pb-4", "px-4"], [1, "fixed", "bottom-32", "left-0", "right-0", "z-40", "pb-4", "px-4"], [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-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"], [1, "max-w-7xl", "mx-auto", "flex", "gap-4", "justify-center"], [1, "px-6", "py-3", "rounded-xl", "font-semibold", "transition-all", "shadow-lg", 3, "click", "ngClass"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 28, 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, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "p-4", "rounded-lg", "mb-4", "space-y-2", 3, "ngClass"], [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-sm", "font-semibold", 3, "ngClass"], [1, "text-sm", "font-bold", "ml-auto", 3, "ngClass"], [1, "calculated-card-enter"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [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", "mb-4"], [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-4"], [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-4", 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"], [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) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
-            i0.ɵɵtext(3, " Calculate Your Revenue Target ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div")(7, "label", 7);
-            i0.ɵɵtext(8);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 8)(10, "p", 9);
-            i0.ɵɵtext(11);
+            i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(12, InitialTargetSettingComponent_Conditional_12_Template, 2, 2, "p", 9);
+            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div")(7, "div", 7)(8, "div", 8);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(9, "svg", 9);
+            i0.ɵɵelement(10, "path", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "div", 10)(14, "button", 11);
-            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_14_listener() { return ctx.setInputMode("absolute"); });
-            i0.ɵɵtext(15, " Absolute Amount ");
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(11, "p", 11);
+            i0.ɵɵtext(12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 11);
-            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_16_listener() { return ctx.setInputMode("percentage"); });
-            i0.ɵɵtext(17, " % Increase ");
+            i0.ɵɵelementStart(13, "p", 12);
+            i0.ɵɵtext(14);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 5, 3, "div", 12)(19, InitialTargetSettingComponent_Conditional_19_Template, 5, 3, "div", 12);
+            i0.ɵɵconditionalCreate(15, InitialTargetSettingComponent_Conditional_15_Template, 7, 4, "div", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 19, 13, "div", 13);
+            i0.ɵɵconditionalCreate(16, InitialTargetSettingComponent_Conditional_16_Template, 7, 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div")(22, "p", 14);
-            i0.ɵɵtext(23, " Year-over-Year Revenue Trend ");
+            i0.ɵɵelementStart(17, "div", 13)(18, "div", 14);
+            i0.ɵɵconditionalCreate(19, InitialTargetSettingComponent_Conditional_19_Template, 25, 16, "div", 15);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div")(21, "p", 16);
+            i0.ɵɵtext(22, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 15);
-            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 5, "symphiq-area-chart", 16)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 17);
+            i0.ɵɵelementStart(23, "div", 17);
+            i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_24_Template, 1, 5, "symphiq-area-chart", 18)(25, InitialTargetSettingComponent_Conditional_25_Template, 3, 1, "div", 19);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 3);
-            i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 18);
-            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_28_listener() { return ctx.handleSubmitClick(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 4, 1, "div", 19);
-            i0.ɵɵconditionalCreate(30, InitialTargetSettingComponent_Conditional_30_Template, 4, 1, "div", 20);
-            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(26, InitialTargetSettingComponent_Conditional_26_Template, 7, 7, "div", 3);
+            i0.ɵɵelementStart(27, "symphiq-sticky-submit-bar", 20);
+            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_27_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_27_listener() { return ctx.handleCancel(); });
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.sectionCardClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.currentYear(), " Revenue ");
+            i0.ɵɵtextInterpolate1(" Calculate Your ", ctx.currentYear(), " Revenue Target ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.baselineMetricsCardClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.baselineIconClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.priorYearLabelClasses());
+            i0.ɵɵproperty("ngClass", ctx.baselineLabelClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate2(" ", ctx.priorYear(), " Revenue: ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.priorYear(), " Revenue: ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 12 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.inputModeButtonClasses("absolute"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.inputModeButtonClasses("percentage"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.inputMode() === "absolute" ? 18 : 19);
+            i0.ɵɵproperty("ngClass", ctx.baselineValueClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 20 : -1);
+            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 19 : -1);
             i0.ɵɵadvance(2);
             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() ? 24 : 25);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 27 : -1);
+            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.calculationState() === "results" ? 29 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.calculationState() === "input" && ctx.hasStoredResponse() ? 30 : -1);
+            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], encapsulation: 2, 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}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
-        args: [{
-                selector: 'symphiq-initial-target-setting',
-                standalone: true,
-                imports: [
+        args: [{ selector: 'symphiq-initial-target-setting', standalone: true, imports: [
                     CommonModule,
                     FormsModule,
                     FunnelMetricsVisualizationComponent,
                     StickySubmitBarComponent,
                     AreaChartComponent
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-8 pb-32">
-      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
-          Calculate Your Revenue Target
-        </h2>
-
-        <div class="grid lg:grid-cols-2 gap-8">
-          <div class="space-y-6">
-            <div>
-              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                {{ currentYear() }} Revenue
-              </label>
-              <div class="space-y-1 mb-4">
-                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
-                </p>
-                @if (currentPaceProjection() > 0) {
-                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
-                  </p>
-                }
-              </div>
-
-              <div class="flex gap-2 mb-4">
-                <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">
-                </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>
-
-            @if (calculatedRevenue() > 0) {
-              <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
-                <div class="space-y-4">
-                  <div>
-                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                      {{ currentYear() }} Revenue Target
-                    </p>
-                    <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
-                      {{ formatCurrency(calculatedRevenue()) }}
-                    </p>
-                  </div>
-                  <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        Increase Amount
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
-                      </p>
-                    </div>
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        % Growth
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        +{{ formatPercentage(percentageIncrease(), 1) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
-                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Gap to Close
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ formatCurrency(absValue(gapToClose().amount)) }}
-                        </p>
-                      </div>
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Additional Growth Needed
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-
-          <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>
-
-      @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()"
-          />
-        </div>
-      }
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isCalculating()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="submitButtonText()"
-        (submitClick)="handleSubmitClick()"
-      />
-
-      @if (calculationState() === 'results') {
-        <div class="fixed bottom-24 left-0 right-0 z-40 pb-4 px-4">
-          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
-            <button
-              (click)="handleAdjustTarget()"
-              [ngClass]="secondaryButtonClasses()"
-              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
-              Adjust Revenue Target
-            </button>
-          </div>
-        </div>
-      }
-
-      @if (calculationState() === 'input' && hasStoredResponse()) {
-        <div class="fixed bottom-32 left-0 right-0 z-40 pb-4 px-4">
-          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
-            <button
-              (click)="handleCancel()"
-              [ngClass]="cancelButtonClasses()"
-              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
-              Cancel
-            </button>
-          </div>
-        </div>
-      }
-    </div>
-  `
-            }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="space-y-8 pb-32">
+      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
+          Calculate Your {{ currentYear() }} Revenue Target
+        </h2>
+
+        <div class="grid lg:grid-cols-2 gap-8">
+          <div class="space-y-6">
+            <div>
+              <div [ngClass]="baselineMetricsCardClasses()" class="p-4 rounded-lg mb-4 space-y-2">
+                <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>
+                  <p [ngClass]="baselineLabelClasses()" class="text-sm font-semibold">
+                    {{ priorYear() }} Revenue:
+                  </p>
+                  <p [ngClass]="baselineValueClasses()" class="text-sm font-bold ml-auto">
+                    {{ formatCurrency(priorYearRevenue()) }}
+                  </p>
+                </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>
+                    <p [ngClass]="projectionLabelClasses()" class="text-sm font-semibold">
+                      Current Pace Projection:
+                    </p>
+                    <p [ngClass]="projectionValueClasses()" class="text-sm font-bold ml-auto">
+                      {{ formatCurrency(currentPaceProjection()) }}
+                    </p>
+                  </div>
+                }
+              </div>
+
+              @if (calculationState() !== 'results') {
+                <div class="flex gap-2 mb-4">
+                  <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">
+                  </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="calculated-card-enter" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
+              <div class="calculated-card-content">
+                @if (calculatedRevenue() > 0) {
+                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
+                    <div class="space-y-4">
+                      <div class="flex items-center justify-between">
+                        <div>
+                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                            {{ currentYear() }} Revenue Target
+                          </p>
+                          <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
+                            {{ formatCurrency(displayedTargetRevenue()) }}
+                          </p>
+                        </div>
+                        @if (calculationState() === 'results') {
+                          <button
+                            (click)="handleAdjustTarget()"
+                            [ngClass]="secondaryButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
+                            Adjust Revenue Target
+                          </button>
+                        }
+                      </div>
+
+                      <div class="relative pt-4" [ngClass]="calculatedDividerClasses()">
+                        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                          <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                            vs. {{ priorYear() }}
+                          </span>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                          <div>
+                            <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                              Increase Amount
+                            </p>
+                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                              {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
+                            </p>
+                          </div>
+                          <div>
+                            <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                              % Growth
+                            </p>
+                            <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                              +{{ formatPercentage(percentageIncrease(), 1) }}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
+                        <div class="relative pt-4" [ngClass]="calculatedDividerClasses()">
+                          <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                            <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                              {{ currentYear() }} YTD Gap
+                            </span>
+                          </div>
+                          <div class="grid grid-cols-2 gap-4">
+                            <div>
+                              <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                                Gap to Close
+                              </p>
+                              <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                {{ formatCurrency(absValue(gapToClose().amount)) }}
+                              </p>
+                            </div>
+                            <div>
+                              <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                                Additional Growth Needed
+                              </p>
+                              <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <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>
+
+      @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()"
+          />
+        </div>
+      }
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isCalculating()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="submitButtonText()"
+        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
+        (submitClick)="handleSubmitClick()"
+        (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"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
             args: ['absoluteInputRef']
@@ -57064,7 +57189,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: 259 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 295 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);