@eric-emg/symphiq-components 1.2.252 → 1.2.254

package/fesm2022/symphiq-components.mjs

@@ -55883,7 +55883,7 @@ function StickySubmitBarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "p", 10);
-    i0.ɵɵtext(4, " Ready to set your targets ");
+    i0.ɵɵtext(4, " Ready to save your targets ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -55907,7 +55907,7 @@ function StickySubmitBarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Setting Targets...");
+    i0.ɵɵtext(4, "Saving Targets...");
     i0.ɵɵelementEnd();
 } }
 function StickySubmitBarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
@@ -55929,7 +55929,7 @@ class StickySubmitBarComponent {
         this.isValid = input(false, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
         this.isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.validationMessage = input('', ...(ngDevMode ? [{ debugName: "validationMessage" }] : []));
-        this.buttonText = input('Set Revenue Targets', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+        this.buttonText = input('Save Metric Targets', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
         this.showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : []));
         this.submitClick = output();
         this.cancelClick = output();
@@ -56020,7 +56020,7 @@ class StickySubmitBarComponent {
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
                 <p [ngClass]="readyMessageClasses()" class="text-sm font-medium">
-                  Ready to set your targets
+                  Ready to save your targets
                 </p>
               </div>
             }
@@ -56045,7 +56045,7 @@ class StickySubmitBarComponent {
                   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                   <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                <span>Setting Targets...</span>
+                <span>Saving Targets...</span>
               } @else {
                 <span>{{ buttonText() }}</span>
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -57440,17 +57440,17 @@ class ProgressToTargetChartComponent {
 
 const _forTrack0$i = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵelementStart(0, "button", 10);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 32);
-    i0.ɵɵelement(2, "path", 33);
+    i0.ɵɵelementStart(1, "svg", 33);
+    i0.ɵɵelement(2, "path", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(ctx_r1.metricData().description, ctx_r1.metricTitle()));
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
+    i0.ɵɵelement(0, "symphiq-target-change-badge", 22);
 } if (rf & 2) {
     let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57460,11 +57460,9 @@ function MetricReportModalComponent_Conditional_0_Conditional_47_Template(rf, ct
     i0.ɵɵelementStart(0, "div")(1, "p", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 22);
+    i0.ɵɵelementStart(3, "p", 23);
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 34);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57476,30 +57474,37 @@ function MetricReportModalComponent_Conditional_0_Conditional_47_Template(rf, ct
     i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.pacingInfo().projectedValue, ((tmp_5_0 = ctx_r1.metricData()) == null ? null : tmp_5_0.metric) || "", false), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div")(1, "p", 24);
     i0.ɵɵtext(2, " Year-over-Year Trend ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "symphiq-area-chart", 35);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 35);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_53_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openExpandedChart(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(4, "symphiq-area-chart", 36);
+    i0.ɵɵelementStart(5, "div", 37);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 38);
+    i0.ɵɵelement(7, "path", 39);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("chart", ctx_r1.trendChartData())("showAxisLabels", false)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "80px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandIconClasses());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
+    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 40);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 36);
+    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 41);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -57512,64 +57517,64 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵproperty("data", ctx_r1.progressToTargetData())("viewMode", ctx_r1.viewMode());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵelementStart(0, "button", 10);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 51);
-    i0.ɵɵelement(2, "path", 33);
+    i0.ɵɵelementStart(1, "svg", 56);
+    i0.ɵɵelement(2, "path", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const metric_r3 = i0.ɵɵnextContext().$implicit;
+    const metric_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r4.description, ctx_r1.getMetricTitle(metric_r4)));
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 42)(1, "td", 43)(2, "div", 44)(3, "span", 45);
+    i0.ɵɵelementStart(0, "tr", 47)(1, "td", 48)(2, "div", 49)(3, "span", 50);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 11);
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 46)(7, "span", 47);
+    i0.ɵɵelementStart(6, "td", 51)(7, "span", 52);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 46)(10, "div", 48)(11, "span", 45);
+    i0.ɵɵelementStart(9, "td", 51)(10, "div", 53)(11, "span", 50);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 49);
-    i0.ɵɵelement(14, "path", 50);
+    i0.ɵɵelementStart(13, "svg", 54);
+    i0.ɵɵelement(14, "path", 55);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const metric_r3 = ctx.$implicit;
+    const metric_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.tableRowClasses());
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r3));
+    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r4));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.description ? 5 : -1);
+    i0.ɵɵconditional(metric_r4.description ? 5 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.targetValue, metric_r3.metric, false), " ");
+    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_r3.percentageIncrease), 1), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r4.percentageIncrease), 1), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("d", metric_r3.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
+    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_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
+    i0.ɵɵelementStart(0, "div", 15)(1, "h4", 16);
     i0.ɵɵtext(2, " Contributing Metric Targets ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 37)(4, "table", 38)(5, "thead")(6, "tr", 39)(7, "th", 40);
+    i0.ɵɵelementStart(3, "div", 42)(4, "table", 43)(5, "thead")(6, "tr", 44)(7, "th", 45);
     i0.ɵɵtext(8, "Metric");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 41);
+    i0.ɵɵelementStart(9, "th", 46);
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 41);
+    i0.ɵɵelementStart(11, "th", 46);
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 42, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 47, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57582,20 +57587,27 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵrepeater(ctx_r1.contributingMetrics());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "h4", 17);
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29)(1, "h4", 16);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 52);
-    i0.ɵɵelement(4, "symphiq-line-chart", 35);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 53);
-    i0.ɵɵtext(6);
+    i0.ɵɵelementStart(3, "div", 57);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_66_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openExpandedPaceChart(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(4, "symphiq-line-chart", 36);
+    i0.ɵɵelementStart(5, "div", 37);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 38);
+    i0.ɵɵelement(7, "path", 39);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(8, "p", 58);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 54);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(10, "p", 59);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 54);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(12, "p", 59);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57605,6 +57617,8 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "250px");
     i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandIconClasses());
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.chartLegendDescription(), " ");
@@ -57617,74 +57631,162 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.chartDescriptionSentence2(), " ");
 } }
