@eric-emg/symphiq-components 1.2.250 → 1.2.252

package/fesm2022/symphiq-components.mjs

@@ -54818,6 +54818,7 @@ function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r0.containerSizeClasses());
+    i0.ɵɵstyleProp("transform", ctx_r0.rotationStyle());
     i0.ɵɵproperty("ngClass", ctx_r0.containerClasses());
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.overlaySizeClasses());
@@ -54844,6 +54845,7 @@ function PacingStatusBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r0.fullBadgeSizeClasses());
+    i0.ɵɵstyleProp("transform", ctx_r0.fullBadgeRotationStyle());
     i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.iconSizeClasses());
@@ -54854,7 +54856,8 @@ function PacingStatusBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtextInterpolate(ctx_r0.displayText());
 } }
 class PacingStatusBadgeComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.pacingPercentage = input(0, ...(ngDevMode ? [{ debugName: "pacingPercentage" }] : []));
         this.status = input('on-pace', ...(ngDevMode ? [{ debugName: "status" }] : []));
@@ -54862,6 +54865,9 @@ class PacingStatusBadgeComponent {
         this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
         this.showEmphasizedPercentage = input(false, ...(ngDevMode ? [{ debugName: "showEmphasizedPercentage" }] : []));
         this.animatedValue = signal(0, ...(ngDevMode ? [{ debugName: "animatedValue" }] : []));
+        this.animationProgress = signal(0, ...(ngDevMode ? [{ debugName: "animationProgress" }] : []));
+        this.hasAnimated = signal(false, ...(ngDevMode ? [{ debugName: "hasAnimated" }] : []));
+        this.observer = null;
         this.displayInfo = computed(() => {
             const isDark = this.viewMode() === ViewModeEnum.DARK;
             return getPacingDisplayInfo(this.pacingPercentage(), this.status(), isDark);
@@ -54870,14 +54876,24 @@ class PacingStatusBadgeComponent {
             const info = this.displayInfo();
             return `${info.bgClass} ${info.borderClass} border`;
         }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+        this.targetRotation = computed(() => {
+            const status = this.status();
+            return status === 'ahead' ? -1 : status === 'behind' ? 1 : 0;
+        }, ...(ngDevMode ? [{ debugName: "targetRotation" }] : []));
+        this.rotationStyle = computed(() => {
+            const target = this.targetRotation();
+            return `rotate(${target}deg)`;
+        }, ...(ngDevMode ? [{ debugName: "rotationStyle" }] : []));
+        this.fullBadgeRotationStyle = computed(() => {
+            const target = this.targetRotation();
+            return `rotate(${target}deg)`;
+        }, ...(ngDevMode ? [{ debugName: "fullBadgeRotationStyle" }] : []));
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
-            const status = this.status();
-            const tiltClass = status === 'ahead' ? '-rotate-1' : status === 'behind' ? 'rotate-1' : '';
             const baseClasses = 'inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0';
             return compact
-                ? `${baseClasses} pl-1.5 ${tiltClass}`
-                : `${baseClasses} pl-2 ${tiltClass}`;
+                ? `${baseClasses} pl-1.5`
+                : `${baseClasses} pl-2`;
         }, ...(ngDevMode ? [{ debugName: "containerSizeClasses" }] : []));
         this.badgeClasses = computed(() => {
             const info = this.displayInfo();
@@ -54893,9 +54909,7 @@ class PacingStatusBadgeComponent {
         }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
         this.fullBadgeSizeClasses = computed(() => {
             const isCompact = this.isCompact();
-            const status = this.status();
-            const tiltClass = status === 'ahead' ? '-rotate-1' : status === 'behind' ? 'rotate-1' : '';
-            const baseClasses = `inline-flex items-center gap-1.5 rounded-xl border-2 font-bold tracking-wide shadow-md transition-all hover:rotate-0 ${tiltClass}`;
+            const baseClasses = 'inline-flex items-center gap-1.5 rounded-xl border-2 font-bold tracking-wide shadow-md transition-all hover:rotate-0';
             if (isCompact) {
                 return `${baseClasses} px-2.5 py-1 text-xs`;
             }
@@ -54964,14 +54978,34 @@ class PacingStatusBadgeComponent {
         this.overlaySizeClasses = computed(() => {
             const compact = this.isCompact();
             return compact
-                ? 'px-2 py-1.5 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-0.5'
-                : 'px-2.5 py-2 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1';
+                ? 'px-2 py-1.5 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-0.5 tabular-nums'
+                : 'px-2.5 py-2 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1 tabular-nums';
         }, ...(ngDevMode ? [{ debugName: "overlaySizeClasses" }] : []));
+        this.setupIntersectionObserver();
         effect(() => {
             const target = Math.abs(this.pacingPercentage());
-            this.animateValue(target);
+            if (this.hasAnimated()) {
+                this.animateValue(target);
+            }
         });
     }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    setupIntersectionObserver() {
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.hasAnimated()) {
+                    this.hasAnimated.set(true);
+                    const target = Math.abs(this.pacingPercentage());
+                    this.animateValue(target);
+                }
+            });
+        }, { threshold: 0.1 });
+        this.observer.observe(this.elementRef.nativeElement);
+    }
     animateValue(target) {
         const start = 0;
         const duration = 800;
@@ -54982,15 +55016,16 @@ class PacingStatusBadgeComponent {
             const easeOutQuart = 1 - Math.pow(1 - progress, 4);
             const current = start + (target - start) * easeOutQuart;
             this.animatedValue.set(current);
+            this.animationProgress.set(progress);
             if (progress < 1) {
                 requestAnimationFrame(animate);
             }
         };
         requestAnimationFrame(animate);
     }
