@eric-emg/symphiq-components 1.2.227 → 1.2.228

package/fesm2022/symphiq-components.mjs

@@ -54794,6 +54794,53 @@ function extractProjectedValue(pacingResponse, metricEnum) {
     return projectedValue;
 }
 
+function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 3)(4, "span", 3);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.overlayPositionClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.overlayBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.extractPercentage(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.sizeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.iconSizeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.iconClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.iconSymbol(), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.displayTextWithoutPercentage());
+} }
+function PacingStatusBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.sizeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.iconSizeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.iconClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.iconSymbol(), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.displayText());
+} }
 class PacingStatusBadgeComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -54801,6 +54848,7 @@ class PacingStatusBadgeComponent {
         this.status = input('on-pace', ...(ngDevMode ? [{ debugName: "status" }] : []));
         this.showAsFullText = input(false, ...(ngDevMode ? [{ debugName: "showAsFullText" }] : []));
         this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+        this.showEmphasizedPercentage = input(false, ...(ngDevMode ? [{ debugName: "showEmphasizedPercentage" }] : []));
         this.displayInfo = computed(() => {
             const isDark = this.viewMode() === ViewModeEnum.DARK;
             return getPacingDisplayInfo(this.pacingPercentage(), this.status(), isDark);
@@ -54811,11 +54859,16 @@ class PacingStatusBadgeComponent {
         }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
         this.sizeClasses = computed(() => {
             const isCompact = this.isCompact();
+            const showEmphasized = this.showEmphasizedPercentage();
             const baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-semibold transition-all';
             if (isCompact) {
-                return `${baseClasses} px-2.5 py-1 text-xs`;
+                return showEmphasized
+                    ? `${baseClasses} px-2.5 py-1 pt-2.5 text-xs`
+                    : `${baseClasses} px-2.5 py-1 text-xs`;
             }
-            return `${baseClasses} px-3 py-1.5 text-xs`;
+            return showEmphasized
+                ? `${baseClasses} px-3 py-1.5 pt-3 text-xs`
+                : `${baseClasses} px-3 py-1.5 text-xs`;
         }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
         this.iconClasses = computed(() => {
             return this.displayInfo().colorClass;
@@ -54837,25 +54890,59 @@ class PacingStatusBadgeComponent {
             }
             return this.displayInfo().displayText;
         }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+        this.extractPercentage = computed(() => {
+            const fullText = this.showAsFullText()
+                ? formatPacingDisplayFullText(this.pacingPercentage(), this.status())
+                : this.displayInfo().displayText;
+            const match = fullText.match(/(\d+\.?\d*%)/);
+            return match ? match[1] : '';
+        }, ...(ngDevMode ? [{ debugName: "extractPercentage" }] : []));
+        this.displayTextWithoutPercentage = computed(() => {
+            const fullText = this.showAsFullText()
+                ? formatPacingDisplayFullText(this.pacingPercentage(), this.status())
+                : this.displayInfo().displayText;
+            const textWithoutPercentage = fullText.replace(/\s*at\s*\d+\.?\d*%\s*/, ' ').replace(/\s+/, ' ');
+            return textWithoutPercentage;
+        }, ...(ngDevMode ? [{ debugName: "displayTextWithoutPercentage" }] : []));
+        this.overlayBadgeClasses = computed(() => {
+            const isDark = this.viewMode() === ViewModeEnum.DARK;
+            const status = this.status();
+            const isCompact = this.isCompact();
+            const baseClasses = 'px-2.5 py-0.5 rounded-md font-extrabold tracking-tight';
+            const sizeClass = isCompact ? 'text-xs' : 'text-sm';
+            if (isDark) {
+                if (status === 'ahead') {
+                    return `${baseClasses} ${sizeClass} bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/50`;
+                }
+                else if (status === 'behind') {
+                    return `${baseClasses} ${sizeClass} bg-rose-500/95 text-white border-rose-400/50 shadow-rose-500/50`;
+                }
+                else {
+                    return `${baseClasses} ${sizeClass} bg-amber-500/95 text-white border-amber-400/50 shadow-amber-500/50`;
+                }
+            }
+            else {
+                if (status === 'ahead') {
+                    return `${baseClasses} ${sizeClass} bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/50`;
+                }
+                else if (status === 'behind') {
+                    return `${baseClasses} ${sizeClass} bg-rose-600 text-white border-rose-500 shadow-rose-600/50`;
+                }
+                else {
+                    return `${baseClasses} ${sizeClass} bg-amber-600 text-white border-amber-500 shadow-amber-600/50`;
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "overlayBadgeClasses" }] : []));
+        this.overlayPositionClasses = computed(() => {
+            const isCompact = this.isCompact();
+            return isCompact ? '-top-0.5 left-1.5' : '-top-1 left-2';
+        }, ...(ngDevMode ? [{ debugName: "overlayPositionClasses" }] : []));
     }
     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"] }, decls: 5, vars: 8, consts: [[3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "span", 0);
-            i0.ɵɵtext(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "span");
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd()();
+    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, "relative", "inline-flex"], [3, "ngClass", "class"], [1, "absolute", "z-10", "border-2", "shadow-lg", "transition-all", "duration-200", 3, "ngClass"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8, 12, "div", 0)(1, PacingStatusBadgeComponent_Conditional_1_Template, 5, 8, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵclassMap(ctx.sizeClasses());
-            i0.ɵɵproperty("ngClass", ctx.badgeClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassMap(ctx.iconSizeClasses());
-            i0.ɵɵproperty("ngClass", ctx.iconClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.iconSymbol(), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.displayText());
+            i0.ɵɵconditional(ctx.showEmphasizedPercentage() ? 0 : 1);
         } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PacingStatusBadgeComponent, [{
@@ -54866,41 +54953,60 @@ class PacingStatusBadgeComponent {
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
-    <div
-      [ngClass]="badgeClasses()"
-      [class]="sizeClasses()"
-    >
-      <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-        {{ iconSymbol() }}
-      </span>
-      <span>{{ displayText() }}</span>
-    </div>
+    @if (showEmphasizedPercentage()) {
+      <div class="relative inline-flex">
+        <div [ngClass]="overlayBadgeClasses()"
+             [class]="overlayPositionClasses()"
+             class="absolute z-10 border-2 shadow-lg transition-all duration-200">
+          {{ extractPercentage() }}
+        </div>
+        <div
+          [ngClass]="badgeClasses()"
+          [class]="sizeClasses()"
+        >
+          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+            {{ iconSymbol() }}
+          </span>
+          <span>{{ displayTextWithoutPercentage() }}</span>
+        </div>
+      </div>
+    } @else {
+      <div
+        [ngClass]="badgeClasses()"
+        [class]="sizeClasses()"
+      >
+        <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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 23 }); })();
+    }], 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: 42 }); })();
 
 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", 13);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 15);
