@eric-emg/symphiq-components 1.2.231 → 1.2.232

package/fesm2022/symphiq-components.mjs

@@ -54795,7 +54795,7 @@ function extractProjectedValue(pacingResponse, metricEnum) {
 }
 
 function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2)(2, "span", 3);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 1)(2, "span", 1);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(4);
@@ -54805,8 +54805,10 @@ function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.containerSizeClasses());
     i0.ɵɵproperty("ngClass", ctx_r0.containerClasses());
     i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.overlaySizeClasses());
     i0.ɵɵproperty("ngClass", ctx_r0.overlayBadgeClasses());
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.iconSizeClasses());
@@ -54821,7 +54823,7 @@ function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtextInterpolate(ctx_r0.displayTextWithoutPercentage());
 } }
 function PacingStatusBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "span", 3);
+    i0.ɵɵelementStart(0, "div", 1)(1, "span", 1);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -54855,6 +54857,12 @@ class PacingStatusBadgeComponent {
             const info = this.displayInfo();
             return `${info.bgClass} ${info.borderClass} border`;
         }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+        this.containerSizeClasses = computed(() => {
+            const compact = this.isCompact();
+            return compact
+                ? 'inline-flex flex-row items-center rounded-full pl-1.5 overflow-visible'
+                : 'inline-flex flex-row items-center rounded-full pl-2 overflow-visible';
+        }, ...(ngDevMode ? [{ debugName: "containerSizeClasses" }] : []));
         this.badgeClasses = computed(() => {
             const info = this.displayInfo();
             return `${info.bgClass} ${info.colorClass} ${info.borderClass}`;
@@ -54863,9 +54871,9 @@ class PacingStatusBadgeComponent {
             const isCompact = this.isCompact();
             const baseClasses = 'inline-flex items-center gap-1.5 font-semibold transition-all';
             if (isCompact) {
-                return `${baseClasses} px-2.5 py-1 text-xs`;
+                return `${baseClasses} px-2.5 py-0.5 text-xs`;
             }
-            return `${baseClasses} px-3 py-1.5 text-xs`;
+            return `${baseClasses} px-3 py-0.5 text-xs`;
         }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
         this.fullBadgeSizeClasses = computed(() => {
             const isCompact = this.isCompact();
@@ -54916,15 +54924,32 @@ class PacingStatusBadgeComponent {
             return textWithoutPercentage;
         }, ...(ngDevMode ? [{ debugName: "displayTextWithoutPercentage" }] : []));
         this.overlayBadgeClasses = computed(() => {
-            const info = this.displayInfo();
-            const isCompact = this.isCompact();
-            const sizeClass = isCompact ? 'text-xs' : 'text-sm';
-            return `${info.bgClass} ${info.colorClass} ${info.borderClass} ${sizeClass}`;
+            const status = this.status();
+            const isDark = this.viewMode() === ViewModeEnum.DARK;
+            if (status === 'ahead') {
+                return isDark
+                    ? 'bg-gradient-to-r from-emerald-700 to-emerald-600 text-emerald-100 border-emerald-500'
+                    : 'bg-gradient-to-r from-emerald-600 to-emerald-500 text-white border-emerald-400';
+            }
+            if (status === 'on-pace') {
+                return isDark
+                    ? 'bg-gradient-to-r from-amber-700 to-amber-600 text-amber-100 border-amber-500'
+                    : 'bg-gradient-to-r from-amber-600 to-amber-500 text-white border-amber-400';
+            }
+            return isDark
+                ? 'bg-gradient-to-r from-red-700 to-red-600 text-red-100 border-red-500'
+                : 'bg-gradient-to-r from-red-600 to-red-500 text-white border-red-400';
         }, ...(ngDevMode ? [{ debugName: "overlayBadgeClasses" }] : []));
+        this.overlaySizeClasses = computed(() => {
+            const compact = this.isCompact();
+            return compact
+                ? 'px-2 py-1.5 rounded text-sm font-extrabold tracking-tight border 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-md text-sm font-extrabold tracking-tight border-2 shadow-lg transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1';
+        }, ...(ngDevMode ? [{ debugName: "overlaySizeClasses" }] : []));
     }
     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: [[1, "inline-flex", "flex-row", "items-center", "rounded-lg", 3, "ngClass"], [3, "ngClass", "class"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-my-1", "-mr-1", "z-10", "inline-flex", "items-center", "gap-1", 3, "ngClass"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8, 10, "div", 0)(1, PacingStatusBadgeComponent_Conditional_1_Template, 5, 8, "div", 1);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"], showAsFullText: [1, "showAsFullText"], isCompact: [1, "isCompact"], 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);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.showEmphasizedPercentage() && ctx.hasPercentage() ? 0 : 1);
         } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
