@eric-emg/symphiq-components 1.2.175 → 1.2.177

package/fesm2022/symphiq-components.mjs

@@ -55402,7 +55402,7 @@ class RevenueCalculatorWelcomeBannerComponent {
         const isLoaded = this.isDataFullyLoaded();
         const hasTargets = this.hasTargets();
         if (!isLoaded) {
-            return "We're currently downloading your Google Analytics 4 data to establish your baseline metrics. Once your data is loaded, you'll be able to set targets for each metric and see how those improvements translate to revenue growth. This bottom-up approach ensures your revenue targets are grounded in achievable metric improvements.";
+            return "We're currently downloading your Google Analytics 4 data to establish your baseline metrics. Once your data is loaded, you'll set your target revenue for the year, and Symphiq will calculate the specific metric improvements needed to reach it. You can then adjust individual metrics to align with your team's capacity and strategic priorities.";
         }
         if (isLoaded && !hasTargets) {
             return "Now that we have your data, it's time to set your revenue target for this year. Enter your desired revenue goal below, and we'll automatically calculate the required improvements for each funnel metric. This ensures your revenue targets are grounded in achievable, metric-level improvements.";
@@ -55486,12 +55486,12 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵtext(8, " Welcome to Your Revenue Calculator ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 8)(10, "p", 9);
-            i0.ɵɵtext(11, " The Revenue Calculator empowers you to set metric-level targets using a bottom-up approach. Instead of working backwards from a revenue goal, you'll set realistic targets for each funnel metric, allowing Symphiq to calculate your projected revenue based on achievable improvements at every conversion stage. ");
+            i0.ɵɵtext(11, " The Revenue Calculator empowers you to achieve your revenue goals with precision. Start by setting your target revenue for the year, and Symphiq will automatically calculate the specific metric improvements needed across your funnel. You can then refine individual metric targets to match your team's capabilities and strategic focus. ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "p", 9)(13, "strong", 10);
             i0.ɵɵtext(14, "Why this matters:");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(15, " Bottom-up revenue targeting provides clarity and accountability. By setting specific goals for metrics like add-to-cart rate or checkout conversion, your team knows exactly what needs to improve. This precision enables you to simulate different growth scenarios and understand which metric improvements will have the greatest impact on your revenue. ");
+            i0.ɵɵtext(15, " This approach bridges strategy and execution. By starting with your revenue ambition and translating it into specific, measurable metric targets, your team gains clarity on exactly what needs to improve. You maintain full control to adjust targets based on your resources, historical performance, and growth opportunities at each funnel stage. ");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(16, "div", 11);
             i0.ɵɵnamespaceSVG();
@@ -55509,9 +55509,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(26, "span")(27, "strong", 10);
-            i0.ɵɵtext(28, "Metric-Level Target Setting");
+            i0.ɵɵtext(28, "Revenue Target Input");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(29, " \u2014 Set specific percentage improvements for each funnel metric based on your baseline performance");
+            i0.ɵɵtext(29, " \u2014 Set your desired revenue goal for the year, either as an absolute amount or percentage increase");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(30, "li", 16);
             i0.ɵɵnamespaceSVG();
@@ -55520,9 +55520,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(33, "span")(34, "strong", 10);
-            i0.ɵɵtext(35, "Revenue Simulation Tools");
+            i0.ɵɵtext(35, "Automatic Metric Distribution");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(36, " \u2014 See real-time revenue projections as you adjust metric targets to understand growth scenarios");
+            i0.ɵɵtext(36, " \u2014 See calculated metric improvements needed across your funnel to achieve your revenue target");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(37, "li", 16);
             i0.ɵɵnamespaceSVG();
@@ -55531,9 +55531,9 @@ class RevenueCalculatorWelcomeBannerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(40, "span")(41, "strong", 10);
-            i0.ɵɵtext(42, "Funnel Stage Impact Visualization");
+            i0.ɵɵtext(42, "Target Refinement Controls");
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(43, " \u2014 Visualize how metric improvements cascade through your funnel to drive revenue growth");
+            i0.ɵɵtext(43, " \u2014 Adjust individual metric targets to align with your team's capacity and strategic priorities");
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(44, "div", 19);
             i0.ɵɵnamespaceSVG();
@@ -55604,10 +55604,10 @@ class RevenueCalculatorWelcomeBannerComponent {
             <!-- Description (full width, no confidence card) -->
             <div class="space-y-3 mb-6">
               <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                The Revenue Calculator empowers you to set metric-level targets using a bottom-up approach. Instead of working backwards from a revenue goal, you'll set realistic targets for each funnel metric, allowing Symphiq to calculate your projected revenue based on achievable improvements at every conversion stage.
+                The Revenue Calculator empowers you to achieve your revenue goals with precision. Start by setting your target revenue for the year, and Symphiq will automatically calculate the specific metric improvements needed across your funnel. You can then refine individual metric targets to match your team's capabilities and strategic focus.
               </p>
               <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                <strong class="font-semibold">Why this matters:</strong> Bottom-up revenue targeting provides clarity and accountability. By setting specific goals for metrics like add-to-cart rate or checkout conversion, your team knows exactly what needs to improve. This precision enables you to simulate different growth scenarios and understand which metric improvements will have the greatest impact on your revenue.
+                <strong class="font-semibold">Why this matters:</strong> This approach bridges strategy and execution. By starting with your revenue ambition and translating it into specific, measurable metric targets, your team gains clarity on exactly what needs to improve. You maintain full control to adjust targets based on your resources, historical performance, and growth opportunities at each funnel stage.
               </p>
             </div>
 
@@ -55624,19 +55624,19 @@ class RevenueCalculatorWelcomeBannerComponent {
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Metric-Level Target Setting</strong> — Set specific percentage improvements for each funnel metric based on your baseline performance</span>
+                    <span><strong class="font-semibold">Revenue Target Input</strong> — Set your desired revenue goal for the year, either as an absolute amount or percentage increase</span>
                   </li>
                   <li class="flex items-start gap-2">
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Revenue Simulation Tools</strong> — See real-time revenue projections as you adjust metric targets to understand growth scenarios</span>
+                    <span><strong class="font-semibold">Automatic Metric Distribution</strong> — See calculated metric improvements needed across your funnel to achieve your revenue target</span>
                   </li>
                   <li class="flex items-start gap-2">
                     <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
-                    <span><strong class="font-semibold">Funnel Stage Impact Visualization</strong> — Visualize how metric improvements cascade through your funnel to drive revenue growth</span>
+                    <span><strong class="font-semibold">Target Refinement Controls</strong> — Adjust individual metric targets to align with your team's capacity and strategic priorities</span>
                   </li>
                 </ul>
               </div>
@@ -55824,6 +55824,29 @@ function calculateMetricPacing(metric) {
         projectedValue
     };
 }
+function extractMetricPacing(pacingResponse, metricEnum) {
+    if (!pacingResponse)
+        return null;
+    const soFarMetric = pacingResponse.soFarMetricValues?.find(m => m.metric === metricEnum);
+    const projectedMetric = pacingResponse.projectedMetricValues?.find(m => m.metric === metricEnum);
+    const lastYearMetrics = pacingResponse.lastYearMetricValuesMonthly?.filter(m => m.metric === metricEnum) || [];
+    if (!soFarMetric && !projectedMetric)
+        return null;
+    const currentValue = soFarMetric?.value ? parseFloat(soFarMetric.value) : 0;
+    const projectedValue = projectedMetric?.value ? parseFloat(projectedMetric.value) : 0;
+    const priorYtdValue = lastYearMetrics.reduce((sum, m) => {
+        return sum + (m.value ? parseFloat(m.value) : 0);
+    }, 0);
+    const pacingPercentage = priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0;
+    return {
+        metric: metricEnum,
+        currentValue,
+        priorYtdValue,
+        projectedValue,
+        pacingPercentage,
+        ytdVariancePercent: pacingPercentage
+    };
+}
 
 class PacingStatusBadgeComponent {
     constructor() {
@@ -56070,21 +56093,21 @@ class FunnelMetricsVisualizationComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.calculations = input([], ...(ngDevMode ? [{ debugName: "calculations" }] : []));
-        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
         this.funnelStages = computed(() => {
             const calcs = this.calculations();
-            const pacing = this.pacingMetrics();
+            const pacingResponse = this.pacingMetrics();
             const grouped = new Map();
             const stageMetrics = calcs.filter(c => c.isFunnelStage);
             const relatedMetrics = calcs.filter(c => !c.isFunnelStage);
             stageMetrics.forEach(stageMetric => {
                 const related = relatedMetrics.filter(rm => rm.funnelMetric === stageMetric.metric);
-                const stagePacingMetric = pacing.find(p => p.metric === stageMetric.metric);
+                const stagePacingMetric = extractMetricPacing(pacingResponse, stageMetric.metric);
                 const stagePacingInfo = stagePacingMetric ? calculateMetricPacing(stagePacingMetric) : null;
                 const relatedWithPacing = related.map(relMetric => {
-                    const relPacingMetric = pacing.find(p => p.metric === relMetric.metric);
+                    const relPacingMetric = extractMetricPacing(pacingResponse, relMetric.metric);
                     const relPacingInfo = relPacingMetric ? calculateMetricPacing(relPacingMetric) : null;
                     return { calc: relMetric, pacingInfo: relPacingInfo };
                 });
@@ -57471,7 +57494,7 @@ class InitialTargetSettingComponent {
         this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
         this.shopId = input(undefined, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
-        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.targetsCreated = output();
         this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
@@ -57482,8 +57505,11 @@ class InitialTargetSettingComponent {
             return sumMetricFromUiData(this.yoyUiData(), MetricEnum.PURCHASE_REVENUE);
         }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
         this.currentPaceProjection = computed(() => {
-            const revenuePacing = this.pacingMetrics().find(m => m.metric === MetricEnum.PURCHASE_REVENUE);
-            return revenuePacing?.projectedValue || 0;
+            const pacingData = this.pacingMetrics();
+            if (!pacingData || !pacingData.projectedMetricValues)
+                return 0;
+            const revenueMetric = pacingData.projectedMetricValues.find(m => m.metric === MetricEnum.PURCHASE_REVENUE);
+            return revenueMetric?.value ? parseFloat(revenueMetric.value) : 0;
         }, ...(ngDevMode ? [{ debugName: "currentPaceProjection" }] : []));
         this.gapToClose = computed(() => {
             const target = this.calculatedRevenue();
@@ -58140,7 +58166,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("yoyUiData", ctx_r0.yoyUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingMetrics())("dataResults", ctx_r0.dataResults());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("yoyUiData", ctx_r0.yoyUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults());
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -58170,7 +58196,6 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf,
 } }
 class SymphiqRevenueCalculatorDashboardComponent {
     constructor() {
-        this.headerScrollService = inject(HeaderScrollService);
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.dataLoadStatus = input(ShopDataLoadStatusEnum.NOT_LOADED, ...(ngDevMode ? [{ debugName: "dataLoadStatus" }] : []));
@@ -58179,7 +58204,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.mainUiData = input(undefined, ...(ngDevMode ? [{ debugName: "mainUiData" }] : []));
         this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
-        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.pacingResponse = input(undefined, ...(ngDevMode ? [{ debugName: "pacingResponse" }] : []));
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.shopId = input(0, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
         this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
@@ -58193,6 +58218,8 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.ShopDataLoadStatusEnum = ShopDataLoadStatusEnum;
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
+        this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
+        this.isProgrammaticScroll = false;
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.hasCurrentYearTargets = computed(() => {
             const targets = this.targets() ?? [];
@@ -58210,15 +58237,29 @@ class SymphiqRevenueCalculatorDashboardComponent {
         effect(() => {
             const event = this.scrollEvent();
             if (event?.detail) {
-                this.updateScrollProgress(event.detail.scrollTop);
+                const scrollTop = event.detail.scrollTop;
+                this.updateScrollProgress(scrollTop);
+                if (!this.isProgrammaticScroll) {
+                    const COLLAPSE_THRESHOLD = 20;
+                    const EXPAND_THRESHOLD = 10;
+                    const currentState = this.isScrolled();
+                    if (!currentState && scrollTop > COLLAPSE_THRESHOLD) {
+                        this.isScrolled.set(true);
+                    }
+                    else if (currentState && scrollTop < EXPAND_THRESHOLD) {
+                        this.isScrolled.set(false);
+                    }
+                }
             }
         }, { allowSignalWrites: true });
     }
     ngAfterViewInit() {
-        this.headerScrollService.resetState();
+        this.isScrolled.set(false);
+        this.scrollProgress.set(0);
     }
     ngOnDestroy() {
-        this.headerScrollService.resetState();
+        this.isScrolled.set(false);
+        this.scrollProgress.set(0);
     }
     onWindowScroll() {
         if (!this.embedded()) {
@@ -58297,7 +58338,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
     static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "viewMode", "funnelMetrics", "mainUiData", "yoyUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "viewMode", "funnelMetrics", "mainUiData", "yoyUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -58306,7 +58347,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵtext(11, " Revenue Calculator ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Set Metric-Level Targets for Bottom-Up Revenue Planning ");
+            i0.ɵɵtext(13, " Set Your Revenue Target and See Required Metric Improvements ");
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
             i0.ɵɵtext(19, " Revenue Calculator ");
@@ -58329,17 +58370,17 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("max-h-0", ctx.isScrolled())("opacity-0", ctx.isScrolled())("max-h-96", !ctx.isScrolled())("opacity-100", !ctx.isScrolled());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("pointer-events-none", ctx.isScrolled())("pointer-events-auto", !ctx.isScrolled());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("max-h-0", !ctx.isScrolled())("opacity-0", !ctx.isScrolled())("max-h-20", ctx.isScrolled())("opacity-100", ctx.isScrolled());
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
+            i0.ɵɵclassProp("pointer-events-none", !ctx.isScrolled())("pointer-events-auto", ctx.isScrolled());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate");
             i0.ɵɵadvance(2);
@@ -58367,37 +58408,39 @@ class SymphiqRevenueCalculatorDashboardComponent {
                 template: `
     <div [ngClass]="getContainerClasses()">
       <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+      <div
+          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
         <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
+            [style.width.%]="scrollProgress()"
+            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+            class="h-full transition-all duration-200 ease-out">
         </div>
       </div>
 
       <!-- Animated Background Bubbles -->
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
+           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
 
       <div class="relative z-[51]">
         <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
           <!-- Expanded Header -->
           <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
+              class="transition-all duration-300 ease-in-out overflow-hidden"
+              [class.max-h-0]="isScrolled()"
+              [class.opacity-0]="isScrolled()"
+              [class.max-h-96]="!isScrolled()"
+              [class.opacity-100]="!isScrolled()">
             <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+                [class.pointer-events-none]="isScrolled()"
+                [class.pointer-events-auto]="!isScrolled()">
               <div class="flex items-center justify-between">
                 <div>
                   <h1 [ngClass]="getMainTitleClasses()">
                     Revenue Calculator
                   </h1>
                   <p [ngClass]="getSubtitleClasses()">
-                    Set Metric-Level Targets for Bottom-Up Revenue Planning
+                    Set Your Revenue Target and See Required Metric Improvements
                   </p>
                 </div>
               </div>
@@ -58406,15 +58449,15 @@ class SymphiqRevenueCalculatorDashboardComponent {
 
           <!-- Condensed Header -->
           <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
+              class="transition-all duration-300 ease-in-out overflow-hidden"
+              [class.max-h-0]="!isScrolled()"
+              [class.opacity-0]="!isScrolled()"
+              [class.max-h-20]="isScrolled()"
+              [class.opacity-100]="isScrolled()">
             <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+                [class.pointer-events-none]="!isScrolled()"
+                [class.pointer-events-auto]="isScrolled()">
               <div class="flex items-center justify-between">
                 <div class="flex-1 min-w-0 mr-4">
                   <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
@@ -58428,13 +58471,13 @@ class SymphiqRevenueCalculatorDashboardComponent {
 
         <!-- Journey Progress Indicator -->
         <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
-          [showNextStepAction]="hasCurrentYearTargets()"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
+            [viewMode]="viewMode()"
+            [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
+            [showNextStepAction]="hasCurrentYearTargets()"
+            [forDemo]="forDemo()"
+            [maxAccessibleStepId]="maxAccessibleStepId()"
+            (stepClick)="stepClick.emit($event)"
+            (nextStepClick)="nextStepClick.emit()"
         />
 
         <main class="relative">
@@ -58444,8 +58487,8 @@ class SymphiqRevenueCalculatorDashboardComponent {
             @if (isLoading()) {
               <div class="flex items-center justify-center min-h-[400px]">
                 <symphiq-indeterminate-spinner
-                  [viewMode]="viewMode()"
-                  size="large"
+                    [viewMode]="viewMode()"
+                    size="large"
                 />
               </div>
             }
@@ -58453,25 +58496,27 @@ class SymphiqRevenueCalculatorDashboardComponent {
             <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
             @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
               <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="false"
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="false"
               />
 
               <!-- Loading Message Card -->
-              <div [ngClass]="loadingMessageContainerClasses()" class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
+              <div [ngClass]="loadingMessageContainerClasses()"
+                   class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
                 <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
                   <div class="flex flex-col items-center text-center space-y-6">
                     <symphiq-indeterminate-spinner
-                      [viewMode]="viewMode()"
-                      size="large"
+                        [viewMode]="viewMode()"
+                        size="large"
                     />
                     <div class="space-y-2">
                       <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
                         Downloading Your Google Analytics 4 Data
                       </h3>
                       <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
-                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a moment as we gather your funnel data.
+                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a
+                        moment as we gather your funnel data.
                       </p>
                     </div>
                   </div>
@@ -58482,22 +58527,22 @@ class SymphiqRevenueCalculatorDashboardComponent {
             <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
             @else if (!hasCurrentYearTargets()) {
               <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="false"
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="false"
               />
 
               <div class="mt-8">
                 <symphiq-initial-target-setting
-                  [viewMode]="viewMode()"
-                  [funnelMetrics]="funnelMetrics() ?? []"
-                  [mainUiData]="mainUiData()"
-                  [yoyUiData]="yoyUiData()"
-                  [trendUiData]="trendUiData()"
-                  [shopId]="shopId()"
-                  [pacingMetrics]="pacingMetrics()"
-                  [dataResults]="dataResults()"
-                  (targetsCreated)="targetsCreated.emit($event)"
+                    [viewMode]="viewMode()"
+                    [funnelMetrics]="funnelMetrics() ?? []"
+                    [mainUiData]="mainUiData()"
+                    [yoyUiData]="yoyUiData()"
+                    [trendUiData]="trendUiData()"
+                    [shopId]="shopId()"
+                    [pacingMetrics]="pacingResponse()"
+                    [dataResults]="dataResults()"
+                    (targetsCreated)="targetsCreated.emit($event)"
                 />
               </div>
             }
@@ -58505,24 +58550,27 @@ class SymphiqRevenueCalculatorDashboardComponent {
             <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
             @else {
               <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="true"
+                  [viewMode]="viewMode()"
+                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                  [hasTargets]="true"
               />
 
               <!-- Placeholder for Revenue Calculator Content -->
               <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
                 <div class="text-center space-y-4">
                   <div class="flex justify-center">
-                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
+                         viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                     </svg>
                   </div>
                   <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
                     Revenue Calculator Dashboard
                   </h3>
                   <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
-                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be displayed here.
+                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be
+                    displayed here.
                   </p>
                 </div>
               </div>
@@ -58534,11 +58582,11 @@ class SymphiqRevenueCalculatorDashboardComponent {
     </div>
   `
             }]
-    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], onWindowScroll: [{
+    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], onWindowScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 213 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 219 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);