@eric-emg/symphiq-components 1.2.176 → 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>
@@ -58196,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" }] : []));
@@ -58219,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() ?? [];
@@ -58236,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()) {
@@ -58332,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 ");
@@ -58355,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);
@@ -58411,21 +58426,21 @@ class SymphiqRevenueCalculatorDashboardComponent {
           <!-- 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.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.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>
@@ -58435,14 +58450,14 @@ 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.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.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'">
@@ -58571,7 +58586,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             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: 220 }); })();
+(() => { (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);