@eric-emg/symphiq-components 1.2.214 → 1.2.215

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.
@@ -56262,17 +56262,39 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
56262
56262
 
56263
56263
  const _c0$r = ["absoluteInputRef"];
56264
56264
  const _c1$b = ["percentageInputRef"];
56265
- function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
56266
- i0.ɵɵelementStart(0, "div", 10);
56265
+ function InitialTargetSettingComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56266
+ i0.ɵɵtext(0);
56267
+ } if (rf & 2) {
56268
+ const ctx_r0 = i0.ɵɵnextContext();
56269
+ i0.ɵɵtextInterpolate1(" Your ", ctx_r0.currentYear(), " Revenue Target ");
56270
+ } }
56271
+ function InitialTargetSettingComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56272
+ i0.ɵɵtext(0);
56273
+ } if (rf & 2) {
56274
+ const ctx_r0 = i0.ɵɵnextContext();
56275
+ i0.ɵɵtextInterpolate1(" Calculate Your ", ctx_r0.currentYear(), " Revenue Target ");
56276
+ } }
56277
+ function InitialTargetSettingComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56267
56278
  i0.ɵɵnamespaceSVG();
56268
- i0.ɵɵelementStart(1, "svg", 11);
56269
- i0.ɵɵelement(2, "path", 31);
56279
+ i0.ɵɵelementStart(0, "svg", 34);
56280
+ i0.ɵɵelement(1, "path", 35);
56281
+ i0.ɵɵelementEnd();
56282
+ } if (rf & 2) {
56283
+ const ctx_r0 = i0.ɵɵnextContext();
56284
+ i0.ɵɵclassProp("chevron-rotate-expanded", ctx_r0.detailsExpanded());
56285
+ i0.ɵɵproperty("ngClass", ctx_r0.chevronClasses());
56286
+ } }
56287
+ function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
56288
+ i0.ɵɵelementStart(0, "div", 12);
56289
+ i0.ɵɵnamespaceSVG();
56290
+ i0.ɵɵelementStart(1, "svg", 13);
56291
+ i0.ɵɵelement(2, "path", 36);
56270
56292
  i0.ɵɵelementEnd();
56271
56293
  i0.ɵɵnamespaceHTML();
56272
- i0.ɵɵelementStart(3, "div")(4, "p", 13);
56294
+ i0.ɵɵelementStart(3, "div")(4, "p", 15);
56273
56295
  i0.ɵɵtext(5, " Current Pace Projection ");
56274
56296
  i0.ɵɵelementEnd();
56275
- i0.ɵɵelementStart(6, "p", 14);
56297
+ i0.ɵɵelementStart(6, "p", 16);
56276
56298
  i0.ɵɵtext(7);
56277
56299
  i0.ɵɵelementEnd()()();
56278
56300
  } if (rf & 2) {
@@ -56286,14 +56308,14 @@ function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf
56286
56308
  i0.ɵɵadvance();
56287
56309
  i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
56288
56310
  } }
56289
- function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56311
+ function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56290
56312
  const _r3 = i0.ɵɵgetCurrentView();
56291
- i0.ɵɵelementStart(0, "div", 34)(1, "span", 36);
56313
+ i0.ɵɵelementStart(0, "div", 39)(1, "span", 41);
56292
56314
  i0.ɵɵtext(2, " $ ");
56293
56315
  i0.ɵɵelementEnd();
56294
- i0.ɵɵelementStart(3, "input", 37, 0);
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); });
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()); });
56316
+ i0.ɵɵelementStart(3, "input", 42, 0);
56317
+ i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_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); });
56318
+ i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
56297
56319
  i0.ɵɵelementEnd()();
56298
56320
  } if (rf & 2) {
56299
56321
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -56303,13 +56325,13 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf,
56303
56325
  i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
56304
56326
  i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
56305
56327
  } }
56306
- function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56328
+ function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
56307
56329
  const _r4 = i0.ɵɵgetCurrentView();
56308
- i0.ɵɵelementStart(0, "div", 34)(1, "input", 38, 1);
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); });
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()); });
56330
+ i0.ɵɵelementStart(0, "div", 39)(1, "input", 43, 1);
56331
+ i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_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); });
56332
+ i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_25_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
56311
56333
  i0.ɵɵelementEnd();
56312
- i0.ɵɵelementStart(3, "span", 39);
56334
+ i0.ɵɵelementStart(3, "span", 44);
56313
56335
  i0.ɵɵtext(4, " % ");
56314
56336
  i0.ɵɵelementEnd()();
56315
56337
  } if (rf & 2) {
@@ -56320,10 +56342,10 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf,
56320
56342
  i0.ɵɵadvance(2);
56321
56343
  i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
56322
56344
  } }
56323
- function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56345
+ function InitialTargetSettingComponent_Conditional_25_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56324
56346
  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()); });
56347
+ i0.ɵɵelementStart(0, "div", 40)(1, "button", 45);
56348
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleCancel()); });
56327
56349
  i0.ɵɵtext(2, " Cancel ");
56328
56350
  i0.ɵɵelementEnd()();