-    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"], showAsFullText: [1, "showAsFullText"], isCompact: [1, "isCompact"], showEmphasizedPercentage: [1, "showEmphasizedPercentage"] }, decls: 2, vars: 1, consts: [[3, "ngClass", "class"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8, 14, "div", 0)(1, PacingStatusBadgeComponent_Conditional_1_Template, 5, 8, "div", 0);
+    static { this.ɵfac = function PacingStatusBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PacingStatusBadgeComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
+    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"], showEmphasizedPercentage: [1, "showEmphasizedPercentage"] }, decls: 2, vars: 1, consts: [[3, "ngClass", "class", "transform"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8, 16, "div", 0)(1, PacingStatusBadgeComponent_Conditional_1_Template, 5, 10, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.showEmphasizedPercentage() && ctx.hasPercentage() ? 0 : 1);
         } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
@@ -55002,46 +55037,55 @@ class PacingStatusBadgeComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    @if (showEmphasizedPercentage() && hasPercentage()) {
-      <div [ngClass]="containerClasses()" [class]="containerSizeClasses()">
-        <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
-          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-            {{ iconSymbol() }}
-          </span>
-          {{ animatedPercentage() }}
-        </div>
-        <div
-          [class]="sizeClasses()"
-        >
-          <span>{{ displayTextWithoutPercentage() }}</span>
-        </div>
-      </div>
-    } @else {
-      <div
-        [ngClass]="badgeClasses()"
-        [class]="fullBadgeSizeClasses()"
-      >
-        <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-          {{ iconSymbol() }}
-        </span>
-        <span>{{ displayText() }}</span>
-      </div>
-    }
+                template: `
+    @if (showEmphasizedPercentage() && hasPercentage()) {
+      <div
+        [ngClass]="containerClasses()"
+        [class]="containerSizeClasses()"
+        [style.transform]="rotationStyle()"
+      >
+        <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
+          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+            {{ iconSymbol() }}
+          </span>
+          {{ animatedPercentage() }}
+        </div>
+        <div
+          [class]="sizeClasses()"
+        >
+          <span>{{ displayTextWithoutPercentage() }}</span>
+        </div>
+      </div>
+    } @else {
+      <div
+        [ngClass]="badgeClasses()"
+        [class]="fullBadgeSizeClasses()"
+        [style.transform]="fullBadgeRotationStyle()"
+      >
+        <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+          {{ iconSymbol() }}
+        </span>
+        <span>{{ displayText() }}</span>
+      </div>
+    }
   `
             }]
-    }], () => [], { 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 }] }], showEmphasizedPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmphasizedPercentage", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 39 }); })();
+    }], () => [{ type: i0.ElementRef }], { 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 }] }], showEmphasizedPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmphasizedPercentage", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 44 }); })();
 
 class TargetChangeBadgeComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.percentageChange = input(0, ...(ngDevMode ? [{ debugName: "percentageChange" }] : []));
         this.metric = input('', ...(ngDevMode ? [{ debugName: "metric" }] : []));
         this.priorYear = input(new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
         this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
         this.animatedValue = signal(0, ...(ngDevMode ? [{ debugName: "animatedValue" }] : []));
+        this.animationProgress = signal(0, ...(ngDevMode ? [{ debugName: "animationProgress" }] : []));
+        this.hasAnimated = signal(false, ...(ngDevMode ? [{ debugName: "hasAnimated" }] : []));
         this.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        this.observer = null;
         this.isIncreaseBad = computed(() => {
             const metricStr = this.metric();
             if (!metricStr)
@@ -55072,14 +55116,20 @@ class TargetChangeBadgeComponent {
                 : 'bg-purple-50 border-purple-200';
         }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
         this.isIncrease = computed(() => this.percentageChange() > 0, ...(ngDevMode ? [{ debugName: "isIncrease" }] : []));
+        this.targetRotation = computed(() => {
+            const change = this.percentageChange();
+            return change > 0 ? -1 : change < 0 ? 1 : 0;
+        }, ...(ngDevMode ? [{ debugName: "targetRotation" }] : []));
+        this.rotationStyle = computed(() => {
+            const target = this.targetRotation();
+            return `rotate(${target}deg)`;
+        }, ...(ngDevMode ? [{ debugName: "rotationStyle" }] : []));
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
-            const change = this.percentageChange();
-            const tiltClass = change > 0 ? '-rotate-1' : change < 0 ? 'rotate-1' : '';
             const baseClasses = 'inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0';
             return compact
-                ? `${baseClasses} pl-1.5 ${tiltClass}`
-                : `${baseClasses} pl-2 ${tiltClass}`;
+                ? `${baseClasses} pl-1.5`
+                : `${baseClasses} pl-2`;
         }, ...(ngDevMode ? [{ debugName: "containerSizeClasses" }] : []));
         this.overlayClasses = computed(() => {
             const dark = this.isDark();
@@ -55090,8 +55140,8 @@ class TargetChangeBadgeComponent {
         this.overlaySizeClasses = computed(() => {
             const compact = this.isCompact();
             return compact
-                ? 'px-2 py-1.5 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-0.5'
-                : 'px-2.5 py-2 rounded-lg font-extrabold text-base tracking-wide shadow-md transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1';
+                ? 'px-2 py-1.5 rounded-lg text-sm font-extrabold tracking-wide shadow-md transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-0.5 tabular-nums'
+                : 'px-2.5 py-2 rounded-lg font-extrabold text-base tracking-wide shadow-md transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1 tabular-nums';
         }, ...(ngDevMode ? [{ debugName: "overlaySizeClasses" }] : []));
         this.iconSizeClass = computed(() => {
             return this.isCompact() ? 'text-sm' : 'text-base';
@@ -55102,11 +55152,31 @@ class TargetChangeBadgeComponent {
                 ? 'px-2.5 py-0.5 text-xs font-semibold inline-block'
                 : 'px-3 py-0.5 font-semibold text-xs inline-block';
         }, ...(ngDevMode ? [{ debugName: "descriptionSizeClasses" }] : []));
+        this.setupIntersectionObserver();
         effect(() => {
             const target = this.percentageChange();
-            this.animateValue(target);
+            if (this.hasAnimated()) {
+                this.animateValue(target);
+            }
         });
     }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    setupIntersectionObserver() {
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.hasAnimated()) {
+                    this.hasAnimated.set(true);
+                    const target = this.percentageChange();
+                    this.animateValue(target);
+                }
+            });
+        }, { threshold: 0.1 });
+        this.observer.observe(this.elementRef.nativeElement);
+    }
     animateValue(target) {
         const start = 0;
         const duration = 800;
@@ -55117,14 +55187,15 @@ class TargetChangeBadgeComponent {
             const easeOutQuart = 1 - Math.pow(1 - progress, 4);
             const current = start + (target - start) * easeOutQuart;
             this.animatedValue.set(current);
+            this.animationProgress.set(progress);
             if (progress < 1) {
                 requestAnimationFrame(animate);
             }
         };
         requestAnimationFrame(animate);
     }
