@eric-emg/symphiq-components 1.2.253 → 1.2.254

package/fesm2022/symphiq-components.mjs

@@ -57587,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) {
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 29)(1, "h4", 16);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
     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(5, "p", 58);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 59);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(10, "p", 59);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 59);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(12, "p", 59);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57610,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(), " ");
@@ -57626,21 +57635,21 @@ function MetricReportModalComponent_Conditional_0_Conditional_70_Conditional_11_
     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", "400px");
+    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 _r5 = i0.ɵɵgetCurrentView();
+    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(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    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(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    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(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    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);
@@ -57666,6 +57675,50 @@ function MetricReportModalComponent_Conditional_0_Conditional_70_Template(rf, ct
     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", 0);
@@ -57748,13 +57801,14 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     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", 15);
-    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 13, "div", 29);
+    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;
@@ -57860,6 +57914,8 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     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() {
@@ -57873,6 +57929,7 @@ class MetricReportModalComponent {
         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" }] : []));
@@ -58079,7 +58136,10 @@ class MetricReportModalComponent {
         }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
     }
     onEscapeKey() {
-        if (this.isExpandedChartOpen()) {
+        if (this.isExpandedPaceChartOpen()) {
+            this.closeExpandedPaceChart();
+        }
+        else if (this.isExpandedChartOpen()) {
             this.closeExpandedChart();
         }
     }
@@ -58180,6 +58240,12 @@ class MetricReportModalComponent {
     closeExpandedChart() {
         this.isExpandedChartOpen.set(false);
     }
+    openExpandedPaceChart() {
+        this.isExpandedPaceChartOpen.set(true);
+    }
+    closeExpandedPaceChart() {
+        this.isExpandedPaceChartOpen.set(false);
+    }
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
@@ -58302,8 +58368,8 @@ class MetricReportModalComponent {
     static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
     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]"], [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"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 71, 53);
+        } }, 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,
@@ -58642,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"
@@ -58650,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() }}
@@ -58717,7 +58792,56 @@ class MetricReportModalComponent {
                     [showAxisLabels]="true"
                     [viewMode]="viewMode()"
                     [currencySymbol]="'$'"
-                    [height]="'400px'"
+                    [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>
@@ -58732,7 +58856,7 @@ class MetricReportModalComponent {
             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: 416 }); })();
+(() => { (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"];