56329
56351
  } if (rf & 2) {
@@ -56331,18 +56353,18 @@ function InitialTargetSettingComponent_Conditional_22_Conditional_7_Template(rf,
56331
56353
  i0.ɵɵadvance();
56332
56354
  i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
56333
56355
  } }
56334
- function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
56356
+ function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
56335
56357
  const _r2 = i0.ɵɵgetCurrentView();
56336
- i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
56337
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
56358
+ i0.ɵɵelementStart(0, "div", 37)(1, "button", 38);
56359
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
56338
56360
  i0.ɵɵtext(2, " Absolute Amount ");
56339
56361
  i0.ɵɵelementEnd();
56340
- i0.ɵɵelementStart(3, "button", 33);
56341
- i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
56362
+ i0.ɵɵelementStart(3, "button", 38);
56363
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_25_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
56342
56364
  i0.ɵɵtext(4, " % Increase ");
56343
56365
  i0.ɵɵelementEnd()();
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);
56366
+ i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_25_Conditional_5_Template, 5, 3, "div", 39)(6, InitialTargetSettingComponent_Conditional_25_Conditional_6_Template, 5, 3, "div", 39);
56367
+ i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_25_Conditional_7_Template, 3, 1, "div", 40);
56346
56368
  } if (rf & 2) {
56347
56369
  const ctx_r0 = i0.ɵɵnextContext();
56348
56370
  i0.ɵɵadvance();
@@ -56354,14 +56376,14 @@ function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf
56354
56376
  i0.ɵɵadvance(2);
56355
56377
  i0.ɵɵconditional(ctx_r0.hasStoredResponse() ? 7 : -1);
56356
56378
  } }
56357
- function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
56358
- i0.ɵɵelement(0, "symphiq-area-chart", 22);
56379
+ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
56380
+ i0.ɵɵelement(0, "symphiq-area-chart", 24);
56359
56381
  } if (rf & 2) {
56360
56382
  const ctx_r0 = i0.ɵɵnextContext();
56361
56383
  i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
56362
56384
  } }
56363
- function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
56364
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56385
+ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
56386
+ i0.ɵɵelementStart(0, "div", 25)(1, "p", 46);
56365
56387
  i0.ɵɵtext(2, " No revenue data available ");
56366
56388
  i0.ɵɵelementEnd()();
56367
56389
  } if (rf & 2) {
@@ -56369,52 +56391,65 @@ function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf
56369
56391
  i0.ɵɵadvance();
56370
56392
  i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
56371
56393
  } }
56372
- function InitialTargetSettingComponent_Conditional_33_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56394
+ function InitialTargetSettingComponent_Conditional_36_Conditional_7_Template(rf, ctx) { if (rf & 1) {
56373
56395
  i0.ɵɵtext(0);
56374
56396
  } if (rf & 2) {
56375
56397
  const ctx_r0 = i0.ɵɵnextContext(2);
56376
56398
  i0.ɵɵtextInterpolate1(" > ", ctx_r0.formatCurrency(ctx_r0.submittedAbsoluteInput()), " ");
56377
56399
  } }
56378
- function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
56400
+ function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template(rf, ctx) { if (rf & 1) {
56379
56401
  i0.ɵɵtext(0);
56380
56402
  } if (rf & 2) {
56381
56403
  const ctx_r0 = i0.ɵɵnextContext(2);
56382
56404
  i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
56383
56405
  } }
56384
- function InitialTargetSettingComponent_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
56406
+ function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf, ctx) { if (rf & 1) {
56385
56407
  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()); });
56408
+ i0.ɵɵelementStart(0, "button", 61);
56409
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.handleAdjustTarget(); return i0.ɵɵresetView($event.stopPropagation()); });
56388
56410
  i0.ɵɵtext(1, " Adjust Revenue Target ");
56389
56411
  i0.ɵɵelementEnd();
56390
56412
  } if (rf & 2) {
56391
56413
  const ctx_r0 = i0.ɵɵnextContext(2);
56392
56414
  i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
56393
56415
  } }
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);
56416
+ function InitialTargetSettingComponent_Conditional_36_Conditional_10_Template(rf, ctx) { if (rf & 1) {
56417
+ const _r7 = i0.ɵɵgetCurrentView();
56418
+ i0.ɵɵelementStart(0, "div", 51)(1, "button", 62);
56419
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_10_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.toggleDetails(); return i0.ɵɵresetView($event.stopPropagation()); });
56420
+ i0.ɵɵtext(2, " Learn More ");
56421
+ i0.ɵɵelementEnd()();
56422
+ } if (rf & 2) {
56423
+ const ctx_r0 = i0.ɵɵnextContext(2);
56424
+ i0.ɵɵadvance();
56425
+ i0.ɵɵproperty("ngClass", ctx_r0.learnMoreButtonClasses());
56426
+ } }
56427
+ function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
56428
+ const _r8 = i0.ɵɵgetCurrentView();
56429
+ i0.ɵɵelementStart(0, "div", 54)(1, "div", 55);
56430
+ i0.ɵɵelement(2, "div", 56);
56431
+ i0.ɵɵelementStart(3, "span", 57);
56398
56432
  i0.ɵɵtext(4);
