@eric-emg/symphiq-components 1.3.10 → 1.3.12

package/fesm2022/symphiq-components.mjs

@@ -58292,6 +58292,9 @@ class AreaChartComponent {
             maxTooltipDistance: -1
         }));
         this.chartElement = chartElement;
+        if (this.disableInteractions()) {
+            chartElement.zoomOutButton.set('forceHidden', true);
+        }
         const categoryField = chartData.categories?.field || 'month';
         const xAxis = this.chartElement.xAxes.push(CategoryAxis.new(this.root, {
             categoryField: categoryField,
@@ -58447,7 +58450,9 @@ class AreaChartComponent {
         });
         if (this.disableInteractions()) {
             legend.itemContainers.template.setAll({
-                toggleKey: 'none'
+                toggleKey: 'none',
+                interactive: false,
+                cursorOverStyle: undefined
             });
         }
         const reversedSeries = Array.from(chartElement.series.values).reverse();
@@ -61139,11 +61144,13 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.initialTargetValue()), " ");
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 48)(1, "p", 58);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 24);
-    i0.ɵɵelement(4, "symphiq-area-chart", 59);
+    i0.ɵɵelementStart(3, "div", 59);
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_9_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.openExpandedChart(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(4, "symphiq-area-chart", 60);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -61255,7 +61262,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional
     i0.ɵɵconditional(ctx_r1.initialIsPaceAhead() ? 1 : 2);
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+    const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 49)(1, "div", 50);
     i0.ɵɵelement(2, "div", 51);
     i0.ɵɵelementStart(3, "span", 52);
@@ -61271,11 +61278,11 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(14, EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_33_Conditional_14_Template, 2, 2, "p", 57);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div")(16, "div", 60)(17, "p", 19);
+    i0.ɵɵelementStart(15, "div")(16, "div", 61)(17, "p", 19);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(19, "button", 34);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_33_Template_button_click_19_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Conditional_33_Template_button_click_19_listener($event) { i0.ɵɵrestoreView(_r9); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(20, "svg", 35);
     i0.ɵɵelement(21, "path", 36);
@@ -61402,40 +61409,40 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_33_Template(rf
     i0.ɵɵconditional(ctx_r1.currentPaceProjectionRaw() > 0 ? 33 : -1);
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_34_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "symphiq-user-display", 66);
-    i0.ɵɵelementStart(2, "div", 67)(3, "p", 68);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "symphiq-user-display", 67);
+    i0.ɵɵelementStart(2, "div", 68)(3, "p", 69);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 69);
+    i0.ɵɵelementStart(5, "p", 70);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r9 = ctx.$implicit;
+    const item_r10 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("user", ctx_r1.getUserById(item_r9.history.creatorUserId));
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("user", ctx_r1.getUserById(item_r10.history.creatorUserId));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.historyValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r9.formattedValue);
+    i0.ɵɵtextInterpolate(item_r10.formattedValue);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.historyDateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r9.formattedDate);
+    i0.ɵɵtextInterpolate(item_r10.formattedDate);
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "h4", 61);
+    i0.ɵɵelementStart(0, "div", 26)(1, "h4", 62);
     i0.ɵɵtext(2, "Target history");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 62)(4, "div", 63)(5, "span");
+    i0.ɵɵelementStart(3, "div", 63)(4, "div", 64)(5, "span");
     i0.ɵɵtext(6, "User");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Amount set");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 64);
-    i0.ɵɵrepeaterCreate(10, EditMetricTargetModalComponent_Conditional_0_Conditional_34_For_11_Template, 7, 6, "div", 65, _forTrack0$A);
+    i0.ɵɵelementStart(9, "div", 65);
+    i0.ɵɵrepeaterCreate(10, EditMetricTargetModalComponent_Conditional_0_Conditional_34_For_11_Template, 7, 6, "div", 66, _forTrack0$A);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -61450,9 +61457,9 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Template(rf
     i0.ɵɵrepeater(ctx_r1.filteredHistoriesDisplay());
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+    const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_38_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetToInitial()); });
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_38_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetToInitial()); });
     i0.ɵɵtext(1, " Reset ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -61460,24 +61467,24 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_38_Template(rf
     i0.ɵɵproperty("ngClass", ctx_r1.resetButtonClasses());
 } }
 function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 31)(1, "div", 3);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 70);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(3, "div", 71)(4, "h3", 72);