+    i0.ɵɵelement(2, "path", 16);
     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_20_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_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", 15);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 17);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -54914,27 +55020,27 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status)("showAsFullText", true);
+    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_21_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 23);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 25);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 29);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 32);
+    i0.ɵɵelement(2, "path", 16);
     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_21_For_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 25);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 27);
+    i0.ɵɵelementStart(3, "p", 29);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 30);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
@@ -54948,30 +55054,33 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status)("showAsFullText", true)("isCompact", true);
+    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_21_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "p", 24);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_4_Template, 3, 2, "button", 23);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_4_Template, 3, 2, "button", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 24)(6, "div")(7, "p", 25);
+    i0.ɵɵelementStart(5, "div", 26)(6, "div")(7, "p", 27);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 26);
+    i0.ɵɵelementStart(9, "p", 28);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 25);
+    i0.ɵɵelementStart(11, "div")(12, "p", 27);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 27);
+    i0.ɵɵelementStart(14, "p", 29);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 28);
-    i0.ɵɵtext(17);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Conditional_18_Template, 6, 9, "div");
+    i0.ɵɵelementStart(16, "div", 12)(17, "div", 30);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 31);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_21_Template, 6, 10, "div");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
@@ -54999,20 +55108,24 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Template
     i0.ɵɵproperty("ngClass", ctx_r1.relatedTargetValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.overlayBadgeClasses(metric_r3.calc.percentageIncrease, metric_r3.calc.metric, true));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getPercentageOnly(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTargetIncreaseText(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDescriptionOnly(metric_r3.calc.percentageIncrease, metric_r3.calc.metric), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 18 : -1);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 21 : -1);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 16);