56399
56433
  i0.ɵɵelementEnd();
56400
- i0.ɵɵelement(5, "div", 48);
56434
+ i0.ɵɵelement(5, "div", 56);
56401
56435
  i0.ɵɵelementEnd();
56402
- i0.ɵɵelementStart(6, "div", 50)(7, "div")(8, "p", 43);
56436
+ i0.ɵɵelementStart(6, "div", 58)(7, "div")(8, "p", 48);
56403
56437
  i0.ɵɵtext(9, " Gap to Close ");
56404
56438
  i0.ɵɵelementEnd();
56405
- i0.ɵɵelementStart(10, "p", 51);
56439
+ i0.ɵɵelementStart(10, "p", 59);
56406
56440
  i0.ɵɵtext(11);
56407
56441
  i0.ɵɵelementEnd()();
56408
- i0.ɵɵelementStart(12, "div")(13, "div", 53)(14, "p", 13);
56442
+ i0.ɵɵelementStart(12, "div")(13, "div", 63)(14, "p", 15);
56409
56443
  i0.ɵɵtext(15, " Additional Growth Needed ");
56410
56444
  i0.ɵɵelementEnd();
56411
- i0.ɵɵelementStart(16, "button", 54);
56445
+ i0.ɵɵelementStart(16, "button", 64);
56446
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
56412
56447
  i0.ɵɵnamespaceSVG();
56413
- i0.ɵɵelementStart(17, "svg", 55);
56414
- i0.ɵɵelement(18, "path", 56);
56448
+ i0.ɵɵelementStart(17, "svg", 65);
56449
+ i0.ɵɵelement(18, "path", 66);
56415
56450
  i0.ɵɵelementEnd()()();
56416
56451
  i0.ɵɵnamespaceHTML();
56417
- i0.ɵɵelementStart(19, "p", 51);
56452
+ i0.ɵɵelementStart(19, "p", 59);
56418
56453
  i0.ɵɵtext(20);
56419
56454
  i0.ɵɵelementEnd()()()();
56420
56455
  } if (rf & 2) {
@@ -56442,36 +56477,49 @@ function InitialTargetSettingComponent_Conditional_33_Conditional_27_Template(rf
56442
56477
  i0.ɵɵadvance();
56443
56478
  i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
56444
56479
  } }
56445
- function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
56446
- i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 42)(3, "div")(4, "p", 43);
56480
+ function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
56481
+ const _r9 = i0.ɵɵgetCurrentView();
56482
+ i0.ɵɵelementStart(0, "div", 60)(1, "button", 62);
56483
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_31_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.toggleDetails(); return i0.ɵɵresetView($event.stopPropagation()); });
56484
+ i0.ɵɵtext(2, " Show Less ");
56485
+ i0.ɵɵelementEnd()();
56486
+ } if (rf & 2) {
56487
+ const ctx_r0 = i0.ɵɵnextContext(2);
56488
+ i0.ɵɵadvance();
56489
+ i0.ɵɵproperty("ngClass", ctx_r0.learnMoreButtonClasses());
56490
+ } }
56491
+ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
56492
+ i0.ɵɵelementStart(0, "div", 28)(1, "div", 19)(2, "div", 47)(3, "div")(4, "p", 48);
56447
56493
  i0.ɵɵtext(5);
56448
56494
  i0.ɵɵelementEnd();
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);
56495
+ i0.ɵɵelementStart(6, "p", 49);
56496
+ i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_36_Conditional_7_Template, 1, 1)(8, InitialTargetSettingComponent_Conditional_36_Conditional_8_Template, 1, 1);
56451
56497
  i0.ɵɵelementEnd()();
56452
- i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_33_Conditional_9_Template, 2, 1, "button", 45);
56498
+ i0.ɵɵconditionalCreate(9, InitialTargetSettingComponent_Conditional_36_Conditional_9_Template, 2, 1, "button", 50);
56453
56499
  i0.ɵɵelementEnd();
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);
56500
+ i0.ɵɵconditionalCreate(10, InitialTargetSettingComponent_Conditional_36_Conditional_10_Template, 3, 1, "div", 51);
56501
+ i0.ɵɵelementStart(11, "div", 52)(12, "div", 53)(13, "div", 54)(14, "div", 55);
56502
+ i0.ɵɵelement(15, "div", 56);
56503
+ i0.ɵɵelementStart(16, "span", 57);
56504
+ i0.ɵɵtext(17);
56458
56505
  i0.ɵɵelementEnd();
56459
- i0.ɵɵelement(15, "div", 48);
56506
+ i0.ɵɵelement(18, "div", 56);
56460
56507
  i0.ɵɵelementEnd();
56461
- i0.ɵɵelementStart(16, "div", 50)(17, "div")(18, "p", 43);
56462
- i0.ɵɵtext(19, " Increase Amount ");
56508
+ i0.ɵɵelementStart(19, "div", 58)(20, "div")(21, "p", 48);
56509
+ i0.ɵɵtext(22, " Increase Amount ");
56463
56510
  i0.ɵɵelementEnd();
