@eric-emg/symphiq-components 1.2.250 → 1.2.251

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,28 @@ 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 progress = this.animationProgress();
+            const target = this.targetRotation();
+            const currentRotation = progress * target;
+            return `rotate(${currentRotation}deg)`;
+        }, ...(ngDevMode ? [{ debugName: "rotationStyle" }] : []));
+        this.fullBadgeRotationStyle = computed(() => {
+            const progress = this.animationProgress();
+            const target = this.targetRotation();
+            const currentRotation = progress * target;
+            return `rotate(${currentRotation}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 +54913,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 +54982,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 +55020,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 }); }
@@ -55004,7 +55043,11 @@ class PacingStatusBadgeComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
     @if (showEmphasizedPercentage() && hasPercentage()) {
-      <div [ngClass]="containerClasses()" [class]="containerSizeClasses()">
+      <div
+        [ngClass]="containerClasses()"
+        [class]="containerSizeClasses()"
+        [style.transform]="rotationStyle()"
+      >
         <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
           <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
             {{ iconSymbol() }}
@@ -55021,6 +55064,7 @@ class PacingStatusBadgeComponent {
       <div
         [ngClass]="badgeClasses()"
         [class]="fullBadgeSizeClasses()"
+        [style.transform]="fullBadgeRotationStyle()"
       >
         <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
           {{ iconSymbol() }}
@@ -55030,18 +55074,22 @@ class PacingStatusBadgeComponent {
     }
   `
             }]
