@eric-emg/symphiq-components 1.2.329 → 1.2.331

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.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +717 -659
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +42 -39
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -86260,14 +86260,14 @@ class CollapsibleAnalysisSectionGroupComponent {
86260
86260
  const _forTrack0$2 = ($index, $item) => $item.code;
86261
86261
  function BillingCurrencySelectorCardComponent_For_15_Template(rf, ctx) { if (rf & 1) {
86262
86262
  const _r1 = i0.ɵɵgetCurrentView();
86263
- i0.ɵɵelementStart(0, "label", 11)(1, "input", 12);
86263
+ i0.ɵɵelementStart(0, "label", 11)(1, "input", 13);
86264
86264
  i0.ɵɵtwoWayListener("ngModelChange", function BillingCurrencySelectorCardComponent_For_15_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedCurrency, $event) || (ctx_r1.selectedCurrency = $event); return i0.ɵɵresetView($event); });
86265
86265
  i0.ɵɵlistener("change", function BillingCurrencySelectorCardComponent_For_15_Template_input_change_1_listener() { const currency_r3 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleCurrencyChange(currency_r3.code)); });
86266
86266
  i0.ɵɵelementEnd();
86267
- i0.ɵɵelementStart(2, "div", 13)(3, "div", 14)(4, "span", 15);
86267
+ i0.ɵɵelementStart(2, "div", 14)(3, "div", 15)(4, "span", 16);
86268
86268
  i0.ɵɵtext(5);
86269
86269
  i0.ɵɵelementEnd();
86270
- i0.ɵɵelementStart(6, "span", 16);
86270
+ i0.ɵɵelementStart(6, "span", 17);
86271
86271
  i0.ɵɵtext(7);
86272
86272
  i0.ɵɵelementEnd()();
86273
86273
  i0.ɵɵelementStart(8, "p", 7);
@@ -86294,11 +86294,24 @@ function BillingCurrencySelectorCardComponent_For_15_Template(rf, ctx) { if (rf
86294
86294
  i0.ɵɵadvance();
86295
86295
  i0.ɵɵtextInterpolate1(" ", currency_r3.name, " ");
86296
86296
  } }
86297
+ function BillingCurrencySelectorCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
86298
+ const _r4 = i0.ɵɵgetCurrentView();
86299
+ i0.ɵɵelementStart(0, "div", 12)(1, "button", 18);
86300
+ i0.ɵɵlistener("click", function BillingCurrencySelectorCardComponent_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelClick.emit()); });
86301
+ i0.ɵɵtext(2, " Cancel ");
86302
+ i0.ɵɵelementEnd()();
86303
+ } if (rf & 2) {
86304
+ const ctx_r1 = i0.ɵɵnextContext();
86305
+ i0.ɵɵadvance();
86306
+ i0.ɵɵproperty("ngClass", ctx_r1.getCancelButtonClasses());
86307
+ } }
86297
86308
  class BillingCurrencySelectorCardComponent {
86298
86309
  constructor() {
86299
86310
  this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
86300
86311
  this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
86312
+ this.showCancel = input(false, ...(ngDevMode ? [{ debugName: "showCancel" }] : []));
86301
86313
  this.currencySelected = output();
86314
+ this.cancelClick = output();
86302
86315
  this.selectedCurrency = signal(null, ...(ngDevMode ? [{ debugName: "selectedCurrency" }] : []));
86303
86316
  this.currencies = [
86304
86317
  { code: CurrencyCodeEnum.USD, symbol: '$', name: 'United States Dollar' },
@@ -86380,8 +86393,13 @@ class BillingCurrencySelectorCardComponent {
86380
86393
  ? 'text-slate-400'
86381
86394
  : 'text-slate-600';
86382
86395
  }
86396
+ getCancelButtonClasses() {
86397
+ return this.viewMode() === ViewModeEnum.DARK
86398
+ ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white'
86399
+ : 'bg-slate-200 text-slate-700 hover:bg-slate-300 hover:text-slate-900';
86400
+ }
86383
86401
  static { this.ɵfac = function BillingCurrencySelectorCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BillingCurrencySelectorCardComponent)(); }; }
86384
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingCurrencySelectorCardComponent, selectors: [["symphiq-billing-currency-selector-card"]], inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"] }, outputs: { currencySelected: "currencySelected" }, decls: 16, vars: 6, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "space-y-6"], [1, "space-y-3"], [1, "flex", "items-center", "gap-4", "p-4", "rounded-xl", "border-2", "cursor-pointer", "transition-all", "duration-200", "hover:scale-[1.01]", 3, "ngClass"], ["type", "radio", 1, "w-5", "h-5", "flex-shrink-0", "cursor-pointer", "disabled:cursor-not-allowed", 3, "ngModelChange", "change", "name", "value", "ngModel", "disabled", "ngClass"], [1, "flex-1"], [1, "flex", "items-center", "gap-2"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"]], template: function BillingCurrencySelectorCardComponent_Template(rf, ctx) { if (rf & 1) {
86402
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingCurrencySelectorCardComponent, selectors: [["symphiq-billing-currency-selector-card"]], inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], showCancel: [1, "showCancel"] }, outputs: { currencySelected: "currencySelected", cancelClick: "cancelClick" }, decls: 17, vars: 7, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "space-y-6"], [1, "space-y-3"], [1, "flex", "items-center", "gap-4", "p-4", "rounded-xl", "border-2", "cursor-pointer", "transition-all", "duration-200", "hover:scale-[1.01]", 3, "ngClass"], [1, "pt-2"], ["type", "radio", 1, "w-5", "h-5", "flex-shrink-0", "cursor-pointer", "disabled:cursor-not-allowed", 3, "ngModelChange", "change", "name", "value", "ngModel", "disabled", "ngClass"], [1, "flex-1"], [1, "flex", "items-center", "gap-2"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "w-full", "py-3", "px-4", "rounded-xl", "font-medium", "transition-colors", "cursor-pointer", 3, "click", "ngClass"]], template: function BillingCurrencySelectorCardComponent_Template(rf, ctx) { if (rf & 1) {
86385
86403
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
86386
86404
  i0.ɵɵnamespaceSVG();
86387
86405
  i0.ɵɵelementStart(4, "svg", 4);
@@ -86396,7 +86414,9 @@ class BillingCurrencySelectorCardComponent {
86396
86414
  i0.ɵɵelementEnd()()()();
86397
86415
  i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
86398
86416
  i0.ɵɵrepeaterCreate(14, BillingCurrencySelectorCardComponent_For_15_Template, 10, 12, "label", 11, _forTrack0$2);
86399
- i0.ɵɵelementEnd()()()();
86417
+ i0.ɵɵelementEnd();
86418
+ i0.ɵɵconditionalCreate(16, BillingCurrencySelectorCardComponent_Conditional_16_Template, 3, 1, "div", 12);
86419
+ i0.ɵɵelementEnd()()();
86400
86420
  } if (rf & 2) {
86401
86421
  i0.ɵɵproperty("ngClass", ctx.containerClasses());
86402
86422
  i0.ɵɵadvance();
@@ -86411,6 +86431,8 @@ class BillingCurrencySelectorCardComponent {
86411
86431
  i0.ɵɵproperty("ngClass", ctx.contentClasses());
86412
86432
  i0.ɵɵadvance(3);
86413
86433
  i0.ɵɵrepeater(ctx.currencies);
86434
+ i0.ɵɵadvance(2);
86435
+ i0.ɵɵconditional(ctx.showCancel() ? 16 : -1);
86414
86436
  } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.RadioControlValueAccessor, i2$1.NgControlStatus, i2$1.NgModel], encapsulation: 2, changeDetection: 0 }); }
86415
86437
  }