56464
- i0.ɵɵelementStart(20, "p", 51);
56465
- i0.ɵɵtext(21);
56511
+ i0.ɵɵelementStart(23, "p", 59);
56512
+ i0.ɵɵtext(24);
56466
56513
  i0.ɵɵelementEnd()();
56467
- i0.ɵɵelementStart(22, "div")(23, "p", 43);
56468
- i0.ɵɵtext(24, " % Growth ");
56514
+ i0.ɵɵelementStart(25, "div")(26, "p", 48);
56515
+ i0.ɵɵtext(27, " % Growth ");
56469
56516
  i0.ɵɵelementEnd();
56470
- i0.ɵɵelementStart(25, "p", 51);
56471
- i0.ɵɵtext(26);
56517
+ i0.ɵɵelementStart(28, "p", 59);
56518
+ i0.ɵɵtext(29);
56519
+ i0.ɵɵelementEnd()()()();
56520
+ i0.ɵɵconditionalCreate(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 21, 13, "div", 54);
56521
+ i0.ɵɵconditionalCreate(31, InitialTargetSettingComponent_Conditional_36_Conditional_31_Template, 3, 1, "div", 60);
56472
56522
  i0.ɵɵelementEnd()()()();
56473
- i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_33_Conditional_27_Template, 21, 13, "div", 46);
56474
- i0.ɵɵelementEnd()();
56475
56523
  } if (rf & 2) {
56476
56524
  const ctx_r0 = i0.ɵɵnextContext();
56477
56525
  i0.ɵɵproperty("ngClass", ctx_r0.calculatedValuesCardClasses());
@@ -56485,7 +56533,11 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
56485
56533
  i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined && ctx_r0.submittedAbsoluteInput() !== null ? 7 : 8);
56486
56534
  i0.ɵɵadvance(2);
56487
56535
  i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined ? 9 : -1);
56488
- i0.ɵɵadvance(3);
56536
+ i0.ɵɵadvance();
56537
+ i0.ɵɵconditional(ctx_r0.calculationState() === "results" && !ctx_r0.detailsExpanded() ? 10 : -1);
56538
+ i0.ɵɵadvance();
56539
+ i0.ɵɵclassProp("details-collapse-expanded", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
56540
+ i0.ɵɵadvance(4);
56489
56541
  i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
56490
56542
  i0.ɵɵadvance();
56491
56543
  i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
@@ -56506,16 +56558,18 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
56506
56558
  i0.ɵɵadvance();
56507
56559
  i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
56508
56560
  i0.ɵɵadvance();
56509
- i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 27 : -1);
56561
+ i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 30 : -1);
56562
+ i0.ɵɵadvance();
56563
+ i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.detailsExpanded() ? 31 : -1);
56510
56564
  } }
56511
- function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
56512
- i0.ɵɵelement(0, "symphiq-area-chart", 22);
56565
+ function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf, ctx) { if (rf & 1) {
56566
+ i0.ɵɵelement(0, "symphiq-area-chart", 24);
56513
56567
  } if (rf & 2) {
56514
56568
  const ctx_r0 = i0.ɵɵnextContext(2);
56515
56569
  i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
56516
56570
  } }
56517
- function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56518
- i0.ɵɵelementStart(0, "div", 23)(1, "p", 41);
56571
+ function InitialTargetSettingComponent_Conditional_37_Conditional_5_Template(rf, ctx) { if (rf & 1) {
56572
+ i0.ɵɵelementStart(0, "div", 25)(1, "p", 46);
56519
56573
  i0.ɵɵtext(2, " No revenue data available ");
56520
56574
  i0.ɵɵelementEnd()();
56521
56575
  } if (rf & 2) {
@@ -56523,12 +56577,12 @@ function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf,
56523
56577
  i0.ɵɵadvance();
56524
56578
  i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
56525
56579
  } }
56526
- function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
56527
- i0.ɵɵelementStart(0, "div", 27)(1, "p", 20);
56580
+ function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
56581
+ i0.ɵɵelementStart(0, "div", 29)(1, "p", 22);
56528
56582
  i0.ɵɵtext(2, " Year-over-Year Revenue Trend ");
56529
56583
  i0.ɵɵelementEnd();
56530
- i0.ɵɵelementStart(3, "div", 21);
56531
- i0.ɵɵconditionalCreate(4, InitialTargetSettingComponent_Conditional_34_Conditional_4_Template, 1, 5, "symphiq-area-chart", 22)(5, InitialTargetSettingComponent_Conditional_34_Conditional_5_Template, 3, 1, "div", 23);
56584
+ i0.ɵɵelementStart(3, "div", 23);
56585
+ i0.ɵɵconditionalCreate(4, InitialTargetSettingComponent_Conditional_37_Conditional_4_Template, 1, 5, "symphiq-area-chart", 24)(5, InitialTargetSettingComponent_Conditional_37_Conditional_5_Template, 3, 1, "div", 25);
56532
56586
  i0.ɵɵelementEnd()();
