@eric-emg/symphiq-components 1.2.225 → 1.2.227

package/fesm2022/symphiq-components.mjs

@@ -54722,6 +54722,16 @@ function formatPacingDisplay(pacingPercentage) {
     }
     return `${sign}${formatted}% behind`;
 }
+function formatPacingDisplayFullText(pacingPercentage, status) {
+    const formatted = Math.abs(pacingPercentage).toFixed(1);
+    if (status === 'ahead') {
+        return `Pacing at ${formatted}% above target`;
+    }
+    if (status === 'on-pace') {
+        return `Pacing on target`;
+    }
+    return `Pacing at ${formatted}% below target`;
+}
 function calculateGapToTarget(projectedValue, targetValue) {
     const amount = targetValue - projectedValue;
     const percentage = projectedValue > 0 ? (amount / projectedValue) * 100 : 0;
@@ -54789,6 +54799,8 @@ class PacingStatusBadgeComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.pacingPercentage = input(0, ...(ngDevMode ? [{ debugName: "pacingPercentage" }] : []));
         this.status = input('on-pace', ...(ngDevMode ? [{ debugName: "status" }] : []));
+        this.showAsFullText = input(false, ...(ngDevMode ? [{ debugName: "showAsFullText" }] : []));
+        this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
         this.displayInfo = computed(() => {
             const isDark = this.viewMode() === ViewModeEnum.DARK;
             return getPacingDisplayInfo(this.pacingPercentage(), this.status(), isDark);
@@ -54797,9 +54809,20 @@ class PacingStatusBadgeComponent {
             const info = this.displayInfo();
             return `${info.bgClass} ${info.colorClass} ${info.borderClass}`;
         }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+        this.sizeClasses = computed(() => {
+            const isCompact = this.isCompact();
+            const baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-semibold transition-all';
+            if (isCompact) {
+                return `${baseClasses} px-2.5 py-1 text-xs`;
+            }
+            return `${baseClasses} px-3 py-1.5 text-xs`;
+        }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
         this.iconClasses = computed(() => {
             return this.displayInfo().colorClass;
         }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+        this.iconSizeClasses = computed(() => {
+            return this.isCompact() ? 'text-sm' : 'text-base';
+        }, ...(ngDevMode ? [{ debugName: "iconSizeClasses" }] : []));
         this.iconSymbol = computed(() => {
             const status = this.status();
             if (status === 'ahead')
@@ -54809,20 +54832,25 @@ class PacingStatusBadgeComponent {
             return '→';
         }, ...(ngDevMode ? [{ debugName: "iconSymbol" }] : []));
         this.displayText = computed(() => {
+            if (this.showAsFullText()) {
+                return formatPacingDisplayFullText(this.pacingPercentage(), this.status());
+            }
             return this.displayInfo().displayText;
         }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
     }
     static { this.ɵfac = function PacingStatusBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PacingStatusBadgeComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"] }, decls: 5, vars: 4, consts: [[1, "inline-flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "border", "font-semibold", "text-sm", "transition-all", 3, "ngClass"], [1, "text-lg", 3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"], showAsFullText: [1, "showAsFullText"], isCompact: [1, "isCompact"] }, decls: 5, vars: 8, consts: [[3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 0);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "span");
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.sizeClasses());
             i0.ɵɵproperty("ngClass", ctx.badgeClasses());
             i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.iconSizeClasses());
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.iconSymbol(), " ");
@@ -54840,16 +54868,16 @@ class PacingStatusBadgeComponent {
                 template: `
     <div
       [ngClass]="badgeClasses()"
-      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border font-semibold text-sm transition-all"
+      [class]="sizeClasses()"
     >
-      <span [ngClass]="iconClasses()" class="text-lg">
+      <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
         {{ iconSymbol() }}
       </span>
       <span>{{ displayText() }}</span>
     </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAsFullText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsFullText", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 23 }); })();
 
 const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
@@ -54857,124 +54885,134 @@ const _forTrack1$3 = ($index, $item) => $item.calc.metric;
 function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 14);
-    i0.ɵɵelement(2, "path", 15);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
-} if (rf & 2) {
-    const stage_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status);
-} }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 12);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 9);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 13);
+    i0.ɵɵelementStart(3, "p", 11);
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 15);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Projected ");
+    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r1.currentYear(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric, false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status)("showAsFullText", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 24);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 23);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 29);
-    i0.ɵɵelement(2, "path", 15);
+    i0.ɵɵelement(2, "path", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.calc.description, ctx_r1.getMetricTitle(metric_r3.calc)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
-} if (rf & 2) {
-    const metric_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status);
-} }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 28);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 25);
     i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 27);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 30);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric, false));
+    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r1.currentYear(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedProjectedValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric, false), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status)("showAsFullText", true)("isCompact", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "div", 22)(3, "p", 23);
-    i0.ɵɵtext(4);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template, 3, 2, "button", 24);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_4_Template, 3, 2, "button", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 25);
-    i0.ɵɵconditionalCreate(7, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_7_Template, 1, 3, "symphiq-pacing-status-badge", 9);
-    i0.ɵɵelementStart(8, "span", 26);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "div", 27)(11, "div")(12, "p", 28);
-    i0.ɵɵtext(13);
+    i0.ɵɵelementStart(5, "div", 24)(6, "div")(7, "p", 25);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 26);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_14_Template, 3, 2, "div");
-    i0.ɵɵelementStart(15, "div")(16, "p", 28);
+    i0.ɵɵelementStart(11, "div")(12, "p", 25);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "p", 27);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 28);
     i0.ɵɵtext(17);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(18, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_18_Template, 6, 9, "div");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricCardClasses());
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricNameClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(metric_r3.calc), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.calc.description ? 5 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 7 : -1);
+    i0.ɵɵconditional(metric_r3.calc.description ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYear(), " Actual ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(metric_r3.calc.metric), "", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r3.calc.percentageIncrease), 1), " ");
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", metric_r3.pacingInfo ? "grid-cols-3" : "grid-cols-2");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.currentValue, metric_r3.calc.metric), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", ctx_r1.priorYear(), ": ", ctx_r1.formatMetricValue(metric_r3.calc.currentValue, metric_r3.calc.metric));
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Target ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedTargetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 14 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false));
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTargetIncreaseText(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 18 : -1);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 16);
     i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 15, "div", 20, _forTrack1$3);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Template, 19, 15, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -54990,26 +55028,25 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(6, FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template, 3, 2, "button", 7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 8);
-    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_4_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 9);
-    i0.ɵɵelementStart(9, "div", 10);
-    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 11)(12, "div")(13, "p", 12);
-    i0.ɵɵtext(14);
+    i0.ɵɵelementStart(7, "div", 8)(8, "div")(9, "p", 9);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "p", 13);
-    i0.ɵɵtext(16);
+    i0.ɵɵelementStart(11, "p", 10);
+    i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template, 5, 4, "div");
-    i0.ɵɵelementStart(18, "div")(19, "p", 12);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(13, "div")(14, "p", 9);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "p", 13);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template, 7, 2);
+    i0.ɵɵelementStart(16, "p", 11);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 12);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(20, FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template, 6, 8, "div");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = ctx.$implicit;
@@ -55021,12 +55058,6 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(stage_r1.stageMetric), " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(stage_r1.stageMetric.description ? 6 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 8 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(stage_r1.stageMetric.metric), "", ctx_r1.formatPercentage(ctx_r1.Math.abs(stage_r1.stageMetric.percentageIncrease), 1), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -55035,8 +55066,6 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.currentValue, stage_r1.stageMetric.metric), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 17 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -55046,7 +55075,13 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 23 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTargetIncreaseText(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 20 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 21 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
@@ -55153,17 +55188,37 @@ class FunnelMetricsVisualizationComponent {
     }
     relatedPercentageBadgeClasses() {
         return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-purple-900/50 text-purple-300'
-            : 'bg-purple-50 text-purple-700';
+            ? 'bg-purple-800/60 text-purple-200'
+            : 'bg-purple-50 text-purple-800 border border-purple-200';
     }
     relatedLabelClasses() {
         return this.viewMode() === ViewModeEnum.DARK
-            ? 'text-slate-400'
-            : 'text-slate-600';
+            ? 'text-slate-300'
+            : 'text-slate-700';
+    }
+    relatedValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-white'
+            : 'text-slate-950';
+    }
+    relatedTargetValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-purple-200'
+            : 'text-purple-800';
+    }
+    relatedProjectedValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-amber-200'
+            : 'text-amber-800';
     }
     formatPercentage(value, decimals) {
         return formatPercentage(value, decimals);
     }
+    getTargetIncreaseText(percentageIncrease, metric) {
+        const sign = MetricEnumUtil.increaseBad(metric) ? '' : '+';
+        const absValue = Math.abs(percentageIncrease);
+        return `${sign}${formatPercentage(absValue, 1)} increase over ${this.priorYear()}`;
+    }
     formatMetricValue(value, metric, fromUiData = true) {
         if (metric.includes('REVENUE')) {
             return formatCurrency(value);
@@ -55193,11 +55248,11 @@ class FunnelMetricsVisualizationComponent {
         return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
     }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-2", "flex-1"], [1, "text-sm", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "px-3", "py-1.5", "rounded-lg", "font-semibold", "text-xs", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-xs", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded", "text-xs", "font-semibold", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 18, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 22, 16, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55211,144 +55266,152 @@ class FunnelMetricsVisualizationComponent {
                 standalone: true,
                 imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <symphiq-tooltip-container />
-      <div class="space-y-8">
-        @for (stage of funnelStages(); track stage.stageMetric.metric) {
-          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
-            <div class="flex items-start justify-between mb-4">
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
-                    {{ getMetricTitle(stage.stageMetric) }}
-                  </h3>
-                  @if (stage.stageMetric.description) {
-                    <button
-                      type="button"
-                      [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
-                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
-                      tooltipType="markdown"
-                      tooltipPosition="right">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-              <div class="flex items-center gap-3">
-                @if (stage.pacingInfo) {
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                  />
-                }
-                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
-                  {{ getGrowthSign(stage.stageMetric.metric) }}{{ formatPercentage(Math.abs(stage.stageMetric.percentageIncrease), 1) }}
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-3 gap-4 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                    {{ currentYear() }} Projected
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
-                  </p>
-                </div>
-              }
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
-                </p>
-              </div>
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-2">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-2">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
-                      <div class="flex items-center justify-between mb-2">
-                        <div class="flex items-center gap-2 flex-1">
-                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
-                            {{ getMetricTitle(metric.calc) }}
-                          </p>
-                          @if (metric.calc.description) {
-                            <button
-                              type="button"
-                              [ngClass]="infoIconClasses()"
-                              class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                              [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
-                              tooltipType="markdown"
-                              tooltipPosition="right">
-                              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                              </svg>
-                            </button>
-                          }
-                        </div>
-                        <div class="flex items-center gap-2">
-                          @if (metric.pacingInfo) {
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                            />
-                          }
-                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
-                            {{ getGrowthSign(metric.calc.metric) }}{{ formatPercentage(Math.abs(metric.calc.percentageIncrease), 1) }}
-                          </span>
-                        </div>
-                      </div>
-                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
-                          </div>
-                        }
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div class="space-y-6">
+      <symphiq-tooltip-container />
+      <div class="space-y-8">
+        @for (stage of funnelStages(); track stage.stageMetric.metric) {
+          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
+            <div class="flex items-start justify-between mb-6">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
+                    {{ getMetricTitle(stage.stageMetric) }}
+                  </h3>
+                  @if (stage.stageMetric.description) {
+                    <button
+                      type="button"
+                      [ngClass]="infoIconClasses()"
+                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
+                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
+                      tooltipType="markdown"
+                      tooltipPosition="right">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 gap-6 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
+                </p>
+                <div [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-xs inline-block">
+                  {{ getTargetIncreaseText(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
+                </div>
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Pace for {{ currentYear() }}
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
+                  </p>
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                    [showAsFullText]="true"
+                  />
+                </div>
+              }
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-3">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-3">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
+                      <div class="flex items-center gap-2 mb-4">
+                        <p [ngClass]="relatedMetricNameClasses()" class="text-xs font-semibold leading-tight">
+                          {{ getMetricTitle(metric.calc) }}
+                        </p>
+                        @if (metric.calc.description) {
+                          <button
+                            type="button"
+                            [ngClass]="infoIconClasses()"
+                            class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                            [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
+                            tooltipType="markdown"
+                            tooltipPosition="right">
+                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                          </button>
+                        }
+                      </div>
+                      <div class="grid grid-cols-3 gap-4">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ priorYear() }} Actual
+                          </p>
+                          <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
+                            {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
+                          </p>
+                        </div>
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ currentYear() }} Target
+                          </p>
+                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
+                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
+                          </p>
+                          <div [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1 rounded text-xs font-semibold inline-block">
+                            {{ getTargetIncreaseText(metric.calc.percentageIncrease, metric.calc.metric) }}
+                          </div>
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                              Pace for {{ currentYear() }}
+                            </p>
+                            <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
+                              {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
+                            </p>
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                              [showAsFullText]="true"
+                              [isCompact]="true"
+                            />
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 152 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 160 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -56355,6 +56418,24 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
 function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " -- ");
 } }
+function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedGapAmount()), " ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " -- ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.animatedGapPercentage(), 1), " ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " -- ");
+} }
 function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
@@ -56368,20 +56449,20 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf
     i0.ɵɵtext(9, " Gap to Close ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "p", 62);
-    i0.ɵɵtext(11);
+    i0.ɵɵconditionalCreate(11, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_11_Template, 1, 1)(12, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_12_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div")(13, "div", 64)(14, "p", 14);
-    i0.ɵɵtext(15, " Additional Growth Needed ");
+    i0.ɵɵelementStart(13, "div")(14, "div", 64)(15, "p", 14);
+    i0.ɵɵtext(16, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 37);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(17, "button", 37);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(17, "svg", 38);
-    i0.ɵɵelement(18, "path", 39);
+    i0.ɵɵelementStart(18, "svg", 38);
+    i0.ɵɵelement(19, "path", 39);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(19, "p", 62);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(20, "p", 62);
+    i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_21_Template, 1, 2)(22, InitialTargetSettingComponent_Conditional_36_Conditional_31_Conditional_22_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -56398,15 +56479,15 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedGapAmount()), " ");
-    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 11 : 12);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.infoIconClasses())("libSymphiqTooltip", ctx_r0.additionalGrowthTooltip);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.animatedGapPercentage(), 1), " ");
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 21 : 22);
 } }
 function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 50)(1, "div")(2, "div", 51)(3, "div")(4, "p", 14);
@@ -56436,7 +56517,7 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(28, "p", 62);
     i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 1)(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 21, 13, "div", 56);
+    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 23, 12, "div", 56);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56447,7 +56528,7 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("text-3xl", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded())("text-lg", ctx_r0.calculationState() === "results" && !ctx_r0.detailsExpanded());
+    i0.ɵɵclassProp("lg:text-3xl", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined && ctx_r0.submittedAbsoluteInput() !== null ? 7 : 8);
@@ -56476,7 +56557,7 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isTargetValid() ? 29 : 30);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 && ctx_r0.isTargetValid() ? 31 : -1);
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 ? 31 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 23);
@@ -57077,7 +57158,7 @@ class InitialTargetSettingComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 42, vars: 44, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 42, vars: 44, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -57113,7 +57194,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 23)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 24);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(34, "div", 25)(35, "div", 26);
-            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 25, "div", 27);
+            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 23, "div", 27);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 6, 3, "div", 28);
             i0.ɵɵelementEnd()();
@@ -57126,7 +57207,7 @@ class InitialTargetSettingComponent {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("top", ctx.calculationState() === "results" ? "148px" : "auto");
-            i0.ɵɵclassProp("cursor-pointer", ctx.calculationState() === "results")("sticky", ctx.calculationState() === "results")("z-30", ctx.calculationState() === "results");
+            i0.ɵɵclassProp("cursor-pointer", ctx.calculationState() === "results")("lg:sticky", ctx.calculationState() === "results")("z-30", ctx.calculationState() === "results");
             i0.ɵɵproperty("ngClass", ctx.sectionCardClasses(true));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
@@ -57194,7 +57275,7 @@ class InitialTargetSettingComponent {
       <symphiq-tooltip-container />
       <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
            [class.cursor-pointer]="calculationState() === 'results'"
-           [class.sticky]="calculationState() === 'results'"
+           [class.lg:sticky]="calculationState() === 'results'"
            [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
            [class.z-30]="calculationState() === 'results'"
            (click)="onCardClick()">
@@ -57377,9 +57458,8 @@ class InitialTargetSettingComponent {
                           <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
                             {{ currentYear() }} Revenue Target
                           </p>
-                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300"
-                            [class.text-3xl]="calculationState() !== 'results' || detailsExpanded()"
-                            [class.text-lg]="calculationState() === 'results' && !detailsExpanded()">
+                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
+                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
                             @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
                               > {{ formatCurrency(submittedAbsoluteInput()!) }}
                             } @else {
@@ -57435,7 +57515,7 @@ class InitialTargetSettingComponent {
                             </div>
                           </div>
 
-                          @if (currentPaceProjection() > 0 && gapToClose().amount !== 0 && isTargetValid()) {
+                          @if (currentPaceProjection() > 0) {
                             <div class="relative pt-6 mt-6">
                               <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
                                 <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
@@ -57450,7 +57530,11 @@ class InitialTargetSettingComponent {
                                     Gap to Close
                                   </p>
                                   <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    {{ formatCurrency(animatedGapAmount()) }}
+                                    @if (isTargetValid()) {
+                                      {{ formatCurrency(animatedGapAmount()) }}
+                                    } @else {
+                                      --
+                                    }
                                   </p>
                                 </div>
                                 <div>
@@ -57472,7 +57556,11 @@ class InitialTargetSettingComponent {
                                     </button>
                                   </div>
                                   <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                    @if (isTargetValid()) {
+                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                    } @else {
+                                      --
+                                    }
                                   </p>
                                 </div>
                               </div>
@@ -57561,7 +57649,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 }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 513 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 520 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);