@eric-emg/symphiq-components 1.2.211 → 1.2.213
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.
- package/fesm2022/symphiq-components.mjs +311 -244
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +22 -22
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -54704,10 +54704,17 @@ class RevenueCalculatorWelcomeBannerComponent {
|
|
|
54704
54704
|
}], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], hasTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTargets", required: false }] }] }); })();
|
|
54705
54705
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RevenueCalculatorWelcomeBannerComponent, { className: "RevenueCalculatorWelcomeBannerComponent", filePath: "lib/components/revenue-calculator-dashboard/revenue-calculator-welcome-banner.component.ts", lineNumber: 85 }); })();
|
|
54706
54706
|
|
|
54707
|
-
function calculatePacingStatus(projectedValue, targetValue) {
|
|
54707
|
+
function calculatePacingStatus(projectedValue, targetValue, increaseBad = false) {
|
|
54708
54708
|
if (targetValue <= 0)
|
|
54709
54709
|
return 'on-pace';
|
|
54710
54710
|
const pacingPercent = ((projectedValue - targetValue) / targetValue) * 100;
|
|
54711
|
+
if (increaseBad) {
|
|
54712
|
+
if (pacingPercent <= -5)
|
|
54713
|
+
return 'ahead';
|
|
54714
|
+
if (pacingPercent <= 5)
|
|
54715
|
+
return 'on-pace';
|
|
54716
|
+
return 'behind';
|
|
54717
|
+
}
|
|
54711
54718
|
if (pacingPercent >= 5)
|
|
54712
54719
|
return 'ahead';
|
|
54713
54720
|
if (pacingPercent >= -5)
|
|
@@ -54801,13 +54808,16 @@ function getPacingDisplayInfo(pacingPercentage, status, isDark) {
|
|
|
54801
54808
|
displayText
|
|
54802
54809
|
};
|
|
54803
54810
|
}
|
|
54804
|
-
function calculateMetricPacing(projectedValue, targetValue) {
|
|
54811
|
+
function calculateMetricPacing(projectedValue, targetValue, increaseBad = false) {
|
|
54805
54812
|
console.group(`[PACING] calculateMetricPacing`);
|
|
54806
|
-
console.log('[PACING] Input:', { projectedValue, targetValue });
|
|
54807
|
-
|
|
54813
|
+
console.log('[PACING] Input:', { projectedValue, targetValue, increaseBad });
|
|
54814
|
+
let pacingPercentage = targetValue > 0
|
|
54808
54815
|
? ((projectedValue - targetValue) / targetValue) * 100
|
|
54809
54816
|
: 0;
|
|
54810
|
-
|
|
54817
|
+
if (increaseBad) {
|
|
54818
|
+
pacingPercentage = -pacingPercentage;
|
|
54819
|
+
}
|
|
54820
|
+
const status = calculatePacingStatus(projectedValue, targetValue, increaseBad);
|
|
54811
54821
|
console.log('[PACING] Result:', { pacingPercentage, status, projectedValue });
|
|
54812
54822
|
console.groupEnd();
|
|
54813
54823
|
return {
|
|
@@ -55023,7 +55033,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template
|
|
|
55023
55033
|
i0.ɵɵadvance(2);
|
|
55024
55034
|
i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
|
|
55025
55035
|
i0.ɵɵadvance();
|
|
55026
|
-
i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric));
|
|
55036
|
+
i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false));
|
|
55027
55037
|
} }
|
|
55028
55038
|
function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
55029
55039
|
i0.ɵɵelement(0, "div", 16);
|
|
@@ -55101,7 +55111,7 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
|
|
|
55101
55111
|
i0.ɵɵadvance();
|
|
55102
55112
|
i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
|
|
55103
55113
|
i0.ɵɵadvance();
|
|
55104
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric), " ");
|
|
55114
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
|
|
55105
55115
|
i0.ɵɵadvance();
|
|
55106
55116
|
i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 23 : -1);
|
|
55107
55117
|
} }
|
|
@@ -55134,14 +55144,16 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55134
55144
|
console.log(`[PACING] Processing stage: ${stageMetric.metric}`);
|
|
55135
55145
|
const stageProjectedValue = extractProjectedValue(pacingResponse, stageMetric.metric);
|
|
55136
55146
|
console.log(`[PACING] stageProjectedValue for ${stageMetric.metric}:`, stageProjectedValue);
|
|
55147
|
+
const stageIncreaseBad = MetricEnumUtil.increaseBad(stageMetric.metric);
|
|
55137
55148
|
const stagePacingInfo = stageProjectedValue !== null
|
|
55138
|
-
? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue)
|
|
55149
|
+
? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue, stageIncreaseBad)
|
|
55139
55150
|
: null;
|
|
55140
55151
|
console.log(`[PACING] stagePacingInfo for ${stageMetric.metric}:`, stagePacingInfo);
|
|
55141
55152
|
const relatedWithPacing = related.map(relMetric => {
|
|
55142
55153
|
const relProjectedValue = extractProjectedValue(pacingResponse, relMetric.metric);
|
|
55154
|
+
const relIncreaseBad = MetricEnumUtil.increaseBad(relMetric.metric);
|
|
55143
55155
|
const relPacingInfo = relProjectedValue !== null
|
|
55144
|
-
? calculateMetricPacing(relProjectedValue, relMetric.targetValue)
|
|
55156
|
+
? calculateMetricPacing(relProjectedValue, relMetric.targetValue, relIncreaseBad)
|
|
55145
55157
|
: null;
|
|
55146
55158
|
return { calc: relMetric, pacingInfo: relPacingInfo };
|
|
55147
55159
|
});
|
|
@@ -55350,7 +55362,7 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55350
55362
|
{{ currentYear() }} Target
|
|
55351
55363
|
</p>
|
|
55352
55364
|
<p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
|
|
55353
|
-
{{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
|
|
55365
|
+
{{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
|
|
55354
55366
|
</p>
|
|
55355
55367
|
</div>
|
|
55356
55368
|
</div>
|
|
@@ -55407,7 +55419,7 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55407
55419
|
</div>
|
|
55408
55420
|
}
|
|
55409
55421
|
<div>
|
|
55410
|
-
<p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
|
|
55422
|
+
<p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}</p>
|
|
55411
55423
|
</div>
|
|
55412
55424
|
</div>
|
|
55413
55425
|
</div>
|
|
@@ -56276,10 +56288,10 @@ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf
|
|
|
56276
56288
|
} }
|
|
56277
56289
|
function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
56278
56290
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
56279
|
-
i0.ɵɵelementStart(0, "div", 34)(1, "span",
|
|
56291
|
+
i0.ɵɵelementStart(0, "div", 34)(1, "span", 36);
|
|
56280
56292
|
i0.ɵɵtext(2, " $ ");
|
|
56281
56293
|
i0.ɵɵelementEnd();
|
|
56282
|
-
i0.ɵɵelementStart(3, "input",
|
|
56294
|
+
i0.ɵɵelementStart(3, "input", 37, 0);
|
|
56283
56295
|
i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
|
|
56284
56296
|
i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
|
|
56285
56297
|
i0.ɵɵelementEnd()();
|
|
@@ -56293,11 +56305,11 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf,
|
|
|
56293
56305
|
} }
|
|
56294
56306
|
function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
56295
56307
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
56296
|
-
i0.ɵɵelementStart(0, "div", 34)(1, "input",
|
|
56308
|
+
i0.ɵɵelementStart(0, "div", 34)(1, "input", 38, 1);
|
|
56297
56309
|
i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
|
|
56298
56310
|
i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
|
|
56299
56311
|
i0.ɵɵelementEnd();
|
|
56300
|
-
i0.ɵɵelementStart(3, "span",
|
|
56312
|
+
i0.ɵɵelementStart(3, "span", 39);
|
|
56301
56313
|
i0.ɵɵtext(4, " % ");
|
|
56302
56314
|
i0.ɵɵelementEnd()();
|
|
56303
56315
|
} if (rf & 2) {
|
|
@@ -56308,6 +56320,17 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf,
|
|
|
56308
56320
|
i0.ɵɵadvance(2);
|
|
56309
56321
|
i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
|
|
56310
56322
|
} }
|
|
56323
|
+
function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
56324
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
56325
|
+
i0.ɵɵelementStart(0, "div", 35)(1, "button", 40);
|
|
56326
|
+
i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
|
|
56327
|
+
i0.ɵɵtext(2, " Cancel ");
|
|
56328
|
+
i0.ɵɵelementEnd()();
|
|
56329
|
+
} if (rf & 2) {
|
|
56330
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
56331
|
+
i0.ɵɵadvance();
|
|
56332
|
+
i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
|
|
56333
|
+
} }
|
|
56311
56334
|
function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
|
|
56312
56335
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
56313
56336
|
i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
|
|
@@ -56319,6 +56342,7 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
|
|
|
56319
56342
|
i0.ɵɵtext(4, " % Increase ");
|
|
56320
56343
|
i0.ɵɵelementEnd()();
|
|
56321
56344
|
i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_22_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_22_Conditional_6_Template, 5, 3, "div", 34);
|
|
56345
|
+
i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_22_Conditional_7_Template, 3, 1, "div", 35);
|
|
56322
56346
|
} if (rf & 2) {
|
|
56323
56347
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
56324
56348
|
i0.ɵɵadvance();
|
|
@@ -56327,6 +56351,8 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
|
|
|
56327
56351
|
i0.ɵɵproperty("ngClass", ctx_r0.inputModeButtonClasses("percentage"));
|
|
56328
56352
|
i0.ɵɵadvance(2);
|
|
56329
56353
|
i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
|
|
56354
|
+
i0.ɵɵadvance(2);
|
|
56355
|
+
i0.ɵɵconditional(ctx_r0.hasStoredResponse() ? 7 : -1);
|
|
56330
56356
|
} }
|
|
56331
56357
|
function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
|
|
56332
56358
|
i0.ɵɵelement(0, "symphiq-area-chart", 22);
|
|
@@ -56335,7 +56361,7 @@ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf
|
|
|
56335
56361
|
i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
|
|
56336
56362
|
} }
|
|
56337
56363
|
function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
56338
|
-
i0.ɵɵelementStart(0, "div", 23)(1, "p",
|
|
56364
|
+
i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
|
|
56339
56365
|
i0.ɵɵtext(2, " No revenue data available ");
|
|
56340
56366
|
i0.ɵɵelementEnd()();
|
|
56341
56367
|
} if (rf & 2) {
|
|
@@ -56343,40 +56369,52 @@ function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf
|
|
|
56343
56369
|
i0.ɵɵadvance();
|
|
56344
56370
|
i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
|
|
56345
56371
|
} }
|
|
56372
|
+
function InitialTargetSettingComponent_Conditional_33_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
56373
|
+
i0.ɵɵtext(0);
|
|
56374
|
+
} if (rf & 2) {
|
|
56375
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
56376
|
+
i0.ɵɵtextInterpolate1(" > ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue()), " ");
|
|
56377
|
+
} }
|
|
56346
56378
|
function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
56347
|
-
|
|
56348
|
-
|
|
56349
|
-
|
|
56379
|
+
i0.ɵɵtext(0);
|
|
56380
|
+
} if (rf & 2) {
|
|
56381
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
56382
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
|
|
56383
|
+
} }
|
|
56384
|
+
function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
56385
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
56386
|
+
i0.ɵɵelementStart(0, "button", 52);
|
|
56387
|
+
i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
|
|
56350
56388
|
i0.ɵɵtext(1, " Adjust Revenue Target ");
|
|
56351
56389
|
i0.ɵɵelementEnd();
|
|
56352
56390
|
} if (rf & 2) {
|
|
56353
56391
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
56354
56392
|
i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
|
|
56355
56393
|
} }
|
|
56356
|
-
function
|
|
56357
|
-
i0.ɵɵelementStart(0, "div",
|
|
56358
|
-
i0.ɵɵelement(2, "div",
|
|
56359
|
-
i0.ɵɵelementStart(3, "span",
|
|
56394
|
+
function InitialTargetSettingComponent_Conditional_33_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
56395
|
+
i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
|
|
56396
|
+
i0.ɵɵelement(2, "div", 48);
|
|
56397
|
+
i0.ɵɵelementStart(3, "span", 49);
|
|
56360
56398
|
i0.ɵɵtext(4);
|
|
56361
56399
|
i0.ɵɵelementEnd();
|
|
56362
|
-
i0.ɵɵelement(5, "div",
|
|
56400
|
+
i0.ɵɵelement(5, "div", 48);
|
|
56363
56401
|
i0.ɵɵelementEnd();
|
|
56364
|
-
i0.ɵɵelementStart(6, "div",
|
|
56402
|
+
i0.ɵɵelementStart(6, "div", 50)(7, "div")(8, "p", 43);
|
|
56365
56403
|
i0.ɵɵtext(9, " Gap to Close ");
|
|
56366
56404
|
i0.ɵɵelementEnd();
|
|
56367
|
-
i0.ɵɵelementStart(10, "p",
|
|
56405
|
+
i0.ɵɵelementStart(10, "p", 51);
|
|
56368
56406
|
i0.ɵɵtext(11);
|
|
56369
56407
|
i0.ɵɵelementEnd()();
|
|
56370
|
-
i0.ɵɵelementStart(12, "div")(13, "div",
|
|
56408
|
+
i0.ɵɵelementStart(12, "div")(13, "div", 53)(14, "p", 13);
|
|
56371
56409
|
i0.ɵɵtext(15, " Additional Growth Needed ");
|
|
56372
56410
|
i0.ɵɵelementEnd();
|
|
56373
|
-
i0.ɵɵelementStart(16, "button",
|
|
56411
|
+
i0.ɵɵelementStart(16, "button", 54);
|
|
56374
56412
|
i0.ɵɵnamespaceSVG();
|
|
56375
|
-
i0.ɵɵelementStart(17, "svg",
|
|
56376
|
-
i0.ɵɵelement(18, "path",
|
|
56413
|
+
i0.ɵɵelementStart(17, "svg", 55);
|
|
56414
|
+
i0.ɵɵelement(18, "path", 56);
|
|
56377
56415
|
i0.ɵɵelementEnd()()();
|
|
56378
56416
|
i0.ɵɵnamespaceHTML();
|
|
56379
|
-
i0.ɵɵelementStart(19, "p",
|
|
56417
|
+
i0.ɵɵelementStart(19, "p", 51);
|
|
56380
56418
|
i0.ɵɵtext(20);
|
|
56381
56419
|
i0.ɵɵelementEnd()()()();
|
|
56382
56420
|
} if (rf & 2) {
|
|
@@ -56405,34 +56443,34 @@ function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf
|
|
|
56405
56443
|
i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
|
|
56406
56444
|
} }
|
|
56407
56445
|
function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
|
|
56408
|
-
i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div",
|
|
56446
|
+
i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 42)(3, "div")(4, "p", 43);
|
|
56409
56447
|
i0.ɵɵtext(5);
|
|
56410
56448
|
i0.ɵɵelementEnd();
|
|
56411
|
-
i0.ɵɵelementStart(6, "p",
|
|
56412
|
-
i0.ɵɵ
|
|
56449
|
+
i0.ɵɵelementStart(6, "p", 44);
|
|
56450
|
+
i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_33_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 1, 1);
|
|
56413
56451
|
i0.ɵɵelementEnd()();
|
|
56414
|
-
i0.ɵɵconditionalCreate(
|
|
56452
|
+
i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_33_Conditional_9_Template, 2, 1, "button", 45);
|
|
56415
56453
|
i0.ɵɵelementEnd();
|
|
56416
|
-
i0.ɵɵelementStart(
|
|
56417
|
-
i0.ɵɵelement(
|
|
56418
|
-
i0.ɵɵelementStart(
|
|
56419
|
-
i0.ɵɵtext(
|
|
56454
|
+
i0.ɵɵelementStart(10, "div", 46)(11, "div", 47);
|
|
56455
|
+
i0.ɵɵelement(12, "div", 48);
|
|
56456
|
+
i0.ɵɵelementStart(13, "span", 49);
|
|
56457
|
+
i0.ɵɵtext(14);
|
|
56420
56458
|
i0.ɵɵelementEnd();
|
|
56421
|
-
i0.ɵɵelement(
|
|
56459
|
+
i0.ɵɵelement(15, "div", 48);
|
|
56422
56460
|
i0.ɵɵelementEnd();
|
|
56423
|
-
i0.ɵɵelementStart(
|
|
56424
|
-
i0.ɵɵtext(
|
|
56461
|
+
i0.ɵɵelementStart(16, "div", 50)(17, "div")(18, "p", 43);
|
|
56462
|
+
i0.ɵɵtext(19, " Increase Amount ");
|
|
56425
56463
|
i0.ɵɵelementEnd();
|
|
56426
|
-
i0.ɵɵelementStart(
|
|
56427
|
-
i0.ɵɵtext(
|
|
56464
|
+
i0.ɵɵelementStart(20, "p", 51);
|
|
56465
|
+
i0.ɵɵtext(21);
|
|
56428
56466
|
i0.ɵɵelementEnd()();
|
|
56429
|
-
i0.ɵɵelementStart(
|
|
56430
|
-
i0.ɵɵtext(
|
|
56467
|
+
i0.ɵɵelementStart(22, "div")(23, "p", 43);
|
|
56468
|
+
i0.ɵɵtext(24, " % Growth ");
|
|
56431
56469
|
i0.ɵɵelementEnd();
|
|
56432
|
-
i0.ɵɵelementStart(
|
|
56433
|
-
i0.ɵɵtext(
|
|
56470
|
+
i0.ɵɵelementStart(25, "p", 51);
|
|
56471
|
+
i0.ɵɵtext(26);
|
|
56434
56472
|
i0.ɵɵelementEnd()()()();
|
|
56435
|
-
i0.ɵɵconditionalCreate(
|
|
56473
|
+
i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_33_Conditional_27_Template, 21, 13, "div", 46);
|
|
56436
56474
|
i0.ɵɵelementEnd()();
|
|
56437
56475
|
} if (rf & 2) {
|
|
56438
56476
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -56444,9 +56482,9 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
|
|
|
56444
56482
|
i0.ɵɵadvance();
|
|
56445
56483
|
i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
|
|
56446
56484
|
i0.ɵɵadvance();
|
|
56447
|
-
i0.ɵɵ
|
|
56448
|
-
i0.ɵɵadvance();
|
|
56449
|
-
i0.ɵɵconditional(ctx_r0.calculationState() === "results" ?
|
|
56485
|
+
i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 7 : 8);
|
|
56486
|
+
i0.ɵɵadvance(2);
|
|
56487
|
+
i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 9 : -1);
|
|
56450
56488
|
i0.ɵɵadvance(3);
|
|
56451
56489
|
i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
|
|
56452
56490
|
i0.ɵɵadvance();
|
|
@@ -56468,7 +56506,7 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
|
|
|
56468
56506
|
i0.ɵɵadvance();
|
|
56469
56507
|
i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
|
|
56470
56508
|
i0.ɵɵadvance();
|
|
56471
|
-
i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ?
|
|
56509
|
+
i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 27 : -1);
|
|
56472
56510
|
} }
|
|
56473
56511
|
function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
56474
56512
|
i0.ɵɵelement(0, "symphiq-area-chart", 22);
|
|
@@ -56477,7 +56515,7 @@ function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf,
|
|
|
56477
56515
|
i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
|
|
56478
56516
|
} }
|
|
56479
56517
|
function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
56480
|
-
i0.ɵɵelementStart(0, "div", 23)(1, "p",
|
|
56518
|
+
i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
|
|
56481
56519
|
i0.ɵɵtext(2, " No revenue data available ");
|
|
56482
56520
|
i0.ɵɵelementEnd()();
|
|
56483
56521
|
} if (rf & 2) {
|
|
@@ -56502,13 +56540,13 @@ function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf
|
|
|
56502
56540
|
i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
|
|
56503
56541
|
} }
|
|
56504
56542
|
function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
|
|
56505
|
-
i0.ɵɵelementStart(0, "div", 3)(1, "div",
|
|
56543
|
+
i0.ɵɵelementStart(0, "div", 3)(1, "div", 57)(2, "h2", 58);
|
|
56506
56544
|
i0.ɵɵtext(3, " Contributing Metrics ");
|
|
56507
56545
|
i0.ɵɵelementEnd();
|
|
56508
|
-
i0.ɵɵelementStart(4, "p",
|
|
56546
|
+
i0.ɵɵelementStart(4, "p", 41);
|
|
56509
56547
|
i0.ɵɵtext(5);
|
|
56510
56548
|
i0.ɵɵelementEnd()();
|
|
56511
|
-
i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization",
|
|
56549
|
+
i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 59);
|
|
56512
56550
|
i0.ɵɵelementEnd();
|
|
56513
56551
|
} if (rf & 2) {
|
|
56514
56552
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -56532,6 +56570,7 @@ class InitialTargetSettingComponent {
|
|
|
56532
56570
|
this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
|
|
56533
56571
|
this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
|
|
56534
56572
|
this.reverseCalculationResponse = input(undefined, ...(ngDevMode ? [{ debugName: "reverseCalculationResponse" }] : []));
|
|
56573
|
+
this.targets = input(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : []));
|
|
56535
56574
|
this.targetsCreated = output();
|
|
56536
56575
|
this.calculateRevenueRequest = output();
|
|
56537
56576
|
this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
|
|
@@ -56647,6 +56686,9 @@ class InitialTargetSettingComponent {
|
|
|
56647
56686
|
return results;
|
|
56648
56687
|
}, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
|
|
56649
56688
|
this.displayedTargetRevenue = computed(() => {
|
|
56689
|
+
if (this.calculationState() !== 'results') {
|
|
56690
|
+
return this.calculatedRevenue();
|
|
56691
|
+
}
|
|
56650
56692
|
const response = this.storedResponse();
|
|
56651
56693
|
if (response && response.targetRevenue) {
|
|
56652
56694
|
return response.targetRevenue;
|
|
@@ -56812,6 +56854,15 @@ class InitialTargetSettingComponent {
|
|
|
56812
56854
|
this.calculationState.set('input');
|
|
56813
56855
|
}
|
|
56814
56856
|
handleCancel() {
|
|
56857
|
+
const response = this.storedResponse();
|
|
56858
|
+
if (response && response.targetRevenue) {
|
|
56859
|
+
this.absoluteInput.set(response.targetRevenue);
|
|
56860
|
+
const priorRevenue = this.priorYearRevenue();
|
|
56861
|
+
if (priorRevenue > 0) {
|
|
56862
|
+
const pct = ((response.targetRevenue - priorRevenue) / priorRevenue) * 100;
|
|
56863
|
+
this.percentageInput.set(pct);
|
|
56864
|
+
}
|
|
56865
|
+
}
|
|
56815
56866
|
this.calculationState.set('results');
|
|
56816
56867
|
}
|
|
56817
56868
|
formatCurrency(value) {
|
|
@@ -56987,7 +57038,7 @@ class InitialTargetSettingComponent {
|
|
|
56987
57038
|
let _t;
|
|
56988
57039
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
|
|
56989
57040
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
|
|
56990
|
-
} }, 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"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "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", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 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, "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, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 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-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"], ["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, "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, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
|
|
57041
|
+
} }, 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: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "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", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 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, "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, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 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-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"], ["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, "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, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
|
|
56991
57042
|
i0.ɵɵelementStart(0, "div", 2);
|
|
56992
57043
|
i0.ɵɵelement(1, "symphiq-tooltip-container");
|
|
56993
57044
|
i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
|
|
@@ -57008,7 +57059,7 @@ class InitialTargetSettingComponent {
|
|
|
57008
57059
|
i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
|
|
57009
57060
|
i0.ɵɵelementEnd();
|
|
57010
57061
|
i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
|
|
57011
|
-
i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template,
|
|
57062
|
+
i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 8, 4);
|
|
57012
57063
|
i0.ɵɵelementEnd()()()();
|
|
57013
57064
|
i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
|
|
57014
57065
|
i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
|
|
@@ -57017,7 +57068,7 @@ class InitialTargetSettingComponent {
|
|
|
57017
57068
|
i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
|
|
57018
57069
|
i0.ɵɵelementEnd()()()()();
|
|
57019
57070
|
i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
|
|
57020
|
-
i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template,
|
|
57071
|
+
i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 28, 17, "div", 26);
|
|
57021
57072
|
i0.ɵɵelementEnd()()();
|
|
57022
57073
|
i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
|
|
57023
57074
|
i0.ɵɵelementEnd()();
|
|
@@ -57186,6 +57237,17 @@ class InitialTargetSettingComponent {
|
|
|
57186
57237
|
</span>
|
|
57187
57238
|
</div>
|
|
57188
57239
|
}
|
|
57240
|
+
|
|
57241
|
+
@if (hasStoredResponse()) {
|
|
57242
|
+
<div class="flex justify-end">
|
|
57243
|
+
<button
|
|
57244
|
+
(click)="handleCancel()"
|
|
57245
|
+
[ngClass]="cancelButtonClasses()"
|
|
57246
|
+
class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
|
|
57247
|
+
Cancel
|
|
57248
|
+
</button>
|
|
57249
|
+
</div>
|
|
57250
|
+
}
|
|
57189
57251
|
}
|
|
57190
57252
|
</div>
|
|
57191
57253
|
</div>
|
|
@@ -57231,10 +57293,14 @@ class InitialTargetSettingComponent {
|
|
|
57231
57293
|
{{ currentYear() }} Revenue Target
|
|
57232
57294
|
</p>
|
|
57233
57295
|
<p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
|
|
57234
|
-
|
|
57296
|
+
@if (calculationState() === 'results' && targets() === undefined) {
|
|
57297
|
+
> {{ formatCurrency(calculatedRevenue()) }}
|
|
57298
|
+
} @else {
|
|
57299
|
+
{{ formatCurrency(displayedTargetRevenue()) }}
|
|
57300
|
+
}
|
|
57235
57301
|
</p>
|
|
57236
57302
|
</div>
|
|
57237
|
-
@if (calculationState() === 'results') {
|
|
57303
|
+
@if (calculationState() === 'results' && targets() === undefined) {
|
|
57238
57304
|
<button
|
|
57239
57305
|
(click)="handleAdjustTarget()"
|
|
57240
57306
|
[ngClass]="secondaryButtonClasses()"
|
|
@@ -57389,8 +57455,8 @@ class InitialTargetSettingComponent {
|
|
|
57389
57455
|
}], percentageInputRef: [{
|
|
57390
57456
|
type: ViewChild,
|
|
57391
57457
|
args: ['percentageInputRef']
|
|
57392
|
-
}], 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 }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
|
|
57393
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber:
|
|
57458
|
+
}], 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"] }] }); })();
|
|
57459
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 433 }); })();
|
|
57394
57460
|
|
|
57395
57461
|
function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
|
|
57396
57462
|
i0.ɵɵelement(0, "div", 5);
|
|
@@ -57570,7 +57636,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
|
|
|
57570
57636
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
57571
57637
|
i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
|
|
57572
57638
|
i0.ɵɵadvance(2);
|
|
57573
|
-
i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(
|
|
57639
|
+
i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
|
|
57574
57640
|
} }
|
|
57575
57641
|
function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
|
|
57576
57642
|
i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
|
|
@@ -57744,7 +57810,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
|
|
|
57744
57810
|
static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
|
|
57745
57811
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
57746
57812
|
i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
|
|
57747
|
-
} }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
57813
|
+
} }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
57748
57814
|
i0.ɵɵelementStart(0, "div", 0)(1, "div");
|
|
57749
57815
|
i0.ɵɵelement(2, "div", 1);
|
|
57750
57816
|
i0.ɵɵelementEnd();
|
|
@@ -57762,7 +57828,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
|
|
|
57762
57828
|
i0.ɵɵlistener("stepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
|
|
57763
57829
|
i0.ɵɵelementEnd();
|
|
57764
57830
|
i0.ɵɵelementStart(21, "main", 11)(22, "div", 6);
|
|
57765
|
-
i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3,
|
|
57831
|
+
i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 13)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
|
|
57766
57832
|
i0.ɵɵelementEnd()()()();
|
|
57767
57833
|
} if (rf & 2) {
|
|
57768
57834
|
i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
|
|
@@ -57811,189 +57877,190 @@ class SymphiqRevenueCalculatorDashboardComponent {
|
|
|
57811
57877
|
IndeterminateSpinnerComponent
|
|
57812
57878
|
],
|
|
57813
57879
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
57814
|
-
template: `
|
|
57815
|
-
<div [ngClass]="getContainerClasses()">
|
|
57816
|
-
<!-- Scroll Progress Bar -->
|
|
57817
|
-
<div
|
|
57818
|
-
[class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
|
|
57819
|
-
<div
|
|
57820
|
-
[style.width.%]="scrollProgress()"
|
|
57821
|
-
[ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
|
|
57822
|
-
class="h-full transition-all duration-200 ease-out">
|
|
57823
|
-
</div>
|
|
57824
|
-
</div>
|
|
57825
|
-
|
|
57826
|
-
<!-- Animated Background Bubbles -->
|
|
57827
|
-
<div class="animated-bubbles" [class.light-mode]="isLightMode()"
|
|
57828
|
-
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
|
|
57829
|
-
|
|
57830
|
-
<div class="relative z-[51]">
|
|
57831
|
-
<header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
|
|
57832
|
-
<!-- Expanded Header -->
|
|
57833
|
-
<div
|
|
57834
|
-
class="transition-all duration-300 ease-in-out overflow-hidden"
|
|
57835
|
-
[class.max-h-0]="isScrolled()"
|
|
57836
|
-
[class.opacity-0]="isScrolled()"
|
|
57837
|
-
[class.max-h-96]="!isScrolled()"
|
|
57838
|
-
[class.opacity-100]="!isScrolled()">
|
|
57839
|
-
<div
|
|
57840
|
-
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
|
|
57841
|
-
[class.pointer-events-none]="isScrolled()"
|
|
57842
|
-
[class.pointer-events-auto]="!isScrolled()">
|
|
57843
|
-
<div class="flex items-center justify-between">
|
|
57844
|
-
<div>
|
|
57845
|
-
<h1 [ngClass]="getMainTitleClasses()">
|
|
57846
|
-
Revenue Calculator
|
|
57847
|
-
</h1>
|
|
57848
|
-
<p [ngClass]="getSubtitleClasses()">
|
|
57849
|
-
Set Your Revenue Target and See Required Metric Improvements
|
|
57850
|
-
</p>
|
|
57851
|
-
</div>
|
|
57852
|
-
</div>
|
|
57853
|
-
</div>
|
|
57854
|
-
</div>
|
|
57855
|
-
|
|
57856
|
-
<!-- Condensed Header -->
|
|
57857
|
-
<div
|
|
57858
|
-
class="transition-all duration-300 ease-in-out overflow-hidden"
|
|
57859
|
-
[class.max-h-0]="!isScrolled()"
|
|
57860
|
-
[class.opacity-0]="!isScrolled()"
|
|
57861
|
-
[class.max-h-20]="isScrolled()"
|
|
57862
|
-
[class.opacity-100]="isScrolled()">
|
|
57863
|
-
<div
|
|
57864
|
-
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
|
|
57865
|
-
[class.pointer-events-none]="!isScrolled()"
|
|
57866
|
-
[class.pointer-events-auto]="isScrolled()">
|
|
57867
|
-
<div class="flex items-center justify-between">
|
|
57868
|
-
<div class="flex-1 min-w-0 mr-4">
|
|
57869
|
-
<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'">
|
|
57870
|
-
Revenue Calculator
|
|
57871
|
-
</h1>
|
|
57872
|
-
</div>
|
|
57873
|
-
</div>
|
|
57874
|
-
</div>
|
|
57875
|
-
</div>
|
|
57876
|
-
</header>
|
|
57877
|
-
|
|
57878
|
-
<!-- Journey Progress Indicator -->
|
|
57879
|
-
<symphiq-journey-progress-indicator
|
|
57880
|
-
[viewMode]="viewMode()"
|
|
57881
|
-
[currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
|
|
57882
|
-
[showNextStepAction]="hasCurrentYearTargets()"
|
|
57883
|
-
[forDemo]="forDemo()"
|
|
57884
|
-
[maxAccessibleStepId]="maxAccessibleStepId()"
|
|
57885
|
-
(stepClick)="stepClick.emit($event)"
|
|
57886
|
-
(nextStepClick)="nextStepClick.emit()"
|
|
57887
|
-
/>
|
|
57888
|
-
|
|
57889
|
-
<main class="relative">
|
|
57890
|
-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
57891
|
-
|
|
57892
|
-
<!-- State 1: Pure Loading (isLoading = true) -->
|
|
57893
|
-
@if (isLoading()) {
|
|
57894
|
-
<div class="flex items-center justify-center min-h-[400px]">
|
|
57895
|
-
<symphiq-indeterminate-spinner
|
|
57896
|
-
[viewMode]="viewMode()"
|
|
57897
|
-
size="large"
|
|
57898
|
-
/>
|
|
57899
|
-
</div>
|
|
57900
|
-
}
|
|
57901
|
-
|
|
57902
|
-
<!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
|
|
57903
|
-
@else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
|
|
57904
|
-
<symphiq-revenue-calculator-welcome-banner
|
|
57905
|
-
[viewMode]="viewMode()"
|
|
57906
|
-
[dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
|
|
57907
|
-
[hasTargets]="false"
|
|
57908
|
-
/>
|
|
57909
|
-
|
|
57910
|
-
<!-- Loading Message Card -->
|
|
57911
|
-
<div [ngClass]="loadingMessageContainerClasses()"
|
|
57912
|
-
class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
|
|
57913
|
-
<div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
|
|
57914
|
-
<div class="flex flex-col items-center text-center space-y-6">
|
|
57915
|
-
<symphiq-indeterminate-spinner
|
|
57916
|
-
[viewMode]="viewMode()"
|
|
57917
|
-
size="large"
|
|
57918
|
-
/>
|
|
57919
|
-
<div class="space-y-2">
|
|
57920
|
-
<h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
|
|
57921
|
-
Downloading Your Google Analytics 4 Data
|
|
57922
|
-
</h3>
|
|
57923
|
-
<p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
|
|
57924
|
-
Symphiq is fetching your historical metrics to establish baseline performance. This may take a
|
|
57925
|
-
moment as we gather your funnel data.
|
|
57926
|
-
</p>
|
|
57927
|
-
</div>
|
|
57928
|
-
</div>
|
|
57929
|
-
</div>
|
|
57930
|
-
</div>
|
|
57931
|
-
}
|
|
57932
|
-
|
|
57933
|
-
<!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
|
|
57934
|
-
@else if (!hasCurrentYearTargets()) {
|
|
57935
|
-
<symphiq-revenue-calculator-welcome-banner
|
|
57936
|
-
[viewMode]="viewMode()"
|
|
57937
|
-
[dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
|
|
57938
|
-
[hasTargets]="false"
|
|
57939
|
-
/>
|
|
57940
|
-
|
|
57941
|
-
<div class="mt-8">
|
|
57942
|
-
<symphiq-initial-target-setting
|
|
57943
|
-
[viewMode]="viewMode()"
|
|
57944
|
-
[funnelMetrics]="funnelMetrics() ?? []"
|
|
57945
|
-
[mainUiData]="mainUiData()"
|
|
57946
|
-
[trendUiData]="trendUiData()"
|
|
57947
|
-
[shopId]="shopId()"
|
|
57948
|
-
[pacingMetrics]="pacingResponse()"
|
|
57949
|
-
[dataResults]="dataResults()"
|
|
57950
|
-
[reverseCalculationResponse]="reverseCalculationResponse()"
|
|
57951
|
-
|
|
57952
|
-
(
|
|
57953
|
-
|
|
57954
|
-
|
|
57955
|
-
|
|
57956
|
-
|
|
57957
|
-
|
|
57958
|
-
|
|
57959
|
-
|
|
57960
|
-
|
|
57961
|
-
[
|
|
57962
|
-
[
|
|
57963
|
-
|
|
57964
|
-
|
|
57965
|
-
|
|
57966
|
-
|
|
57967
|
-
|
|
57968
|
-
|
|
57969
|
-
|
|
57970
|
-
|
|
57971
|
-
|
|
57972
|
-
|
|
57973
|
-
|
|
57974
|
-
|
|
57975
|
-
|
|
57976
|
-
|
|
57977
|
-
|
|
57978
|
-
|
|
57979
|
-
|
|
57980
|
-
|
|
57981
|
-
|
|
57982
|
-
|
|
57983
|
-
|
|
57984
|
-
|
|
57985
|
-
|
|
57986
|
-
|
|
57987
|
-
|
|
57988
|
-
|
|
57989
|
-
|
|
57880
|
+
template: `
|
|
57881
|
+
<div [ngClass]="getContainerClasses()">
|
|
57882
|
+
<!-- Scroll Progress Bar -->
|
|
57883
|
+
<div
|
|
57884
|
+
[class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
|
|
57885
|
+
<div
|
|
57886
|
+
[style.width.%]="scrollProgress()"
|
|
57887
|
+
[ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
|
|
57888
|
+
class="h-full transition-all duration-200 ease-out">
|
|
57889
|
+
</div>
|
|
57890
|
+
</div>
|
|
57891
|
+
|
|
57892
|
+
<!-- Animated Background Bubbles -->
|
|
57893
|
+
<div class="animated-bubbles" [class.light-mode]="isLightMode()"
|
|
57894
|
+
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
|
|
57895
|
+
|
|
57896
|
+
<div class="relative z-[51]">
|
|
57897
|
+
<header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
|
|
57898
|
+
<!-- Expanded Header -->
|
|
57899
|
+
<div
|
|
57900
|
+
class="transition-all duration-300 ease-in-out overflow-hidden"
|
|
57901
|
+
[class.max-h-0]="isScrolled()"
|
|
57902
|
+
[class.opacity-0]="isScrolled()"
|
|
57903
|
+
[class.max-h-96]="!isScrolled()"
|
|
57904
|
+
[class.opacity-100]="!isScrolled()">
|
|
57905
|
+
<div
|
|
57906
|
+
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
|
|
57907
|
+
[class.pointer-events-none]="isScrolled()"
|
|
57908
|
+
[class.pointer-events-auto]="!isScrolled()">
|
|
57909
|
+
<div class="flex items-center justify-between">
|
|
57910
|
+
<div>
|
|
57911
|
+
<h1 [ngClass]="getMainTitleClasses()">
|
|
57912
|
+
Revenue Calculator
|
|
57913
|
+
</h1>
|
|
57914
|
+
<p [ngClass]="getSubtitleClasses()">
|
|
57915
|
+
Set Your Revenue Target and See Required Metric Improvements
|
|
57916
|
+
</p>
|
|
57917
|
+
</div>
|
|
57918
|
+
</div>
|
|
57919
|
+
</div>
|
|
57920
|
+
</div>
|
|
57921
|
+
|
|
57922
|
+
<!-- Condensed Header -->
|
|
57923
|
+
<div
|
|
57924
|
+
class="transition-all duration-300 ease-in-out overflow-hidden"
|
|
57925
|
+
[class.max-h-0]="!isScrolled()"
|
|
57926
|
+
[class.opacity-0]="!isScrolled()"
|
|
57927
|
+
[class.max-h-20]="isScrolled()"
|
|
57928
|
+
[class.opacity-100]="isScrolled()">
|
|
57929
|
+
<div
|
|
57930
|
+
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
|
|
57931
|
+
[class.pointer-events-none]="!isScrolled()"
|
|
57932
|
+
[class.pointer-events-auto]="isScrolled()">
|
|
57933
|
+
<div class="flex items-center justify-between">
|
|
57934
|
+
<div class="flex-1 min-w-0 mr-4">
|
|
57935
|
+
<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'">
|
|
57936
|
+
Revenue Calculator
|
|
57937
|
+
</h1>
|
|
57938
|
+
</div>
|
|
57939
|
+
</div>
|
|
57940
|
+
</div>
|
|
57941
|
+
</div>
|
|
57942
|
+
</header>
|
|
57943
|
+
|
|
57944
|
+
<!-- Journey Progress Indicator -->
|
|
57945
|
+
<symphiq-journey-progress-indicator
|
|
57946
|
+
[viewMode]="viewMode()"
|
|
57947
|
+
[currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
|
|
57948
|
+
[showNextStepAction]="hasCurrentYearTargets()"
|
|
57949
|
+
[forDemo]="forDemo()"
|
|
57950
|
+
[maxAccessibleStepId]="maxAccessibleStepId()"
|
|
57951
|
+
(stepClick)="stepClick.emit($event)"
|
|
57952
|
+
(nextStepClick)="nextStepClick.emit()"
|
|
57953
|
+
/>
|
|
57954
|
+
|
|
57955
|
+
<main class="relative">
|
|
57956
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
57957
|
+
|
|
57958
|
+
<!-- State 1: Pure Loading (isLoading = true) -->
|
|
57959
|
+
@if (isLoading()) {
|
|
57960
|
+
<div class="flex items-center justify-center min-h-[400px]">
|
|
57961
|
+
<symphiq-indeterminate-spinner
|
|
57962
|
+
[viewMode]="viewMode()"
|
|
57963
|
+
size="large"
|
|
57964
|
+
/>
|
|
57965
|
+
</div>
|
|
57966
|
+
}
|
|
57967
|
+
|
|
57968
|
+
<!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
|
|
57969
|
+
@else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
|
|
57970
|
+
<symphiq-revenue-calculator-welcome-banner
|
|
57971
|
+
[viewMode]="viewMode()"
|
|
57972
|
+
[dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
|
|
57973
|
+
[hasTargets]="false"
|
|
57974
|
+
/>
|
|
57975
|
+
|
|
57976
|
+
<!-- Loading Message Card -->
|
|
57977
|
+
<div [ngClass]="loadingMessageContainerClasses()"
|
|
57978
|
+
class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
|
|
57979
|
+
<div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
|
|
57980
|
+
<div class="flex flex-col items-center text-center space-y-6">
|
|
57981
|
+
<symphiq-indeterminate-spinner
|
|
57982
|
+
[viewMode]="viewMode()"
|
|
57983
|
+
size="large"
|
|
57984
|
+
/>
|
|
57985
|
+
<div class="space-y-2">
|
|
57986
|
+
<h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
|
|
57987
|
+
Downloading Your Google Analytics 4 Data
|
|
57988
|
+
</h3>
|
|
57989
|
+
<p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
|
|
57990
|
+
Symphiq is fetching your historical metrics to establish baseline performance. This may take a
|
|
57991
|
+
moment as we gather your funnel data.
|
|
57992
|
+
</p>
|
|
57993
|
+
</div>
|
|
57994
|
+
</div>
|
|
57995
|
+
</div>
|
|
57996
|
+
</div>
|
|
57997
|
+
}
|
|
57998
|
+
|
|
57999
|
+
<!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
|
|
58000
|
+
@else if (!hasCurrentYearTargets()) {
|
|
58001
|
+
<symphiq-revenue-calculator-welcome-banner
|
|
58002
|
+
[viewMode]="viewMode()"
|
|
58003
|
+
[dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
|
|
58004
|
+
[hasTargets]="false"
|
|
58005
|
+
/>
|
|
58006
|
+
|
|
58007
|
+
<div class="mt-8">
|
|
58008
|
+
<symphiq-initial-target-setting
|
|
58009
|
+
[viewMode]="viewMode()"
|
|
58010
|
+
[funnelMetrics]="funnelMetrics() ?? []"
|
|
58011
|
+
[mainUiData]="mainUiData()"
|
|
58012
|
+
[trendUiData]="trendUiData()"
|
|
58013
|
+
[shopId]="shopId()"
|
|
58014
|
+
[pacingMetrics]="pacingResponse()"
|
|
58015
|
+
[dataResults]="dataResults()"
|
|
58016
|
+
[reverseCalculationResponse]="reverseCalculationResponse()"
|
|
58017
|
+
[targets]="targets()"
|
|
58018
|
+
(targetsCreated)="targetsCreated.emit($event)"
|
|
58019
|
+
(calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
|
|
58020
|
+
/>
|
|
58021
|
+
</div>
|
|
58022
|
+
}
|
|
58023
|
+
|
|
58024
|
+
<!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
|
|
58025
|
+
@else {
|
|
58026
|
+
<symphiq-revenue-calculator-welcome-banner
|
|
58027
|
+
[viewMode]="viewMode()"
|
|
58028
|
+
[dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
|
|
58029
|
+
[hasTargets]="true"
|
|
58030
|
+
/>
|
|
58031
|
+
|
|
58032
|
+
<!-- Placeholder for Revenue Calculator Content -->
|
|
58033
|
+
<div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
|
|
58034
|
+
<div class="text-center space-y-4">
|
|
58035
|
+
<div class="flex justify-center">
|
|
58036
|
+
<svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
|
|
58037
|
+
viewBox="0 0 24 24">
|
|
58038
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
58039
|
+
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
58040
|
+
</svg>
|
|
58041
|
+
</div>
|
|
58042
|
+
<h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
|
|
58043
|
+
Revenue Calculator Dashboard
|
|
58044
|
+
</h3>
|
|
58045
|
+
<p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
|
|
58046
|
+
Your targets are set! The full revenue calculator dashboard with pacing and insights will be
|
|
58047
|
+
displayed here.
|
|
58048
|
+
</p>
|
|
58049
|
+
</div>
|
|
58050
|
+
</div>
|
|
58051
|
+
}
|
|
58052
|
+
|
|
58053
|
+
</div>
|
|
58054
|
+
</main>
|
|
58055
|
+
</div>
|
|
58056
|
+
</div>
|
|
57990
58057
|
`
|
|
57991
58058
|
}]
|
|
57992
58059
|
}], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], ytdComparisonUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ytdComparisonUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }], onWindowScroll: [{
|
|
57993
58060
|
type: HostListener,
|
|
57994
58061
|
args: ['window:scroll', ['$event']]
|
|
57995
58062
|
}] }); })();
|
|
57996
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber:
|
|
58063
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 223 }); })();
|
|
57997
58064
|
|
|
57998
58065
|
function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
57999
58066
|
i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);
|