56533
56587
  } if (rf & 2) {
56534
56588
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56539,14 +56593,14 @@ function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf
56539
56593
  i0.ɵɵadvance();
56540
56594
  i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
56541
56595
  } }
56542
- function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
56543
- i0.ɵɵelementStart(0, "div", 3)(1, "div", 57)(2, "h2", 58);
56596
+ function InitialTargetSettingComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
56597
+ i0.ɵɵelementStart(0, "div", 32)(1, "div", 67)(2, "h2", 68);
56544
56598
  i0.ɵɵtext(3, " Contributing Metrics ");
56545
56599
  i0.ɵɵelementEnd();
56546
- i0.ɵɵelementStart(4, "p", 41);
56600
+ i0.ɵɵelementStart(4, "p", 46);
56547
56601
  i0.ɵɵtext(5);
56548
56602
  i0.ɵɵelementEnd()();
56549
- i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 59);
56603
+ i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 69);
56550
56604
  i0.ɵɵelementEnd();
56551
56605
  } if (rf & 2) {
56552
56606
  const ctx_r0 = i0.ɵɵnextContext();
@@ -56579,6 +56633,7 @@ class InitialTargetSettingComponent {
56579
56633
  this.calculationState = signal('input', ...(ngDevMode ? [{ debugName: "calculationState" }] : []));
56580
56634
  this.storedResponse = signal(null, ...(ngDevMode ? [{ debugName: "storedResponse" }] : []));
56581
56635
  this.submittedAbsoluteInput = signal(null, ...(ngDevMode ? [{ debugName: "submittedAbsoluteInput" }] : []));
56636
+ this.detailsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "detailsExpanded" }] : []));
56582
56637
  this.priorYearRevenue = computed(() => {
56583
56638
  return sumMetricFromUiData(this.mainUiData(), MetricEnum.PURCHASE_REVENUE, 'priorYear');
56584
56639
  }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
@@ -56867,6 +56922,14 @@ class InitialTargetSettingComponent {
56867
56922
  }
56868
56923
  this.calculationState.set('results');
56869
56924
  }
56925
+ onCardClick() {
56926
+ if (this.calculationState() === 'results') {
56927
+ this.toggleDetails();
56928
+ }
56929
+ }
56930
+ toggleDetails() {
56931
+ this.detailsExpanded.set(!this.detailsExpanded());
56932
+ }
56870
56933
  formatCurrency(value) {
56871
56934
  return formatCurrency(value);
56872
56935
  }
@@ -56982,6 +57045,16 @@ class InitialTargetSettingComponent {
56982
57045
  ? 'bg-slate-700 text-slate-300 border-2 border-slate-600 hover:bg-slate-600'
56983
57046
  : 'bg-slate-100 text-slate-600 border-2 border-slate-300 hover:bg-slate-200';
56984
57047
  }
57048
+ chevronClasses() {
57049
+ return this.viewMode() === ViewModeEnum.DARK
57050
+ ? 'text-slate-400'
57051
+ : 'text-slate-500';
57052
+ }
57053
+ learnMoreButtonClasses() {
57054
+ return this.viewMode() === ViewModeEnum.DARK
57055
+ ? 'text-purple-400 hover:text-purple-300'
57056
+ : 'text-purple-600 hover:text-purple-700';
57057
+ }
56985
57058
  baselineMetricsCardClasses() {
56986
57059
  return this.viewMode() === ViewModeEnum.DARK
56987
57060
  ? 'bg-slate-800/60 border border-slate-700'
@@ -57040,53 +57113,62 @@ class InitialTargetSettingComponent {
57040
57113
  let _t;
57041
57114
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
57042
57115
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
57043
- } }, 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) {
57116
+ } }, 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: 42, vars: 36, 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-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "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", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [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", "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, "mt-4"], [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-xl", "font-bold", 3, "ngClass"], [1, "mt-6", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "text-sm", "font-semibold", "transition-all", 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, "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, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
57044
57117
  i0.ɵɵelementStart(0, "div", 2);
57045
57118
  i0.ɵɵelement(1, "symphiq-tooltip-container");
57046
- i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
57047
- i0.ɵɵtext(4);
57119
+ i0.ɵɵelementStart(2, "div", 3);
57120
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_div_click_2_listener() { return ctx.onCardClick(); });
57121
+ i0.ɵɵelementStart(3, "div", 4)(4, "h2", 5);
57122
+ i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_5_Template, 1, 1)(6, InitialTargetSettingComponent_Conditional_6_Template, 1, 1);
57123
+ i0.ɵɵelementEnd();
57124
+ i0.ɵɵconditionalCreate(7, InitialTargetSettingComponent_Conditional_7_Template, 2, 3, ":svg:svg", 6);
57048
57125
  i0.ɵɵelementEnd();
57049
- i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "div", 10);
57126
+ i0.ɵɵelementStart(8, "div", 7)(9, "div", 8)(10, "div", 9)(11, "div", 10);
57127
+ i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_div_click_11_listener($event) { return $event.stopPropagation(); });
57128
+ i0.ɵɵelementStart(12, "div", 11)(13, "div", 12);
57050
57129
  i0.ɵɵnamespaceSVG();
