@eric-emg/symphiq-components 1.2.175 → 1.2.176

package/fesm2022/symphiq-components.mjs

@@ -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);
@@ -58179,7 +58205,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" }] : []));
@@ -58297,7 +58323,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();
@@ -58367,30 +58393,32 @@ 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]="headerScrollService.isScrolled()"
+              [class.opacity-0]="headerScrollService.isScrolled()"
+              [class.max-h-96]="!headerScrollService.isScrolled()"
+              [class.opacity-100]="!headerScrollService.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]="headerScrollService.isScrolled()"
+                [class.pointer-events-auto]="!headerScrollService.isScrolled()">
               <div class="flex items-center justify-between">
                 <div>
                   <h1 [ngClass]="getMainTitleClasses()">
@@ -58406,15 +58434,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]="!headerScrollService.isScrolled()"
+              [class.opacity-0]="!headerScrollService.isScrolled()"
+              [class.max-h-20]="headerScrollService.isScrolled()"
+              [class.opacity-100]="headerScrollService.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]="!headerScrollService.isScrolled()"
+                [class.pointer-events-auto]="headerScrollService.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 +58456,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 +58472,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 +58481,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 +58512,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 +58535,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 +58567,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: 220 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);