@eric-emg/symphiq-components 1.2.221 → 1.2.223

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -56337,7 +56337,25 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf,
56337
56337
  const ctx_r0 = i0.ɵɵnextContext(2);
56338
56338
  i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
56339
56339
  } }
56340
+ function InitialTargetSettingComponent_Conditional_36_Conditional_23_Template(rf, ctx) { if (rf & 1) {
56341
+ i0.ɵɵtext(0);
56342
+ } if (rf & 2) {
56343
+ const ctx_r0 = i0.ɵɵnextContext(2);
56344
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.animatedIncreaseAmount()), " ");
56345
+ } }
56346
+ function InitialTargetSettingComponent_Conditional_36_Conditional_24_Template(rf, ctx) { if (rf & 1) {
56347
+ i0.ɵɵtext(0, " -- ");
56348
+ } }
56340
56349
  function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf, ctx) { if (rf & 1) {
56350
+ i0.ɵɵtext(0);
56351
+ } if (rf & 2) {
56352
+ const ctx_r0 = i0.ɵɵnextContext(2);
56353
+ i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.animatedPercentageGrowth(), 1), " ");
56354
+ } }
56355
+ function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
56356
+ i0.ɵɵtext(0, " -- ");
56357
+ } }
56358
+ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
56341
56359
  const _r8 = i0.ɵɵgetCurrentView();
56342
56360
  i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
56343
56361
  i0.ɵɵelement(2, "div", 59);
@@ -56356,7 +56374,7 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
56356
56374
  i0.ɵɵtext(15, " Additional Growth Needed ");
56357
56375
  i0.ɵɵelementEnd();
56358
56376
  i0.ɵɵelementStart(16, "button", 38);
56359
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
56377
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
56360
56378
  i0.ɵɵnamespaceSVG();
56361
56379
  i0.ɵɵelementStart(17, "svg", 39);
56362
56380
  i0.ɵɵelement(18, "path", 40);
@@ -56410,23 +56428,21 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
56410
56428
  i0.ɵɵtext(21, " Increase Amount ");
56411
56429
  i0.ɵɵelementEnd();
56412
56430
  i0.ɵɵelementStart(22, "p", 63);
56413
- i0.ɵɵtext(23);
56431
+ i0.ɵɵconditionalCreate(23, InitialTargetSettingComponent_Conditional_36_Conditional_23_Template, 1, 1)(24, InitialTargetSettingComponent_Conditional_36_Conditional_24_Template, 1, 0);
56414
56432
  i0.ɵɵelementEnd()();
56415
- i0.ɵɵelementStart(24, "div")(25, "p", 62);
56416
- i0.ɵɵtext(26, " % Growth ");
56433
+ i0.ɵɵelementStart(25, "div")(26, "p", 62);
56434
+ i0.ɵɵtext(27, " % Growth ");
56417
56435
  i0.ɵɵelementEnd();
56418
- i0.ɵɵelementStart(27, "p", 63);
56419
- i0.ɵɵtext(28);
56436
+ i0.ɵɵelementStart(28, "p", 63);
56437
+ i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 1, 1)(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 1, 0);
56420
56438
  i0.ɵɵelementEnd()()()();
56421
- i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 21, 13, "div", 57);
56439
+ i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 21, 13, "div", 57);
56422
56440
  i0.ɵɵelementEnd()()()();
56423
56441
  } if (rf & 2) {
56424
56442
  const ctx_r0 = i0.ɵɵnextContext();
56425
56443
  i0.ɵɵclassProp("h-full", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
56426
56444
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedValuesCardClasses());
56427
- i0.ɵɵadvance();
56428
- i0.ɵɵclassProp("space-y-6", ctx_r0.calculationState() !== "results");
56429
- i0.ɵɵadvance(3);
56445
+ i0.ɵɵadvance(4);
56430
56446
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
56431
56447
  i0.ɵɵadvance();
56432
56448
  i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
@@ -56452,15 +56468,15 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
56452
56468
  i0.ɵɵadvance(2);
56453
56469
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
56454
56470
  i0.ɵɵadvance();
56455
- i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue() - ctx_r0.priorYearRevenue()), " ");
56456
- i0.ɵɵadvance(2);
56471
+ i0.ɵɵconditional(ctx_r0.isTargetValid() ? 23 : 24);
56472
+ i0.ɵɵadvance(3);
56457
56473
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
56458
56474
  i0.ɵɵadvance(2);
56459
56475
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
56460
56476
  i0.ɵɵadvance();
56461
- i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
56462
- i0.ɵɵadvance();
56463
- i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 29 : -1);
56477
+ i0.ɵɵconditional(ctx_r0.isTargetValid() ? 29 : 30);
56478
+ i0.ɵɵadvance(2);
56479
+ i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 && ctx_r0.isTargetValid() ? 31 : -1);
56464
56480
  } }
