@eric-emg/symphiq-components 1.2.222 → 1.2.223

package/fesm2022/symphiq-components.mjs

@@ -56337,7 +56337,25 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
 } }
+function InitialTargetSettingComponent_Conditional_36_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedIncreaseAmount()), " ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " -- ");
+} }
 function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.animatedPercentageGrowth(), 1), " ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " -- ");
+} }
+function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
     i0.ɵɵelement(2, "div", 59);
@@ -56356,7 +56374,7 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
     i0.ɵɵtext(15, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "button", 38);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(17, "svg", 39);
     i0.ɵɵelement(18, "path", 40);
@@ -56410,15 +56428,15 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵtext(21, " Increase Amount ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "p", 63);
-    i0.ɵɵtext(23);
+    i0.ɵɵconditionalCreate(23, InitialTargetSettingComponent_Conditional_36_Conditional_23_Template, 1, 1)(24, InitialTargetSettingComponent_Conditional_36_Conditional_24_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div")(25, "p", 62);
-    i0.ɵɵtext(26, " % Growth ");
+    i0.ɵɵelementStart(25, "div")(26, "p", 62);
+    i0.ɵɵtext(27, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "p", 63);
-    i0.ɵɵtext(28);
+    i0.ɵɵelementStart(28, "p", 63);
+    i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 1)(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 21, 13, "div", 57);
+    i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 21, 13, "div", 57);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56450,15 +56468,15 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue() - ctx_r0.priorYearRevenue()), " ");
-    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 23 : 24);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 29 : -1);
+    i0.ɵɵconditional(ctx_r0.isTargetValid() ? 29 : 30);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 && ctx_r0.isTargetValid() ? 31 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -56553,6 +56571,9 @@ class InitialTargetSettingComponent {
         this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
         this.showMetricsHighlight = signal(false, ...(ngDevMode ? [{ debugName: "showMetricsHighlight" }] : []));
         this.hasShownMetricsHighlight = false;
+        this.animatedIncreaseAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedIncreaseAmount" }] : []));
+        this.animatedPercentageGrowth = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentageGrowth" }] : []));
+        this.animationFrameId = null;
         this.priorYearRevenue = computed(() => {
             return sumMetricFromUiData(this.mainUiData(), MetricEnum.PURCHASE_REVENUE, 'priorYear');
         }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
@@ -56592,6 +56613,9 @@ class InitialTargetSettingComponent {
                 return 0;
             return ((target - prior) / prior) * 100;
         }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
+        this.isTargetValid = computed(() => {
+            return this.calculatedRevenue() > this.priorYearRevenue();
+        }, ...(ngDevMode ? [{ debugName: "isTargetValid" }] : []));
         this.displayedMetricCalculations = computed(() => {
             const response = this.storedResponse();
             if (!response) {
@@ -56734,6 +56758,42 @@ class InitialTargetSettingComponent {
                 }, 2000);
             }
         }, { allowSignalWrites: true });
+        effect(() => {
+            const isValid = this.calculatedRevenue() > this.priorYearRevenue();
+            const increaseAmount = this.calculatedRevenue() - this.priorYearRevenue();
+            const percentageGrowth = this.percentageIncrease();
+            if (isValid && increaseAmount > 0) {
+                this.animateCountUp(increaseAmount, percentageGrowth);
+            }
+            else {
+                this.animatedIncreaseAmount.set(0);
+                this.animatedPercentageGrowth.set(0);
+            }
+        }, { allowSignalWrites: true });
+    }
+    animateCountUp(targetAmount, targetPercentage) {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        const duration = 400;
+        const startTime = performance.now();
+        const startAmount = 0;
+        const startPercentage = 0;
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easeProgress = 1 - Math.pow(1 - progress, 3);
+            this.animatedIncreaseAmount.set(startAmount + (targetAmount - startAmount) * easeProgress);
+            this.animatedPercentageGrowth.set(startPercentage + (targetPercentage - startPercentage) * easeProgress);
+            if (progress < 1) {
+                this.animationFrameId = requestAnimationFrame(animate);
+            }
+            else {
+                this.animatedIncreaseAmount.set(targetAmount);
+                this.animatedPercentageGrowth.set(targetPercentage);
+            }
+        };
+        this.animationFrameId = requestAnimationFrame(animate);
     }
     parseMetricValue(value) {
         if (!value)
@@ -57064,7 +57124,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 23)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 24);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(34, "div", 25)(35, "div", 26);
-            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 30, 25, "div", 27);
+            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 25, "div", 27);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 5, 4, "div", 28);
             i0.ɵɵconditionalCreate(38, InitialTargetSettingComponent_Conditional_38_Template, 6, 3, "div", 29);
@@ -57129,7 +57189,7 @@ class InitialTargetSettingComponent {
             StickySubmitBarComponent,
             AreaChartComponent,
             TooltipDirective,
-            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{box-shadow:0 0 #8b5cf600}50%{box-shadow:0 0 0 8px #8b5cf666}}.metrics-highlight-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}"], changeDetection: 0 }); }
+            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{box-shadow:0 0 #8b5cf600}50%{box-shadow:0 0 12px 6px #8b5cf680}}.metrics-highlight-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
@@ -57362,7 +57422,11 @@ class InitialTargetSettingComponent {
                                   Increase Amount
                                 </p>
                                 <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                  {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
+                                  @if (isTargetValid()) {
+                                    {{ formatCurrency(animatedIncreaseAmount()) }}
+                                  } @else {
+                                    --
+                                  }
                                 </p>
                               </div>
                               <div>
@@ -57370,13 +57434,17 @@ class InitialTargetSettingComponent {
                                   % Growth
                                 </p>
                                 <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                  +{{ formatPercentage(percentageIncrease(), 1) }}
+                                  @if (isTargetValid()) {
+                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
+                                  } @else {
+                                    --
+                                  }
                                 </p>
                               </div>
                             </div>
                           </div>
 
-                          @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
+                          @if (currentPaceProjection() > 0 && gapToClose().amount !== 0 && isTargetValid()) {
                             <div class="relative pt-6 mt-6">
                               <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
                                 <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
@@ -57510,7 +57578,7 @@ class InitialTargetSettingComponent {
         (cancelClick)="handleCancel()"
       />
     </div>
-  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}@keyframes pulse-highlight{0%,to{box-shadow:0 0 #8b5cf600}50%{box-shadow:0 0 0 8px #8b5cf666}}.metrics-highlight-pulse{animation:pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}\n"] }]
+  `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}@keyframes pulse-highlight{0%,to{box-shadow:0 0 #8b5cf600}50%{box-shadow:0 0 12px 6px #8b5cf680}}.metrics-highlight-pulse{animation:pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
             args: ['absoluteInputRef']
@@ -57518,7 +57586,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['percentageInputRef']
         }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 531 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 539 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);