57051
- i0.ɵɵelementStart(11, "svg", 11);
57052
- i0.ɵɵelement(12, "path", 12);
57130
+ i0.ɵɵelementStart(14, "svg", 13);
57131
+ i0.ɵɵelement(15, "path", 14);
57053
57132
  i0.ɵɵelementEnd();
57054
57133
  i0.ɵɵnamespaceHTML();
57055
- i0.ɵɵelementStart(13, "div")(14, "p", 13);
57056
- i0.ɵɵtext(15);
57134
+ i0.ɵɵelementStart(16, "div")(17, "p", 15);
57135
+ i0.ɵɵtext(18);
57057
57136
  i0.ɵɵelementEnd();
57058
- i0.ɵɵelementStart(16, "p", 14);
57059
- i0.ɵɵtext(17);
57137
+ i0.ɵɵelementStart(19, "p", 16);
57138
+ i0.ɵɵtext(20);
57060
57139
  i0.ɵɵelementEnd()()();
57061
- i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
57140
+ i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_21_Template, 8, 4, "div", 12);
57062
57141
  i0.ɵɵelementEnd();
57063
- i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
57064
- i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 8, 4);
57142
+ i0.ɵɵelementStart(22, "div", 17)(23, "div", 18)(24, "div", 19);
57143
+ i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 8, 4);
57065
57144
  i0.ɵɵelementEnd()()()();
57066
- i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
57067
- i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
57145
+ i0.ɵɵelementStart(26, "div", 20)(27, "div", 21)(28, "div")(29, "p", 22);
57146
+ i0.ɵɵtext(30, " Year-over-Year Revenue Trend ");
57068
57147
  i0.ɵɵelementEnd();
57069
- i0.ɵɵelementStart(28, "div", 21);
57070
- i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
57148
+ i0.ɵɵelementStart(31, "div", 23);
57149
+ i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 24)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 25);
57071
57150
  i0.ɵɵelementEnd()()()()();
57072
- i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
57073
- i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 28, 17, "div", 26);
57151
+ i0.ɵɵelementStart(34, "div", 26)(35, "div", 27);
57152
+ i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 32, 21, "div", 28);
57074
57153
  i0.ɵɵelementEnd()()();
57075
- i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
57154
+ i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 6, 3, "div", 29);
57076
57155
  i0.ɵɵelementEnd()();
57077
- i0.ɵɵelementStart(35, "div", 28)(36, "div", 29);
57078
- i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 7, 7, "div", 3);
57156
+ i0.ɵɵelementStart(38, "div", 30)(39, "div", 31);
57157
+ i0.ɵɵconditionalCreate(40, InitialTargetSettingComponent_Conditional_40_Template, 7, 7, "div", 32);
57079
57158
  i0.ɵɵelementEnd()();
57080
- i0.ɵɵelementStart(38, "symphiq-sticky-submit-bar", 30);
57081
- i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_38_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_38_listener() { return ctx.handleCancel(); });
57159
+ i0.ɵɵelementStart(41, "symphiq-sticky-submit-bar", 33);
57160
+ i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_41_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_41_listener() { return ctx.handleCancel(); });
57082
57161
  i0.ɵɵelementEnd()();
57083
57162
  } if (rf & 2) {
57084
57163
  i0.ɵɵadvance(2);
57164
+ i0.ɵɵclassProp("cursor-pointer", ctx.calculationState() === "results");
57085
57165
  i0.ɵɵproperty("ngClass", ctx.sectionCardClasses());
57086
- i0.ɵɵadvance();
57166
+ i0.ɵɵadvance(2);
57087
57167
  i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
57088
57168
  i0.ɵɵadvance();
57089
- i0.ɵɵtextInterpolate1(" Calculate Your ", ctx.currentYear(), " Revenue Target ");
57169
+ i0.ɵɵconditional(ctx.calculationState() === "results" ? 5 : 6);
57170
+ i0.ɵɵadvance(2);
57171
+ i0.ɵɵconditional(ctx.calculationState() === "results" ? 7 : -1);
57090
57172
  i0.ɵɵadvance(4);
57091
57173
  i0.ɵɵproperty("ngClass", ctx.formAreaClasses());
57092
57174
  i0.ɵɵadvance();
@@ -57102,36 +57184,36 @@ class InitialTargetSettingComponent {
57102
57184
  i0.ɵɵadvance();
57103
57185
  i0.ɵɵtextInterpolate1(" ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
57104
57186
  i0.ɵɵadvance();
57105
- i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 18 : -1);
57187
+ i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 21 : -1);
57106
57188
  i0.ɵɵadvance();
57107
57189
  i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results");
57108
57190
  i0.ɵɵadvance(3);
57109
- i0.ɵɵconditional(ctx.calculationState() !== "results" ? 22 : -1);
57191
+ i0.ɵɵconditional(ctx.calculationState() !== "results" ? 25 : -1);
57110
57192
  i0.ɵɵadvance();
57111
- i0.ɵɵclassProp("chart-in-column-active", ctx.calculationState() === "results");
57193
+ i0.ɵɵclassProp("chart-in-column-active", ctx.calculationState() === "results" && ctx.detailsExpanded());
57112
57194
  i0.ɵɵadvance(3);
57113
57195
  i0.ɵɵproperty("ngClass", ctx.chartTitleClasses());
57114
57196
  i0.ɵɵadvance(2);
57115
57197
  i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
57116
57198
  i0.ɵɵadvance();
57117
- i0.ɵɵconditional(ctx.revenueChartData() ? 29 : 30);
57199
+ i0.ɵɵconditional(ctx.revenueChartData() ? 32 : 33);
57118
57200
  i0.ɵɵadvance(2);
57119
57201
  i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
57120
57202
  i0.ɵɵadvance(2);
57121
- i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 33 : -1);
57203
+ i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 36 : -1);
57122
57204
  i0.ɵɵadvance();