56465
56481
  function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
56466
56482
  const _r9 = i0.ɵɵgetCurrentView();
@@ -56555,6 +56571,9 @@ class InitialTargetSettingComponent {
56555
56571
  this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
56556
56572
  this.showMetricsHighlight = signal(false, ...(ngDevMode ? [{ debugName: "showMetricsHighlight" }] : []));
56557
56573
  this.hasShownMetricsHighlight = false;
56574
+ this.animatedIncreaseAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedIncreaseAmount" }] : []));
56575
+ this.animatedPercentageGrowth = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentageGrowth" }] : []));
56576
+ this.animationFrameId = null;
56558
56577
  this.priorYearRevenue = computed(() => {
56559
56578
  return sumMetricFromUiData(this.mainUiData(), MetricEnum.PURCHASE_REVENUE, 'priorYear');
56560
56579
  }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
@@ -56594,6 +56613,9 @@ class InitialTargetSettingComponent {
56594
56613
  return 0;
56595
56614
  return ((target - prior) / prior) * 100;
56596
56615
  }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
56616
+ this.isTargetValid = computed(() => {
56617
+ return this.calculatedRevenue() > this.priorYearRevenue();
56618
+ }, ...(ngDevMode ? [{ debugName: "isTargetValid" }] : []));
56597
56619
  this.displayedMetricCalculations = computed(() => {
56598
56620
  const response = this.storedResponse();
56599
56621
  if (!response) {
@@ -56736,6 +56758,42 @@ class InitialTargetSettingComponent {
56736
56758
  }, 2000);
56737
56759
  }
56738
56760
  }, { allowSignalWrites: true });
56761
+ effect(() => {
56762
+ const isValid = this.calculatedRevenue() > this.priorYearRevenue();
56763
+ const increaseAmount = this.calculatedRevenue() - this.priorYearRevenue();
56764
+ const percentageGrowth = this.percentageIncrease();
56765
+ if (isValid && increaseAmount > 0) {
56766
+ this.animateCountUp(increaseAmount, percentageGrowth);
56767
+ }
56768
+ else {
56769
+ this.animatedIncreaseAmount.set(0);
56770
+ this.animatedPercentageGrowth.set(0);
56771
+ }
56772
+ }, { allowSignalWrites: true });
56773
+ }
56774
+ animateCountUp(targetAmount, targetPercentage) {
56775
+ if (this.animationFrameId) {
56776
+ cancelAnimationFrame(this.animationFrameId);
56777
+ }
56778
+ const duration = 400;
56779
+ const startTime = performance.now();
56780
+ const startAmount = 0;
56781
+ const startPercentage = 0;
56782
+ const animate = (currentTime) => {
56783
+ const elapsed = currentTime - startTime;
56784
+ const progress = Math.min(elapsed / duration, 1);
56785
+ const easeProgress = 1 - Math.pow(1 - progress, 3);
56786
+ this.animatedIncreaseAmount.set(startAmount + (targetAmount - startAmount) * easeProgress);
56787
+ this.animatedPercentageGrowth.set(startPercentage + (targetPercentage - startPercentage) * easeProgress);
56788
+ if (progress < 1) {
56789
+ this.animationFrameId = requestAnimationFrame(animate);
56790
+ }
56791
+ else {
56792
+ this.animatedIncreaseAmount.set(targetAmount);
56793
+ this.animatedPercentageGrowth.set(targetPercentage);
56794
+ }
56795
+ };
56796
+ this.animationFrameId = requestAnimationFrame(animate);
56739
56797
  }
56740
56798
  parseMetricValue(value) {
56741
56799
  if (!value)
@@ -57030,7 +57088,7 @@ class InitialTargetSettingComponent {
57030
57088
  let _t;
57031
57089
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
57032
57090
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
57033
- } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 35, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass", "metrics-highlight-pulse"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-sm", "font-semibold", "transition-all", "inline-flex", "items-center", "gap-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "chevron-rotate"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
57091
+ } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 37, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-4"], [1, "grid", "lg:grid-cols-2", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass", "h-full"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass", "metrics-highlight-pulse"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "items-center", "gap-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], [1, "text-sm", "font-semibold", "transition-all", "inline-flex", "items-center", "gap-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "chevron-rotate"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
57034
57092
  i0.ɵɵelementStart(0, "div", 2);
57035
57093
  i0.ɵɵelement(1, "symphiq-tooltip-container");
57036
57094
  i0.ɵɵelementStart(2, "div", 3);
@@ -57066,7 +57124,7 @@ class InitialTargetSettingComponent {
57066
57124
  i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 23)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 24);
57067
57125
  i0.ɵɵelementEnd()()()()();
57068
57126
  i0.ɵɵelementStart(34, "div", 25)(35, "div", 26);