86416
86438
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BillingCurrencySelectorCardComponent, [{
@@ -86420,66 +86442,78 @@ class BillingCurrencySelectorCardComponent {
86420
86442
  standalone: true,
86421
86443
  imports: [CommonModule, FormsModule],
86422
86444
  changeDetection: ChangeDetectionStrategy.OnPush,
86423
- template: `
86424
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86425
- <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86426
- <div class="flex items-center gap-3">
86427
- <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86428
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86429
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
86430
- </svg>
86431
- </div>
86432
- <div>
86433
- <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86434
- Select Your Billing Currency
86435
- </h2>
86436
- <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
86437
- Choose the currency for your subscription
86438
- </p>
86439
- </div>
86440
- </div>
86441
- </div>
86442
-
86443
- <div [ngClass]="contentClasses()" class="p-6">
86444
- <div class="space-y-6">
86445
- <div class="space-y-3">
86446
- @for (currency of currencies; track currency.code) {
86447
- <label
86448
- [ngClass]="getCurrencyOptionClasses(currency.code)"
86449
- class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
86450
- <input
86451
- type="radio"
86452
- [name]="'currency'"
86453
- [value]="currency.code"
86454
- [(ngModel)]="selectedCurrency"
86455
- (change)="handleCurrencyChange(currency.code)"
86456
- [disabled]="isLoading()"
86457
- [ngClass]="getRadioClasses()"
86458
- class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
86459
- />
86460
- <div class="flex-1">
86461
- <div class="flex items-center gap-2">
86462
- <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
86463
- {{ currency.code }}
86464
- </span>
86465
- <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
86466
- ({{ currency.symbol }})
86467
- </span>
86468
- </div>
86469
- <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
86470
- {{ currency.name }}
86471
- </p>
86472
- </div>
86473
- </label>
86474
- }
86475
- </div>
86476
- </div>
86477
- </div>
86478
- </div>
86445
+ template: `
86446
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86447
+ <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86448
+ <div class="flex items-center gap-3">
86449
+ <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86450
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86451
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
86452
+ </svg>
86453
+ </div>
86454
+ <div>
86455
+ <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86456
+ Select Your Billing Currency
86457
+ </h2>
86458
+ <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
86459
+ Choose the currency for your subscription
86460
+ </p>
86461
+ </div>
86462
+ </div>
86463
+ </div>
86464
+
86465
+ <div [ngClass]="contentClasses()" class="p-6">
86466
+ <div class="space-y-6">
86467
+ <div class="space-y-3">
86468
+ @for (currency of currencies; track currency.code) {
86469
+ <label
86470
+ [ngClass]="getCurrencyOptionClasses(currency.code)"
86471
+ class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
86472
+ <input
86473
+ type="radio"
86474
+ [name]="'currency'"
86475
+ [value]="currency.code"
86476
+ [(ngModel)]="selectedCurrency"
86477
+ (change)="handleCurrencyChange(currency.code)"
86478
+ [disabled]="isLoading()"
86479
+ [ngClass]="getRadioClasses()"
86480
+ class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
86481
+ />
86482
+ <div class="flex-1">
86483
+ <div class="flex items-center gap-2">
86484
+ <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
86485
+ {{ currency.code }}
86486
+ </span>
86487
+ <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
86488
+ ({{ currency.symbol }})
86489
+ </span>
86490
+ </div>
86491
+ <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
86492
+ {{ currency.name }}
86493
+ </p>
86494
+ </div>
86495
+ </label>
86496
+ }
86497
+ </div>
86498
+
86499
+ @if (showCancel()) {
86500
+ <div class="pt-2">
86501
+ <button
86502
+ (click)="cancelClick.emit()"
86503
+ [ngClass]="getCancelButtonClasses()"
86504
+ class="w-full py-3 px-4 rounded-xl font-medium transition-colors cursor-pointer"
86505
+ >
86506
+ Cancel
86507
+ </button>
86508
+ </div>
86509
+ }
86510
+ </div>
86511
+ </div>
86512
+ </div>
86479
86513
  `
86480
86514
  }]
86481
- }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], currencySelected: [{ type: i0.Output, args: ["currencySelected"] }] }); })();
86482
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BillingCurrencySelectorCardComponent, { className: "BillingCurrencySelectorCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/billing-currency-selector-card.component.ts", lineNumber: 69 }); })();
86515
+ }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], currencySelected: [{ type: i0.Output, args: ["currencySelected"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] }); })();
86516
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BillingCurrencySelectorCardComponent, { className: "BillingCurrencySelectorCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/billing-currency-selector-card.component.ts", lineNumber: 81 }); })();
86483
86517
 
86484
86518
  class PlanSelectionPlaceholderCardComponent {
86485
86519
  constructor() {
@@ -86547,8 +86581,12 @@ class PlanSelectionPlaceholderCardComponent {
86547
86581
  ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white'
86548
86582
  : 'bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-800';
86549
86583
  }
86584
+ onEditClick() {
86585
+ console.log('[PlanSelectionPlaceholderCard] Edit button clicked, emitting editCurrency');
86586
+ this.editCurrency.emit();
86587
+ }
86550
86588
  static { this.ɵfac = function PlanSelectionPlaceholderCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanSelectionPlaceholderCardComponent)(); }; }
86551
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionPlaceholderCardComponent, selectors: [["symphiq-plan-selection-placeholder-card"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"] }, outputs: { editCurrency: "editCurrency" }, decls: 37, vars: 14, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [1, "text-center", "space-y-6"], [1, "w-20", "h-20", "mx-auto", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "space-y-3"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "leading-relaxed", "max-w-md", "mx-auto", 3, "ngClass"], [1, "p-5", "rounded-xl", "border", "inline-block", 3, "ngClass"], [1, "flex", "items-start", "gap-3", "text-left"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", "clip-rule", "evenodd"], [1, "flex-1"], [1, "text-sm", "leading-relaxed", 3, "ngClass"]], template: function PlanSelectionPlaceholderCardComponent_Template(rf, ctx) { if (rf & 1) {
86589
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionPlaceholderCardComponent, selectors: [["symphiq-plan-selection-placeholder-card"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"] }, outputs: { editCurrency: "editCurrency" }, decls: 37, vars: 14, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [1, "text-center", "space-y-6"], [1, "w-20", "h-20", "mx-auto", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "space-y-3"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "leading-relaxed", "max-w-md", "mx-auto", 3, "ngClass"], [1, "p-5", "rounded-xl", "border", "inline-block", 3, "ngClass"], [1, "flex", "items-start", "gap-3", "text-left"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", "clip-rule", "evenodd"], [1, "flex-1"], [1, "text-sm", "leading-relaxed", 3, "ngClass"]], template: function PlanSelectionPlaceholderCardComponent_Template(rf, ctx) { if (rf & 1) {
86552
86590
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
86553
86591
  i0.ɵɵnamespaceSVG();
86554
86592
  i0.ɵɵelementStart(4, "svg", 4);
@@ -86564,7 +86602,7 @@ class PlanSelectionPlaceholderCardComponent {
86564
86602
  i0.ɵɵtext(12);
86565
86603
  i0.ɵɵelementEnd();
86566
86604
  i0.ɵɵelementStart(13, "button", 9);
86567
- i0.ɵɵlistener("click", function PlanSelectionPlaceholderCardComponent_Template_button_click_13_listener() { return ctx.editCurrency.emit(); });
86605
+ i0.ɵɵlistener("click", function PlanSelectionPlaceholderCardComponent_Template_button_click_13_listener() { return ctx.onEditClick(); });
86568
86606
  i0.ɵɵnamespaceSVG();
86569
86607
  i0.ɵɵelementStart(14, "svg", 10);
86570
86608
  i0.ɵɵelement(15, "path", 11);
@@ -86650,9 +86688,9 @@ class PlanSelectionPlaceholderCardComponent {
86650
86688
  <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
86651
86689
  Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
86652
86690
  <button
86653
- (click)="editCurrency.emit()"
86691
+ (click)="onEditClick()"
86654
86692
  [ngClass]="editButtonClasses()"
86655
- class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
86693
+ class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
86656
86694
  >
86657
86695
  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86658
86696
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
@@ -88336,20 +88374,26 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_1_Te
88336
88374
  const ctx_r1 = i0.ɵɵnextContext(2);
88337
88375
  i0.ɵɵproperty("goals", ctx_r1.strategicRoadmapGoals())("viewMode", ctx_r1.viewMode());
88338
88376
  } }
88339
- function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
88340
- const _r4 = i0.ɵɵgetCurrentView();
88377
+ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
88341
88378
  i0.ɵɵelementStart(0, "div", 27);
88342
- i0.ɵɵelement(1, "symphiq-subscription-value-proposition-card", 32);
88343
- i0.ɵɵelementEnd();
88344
- i0.ɵɵelementStart(2, "symphiq-billing-currency-selector-card", 33);
88345
- i0.ɵɵlistener("currencySelected", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template_symphiq_billing_currency_selector_card_currencySelected_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleCurrencySelection($event)); });
88379
+ i0.ɵɵelement(1, "symphiq-subscription-value-proposition-card", 33);
88346
88380
  i0.ɵɵelementEnd();
88347
88381
  } if (rf & 2) {
88348
- const ctx_r1 = i0.ɵɵnextContext(3);
88382
+ const ctx_r1 = i0.ɵɵnextContext(4);
88349
88383
  i0.ɵɵadvance();
88350
88384
  i0.ɵɵproperty("viewMode", ctx_r1.viewMode());
88385
+ } }
88386
+ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
88387
+ const _r4 = i0.ɵɵgetCurrentView();
88388
+ i0.ɵɵconditionalCreate(0, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Conditional_0_Template, 2, 1, "div", 27);
88389
+ i0.ɵɵelementStart(1, "symphiq-billing-currency-selector-card", 32);
88390
+ i0.ɵɵlistener("currencySelected", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template_symphiq_billing_currency_selector_card_currencySelected_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleCurrencySelection($event)); })("cancelClick", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template_symphiq_billing_currency_selector_card_cancelClick_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleCancelCurrencyEdit()); });
88391
+ i0.ɵɵelementEnd();
88392
+ } if (rf & 2) {
88393
+ const ctx_r1 = i0.ɵɵnextContext(3);
88394
+ i0.ɵɵconditional(!ctx_r1.hasBillingCurrency() ? 0 : -1);
88351
88395
  i0.ɵɵadvance();
88352
- i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("isLoading", ctx_r1.isCurrencySelectionLoading());
88396
+ i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("isLoading", ctx_r1.isCurrencySelectionLoading())("showCancel", ctx_r1.isEditingCurrency());
88353
88397
  } }
88354
88398
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
88355
88399
  const _r5 = i0.ɵɵgetCurrentView();
@@ -88365,7 +88409,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Co
88365
88409
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
88366
88410
  const _r6 = i0.ɵɵgetCurrentView();
88367
88411
  i0.ɵɵelementStart(0, "symphiq-plan-selection-placeholder-card", 35);
88368
- i0.ɵɵlistener("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template_symphiq_plan_selection_placeholder_card_editCurrency_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCurrencyClick.emit()); });
88412
+ i0.ɵɵlistener("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template_symphiq_plan_selection_placeholder_card_editCurrency_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleEditCurrencyClick()); });
88369
88413
  i0.ɵɵelementEnd();
88370
88414
  } if (rf & 2) {
88371
88415
  let tmp_4_0;
@@ -88373,10 +88417,10 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Co
88373
88417
  i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("selectedCurrency", ((tmp_4_0 = ctx_r1.account()) == null ? null : tmp_4_0.billingCurrencyCode) || ctx_r1.CurrencyCodeEnum.USD);
88374
88418
  } }
88375
88419
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
88376
- i0.ɵɵconditionalCreate(0, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template, 3, 3)(1, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template, 2, 5, "div", 30)(2, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template, 1, 2, "symphiq-plan-selection-placeholder-card", 31);
88420
+ i0.ɵɵconditionalCreate(0, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_0_Template, 2, 4)(1, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template, 2, 5, "div", 30)(2, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template, 1, 2, "symphiq-plan-selection-placeholder-card", 31);
88377
88421
  } if (rf & 2) {
88378
88422
  const ctx_r1 = i0.ɵɵnextContext(2);
88379
- i0.ɵɵconditional(!ctx_r1.hasBillingCurrency() ? 0 : ctx_r1.showPlanSelection() ? 1 : 2);
88423
+ i0.ɵɵconditional(!ctx_r1.hasBillingCurrency() || ctx_r1.isEditingCurrency() ? 0 : ctx_r1.showPlanSelection() ? 1 : 2);
88380
88424
  } }
88381
88425
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
88382
88426
  i0.ɵɵelementStart(0, "div");
@@ -88707,8 +88751,8 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_F
88707
88751
  } if (rf & 2) {
88708
88752
  const ctx_r14 = i0.ɵɵnextContext();
88709
88753
  const section_r14 = ctx_r14.$implicit;
88710
- const ɵ$index_203_r16 = ctx_r14.$index;
88711
- i0.ɵɵclassProp("lg:flex-row-reverse", ɵ$index_203_r16 % 2 === 0);
88754
+ const ɵ$index_204_r16 = ctx_r14.$index;
88755
+ i0.ɵɵclassProp("lg:flex-row-reverse", ɵ$index_204_r16 % 2 === 0);
88712
88756
  i0.ɵɵadvance();
88713
88757
  i0.ɵɵconditional(section_r14.visual && section_r14.visual.enabled ? 1 : -1);
88714
88758
  i0.ɵɵadvance();
@@ -88717,10 +88761,10 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_F
88717
88761
  function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
88718
88762
  i0.ɵɵelement(0, "symphiq-section-divider", 81);
88719
88763
  } if (rf & 2) {
88720
- const ɵ$index_203_r16 = i0.ɵɵnextContext().$index;
88764
+ const ɵ$index_204_r16 = i0.ɵɵnextContext().$index;
88721
88765
  const sectionList_r17 = i0.ɵɵnextContext();
88722
88766
  const ctx_r1 = i0.ɵɵnextContext(2);
88723
- i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("sectionIcon", sectionList_r17[ɵ$index_203_r16 + 1].icon);
88767
+ i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("sectionIcon", sectionList_r17[ɵ$index_204_r16 + 1].icon);
88724
88768
  } }
88725
88769
  function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
88726
88770
  i0.ɵɵelementStart(0, "div", 82)(1, "div", 83);
@@ -88734,8 +88778,8 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_F
88734
88778
  i0.ɵɵconditionalCreate(8, SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_For_2_Conditional_8_Template, 1, 2, "symphiq-section-divider", 81);
88735
88779
  } if (rf & 2) {
88736
88780
  const section_r14 = ctx.$implicit;
88737
- const ɵ$index_203_r16 = ctx.$index;
88738
- const ɵ$count_203_r18 = ctx.$count;
88781
+ const ɵ$index_204_r16 = ctx.$index;
88782
+ const ɵ$count_204_r18 = ctx.$count;
88739
88783
  const ctx_r1 = i0.ɵɵnextContext(3);
88740
88784
  i0.ɵɵproperty("id", "section-" + section_r14.id)("ngClass", ctx_r1.getSectionCardClasses());
88741
88785
  i0.ɵɵadvance(2);
@@ -88747,9 +88791,9 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_F
88747
88791
  i0.ɵɵadvance();
88748
88792
  i0.ɵɵconditional(section_r14.description || section_r14.visual && section_r14.visual.enabled ? 6 : -1);
88749
88793
  i0.ɵɵadvance();
88750
- i0.ɵɵproperty("section", section_r14)("executiveSummary", section_r14.id === "executive-summary" ? ctx_r1.executiveSummary() : undefined)("viewMode", ctx_r1.viewMode())("sectionIndex", ɵ$index_203_r16)("allGoals", ctx_r1.allGoals())("allMetrics", ctx_r1.allMetrics())("allCharts", ctx_r1.allCharts())("allInsights", ctx_r1.allInsights())("businessProfile", ctx_r1.profile());
88794
+ i0.ɵɵproperty("section", section_r14)("executiveSummary", section_r14.id === "executive-summary" ? ctx_r1.executiveSummary() : undefined)("viewMode", ctx_r1.viewMode())("sectionIndex", ɵ$index_204_r16)("allGoals", ctx_r1.allGoals())("allMetrics", ctx_r1.allMetrics())("allCharts", ctx_r1.allCharts())("allInsights", ctx_r1.allInsights())("businessProfile", ctx_r1.profile());
88751
88795
  i0.ɵɵadvance();
88752
- i0.ɵɵconditional(!(ɵ$index_203_r16 === ɵ$count_203_r18 - 1) ? 8 : -1);
88796
+ i0.ɵɵconditional(!(ɵ$index_204_r16 === ɵ$count_204_r18 - 1) ? 8 : -1);
88753
88797
  } }
88754
88798
  function SymphiqProfileAnalysisDashboardComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
88755
88799
  i0.ɵɵelementStart(0, "section", 40);
@@ -88884,6 +88928,7 @@ class SymphiqProfileAnalysisDashboardComponent {
88884
88928
  this.isCurrencySelectionLoading = signal(false, ...(ngDevMode ? [{ debugName: "isCurrencySelectionLoading" }] : []));
88885
88929
  this.selectedCurrency = signal(null, ...(ngDevMode ? [{ debugName: "selectedCurrency" }] : []));
88886
88930
  this.isPlanLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPlanLoading" }] : []));
88931
+ this.isEditingCurrency = signal(false, ...(ngDevMode ? [{ debugName: "isEditingCurrency" }] : []));
88887
88932
  this.selectedPeriodUnit = computed(() => {
88888
88933
  return this.account()?.onboardingPeriodUnit || ChargebeeItemPricePeriodUnitEnum.YEAR;
88889
88934
  }, ...(ngDevMode ? [{ debugName: "selectedPeriodUnit" }] : []));
@@ -89635,6 +89680,7 @@ class SymphiqProfileAnalysisDashboardComponent {
89635
89680
  handleCurrencySelection(currency) {
89636
89681
  this.isCurrencySelectionLoading.set(true);
89637
89682
  this.selectedCurrency.set(currency);
89683
+ this.isEditingCurrency.set(false);
89638
89684
  this.currencySelectionClick.emit(currency);
89639
89685
  }
89640
89686
  handlePeriodUnitChange(periodUnit) {
@@ -89644,6 +89690,14 @@ class SymphiqProfileAnalysisDashboardComponent {
89644
89690
  handlePlanSelection(plan) {
89645
89691
  this.planSelected.emit(plan);
89646
89692
  }
89693
+ handleEditCurrencyClick() {
89694
+ console.log('[ProfileAnalysisDashboard] Edit currency clicked, setting isEditingCurrency to true');
89695
+ this.isEditingCurrency.set(true);
89696
+ }
89697
+ handleCancelCurrencyEdit() {
89698
+ console.log('[ProfileAnalysisDashboard] Cancel currency edit clicked');
89699
+ this.isEditingCurrency.set(false);
89700
+ }
89647
89701
  static { this.ɵfac = function SymphiqProfileAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileAnalysisDashboardComponent)(); }; }
89648
89702
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileAnalysisDashboardComponent, selectors: [["symphiq-profile-analysis-dashboard"]], viewQuery: function SymphiqProfileAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
89649
89703
  i0.ɵɵviewQuery(ModalComponent, 5);
@@ -89652,7 +89706,7 @@ class SymphiqProfileAnalysisDashboardComponent {
89652
89706
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _t.first);
89653
89707
  } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
89654
89708
  i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
89655
- } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected" }, features: [i0.ɵɵNgOnChangesFeature], decls: 28, vars: 49, consts: [[1, "min-h-screen", "relative", 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, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "goals", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "viewMode"], [3, "currencySelected", "viewMode", "isLoading"], [3, "periodUnitChanged", "planSelected", "editCurrency", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
89709
+ } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected" }, features: [i0.ɵɵNgOnChangesFeature], decls: 28, vars: 49, consts: [[1, "min-h-screen", "relative", 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, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "goals", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "cancelClick", "viewMode", "isLoading", "showCancel"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
89656
89710
  i0.ɵɵelementStart(0, "div", 0);
89657
89711
  i0.ɵɵelement(1, "div", 1);
89658
89712
  i0.ɵɵelementStart(2, "div");
@@ -89760,577 +89814,581 @@ class SymphiqProfileAnalysisDashboardComponent {
89760
89814
  standalone: true,
89761
89815
  imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, FloatingTocComponent, SectionNavigationComponent, GradeBadgeComponent, ShopWelcomeBannerComponent, FocusAreaWelcomeBannerComponent, MetricWelcomeBannerComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent, NapkinVisualPlaceholderComponent, TooltipContainerComponent, ProfileSectionContentComponent, ProfileAnalysisModalComponent, ModalComponent, GoalCardComponent, GoalObjectivesModalContentComponent, ObjectiveStrategiesModalContentComponent, StrategyRecommendationsModalContentComponent, CategoryDetailModalContentComponent, StrengthDetailModalContentComponent, GapDetailModalContentComponent, OpportunityDetailModalContentComponent, BusinessAnalysisModalComponent, SectionDividerComponent, SymphiqIconComponent, RelatedGoalChipsComponent, StrategicGoalsTiledGridComponent, CollapsibleAnalysisSectionGroupComponent, BillingCurrencySelectorCardComponent, PlanSelectionPlaceholderCardComponent, PlanSelectionContainerComponent, SubscriptionValuePropositionCardComponent, StickySubscriptionContinueButtonComponent],
89762
89816
  changeDetection: ChangeDetectionStrategy.OnPush,
89763
- template: `
89764
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89765
- <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
89766
-
89767
- <!-- Scroll Progress Bar -->
89768
- <div
89769
- [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'">
89770
- <div
89771
- [style.width.%]="scrollProgress()"
89772
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89773
- class="h-full transition-all duration-200 ease-out">
89774
- </div>
89775
- </div>
89776
-
89777
- <div class="relative z-[51]">
89778
- <!-- Dashboard Header -->
89779
- <symphiq-dashboard-header
89780
- [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89781
- [subtitle]="getAnalysisSubtitle()"
89782
- [currentSection]="getAnalysisSubtitle()"
89783
- [viewMode]="viewMode()"
89784
- [viewModeLabel]="displayModeLabel()"
89785
- [isLoading]="isLoading()"
89786
- [requestedByUser]="requestedByUser()"
89787
- [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89788
- (searchClick)="openSearch()"
89789
- (viewModeClick)="openViewModeSwitcher()"
89790
- />
89791
-
89792
- <!-- Journey Progress Banner -->
89793
- @if (isSimplifiedView() && !isOnboarded()) {
89794
- <symphiq-journey-progress-indicator
89795
- [viewMode]="viewMode()"
89796
- [currentStepId]="currentStepId()"
89797
- [showNextStepAction]="shouldShowContinueButton()"
89798
- [forDemo]="forDemo()"
89799
- [maxAccessibleStepId]="maxAccessibleStepId()"
89800
- (nextStepClick)="nextStepClick.emit()"
89801
- (stepClick)="stepClick.emit($event)"
89802
- />
89803
- }
89804
-
89805
- <!-- Main Content -->
89806
- <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton()">
89807
-
89808
- <!-- Welcome Banner (Simplified View Only) -->
89809
- @if (isSimplifiedView()) {
89810
- <div class="mb-12">
89811
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89812
- <symphiq-shop-welcome-banner
89813
- [viewMode]="viewMode()"
89814
- [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
89815
- [isOnboarded]="isOnboarded()"
89816
- />
89817
- }
89818
- @if (isFocusAreaAnalysis()) {
89819
- <symphiq-focus-area-welcome-banner
89820
- [viewMode]="viewMode()"
89821
- [focusAreaDomain]="focusAreaDomain()"
89822
- [focusAreaName]="focusAreaName()"
89823
- [focusAreaDetails]="focusAreaDetails()"
89824
- />
89825
- }
89826
- @if (isMetricAnalysis()) {
89827
- <symphiq-metric-welcome-banner
89828
- [viewMode]="viewMode()"
89829
- [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
89830
- [isOnboarded]="isOnboarded()"
89831
- />
89832
- }
89833
- </div>
89834
- }
89835
-
89836
- <!-- Simplified View Content -->
89837
- @if (isSimplifiedView()) {
89838
- <!-- Strategic Insights & Goals (or Subscription Flow) -->
89839
- <div class="mb-8">
89840
- @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
89841
- <symphiq-strategic-goals-tiled-grid
89842
- [goals]="strategicRoadmapGoals()"
89843
- [viewMode]="viewMode()"
89844
- (viewMoreClick)="openGoalModal($event)"
89845
- />
89846
- } @else {
89847
- <!-- Subscription Value Proposition -->
89848
- @if (!hasBillingCurrency()) {
89849
- <div class="mb-8">
89850
- <symphiq-subscription-value-proposition-card
89851
- [viewMode]="viewMode()"
89852
- />
89853
- </div>
89854
-
89855
- <!-- Currency Selection -->
89856
- <symphiq-billing-currency-selector-card
89857
- [viewMode]="viewMode()"
89858
- [isLoading]="isCurrencySelectionLoading()"
89859
- (currencySelected)="handleCurrencySelection($event)"
89860
- />
89861
- } @else if (showPlanSelection()) {
89862
- <!-- Plan Selection -->
89863
-
89864
- <div class="mb-32">
89865
- <symphiq-plan-selection-container
89866
- [viewMode]="viewMode()"
89867
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89868
- [planCardInfos]="planCardInfos()"
89869
- [isLoading]="isPlanLoading()"
89870
- [selectedPeriodUnit]="selectedPeriodUnit()"
89871
- (periodUnitChanged)="handlePeriodUnitChange($event)"
89872
- (planSelected)="handlePlanSelection($event)"
89873
- (editCurrency)="editCurrencyClick.emit()"
89874
- />
89875
- </div>
89876
- } @else {
89877
- <symphiq-plan-selection-placeholder-card
89878
- [viewMode]="viewMode()"
89879
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89880
- (editCurrency)="editCurrencyClick.emit()"
89881
- />
89882
- }
89883
- }
89884
- </div>
89885
-
89886
- <!-- Supporting Business Context -->
89887
- @if (nonStrategicSections().length > 0) {
89888
- <div>
89889
- <symphiq-collapsible-analysis-section-group
89890
- [sections]="nonStrategicSections()"
89891
- [viewMode]="viewMode()"
89892
- [executiveSummary]="executiveSummary()"
89893
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
89894
- [metricExecutiveSummary]="metricExecutiveSummary()"
89895
- [metricName]="metricName()"
89896
- [allGoals]="allGoals()"
89897
- [allMetrics]="allMetrics()"
89898
- [allCharts]="allCharts()"
89899
- [allInsights]="allInsights()"
89900
- [businessProfile]="profile()"
89901
- />
89902
- </div>
89903
- }
89904
- }
89905
-
89906
- <!-- Compact & Expanded View Content -->
89907
- @if (!isSimplifiedView()) {
89908
- <!-- SHOP Executive Summary -->
89909
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
89910
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
89911
- <!-- Summary Banner -->
89912
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
89913
- <div class="space-y-6">
89914
- <div class="flex items-start justify-between gap-4">
89915
- <div class="flex-1">
89916
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
89917
- Executive Summary
89918
- </h2>
89919
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
89920
- {{ summary.gradeRationale }}
89921
- </p>
89922
- </div>
89923
- @if (summary.overallGrade) {
89924
- <symphiq-grade-badge
89925
- [grade]="summary.overallGrade"
89926
- [gradeRationale]="summary.gradeRationale || ''"
89927
- [viewMode]="viewMode()"
89928
- />
89929
- }
89930
- </div>
89931
-
89932
- @if (summary.narrative) {
89933
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
89934
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
89935
- Analysis Narrative
89936
- </h3>
89937
- <div class="relative">
89938
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
89939
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
89940
- <symphiq-napkin-visual-placeholder
89941
- [visual]="summary.napkinVisual"
89942
- [viewMode]="viewMode()"
89943
- />
89944
- </div>
89945
- }
89946
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
89947
- {{ summary.narrative }}
89948
- </p>
89949
- <div class="clear-both"></div>
89950
- </div>
89951
- </div>
89952
- }
89953
-
89954
- <!-- Stats -->
89955
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
89956
- <button
89957
- type="button"
89958
- (click)="onKeyStrengthsClick(summary)"
89959
- [ngClass]="getKeyStrengthsStatCardClasses()"
89960
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89961
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89962
- Key Strengths
89963
- </div>
89964
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
89965
- {{ summary.keyStrengths?.length || 0 }}
89966
- </div>
89967
- <div class="flex items-center gap-1.5 text-xs font-medium">
89968
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
89969
- <symphiq-icon
89970
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
89971
- size="w-4 h-4"
89972
- [ngClass]="getKeyStrengthsButtonTextClasses()"
89973
- class="transition-transform group-hover:translate-x-1"
89974
- />
89975
- </div>
89976
- </button>
89977
- <button
89978
- type="button"
89979
- (click)="onCriticalGapsClick(summary)"
89980
- [ngClass]="getCriticalGapsStatCardClasses()"
89981
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89982
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89983
- Critical Gaps
89984
- </div>
89985
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
89986
- {{ summary.criticalGaps?.length || 0 }}
89987
- </div>
89988
- <div class="flex items-center gap-1.5 text-xs font-medium">
89989
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
89990
- <symphiq-icon
89991
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
89992
- size="w-4 h-4"
89993
- [ngClass]="getCriticalGapsButtonTextClasses()"
89994
- class="transition-transform group-hover:translate-x-1"
89995
- />
89996
- </div>
89997
- </button>
89998
- <button
89999
- type="button"
90000
- (click)="scrollToQuickWins()"
90001
- [ngClass]="getQuickWinsStatCardClasses()"
90002
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90003
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90004
- Quick Wins
90005
- </div>
90006
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90007
- {{ summary.quickWins?.length || 0 }}
90008
- </div>
90009
- <div class="flex items-center gap-1.5 text-xs font-medium">
90010
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90011
- <symphiq-icon
90012
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90013
- size="w-4 h-4"
90014
- [ngClass]="getQuickWinsButtonTextClasses()"
90015
- class="transition-transform group-hover:translate-y-1 animate-bounce"
90016
- />
90017
- </div>
90018
- </button>
90019
- </div>
90020
- </div>
90021
- </div>
90022
-
90023
- <!-- Quick Wins -->
90024
- @if (summary.quickWins && summary.quickWins.length > 0) {
90025
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90026
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90027
- Quick Wins
90028
- </h3>
90029
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90030
- @for (win of summary.quickWins; track $index) {
90031
- <div [ngClass]="getQuickWinCardClasses()"
90032
- class="rounded-xl p-6 transition-all duration-300">
90033
- <div class="space-y-4">
90034
- <div class="flex items-start gap-3">
90035
- <span [ngClass]="getNumberBadgeClasses()"
90036
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90037
- {{ $index + 1 }}
90038
- </span>
90039
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90040
- {{ win.action }}
90041
- </p>
90042
- </div>
90043
-
90044
- <div class="flex flex-wrap gap-2">
90045
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
90046
- class="px-3 py-1 rounded-full text-xs font-semibold">
90047
- {{ formatLabel(win.effort) }} Effort
90048
- </span>
90049
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
90050
- class="px-3 py-1 rounded-full text-xs font-semibold">
90051
- {{ formatLabel(win.impact) }} Impact
90052
- </span>
90053
- </div>
90054
-
90055
- @if (win.estimatedTimeframe) {
90056
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90057
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90058
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90059
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90060
- </svg>
90061
- <span>{{ win.estimatedTimeframe }}</span>
90062
- </div>
90063
- }
90064
-
90065
- @if (win.relatedGoalId) {
90066
- <div class="space-y-2">
90067
- <h4 [ngClass]="getMetaTextClasses()"
90068
- class="text-xs font-semibold uppercase tracking-wider">
90069
- Related Goal
90070
- </h4>
90071
- <symphiq-related-goal-chips
90072
- [relatedGoalIds]="[win.relatedGoalId]"
90073
- [allGoals]="allGoals()"
90074
- [viewMode]="viewMode()"
90075
- />
90076
- </div>
90077
- }
90078
- </div>
90079
- </div>
90080
- }
90081
- </div>
90082
- </div>
90083
- }
90084
- </section>
90085
- }
90086
-
90087
- <!-- FOCUS_AREA Executive Summary -->
90088
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90089
- <symphiq-focus-area-executive-summary
90090
- [viewMode]="viewMode()"
90091
- [summary]="summary"
90092
- [allGoals]="allGoals()"
90093
- (topPrioritiesClick)="handleTopPrioritiesClick()"
90094
- (priorityDetailClick)="handlePriorityDetailClick($event)"
90095
- />
90096
- }
90097
-
90098
- <!-- METRIC Executive Summary -->
90099
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90100
- <symphiq-metric-executive-summary
90101
- [viewMode]="viewMode()"
90102
- [summary]="summary"
90103
- [metricName]="metricName()"
90104
- [allGoals]="allGoals()"
90105
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90106
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90107
- />
90108
- }
90109
-
90110
- <!-- Divider Before First Section -->
90111
- @if (sections(); as sectionList) {
90112
- @if (sectionList.length > 0 && sectionList[0].icon) {
90113
- <symphiq-section-divider
90114
- [viewMode]="viewMode()"
90115
- [sectionIcon]="sectionList[0].icon"
90116
- />
90117
- }
90118
- }
90119
-
90120
- <!-- Profile Analysis Sections -->
90121
- @if (sections(); as sectionList) {
90122
- <section class="space-y-8">
90123
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90124
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90125
- class="rounded-xl p-8 scroll-mt-24">
90126
- <!-- Icon and Title -->
90127
- <div class="flex items-start gap-3 mb-6">
90128
- @if (section.icon) {
90129
- <div [ngClass]="getSectionIconClasses()"
90130
- class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90131
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90132
- </div>
90133
- }
90134
- <div class="flex-1">
90135
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90136
- {{ section.title }}
90137
- </h3>
90138
- </div>
90139
- </div>
90140
-
90141
- <!-- Description and Visual Side-by-Side -->
90142
- @if (section.description || (section.visual && section.visual.enabled)) {
90143
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90144
- [class.lg:flex-row-reverse]="idx % 2 === 0">
90145
- @if (section.visual && section.visual.enabled) {
90146
- <div class="w-full lg:w-2/3">
90147
- <symphiq-napkin-visual-placeholder
90148
- [visual]="section.visual"
90149
- [viewMode]="viewMode()"
90150
- />
90151
- </div>
90152
- }
90153
- @if (section.description) {
90154
- <div class="w-full"
90155
- [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90156
- <p [ngClass]="getSectionDescriptionClasses()"
90157
- class="text-sm leading-relaxed whitespace-pre-line">
90158
- {{ section.description }}
90159
- </p>
90160
- </div>
90161
- }
90162
- </div>
90163
- }
90164
-
90165
- <!-- Section Content -->
90166
- <symphiq-profile-section-content
90167
- [section]="section"
90168
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90169
- [viewMode]="viewMode()"
90170
- [sectionIndex]="idx"
90171
- [allGoals]="allGoals()"
90172
- [allMetrics]="allMetrics()"
90173
- [allCharts]="allCharts()"
90174
- [allInsights]="allInsights()"
90175
- [businessProfile]="profile()"
90176
- />
90177
- </div>
90178
-
90179
- <!-- Section Divider (between sections) -->
90180
- @if (!last) {
90181
- <symphiq-section-divider
90182
- [viewMode]="viewMode()"
90183
- [sectionIcon]="sectionList[idx + 1].icon"
90184
- />
90185
- }
90186
- }
90187
- </section>
90188
- }
90189
- }
90190
-
90191
- </main>
90192
-
90193
- <!-- Table of Contents (Compact & Expanded Views) -->
90194
- @if (!isSimplifiedView() && sections()) {
90195
- <symphiq-floating-toc
90196
- [sections]="tocSections()"
90197
- [viewMode]="viewMode()"
90198
- [embedded]="embedded()"
90199
- [scrollElement]="scrollElement() ?? undefined"
90200
- />
90201
- }
90202
-
90203
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
90204
- @if (!isSimplifiedView() && sections()) {
90205
- <symphiq-section-navigation
90206
- [sections]="tocSections()"
90207
- [viewMode]="viewMode()"
90208
- [embedded]="embedded()"
90209
- [scrollElement]="scrollElement() ?? undefined"
90210
- />
90211
- }
90212
-
90213
- <!-- Search Modal -->
90214
- <symphiq-search-modal
90215
- [isOpen]="isSearchOpen()"
90216
- [isLightMode]="isLightMode()"
90217
- (close)="closeSearch()"
90218
- />
90219
-
90220
- <!-- View Mode Switcher Modal -->
90221
- <symphiq-view-mode-switcher-modal
90222
- [isOpen]="isViewModeSwitcherOpen()"
90223
- [currentMode]="currentDisplayMode()"
90224
- [viewMode]="viewMode()"
90225
- (close)="closeViewModeSwitcher()"
90226
- (modeSelected)="handleDisplayModeChange($event)"
90227
- />
90228
-
90229
- <!-- Profile Analysis Modal -->
90230
- <symphiq-profile-analysis-modal
90231
- [isLightMode]="isLightMode()"
90232
- [allMetrics]="allMetrics()"
90233
- [allInsights]="allInsights()"
90234
- [allBusinessInsights]="allBusinessInsights()"
90235
- [allCharts]="allCharts()"
90236
- >
90237
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90238
- <symphiq-goal-card
90239
- [goal]="data.goal"
90240
- [viewMode]="data.viewMode"
90241
- [isInModal]="true"
90242
- [allMetrics]="allMetrics()"
90243
- [allCharts]="allCharts()"
90244
- [allInsights]="allInsights()"
90245
- [currentModalState]="getCurrentModalState()"
90246
- [businessProfile]="profile()"
90247
- />
90248
- }
90249
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90250
- <symphiq-goal-objectives-modal-content
90251
- [goal]="data.goal"
90252
- [viewMode]="data.viewMode"
90253
- />
90254
- }
90255
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90256
- <symphiq-objective-strategies-modal-content
90257
- [objective]="data.objective"
90258
- [goalTitle]="data.goalTitle"
90259
- [viewMode]="data.viewMode"
90260
- />
90261
- }
90262
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90263
- <symphiq-strategy-recommendations-modal-content
90264
- [strategy]="data.strategy"
90265
- [objectiveTitle]="data.objectiveTitle"
90266
- [goalTitle]="data.goalTitle"
90267
- [viewMode]="data.viewMode"
90268
- [allMetrics]="allMetrics()"
90269
- [allCharts]="allCharts()"
90270
- [allInsights]="allInsights()"
90271
- [allBusinessInsights]="allBusinessInsights()"
90272
- [currentModalState]="getCurrentModalState()"
90273
- />
90274
- }
90275
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90276
- <symphiq-category-detail-modal-content
90277
- [category]="data.category"
90278
- [viewMode]="data.viewMode"
90279
- [scrollToSection]="data.scrollToSection"
90280
- />
90281
- }
90282
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90283
- <symphiq-strength-detail-modal-content
90284
- [strength]="data.strength"
90285
- [viewMode]="data.viewMode"
90286
- [allFunnelStrengths]="funnelStrengths()"
90287
- [currentModalState]="getCurrentModalState()"
90288
- />
90289
- }
90290
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90291
- <symphiq-gap-detail-modal-content
90292
- [gap]="data.gap"
90293
- [viewMode]="data.viewMode"
90294
- [allGoals]="allGoals()"
90295
- [allWeaknesses]="funnelWeaknesses()"
90296
- [currentModalState]="getCurrentModalState()"
90297
- />
90298
- }
90299
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90300
- <symphiq-opportunity-detail-modal-content
90301
- [opportunity]="data.opportunity"
90302
- [viewMode]="data.viewMode"
90303
- [allStrengths]="funnelStrengths()"
90304
- [currentModalState]="getCurrentModalState()"
90305
- />
90306
- }
90307
- </symphiq-profile-analysis-modal>
90308
-
90309
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90310
- <symphiq-funnel-analysis-modal
90311
- [isLightMode]="isLightMode()"
90312
- [viewMode]="viewMode()"
90313
- [allMetrics]="allMetrics()"
90314
- [allInsights]="allInsights()"
90315
- [allCharts]="allCharts()"
90316
- />
90317
-
90318
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
90319
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90320
-
90321
- <!-- Tooltip Container -->
90322
- <symphiq-tooltip-container/>
90323
-
90324
- <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90325
- @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90326
- <symphiq-sticky-subscription-continue-button
90327
- [viewMode]="viewMode()"
90328
- [isEnabled]="hasCurrencySelected()"
90329
- [isLoading]="isCurrencySelectionLoading()"
90330
- (continueClick)="handleStickyButtonClick()"
90331
- />
90332
- }
90333
- </div>
89817
+ template: `
89818
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89819
+ <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
89820
+
89821
+ <!-- Scroll Progress Bar -->
89822
+ <div
89823
+ [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'">
89824
+ <div
89825
+ [style.width.%]="scrollProgress()"
89826
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89827
+ class="h-full transition-all duration-200 ease-out">
89828
+ </div>
89829
+ </div>
89830
+
89831
+ <div class="relative z-[51]">
89832
+ <!-- Dashboard Header -->
89833
+ <symphiq-dashboard-header
89834
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89835
+ [subtitle]="getAnalysisSubtitle()"
89836
+ [currentSection]="getAnalysisSubtitle()"
89837
+ [viewMode]="viewMode()"
89838
+ [viewModeLabel]="displayModeLabel()"
89839
+ [isLoading]="isLoading()"
89840
+ [requestedByUser]="requestedByUser()"
89841
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89842
+ (searchClick)="openSearch()"
89843
+ (viewModeClick)="openViewModeSwitcher()"
89844
+ />
89845
+
89846
+ <!-- Journey Progress Banner -->
89847
+ @if (isSimplifiedView() && !isOnboarded()) {
89848
+ <symphiq-journey-progress-indicator
89849
+ [viewMode]="viewMode()"
89850
+ [currentStepId]="currentStepId()"
89851
+ [showNextStepAction]="shouldShowContinueButton()"
89852
+ [forDemo]="forDemo()"
89853
+ [maxAccessibleStepId]="maxAccessibleStepId()"
89854
+ (nextStepClick)="nextStepClick.emit()"
89855
+ (stepClick)="stepClick.emit($event)"
89856
+ />
89857
+ }
89858
+
89859
+ <!-- Main Content -->
89860
+ <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton()">
89861
+
89862
+ <!-- Welcome Banner (Simplified View Only) -->
89863
+ @if (isSimplifiedView()) {
89864
+ <div class="mb-12">
89865
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89866
+ <symphiq-shop-welcome-banner
89867
+ [viewMode]="viewMode()"
89868
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
89869
+ [isOnboarded]="isOnboarded()"
89870
+ />
89871
+ }
89872
+ @if (isFocusAreaAnalysis()) {
89873
+ <symphiq-focus-area-welcome-banner
89874
+ [viewMode]="viewMode()"
89875
+ [focusAreaDomain]="focusAreaDomain()"
89876
+ [focusAreaName]="focusAreaName()"
89877
+ [focusAreaDetails]="focusAreaDetails()"
89878
+ />
89879
+ }
89880
+ @if (isMetricAnalysis()) {
89881
+ <symphiq-metric-welcome-banner
89882
+ [viewMode]="viewMode()"
89883
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
89884
+ [isOnboarded]="isOnboarded()"
89885
+ />
89886
+ }
89887
+ </div>
89888
+ }
89889
+
89890
+ <!-- Simplified View Content -->
89891
+ @if (isSimplifiedView()) {
89892
+ <!-- Strategic Insights & Goals (or Subscription Flow) -->
89893
+ <div class="mb-8">
89894
+ @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
89895
+ <symphiq-strategic-goals-tiled-grid
89896
+ [goals]="strategicRoadmapGoals()"
89897
+ [viewMode]="viewMode()"
89898
+ (viewMoreClick)="openGoalModal($event)"
89899
+ />
89900
+ } @else {
89901
+ <!-- Subscription Value Proposition -->
89902
+ @if (!hasBillingCurrency() || isEditingCurrency()) {
89903
+ @if (!hasBillingCurrency()) {
89904
+ <div class="mb-8">
89905
+ <symphiq-subscription-value-proposition-card
89906
+ [viewMode]="viewMode()"
89907
+ />
89908
+ </div>
89909
+ }
89910
+
89911
+ <!-- Currency Selection -->
89912
+ <symphiq-billing-currency-selector-card
89913
+ [viewMode]="viewMode()"
89914
+ [isLoading]="isCurrencySelectionLoading()"
89915
+ [showCancel]="isEditingCurrency()"
89916
+ (currencySelected)="handleCurrencySelection($event)"
89917
+ (cancelClick)="handleCancelCurrencyEdit()"
89918
+ />
89919
+ } @else if (showPlanSelection()) {
89920
+ <!-- Plan Selection -->
89921
+
89922
+ <div class="mb-32">
89923
+ <symphiq-plan-selection-container
89924
+ [viewMode]="viewMode()"
89925
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89926
+ [planCardInfos]="planCardInfos()"
89927
+ [isLoading]="isPlanLoading()"
89928
+ [selectedPeriodUnit]="selectedPeriodUnit()"
89929
+ (periodUnitChanged)="handlePeriodUnitChange($event)"
89930
+ (planSelected)="handlePlanSelection($event)"
89931
+ (editCurrency)="editCurrencyClick.emit()"
89932
+ />
89933
+ </div>
89934
+ } @else {
89935
+ <symphiq-plan-selection-placeholder-card
89936
+ [viewMode]="viewMode()"
89937
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89938
+ (editCurrency)="handleEditCurrencyClick()"
89939
+ />
89940
+ }
89941
+ }
89942
+ </div>
89943
+
89944
+ <!-- Supporting Business Context -->
89945
+ @if (nonStrategicSections().length > 0) {
89946
+ <div>
89947
+ <symphiq-collapsible-analysis-section-group
89948
+ [sections]="nonStrategicSections()"
89949
+ [viewMode]="viewMode()"
89950
+ [executiveSummary]="executiveSummary()"
89951
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
89952
+ [metricExecutiveSummary]="metricExecutiveSummary()"
89953
+ [metricName]="metricName()"
89954
+ [allGoals]="allGoals()"
89955
+ [allMetrics]="allMetrics()"
89956
+ [allCharts]="allCharts()"
89957
+ [allInsights]="allInsights()"
89958
+ [businessProfile]="profile()"
89959
+ />
89960
+ </div>
89961
+ }
89962
+ }
89963
+
89964
+ <!-- Compact & Expanded View Content -->
89965
+ @if (!isSimplifiedView()) {
89966
+ <!-- SHOP Executive Summary -->
89967
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
89968
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
89969
+ <!-- Summary Banner -->
89970
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
89971
+ <div class="space-y-6">
89972
+ <div class="flex items-start justify-between gap-4">
89973
+ <div class="flex-1">
89974
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
89975
+ Executive Summary
89976
+ </h2>
89977
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
89978
+ {{ summary.gradeRationale }}
89979
+ </p>
89980
+ </div>
89981
+ @if (summary.overallGrade) {
89982
+ <symphiq-grade-badge
89983
+ [grade]="summary.overallGrade"
89984
+ [gradeRationale]="summary.gradeRationale || ''"
89985
+ [viewMode]="viewMode()"
89986
+ />
89987
+ }
89988
+ </div>
89989
+
89990
+ @if (summary.narrative) {
89991
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
89992
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
89993
+ Analysis Narrative
89994
+ </h3>
89995
+ <div class="relative">
89996
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
89997
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
89998
+ <symphiq-napkin-visual-placeholder
89999
+ [visual]="summary.napkinVisual"
90000
+ [viewMode]="viewMode()"
90001
+ />
90002
+ </div>
90003
+ }
90004
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
90005
+ {{ summary.narrative }}
90006
+ </p>
90007
+ <div class="clear-both"></div>
90008
+ </div>
90009
+ </div>
90010
+ }
90011
+
90012
+ <!-- Stats -->
90013
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90014
+ <button
90015
+ type="button"
90016
+ (click)="onKeyStrengthsClick(summary)"
90017
+ [ngClass]="getKeyStrengthsStatCardClasses()"
90018
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90019
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90020
+ Key Strengths
90021
+ </div>
90022
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90023
+ {{ summary.keyStrengths?.length || 0 }}
90024
+ </div>
90025
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90026
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90027
+ <symphiq-icon
90028
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90029
+ size="w-4 h-4"
90030
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
90031
+ class="transition-transform group-hover:translate-x-1"
90032
+ />
90033
+ </div>
90034
+ </button>
90035
+ <button
90036
+ type="button"
90037
+ (click)="onCriticalGapsClick(summary)"
90038
+ [ngClass]="getCriticalGapsStatCardClasses()"
90039
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90040
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90041
+ Critical Gaps
90042
+ </div>
90043
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90044
+ {{ summary.criticalGaps?.length || 0 }}
90045
+ </div>
90046
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90047
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90048
+ <symphiq-icon
90049
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90050
+ size="w-4 h-4"
90051
+ [ngClass]="getCriticalGapsButtonTextClasses()"
90052
+ class="transition-transform group-hover:translate-x-1"
90053
+ />
90054
+ </div>
90055
+ </button>
90056
+ <button
90057
+ type="button"
90058
+ (click)="scrollToQuickWins()"
90059
+ [ngClass]="getQuickWinsStatCardClasses()"
90060
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90061
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90062
+ Quick Wins
90063
+ </div>
90064
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90065
+ {{ summary.quickWins?.length || 0 }}
90066
+ </div>
90067
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90068
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90069
+ <symphiq-icon
90070
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90071
+ size="w-4 h-4"
90072
+ [ngClass]="getQuickWinsButtonTextClasses()"
90073
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
90074
+ />
90075
+ </div>
90076
+ </button>
90077
+ </div>
90078
+ </div>
90079
+ </div>
90080
+
90081
+ <!-- Quick Wins -->
90082
+ @if (summary.quickWins && summary.quickWins.length > 0) {
90083
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90084
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90085
+ Quick Wins
90086
+ </h3>
90087
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90088
+ @for (win of summary.quickWins; track $index) {
90089
+ <div [ngClass]="getQuickWinCardClasses()"
90090
+ class="rounded-xl p-6 transition-all duration-300">
90091
+ <div class="space-y-4">
90092
+ <div class="flex items-start gap-3">
90093
+ <span [ngClass]="getNumberBadgeClasses()"
90094
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90095
+ {{ $index + 1 }}
90096
+ </span>
90097
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90098
+ {{ win.action }}
90099
+ </p>
90100
+ </div>
90101
+
90102
+ <div class="flex flex-wrap gap-2">
90103
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
90104
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90105
+ {{ formatLabel(win.effort) }} Effort
90106
+ </span>
90107
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
90108
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90109
+ {{ formatLabel(win.impact) }} Impact
90110
+ </span>
90111
+ </div>
90112
+
90113
+ @if (win.estimatedTimeframe) {
90114
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90115
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90116
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90117
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90118
+ </svg>
90119
+ <span>{{ win.estimatedTimeframe }}</span>
90120
+ </div>
90121
+ }
90122
+
90123
+ @if (win.relatedGoalId) {
90124
+ <div class="space-y-2">
90125
+ <h4 [ngClass]="getMetaTextClasses()"
90126
+ class="text-xs font-semibold uppercase tracking-wider">
90127
+ Related Goal
90128
+ </h4>
90129
+ <symphiq-related-goal-chips
90130
+ [relatedGoalIds]="[win.relatedGoalId]"
90131
+ [allGoals]="allGoals()"
90132
+ [viewMode]="viewMode()"
90133
+ />
90134
+ </div>
90135
+ }
90136
+ </div>
90137
+ </div>
90138
+ }
90139
+ </div>
90140
+ </div>
90141
+ }
90142
+ </section>
90143
+ }
90144
+
90145
+ <!-- FOCUS_AREA Executive Summary -->
90146
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90147
+ <symphiq-focus-area-executive-summary
90148
+ [viewMode]="viewMode()"
90149
+ [summary]="summary"
90150
+ [allGoals]="allGoals()"
90151
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
90152
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
90153
+ />
90154
+ }
90155
+
90156
+ <!-- METRIC Executive Summary -->
90157
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90158
+ <symphiq-metric-executive-summary
90159
+ [viewMode]="viewMode()"
90160
+ [summary]="summary"
90161
+ [metricName]="metricName()"
90162
+ [allGoals]="allGoals()"
90163
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90164
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90165
+ />
90166
+ }
90167
+
90168
+ <!-- Divider Before First Section -->
90169
+ @if (sections(); as sectionList) {
90170
+ @if (sectionList.length > 0 && sectionList[0].icon) {
90171
+ <symphiq-section-divider
90172
+ [viewMode]="viewMode()"
90173
+ [sectionIcon]="sectionList[0].icon"
90174
+ />
90175
+ }
90176
+ }
90177
+
90178
+ <!-- Profile Analysis Sections -->
90179
+ @if (sections(); as sectionList) {
90180
+ <section class="space-y-8">
90181
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90182
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90183
+ class="rounded-xl p-8 scroll-mt-24">
90184
+ <!-- Icon and Title -->
90185
+ <div class="flex items-start gap-3 mb-6">
90186
+ @if (section.icon) {
90187
+ <div [ngClass]="getSectionIconClasses()"
90188
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90189
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90190
+ </div>
90191
+ }
90192
+ <div class="flex-1">
90193
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90194
+ {{ section.title }}
90195
+ </h3>
90196
+ </div>
90197
+ </div>
90198
+
90199
+ <!-- Description and Visual Side-by-Side -->
90200
+ @if (section.description || (section.visual && section.visual.enabled)) {
90201
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90202
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
90203
+ @if (section.visual && section.visual.enabled) {
90204
+ <div class="w-full lg:w-2/3">
90205
+ <symphiq-napkin-visual-placeholder
90206
+ [visual]="section.visual"
90207
+ [viewMode]="viewMode()"
90208
+ />
90209
+ </div>
90210
+ }
90211
+ @if (section.description) {
90212
+ <div class="w-full"
90213
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90214
+ <p [ngClass]="getSectionDescriptionClasses()"
90215
+ class="text-sm leading-relaxed whitespace-pre-line">
90216
+ {{ section.description }}
90217
+ </p>
90218
+ </div>
90219
+ }
90220
+ </div>
90221
+ }
90222
+
90223
+ <!-- Section Content -->
90224
+ <symphiq-profile-section-content
90225
+ [section]="section"
90226
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90227
+ [viewMode]="viewMode()"
90228
+ [sectionIndex]="idx"
90229
+ [allGoals]="allGoals()"
90230
+ [allMetrics]="allMetrics()"
90231
+ [allCharts]="allCharts()"
90232
+ [allInsights]="allInsights()"
90233
+ [businessProfile]="profile()"
90234
+ />
90235
+ </div>
90236
+
90237
+ <!-- Section Divider (between sections) -->
90238
+ @if (!last) {
90239
+ <symphiq-section-divider
90240
+ [viewMode]="viewMode()"
90241
+ [sectionIcon]="sectionList[idx + 1].icon"
90242
+ />
90243
+ }
90244
+ }
90245
+ </section>
90246
+ }
90247
+ }
90248
+
90249
+ </main>
90250
+
90251
+ <!-- Table of Contents (Compact & Expanded Views) -->
90252
+ @if (!isSimplifiedView() && sections()) {
90253
+ <symphiq-floating-toc
90254
+ [sections]="tocSections()"
90255
+ [viewMode]="viewMode()"
90256
+ [embedded]="embedded()"
90257
+ [scrollElement]="scrollElement() ?? undefined"
90258
+ />
90259
+ }
90260
+
90261
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
90262
+ @if (!isSimplifiedView() && sections()) {
90263
+ <symphiq-section-navigation
90264
+ [sections]="tocSections()"
90265
+ [viewMode]="viewMode()"
90266
+ [embedded]="embedded()"
90267
+ [scrollElement]="scrollElement() ?? undefined"
90268
+ />
90269
+ }
90270
+
90271
+ <!-- Search Modal -->
90272
+ <symphiq-search-modal
90273
+ [isOpen]="isSearchOpen()"
90274
+ [isLightMode]="isLightMode()"
90275
+ (close)="closeSearch()"
90276
+ />
90277
+
90278
+ <!-- View Mode Switcher Modal -->
90279
+ <symphiq-view-mode-switcher-modal
90280
+ [isOpen]="isViewModeSwitcherOpen()"
90281
+ [currentMode]="currentDisplayMode()"
90282
+ [viewMode]="viewMode()"
90283
+ (close)="closeViewModeSwitcher()"
90284
+ (modeSelected)="handleDisplayModeChange($event)"
90285
+ />
90286
+
90287
+ <!-- Profile Analysis Modal -->
90288
+ <symphiq-profile-analysis-modal
90289
+ [isLightMode]="isLightMode()"
90290
+ [allMetrics]="allMetrics()"
90291
+ [allInsights]="allInsights()"
90292
+ [allBusinessInsights]="allBusinessInsights()"
90293
+ [allCharts]="allCharts()"
90294
+ >
90295
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90296
+ <symphiq-goal-card
90297
+ [goal]="data.goal"
90298
+ [viewMode]="data.viewMode"
90299
+ [isInModal]="true"
90300
+ [allMetrics]="allMetrics()"
90301
+ [allCharts]="allCharts()"
90302
+ [allInsights]="allInsights()"
90303
+ [currentModalState]="getCurrentModalState()"
90304
+ [businessProfile]="profile()"
90305
+ />
90306
+ }
90307
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90308
+ <symphiq-goal-objectives-modal-content
90309
+ [goal]="data.goal"
90310
+ [viewMode]="data.viewMode"
90311
+ />
90312
+ }
90313
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90314
+ <symphiq-objective-strategies-modal-content
90315
+ [objective]="data.objective"
90316
+ [goalTitle]="data.goalTitle"
90317
+ [viewMode]="data.viewMode"
90318
+ />
90319
+ }
90320
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90321
+ <symphiq-strategy-recommendations-modal-content
90322
+ [strategy]="data.strategy"
90323
+ [objectiveTitle]="data.objectiveTitle"
90324
+ [goalTitle]="data.goalTitle"
90325
+ [viewMode]="data.viewMode"
90326
+ [allMetrics]="allMetrics()"
90327
+ [allCharts]="allCharts()"
90328
+ [allInsights]="allInsights()"
90329
+ [allBusinessInsights]="allBusinessInsights()"
90330
+ [currentModalState]="getCurrentModalState()"
90331
+ />
90332
+ }
90333
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90334
+ <symphiq-category-detail-modal-content
90335
+ [category]="data.category"
90336
+ [viewMode]="data.viewMode"
90337
+ [scrollToSection]="data.scrollToSection"
90338
+ />
90339
+ }
90340
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90341
+ <symphiq-strength-detail-modal-content
90342
+ [strength]="data.strength"
90343
+ [viewMode]="data.viewMode"
90344
+ [allFunnelStrengths]="funnelStrengths()"
90345
+ [currentModalState]="getCurrentModalState()"
90346
+ />
90347
+ }
90348
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90349
+ <symphiq-gap-detail-modal-content
90350
+ [gap]="data.gap"
90351
+ [viewMode]="data.viewMode"
90352
+ [allGoals]="allGoals()"
90353
+ [allWeaknesses]="funnelWeaknesses()"
90354
+ [currentModalState]="getCurrentModalState()"
90355
+ />
90356
+ }
90357
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90358
+ <symphiq-opportunity-detail-modal-content
90359
+ [opportunity]="data.opportunity"
90360
+ [viewMode]="data.viewMode"
90361
+ [allStrengths]="funnelStrengths()"
90362
+ [currentModalState]="getCurrentModalState()"
90363
+ />
90364
+ }
90365
+ </symphiq-profile-analysis-modal>
90366
+
90367
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90368
+ <symphiq-funnel-analysis-modal
90369
+ [isLightMode]="isLightMode()"
90370
+ [viewMode]="viewMode()"
90371
+ [allMetrics]="allMetrics()"
90372
+ [allInsights]="allInsights()"
90373
+ [allCharts]="allCharts()"
90374
+ />
90375
+
90376
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
90377
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90378
+
90379
+ <!-- Tooltip Container -->
90380
+ <symphiq-tooltip-container/>
90381
+
90382
+ <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90383
+ @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90384
+ <symphiq-sticky-subscription-continue-button
90385
+ [viewMode]="viewMode()"
90386
+ [isEnabled]="hasCurrencySelected()"
90387
+ [isLoading]="isCurrencySelectionLoading()"
90388
+ (continueClick)="handleStickyButtonClick()"
90389
+ />
90390
+ }
90391
+ </div>
90334
90392
  `
90335
90393
  }]
90336
90394
  }], () => [], { funnelModalComponent: [{
@@ -90340,7 +90398,7 @@ class SymphiqProfileAnalysisDashboardComponent {
90340
90398
  type: HostListener,
90341
90399
  args: ['window:scroll', ['$event']]
90342
90400
  }] }); })();
90343
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 686 }); })();
90401
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 690 }); })();
90344
90402
 
90345
90403
  class ScrollProgressBarComponent {
90346
90404
  constructor() {