@eric-emg/symphiq-components 1.2.264 → 1.2.266

package/fesm2022/symphiq-components.mjs

@@ -59008,7 +59008,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Conditional
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 41, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Conditional_3_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.absoluteInput, $event) || (ctx_r1.absoluteInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Conditional_3_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAbsoluteInputChange()); });
+    i0.ɵɵlistener("ngModelChange", function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Conditional_3_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAbsoluteInputChange()); })("keydown", function EditMetricTargetModalComponent_Conditional_0_Conditional_34_Conditional_3_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onIntegerKeyDown($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -59345,6 +59345,9 @@ class EditMetricTargetModalComponent {
                 return false;
             return metric.includes('REVENUE') || metric.includes('VALUE') || metric.includes('PRICE');
         }, ...(ngDevMode ? [{ debugName: "isCurrencyMetric" }] : []));
+        this.isIntegerMetric = computed(() => {
+            return !this.isPercentageMetric() && !this.isCurrencyMetric();
+        }, ...(ngDevMode ? [{ debugName: "isIntegerMetric" }] : []));
         this.isIncreaseBad = computed(() => {
             const metric = this.metricData()?.metric;
             if (!metric)
@@ -59429,12 +59432,10 @@ class EditMetricTargetModalComponent {
             if (this.isOpen()) {
                 const metricData = this.metricData();
                 if (metricData && metricData.targetValue > 0) {
-                    if (this.isPercentageMetric()) {
-                        this.absoluteInput.set(metricData.targetValue * 100);
-                    }
-                    else {
-                        this.absoluteInput.set(metricData.targetValue);
-                    }
+                    const value = this.isIntegerMetric()
+                        ? Math.round(metricData.targetValue)
+                        : metricData.targetValue;
+                    this.absoluteInput.set(value);
                 }
                 afterNextRender(() => {
                     this.focusCurrentInput();
@@ -59517,6 +59518,9 @@ class EditMetricTargetModalComponent {
                 if (this.isPercentageMetric()) {
                     this.absoluteInput.set(calculatedAbsolute * 100);
                 }
+                else if (this.isIntegerMetric()) {
+                    this.absoluteInput.set(Math.round(calculatedAbsolute));
+                }
                 else {
                     this.absoluteInput.set(calculatedAbsolute);
                 }
@@ -59541,12 +59545,23 @@ class EditMetricTargetModalComponent {
     }
     onAbsoluteInputChange() {
         this.percentageInput.set(null);
+        if (this.isIntegerMetric()) {
+            const current = this.absoluteInput();
+            if (current !== null && !Number.isInteger(current)) {
+                this.absoluteInput.set(Math.round(current));
+            }
+        }
         this.updateAnimatedValuesImmediate();
     }
     onPercentageInputChange() {
         this.absoluteInput.set(null);
         this.updateAnimatedValuesImmediate();
     }
+    onIntegerKeyDown(event) {
+        if (event.key === '.' || event.key === ',') {
+            event.preventDefault();
+        }
+    }
     updateAnimatedValuesImmediate() {
         this.animatedTarget.set(this.calculatedTarget());
         this.animatedIncreaseAmount.set(Math.abs(this.increaseAmount()));
@@ -59747,7 +59762,7 @@ class EditMetricTargetModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
         } }, hostBindings: function EditMetricTargetModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function EditMetricTargetModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-0", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [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, "space-y-6"], [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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "step", "1", 1, "w-full", "px-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, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [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, "flex", "items-center", "gap-1", "mb-1"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isOpen: [1, "isOpen"], metricData: [1, "metricData"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { closed: "closed", targetApplied: "targetApplied" }, decls: 1, vars: 1, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-0", 3, "ngClass"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-6"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between", "mb-6"], [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, "space-y-6"], [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, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["type", "button", 1, "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], ["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"], ["type", "number", "placeholder", "0", "min", "0", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "100", "step", "0.01", 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, "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", "step", "1", 1, "w-full", "px-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "keydown", "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, "text-3xl", "font-bold", "transition-all", "duration-300", 3, "ngClass"], [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, "flex", "items-center", "gap-1", "mb-1"]], template: function EditMetricTargetModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, EditMetricTargetModalComponent_Conditional_0_Template, 42, 27);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -59926,6 +59941,7 @@ class EditMetricTargetModalComponent {
                             type="number"
                             [(ngModel)]="absoluteInput"
                             (ngModelChange)="onAbsoluteInputChange()"
+                            (keydown)="onIntegerKeyDown($event)"
                             [ngClass]="inputClasses()"
                             class="w-full px-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
                             placeholder="0"
@@ -60090,7 +60106,7 @@ class EditMetricTargetModalComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 326 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 327 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
@@ -60812,7 +60828,17 @@ class InitialTargetSettingComponent {
                 continue;
             const targetValue = target.amount ?? 0;
             const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
-            const percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+            const isPercentageMetric = MetricEnumUtil.numberType(metric) === NumberTypeEnum.PERCENTAGE;
+            let percentageIncrease = 0;
+            if (currentValue > 0) {
+                if (isPercentageMetric) {
+                    const normalizedCurrent = currentValue * 100;
+                    percentageIncrease = ((targetValue - normalizedCurrent) / normalizedCurrent) * 100;
+                }
+                else {
+                    percentageIncrease = ((targetValue - currentValue) / currentValue) * 100;
+                }
+            }
             const funnelMetricMatch = funnelMetrics.find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
             const relatedMetricMatch = funnelMetrics.find(fm => fm.relatedMetric === metric && fm.funnelMetric !== fm.relatedMetric);
             if (funnelMetricMatch) {
@@ -61742,7 +61768,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"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 576 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 578 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);