+function MetricReportModalComponent_Conditional_0_Conditional_70_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 36);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("chart", ctx_r1.trendChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "500px");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵelement(2, "div", 2);
+    i0.ɵɵelementStart(3, "div", 62);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r6); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(4, "div", 63)(5, "h3", 64);
+    i0.ɵɵtext(6, " Year-over-Year Trend ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 65);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(8, "svg", 12);
+    i0.ɵɵelement(9, "path", 13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(10, "div", 66);
+    i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_70_Conditional_11_Template, 1, 5, "symphiq-area-chart", 36);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.trendChartData() ? 11 : -1);
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_71_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-line-chart", 36);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "500px");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_71_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedPaceChart()); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵelement(2, "div", 2);
+    i0.ɵɵelementStart(3, "div", 62);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_71_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(4, "div", 63)(5, "h3", 67);
+    i0.ɵɵtext(6, " Pace ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 65);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_71_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedPaceChart()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(8, "svg", 12);
+    i0.ɵɵelement(9, "path", 13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(10, "div", 66);
+    i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_71_Conditional_11_Template, 1, 5, "symphiq-line-chart", 36);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.pacingChartData() ? 11 : -1);
+} }
 function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelementStart(0, "div", 0);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵelementStart(1, "div", 2);
-    i0.ɵɵelement(2, "div", 3);
-    i0.ɵɵelementStart(3, "span", 4);
+    i0.ɵɵelementStart(1, "div", 1);
+    i0.ɵɵelement(2, "div", 2);
+    i0.ɵɵelementStart(3, "span", 3);
     i0.ɵɵtext(4, "\u200B");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 5);
