@eric-emg/symphiq-components 1.2.220 → 1.2.221

package/fesm2022/symphiq-components.mjs

@@ -56339,14 +56339,14 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
-    i0.ɵɵelement(2, "div", 60);
-    i0.ɵɵelementStart(3, "span", 61);
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
+    i0.ɵɵelement(2, "div", 59);
+    i0.ɵɵelementStart(3, "span", 60);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 60);
+    i0.ɵɵelement(5, "div", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 62)(7, "div")(8, "p", 53);
+    i0.ɵɵelementStart(6, "div", 61)(7, "div")(8, "p", 62);
     i0.ɵɵtext(9, " Gap to Close ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "p", 63);
@@ -56391,34 +56391,34 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
 function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div")(2, "div", 52)(3, "div")(4, "p", 53);
+    i0.ɵɵelementStart(0, "div", 51)(1, "div")(2, "div", 52)(3, "div")(4, "p", 14);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 54);
+    i0.ɵɵelementStart(6, "p", 53);
     i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_36_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_36_Conditional_8_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 55);
+    i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 56)(11, "div", 57)(12, "div", 58)(13, "div", 59);
-    i0.ɵɵelement(14, "div", 60);
-    i0.ɵɵelementStart(15, "span", 61);
+    i0.ɵɵelementStart(10, "div", 55)(11, "div", 56)(12, "div", 57)(13, "div", 58);
+    i0.ɵɵelement(14, "div", 59);
+    i0.ɵɵelementStart(15, "span", 60);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(17, "div", 60);
+    i0.ɵɵelement(17, "div", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 62)(19, "div")(20, "p", 53);
+    i0.ɵɵelementStart(18, "div", 61)(19, "div")(20, "p", 62);
     i0.ɵɵtext(21, " Increase Amount ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "p", 63);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div")(25, "p", 53);
+    i0.ɵɵelementStart(24, "div")(25, "p", 62);
     i0.ɵɵtext(26, " % Growth ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(27, "p", 63);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 21, 13, "div", 58);
+    i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 21, 13, "div", 57);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56512,16 +56512,17 @@ function InitialTargetSettingComponent_Conditional_38_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
 } }
 function InitialTargetSettingComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 68)(2, "h2", 69);
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69)(2, "h2", 70);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p", 50);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 70);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 71);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("metrics-highlight-pulse", ctx_r0.showMetricsHighlight());
     i0.ɵɵproperty("ngClass", ctx_r0.sectionCardClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
@@ -56552,6 +56553,8 @@ class InitialTargetSettingComponent {
         this.storedResponse = signal(null, ...(ngDevMode ? [{ debugName: "storedResponse" }] : []));
         this.submittedAbsoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "submittedAbsoluteInput" }] : []));
         this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
+        this.showMetricsHighlight = signal(false, ...(ngDevMode ? [{ debugName: "showMetricsHighlight" }] : []));
+        this.hasShownMetricsHighlight = false;
         this.priorYearRevenue = computed(() => {
             return sumMetricFromUiData(this.mainUiData(), MetricEnum.PURCHASE_REVENUE, 'priorYear');
         }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
@@ -56722,6 +56725,17 @@ class InitialTargetSettingComponent {
                 this.calculationState.set('results');
             }
         }, { allowSignalWrites: true });
+        effect(() => {
+            const showMetrics = this.showMetricsVisualization();
+            const targetsUndefined = this.targets() === undefined;
+            if (showMetrics && targetsUndefined && !this.hasShownMetricsHighlight) {
+                this.hasShownMetricsHighlight = true;
+                this.showMetricsHighlight.set(true);
+                setTimeout(() => {
+                    this.showMetricsHighlight.set(false);
+                }, 2000);
+            }
+        }, { allowSignalWrites: true });
     }
     parseMetricValue(value) {
         if (!value)
@@ -57016,7 +57030,7 @@ class InitialTargetSettingComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 35, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [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, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["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"], [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, "flex", "justify-end"], [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", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "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, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [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-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-sm", "font-semibold", "transition-all", "inline-flex", "items-center", "gap-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "chevron-rotate"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 35, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [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, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass", "metrics-highlight-pulse"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["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"], [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, "flex", "justify-end"], [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", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "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, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [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, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-sm", "font-semibold", "transition-all", "inline-flex", "items-center", "gap-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "chevron-rotate"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -57058,7 +57072,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(38, InitialTargetSettingComponent_Conditional_38_Template, 6, 3, "div", 29);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(39, "div", 30)(40, "div", 31);
-            i0.ɵɵconditionalCreate(41, InitialTargetSettingComponent_Conditional_41_Template, 7, 7, "div", 32);
+            i0.ɵɵconditionalCreate(41, InitialTargetSettingComponent_Conditional_41_Template, 7, 9, "div", 32);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(42, "symphiq-sticky-submit-bar", 33);
             i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_42_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_42_listener() { return ctx.handleCancel(); });
@@ -57117,7 +57131,7 @@ class InitialTargetSettingComponent {
             StickySubmitBarComponent,
             AreaChartComponent,
             TooltipDirective,
-            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}"], changeDetection: 0 }); }
+            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #8b5cf6b3}50%{transform:scale(1.01);box-shadow:0 0 20px 8px #8b5cf64d}}.metrics-highlight-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
@@ -57311,7 +57325,7 @@ class InitialTargetSettingComponent {
                     <div [class.space-y-6]="calculationState() !== 'results'">
                       <div class="flex items-center justify-between">
                         <div>
-                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
                             {{ currentYear() }} Revenue Target
                           </p>
                           <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300"
@@ -57466,7 +57480,8 @@ class InitialTargetSettingComponent {
       <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
         <div class="metrics-section-content">
           @if (showMetricsVisualization()) {
-            <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+            <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8"
+                 [class.metrics-highlight-pulse]="showMetricsHighlight()">
               <div class="mb-6">
                 <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
                   Contributing Metrics
@@ -57497,7 +57512,7 @@ class InitialTargetSettingComponent {
         (cancelClick)="handleCancel()"
       />
     </div>
-  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}\n"] }]
+  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #8b5cf6b3}50%{transform:scale(1.01);box-shadow:0 0 20px 8px #8b5cf64d}}.metrics-highlight-pulse{animation:pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
             args: ['absoluteInputRef']
@@ -57505,7 +57520,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['percentageInputRef']
         }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 517 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 533 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);