@eric-emg/symphiq-components 1.2.229 → 1.2.231

package/fesm2022/symphiq-components.mjs

@@ -54795,29 +54795,28 @@ function extractProjectedValue(pacingResponse, metricEnum) {
 }
 
 function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
-    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2)(2, "span", 3);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 3)(4, "span", 3);
-    i0.ɵɵtext(5);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵelementStart(5, "div")(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.containerClasses());
     i0.ɵɵadvance();
     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();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.extractPercentage(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.sizeClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.displayTextWithoutPercentage());
 } }
@@ -54830,7 +54829,7 @@ function PacingStatusBadgeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r0.sizeClasses());
+    i0.ɵɵclassMap(ctx_r0.fullBadgeSizeClasses());
     i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.iconSizeClasses());
@@ -54852,18 +54851,30 @@ class PacingStatusBadgeComponent {
             const isDark = this.viewMode() === ViewModeEnum.DARK;
             return getPacingDisplayInfo(this.pacingPercentage(), this.status(), isDark);
         }, ...(ngDevMode ? [{ debugName: "displayInfo" }] : []));
+        this.containerClasses = computed(() => {
+            const info = this.displayInfo();
+            return `${info.bgClass} ${info.borderClass} border`;
+        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
         this.badgeClasses = computed(() => {
             const info = this.displayInfo();
             return `${info.bgClass} ${info.colorClass} ${info.borderClass}`;
         }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
         this.sizeClasses = computed(() => {
             const isCompact = this.isCompact();
-            const baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-semibold transition-all';
+            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-3 py-1.5 text-xs`;
         }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
+        this.fullBadgeSizeClasses = computed(() => {
+            const isCompact = this.isCompact();
+            const baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-semibold transition-all';
+            if (isCompact) {
+                return `${baseClasses} px-2.5 py-1 text-xs`;
+            }
+            return `${baseClasses} px-3 py-1.5 text-xs`;
+        }, ...(ngDevMode ? [{ debugName: "fullBadgeSizeClasses" }] : []));
         this.iconClasses = computed(() => {
             return this.displayInfo().colorClass;
         }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
@@ -54912,7 +54923,7 @@ class PacingStatusBadgeComponent {
         }, ...(ngDevMode ? [{ debugName: "overlayBadgeClasses" }] : []));
     }
     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-col", "items-start"], [3, "ngClass", "class"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-mb-1", "ml-2", "z-10", 3, "ngClass"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 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: [[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);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.showEmphasizedPercentage() && ctx.hasPercentage() ? 0 : 1);
@@ -54927,25 +54938,24 @@ class PacingStatusBadgeComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
     @if (showEmphasizedPercentage() && hasPercentage()) {
-      <div class="inline-flex flex-col items-start">
+      <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 -mb-1 ml-2 z-10">
+             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
-          [ngClass]="badgeClasses()"
           [class]="sizeClasses()"
         >
-          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-            {{ iconSymbol() }}
-          </span>
           <span>{{ displayTextWithoutPercentage() }}</span>
         </div>
       </div>
     } @else {
       <div
         [ngClass]="badgeClasses()"
-        [class]="sizeClasses()"
+        [class]="fullBadgeSizeClasses()"
       >
         <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
           {{ iconSymbol() }}
@@ -54956,29 +54966,29 @@ class PacingStatusBadgeComponent {
   `
             }]
     }], 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: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 40 }); })();
 
 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", 15);
-    i0.ɵɵelement(2, "path", 16);
+    i0.ɵɵelementStart(1, "svg", 16);
+    i0.ɵɵelement(2, "path", 17);
     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_23_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_25_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", 17);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -54994,25 +55004,25 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_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_24_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 25);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 26);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 32);
-    i0.ɵɵelement(2, "path", 16);
+    i0.ɵɵelementStart(1, "svg", 35);
+    i0.ɵɵelement(2, "path", 17);
     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_24_For_6_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 27);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 28);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 29);
+    i0.ɵɵelementStart(3, "p", 30);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 33);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
@@ -55028,31 +55038,33 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_24_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_24_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "p", 24);
+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);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_4_Template, 3, 2, "button", 25);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_4_Template, 3, 2, "button", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 26)(6, "div")(7, "p", 27);
+    i0.ɵɵelementStart(5, "div", 27)(6, "div")(7, "p", 28);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 28);
+    i0.ɵɵelementStart(9, "p", 29);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 27);
+    i0.ɵɵelementStart(11, "div")(12, "p", 28);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 29);
+    i0.ɵɵelementStart(14, "p", 30);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 12)(17, "div", 30);
-    i0.ɵɵtext(18);
+    i0.ɵɵelementStart(16, "div", 31)(17, "div", 32)(18, "span", 33);
+    i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 31);
     i0.ɵɵtext(20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 34);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(21, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Conditional_21_Template, 6, 10, "div");
+    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Conditional_23_Template, 6, 10, "div");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
@@ -55080,24 +55092,26 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_24_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.ɵɵproperty("ngClass", ctx_r1.relatedContainerBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
+    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.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 21 : -1);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 23 : -1);
 } }
-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);
+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);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 21);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_24_For_6_Template, 22, 17, "div", 22, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 22);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_26_For_6_Template, 24, 18, "div", 23, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55126,15 +55140,17 @@ 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);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(18, "div", 12)(19, "div", 13)(20, "span", 14);
+    i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 14);
     i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 15);
+    i0.ɵɵtext(24);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template, 6, 9, "div");
+    i0.ɵɵconditionalCreate(25, FunnelMetricsVisualizationComponent_For_4_Conditional_25_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(24, FunnelMetricsVisualizationComponent_For_4_Conditional_24_Template, 7, 2);
+    i0.ɵɵconditionalCreate(26, FunnelMetricsVisualizationComponent_For_4_Conditional_26_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = ctx.$implicit;
@@ -55162,18 +55178,20 @@ 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.ɵɵproperty("ngClass", ctx_r1.containerBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
+    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.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 23 : -1);
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 24 : -1);
+    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 26 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
@@ -55233,6 +55251,16 @@ 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'
@@ -55356,12 +55384,19 @@ class FunnelMetricsVisualizationComponent {
     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-col", "items-start"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "text-sm", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-mb-1", "ml-2", "z-10", 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", "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, "px-2", "py-0.5", "rounded", "text-xs", "font-extrabold", "tracking-tight", "border", "shadow-md", "transition-all", "duration-200", "-mb-1", "ml-1.5", "z-10", 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", "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"], [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) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 25, 18, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 27, 19, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55420,12 +55455,13 @@ class FunnelMetricsVisualizationComponent {
                 <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
                   {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
                 </p>
-                <div class="inline-flex flex-col items-start">
+                <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 -mb-1 ml-2 z-10">
+                       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 [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-xs inline-block">
+                  <div class="px-3 py-1.5 font-semibold text-xs inline-block">
                     {{ getDescriptionOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
                   </div>
                 </div>
@@ -55493,12 +55529,13 @@ class FunnelMetricsVisualizationComponent {
                           <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
                             {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
                           </p>
-                          <div class="inline-flex flex-col items-start">
+                          <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 -mb-1 ml-1.5 z-10">
+                                 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 [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1 rounded text-xs font-semibold inline-block">
+                            <div class="px-2.5 py-1 text-xs font-semibold inline-block">
                               {{ getDescriptionOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
                             </div>
                           </div>
@@ -55534,7 +55571,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: 174 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 176 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);