@@ -54936,59 +54961,173 @@ class PacingStatusBadgeComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    @if (showEmphasizedPercentage() && hasPercentage()) {
-      <div [ngClass]="containerClasses()" class="inline-flex flex-row items-center rounded-lg">
-        <div [ngClass]="overlayBadgeClasses()"
-             class="px-2.5 py-0.5 rounded-md font-extrabold tracking-tight border-2 shadow-lg transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-1">
-          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-            {{ iconSymbol() }}
-          </span>
-          {{ extractPercentage() }}
-        </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()">
+        <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
+          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+            {{ iconSymbol() }}
+          </span>
+          {{ extractPercentage() }}
+        </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>
+    }
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAsFullText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsFullText", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }], 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: 40 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 39 }); })();
+
+class TargetChangeBadgeComponent {
+    constructor() {
+        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.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        this.isIncreaseBad = computed(() => {
+            const metricStr = this.metric();
+            if (!metricStr)
+                return false;
+            return MetricEnumUtil.increaseBad(metricStr);
+        }, ...(ngDevMode ? [{ debugName: "isIncreaseBad" }] : []));
+        this.iconSymbol = computed(() => {
+            const change = this.percentageChange();
+            if (change > 0)
+                return '↗';
+            if (change < 0)
+                return '↘';
+            return '→';
+        }, ...(ngDevMode ? [{ debugName: "iconSymbol" }] : []));
+        this.percentageText = computed(() => {
+            const sign = this.isIncreaseBad() ? '' : '+';
+            const absValue = Math.abs(this.percentageChange());
+            return `${sign}${formatPercentage(absValue, 1)}`;
+        }, ...(ngDevMode ? [{ debugName: "percentageText" }] : []));
+        this.descriptionText = computed(() => {
+            const action = this.isIncreaseBad() ? 'decrease from' : 'increase over';
+            return `${action} ${this.priorYear()}`;
+        }, ...(ngDevMode ? [{ debugName: "descriptionText" }] : []));
+        this.containerClasses = computed(() => {
+            const dark = this.isDark();
+            return dark
+                ? 'bg-purple-500/30 border-purple-400/30'
+                : 'bg-purple-100 border-purple-300';
+        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+        this.containerSizeClasses = computed(() => {
+            const compact = this.isCompact();
+            return compact
+                ? 'inline-flex flex-row items-center rounded-full border pl-1.5 overflow-visible'
+                : 'inline-flex flex-row items-center rounded-full border pl-2 overflow-visible';
+        }, ...(ngDevMode ? [{ debugName: "containerSizeClasses" }] : []));
+        this.overlayClasses = computed(() => {
+            const dark = this.isDark();
+            return dark
+                ? 'bg-gradient-to-r from-purple-700 to-purple-600 text-purple-100 border-purple-500'
+                : 'bg-gradient-to-r from-purple-600 to-purple-500 text-white border-purple-400';
+        }, ...(ngDevMode ? [{ debugName: "overlayClasses" }] : []));
+        this.overlaySizeClasses = computed(() => {
+            const compact = this.isCompact();
+            return compact
+                ? 'px-2 py-1.5 rounded text-sm font-extrabold tracking-tight border 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-md font-extrabold text-base tracking-tight border-2 shadow-lg transition-all duration-200 -my-1.5 -mr-1 z-10 inline-flex items-center gap-1';
+        }, ...(ngDevMode ? [{ debugName: "overlaySizeClasses" }] : []));
+        this.iconSizeClass = computed(() => {
+            return this.isCompact() ? 'text-sm' : 'text-base';
+        }, ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : []));
+        this.descriptionSizeClasses = computed(() => {
+            const compact = this.isCompact();
+            return compact
+                ? '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" }] : []));
+    }
+    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) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 0)(2, "span");
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div");
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.containerSizeClasses());
+            i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.overlaySizeClasses());
+            i0.ɵɵproperty("ngClass", ctx.overlayClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.iconSizeClass());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.iconSymbol());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.percentageText(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.descriptionSizeClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.descriptionText(), " ");
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TargetChangeBadgeComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-target-change-badge',
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div [ngClass]="containerClasses()" [class]="containerSizeClasses()">
+      <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
+        <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
+        {{ percentageText() }}
+      </div>
+      <div [class]="descriptionSizeClasses()">
+        {{ descriptionText() }}
+      </div>
+    </div>
+  `
+            }]
+    }], null, { 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 }); })();
 
 const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
 const _forTrack1$3 = ($index, $item) => $item.calc.metric;
 function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 16);
-    i0.ɵɵelement(2, "path", 17);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 9);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 11);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 18);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55004,25 +55143,25 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_25_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status)("showAsFullText", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 26);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 23);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 35);
-    i0.ɵɵelement(2, "path", 17);
+    i0.ɵɵelementStart(1, "svg", 29);
+    i0.ɵɵelement(2, "path", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.calc.description, ctx_r1.getMetricTitle(metric_r3.calc)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 28);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 30);
+    i0.ɵɵelementStart(3, "p", 27);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 36);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
@@ -55038,33 +55177,27 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status)("showAsFullText", true)("isCompact", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "p", 25);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_4_Template, 3, 2, "button", 26);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_4_Template, 3, 2, "button", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 27)(6, "div")(7, "p", 28);
+    i0.ɵɵelementStart(5, "div", 24)(6, "div")(7, "p", 25);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 29);
+    i0.ɵɵelementStart(9, "p", 26);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 28);
+    i0.ɵɵelementStart(11, "div")(12, "p", 25);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 30);
+    i0.ɵɵelementStart(14, "p", 27);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 31)(17, "div", 32)(18, "span", 33);
-    i0.ɵɵtext(19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(20);
+    i0.ɵɵelement(16, "symphiq-target-change-badge", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 34);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_23_Template, 6, 10, "div");
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_17_Template, 6, 10, "div");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
@@ -55093,25 +55226,17 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedContainerBadgeClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.overlayBadgeClasses(metric_r3.calc.percentageIncrease, metric_r3.calc.metric, true));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getGrowthIconSymbol(metric_r3.calc.percentageIncrease));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getPercentageOnly(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDescriptionOnly(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", metric_r3.calc.percentageIncrease)("metric", metric_r3.calc.metric)("priorYear", ctx_r1.priorYear())("isCompact", true);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 23 : -1);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 17 : -1);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 19);
-    i0.ɵɵelementStart(1, "div", 20)(2, "p", 21);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 16);
+    i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 22);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Template, 24, 18, "div", 23, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 19);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Template, 18, 18, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55140,17 +55265,11 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(16, "p", 11);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 12)(19, "div", 13)(20, "span", 14);
-    i0.ɵɵtext(21);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(22);
+    i0.ɵɵelement(18, "symphiq-target-change-badge", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 15);
-    i0.ɵɵtext(24);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, FunnelMetricsVisualizationComponent_For_4_Conditional_25_Template, 6, 9, "div");
+    i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(26, FunnelMetricsVisualizationComponent_For_4_Conditional_26_Template, 7, 2);
+    i0.ɵɵconditionalCreate(20, FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = ctx.$implicit;
@@ -55179,19 +55298,11 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.containerBadgeClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.overlayBadgeClasses(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getGrowthIconSymbol(stage_r1.stageMetric.percentageIncrease));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getPercentageOnly(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDescriptionOnly(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", stage_r1.stageMetric.percentageIncrease)("metric", stage_r1.stageMetric.metric)("priorYear", ctx_r1.priorYear());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 25 : -1);
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 26 : -1);
+    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 20 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
@@ -55251,21 +55362,6 @@ class FunnelMetricsVisualizationComponent {
             ? 'text-slate-300'
             : 'text-slate-600';
     }
-    containerBadgeClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-purple-500/30 border-purple-400/30'
-            : 'bg-purple-100 border-purple-300';
-    }
-    relatedContainerBadgeClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-purple-800/60 border-purple-700/50'
-            : 'bg-purple-50 border-purple-200';
-    }
-    percentageBadgeClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-purple-500/30 text-purple-200 border border-purple-400/30'
-            : 'bg-purple-100 text-purple-700 border border-purple-300';
-    }
     labelClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-slate-400'
@@ -55306,11 +55402,6 @@ class FunnelMetricsVisualizationComponent {
             ? 'text-slate-200'
             : 'text-slate-800';
     }
-    relatedPercentageBadgeClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-purple-800/60 text-purple-200'
-            : 'bg-purple-50 text-purple-800 border border-purple-200';
-    }
     relatedLabelClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-slate-300'
@@ -55334,28 +55425,6 @@ class FunnelMetricsVisualizationComponent {
     formatPercentage(value, decimals) {
         return formatPercentage(value, decimals);
     }
-    getTargetIncreaseText(percentageIncrease, metric) {
-        const sign = MetricEnumUtil.increaseBad(metric) ? '' : '+';
-        const absValue = Math.abs(percentageIncrease);
-        return `${sign}${formatPercentage(absValue, 1)} increase over ${this.priorYear()}`;
-    }
-    getPercentageOnly(percentageIncrease, metric) {
-        const sign = MetricEnumUtil.increaseBad(metric) ? '' : '+';
-        const absValue = Math.abs(percentageIncrease);
-        return `${sign}${formatPercentage(absValue, 1)}`;
-    }
-    getDescriptionOnly(percentageIncrease, metric) {
-        return `increase over ${this.priorYear()}`;
-    }
-    overlayBadgeClasses(percentageIncrease, metric, isCompact = false) {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'bg-purple-500/30 text-purple-200 border-purple-400/30';
-        }
-        else {
-            return 'bg-purple-100 text-purple-700 border-purple-300';
-        }
-    }
     formatMetricValue(value, metric, fromUiData = true) {
         if (metric.includes('REVENUE')) {
             return formatCurrency(value);
@@ -55381,197 +55450,180 @@ class FunnelMetricsVisualizationComponent {
     getMarkdownTooltipContent(markdown, title) {
         return { title, markdown };
     }
-    getGrowthSign(metric) {
-        return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
-    }
-    getGrowthIconSymbol(percentageIncrease) {
-        if (percentageIncrease > 0)
-            return '↗';
-        if (percentageIncrease < 0)
-            return '↘';
-        return '→';
-    }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "inline-flex", "flex-row", "items-center", "rounded-lg", "border", 3, "ngClass"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "text-sm", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-my-1", "-mr-1", "z-10", "inline-flex", "items-center", "gap-1", 3, "ngClass"], [1, "text-sm"], [1, "px-3", "py-1.5", "font-semibold", "text-xs", "inline-block"], ["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", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-xs", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "inline-flex", "flex-row", "items-center", "rounded", "border", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-extrabold", "tracking-tight", "border", "shadow-md", "transition-all", "duration-200", "-my-0.5", "-mr-1", "z-10", "inline-flex", "items-center", "gap-0.5", 3, "ngClass"], [1, "text-xs"], [1, "px-2.5", "py-1", "text-xs", "font-semibold", "inline-block"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], ["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", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-xs", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 27, 19, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 21, 18, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.funnelStages());
-        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent, TargetChangeBadgeComponent, TooltipDirective, TooltipContainerComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FunnelMetricsVisualizationComponent, [{
         type: Component,
         args: [{
                 selector: 'symphiq-funnel-metrics-visualization',
                 standalone: true,
-                imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent],
+                imports: [CommonModule, PacingStatusBadgeComponent, TargetChangeBadgeComponent, TooltipDirective, TooltipContainerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <symphiq-tooltip-container />
-      <div class="space-y-8">
-        @for (stage of funnelStages(); track stage.stageMetric.metric) {
-          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
-            <div class="flex items-start justify-between mb-6">
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
-                    {{ getMetricTitle(stage.stageMetric) }}
-                  </h3>
-                  @if (stage.stageMetric.description) {
-                    <button
-                      type="button"
-                      [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
-                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
-                      tooltipType="markdown"
-                      tooltipPosition="right">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
-                </p>
-                <div [ngClass]="containerBadgeClasses()" class="inline-flex flex-row items-center rounded-lg border">
-                  <div [ngClass]="overlayBadgeClasses(stage.stageMetric.percentageIncrease, stage.stageMetric.metric)"
-                       class="px-2.5 py-0.5 rounded-md font-extrabold text-sm tracking-tight border-2 shadow-lg transition-all duration-200 -my-1 -mr-1 z-10 inline-flex items-center gap-1">
-                    <span class="text-sm">{{ getGrowthIconSymbol(stage.stageMetric.percentageIncrease) }}</span>
-                    {{ getPercentageOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
-                  </div>
-                  <div class="px-3 py-1.5 font-semibold text-xs inline-block">
-                    {{ getDescriptionOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
-                  </div>
-                </div>
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                    Pace for {{ currentYear() }}
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
-                  </p>
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                    [showAsFullText]="true"
-                    [showEmphasizedPercentage]="true"
-                  />
-                </div>
-              }
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-3">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-3">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
-                      <div class="flex items-center gap-2 mb-4">
-                        <p [ngClass]="relatedMetricNameClasses()" class="text-xs font-semibold leading-tight">
-                          {{ getMetricTitle(metric.calc) }}
-                        </p>
-                        @if (metric.calc.description) {
-                          <button
-                            type="button"
-                            [ngClass]="infoIconClasses()"
-                            class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                            [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
-                            tooltipType="markdown"
-                            tooltipPosition="right">
-                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                          </button>
-                        }
-                      </div>
-                      <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                            {{ priorYear() }} Actual
-                          </p>
-                          <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
-                            {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
-                          </p>
-                        </div>
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                            {{ currentYear() }} Target
-                          </p>
-                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
-                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
-                          </p>
-                          <div [ngClass]="relatedContainerBadgeClasses()" class="inline-flex flex-row items-center rounded border">
-                            <div [ngClass]="overlayBadgeClasses(metric.calc.percentageIncrease, metric.calc.metric, true)"
-                                 class="px-2 py-0.5 rounded text-xs font-extrabold tracking-tight border shadow-md transition-all duration-200 -my-0.5 -mr-1 z-10 inline-flex items-center gap-0.5">
-                              <span class="text-xs">{{ getGrowthIconSymbol(metric.calc.percentageIncrease) }}</span>
-                              {{ getPercentageOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
-                            </div>
-                            <div class="px-2.5 py-1 text-xs font-semibold inline-block">
-                              {{ getDescriptionOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
-                            </div>
-                          </div>
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                              Pace for {{ currentYear() }}
-                            </p>
-                            <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
-                              {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
-                            </p>
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                              [showAsFullText]="true"
-                              [isCompact]="true"
-                              [showEmphasizedPercentage]="true"
-                            />
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div class="space-y-6">
+      <symphiq-tooltip-container />
+      <div class="space-y-8">
+        @for (stage of funnelStages(); track stage.stageMetric.metric) {
+          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
+            <div class="flex items-start justify-between mb-6">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
+                    {{ getMetricTitle(stage.stageMetric) }}
+                  </h3>
+                  @if (stage.stageMetric.description) {
+                    <button
+                      type="button"
+                      [ngClass]="infoIconClasses()"
+                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
+                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
+                      tooltipType="markdown"
+                      tooltipPosition="right">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
+                </p>
+                <symphiq-target-change-badge
+                  [viewMode]="viewMode()"
+                  [percentageChange]="stage.stageMetric.percentageIncrease"
+                  [metric]="stage.stageMetric.metric"
+                  [priorYear]="priorYear()"
+                />
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Pace for {{ currentYear() }}
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
+                  </p>
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                    [showAsFullText]="true"
+                    [showEmphasizedPercentage]="true"
+                  />
+                </div>
+              }
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-3">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-3">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
+                      <div class="flex items-center gap-2 mb-4">
+                        <p [ngClass]="relatedMetricNameClasses()" class="text-xs font-semibold leading-tight">
+                          {{ getMetricTitle(metric.calc) }}
+                        </p>
+                        @if (metric.calc.description) {
+                          <button
+                            type="button"
+                            [ngClass]="infoIconClasses()"
+                            class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                            [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
+                            tooltipType="markdown"
+                            tooltipPosition="right">
+                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                          </button>
+                        }
+                      </div>
+                      <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ priorYear() }} Actual
+                          </p>
+                          <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
+                            {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
+                          </p>
+                        </div>
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ currentYear() }} Target
+                          </p>
+                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
+                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
+                          </p>
+                          <symphiq-target-change-badge
+                            [viewMode]="viewMode()"
+                            [percentageChange]="metric.calc.percentageIncrease"
+                            [metric]="metric.calc.metric"
+                            [priorYear]="priorYear()"
+                            [isCompact]="true"
+                          />
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                              Pace for {{ currentYear() }}
+                            </p>
+                            <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
+                              {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
+                            </p>
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                              [showAsFullText]="true"
+                              [isCompact]="true"
+                              [showEmphasizedPercentage]="true"
+                            />
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 176 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 170 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -84478,5 +84530,5 @@ var pieChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
 //# sourceMappingURL=symphiq-components.mjs.map