+    i0.ɵɵelementStart(5, "div", 4);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "h3", 10);
+    i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div", 8)(10, "h3", 9);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 11);
+    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 12);
+    i0.ɵɵelementStart(13, "button", 11);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(14, "svg", 13);
-    i0.ɵɵelement(15, "path", 14);
+    i0.ɵɵelementStart(14, "svg", 12);
+    i0.ɵɵelement(15, "path", 13);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(16, "div", 15)(17, "div", 16)(18, "h4", 17);
+    i0.ɵɵelementStart(16, "div", 14)(17, "div", 15)(18, "h4", 16);
     i0.ɵɵtext(19, " At a Glance ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 18)(21, "div")(22, "div", 19)(23, "p", 20);
+    i0.ɵɵelementStart(20, "div", 17)(21, "div")(22, "div", 18)(23, "p", 19);
     i0.ɵɵtext(24, " Year to date ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "p", 21);
+    i0.ɵɵelementStart(25, "p", 20);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "p", 21);
+    i0.ɵɵelementStart(27, "p", 20);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "p", 22);
+    i0.ɵɵelementStart(29, "p", 21);
     i0.ɵɵtext(30);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(31, MetricReportModalComponent_Conditional_0_Conditional_31_Template, 1, 5, "symphiq-target-change-badge", 23);