-    static { this.ɵfac = function TargetChangeBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TargetChangeBadgeComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TargetChangeBadgeComponent, selectors: [["symphiq-target-change-badge"]], inputs: { viewMode: [1, "viewMode"], percentageChange: [1, "percentageChange"], metric: [1, "metric"], priorYear: [1, "priorYear"], isCompact: [1, "isCompact"] }, decls: 7, vars: 13, consts: [[3, "ngClass"]], template: function TargetChangeBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = function TargetChangeBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TargetChangeBadgeComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TargetChangeBadgeComponent, selectors: [["symphiq-target-change-badge"]], inputs: { viewMode: [1, "viewMode"], percentageChange: [1, "percentageChange"], metric: [1, "metric"], priorYear: [1, "priorYear"], isCompact: [1, "isCompact"] }, decls: 7, vars: 15, consts: [[3, "ngClass"]], template: function TargetChangeBadgeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 0)(2, "span");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
@@ -55135,6 +55206,7 @@ class TargetChangeBadgeComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.containerSizeClasses());
+            i0.ɵɵstyleProp("transform", ctx.rotationStyle());
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.overlaySizeClasses());
@@ -55158,20 +55230,24 @@ class TargetChangeBadgeComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" [class]="containerSizeClasses()">
-      <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
-        <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
-        {{ animatedPercentageText() }}
-      </div>
-      <div [class]="descriptionSizeClasses()">
-        {{ descriptionText() }}
-      </div>
-    </div>
+                template: `
+    <div
+      [ngClass]="containerClasses()"
+      [class]="containerSizeClasses()"
+      [style.transform]="rotationStyle()"
+    >
+      <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
+        <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
+        {{ animatedPercentageText() }}
+      </div>
+      <div [class]="descriptionSizeClasses()">
+        {{ descriptionText() }}
+      </div>
+    </div>
   `
             }]
-    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], percentageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageChange", required: false }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], priorYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorYear", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TargetChangeBadgeComponent, { className: "TargetChangeBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/target-change-badge.component.ts", lineNumber: 23 }); })();
+    }], () => [{ type: i0.ElementRef }], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], percentageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageChange", required: false }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], priorYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorYear", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TargetChangeBadgeComponent, { className: "TargetChangeBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/target-change-badge.component.ts", lineNumber: 27 }); })();
 
 const _forTrack0$j = ($index, $item) => $item.stageMetric.metric;
 const _forTrack1$3 = ($index, $item) => $item.calc.metric;