-    }], () => [], { 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 +55120,22 @@ 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 progress = this.animationProgress();
+            const target = this.targetRotation();
+            const currentRotation = progress * target;
+            return `rotate(${currentRotation}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 +55146,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 +55158,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 +55193,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 +55212,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());
@@ -55159,7 +55237,11 @@ class TargetChangeBadgeComponent {
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
-    <div [ngClass]="containerClasses()" [class]="containerSizeClasses()">
+    <div
+      [ngClass]="containerClasses()"
+      [class]="containerSizeClasses()"
+      [style.transform]="rotationStyle()"
+    >
       <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
         <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
         {{ animatedPercentageText() }}
@@ -55170,8 +55252,8 @@ class TargetChangeBadgeComponent {
     </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;
@@ -57071,10 +57153,10 @@ class LineChartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineChartComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
-      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
-    </div>
+        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
+      <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: [{
             type: ViewChild,
@@ -57365,12 +57447,12 @@ const _forTrack0$i = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 11);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 32);
-    i0.ɵɵelement(2, "path", 33);
+    i0.ɵɵelementStart(1, "svg", 33);
+    i0.ɵɵelement(2, "path", 34);
     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) {
     i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
@@ -57380,13 +57462,13 @@ function MetricReportModalComponent_Conditional_0_Conditional_32_Template(rf, ct
     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) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 24);
+    i0.ɵɵelementStart(0, "div")(1, "p", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 22);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 34);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_5_0;
@@ -57403,13 +57485,13 @@ function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ct
     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_64_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
+    i0.ɵɵelementStart(2, "div", 26)(3, "p", 29);
     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,10 +57504,10 @@ 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", 46);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 51);
-    i0.ɵɵelement(2, "path", 33);
+    i0.ɵɵelementStart(1, "svg", 52);
+    i0.ɵɵelement(2, "path", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
@@ -57433,20 +57515,20 @@ 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", 46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 46)(7, "span", 47);
+    i0.ɵɵelementStart(6, "td", 47)(7, "span", 48);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 46)(10, "div", 48)(11, "span", 44);
+    i0.ɵɵelementStart(9, "td", 47)(10, "div", 49)(11, "span", 45);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 49);
-    i0.ɵɵelement(14, "path", 50);
+    i0.ɵɵelementStart(13, "svg", 50);
+    i0.ɵɵelement(14, "path", 51);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
@@ -57469,17 +57551,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);
@@ -57492,19 +57574,19 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵrepeater(ctx_r1.contributingMetrics());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "h4", 17);
+    i0.ɵɵelementStart(0, "div", 30)(1, "h4", 17);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 52);
-    i0.ɵɵelement(4, "symphiq-line-chart", 53);
+    i0.ɵɵelementStart(3, "div", 53);
+    i0.ɵɵelement(4, "symphiq-line-chart", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 54);
+    i0.ɵɵelementStart(5, "p", 55);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 55);
+    i0.ɵɵelementStart(7, "p", 56);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 55);
+    i0.ɵɵelementStart(9, "p", 56);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57578,40 +57660,40 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(39, "p", 21);
     i0.ɵɵtext(40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "p", 10);
+    i0.ɵɵelementStart(41, "p", 24);
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div")(44, "p", 24);
+    i0.ɵɵelementStart(43, "div")(44, "p", 25);
     i0.ɵɵtext(45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "p", 10);
+    i0.ɵɵelementStart(46, "p", 24);
     i0.ɵɵtext(47);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(48, MetricReportModalComponent_Conditional_0_Conditional_48_Template, 6, 10, "div");
-    i0.ɵɵelementStart(49, "div")(50, "p", 24);
+    i0.ɵɵelementStart(49, "div")(50, "p", 25);
     i0.ɵɵtext(51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "p", 10);
+    i0.ɵɵelementStart(52, "p", 24);
     i0.ɵɵtext(53);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
     i0.ɵɵtext(56, " Target Analysis ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "div", 25)(58, "p", 26);
+    i0.ɵɵelementStart(57, "div", 26)(58, "p", 27);
     i0.ɵɵtext(59, " Your Target ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "p", 27);
+    i0.ɵɵelementStart(60, "p", 28);
     i0.ɵɵtext(61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "p", 28);
+    i0.ɵɵelementStart(62, "p", 29);
     i0.ɵɵtext(63);
     i0.ɵɵelementEnd()();
     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, 12, "div", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "div", 30)(68, "button", 31);
+    i0.ɵɵelementStart(67, "div", 31)(68, "button", 32);
     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()); });
     i0.ɵɵtext(69, " Close ");
     i0.ɵɵelementEnd()()()()();
@@ -57881,7 +57963,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), 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();
@@ -58138,7 +58220,7 @@ 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) {
+    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", "leading-none", 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", 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-xl", "font-bold", 3, "ngClass"], [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);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -58191,310 +58273,310 @@ class MetricReportModalComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isOpen()) {
-      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-          <div
-            [ngClass]="backdropClasses()"
-            class="fixed inset-0 backdrop-blur-md"
-            aria-hidden="true"
-            @fadeIn>
-          </div>
-
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-          <div
-            (click)="$event.stopPropagation()"
-            [ngClass]="modalContainerClasses()"
-            class="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"
-            @slideUpFade>
-
-            <!-- Header -->
-            <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">
-                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
-                      {{ metricTitle() }}
-                    </h3>
-                    @if (metricData()?.description) {
-                      <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!"
-                        tooltipType="markdown"
-                        tooltipPosition="right">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                        </svg>
-                      </button>
-                    }
-                  </div>
-                </div>
-                <button
-                  (click)="close()"
-                  [ngClass]="closeButtonClasses()"
-                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
-                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <!-- 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">
-                  At a Glance
-                </h4>
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  <!-- YTD Value -->
-                  <div>
-                    <div class="mb-1.5">
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        Year to date
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ ytdStartDate() }}
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ ytdEndDate() }}
-                      </p>
-                    </div>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
-                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
-                    </p>
-                    @if (ytdChangePercentage() !== null) {
-                      <symphiq-target-change-badge
-                        [viewMode]="viewMode()"
-                        [percentageChange]="ytdChangePercentage()!"
-                        [metric]="metricData()?.metric || ''"
-                        [priorYear]="priorYear()"
-                        [isCompact]="true"
-                      />
-                    }
-                  </div>
-
-                  <!-- Same Period Last Year -->
-                  <div>
-                    <div class="mb-1.5">
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        Same period last year
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ priorYearStartDate() }}
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ priorYearEndDate() }}
-                      </p>
-                    </div>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Full Last Year -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Full {{ priorYear() }} Actual
-                    </p>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Current Pace -->
-                  @if (pacingInfo()) {
-                    <div>
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                        Pace for {{ currentYear() }}
-                      </p>
-                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
-                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
-                      </p>
-                      <symphiq-pacing-status-badge
-                        [viewMode]="viewMode()"
-                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                        [status]="pacingInfo()!.status"
-                        [showAsFullText]="false"
-                        [isCompact]="true"
-                        [showEmphasizedPercentage]="true"
-                      />
-                    </div>
-                  }
-
-                  <!-- Current Target -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      {{ currentYear() }} Target
-                    </p>
-                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Target Analysis -->
-              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                  Target Analysis
-                </h4>
-
-                <div class="mb-4">
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                    Your Target
-                  </p>
-                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
-                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
-                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
-                    from your {{ priorYear() }} actual of
-                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
-                  </p>
-                </div>
-
-                @if (pacingInfo()) {
-                  <div class="mb-4">
-                    <symphiq-pacing-status-badge
-                      [viewMode]="viewMode()"
-                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                      [status]="pacingInfo()!.status"
-                      [showAsFullText]="true"
-                      [isCompact]="false"
-                      [showEmphasizedPercentage]="true"
-                    />
-                  </div>
-
-                  <div class="mb-4">
-                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                      {{ gapAnalysisText() }}
-                    </p>
-                  </div>
-
-                  <!-- Progress to Target Chart -->
-                  <symphiq-progress-to-target-chart
-                    [data]="progressToTargetData()"
-                    [viewMode]="viewMode()"
-                  />
-                }
-              </div>
-
-              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
-              @if (contributingMetrics().length > 0) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Contributing Metric Targets
-                  </h4>
-                  <div class="overflow-x-auto">
-                    <table class="w-full">
-                      <thead>
-                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
-                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        @for (metric of contributingMetrics(); track metric.metric) {
-                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
-                            <td class="py-3 px-4">
-                              <div class="flex items-center gap-2">
-                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
-                                @if (metric.description) {
-                                  <button
-                                    type="button"
-                                    [ngClass]="infoIconClasses()"
-                                    class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                                    [libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
-                                    tooltipType="markdown"
-                                    tooltipPosition="right">
-                                    <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>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
-                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
-                              </span>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <div class="flex items-center justify-end gap-2">
-                                <span class="text-sm font-medium">
-                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
-                                </span>
-                                <svg
-                                  class="w-4 h-4 text-emerald-500"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24">
-                                  <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
-                                </svg>
-                              </div>
-                            </td>
-                          </tr>
-                        }
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              }
-
-              <!-- Pacing Chart -->
-              @if (pacingChartData()) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Pace
-                  </h4>
-                  <div class="min-h-[400px]">
-                    <symphiq-line-chart
-                      [chart]="pacingChartData()!"
-                      [showAxisLabels]="true"
-                      [viewMode]="viewMode()"
-                      [currencySymbol]="'$'"
-                    />
-                  </div>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
-                    {{ chartLegendDescription() }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
-                    {{ chartDescriptionSentence1() }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
-                    {{ chartDescriptionSentence2() }}
-                  </p>
-                </div>
-              }
-            </div>
-
-            <!-- Footer -->
-            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
-              <button
-                (click)="close()"
-                [ngClass]="closeFooterButtonClasses()"
-                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    }
+                template: `
+    @if (isOpen()) {
+      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            [ngClass]="backdropClasses()"
+            class="fixed inset-0 backdrop-blur-md"
+            aria-hidden="true"
+            @fadeIn>
+          </div>
+
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <div
+            (click)="$event.stopPropagation()"
+            [ngClass]="modalContainerClasses()"
+            class="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"
+            @slideUpFade>
+
+            <!-- Header -->
+            <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">
+                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold leading-none">
+                      {{ metricTitle() }}
+                    </h3>
+                    @if (metricData()?.description) {
+                      <button
+                        type="button"
+                        [ngClass]="headerInfoIconClasses()"
+                        class="flex-shrink-0 w-7 h-7 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">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      </button>
+                    }
+                  </div>
+                </div>
+                <button
+                  (click)="close()"
+                  [ngClass]="closeButtonClasses()"
+                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- 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">
+                  At a Glance
+                </h4>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <!-- YTD Value -->
+                  <div>
+                    <div class="mb-1.5">
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        Year to date
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ ytdStartDate() }}
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ ytdEndDate() }}
+                      </p>
+                    </div>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
+                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
+                    </p>
+                    @if (ytdChangePercentage() !== null) {
+                      <symphiq-target-change-badge
+                        [viewMode]="viewMode()"
+                        [percentageChange]="ytdChangePercentage()!"
+                        [metric]="metricData()?.metric || ''"
+                        [priorYear]="priorYear()"
+                        [isCompact]="true"
+                      />
+                    }
+                  </div>
+
+                  <!-- Same Period Last Year -->
+                  <div>
+                    <div class="mb-1.5">
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        Same period last year
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ priorYearStartDate() }}
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ priorYearEndDate() }}
+                      </p>
+                    </div>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Full Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Full {{ priorYear() }} Actual
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Current Pace -->
+                  @if (pacingInfo()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Pace for {{ currentYear() }}
+                      </p>
+                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
+                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
+                      </p>
+                      <symphiq-pacing-status-badge
+                        [viewMode]="viewMode()"
+                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                        [status]="pacingInfo()!.status"
+                        [showAsFullText]="false"
+                        [isCompact]="true"
+                        [showEmphasizedPercentage]="true"
+                      />
+                    </div>
+                  }
+
+                  <!-- Current Target -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      {{ currentYear() }} Target
+                    </p>
+                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Target Analysis -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  Target Analysis
+                </h4>
+
+                <div class="mb-4">
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Your Target
+                  </p>
+                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
+                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
+                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
+                    from your {{ priorYear() }} actual of
+                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
+                  </p>
+                </div>
+
+                @if (pacingInfo()) {
+                  <div class="mb-4">
+                    <symphiq-pacing-status-badge
+                      [viewMode]="viewMode()"
+                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                      [status]="pacingInfo()!.status"
+                      [showAsFullText]="true"
+                      [isCompact]="false"
+                      [showEmphasizedPercentage]="true"
+                    />
+                  </div>
+
+                  <div class="mb-4">
+                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                      {{ gapAnalysisText() }}
+                    </p>
+                  </div>
+
+                  <!-- Progress to Target Chart -->
+                  <symphiq-progress-to-target-chart
+                    [data]="progressToTargetData()"
+                    [viewMode]="viewMode()"
+                  />
+                }
+              </div>
+
+              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
+              @if (contributingMetrics().length > 0) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Contributing Metric Targets
+                  </h4>
+                  <div class="overflow-x-auto">
+                    <table class="w-full">
+                      <thead>
+                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
+                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (metric of contributingMetrics(); track metric.metric) {
+                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
+                            <td class="py-3 px-4">
+                              <div class="flex items-center gap-2">
+                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
+                                @if (metric.description) {
+                                  <button
+                                    type="button"
+                                    [ngClass]="infoIconClasses()"
+                                    class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                                    [libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
+                                    tooltipType="markdown"
+                                    tooltipPosition="right">
+                                    <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>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
+                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
+                              </span>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <div class="flex items-center justify-end gap-2">
+                                <span class="text-sm font-medium">
+                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
+                                </span>
+                                <svg
+                                  class="w-4 h-4 text-emerald-500"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24">
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
+                                </svg>
+                              </div>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+
+              <!-- Pacing Chart -->
+              @if (pacingChartData()) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Pace
+                  </h4>
+                  <div class="min-h-[400px]">
+                    <symphiq-line-chart
+                      [chart]="pacingChartData()!"
+                      [showAxisLabels]="true"
+                      [viewMode]="viewMode()"
+                      [currencySymbol]="'$'"
+                    />
+                  </div>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
+                    {{ chartLegendDescription() }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
+                    {{ chartDescriptionSentence1() }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
+                    {{ chartDescriptionSentence2() }}
+                  </p>
+                </div>
+              }
+            </div>
+
+            <!-- Footer -->
+            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
+              <button
+                (click)="close()"
+                [ngClass]="closeFooterButtonClasses()"
+                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
   `
             }]
     }], 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"] }] }); })();