+    i0.ɵɵconditionalCreate(31, MetricReportModalComponent_Conditional_0_Conditional_31_Template, 1, 5, "symphiq-target-change-badge", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div")(33, "div", 19)(34, "p", 20);
+    i0.ɵɵelementStart(32, "div")(33, "div", 18)(34, "p", 19);
     i0.ɵɵtext(35, " Same period last year ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "p", 21);
+    i0.ɵɵelementStart(36, "p", 20);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "p", 21);
+    i0.ɵɵelementStart(38, "p", 20);
     i0.ɵɵtext(39);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(40, "p", 10);
+    i0.ɵɵelementStart(40, "p", 23);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(42, "div")(43, "p", 24);
     i0.ɵɵtext(44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "p", 10);
+    i0.ɵɵelementStart(45, "p", 23);
     i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(47, MetricReportModalComponent_Conditional_0_Conditional_47_Template, 6, 10, "div");
+    i0.ɵɵconditionalCreate(47, MetricReportModalComponent_Conditional_0_Conditional_47_Template, 5, 4, "div");
     i0.ɵɵelementStart(48, "div")(49, "p", 24);
     i0.ɵɵtext(50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(51, "p", 10);
+    i0.ɵɵelementStart(51, "p", 23);
     i0.ɵɵtext(52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(53, MetricReportModalComponent_Conditional_0_Conditional_53_Template, 4, 6, "div");
+    i0.ɵɵconditionalCreate(53, MetricReportModalComponent_Conditional_0_Conditional_53_Template, 8, 7, "div");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
+    i0.ɵɵelementStart(54, "div", 15)(55, "h4", 16);
     i0.ɵɵtext(56, " Target Analysis ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(57, "div", 25)(58, "p", 26);
@@ -57698,13 +57800,15 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 6, 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
-    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 13, "div", 29);
+    i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 15);
+    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 14, 14, "div", 29);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(67, "div", 30)(68, "button", 31);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵtext(69, " Close ");
     i0.ɵɵelementEnd()()()()();
+    i0.ɵɵconditionalCreate(70, MetricReportModalComponent_Conditional_0_Conditional_70_Template, 12, 9, "div", 32);
+    i0.ɵɵconditionalCreate(71, MetricReportModalComponent_Conditional_0_Conditional_71_Template, 12, 9, "div", 32);
 } if (rf & 2) {
     let tmp_8_0;
     let tmp_19_0;
@@ -57808,6 +57912,10 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.closeFooterButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isExpandedChartOpen() ? 70 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isExpandedPaceChartOpen() ? 71 : -1);
 } }
 class MetricReportModalComponent {
     constructor() {
@@ -57820,6 +57928,8 @@ class MetricReportModalComponent {
         this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.closed = output();
         this.showDefinition = signal(false, ...(ngDevMode ? [{ debugName: "showDefinition" }] : []));
+        this.isExpandedChartOpen = signal(false, ...(ngDevMode ? [{ debugName: "isExpandedChartOpen" }] : []));
+        this.isExpandedPaceChartOpen = signal(false, ...(ngDevMode ? [{ debugName: "isExpandedPaceChartOpen" }] : []));
         this.Math = Math;
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
@@ -58025,6 +58135,14 @@ class MetricReportModalComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
     }
+    onEscapeKey() {
+        if (this.isExpandedPaceChartOpen()) {
+            this.closeExpandedPaceChart();
+        }
+        else if (this.isExpandedChartOpen()) {
+            this.closeExpandedChart();
+        }
+    }
     formatDateForChart(year, month, day) {
         const m = String(month + 1).padStart(2, '0');
         const d = String(day).padStart(2, '0');
@@ -58116,6 +58234,18 @@ class MetricReportModalComponent {
     close() {
         this.closed.emit();
     }
+    openExpandedChart() {
+        this.isExpandedChartOpen.set(true);
+    }
+    closeExpandedChart() {
+        this.isExpandedChartOpen.set(false);
+    }
+    openExpandedPaceChart() {
+        this.isExpandedPaceChartOpen.set(true);
+    }
+    closeExpandedPaceChart() {
+        this.isExpandedPaceChartOpen.set(false);
+    }
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
@@ -58220,6 +58350,11 @@ class MetricReportModalComponent {
             ? 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
             : 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300';
     }
+    expandIconClasses() {
+        return this.isLightMode()
+            ? 'bg-white/90 text-slate-600 hover:bg-white hover:text-slate-800 shadow-sm'
+            : 'bg-slate-700/90 text-slate-300 hover:bg-slate-600 hover:text-white shadow-sm';
+    }
     footerClasses() {
         return this.isLightMode()
             ? 'bg-slate-50 border-slate-200'
@@ -58231,8 +58366,10 @@ 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"], trendChartData: [1, "trendChartData"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", 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, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], [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-[250px]"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 52, "div", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], hostBindings: function MetricReportModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function MetricReportModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], trendChartData: [1, "trendChartData"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", "mb-0", 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, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[60]"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["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"], [1, "relative", "cursor-pointer", "group", 3, "click"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "absolute", "top-1", "right-1", "p-1", "rounded", "opacity-0", "group-hover:opacity-100", "transition-opacity", 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", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], [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-[250px]", "relative", "cursor-pointer", "group", 3, "click"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[60]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "p-4"], [1, "relative", "inline-block", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "w-full", "max-w-6xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-4", "border-b", "backdrop-blur-sm", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], [1, "p-6", "backdrop-blur-sm", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-0", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 72, 54);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
@@ -58308,7 +58445,7 @@ class MetricReportModalComponent {
               <div class="flex items-start justify-between">
                 <div class="flex-1">
                   <div class="flex items-center gap-2 mb-2">
-                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
+                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-0">
                       {{ metricTitle() }}
                     </h3>
                     @if (metricData()?.description) {
@@ -58406,17 +58543,9 @@ class MetricReportModalComponent {
                       <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">
+                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold">
                         {{ 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>
                   }
 
@@ -58436,13 +58565,24 @@ class MetricReportModalComponent {
                       <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
                         Year-over-Year Trend
                       </p>
-                      <symphiq-area-chart
-                        [chart]="trendChartData()!"
-                        [showAxisLabels]="false"
-                        [viewMode]="viewMode()"
-                        [currencySymbol]="'$'"
-                        [height]="'80px'"
-                      />
+                      <div 
+                        class="relative cursor-pointer group"
+                        (click)="openExpandedChart(); $event.stopPropagation()">
+                        <symphiq-area-chart
+                          [chart]="trendChartData()!"
+                          [showAxisLabels]="false"
+                          [viewMode]="viewMode()"
+                          [currencySymbol]="'$'"
+                          [height]="'80px'"
+                        />
+                        <div 
+                          [ngClass]="expandIconClasses()"
+                          class="absolute top-1 right-1 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                          <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                          </svg>
+                        </div>
+                      </div>
                     </div>
                   }
                 </div>
@@ -58568,7 +58708,9 @@ class MetricReportModalComponent {
                   <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
                     Pace
                   </h4>
-                  <div class="min-h-[250px]">
+                  <div 
+                    class="min-h-[250px] relative cursor-pointer group"
+                    (click)="openExpandedPaceChart(); $event.stopPropagation()">
                     <symphiq-line-chart
                       [chart]="pacingChartData()!"
                       [showAxisLabels]="true"
@@ -58576,6 +58718,13 @@ class MetricReportModalComponent {
                       [currencySymbol]="'$'"
                       [height]="'250px'"
                     />
+                    <div 
+                      [ngClass]="expandIconClasses()"
+                      class="absolute top-1 right-1 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                      <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                      </svg>
+                    </div>
                   </div>
                   <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
                     {{ chartLegendDescription() }}
@@ -58602,11 +58751,112 @@ class MetricReportModalComponent {
           </div>
         </div>
       </div>
+
+      <!-- Expanded Chart Modal (Stacked) -->
+      @if (isExpandedChartOpen()) {
+        <div class="fixed inset-0 overflow-y-auto z-[60]" (click)="closeExpandedChart()">
+          <div class="flex items-center justify-center min-h-screen p-4">
+            <div
+              [ngClass]="backdropClasses()"
+              class="fixed inset-0 backdrop-blur-md"
+              aria-hidden="true"
+              @fadeIn>
+            </div>
+
+            <div
+              (click)="$event.stopPropagation()"
+              [ngClass]="modalContainerClasses()"
+              class="relative inline-block rounded-2xl text-left overflow-hidden shadow-xl w-full max-w-6xl border backdrop-blur-xl"
+              @slideUpFade>
+
+              <!-- Header -->
+              <div [ngClass]="headerClasses()" class="px-6 py-4 border-b backdrop-blur-sm flex items-center justify-between">
+                <h3 [ngClass]="titleClasses()" class="text-lg font-bold">
+                  Year-over-Year Trend
+                </h3>
+                <button
+                  (click)="closeExpandedChart()"
+                  [ngClass]="closeButtonClasses()"
+                  class="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>
+
+              <!-- Content -->
+              <div [ngClass]="contentClasses()" class="p-6 backdrop-blur-sm">
+                @if (trendChartData()) {
+                  <symphiq-area-chart
+                    [chart]="trendChartData()!"
+                    [showAxisLabels]="true"
+                    [viewMode]="viewMode()"
+                    [currencySymbol]="'$'"
+                    [height]="'500px'"
+                  />
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Expanded Pace Chart Modal (Stacked) -->
+      @if (isExpandedPaceChartOpen()) {
+        <div class="fixed inset-0 overflow-y-auto z-[60]" (click)="closeExpandedPaceChart()">
+          <div class="flex items-center justify-center min-h-screen p-4">
+            <div
+              [ngClass]="backdropClasses()"
+              class="fixed inset-0 backdrop-blur-md"
+              aria-hidden="true"
+              @fadeIn>
+            </div>
+
+            <div
+              (click)="$event.stopPropagation()"
+              [ngClass]="modalContainerClasses()"
+              class="relative inline-block rounded-2xl text-left overflow-hidden shadow-xl w-full max-w-6xl border backdrop-blur-xl"
+              @slideUpFade>
+
+              <!-- Header -->
+              <div [ngClass]="headerClasses()" class="px-6 py-4 border-b backdrop-blur-sm flex items-center justify-between">
+                <h3 [ngClass]="titleClasses()" class="text-lg font-bold mb-0">
+                  Pace
+                </h3>
+                <button
+                  (click)="closeExpandedPaceChart()"
+                  [ngClass]="closeButtonClasses()"
+                  class="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>
+
+              <!-- Content -->
+              <div [ngClass]="contentClasses()" class="p-6 backdrop-blur-sm">
+                @if (pacingChartData()) {
+                  <symphiq-line-chart
+                    [chart]="pacingChartData()!"
+                    [showAxisLabels]="true"
+                    [viewMode]="viewMode()"
+                    [currencySymbol]="'$'"
+                    [height]="'500px'"
+                  />
+                }
+              </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 }] }], trendChartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendChartData", 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: 364 }); })();
+    }], 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 }] }], trendChartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendChartData", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 474 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];