+    i0.ɵɵelementStart(2, "div", 71);
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "div", 72)(4, "h3", 73);
     i0.ɵɵtext(5, " Year-over-Year Trend ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 73);
-    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵelementStart(6, "button", 74);
+    i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_41_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(7, "svg", 10);
     i0.ɵɵelement(8, "path", 11);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(9, "div", 74);
-    i0.ɵɵelement(10, "symphiq-area-chart", 75);
+    i0.ɵɵelementStart(9, "div", 75);
+    i0.ɵɵelement(10, "symphiq-area-chart", 76);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -62304,7 +62311,7 @@ class EditMetricTargetModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
         } }, hostBindings: function EditMetricTargetModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function EditMetricTargetModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingResponse: [1, "pacingResponse"], targetHistories: [1, "targetHistories"], users: [1, "users"], currencySymbol: [1, "currencySymbol"], trendChartData: [1, "trendChartData"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "z-[100]", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "click", "ngClass"], [1, "relative", "w-full", "max-w-4xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "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-0", 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, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [1, "flex", "items-center", "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", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "mt-6", "p-6", "rounded-xl", "border", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "fixed", "inset-0", "z-[110]", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "flex", "gap-4"], [1, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 3, "ngClass"], [1, "flex-shrink-0", "w-36"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height", "disableInteractions"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-base", "font-semibold", "mb-4", 3, "ngClass"], [1, "overflow-hidden"], [1, "flex", "justify-between", "items-center", "px-4", "py-2", "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "divide-y", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "px-4", "py-4"], [3, "viewMode", "user"], [1, "text-right"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "relative", "w-full", "max-w-5xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "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", "mb-0", 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"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingResponse: [1, "pacingResponse"], targetHistories: [1, "targetHistories"], users: [1, "users"], currencySymbol: [1, "currencySymbol"], trendChartData: [1, "trendChartData"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "z-[100]", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "click", "ngClass"], [1, "relative", "w-full", "max-w-4xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "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-0", 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, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [1, "flex", "items-center", "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", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "mt-6", "p-6", "rounded-xl", "border", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "fixed", "inset-0", "z-[110]", "flex", "items-center", "justify-center", "p-4", "overflow-y-auto"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "flex", "gap-4"], [1, "flex", "items-baseline", "gap-3"], [1, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "text-xl", "line-through", "opacity-60", 3, "ngClass"], [1, "flex-shrink-0", "w-36"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-base", "line-through", "opacity-60", 3, "ngClass"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "relative", "cursor-pointer", 3, "click"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height", "disableInteractions"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-base", "font-semibold", "mb-4", 3, "ngClass"], [1, "overflow-hidden"], [1, "flex", "justify-between", "items-center", "px-4", "py-2", "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "divide-y", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "px-4", "py-4"], [3, "viewMode", "user"], [1, "text-right"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "relative", "w-full", "max-w-5xl", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "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", "mb-0", 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"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Template, 42, 30);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -62534,7 +62541,9 @@ class EditMetricTargetModalComponent {
                           <p [ngClass]="trendChartLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
                             {{ currentYear() }} vs {{ priorYear() }}
                           </p>
-                          <div class="relative">
+                          <div 
+                            class="relative cursor-pointer"
+                            (click)="openExpandedChart(); $event.stopPropagation()">
                             <symphiq-area-chart
                               [chart]="trendChartData()!"
                               [showAxisLabels]="false"
@@ -62786,7 +62795,7 @@ class EditMetricTargetModalComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 467 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 469 }); })();
 
 const _c0$B = ["absoluteInputRef"];
 const _c1$g = ["percentageInputRef"];