@@ -56613,8 +56689,9 @@ class LineChartComponent {
         this.showAxisLabels = input(false, ...(ngDevMode ? [{ debugName: "showAxisLabels" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.currencySymbol = input('$', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : []));
+        this.height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : []));
         // Memoized computed signals to avoid recalculation on every change detection
-        this.chartHeight = computed(() => this.showAxisLabels() ? '500px' : '133px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
+        this.chartHeight = computed(() => this.height() ?? (this.showAxisLabels() ? '500px' : '133px'), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.cursorColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x94a3b8, ...(ngDevMode ? [{ debugName: "cursorColor" }] : []));
         this.tooltipTextColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x000000, ...(ngDevMode ? [{ debugName: "tooltipTextColor" }] : []));
         this.chartHash = computed(() => this.generateChartHash(this.chart()), ...(ngDevMode ? [{ debugName: "chartHash" }] : []));
@@ -57059,7 +57136,7 @@ class LineChartComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function LineChartComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"], height: [1, "height"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function LineChartComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1);
             i0.ɵɵdomElement(1, "div", 2, 0);
             i0.ɵɵdomElementEnd();
@@ -57076,7 +57153,7 @@ class LineChartComponent {
       <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
     </div>
   `, styles: [".chart-container{width:100%;padding:1rem}.chart-container.mini-mode{padding:.25rem}\n"] }]
-    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], chartDiv: [{
+    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: true }]
         }] }); })();
@@ -57370,16 +57447,16 @@ function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ct
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.metricData().description);
+    i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(ctx_r1.metricData().description, ctx_r1.metricTitle()));
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function MetricReportModalComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
 } if (rf & 2) {
     let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", ctx_r1.ytdChangePercentage())("metric", ((tmp_4_0 = ctx_r1.metricData()) == null ? null : tmp_4_0.metric) || "")("priorYear", ctx_r1.priorYear())("isCompact", true);
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+function MetricReportModalComponent_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -57402,6 +57479,19 @@ function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
 } }
+function MetricReportModalComponent_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 24);
+    i0.ɵɵtext(2, " Year-over-Year Trend ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "symphiq-area-chart", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("chart", ctx_r1.trendChartData())("showAxisLabels", false)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "80px");
+} }
 function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
@@ -57409,7 +57499,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 35);
+    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 36);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -57422,7 +57512,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵproperty("data", ctx_r1.progressToTargetData())("viewMode", ctx_r1.viewMode());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵelementStart(0, "button", 11);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 51);
     i0.ɵɵelement(2, "path", 33);
@@ -57433,15 +57523,15 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditio
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 41)(1, "td", 42)(2, "div", 43)(3, "span", 44);
+    i0.ɵɵelementStart(0, "tr", 42)(1, "td", 43)(2, "div", 44)(3, "span", 45);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 45);
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "td", 46)(7, "span", 47);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 46)(10, "div", 48)(11, "span", 44);
+    i0.ɵɵelementStart(9, "td", 46)(10, "div", 48)(11, "span", 45);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
@@ -57469,17 +57559,17 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
     i0.ɵɵtext(2, " Contributing Metric Targets ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 36)(4, "table", 37)(5, "thead")(6, "tr", 38)(7, "th", 39);
+    i0.ɵɵelementStart(3, "div", 37)(4, "table", 38)(5, "thead")(6, "tr", 39)(7, "th", 40);
     i0.ɵɵtext(8, "Metric");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 40);
+    i0.ɵɵelementStart(9, "th", 41);
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 40);
+    i0.ɵɵelementStart(11, "th", 41);
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 41, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 42, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57496,15 +57586,15 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 52);
-    i0.ɵɵelement(4, "symphiq-line-chart", 53);
+    i0.ɵɵelement(4, "symphiq-line-chart", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 54);
+    i0.ɵɵelementStart(5, "p", 53);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 55);
+    i0.ɵɵelementStart(7, "p", 54);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 55);
+    i0.ɵɵelementStart(9, "p", 54);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57513,7 +57603,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$");
+    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "250px");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
@@ -57550,50 +57640,50 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelement(15, "path", 14);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(16, "div", 15);
-    i0.ɵɵelement(17, "symphiq-tooltip-container");
-    i0.ɵɵelementStart(18, "div", 16)(19, "h4", 17);
-    i0.ɵɵtext(20, " At a Glance ");
+    i0.ɵɵelementStart(16, "div", 15)(17, "div", 16)(18, "h4", 17);
+    i0.ɵɵtext(19, " At a Glance ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "div", 19)(24, "p", 20);
-    i0.ɵɵtext(25, " Year to date ");
+    i0.ɵɵelementStart(20, "div", 18)(21, "div")(22, "div", 19)(23, "p", 20);
+    i0.ɵɵtext(24, " Year to date ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 21);
-    i0.ɵɵtext(27);
+    i0.ɵɵelementStart(25, "p", 21);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "p", 21);
-    i0.ɵɵtext(29);
+    i0.ɵɵelementStart(27, "p", 21);
+    i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "p", 22);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(29, "p", 22);
+    i0.ɵɵtext(30);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(32, MetricReportModalComponent_Conditional_0_Conditional_32_Template, 1, 5, "symphiq-target-change-badge", 23);
+    i0.ɵɵconditionalCreate(31, MetricReportModalComponent_Conditional_0_Conditional_31_Template, 1, 5, "symphiq-target-change-badge", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div")(34, "div", 19)(35, "p", 20);
-    i0.ɵɵtext(36, " Same period last year ");
+    i0.ɵɵelementStart(32, "div")(33, "div", 19)(34, "p", 20);
+    i0.ɵɵtext(35, " Same period last year ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "p", 21);
-    i0.ɵɵtext(38);
+    i0.ɵɵelementStart(36, "p", 21);
+    i0.ɵɵtext(37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "p", 21);
-    i0.ɵɵtext(40);
+    i0.ɵɵelementStart(38, "p", 21);
+    i0.ɵɵtext(39);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "p", 10);
-    i0.ɵɵtext(42);
+    i0.ɵɵelementStart(40, "p", 10);
+    i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div")(44, "p", 24);
-    i0.ɵɵtext(45);
+    i0.ɵɵelementStart(42, "div")(43, "p", 24);
+    i0.ɵɵtext(44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "p", 10);
-    i0.ɵɵtext(47);
+    i0.ɵɵelementStart(45, "p", 10);
+    i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, MetricReportModalComponent_Conditional_0_Conditional_48_Template, 6, 10, "div");
-    i0.ɵɵelementStart(49, "div")(50, "p", 24);
-    i0.ɵɵtext(51);
+    i0.ɵɵconditionalCreate(47, MetricReportModalComponent_Conditional_0_Conditional_47_Template, 6, 10, "div");
+    i0.ɵɵelementStart(48, "div")(49, "p", 24);
+    i0.ɵɵtext(50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "p", 10);
-    i0.ɵɵtext(53);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(51, "p", 10);
+    i0.ɵɵtext(52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(53, MetricReportModalComponent_Conditional_0_Conditional_53_Template, 4, 6, "div");
+    i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
     i0.ɵɵtext(56, " Target Analysis ");
     i0.ɵɵelementEnd();
@@ -57609,7 +57699,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 6, 10);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
-    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 12, "div", 29);
+    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 13, "div", 29);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(67, "div", 30)(68, "button", 31);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
@@ -57621,8 +57711,8 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     let tmp_27_0;
     let tmp_31_0;
     let tmp_36_0;
-    let tmp_41_0;
-    let tmp_43_0;
+    let tmp_42_0;
+    let tmp_44_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
@@ -57640,7 +57730,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
@@ -57659,7 +57749,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((tmp_19_0 = ctx_r1.metricData()) == null ? null : tmp_19_0.metric) || ""), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 32 : -1);
+    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 31 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(2);
@@ -57683,7 +57773,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.currentValue) || 0, ((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.metric) || ""), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 48 : -1);
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 47 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -57693,6 +57783,8 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.targetValue) || 0, ((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.metric) || "", false), " ");
     i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.trendChartData() ? 53 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
@@ -57701,11 +57793,11 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.targetValue) || 0, ((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.metric) || "", false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_42_0 = ctx_r1.metricData()) == null ? null : tmp_42_0.targetValue) || 0, ((tmp_42_0 = ctx_r1.metricData()) == null ? null : tmp_42_0.metric) || "", false), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0), 1), " ", (((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.currentValue) || 0, ((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.metric) || ""), ". ");
+    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.percentageIncrease) || 0), 1), " ", (((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.currentValue) || 0, ((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.metric) || ""), ". ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.pacingInfo() ? 64 : -1);
     i0.ɵɵadvance();
@@ -57724,6 +57816,7 @@ class MetricReportModalComponent {
         this.metricData = input(undefined, ...(ngDevMode ? [{ debugName: "metricData" }] : []));
         this.contributingMetrics = input([], ...(ngDevMode ? [{ debugName: "contributingMetrics" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.trendChartData = input(null, ...(ngDevMode ? [{ debugName: "trendChartData" }] : []));
         this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.closed = output();
         this.showDefinition = signal(false, ...(ngDevMode ? [{ debugName: "showDefinition" }] : []));
@@ -57881,7 +57974,7 @@ class MetricReportModalComponent {
             const metric = this.metricTitle();
             const currentYear = this.currentYear();
             const priorYear = this.priorYear();
-            return `This chart shows the ${metric} performance trend for ${currentYear} (solid line), compared to ${priorYear} (dashed line), with the target projection (dotted line) for the remainder of the year.`;
+            return `This chart shows the ${metric} performance trend for ${currentYear} (solid yellow line, this month includes projections for the remaining days of the month), compared to ${priorYear} (dashed green line), with the target projection (dotted blue line) for the remainder of the year.`;
         }, ...(ngDevMode ? [{ debugName: "chartLegendDescription" }] : []));
         this.chartDescriptionSentence1 = computed(() => {
             const metricData = this.metricData();
@@ -57916,7 +58009,7 @@ class MetricReportModalComponent {
                 lineChartData: {
                     series: [
                         {
-                            name: 'Target Projection',
+                            name: '2026 Projected',
                             data: projectionData
                         },
                         {
@@ -58138,15 +58231,15 @@ class MetricReportModalComponent {
             : 'bg-slate-700 hover:bg-slate-600 text-white';
     }
     static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "text-xl", "font-bold", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-7", "h-7", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", "self-center", 3, "ngClass", "libSymphiqTooltip"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["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, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 51, "div", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], trendChartData: [1, "trendChartData"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", 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, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["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", "isCompact", "showEmphasizedPercentage"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[250px]"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 52, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
             TargetChangeBadgeComponent,
             TooltipDirective,
-            TooltipContainerComponent,
             LineChartComponent,
+            AreaChartComponent,
             ProgressToTargetChartComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
@@ -58172,8 +58265,8 @@ class MetricReportModalComponent {
                     PacingStatusBadgeComponent,
                     TargetChangeBadgeComponent,
                     TooltipDirective,
-                    TooltipContainerComponent,
                     LineChartComponent,
+                    AreaChartComponent,
                     ProgressToTargetChartComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58214,7 +58307,7 @@ class MetricReportModalComponent {
             <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
               <div class="flex items-start justify-between">
                 <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-2">
+                  <div class="flex items-center gap-2 mb-2">
                     <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
                       {{ metricTitle() }}
                     </h3>
@@ -58222,11 +58315,11 @@ class MetricReportModalComponent {
                       <button
                         type="button"
                         [ngClass]="headerInfoIconClasses()"
-                        class="flex-shrink-0 w-7 h-7 rounded-full inline-flex items-center justify-center transition-colors self-center"
-                        [libSymphiqTooltip]="metricData()!.description!"
+                        class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                        [libSymphiqTooltip]="getMarkdownTooltipContent(metricData()!.description!, metricTitle())"
                         tooltipType="markdown"
                         tooltipPosition="right">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <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>
@@ -58246,8 +58339,6 @@ class MetricReportModalComponent {
 
             <!-- Content -->
             <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
-              <symphiq-tooltip-container />
-
               <!-- At a Glance Summary -->
               <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
                 <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
@@ -58338,6 +58429,22 @@ class MetricReportModalComponent {
                       {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
                     </p>
                   </div>
+
+                  <!-- Year-over-Year Trend Chart -->
+                  @if (trendChartData()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Year-over-Year Trend
+                      </p>
+                      <symphiq-area-chart
+                        [chart]="trendChartData()!"
+                        [showAxisLabels]="false"
+                        [viewMode]="viewMode()"
+                        [currencySymbol]="'$'"
+                        [height]="'80px'"
+                      />
+                    </div>
+                  }
                 </div>
               </div>
 
@@ -58461,12 +58568,13 @@ class MetricReportModalComponent {
                   <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
                     Pace
                   </h4>
-                  <div class="min-h-[400px]">
+                  <div class="min-h-[250px]">
                     <symphiq-line-chart
                       [chart]="pacingChartData()!"
                       [showAxisLabels]="true"
                       [viewMode]="viewMode()"
                       [currencySymbol]="'$'"
+                      [height]="'250px'"
                     />
                   </div>
                   <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
@@ -58497,8 +58605,8 @@ class MetricReportModalComponent {
     }
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 349 }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], trendChartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendChartData", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 364 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
@@ -58826,7 +58934,7 @@ function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf,
     i0.ɵɵelement(0, "symphiq-area-chart", 23);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
+    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "200px");
 } }
 function InitialTargetSettingComponent_Conditional_37_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "p", 50);
@@ -59448,7 +59556,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: 43, vars: 50, 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"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "isOpen"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "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: 43, vars: 51, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "trendChartData", "isOpen"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "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);
@@ -59548,7 +59656,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("isOpen", ctx.isMetricReportOpen());
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("trendChartData", ctx.revenueChartData())("isOpen", ctx.isMetricReportOpen());
         } }, 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,
@@ -59567,390 +59675,391 @@ class InitialTargetSettingComponent {
                     TooltipDirective,
                     TooltipContainerComponent,
                     MetricReportModalComponent
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="space-y-8 pb-32">
-      <symphiq-tooltip-container />
-      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
-           [class.cursor-pointer]="calculationState() === 'results'"
-           [class.lg:sticky]="calculationState() === 'results'"
-           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
-           [class.z-30]="calculationState() === 'results'"
-           (click)="onCardClick()">
-        <div class="flex items-center justify-between mb-6">
-          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
-            @if (calculationState() === 'results') {
-              Your {{ currentYear() }} Revenue Target
-            } @else {
-              Calculate Your {{ currentYear() }} Revenue Target
-            }
-          </h2>
-          @if (calculationState() === 'results') {
-            <svg
-              class="w-6 h-6 chevron-rotate"
-              [class.chevron-rotate-expanded]="detailsExpanded()"
-              [ngClass]="chevronClasses()"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          }
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <div class="grid lg:grid-cols-2 gap-4">
-            <div class="flex flex-col gap-4">
-              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
-                <div class="flex flex-wrap gap-4 place-content-between">
-                  <div class="flex items-center gap-2">
-                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                    </svg>
-                    <div>
-                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        {{ priorYear() }} Revenue
-                      </p>
-                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
-                        {{ formatCurrency(priorYearRevenue()) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0) {
-                    <div class="flex items-center gap-2">
-                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
-                      </svg>
-                      <div>
-                        <div class="flex items-center gap-1">
-                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                            Current Pace Projection
-                          </p>
-                          <button
-                            type="button"
-                            [ngClass]="infoIconClasses()"
-                            class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                            [libSymphiqTooltip]="currentPaceProjectionTooltip"
-                            tooltipType="markdown"
-                            tooltipPosition="top"
-                            (click)="$event.stopPropagation()">
-                            <svg class="w-3 h-3" 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>
-                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
-                          {{ formatCurrency(currentPaceProjection()) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
-                  <div class="form-area-content">
-                    <div class="space-y-6">
-                      @if (calculationState() !== 'results') {
-                      <div class="flex gap-2">
-                        <button
-                          (click)="setInputMode('absolute')"
-                          [ngClass]="inputModeButtonClasses('absolute')"
-                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                          Absolute Amount
-                        </button>
-                        <button
-                          (click)="setInputMode('percentage')"
-                          [ngClass]="inputModeButtonClasses('percentage')"
-                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                          % Increase
-                        </button>
-                      </div>
-
-                      @if (inputMode() === 'absolute') {
-                        <div class="relative">
-                          <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                            $
-                          </span>
-                          <input
-                            #absoluteInputRef
-                            type="number"
-                            [(ngModel)]="absoluteInput"
-                            (ngModelChange)="onAbsoluteInputChange()"
-                            [ngClass]="inputClasses()"
-                            class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                            placeholder="0"
-                            min="0"
-                            step="1000">
-                        </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>
-                      }
-
-                      @if (hasStoredResponse()) {
-                        <div class="flex justify-end">
-                          <button
-                            (click)="handleCancel()"
-                            [ngClass]="cancelButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
-                            Cancel
-                          </button>
-                        </div>
-                      }
-                    }
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
-                <div class="chart-in-column-content">
-                  <div>
-                    <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
-                      Year-over-Year Revenue Trend
-                    </p>
-                    <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
-                      @if (revenueChartData()) {
-                        <symphiq-area-chart
-                          [chart]="revenueChartData()!"
-                          [showAxisLabels]="true"
-                          [viewMode]="viewMode()"
-                          [currencySymbol]="'$'"
-                          [height]="'108px'"
-                        />
-                      } @else {
-                        <div class="h-64 flex items-center justify-center">
-                          <p [ngClass]="noDataClasses()" class="text-sm">
-                            No revenue data available
-                          </p>
-                        </div>
-                      }
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
-              <div class="calculated-card-content">
-                @if (calculatedRevenue() > 0) {
-                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
-                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
-                    <div>
-                      <div class="flex items-center justify-between">
-                        <div>
-                          <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 text-lg"
-                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
-                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
-                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
-                            } @else {
-                              {{ formatCurrency(displayedTargetRevenue()) }}
-                            }
-                          </p>
-                        </div>
-                        @if (calculationState() === 'results' && targets() === undefined) {
-                          <button
-                            (click)="handleAdjustTarget(); $event.stopPropagation()"
-                            [ngClass]="secondaryButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
-                            Adjust Revenue Target
-                          </button>
-                        }
-                      </div>
-
-                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
-                        <div class="details-collapse-content">
-                          <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>
-                              <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                                vs. {{ priorYear() }}
-                              </span>
-                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                            </div>
-                            <div class="grid grid-cols-2 gap-4 pt-2">
-                              <div>
-                                <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                                  Increase Amount
-                                </p>
-                                <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                  @if (isTargetValid()) {
-                                    {{ formatCurrency(animatedIncreaseAmount()) }}
-                                  } @else {
-                                    --
-                                  }
-                                </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">
-                                  @if (isTargetValid()) {
-                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
-                                  } @else {
-                                    --
-                                  }
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-
-                          @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>
-                                <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                                  {{ currentYear() }} YTD Gap
-                                </span>
-                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
-                              </div>
-                              <div class="grid grid-cols-2 gap-4 pt-2">
-                                <div>
-                                  <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                                    Gap to Close
-                                  </p>
-                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    @if (isTargetValid()) {
-                                      {{ formatCurrency(animatedGapAmount()) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                                <div>
-                                  <div class="flex items-center gap-1 mb-1">
-                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                                      Additional Growth Needed
-                                    </p>
-                                    <button
-                                      type="button"
-                                      [ngClass]="infoIconClasses()"
-                                      class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                                      [libSymphiqTooltip]="additionalGrowthTooltip"
-                                      tooltipType="markdown"
-                                      tooltipPosition="top"
-                                      (click)="$event.stopPropagation()">
-                                      <svg class="w-3 h-3" 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>
-                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    @if (isTargetValid()) {
-                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                          }
-
-                          </div>
-                      </div>
-                    </div>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          @if (calculationState() !== 'results') {
-            <div class="w-full">
-              <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
-                Year-over-Year Revenue Trend
-              </p>
-              <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
-                @if (revenueChartData()) {
-                  <symphiq-area-chart
-                    [chart]="revenueChartData()!"
-                    [showAxisLabels]="true"
-                    [viewMode]="viewMode()"
-                    [currencySymbol]="'$'"
-                    [height]="'320px'"
-                  />
-                } @else {
-                  <div class="h-64 flex items-center justify-center">
-                    <p [ngClass]="noDataClasses()" class="text-sm">
-                      No revenue data available
-                    </p>
-                  </div>
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-
-      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
-        <div class="metrics-section-content">
-          @if (showMetricsVisualization()) {
-            <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-              <div class="mb-6">
-                <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                  Contributing Metrics
-                </h2>
-                <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
-                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
-                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-                  } @else {
-                    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()"
-                (viewStageReport)="openMetricReport($event)"
-                (viewRelatedMetricReport)="openMetricReport($event)"
-              />
-            </div>
-          }
-        </div>
-      </div>
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isCalculating()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="submitButtonText()"
-        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
-        (submitClick)="handleSubmitClick()"
-        (cancelClick)="handleCancel()"
-      />
-
-      <!-- Metric Report Modal -->
-      <symphiq-metric-report-modal
-        [viewMode]="viewMode()"
-        [metricEnum]="selectedMetricEnum()"
-        [metricData]="selectedMetricData()"
-        [contributingMetrics]="selectedContributingMetrics()"
-        [pacingMetrics]="pacingMetrics()"
-        [isOpen]="isMetricReportOpen()"
-        (closed)="closeMetricReport()"
-      />
-    </div>
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="space-y-8 pb-32">
+      <symphiq-tooltip-container />
+      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
+           [class.cursor-pointer]="calculationState() === 'results'"
+           [class.lg:sticky]="calculationState() === 'results'"
+           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
+           [class.z-30]="calculationState() === 'results'"
+           (click)="onCardClick()">
+        <div class="flex items-center justify-between mb-6">
+          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
+            @if (calculationState() === 'results') {
+              Your {{ currentYear() }} Revenue Target
+            } @else {
+              Calculate Your {{ currentYear() }} Revenue Target
+            }
+          </h2>
+          @if (calculationState() === 'results') {
+            <svg
+              class="w-6 h-6 chevron-rotate"
+              [class.chevron-rotate-expanded]="detailsExpanded()"
+              [ngClass]="chevronClasses()"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          }
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <div class="grid lg:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-4">
+              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
+                <div class="flex flex-wrap gap-4 place-content-between">
+                  <div class="flex items-center gap-2">
+                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                    </svg>
+                    <div>
+                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        {{ priorYear() }} Revenue
+                      </p>
+                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
+                        {{ formatCurrency(priorYearRevenue()) }}
+                      </p>
+                    </div>
+                  </div>
+                  @if (currentPaceProjection() > 0) {
+                    <div class="flex items-center gap-2">
+                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                      </svg>
+                      <div>
+                        <div class="flex items-center gap-1">
+                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            Current Pace Projection
+                          </p>
+                          <button
+                            type="button"
+                            [ngClass]="infoIconClasses()"
+                            class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
+                            [libSymphiqTooltip]="currentPaceProjectionTooltip"
+                            tooltipType="markdown"
+                            tooltipPosition="top"
+                            (click)="$event.stopPropagation()">
+                            <svg class="w-3 h-3" 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>
+                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
+                          {{ formatCurrency(currentPaceProjection()) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
+
+                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
+                  <div class="form-area-content">
+                    <div class="space-y-6">
+                      @if (calculationState() !== 'results') {
+                      <div class="flex gap-2">
+                        <button
+                          (click)="setInputMode('absolute')"
+                          [ngClass]="inputModeButtonClasses('absolute')"
+                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                          Absolute Amount
+                        </button>
+                        <button
+                          (click)="setInputMode('percentage')"
+                          [ngClass]="inputModeButtonClasses('percentage')"
+                          class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                          % Increase
+                        </button>
+                      </div>
+
+                      @if (inputMode() === 'absolute') {
+                        <div class="relative">
+                          <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                            $
+                          </span>
+                          <input
+                            #absoluteInputRef
+                            type="number"
+                            [(ngModel)]="absoluteInput"
+                            (ngModelChange)="onAbsoluteInputChange()"
+                            [ngClass]="inputClasses()"
+                            class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                            placeholder="0"
+                            min="0"
+                            step="1000">
+                        </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>
+                      }
+
+                      @if (hasStoredResponse()) {
+                        <div class="flex justify-end">
+                          <button
+                            (click)="handleCancel()"
+                            [ngClass]="cancelButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
+                            Cancel
+                          </button>
+                        </div>
+                      }
+                    }
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
+                <div class="chart-in-column-content">
+                  <div>
+                    <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+                      Year-over-Year Revenue Trend
+                    </p>
+                    <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+                      @if (revenueChartData()) {
+                        <symphiq-area-chart
+                          [chart]="revenueChartData()!"
+                          [showAxisLabels]="true"
+                          [viewMode]="viewMode()"
+                          [currencySymbol]="'$'"
+                          [height]="'108px'"
+                        />
+                      } @else {
+                        <div class="h-64 flex items-center justify-center">
+                          <p [ngClass]="noDataClasses()" class="text-sm">
+                            No revenue data available
+                          </p>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
+              <div class="calculated-card-content">
+                @if (calculatedRevenue() > 0) {
+                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
+                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
+                    <div>
+                      <div class="flex items-center justify-between">
+                        <div>
+                          <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 text-lg"
+                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
+                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
+                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
+                            } @else {
+                              {{ formatCurrency(displayedTargetRevenue()) }}
+                            }
+                          </p>
+                        </div>
+                        @if (calculationState() === 'results' && targets() === undefined) {
+                          <button
+                            (click)="handleAdjustTarget(); $event.stopPropagation()"
+                            [ngClass]="secondaryButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
+                            Adjust Revenue Target
+                          </button>
+                        }
+                      </div>
+
+                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
+                        <div class="details-collapse-content">
+                          <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>
+                              <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                                vs. {{ priorYear() }}
+                              </span>
+                              <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4 pt-2">
+                              <div>
+                                <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                                  Increase Amount
+                                </p>
+                                <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                  @if (isTargetValid()) {
+                                    {{ formatCurrency(animatedIncreaseAmount()) }}
+                                  } @else {
+                                    --
+                                  }
+                                </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">
+                                  @if (isTargetValid()) {
+                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
+                                  } @else {
+                                    --
+                                  }
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+
+                          @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>
+                                <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
+                                  {{ currentYear() }} YTD Gap
+                                </span>
+                                <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
+                              </div>
+                              <div class="grid grid-cols-2 gap-4 pt-2">
+                                <div>
+                                  <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                                    Gap to Close
+                                  </p>
+                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                    @if (isTargetValid()) {
+                                      {{ formatCurrency(animatedGapAmount()) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                                <div>
+                                  <div class="flex items-center gap-1 mb-1">
+                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                                      Additional Growth Needed
+                                    </p>
+                                    <button
+                                      type="button"
+                                      [ngClass]="infoIconClasses()"
+                                      class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
+                                      [libSymphiqTooltip]="additionalGrowthTooltip"
+                                      tooltipType="markdown"
+                                      tooltipPosition="top"
+                                      (click)="$event.stopPropagation()">
+                                      <svg class="w-3 h-3" 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>
+                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                    @if (isTargetValid()) {
+                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          }
+
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          @if (calculationState() !== 'results') {
+            <div class="w-full">
+              <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+                Year-over-Year Revenue Trend
+              </p>
+              <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+                @if (revenueChartData()) {
+                  <symphiq-area-chart
+                    [chart]="revenueChartData()!"
+                    [showAxisLabels]="true"
+                    [viewMode]="viewMode()"
+                    [currencySymbol]="'$'"
+                    [height]="'200px'"
+                  />
+                } @else {
+                  <div class="h-64 flex items-center justify-center">
+                    <p [ngClass]="noDataClasses()" class="text-sm">
+                      No revenue data available
+                    </p>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
+        <div class="metrics-section-content">
+          @if (showMetricsVisualization()) {
+            <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+              <div class="mb-6">
+                <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                  Contributing Metrics
+                </h2>
+                <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
+                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
+                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+                  } @else {
+                    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()"
+                (viewStageReport)="openMetricReport($event)"
+                (viewRelatedMetricReport)="openMetricReport($event)"
+              />
+            </div>
+          }
+        </div>
+      </div>
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isCalculating()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="submitButtonText()"
+        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
+        (submitClick)="handleSubmitClick()"
+        (cancelClick)="handleCancel()"
+      />
+
+      <!-- Metric Report Modal -->
+      <symphiq-metric-report-modal
+        [viewMode]="viewMode()"
+        [metricEnum]="selectedMetricEnum()"
+        [metricData]="selectedMetricData()"
+        [contributingMetrics]="selectedContributingMetrics()"
+        [pacingMetrics]="pacingMetrics()"
+        [trendChartData]="revenueChartData()"
+        [isOpen]="isMetricReportOpen()"
+        (closed)="closeMetricReport()"
+      />
+    </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}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
@@ -59959,7 +60068,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: 535 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 536 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);