57069
- i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 30, 27, "div", 27);
57127
+ i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 25, "div", 27);
57070
57128
  i0.ɵɵelementEnd()()();
57071
57129
  i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 5, 4, "div", 28);
57072
57130
  i0.ɵɵconditionalCreate(38, InitialTargetSettingComponent_Conditional_38_Template, 6, 3, "div", 29);
@@ -57102,7 +57160,7 @@ class InitialTargetSettingComponent {
57102
57160
  i0.ɵɵadvance();
57103
57161
  i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 21 : -1);
57104
57162
  i0.ɵɵadvance();
57105
- i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results");
57163
+ i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results")("mt-6", ctx.calculationState() !== "results");
57106
57164
  i0.ɵɵadvance(3);
57107
57165
  i0.ɵɵconditional(ctx.calculationState() !== "results" ? 25 : -1);
57108
57166
  i0.ɵɵadvance();
@@ -57131,7 +57189,7 @@ class InitialTargetSettingComponent {
57131
57189
  StickySubmitBarComponent,
57132
57190
  AreaChartComponent,
57133
57191
  TooltipDirective,
57134
- TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}.details-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded[_ngcontent-%COMP%]{grid-template-rows:1fr}.details-collapse-content[_ngcontent-%COMP%]{overflow:hidden}.chevron-rotate[_ngcontent-%COMP%]{transition:transform .3s ease-out}.chevron-rotate-expanded[_ngcontent-%COMP%]{transform:rotate(180deg)}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #8b5cf6b3}50%{transform:scale(1.01);box-shadow:0 0 20px 8px #8b5cf64d}}.metrics-highlight-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}"], changeDetection: 0 }); }
57192
+ 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 }); }
57135
57193
  }
57136
57194
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
57137
57195
  type: Component,
@@ -57219,7 +57277,7 @@ class InitialTargetSettingComponent {
57219
57277
  }
57220
57278
  </div>
57221
57279
 
57222
- <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'">
57280
+ <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
57223
57281
  <div class="form-area-content">
57224
57282
  <div class="space-y-6">
57225
57283
  @if (calculationState() !== 'results') {
@@ -57322,7 +57380,7 @@ class InitialTargetSettingComponent {
57322
57380
  @if (calculatedRevenue() > 0) {
57323
57381
  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
57324
57382
  [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
57325
- <div [class.space-y-6]="calculationState() !== 'results'">
57383
+ <div>
57326
57384
  <div class="flex items-center justify-between">
57327
57385
  <div>
57328
57386
  <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
@@ -57364,7 +57422,11 @@ class InitialTargetSettingComponent {
57364
57422
  Increase Amount
57365
57423
  </p>
57366
57424
  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57367
- {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
57425
+ @if (isTargetValid()) {
57426
+ {{ formatCurrency(animatedIncreaseAmount()) }}
57427
+ } @else {
57428
+ --
57429
+ }
57368
57430
  </p>
57369
57431
  </div>
57370
57432
  <div>
@@ -57372,13 +57434,17 @@ class InitialTargetSettingComponent {
57372
57434
  % Growth
57373
57435
  </p>
57374
57436
  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57375
- +{{ formatPercentage(percentageIncrease(), 1) }}
57437
+ @if (isTargetValid()) {
57438
+ +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
57439
+ } @else {
57440
+ --
57441
+ }
57376
57442
  </p>
57377
57443
  </div>
57378
57444
  </div>
57379
57445
  </div>
57380
57446
 
57381
- @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
57447
+ @if (currentPaceProjection() > 0 && gapToClose().amount !== 0 && isTargetValid()) {
57382
57448
  <div class="relative pt-6 mt-6">
57383
57449
  <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57384
57450
  <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
@@ -57512,7 +57578,7 @@ class InitialTargetSettingComponent {
57512
57578
  (cancelClick)="handleCancel()"
57513
57579
  />
57514
57580
  </div>
57515
- `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #8b5cf6b3}50%{transform:scale(1.01);box-shadow:0 0 20px 8px #8b5cf64d}}.metrics-highlight-pulse{animation:pulse-highlight 1s ease-in-out 2;border-color:#8b5cf6!important}\n"] }]
57581
+ `, 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"] }]
57516
57582
  }], () => [], { absoluteInputRef: [{
57517
57583
  type: ViewChild,
57518
57584
  args: ['absoluteInputRef']
@@ -57520,7 +57586,7 @@ class InitialTargetSettingComponent {
57520
57586
  type: ViewChild,
57521
57587
  args: ['percentageInputRef']
57522
57588
  }], 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"] }] }); })();
57523
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 533 }); })();
57589
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 539 }); })();
57524
57590
 
57525
57591
  function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
57526
57592
  i0.ɵɵelement(0, "div", 5);