@eric-emg/symphiq-components 1.2.242 → 1.2.243

package/fesm2022/symphiq-components.mjs

@@ -32218,7 +32218,7 @@ class ShadowElevationDirective {
                 selector: '[symphiqShadowElevation]',
                 standalone: true
             }]
-    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type: Object, decorators: [{
+    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [PLATFORM_ID]
             }] }], { scrollContainer: [{
@@ -47226,7 +47226,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             // Get the scrollable element once for all features
             // Priority 1: Use the scrollElement passed directly from parent (preferred method)
             // Priority 2: Fall back to querying by scrollContainerId (legacy method)
-            let scrollElement = this.scrollElement() || null;
+            const scrollElement = this.scrollElement() || null;
             let elementSource = 'none';
             if (scrollElement) {
                 elementSource = 'passed-from-parent';
@@ -57157,9 +57157,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r4.targetValue, metric_r4.metric, false), " ");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r4.percentageIncrease), 1), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", metric_r4.percentageIncrease >= 0 ? "text-emerald-500" : "text-red-500");
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵattribute("d", metric_r4.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
@@ -57173,10 +57171,10 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ct
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "th", 43);
-    i0.ɵɵtext(12, "Change");
+    i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template, 15, 8, "tr", 44, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template, 15, 7, "tr", 44, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57322,7 +57320,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Year to Date (", ctx_r1.ytdDateRange(), ") ");
+    i0.ɵɵtextInterpolate1(" Year to Date (", ctx_r1.ytdDateRangeWithYear(), ") ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
@@ -57332,7 +57330,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" Same Period ", ctx_r1.priorYear(), " (", ctx_r1.ytdDateRange(), ") ");
+    i0.ɵɵtextInterpolate1(" Same Period Last Year (", ctx_r1.priorYearDateRange(), ") ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
@@ -57414,10 +57412,28 @@ class MetricReportModalComponent {
             return calculateMetricPacing(projectedValue, metric.targetValue, increaseBad);
         }, ...(ngDevMode ? [{ debugName: "pacingInfo" }] : []));
         this.ytdValue = computed(() => {
-            return this.metricData()?.currentValue || 0;
+            const pacingResponse = this.pacingMetrics();
+            const metric = this.metricData();
+            if (!pacingResponse || !metric)
+                return 0;
+            const resp = pacingResponse;
+            const soFarMetric = resp.soFarMetricValues?.find((m) => m.metric === metric.metric);
+            if (soFarMetric?.value) {
+                return parseFloat(soFarMetric.value);
+            }
+            return 0;
         }, ...(ngDevMode ? [{ debugName: "ytdValue" }] : []));
         this.samePeriodLastYearValue = computed(() => {
-            return this.metricData()?.currentValue || 0;
+            const pacingResponse = this.pacingMetrics();
+            const metric = this.metricData();
+            if (!pacingResponse || !metric)
+                return 0;
+            const resp = pacingResponse;
+            const lastYearMetric = resp.lastYearMetricValuesMonthly?.find((m) => m.metric === metric.metric);
+            if (lastYearMetric?.value) {
+                return parseFloat(lastYearMetric.value);
+            }
+            return 0;
         }, ...(ngDevMode ? [{ debugName: "samePeriodLastYearValue" }] : []));
         this.ytdChangePercentage = computed(() => {
             const current = this.ytdValue();
@@ -57428,10 +57444,28 @@ class MetricReportModalComponent {
         }, ...(ngDevMode ? [{ debugName: "ytdChangePercentage" }] : []));
         this.ytdDateRange = computed(() => {
             const now = new Date();
-            const start = `Jan 1`;
-            const end = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-            return `${start} - ${end}`;
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const startMonth = 'Jan';
+            const startDay = 1;
+            const endMonth = yesterday.toLocaleDateString('en-US', { month: 'short' });
+            const endDay = yesterday.getDate();
+            return `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
         }, ...(ngDevMode ? [{ debugName: "ytdDateRange" }] : []));
+        this.ytdDateRangeWithYear = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const year = this.currentYear();
+            return `Jan 1, ${year} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${year}`;
+        }, ...(ngDevMode ? [{ debugName: "ytdDateRangeWithYear" }] : []));
+        this.priorYearDateRange = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const priorYear = this.priorYear();
+            return `Jan 1, ${priorYear} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
+        }, ...(ngDevMode ? [{ debugName: "priorYearDateRange" }] : []));
         this.gapAnalysisText = computed(() => {
             const pacing = this.pacingInfo();
             const metric = this.metricData();
@@ -57674,8 +57708,8 @@ class MetricReportModalComponent {
             : 'bg-slate-700 hover:bg-slate-600 text-white';
     }
     static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "ngClass"], [1, "mt-3", "p-4", "rounded-lg", "border", "text-sm", "leading-relaxed", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [1, "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", 3, "ngClass"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 60, 47, "div", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "ngClass"], [1, "mt-3", "p-4", "rounded-lg", "border", "text-sm", "leading-relaxed", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [1, "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", 3, "ngClass"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 60, 46, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
@@ -57725,312 +57759,311 @@ class MetricReportModalComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isOpen()) {
-      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-          <div
-            [ngClass]="backdropClasses()"
-            class="fixed inset-0 backdrop-blur-md"
-            aria-hidden="true"
-            @fadeIn>
-          </div>
-
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-          <div
-            (click)="$event.stopPropagation()"
-            [ngClass]="modalContainerClasses()"
-            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
-            @slideUpFade>
-
-            <!-- Header -->
-            <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
-              <div class="flex items-start justify-between">
-                <div class="flex-1">
-                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-2">
-                    {{ metricTitle() }}
-                  </h3>
-                  @if (metricData()?.description) {
-                    <button
-                      type="button"
-                      (click)="toggleDefinition()"
-                      [ngClass]="definitionToggleClasses()"
-                      class="inline-flex items-center gap-2 text-sm font-medium transition-colors">
-                      <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>
-                      <span>What is {{ metricTitle() }}?</span>
-                      <svg
-                        [class.rotate-180]="showDefinition()"
-                        class="w-4 h-4 transition-transform"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-                  }
-                  @if (showDefinition() && metricData()?.description) {
-                    <div [ngClass]="definitionBoxClasses()" class="mt-3 p-4 rounded-lg border text-sm leading-relaxed">
-                      {{ metricData()?.description }}
-                    </div>
-                  }
-                </div>
-                <button
-                  (click)="close()"
-                  [ngClass]="closeButtonClasses()"
-                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
-                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <!-- Content -->
-            <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
-              <symphiq-tooltip-container />
-
-              <!-- At a Glance Summary -->
-              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                  At a Glance
-                </h4>
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                  <!-- YTD Value -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Year to Date ({{ ytdDateRange() }})
-                    </p>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
-                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
-                    </p>
-                    @if (ytdChangePercentage() !== null) {
-                      <symphiq-target-change-badge
-                        [viewMode]="viewMode()"
-                        [percentageChange]="ytdChangePercentage()!"
-                        [metric]="metricData()?.metric || ''"
-                        [priorYear]="priorYear()"
-                        [isCompact]="true"
-                      />
-                    }
-                  </div>
-
-                  <!-- Same Period Last Year -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Same Period {{ priorYear() }} ({{ ytdDateRange() }})
-                    </p>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Full Last Year -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Full {{ priorYear() }} Actual
-                    </p>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Current Pace -->
-                  @if (pacingInfo()) {
-                    <div>
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                        Pace for {{ currentYear() }}
-                      </p>
-                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
-                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
-                      </p>
-                      <symphiq-pacing-status-badge
-                        [viewMode]="viewMode()"
-                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                        [status]="pacingInfo()!.status"
-                        [showAsFullText]="false"
-                        [isCompact]="true"
-                        [showEmphasizedPercentage]="true"
-                      />
-                    </div>
-                  }
-
-                  <!-- Current Target -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      {{ currentYear() }} Target
-                    </p>
-                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Target Analysis -->
-              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                  Target Analysis
-                </h4>
-
-                <div class="mb-4">
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                    Your Target
-                  </p>
-                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
-                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
-                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
-                    from your {{ priorYear() }} actual of
-                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
-                  </p>
-                </div>
-
-                @if (pacingInfo()) {
-                  <div class="mb-4">
-                    <symphiq-pacing-status-badge
-                      [viewMode]="viewMode()"
-                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                      [status]="pacingInfo()!.status"
-                      [showAsFullText]="true"
-                      [isCompact]="false"
-                      [showEmphasizedPercentage]="true"
-                    />
-                  </div>
-
-                  <div class="mb-4">
-                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                      {{ gapAnalysisText() }}
-                    </p>
-                  </div>
-
-                  <!-- Progress Bar -->
-                  <div class="space-y-2">
-                    <div class="flex justify-between text-xs" [ngClass]="labelClasses()">
-                      <span>Progress to Target</span>
-                      <span>{{ formatPercentage(progressToTarget(), 1) }}</span>
-                    </div>
-                    <div [ngClass]="progressBarBgClasses()" class="h-3 rounded-full overflow-hidden">
-                      <div
-                        [ngClass]="progressBarFillClasses()"
-                        [style.width.%]="Math.min(progressToTarget(), 100)"
-                        class="h-full transition-all duration-500">
-                      </div>
-                    </div>
-                  </div>
-                }
-              </div>
-
-              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
-              @if (contributingMetrics().length > 0) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Contributing Metrics
-                  </h4>
-                  <div class="overflow-x-auto">
-                    <table class="w-full">
-                      <thead>
-                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
-                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Change</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        @for (metric of contributingMetrics(); track metric.metric) {
-                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
-                            <td class="py-3 px-4">
-                              <div class="flex items-center gap-2">
-                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
-                                @if (metric.description) {
-                                  <button
-                                    type="button"
-                                    [ngClass]="infoIconClasses()"
-                                    class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                                    [libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
-                                    tooltipType="markdown"
-                                    tooltipPosition="right">
-                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                  </button>
-                                }
-                              </div>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
-                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
-                              </span>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <div class="flex items-center justify-end gap-2">
-                                <span class="text-sm font-medium">
-                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
-                                </span>
-                                <svg
-                                  [ngClass]="metric.percentageIncrease >= 0 ? 'text-emerald-500' : 'text-red-500'"
-                                  class="w-4 h-4"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24">
-                                  <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
-                                </svg>
-                              </div>
-                            </td>
-                          </tr>
-                        }
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              }
-
-              <!-- Pacing Chart -->
-              @if (pacingChartData()) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Pace
-                  </h4>
-                  <div class="min-h-[400px]">
-                    <symphiq-line-chart
-                      [chart]="pacingChartData()!"
-                      [showAxisLabels]="true"
-                      [viewMode]="viewMode()"
-                      [currencySymbol]="'$'"
-                    />
-                  </div>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
-                    {{ chartDescriptionText() }}
-                  </p>
-                </div>
-              }
-            </div>
-
-            <!-- Footer -->
-            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
-              <button
-                (click)="close()"
-                [ngClass]="closeFooterButtonClasses()"
-                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    }
+                template: `
+    @if (isOpen()) {
+      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            [ngClass]="backdropClasses()"
+            class="fixed inset-0 backdrop-blur-md"
+            aria-hidden="true"
+            @fadeIn>
+          </div>
+
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <div
+            (click)="$event.stopPropagation()"
+            [ngClass]="modalContainerClasses()"
+            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
+            @slideUpFade>
+
+            <!-- Header -->
+            <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
+              <div class="flex items-start justify-between">
+                <div class="flex-1">
+                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-2">
+                    {{ metricTitle() }}
+                  </h3>
+                  @if (metricData()?.description) {
+                    <button
+                      type="button"
+                      (click)="toggleDefinition()"
+                      [ngClass]="definitionToggleClasses()"
+                      class="inline-flex items-center gap-2 text-sm font-medium transition-colors">
+                      <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>
+                      <span>What is {{ metricTitle() }}?</span>
+                      <svg
+                        [class.rotate-180]="showDefinition()"
+                        class="w-4 h-4 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                  }
+                  @if (showDefinition() && metricData()?.description) {
+                    <div [ngClass]="definitionBoxClasses()" class="mt-3 p-4 rounded-lg border text-sm leading-relaxed">
+                      {{ metricData()?.description }}
+                    </div>
+                  }
+                </div>
+                <button
+                  (click)="close()"
+                  [ngClass]="closeButtonClasses()"
+                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Content -->
+            <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
+              <symphiq-tooltip-container />
+
+              <!-- At a Glance Summary -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  At a Glance
+                </h4>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  <!-- YTD Value -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Year to Date ({{ ytdDateRangeWithYear() }})
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
+                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
+                    </p>
+                    @if (ytdChangePercentage() !== null) {
+                      <symphiq-target-change-badge
+                        [viewMode]="viewMode()"
+                        [percentageChange]="ytdChangePercentage()!"
+                        [metric]="metricData()?.metric || ''"
+                        [priorYear]="priorYear()"
+                        [isCompact]="true"
+                      />
+                    }
+                  </div>
+
+                  <!-- Same Period Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Same Period Last Year ({{ priorYearDateRange() }})
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Full Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Full {{ priorYear() }} Actual
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Current Pace -->
+                  @if (pacingInfo()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Pace for {{ currentYear() }}
+                      </p>
+                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
+                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
+                      </p>
+                      <symphiq-pacing-status-badge
+                        [viewMode]="viewMode()"
+                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                        [status]="pacingInfo()!.status"
+                        [showAsFullText]="false"
+                        [isCompact]="true"
+                        [showEmphasizedPercentage]="true"
+                      />
+                    </div>
+                  }
+
+                  <!-- Current Target -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      {{ currentYear() }} Target
+                    </p>
+                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Target Analysis -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  Target Analysis
+                </h4>
+
+                <div class="mb-4">
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Your Target
+                  </p>
+                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
+                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
+                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
+                    from your {{ priorYear() }} actual of
+                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
+                  </p>
+                </div>
+
+                @if (pacingInfo()) {
+                  <div class="mb-4">
+                    <symphiq-pacing-status-badge
+                      [viewMode]="viewMode()"
+                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                      [status]="pacingInfo()!.status"
+                      [showAsFullText]="true"
+                      [isCompact]="false"
+                      [showEmphasizedPercentage]="true"
+                    />
+                  </div>
+
+                  <div class="mb-4">
+                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                      {{ gapAnalysisText() }}
+                    </p>
+                  </div>
+
+                  <!-- Progress Bar -->
+                  <div class="space-y-2">
+                    <div class="flex justify-between text-xs" [ngClass]="labelClasses()">
+                      <span>Progress to Target</span>
+                      <span>{{ formatPercentage(progressToTarget(), 1) }}</span>
+                    </div>
+                    <div [ngClass]="progressBarBgClasses()" class="h-3 rounded-full overflow-hidden">
+                      <div
+                        [ngClass]="progressBarFillClasses()"
+                        [style.width.%]="Math.min(progressToTarget(), 100)"
+                        class="h-full transition-all duration-500">
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+
+              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
+              @if (contributingMetrics().length > 0) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Contributing Metrics
+                  </h4>
+                  <div class="overflow-x-auto">
+                    <table class="w-full">
+                      <thead>
+                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
+                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (metric of contributingMetrics(); track metric.metric) {
+                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
+                            <td class="py-3 px-4">
+                              <div class="flex items-center gap-2">
+                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
+                                @if (metric.description) {
+                                  <button
+                                    type="button"
+                                    [ngClass]="infoIconClasses()"
+                                    class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                                    [libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
+                                    tooltipType="markdown"
+                                    tooltipPosition="right">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                  </button>
+                                }
+                              </div>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
+                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
+                              </span>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <div class="flex items-center justify-end gap-2">
+                                <span class="text-sm font-medium">
+                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
+                                </span>
+                                <svg
+                                  class="w-4 h-4 text-emerald-500"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24">
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
+                                </svg>
+                              </div>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+
+              <!-- Pacing Chart -->
+              @if (pacingChartData()) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Pace
+                  </h4>
+                  <div class="min-h-[400px]">
+                    <symphiq-line-chart
+                      [chart]="pacingChartData()!"
+                      [showAxisLabels]="true"
+                      [viewMode]="viewMode()"
+                      [currencySymbol]="'$'"
+                    />
+                  </div>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
+                    {{ chartDescriptionText() }}
+                  </p>
+                </div>
+              }
+            </div>
+
+            <!-- Footer -->
+            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
+              <button
+                (click)="close()"
+                [ngClass]="closeFooterButtonClasses()"
+                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 345 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 344 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
@@ -58454,7 +58487,8 @@ class InitialTargetSettingComponent {
             if (!selectedMetric || !selectedMetric.isFunnelStage) {
                 return [];
             }
-            return calcs.filter(c => !c.isFunnelStage && c.funnelMetric === metricEnum);
+            return calcs.filter(c => !c.isFunnelStage && c.funnelMetric === metricEnum)
+                .sort((a, b) => (a.relatedInd ?? 0) - (b.relatedInd ?? 0));
         }, ...(ngDevMode ? [{ debugName: "selectedContributingMetrics" }] : []));
         this.animatedIncreaseAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedIncreaseAmount" }] : []));
         this.animatedPercentageGrowth = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentageGrowth" }] : []));