57123
- i0.ɵɵconditional(ctx.calculationState() !== "results" ? 34 : -1);
57205
+ i0.ɵɵconditional(ctx.calculationState() !== "results" ? 37 : -1);
57124
57206
  i0.ɵɵadvance();
57125
57207
  i0.ɵɵclassProp("metrics-section-enter-active", ctx.showMetricsVisualization());
57126
57208
  i0.ɵɵadvance(2);
57127
- i0.ɵɵconditional(ctx.showMetricsVisualization() ? 37 : -1);
57209
+ i0.ɵɵconditional(ctx.showMetricsVisualization() ? 40 : -1);
57128
57210
  i0.ɵɵadvance();
57129
57211
  i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
57130
57212
  } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
57131
57213
  StickySubmitBarComponent,
57132
57214
  AreaChartComponent,
57133
57215
  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}"], changeDetection: 0 }); }
57216
+ 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)}"], changeDetection: 0 }); }
57135
57217
  }
57136
57218
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
57137
57219
  type: Component,
@@ -57146,15 +57228,34 @@ class InitialTargetSettingComponent {
57146
57228
  ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
57147
57229
  <div class="space-y-8 pb-32">
57148
57230
  <symphiq-tooltip-container />
57149
- <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
57150
- <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
57151
- Calculate Your {{ currentYear() }} Revenue Target
57152
- </h2>
57231
+ <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8"
57232
+ [class.cursor-pointer]="calculationState() === 'results'"
57233
+ (click)="onCardClick()">
57234
+ <div class="flex items-center justify-between mb-6">
57235
+ <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
57236
+ @if (calculationState() === 'results') {
57237
+ Your {{ currentYear() }} Revenue Target
57238
+ } @else {
57239
+ Calculate Your {{ currentYear() }} Revenue Target
57240
+ }
57241
+ </h2>
57242
+ @if (calculationState() === 'results') {
57243
+ <svg
57244
+ class="w-6 h-6 chevron-rotate"
57245
+ [class.chevron-rotate-expanded]="detailsExpanded()"
57246
+ [ngClass]="chevronClasses()"
57247
+ fill="none"
57248
+ stroke="currentColor"
57249
+ viewBox="0 0 24 24">
57250
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
57251
+ </svg>
57252
+ }
57253
+ </div>
57153
57254
 
57154
57255
  <div class="flex flex-col gap-8">
57155
57256
  <div class="grid lg:grid-cols-2 gap-8">
57156
57257
  <div class="flex flex-col gap-4">
57157
- <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2">
57258
+ <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" (click)="$event.stopPropagation()">
57158
57259
  <div class="flex flex-wrap gap-4 place-content-between" [class.mb-6]="calculationState() !== 'results'">
57159
57260
  <div class="flex items-center gap-2">
57160
57261
  <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -57256,7 +57357,7 @@ class InitialTargetSettingComponent {
57256
57357
  </div>
57257
57358
  </div>
57258
57359
 
57259
- <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results'">
57360
+ <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
57260
57361
  <div class="chart-in-column-content">
57261
57362
  <div>
57262
57363
  <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
@@ -57304,7 +57405,7 @@ class InitialTargetSettingComponent {
57304
57405
  </div>
57305
57406
  @if (calculationState() === 'results' && targets() === undefined) {
57306
57407
  <button
57307
- (click)="handleAdjustTarget()"
57408
+ (click)="handleAdjustTarget(); $event.stopPropagation()"
57308
57409
  [ngClass]="secondaryButtonClasses()"
57309
57410
  class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
57310
57411
  Adjust Revenue Target
@@ -57312,76 +57413,103 @@ class InitialTargetSettingComponent {
57312
57413
  }
57313
57414
  </div>
57314
57415
 
57315
- <div class="relative pt-6 mt-6">
57316
- <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57317
- <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57318
- <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57319
- vs. {{ priorYear() }}
57320
- </span>
57321
- <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57322
- </div>
57323
- <div class="grid grid-cols-2 gap-4 pt-2">
57324
- <div>
57325
- <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57326
- Increase Amount
57327
- </p>
57328
- <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57329
- {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
57330
- </p>
57331
- </div>
57332
- <div>
57333
- <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57334
- % Growth
57335
- </p>
57336
- <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57337
- +{{ formatPercentage(percentageIncrease(), 1) }}
57338
- </p>
57339
- </div>
57416
+ @if (calculationState() === 'results' && !detailsExpanded()) {
57417
+ <div class="mt-4">
57418
+ <button
57419
+ (click)="toggleDetails(); $event.stopPropagation()"
57420
+ [ngClass]="learnMoreButtonClasses()"
57421
+ class="text-sm font-semibold transition-all">
57422
+ Learn More
57423
+ </button>
57340
57424
  </div>
57341
- </div>
57425
+ }
57342
57426
 
57343
- @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
57344
- <div class="relative pt-6 mt-6">
57345
- <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57346
- <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57347
- <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57348
- {{ currentYear() }} YTD Gap
57349
- </span>
57350
- <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57351
- </div>
57352
- <div class="grid grid-cols-2 gap-4 pt-2">
57353
- <div>
57354
- <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57355
- Gap to Close
57356
- </p>
57357
- <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57358
- {{ formatCurrency(absValue(gapToClose().amount)) }}
57359
- </p>
57427
+ <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
57428
+ <div class="details-collapse-content">
57429
+ <div class="relative pt-6 mt-6">
57430
+ <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57431
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57432
+ <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57433
+ vs. {{ priorYear() }}
57434
+ </span>
57435
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57360
57436
  </div>
57361
- <div>
57362
- <div class="flex items-center gap-1 mb-1">
57363
- <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
57364
- Additional Growth Needed
57437
+ <div class="grid grid-cols-2 gap-4 pt-2">
57438
+ <div>
57439
+ <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57440
+ Increase Amount
57441
+ </p>
57442
+ <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57443
+ {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
57444
+ </p>
57445
+ </div>
57446
+ <div>
57447
+ <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57448
+ % Growth
57449
+ </p>
57450
+ <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57451
+ +{{ formatPercentage(percentageIncrease(), 1) }}
57365
57452
  </p>
57366
- <button
57367
- type="button"
57368
- [ngClass]="infoIconClasses()"
57369
- class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
57370
- [libSymphiqTooltip]="additionalGrowthTooltip"
57371
- tooltipType="markdown"
57372
- tooltipPosition="top">
57373
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57374
- <path 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" />
57375
- </svg>
57376
- </button>
57377
57453
  </div>
57378
- <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57379
- {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
57380
- </p>
57381
57454
  </div>
57382
57455
  </div>
57456
+
57457
+ @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
57458
+ <div class="relative pt-6 mt-6">
57459
+ <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
57460
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57461
+ <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
57462
+ {{ currentYear() }} YTD Gap
57463
+ </span>
57464
+ <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
57465
+ </div>
57466
+ <div class="grid grid-cols-2 gap-4 pt-2">
57467
+ <div>
57468
+ <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
57469
+ Gap to Close
57470
+ </p>
57471
+ <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57472
+ {{ formatCurrency(absValue(gapToClose().amount)) }}
57473
+ </p>
57474
+ </div>
57475
+ <div>
57476
+ <div class="flex items-center gap-1 mb-1">
57477
+ <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
57478
+ Additional Growth Needed
57479
+ </p>
57480
+ <button
57481
+ type="button"
57482
+ [ngClass]="infoIconClasses()"
57483
+ class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
57484
+ [libSymphiqTooltip]="additionalGrowthTooltip"
57485
+ tooltipType="markdown"
57486
+ tooltipPosition="top"
57487
+ (click)="$event.stopPropagation()">
57488
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57489
+ <path 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" />
57490
+ </svg>
57491
+ </button>
57492
+ </div>
57493
+ <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
57494
+ {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
57495
+ </p>
57496
+ </div>
57497
+ </div>
57498
+ </div>
57499
+ }
57500
+
57501
+ @if (calculationState() === 'results' && detailsExpanded()) {
57502
+ <div class="mt-6 flex justify-center">
57503
+ <button
57504
+ (click)="toggleDetails(); $event.stopPropagation()"
57505
+ [ngClass]="learnMoreButtonClasses()"
57506
+ class="text-sm font-semibold transition-all">
57507
+ Show Less
57508
+ </button>
57509
+ </div>
57510
+ }
57383
57511
  </div>
57384
- }
57512
+ </div>
57385
57513
  </div>
57386
57514
  </div>
57387
57515
  }
@@ -57450,7 +57578,7 @@ class InitialTargetSettingComponent {
57450
57578
  (cancelClick)="handleCancel()"
57451
57579
  />
57452
57580
  </div>
57453
- `, 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}\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)}\n"] }]
57454
57582
  }], () => [], { absoluteInputRef: [{
57455
57583
  type: ViewChild,
57456
57584
  args: ['absoluteInputRef']
@@ -57458,7 +57586,7 @@ class InitialTargetSettingComponent {
57458
57586
  type: ViewChild,
57459
57587
  args: ['percentageInputRef']
57460
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"] }] }); })();
57461
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 433 }); })();
57589
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 501 }); })();
57462
57590
 
57463
57591
  function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
57464
57592
  i0.ɵɵelement(0, "div", 5);