-    i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 18);
+    i0.ɵɵelementStart(1, "div", 19)(2, "p", 20);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_21_For_6_Template, 19, 15, "div", 20, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 21);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Template, 22, 17, "div", 22, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55041,12 +55154,15 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(16, "p", 11);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 12);
-    i0.ɵɵtext(19);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template, 6, 8, "div");
+    i0.ɵɵelementStart(18, "div", 12)(19, "div", 13);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 14);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_21_Template, 7, 2);
+    i0.ɵɵconditionalCreate(24, FunnelMetricsVisualizationComponent_For_4_Conditional_24_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = ctx.$implicit;
@@ -55074,14 +55190,18 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.overlayBadgeClasses(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getPercentageOnly(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTargetIncreaseText(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDescriptionOnly(stage_r1.stageMetric.percentageIncrease, stage_r1.stageMetric.metric), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 20 : -1);
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 23 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 21 : -1);
+    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 24 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
@@ -55219,6 +55339,42 @@ class FunnelMetricsVisualizationComponent {
         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;
+        const isIncrease = !MetricEnumUtil.increaseBad(metric);
+        if (isDark) {
+            if (isIncrease) {
+                return isCompact
+                    ? 'bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/40'
+                    : 'bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/50';
+            }
+            else {
+                return isCompact
+                    ? 'bg-purple-500/95 text-white border-purple-400/50 shadow-purple-500/40'
+                    : 'bg-purple-500/95 text-white border-purple-400/50 shadow-purple-500/50';
+            }
+        }
+        else {
+            if (isIncrease) {
+                return isCompact
+                    ? 'bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/40'
+                    : 'bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/50';
+            }
+            else {
+                return isCompact
+                    ? 'bg-purple-600 text-white border-purple-500 shadow-purple-600/40'
+                    : 'bg-purple-600 text-white border-purple-500 shadow-purple-600/50';
+            }
+        }
+    }
     formatMetricValue(value, metric, fromUiData = true) {
         if (metric.includes('REVENUE')) {
             return formatCurrency(value);
@@ -55248,11 +55404,11 @@ class FunnelMetricsVisualizationComponent {
         return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
     }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "px-3", "py-1.5", "rounded-lg", "font-semibold", "text-xs", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-xs", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded", "text-xs", "font-semibold", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    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, "relative", "inline-flex"], [1, "absolute", "-top-1", "left-2", "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "text-sm", "tracking-tight", "z-10", "border-2", "shadow-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "px-3", "py-1.5", "pt-3", "rounded-lg", "font-semibold", "text-xs", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "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, "absolute", "-top-0.5", "left-1.5", "px-2", "py-0.5", "rounded", "text-xs", "font-extrabold", "tracking-tight", "z-10", "border", "shadow-md", "transition-all", "duration-200", 3, "ngClass"], [1, "px-2.5", "py-1", "pt-2.5", "rounded", "text-xs", "font-semibold", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "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, 22, 16, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 25, 18, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55295,7 +55451,7 @@ class FunnelMetricsVisualizationComponent {
               </div>
             </div>
 
-            <div class="grid grid-cols-3 gap-6 mb-4">
+            <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
@@ -55311,8 +55467,14 @@ class FunnelMetricsVisualizationComponent {
                 <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
                   {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
                 </p>
-                <div [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-xs inline-block">
-                  {{ getTargetIncreaseText(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
+                <div class="relative inline-flex">
+                  <div [ngClass]="overlayBadgeClasses(stage.stageMetric.percentageIncrease, stage.stageMetric.metric)"
+                       class="absolute -top-1 left-2 px-2.5 py-0.5 rounded-md font-extrabold text-sm tracking-tight z-10 border-2 shadow-lg transition-all duration-200">
+                    {{ getPercentageOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
+                  </div>
+                  <div [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5 pt-3 rounded-lg font-semibold text-xs inline-block">
+                    {{ getDescriptionOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
+                  </div>
                 </div>
               </div>
               @if (stage.pacingInfo) {
@@ -55328,6 +55490,7 @@ class FunnelMetricsVisualizationComponent {
                     [pacingPercentage]="stage.pacingInfo.pacingPercentage"
                     [status]="stage.pacingInfo.status"
                     [showAsFullText]="true"
+                    [showEmphasizedPercentage]="true"
                   />
                 </div>
               }
@@ -55361,7 +55524,7 @@ class FunnelMetricsVisualizationComponent {
                           </button>
                         }
                       </div>
-                      <div class="grid grid-cols-3 gap-4">
+                      <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
@@ -55377,8 +55540,14 @@ class FunnelMetricsVisualizationComponent {
                           <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
                             {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
                           </p>
-                          <div [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1 rounded text-xs font-semibold inline-block">
-                            {{ getTargetIncreaseText(metric.calc.percentageIncrease, metric.calc.metric) }}
+                          <div class="relative inline-flex">
+                            <div [ngClass]="overlayBadgeClasses(metric.calc.percentageIncrease, metric.calc.metric, true)"
+                                 class="absolute -top-0.5 left-1.5 px-2 py-0.5 rounded text-xs font-extrabold tracking-tight z-10 border shadow-md transition-all duration-200">
+                              {{ getPercentageOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
+                            </div>
+                            <div [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1 pt-2.5 rounded text-xs font-semibold inline-block">
+                              {{ getDescriptionOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
+                            </div>
                           </div>
                         </div>
                         @if (metric.pacingInfo) {
@@ -55395,6 +55564,7 @@ class FunnelMetricsVisualizationComponent {
                               [status]="metric.pacingInfo.status"
                               [showAsFullText]="true"
                               [isCompact]="true"
+                              [showEmphasizedPercentage]="true"
                             />
                           </div>
                         }
@@ -55411,7 +55581,7 @@ class FunnelMetricsVisualizationComponent {
   `
             }]
     }], 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: 160 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 174 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);