@eric-emg/symphiq-components 1.2.340 → 1.2.342

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 +1108 -971
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +2 -2
  4. package/package.json +1 -1
  5. package/styles.css +24 -7
package/fesm2022/symphiq-components.mjs CHANGED
@@ -86431,64 +86431,64 @@ class BillingCurrencySelectorCardComponent {
86431
86431
  standalone: true,
86432
86432
  imports: [CommonModule, FormsModule],
86433
86433
  changeDetection: ChangeDetectionStrategy.OnPush,
86434
- template: `
86435
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86436
- <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86437
- <div class="flex items-center gap-3">
86438
- <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86439
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86440
- <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>
86441
- </svg>
86442
- </div>
86443
- <div>
86444
- <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86445
- Select Your Billing Currency
86446
- </h2>
86447
- <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
86448
- Choose the currency for your subscription
86449
- </p>
86450
- </div>
86451
- </div>
86452
- </div>
86453
-
86454
- <div [ngClass]="contentClasses()" class="p-6">
86455
- <div class="space-y-6">
86456
- <div class="space-y-3">
86457
- @for (currency of currencies; track currency.code) {
86458
- <label
86459
- [ngClass]="getCurrencyOptionClasses(currency.code)"
86460
- class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
86461
- <input
86462
- type="radio"
86463
- [name]="'currency'"
86464
- [value]="currency.code"
86465
- [(ngModel)]="selectedCurrency"
86466
- (change)="handleCurrencyChange(currency.code)"
86467
- [disabled]="isLoading()"
86468
- [ngClass]="getRadioClasses()"
86469
- class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
86470
- />
86471
- <div class="flex-1">
86472
- <div class="flex items-center gap-2">
86473
- <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
86474
- {{ currency.code }}
86475
- </span>
86476
- <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
86477
- ({{ currency.symbol }})
86478
- </span>
86479
- </div>
86480
- <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
86481
- {{ currency.name }}
86482
- </p>
86483
- </div>
86484
- </label>
86485
- }
86486
- </div>
86487
-
86488
-
86489
- </div>
86490
- </div>
86491
- </div>
86434
+ template: `
86435
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86436
+ <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86437
+ <div class="flex items-center gap-3">
86438
+ <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86439
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86440
+ <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>
86441
+ </svg>
86442
+ </div>
86443
+ <div>
86444
+ <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86445
+ Select Your Billing Currency
86446
+ </h2>
86447
+ <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
86448
+ Choose the currency for your subscription
86449
+ </p>
86450
+ </div>
86451
+ </div>
86452
+ </div>
86453
+
86454
+ <div [ngClass]="contentClasses()" class="p-6">
86455
+ <div class="space-y-6">
86456
+ <div class="space-y-3">
86457
+ @for (currency of currencies; track currency.code) {
86458
+ <label
86459
+ [ngClass]="getCurrencyOptionClasses(currency.code)"
86460
+ class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
86461
+ <input
86462
+ type="radio"
86463
+ [name]="'currency'"
86464
+ [value]="currency.code"
86465
+ [(ngModel)]="selectedCurrency"
86466
+ (change)="handleCurrencyChange(currency.code)"
86467
+ [disabled]="isLoading()"
86468
+ [ngClass]="getRadioClasses()"
86469
+ class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
86470
+ />
86471
+ <div class="flex-1">
86472
+ <div class="flex items-center gap-2">
86473
+ <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
86474
+ {{ currency.code }}
86475
+ </span>
86476
+ <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
86477
+ ({{ currency.symbol }})
86478
+ </span>
86479
+ </div>
86480
+ <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
86481
+ {{ currency.name }}
86482
+ </p>
86483
+ </div>
86484
+ </label>
86485
+ }
86486
+ </div>
86487
+
86488
+
86489
+ </div>
86490
+ </div>
86491
+ </div>
86492
86492
  `
86493
86493
  }]
86494
86494
  }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], initialCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialCurrency", required: false }] }], currencySelected: [{ type: i0.Output, args: ["currencySelected"] }] }); })();
@@ -86650,68 +86650,68 @@ class PlanSelectionPlaceholderCardComponent {
86650
86650
  standalone: true,
86651
86651
  imports: [CommonModule],
86652
86652
  changeDetection: ChangeDetectionStrategy.OnPush,
86653
- template: `
86654
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86655
- <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86656
- <div class="flex items-center gap-3">
86657
- <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86658
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86659
- <path 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"></path>
86660
- </svg>
86661
- </div>
86662
- <div>
86663
- <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86664
- Choose Your Plan
86665
- </h2>
86666
- <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
86667
- Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
86668
- <button
86669
- (click)="onEditClick()"
86670
- [ngClass]="editButtonClasses()"
86671
- class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
86672
- >
86673
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86674
- <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>
86675
- </svg>
86676
- Edit
86677
- </button>
86678
- </p>
86679
- </div>
86680
- </div>
86681
- </div>
86682
-
86683
- <div [ngClass]="contentClasses()" class="p-8">
86684
- <div class="text-center space-y-6">
86685
- <div [ngClass]="placeholderIconClasses()" class="w-20 h-20 mx-auto rounded-full flex items-center justify-center">
86686
- <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86687
- <path 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"></path>
86688
- </svg>
86689
- </div>
86690
-
86691
- <div class="space-y-3">
86692
- <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
86693
- Plan Selection Coming Soon
86694
- </h3>
86695
- <p [ngClass]="placeholderTextClasses()" class="text-base leading-relaxed max-w-md mx-auto">
86696
- Your billing currency has been set to <strong>{{ selectedCurrency() }}</strong>. Plan selection and subscription management will be available shortly.
86697
- </p>
86698
- </div>
86699
-
86700
- <div [ngClass]="infoBoxClasses()" class="p-5 rounded-xl border inline-block">
86701
- <div class="flex items-start gap-3 text-left">
86702
- <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
86703
- <path 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"></path>
86704
- </svg>
86705
- <div class="flex-1">
86706
- <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
86707
- You'll be able to view and select from our subscription plans once this feature is enabled. In the meantime, your currency preference has been saved.
86708
- </p>
86709
- </div>
86710
- </div>
86711
- </div>
86712
- </div>
86713
- </div>
86714
- </div>
86653
+ template: `
86654
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
86655
+ <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
86656
+ <div class="flex items-center gap-3">
86657
+ <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
86658
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86659
+ <path 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"></path>
86660
+ </svg>
86661
+ </div>
86662
+ <div>
86663
+ <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
86664
+ Choose Your Plan
86665
+ </h2>
86666
+ <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
86667
+ Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
86668
+ <button
86669
+ (click)="onEditClick()"
86670
+ [ngClass]="editButtonClasses()"
86671
+ class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
86672
+ >
86673
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86674
+ <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>
86675
+ </svg>
86676
+ Edit
86677
+ </button>
86678
+ </p>
86679
+ </div>
86680
+ </div>
86681
+ </div>
86682
+
86683
+ <div [ngClass]="contentClasses()" class="p-8">
86684
+ <div class="text-center space-y-6">
86685
+ <div [ngClass]="placeholderIconClasses()" class="w-20 h-20 mx-auto rounded-full flex items-center justify-center">
86686
+ <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86687
+ <path 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"></path>
86688
+ </svg>
86689
+ </div>
86690
+
86691
+ <div class="space-y-3">
86692
+ <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
86693
+ Plan Selection Coming Soon
86694
+ </h3>
86695
+ <p [ngClass]="placeholderTextClasses()" class="text-base leading-relaxed max-w-md mx-auto">
86696
+ Your billing currency has been set to <strong>{{ selectedCurrency() }}</strong>. Plan selection and subscription management will be available shortly.
86697
+ </p>
86698
+ </div>
86699
+
86700
+ <div [ngClass]="infoBoxClasses()" class="p-5 rounded-xl border inline-block">
86701
+ <div class="flex items-start gap-3 text-left">
86702
+ <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
86703
+ <path 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"></path>
86704
+ </svg>
86705
+ <div class="flex-1">
86706
+ <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
86707
+ You'll be able to view and select from our subscription plans once this feature is enabled. In the meantime, your currency preference has been saved.
86708
+ </p>
86709
+ </div>
86710
+ </div>
86711
+ </div>
86712
+ </div>
86713
+ </div>
86714
+ </div>
86715
86715
  `
86716
86716
  }]
86717
86717
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }] }); })();
@@ -86832,56 +86832,99 @@ class BillingPeriodToggleComponent {
86832
86832
  standalone: true,
86833
86833
  imports: [CommonModule],
86834
86834
  changeDetection: ChangeDetectionStrategy.OnPush,
86835
- template: `
86836
- <div [ngClass]="{'mb-8': selectedPeriodUnit() !== periodUnitEnum.YEAR, 'mb-12': selectedPeriodUnit() === periodUnitEnum.YEAR}" class="flex flex-col items-center gap-4">
86837
- <div class="flex items-center gap-3">
86838
- <svg [ngClass]="iconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86839
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
86840
- </svg>
86841
- <div [ngClass]="toggleContainerClasses()" class="inline-flex gap-2 rounded-xl p-1.5 transition-all duration-200">
86842
- <button
86843
- type="button"
86844
- [disabled]="isLoading()"
86845
- (click)="selectPeriod(periodUnitEnum.YEAR)"
86846
- [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
86847
- class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
86848
- <span class="relative z-10">Annual contract</span>
86849
- @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
86850
- <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
86851
- }
86852
- </button>
86853
- <button
86854
- type="button"
86855
- [disabled]="isLoading()"
86856
- (click)="selectPeriod(periodUnitEnum.MONTH)"
86857
- [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
86858
- class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
86859
- <span class="relative z-10">Monthly contract</span>
86860
- @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
86861
- <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
86862
- }
86863
- </button>
86864
- </div>
86865
- </div>
86866
- <p [ngClass]="subtitleClasses()" class="text-sm">
86867
- {{ getSubtitle() }}
86868
- </p>
86869
- </div>
86835
+ template: `
86836
+ <div [ngClass]="{'mb-8': selectedPeriodUnit() !== periodUnitEnum.YEAR, 'mb-12': selectedPeriodUnit() === periodUnitEnum.YEAR}" class="flex flex-col items-center gap-4">
86837
+ <div class="flex items-center gap-3">
86838
+ <svg [ngClass]="iconClasses()" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86839
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
86840
+ </svg>
86841
+ <div [ngClass]="toggleContainerClasses()" class="inline-flex gap-2 rounded-xl p-1.5 transition-all duration-200">
86842
+ <button
86843
+ type="button"
86844
+ [disabled]="isLoading()"
86845
+ (click)="selectPeriod(periodUnitEnum.YEAR)"
86846
+ [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
86847
+ class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
86848
+ <span class="relative z-10">Annual contract</span>
86849
+ @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
86850
+ <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
86851
+ }
86852
+ </button>
86853
+ <button
86854
+ type="button"
86855
+ [disabled]="isLoading()"
86856
+ (click)="selectPeriod(periodUnitEnum.MONTH)"
86857
+ [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
86858
+ class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
86859
+ <span class="relative z-10">Monthly contract</span>
86860
+ @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
86861
+ <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
86862
+ }
86863
+ </button>
86864
+ </div>
86865
+ </div>
86866
+ <p [ngClass]="subtitleClasses()" class="text-sm">
86867
+ {{ getSubtitle() }}
86868
+ </p>
86869
+ </div>
86870
86870
  `
86871
86871
  }]
86872
86872
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }] }); })();
86873
86873
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BillingPeriodToggleComponent, { className: "BillingPeriodToggleComponent", filePath: "lib/components/profile-analysis-dashboard/cards/billing-period-toggle.component.ts", lineNumber: 47 }); })();
86874
86874
 
86875
+ function PlanCardComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
86876
+ i0.ɵɵelementStart(0, "div", 30);
86877
+ i0.ɵɵtext(1);
86878
+ i0.ɵɵelementEnd();
86879
+ } if (rf & 2) {
86880
+ const ctx_r0 = i0.ɵɵnextContext(2);
86881
+ i0.ɵɵclassProp("savings-badge", !ctx_r0.isSelected())("savings-badge-selected", ctx_r0.isSelected());
86882
+ i0.ɵɵproperty("ngClass", ctx_r0.savingsBadgeClasses());
86883
+ i0.ɵɵadvance();
86884
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsPercentage(), " ");
86885
+ } }
86875
86886
  function PlanCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
86876
- i0.ɵɵelementStart(0, "div", 1);
86877
- i0.ɵɵtext(1, " Best value ");
86887
+ i0.ɵɵelementStart(0, "div", 1)(1, "div", 27)(2, "span", 28);
86888
+ i0.ɵɵtext(3, "Best Value");
86889
+ i0.ɵɵelementEnd()();
86890
+ i0.ɵɵconditionalCreate(4, PlanCardComponent_Conditional_1_Conditional_4_Template, 2, 6, "div", 29);
86878
86891
  i0.ɵɵelementEnd();
86879
86892
  } if (rf & 2) {
86880
86893
  const ctx_r0 = i0.ɵɵnextContext();
86894
+ i0.ɵɵadvance();
86895
+ i0.ɵɵclassProp("best-value-badge", !ctx_r0.isSelected())("best-value-badge-selected", ctx_r0.isSelected());
86881
86896
  i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
86897
+ i0.ɵɵadvance(3);
86898
+ i0.ɵɵconditional(ctx_r0.getSavingsPercentage() ? 4 : -1);
86882
86899
  } }
86883
- function PlanCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
86884
- i0.ɵɵelement(0, "div", 10);
86900
+ function PlanCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
86901
+ i0.ɵɵelementStart(0, "div", 5);
86902
+ i0.ɵɵnamespaceSVG();
86903
+ i0.ɵɵelementStart(1, "svg", 18);
86904
+ i0.ɵɵelement(2, "path", 31);
86905
+ i0.ɵɵelementEnd();
86906
+ i0.ɵɵtext(3, " Most Popular Choice ");
86907
+ i0.ɵɵelementEnd();
86908
+ } if (rf & 2) {
86909
+ const ctx_r0 = i0.ɵɵnextContext();
86910
+ i0.ɵɵproperty("ngClass", ctx_r0.recommendedTextClasses());
86911
+ } }
86912
+ function PlanCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
86913
+ i0.ɵɵelementStart(0, "div", 9);
86914
+ i0.ɵɵnamespaceSVG();
86915
+ i0.ɵɵelementStart(1, "svg", 18);
86916
+ i0.ɵɵelement(2, "path", 32);
86917
+ i0.ɵɵelementEnd();
86918
+ i0.ɵɵtext(3);
86919
+ i0.ɵɵelementEnd();
86920
+ } if (rf & 2) {
86921
+ const ctx_r0 = i0.ɵɵnextContext();
86922
+ i0.ɵɵproperty("ngClass", ctx_r0.savingsTextClasses());
86923
+ i0.ɵɵadvance(3);
86924
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsAmount(), " ");
86925
+ } }
86926
+ function PlanCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
86927
+ i0.ɵɵelement(0, "div", 12);
86885
86928
  } if (rf & 2) {
86886
86929
  const ctx_r0 = i0.ɵɵnextContext();
86887
86930
  i0.ɵɵproperty("ngClass", ctx_r0.radioInnerClasses());
@@ -86954,22 +86997,35 @@ class PlanCardComponent {
86954
86997
  aiUsageTooltipContent() {
86955
86998
  return {
86956
86999
  title: 'How it works:',
86957
- markdown: `Your monthly subscription fee covers access to core features.
86958
-
86959
- AI usage is tracked throughout the month.
86960
-
87000
+ markdown: `Your monthly subscription fee covers access to core features.
87001
+
87002
+ AI usage is tracked throughout the month.
87003
+
86961
87004
  At the end of each month, your total AI usage is calculated and automatically billed as a separate line item on your invoice.`
86962
87005
  };
86963
87006
  }
86964
87007
  cardContainerClasses() {
86965
87008
  const isSelected = this.isSelected();
87009
+ const isBestValue = this.showBestValueBadge();
86966
87010
  if (this.viewMode() === ViewModeEnum.DARK) {
87011
+ if (isBestValue && isSelected) {
87012
+ return 'bg-slate-800/60 border-purple-500 shadow-2xl shadow-purple-500/30';
87013
+ }
87014
+ if (isBestValue) {
87015
+ return 'bg-slate-800/50 border-amber-500/70 hover:border-amber-400 hover:shadow-2xl hover:shadow-amber-500/40';
87016
+ }
86967
87017
  if (isSelected) {
86968
87018
  return 'bg-slate-800/60 border-blue-500 shadow-2xl shadow-blue-500/20';
86969
87019
  }
86970
87020
  return 'bg-slate-800/40 border-slate-700/50 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10';
86971
87021
  }
86972
87022
  else {
87023
+ if (isBestValue && isSelected) {
87024
+ return 'bg-white border-purple-500 shadow-2xl shadow-purple-500/30';
87025
+ }
87026
+ if (isBestValue) {
87027
+ return 'bg-white border-amber-500/70 hover:border-amber-500 hover:shadow-2xl hover:shadow-amber-500/40';
87028
+ }
86973
87029
  if (isSelected) {
86974
87030
  return 'bg-white border-blue-500 shadow-2xl shadow-blue-500/20';
86975
87031
  }
@@ -86977,9 +87033,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
86977
87033
  }
86978
87034
  }
86979
87035
  badgeClasses() {
86980
- return this.viewMode() === ViewModeEnum.DARK
86981
- ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white'
86982
- : 'bg-gradient-to-r from-purple-600 to-pink-600 text-white';
87036
+ return 'text-white';
86983
87037
  }
86984
87038
  planTitleClasses() {
86985
87039
  return this.viewMode() === ViewModeEnum.DARK
@@ -87064,65 +87118,119 @@ At the end of each month, your total AI usage is calculated and automatically bi
87064
87118
  ? 'text-slate-400'
87065
87119
  : 'text-slate-600';
87066
87120
  }
87121
+ savingsBadgeClasses() {
87122
+ return this.viewMode() === ViewModeEnum.DARK
87123
+ ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white'
87124
+ : 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white';
87125
+ }
87126
+ recommendedTextClasses() {
87127
+ return this.viewMode() === ViewModeEnum.DARK
87128
+ ? 'text-amber-400'
87129
+ : 'text-amber-600';
87130
+ }
87131
+ savingsTextClasses() {
87132
+ return this.viewMode() === ViewModeEnum.DARK
87133
+ ? 'text-emerald-400'
87134
+ : 'text-emerald-600';
87135
+ }
87136
+ getSavingsPercentage() {
87137
+ if (!this.showBestValueBadge())
87138
+ return null;
87139
+ const info = this.planInfo();
87140
+ if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
87141
+ const annualPrice = info.planItemPrice.price || 0;
87142
+ const monthlyEquivalent = (annualPrice / 12) * 12;
87143
+ const monthlyPrice = info.planItemPrice.price || annualPrice;
87144
+ if (monthlyPrice > 0) {
87145
+ const savings = ((monthlyEquivalent - annualPrice) / monthlyEquivalent) * 100;
87146
+ if (savings > 0) {
87147
+ return `Save ${Math.round(savings)}%`;
87148
+ }
87149
+ }
87150
+ }
87151
+ return null;
87152
+ }
87153
+ getSavingsAmount() {
87154
+ if (!this.showBestValueBadge())
87155
+ return null;
87156
+ const info = this.planInfo();
87157
+ if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
87158
+ const annualPrice = info.planItemPrice.price || 0;
87159
+ const monthlyPrice = annualPrice / 12;
87160
+ const monthlyPlanPrice = monthlyPrice * 1.2;
87161
+ const totalMonthlyOver12 = monthlyPlanPrice * 12;
87162
+ const savings = totalMonthlyOver12 - annualPrice;
87163
+ if (savings > 0) {
87164
+ const symbol = this.getCurrencySymbol();
87165
+ const savingsFormatted = Math.floor(savings).toLocaleString();
87166
+ return `${symbol}${savingsFormatted} savings vs. monthly billing`;
87167
+ }
87168
+ }
87169
+ return null;
87170
+ }
87067
87171
  static { this.ɵfac = function PlanCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanCardComponent)(); }; }
87068
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { planSelected: "planSelected" }, decls: 43, vars: 29, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-3", "left-1/2", "transform", "-translate-x-1/2", "px-4", "py-1", "rounded-full", "text-xs", "font-bold", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], ["tooltipType", "markdown", "tooltipPosition", "right", 1, "w-4", "h-4", "rounded-full", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"], [1, "text-sm", "font-semibold", "text-right", "max-w-[60%]", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass", "innerHTML"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
87172
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { planSelected: "planSelected" }, decls: 45, vars: 35, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-5", "left-1/2", "flex", "flex-col", "items-center", "gap-2", "z-10"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "text-sm", "font-bold", "mt-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], ["tooltipType", "markdown", "tooltipPosition", "right", 1, "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"], [1, "text-sm", "font-semibold", "text-right", "max-w-[60%]", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass", "innerHTML"], [1, "px-6", "py-2", "rounded-full", "text-base", "font-extrabold", "shadow-2xl", 3, "ngClass"], [1, "drop-shadow-lg"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass", "savings-badge", "savings-badge-selected"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z", "clip-rule", "evenodd"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
87069
87173
  i0.ɵɵelementStart(0, "div", 0);
87070
87174
  i0.ɵɵlistener("click", function PlanCardComponent_Template_div_click_0_listener() { return ctx.handleCardClick(); });
87071
- i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 2, 1, "div", 1);
87175
+ i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 5, 6, "div", 1);
87072
87176
  i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "h3", 4);
87073
87177
  i0.ɵɵtext(5);
87074
87178
  i0.ɵɵelementEnd();
87075
- i0.ɵɵelementStart(6, "div", 5)(7, "span", 6);
87076
- i0.ɵɵtext(8);
87179
+ i0.ɵɵconditionalCreate(6, PlanCardComponent_Conditional_6_Template, 4, 1, "div", 5);
87180
+ i0.ɵɵelementStart(7, "div", 6)(8, "span", 7);
87181
+ i0.ɵɵtext(9);
87077
87182
  i0.ɵɵelementEnd();
87078
- i0.ɵɵelementStart(9, "span", 7);
87079
- i0.ɵɵtext(10);
87080
- i0.ɵɵelementEnd()()();
87081
- i0.ɵɵelementStart(11, "div", 8)(12, "div", 9);
87082
- i0.ɵɵconditionalCreate(13, PlanCardComponent_Conditional_13_Template, 1, 1, "div", 10);
87183
+ i0.ɵɵelementStart(10, "span", 8);
87184
+ i0.ɵɵtext(11);
87185
+ i0.ɵɵelementEnd()();
87186
+ i0.ɵɵconditionalCreate(12, PlanCardComponent_Conditional_12_Template, 4, 2, "div", 9);
87187
+ i0.ɵɵelementEnd();
87188
+ i0.ɵɵelementStart(13, "div", 10)(14, "div", 11);
87189
+ i0.ɵɵconditionalCreate(15, PlanCardComponent_Conditional_15_Template, 1, 1, "div", 12);
87083
87190
  i0.ɵɵelementEnd()()();
87084
- i0.ɵɵelementStart(14, "div", 11)(15, "div", 12)(16, "div", 13)(17, "span", 14);
87085
- i0.ɵɵtext(18, "AI usage");
87191
+ i0.ɵɵelementStart(16, "div", 13)(17, "div", 14)(18, "div", 15)(19, "span", 16);
87192
+ i0.ɵɵtext(20, "AI usage");
87086
87193
  i0.ɵɵelementEnd();
87087
- i0.ɵɵelementStart(19, "button", 15);
87194
+ i0.ɵɵelementStart(21, "button", 17);
87088
87195
  i0.ɵɵnamespaceSVG();
87089
- i0.ɵɵelementStart(20, "svg", 16);
87090
- i0.ɵɵelement(21, "path", 17);
87196
+ i0.ɵɵelementStart(22, "svg", 18);
87197
+ i0.ɵɵelement(23, "path", 19);
87091
87198
  i0.ɵɵelementEnd()()();
87092
87199
  i0.ɵɵnamespaceHTML();
87093
- i0.ɵɵelementStart(22, "span", 18);
87094
- i0.ɵɵtext(23, " Charged monthly based on your actual usage\u2014no per-token counting, just straightforward monthly billing. ");
87200
+ i0.ɵɵelementStart(24, "span", 20);
87201
+ i0.ɵɵtext(25, " Charged monthly based on your actual usage\u2014no per-token counting, just straightforward monthly billing. ");
87095
87202
  i0.ɵɵelementEnd()();
87096
- i0.ɵɵelementStart(24, "div", 12)(25, "span", 14);
87097
- i0.ɵɵtext(26, "Unlimited recommendations");
87203
+ i0.ɵɵelementStart(26, "div", 14)(27, "span", 16);
87204
+ i0.ɵɵtext(28, "Unlimited recommendations");
87098
87205
  i0.ɵɵelementEnd();
87099
87206
  i0.ɵɵnamespaceSVG();
87100
- i0.ɵɵelementStart(27, "svg", 19);
87101
- i0.ɵɵelement(28, "path", 20);
87207
+ i0.ɵɵelementStart(29, "svg", 21);
87208
+ i0.ɵɵelement(30, "path", 22);
87102
87209
  i0.ɵɵelementEnd()();
87103
87210
  i0.ɵɵnamespaceHTML();
87104
- i0.ɵɵelementStart(29, "div", 12)(30, "span", 14);
87105
- i0.ɵɵtext(31, "Unlimited seats");
87211
+ i0.ɵɵelementStart(31, "div", 14)(32, "span", 16);
87212
+ i0.ɵɵtext(33, "Unlimited seats");
87106
87213
  i0.ɵɵelementEnd();
87107
87214
  i0.ɵɵnamespaceSVG();
87108
- i0.ɵɵelementStart(32, "svg", 19);
87109
- i0.ɵɵelement(33, "path", 20);
87215
+ i0.ɵɵelementStart(34, "svg", 21);
87216
+ i0.ɵɵelement(35, "path", 22);
87110
87217
  i0.ɵɵelementEnd()();
87111
87218
  i0.ɵɵnamespaceHTML();
87112
- i0.ɵɵelementStart(34, "div", 21)(35, "span", 14);
87113
- i0.ɵɵtext(36, "Google Analytics integration");
87219
+ i0.ɵɵelementStart(36, "div", 23)(37, "span", 16);
87220
+ i0.ɵɵtext(38, "Google Analytics integration");
87114
87221
  i0.ɵɵelementEnd();
87115
87222
  i0.ɵɵnamespaceSVG();
87116
- i0.ɵɵelementStart(37, "svg", 19);
87117
- i0.ɵɵelement(38, "path", 20);
87223
+ i0.ɵɵelementStart(39, "svg", 21);
87224
+ i0.ɵɵelement(40, "path", 22);
87118
87225
  i0.ɵɵelementEnd()();
87119
87226
  i0.ɵɵnamespaceHTML();
87120
- i0.ɵɵelementStart(39, "div", 22)(40, "h4", 23);
87121
- i0.ɵɵtext(41, " Contract terms ");
87227
+ i0.ɵɵelementStart(41, "div", 24)(42, "h4", 25);
87228
+ i0.ɵɵtext(43, " Contract terms ");
87122
87229
  i0.ɵɵelementEnd();
87123
- i0.ɵɵelement(42, "p", 24);
87230
+ i0.ɵɵelement(44, "p", 26);
87124
87231
  i0.ɵɵelementEnd()()();
87125
87232
  } if (rf & 2) {
87233
+ i0.ɵɵclassProp("best-value-card", ctx.showBestValueBadge() && !ctx.isSelected())("best-value-card-selected", ctx.showBestValueBadge() && ctx.isSelected());
87126
87234
  i0.ɵɵproperty("ngClass", ctx.cardContainerClasses());
87127
87235
  i0.ɵɵadvance();
87128
87236
  i0.ɵɵconditional(ctx.showBestValueBadge() ? 1 : -1);
@@ -87130,6 +87238,8 @@ At the end of each month, your total AI usage is calculated and automatically bi
87130
87238
  i0.ɵɵproperty("ngClass", ctx.planTitleClasses());
87131
87239
  i0.ɵɵadvance();
87132
87240
  i0.ɵɵtextInterpolate1(" ", ctx.getPlanTitle(), " ");
87241
+ i0.ɵɵadvance();
87242
+ i0.ɵɵconditional(ctx.showBestValueBadge() ? 6 : -1);
87133
87243
  i0.ɵɵadvance(2);
87134
87244
  i0.ɵɵproperty("ngClass", ctx.priceClasses());
87135
87245
  i0.ɵɵadvance();
@@ -87138,10 +87248,12 @@ At the end of each month, your total AI usage is calculated and automatically bi
87138
87248
  i0.ɵɵproperty("ngClass", ctx.pricePeriodClasses());
87139
87249
  i0.ɵɵadvance();
87140
87250
  i0.ɵɵtextInterpolate1(" ", ctx.getPricePeriod(), " ");
87251
+ i0.ɵɵadvance();
87252
+ i0.ɵɵconditional(ctx.showBestValueBadge() && ctx.getSavingsAmount() ? 12 : -1);
87141
87253
  i0.ɵɵadvance(2);
87142
87254
  i0.ɵɵproperty("ngClass", ctx.radioClasses());
87143
87255
  i0.ɵɵadvance();
87144
- i0.ɵɵconditional(ctx.isSelected() ? 13 : -1);
87256
+ i0.ɵɵconditional(ctx.isSelected() ? 15 : -1);
87145
87257
  i0.ɵɵadvance();
87146
87258
  i0.ɵɵproperty("ngClass", ctx.sectionClasses());
87147
87259
  i0.ɵɵadvance();
@@ -87176,103 +87288,128 @@ At the end of each month, your total AI usage is calculated and automatically bi
87176
87288
  i0.ɵɵproperty("ngClass", ctx.contractTermsLabelClasses());
87177
87289
  i0.ɵɵadvance(2);
87178
87290
  i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses())("innerHTML", ctx.getContractTerms(), i0.ɵɵsanitizeHtml);
87179
- } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
87291
+ } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes _ngcontent-%COMP%_border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 4s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:_ngcontent-%COMP%_pulse-glow 4s ease-in-out infinite,_ngcontent-%COMP%_shimmer 6s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 4s ease-in-out infinite,_ngcontent-%COMP%_shimmer 6s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed 50%,#a855f7 75% 100%)}.best-value-badge[_ngcontent-%COMP%]:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:_ngcontent-%COMP%_shimmer 4s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 4s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow-selected 4s ease-in-out infinite}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 5s ease-in-out infinite}.savings-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 5s ease-in-out infinite}"], changeDetection: 0 }); }
87180
87292
  }
87181
87293
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanCardComponent, [{
87182
87294
  type: Component,
87183
- args: [{
87184
- selector: 'symphiq-plan-card',
87185
- standalone: true,
87186
- imports: [CommonModule, TooltipDirective],
87187
- changeDetection: ChangeDetectionStrategy.OnPush,
87188
- template: `
87189
- <div
87190
- (click)="handleCardClick()"
87191
- [ngClass]="cardContainerClasses()"
87192
- class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
87193
-
87194
- @if (showBestValueBadge()) {
87195
- <div [ngClass]="badgeClasses()" class="absolute -top-3 left-1/2 transform -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold">
87196
- Best value
87197
- </div>
87198
- }
87199
-
87200
- <div class="flex items-start justify-between mb-6">
87201
- <div class="flex-1">
87202
- <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
87203
- {{ getPlanTitle() }}
87204
- </h3>
87205
- <div class="flex items-baseline gap-2">
87206
- <span [ngClass]="priceClasses()" class="text-4xl font-bold">
87207
- {{ formatPrice() }}
87208
- </span>
87209
- <span [ngClass]="pricePeriodClasses()" class="text-base">
87210
- {{ getPricePeriod() }}
87211
- </span>
87212
- </div>
87213
- </div>
87214
- <div class="flex-shrink-0 ml-4">
87215
- <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
87216
- @if (isSelected()) {
87217
- <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
87218
- }
87219
- </div>
87220
- </div>
87221
- </div>
87222
-
87223
- <div [ngClass]="sectionClasses()" class="space-y-4">
87224
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87225
- <div class="flex items-center gap-2">
87226
- <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
87227
- <button
87228
- [libSymphiqTooltip]="aiUsageTooltipContent()"
87229
- tooltipType="markdown"
87230
- tooltipPosition="right"
87231
- [ngClass]="tooltipButtonClasses()"
87232
- class="w-4 h-4 rounded-full flex items-center justify-center">
87233
- <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
87234
- <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
87235
- </svg>
87236
- </button>
87237
- </div>
87238
- <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
87239
- Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
87240
- </span>
87241
- </div>
87242
-
87243
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87244
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
87245
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87246
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87247
- </svg>
87248
- </div>
87249
-
87250
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87251
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
87252
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87253
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87254
- </svg>
87255
- </div>
87256
-
87257
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
87258
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
87259
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87260
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87261
- </svg>
87262
- </div>
87263
-
87264
- <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
87265
- <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
87266
- Contract terms
87267
- </h4>
87268
- <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
87269
- </div>
87270
- </div>
87271
- </div>
87272
- `
87273
- }]
87295
+ args: [{ selector: 'symphiq-plan-card', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
87296
+ <div
87297
+ (click)="handleCardClick()"
87298
+ [ngClass]="cardContainerClasses()"
87299
+ [class.best-value-card]="showBestValueBadge() && !isSelected()"
87300
+ [class.best-value-card-selected]="showBestValueBadge() && isSelected()"
87301
+ class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
87302
+
87303
+ @if (showBestValueBadge()) {
87304
+ <div class="absolute -top-5 left-1/2 flex flex-col items-center gap-2 z-10">
87305
+ <div [ngClass]="badgeClasses()"
87306
+ [class.best-value-badge]="!isSelected()"
87307
+ [class.best-value-badge-selected]="isSelected()"
87308
+ class="px-6 py-2 rounded-full text-base font-extrabold shadow-2xl">
87309
+ <span class="drop-shadow-lg">Best Value</span>
87310
+ </div>
87311
+ @if (getSavingsPercentage()) {
87312
+ <div [ngClass]="savingsBadgeClasses()"
87313
+ [class.savings-badge]="!isSelected()"
87314
+ [class.savings-badge-selected]="isSelected()"
87315
+ class="px-3 py-1 rounded-full text-xs font-bold shadow-lg">
87316
+ {{ getSavingsPercentage() }}
87317
+ </div>
87318
+ }
87319
+ </div>
87320
+ }
87321
+
87322
+ <div class="flex items-start justify-between mb-6">
87323
+ <div class="flex-1">
87324
+ <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
87325
+ {{ getPlanTitle() }}
87326
+ </h3>
87327
+ @if (showBestValueBadge()) {
87328
+ <div [ngClass]="recommendedTextClasses()" class="text-sm font-semibold mb-2 flex items-center gap-1">
87329
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87330
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
87331
+ </svg>
87332
+ Most Popular Choice
87333
+ </div>
87334
+ }
87335
+ <div class="flex items-baseline gap-2">
87336
+ <span [ngClass]="priceClasses()" class="text-4xl font-bold">
87337
+ {{ formatPrice() }}
87338
+ </span>
87339
+ <span [ngClass]="pricePeriodClasses()" class="text-base">
87340
+ {{ getPricePeriod() }}
87341
+ </span>
87342
+ </div>
87343
+ @if (showBestValueBadge() && getSavingsAmount()) {
87344
+ <div [ngClass]="savingsTextClasses()" class="text-sm font-bold mt-2 flex items-center gap-1">
87345
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87346
+ <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
87347
+ </svg>
87348
+ {{ getSavingsAmount() }}
87349
+ </div>
87350
+ }
87351
+ </div>
87352
+ <div class="flex-shrink-0 ml-4">
87353
+ <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
87354
+ @if (isSelected()) {
87355
+ <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
87356
+ }
87357
+ </div>
87358
+ </div>
87359
+ </div>
87360
+
87361
+ <div [ngClass]="sectionClasses()" class="space-y-4">
87362
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87363
+ <div class="flex items-center gap-2">
87364
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
87365
+ <button
87366
+ [libSymphiqTooltip]="aiUsageTooltipContent()"
87367
+ tooltipType="markdown"
87368
+ tooltipPosition="right"
87369
+ [ngClass]="tooltipButtonClasses()"
87370
+ class="w-5 h-5 rounded-full flex items-center justify-center">
87371
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87372
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
87373
+ </svg>
87374
+ </button>
87375
+ </div>
87376
+ <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
87377
+ Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
87378
+ </span>
87379
+ </div>
87380
+
87381
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87382
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
87383
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87384
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87385
+ </svg>
87386
+ </div>
87387
+
87388
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87389
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
87390
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87391
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87392
+ </svg>
87393
+ </div>
87394
+
87395
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
87396
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
87397
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87398
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87399
+ </svg>
87400
+ </div>
87401
+
87402
+ <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
87403
+ <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
87404
+ Contract terms
87405
+ </h4>
87406
+ <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
87407
+ </div>
87408
+ </div>
87409
+ </div>
87410
+ `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge{animation:pulse-glow 4s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:pulse-glow 4s ease-in-out infinite,shimmer 6s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected{animation:pulse-glow-selected 4s ease-in-out infinite,shimmer 6s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed 50%,#a855f7 75% 100%)}.best-value-badge:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 4s infinite}.best-value-card{animation:border-glow 4s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected{animation:border-glow-selected 4s ease-in-out infinite}.best-value-card:hover{transform:scale(1.02)}.savings-badge{animation:pulse-glow 5s ease-in-out infinite}.savings-badge-selected{animation:pulse-glow-selected 5s ease-in-out infinite}\n"] }]
87274
87411
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
87275
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 97 }); })();
87412
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 265 }); })();
87276
87413
 
87277
87414
  const _forTrack0$1 = ($index, $item) => $item.planItemPrice.id;
87278
87415
  function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
@@ -87470,81 +87607,81 @@ class PlanSelectionContainerComponent {
87470
87607
  standalone: true,
87471
87608
  imports: [CommonModule, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent],
87472
87609
  changeDetection: ChangeDetectionStrategy.OnPush,
87473
- template: `
87474
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
87475
- <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
87476
- <div class="flex items-center gap-3">
87477
- <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
87478
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87479
- <path 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"></path>
87480
- </svg>
87481
- </div>
87482
- <div>
87483
- <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
87484
- Choose Your Plan
87485
- </h2>
87486
- <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
87487
- Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
87488
- <button
87489
- (click)="editCurrency.emit()"
87490
- [ngClass]="editButtonClasses()"
87491
- class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
87492
- >
87493
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87494
- <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>
87495
- </svg>
87496
- Edit
87497
- </button>
87498
- </p>
87499
- </div>
87500
- </div>
87501
- </div>
87502
-
87503
- <div [ngClass]="contentClasses()" class="p-8">
87504
- <symphiq-billing-period-toggle
87505
- [viewMode]="viewMode()"
87506
- [selectedPeriodUnit]="selectedPeriodUnit()"
87507
- [isLoading]="isLoading()"
87508
- (periodUnitChanged)="handlePeriodChange($event)"
87509
- />
87510
-
87511
- @if (isLoading()) {
87512
- <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
87513
- <symphiq-indeterminate-spinner
87514
- [viewMode]="viewMode()"
87515
- [size]="'large'"
87516
- />
87517
- <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
87518
- Loading your plan options...
87519
- </p>
87520
- </div>
87521
- } @else if (planCardInfos() && planCardInfos()!.length > 0) {
87522
- <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
87523
- @for (plan of planCardInfos(); track plan.planItemPrice.id) {
87524
- <symphiq-plan-card
87525
- [viewMode]="viewMode()"
87526
- [planInfo]="plan"
87527
- [isSelected]="isSelectedPlan(plan)"
87528
- [selectedPeriodUnit]="selectedPeriodUnit()"
87529
- (planSelected)="handlePlanSelection($event)"
87530
- />
87531
- }
87532
- </div>
87533
- } @else {
87534
- <div [ngClass]="emptyStateClasses()" class="text-center py-16">
87535
- <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87536
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
87537
- </svg>
87538
- <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
87539
- No plans available
87540
- </p>
87541
- <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
87542
- Please contact support if this issue persists
87543
- </p>
87544
- </div>
87545
- }
87546
- </div>
87547
- </div>
87610
+ template: `
87611
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
87612
+ <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
87613
+ <div class="flex items-center gap-3">
87614
+ <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
87615
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87616
+ <path 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"></path>
87617
+ </svg>
87618
+ </div>
87619
+ <div>
87620
+ <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
87621
+ Choose Your Plan
87622
+ </h2>
87623
+ <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
87624
+ Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
87625
+ <button
87626
+ (click)="editCurrency.emit()"
87627
+ [ngClass]="editButtonClasses()"
87628
+ class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
87629
+ >
87630
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87631
+ <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>
87632
+ </svg>
87633
+ Edit
87634
+ </button>
87635
+ </p>
87636
+ </div>
87637
+ </div>
87638
+ </div>
87639
+
87640
+ <div [ngClass]="contentClasses()" class="p-8">
87641
+ <symphiq-billing-period-toggle
87642
+ [viewMode]="viewMode()"
87643
+ [selectedPeriodUnit]="selectedPeriodUnit()"
87644
+ [isLoading]="isLoading()"
87645
+ (periodUnitChanged)="handlePeriodChange($event)"
87646
+ />
87647
+
87648
+ @if (isLoading()) {
87649
+ <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
87650
+ <symphiq-indeterminate-spinner
87651
+ [viewMode]="viewMode()"
87652
+ [size]="'large'"
87653
+ />
87654
+ <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
87655
+ Loading your plan options...
87656
+ </p>
87657
+ </div>
87658
+ } @else if (planCardInfos() && planCardInfos()!.length > 0) {
87659
+ <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
87660
+ @for (plan of planCardInfos(); track plan.planItemPrice.id) {
87661
+ <symphiq-plan-card
87662
+ [viewMode]="viewMode()"
87663
+ [planInfo]="plan"
87664
+ [isSelected]="isSelectedPlan(plan)"
87665
+ [selectedPeriodUnit]="selectedPeriodUnit()"
87666
+ (planSelected)="handlePlanSelection($event)"
87667
+ />
87668
+ }
87669
+ </div>
87670
+ } @else {
87671
+ <div [ngClass]="emptyStateClasses()" class="text-center py-16">
87672
+ <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87673
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
87674
+ </svg>
87675
+ <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
87676
+ No plans available
87677
+ </p>
87678
+ <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
87679
+ Please contact support if this issue persists
87680
+ </p>
87681
+ </div>
87682
+ }
87683
+ </div>
87684
+ </div>
87548
87685
  `
87549
87686
  }]
87550
87687
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }] }); })();
@@ -89809,611 +89946,611 @@ class SymphiqProfileAnalysisDashboardComponent {
89809
89946
  standalone: true,
89810
89947
  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],
89811
89948
  changeDetection: ChangeDetectionStrategy.OnPush,
89812
- template: `
89813
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89814
- <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>
89815
-
89816
- <!-- Scroll Progress Bar -->
89817
- <div
89818
- [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'">
89819
- <div
89820
- [style.width.%]="scrollProgress()"
89821
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89822
- class="h-full transition-all duration-200 ease-out">
89823
- </div>
89824
- </div>
89825
-
89826
- <div class="relative z-[51]">
89827
- <!-- Dashboard Header -->
89828
- <symphiq-dashboard-header
89829
- [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89830
- [subtitle]="getAnalysisSubtitle()"
89831
- [currentSection]="getAnalysisSubtitle()"
89832
- [viewMode]="viewMode()"
89833
- [viewModeLabel]="displayModeLabel()"
89834
- [isLoading]="isLoading()"
89835
- [requestedByUser]="requestedByUser()"
89836
- [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89837
- (searchClick)="openSearch()"
89838
- (viewModeClick)="openViewModeSwitcher()"
89839
- />
89840
-
89841
- <!-- Journey Progress Banner -->
89842
- @if (isSimplifiedView() && !isOnboarded()) {
89843
- <symphiq-journey-progress-indicator
89844
- [viewMode]="viewMode()"
89845
- [currentStepId]="currentStepId()"
89846
- [showNextStepAction]="shouldShowContinueButton()"
89847
- [forDemo]="forDemo()"
89848
- [maxAccessibleStepId]="maxAccessibleStepId()"
89849
- (nextStepClick)="nextStepClick.emit()"
89850
- (stepClick)="stepClick.emit($event)"
89851
- />
89852
- }
89853
-
89854
- <!-- Main Content -->
89855
- <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()">
89856
-
89857
- <!-- Welcome Banner (Simplified View Only) -->
89858
- @if (isSimplifiedView()) {
89859
- <div class="mb-12">
89860
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89861
- <symphiq-shop-welcome-banner
89862
- [viewMode]="viewMode()"
89863
- [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
89864
- [isOnboarded]="isOnboarded()"
89865
- />
89866
- }
89867
- @if (isFocusAreaAnalysis()) {
89868
- <symphiq-focus-area-welcome-banner
89869
- [viewMode]="viewMode()"
89870
- [focusAreaDomain]="focusAreaDomain()"
89871
- [focusAreaName]="focusAreaName()"
89872
- [focusAreaDetails]="focusAreaDetails()"
89873
- />
89874
- }
89875
- @if (isMetricAnalysis()) {
89876
- <symphiq-metric-welcome-banner
89877
- [viewMode]="viewMode()"
89878
- [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
89879
- [isOnboarded]="isOnboarded()"
89880
- />
89881
- }
89882
- </div>
89883
- }
89884
-
89885
- <!-- Simplified View Content -->
89886
- @if (isSimplifiedView()) {
89887
- <!-- Strategic Insights & Goals (or Subscription Flow) -->
89888
- <div class="mb-8">
89889
- @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
89890
- <symphiq-strategic-goals-tiled-grid
89891
- [goals]="strategicRoadmapGoals()"
89892
- [viewMode]="viewMode()"
89893
- (viewMoreClick)="openGoalModal($event)"
89894
- />
89895
- } @else {
89896
- <!-- Subscription Value Proposition -->
89897
- @if (!hasBillingCurrency() || isEditingCurrency()) {
89898
- @if (!hasBillingCurrency()) {
89899
- <div class="mb-8">
89900
- <symphiq-subscription-value-proposition-card
89901
- [viewMode]="viewMode()"
89902
- />
89903
- </div>
89904
- }
89905
-
89906
- <!-- Currency Selection -->
89907
- <symphiq-billing-currency-selector-card
89908
- [viewMode]="viewMode()"
89909
- [isLoading]="isCurrencySelectionLoading()"
89910
- [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
89911
- (currencySelected)="handleCurrencyChange($event)"
89912
- />
89913
- } @else if (showPlanSelection()) {
89914
- <!-- Plan Selection -->
89915
-
89916
- <div class="mb-32">
89917
- <symphiq-plan-selection-container
89918
- [viewMode]="viewMode()"
89919
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89920
- [planCardInfos]="planCardInfos()"
89921
- [isLoading]="isPlanLoading()"
89922
- [selectedPeriodUnit]="selectedPeriodUnit()"
89923
- (periodUnitChanged)="handlePeriodUnitChange($event)"
89924
- (planSelected)="handlePlanSelection($event)"
89925
- (editCurrency)="handleEditCurrencyClick()"
89926
- />
89927
- </div>
89928
- } @else {
89929
- <symphiq-plan-selection-placeholder-card
89930
- [viewMode]="viewMode()"
89931
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89932
- (editCurrency)="handleEditCurrencyClick()"
89933
- />
89934
- }
89935
- }
89936
- </div>
89937
-
89938
- <!-- Supporting Business Context -->
89939
- @if (nonStrategicSections().length > 0) {
89940
- <div>
89941
- <symphiq-collapsible-analysis-section-group
89942
- [sections]="nonStrategicSections()"
89943
- [viewMode]="viewMode()"
89944
- [executiveSummary]="executiveSummary()"
89945
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
89946
- [metricExecutiveSummary]="metricExecutiveSummary()"
89947
- [metricName]="metricName()"
89948
- [allGoals]="allGoals()"
89949
- [allMetrics]="allMetrics()"
89950
- [allCharts]="allCharts()"
89951
- [allInsights]="allInsights()"
89952
- [businessProfile]="profile()"
89953
- />
89954
- </div>
89955
- }
89956
- }
89957
-
89958
- <!-- Compact & Expanded View Content -->
89959
- @if (!isSimplifiedView()) {
89960
- <!-- SHOP Executive Summary -->
89961
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
89962
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
89963
- <!-- Summary Banner -->
89964
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
89965
- <div class="space-y-6">
89966
- <div class="flex items-start justify-between gap-4">
89967
- <div class="flex-1">
89968
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
89969
- Executive Summary
89970
- </h2>
89971
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
89972
- {{ summary.gradeRationale }}
89973
- </p>
89974
- </div>
89975
- @if (summary.overallGrade) {
89976
- <symphiq-grade-badge
89977
- [grade]="summary.overallGrade"
89978
- [gradeRationale]="summary.gradeRationale || ''"
89979
- [viewMode]="viewMode()"
89980
- />
89981
- }
89982
- </div>
89983
-
89984
- @if (summary.narrative) {
89985
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
89986
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
89987
- Analysis Narrative
89988
- </h3>
89989
- <div class="relative">
89990
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
89991
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
89992
- <symphiq-napkin-visual-placeholder
89993
- [visual]="summary.napkinVisual"
89994
- [viewMode]="viewMode()"
89995
- />
89996
- </div>
89997
- }
89998
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
89999
- {{ summary.narrative }}
90000
- </p>
90001
- <div class="clear-both"></div>
90002
- </div>
90003
- </div>
90004
- }
90005
-
90006
- <!-- Stats -->
90007
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90008
- <button
90009
- type="button"
90010
- (click)="onKeyStrengthsClick(summary)"
90011
- [ngClass]="getKeyStrengthsStatCardClasses()"
90012
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90013
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90014
- Key Strengths
90015
- </div>
90016
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90017
- {{ summary.keyStrengths?.length || 0 }}
90018
- </div>
90019
- <div class="flex items-center gap-1.5 text-xs font-medium">
90020
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90021
- <symphiq-icon
90022
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90023
- size="w-4 h-4"
90024
- [ngClass]="getKeyStrengthsButtonTextClasses()"
90025
- class="transition-transform group-hover:translate-x-1"
90026
- />
90027
- </div>
90028
- </button>
90029
- <button
90030
- type="button"
90031
- (click)="onCriticalGapsClick(summary)"
90032
- [ngClass]="getCriticalGapsStatCardClasses()"
90033
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90034
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90035
- Critical Gaps
90036
- </div>
90037
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90038
- {{ summary.criticalGaps?.length || 0 }}
90039
- </div>
90040
- <div class="flex items-center gap-1.5 text-xs font-medium">
90041
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90042
- <symphiq-icon
90043
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90044
- size="w-4 h-4"
90045
- [ngClass]="getCriticalGapsButtonTextClasses()"
90046
- class="transition-transform group-hover:translate-x-1"
90047
- />
90048
- </div>
90049
- </button>
90050
- <button
90051
- type="button"
90052
- (click)="scrollToQuickWins()"
90053
- [ngClass]="getQuickWinsStatCardClasses()"
90054
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90055
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90056
- Quick Wins
90057
- </div>
90058
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90059
- {{ summary.quickWins?.length || 0 }}
90060
- </div>
90061
- <div class="flex items-center gap-1.5 text-xs font-medium">
90062
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90063
- <symphiq-icon
90064
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90065
- size="w-4 h-4"
90066
- [ngClass]="getQuickWinsButtonTextClasses()"
90067
- class="transition-transform group-hover:translate-y-1 animate-bounce"
90068
- />
90069
- </div>
90070
- </button>
90071
- </div>
90072
- </div>
90073
- </div>
90074
-
90075
- <!-- Quick Wins -->
90076
- @if (summary.quickWins && summary.quickWins.length > 0) {
90077
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90078
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90079
- Quick Wins
90080
- </h3>
90081
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90082
- @for (win of summary.quickWins; track $index) {
90083
- <div [ngClass]="getQuickWinCardClasses()"
90084
- class="rounded-xl p-6 transition-all duration-300">
90085
- <div class="space-y-4">
90086
- <div class="flex items-start gap-3">
90087
- <span [ngClass]="getNumberBadgeClasses()"
90088
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90089
- {{ $index + 1 }}
90090
- </span>
90091
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90092
- {{ win.action }}
90093
- </p>
90094
- </div>
90095
-
90096
- <div class="flex flex-wrap gap-2">
90097
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
90098
- class="px-3 py-1 rounded-full text-xs font-semibold">
90099
- {{ formatLabel(win.effort) }} Effort
90100
- </span>
90101
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
90102
- class="px-3 py-1 rounded-full text-xs font-semibold">
90103
- {{ formatLabel(win.impact) }} Impact
90104
- </span>
90105
- </div>
90106
-
90107
- @if (win.estimatedTimeframe) {
90108
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90109
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90110
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90111
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90112
- </svg>
90113
- <span>{{ win.estimatedTimeframe }}</span>
90114
- </div>
90115
- }
90116
-
90117
- @if (win.relatedGoalId) {
90118
- <div class="space-y-2">
90119
- <h4 [ngClass]="getMetaTextClasses()"
90120
- class="text-xs font-semibold uppercase tracking-wider">
90121
- Related Goal
90122
- </h4>
90123
- <symphiq-related-goal-chips
90124
- [relatedGoalIds]="[win.relatedGoalId]"
90125
- [allGoals]="allGoals()"
90126
- [viewMode]="viewMode()"
90127
- />
90128
- </div>
90129
- }
90130
- </div>
90131
- </div>
90132
- }
90133
- </div>
90134
- </div>
90135
- }
90136
- </section>
90137
- }
90138
-
90139
- <!-- FOCUS_AREA Executive Summary -->
90140
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90141
- <symphiq-focus-area-executive-summary
90142
- [viewMode]="viewMode()"
90143
- [summary]="summary"
90144
- [allGoals]="allGoals()"
90145
- (topPrioritiesClick)="handleTopPrioritiesClick()"
90146
- (priorityDetailClick)="handlePriorityDetailClick($event)"
90147
- />
90148
- }
90149
-
90150
- <!-- METRIC Executive Summary -->
90151
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90152
- <symphiq-metric-executive-summary
90153
- [viewMode]="viewMode()"
90154
- [summary]="summary"
90155
- [metricName]="metricName()"
90156
- [allGoals]="allGoals()"
90157
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90158
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90159
- />
90160
- }
90161
-
90162
- <!-- Divider Before First Section -->
90163
- @if (sections(); as sectionList) {
90164
- @if (sectionList.length > 0 && sectionList[0].icon) {
90165
- <symphiq-section-divider
90166
- [viewMode]="viewMode()"
90167
- [sectionIcon]="sectionList[0].icon"
90168
- />
90169
- }
90170
- }
90171
-
90172
- <!-- Profile Analysis Sections -->
90173
- @if (sections(); as sectionList) {
90174
- <section class="space-y-8">
90175
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90176
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90177
- class="rounded-xl p-8 scroll-mt-24">
90178
- <!-- Icon and Title -->
90179
- <div class="flex items-start gap-3 mb-6">
90180
- @if (section.icon) {
90181
- <div [ngClass]="getSectionIconClasses()"
90182
- class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90183
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90184
- </div>
90185
- }
90186
- <div class="flex-1">
90187
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90188
- {{ section.title }}
90189
- </h3>
90190
- </div>
90191
- </div>
90192
-
90193
- <!-- Description and Visual Side-by-Side -->
90194
- @if (section.description || (section.visual && section.visual.enabled)) {
90195
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90196
- [class.lg:flex-row-reverse]="idx % 2 === 0">
90197
- @if (section.visual && section.visual.enabled) {
90198
- <div class="w-full lg:w-2/3">
90199
- <symphiq-napkin-visual-placeholder
90200
- [visual]="section.visual"
90201
- [viewMode]="viewMode()"
90202
- />
90203
- </div>
90204
- }
90205
- @if (section.description) {
90206
- <div class="w-full"
90207
- [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90208
- <p [ngClass]="getSectionDescriptionClasses()"
90209
- class="text-sm leading-relaxed whitespace-pre-line">
90210
- {{ section.description }}
90211
- </p>
90212
- </div>
90213
- }
90214
- </div>
90215
- }
90216
-
90217
- <!-- Section Content -->
90218
- <symphiq-profile-section-content
90219
- [section]="section"
90220
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90221
- [viewMode]="viewMode()"
90222
- [sectionIndex]="idx"
90223
- [allGoals]="allGoals()"
90224
- [allMetrics]="allMetrics()"
90225
- [allCharts]="allCharts()"
90226
- [allInsights]="allInsights()"
90227
- [businessProfile]="profile()"
90228
- />
90229
- </div>
90230
-
90231
- <!-- Section Divider (between sections) -->
90232
- @if (!last) {
90233
- <symphiq-section-divider
90234
- [viewMode]="viewMode()"
90235
- [sectionIcon]="sectionList[idx + 1].icon"
90236
- />
90237
- }
90238
- }
90239
- </section>
90240
- }
90241
- }
90242
-
90243
- </main>
90244
-
90245
- <!-- Table of Contents (Compact & Expanded Views) -->
90246
- @if (!isSimplifiedView() && sections()) {
90247
- <symphiq-floating-toc
90248
- [sections]="tocSections()"
90249
- [viewMode]="viewMode()"
90250
- [embedded]="embedded()"
90251
- [scrollElement]="scrollElement() ?? undefined"
90252
- />
90253
- }
90254
-
90255
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
90256
- @if (!isSimplifiedView() && sections()) {
90257
- <symphiq-section-navigation
90258
- [sections]="tocSections()"
90259
- [viewMode]="viewMode()"
90260
- [embedded]="embedded()"
90261
- [scrollElement]="scrollElement() ?? undefined"
90262
- />
90263
- }
90264
-
90265
- <!-- Search Modal -->
90266
- <symphiq-search-modal
90267
- [isOpen]="isSearchOpen()"
90268
- [isLightMode]="isLightMode()"
90269
- (close)="closeSearch()"
90270
- />
90271
-
90272
- <!-- View Mode Switcher Modal -->
90273
- <symphiq-view-mode-switcher-modal
90274
- [isOpen]="isViewModeSwitcherOpen()"
90275
- [currentMode]="currentDisplayMode()"
90276
- [viewMode]="viewMode()"
90277
- (close)="closeViewModeSwitcher()"
90278
- (modeSelected)="handleDisplayModeChange($event)"
90279
- />
90280
-
90281
- <!-- Profile Analysis Modal -->
90282
- <symphiq-profile-analysis-modal
90283
- [isLightMode]="isLightMode()"
90284
- [allMetrics]="allMetrics()"
90285
- [allInsights]="allInsights()"
90286
- [allBusinessInsights]="allBusinessInsights()"
90287
- [allCharts]="allCharts()"
90288
- >
90289
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90290
- <symphiq-goal-card
90291
- [goal]="data.goal"
90292
- [viewMode]="data.viewMode"
90293
- [isInModal]="true"
90294
- [allMetrics]="allMetrics()"
90295
- [allCharts]="allCharts()"
90296
- [allInsights]="allInsights()"
90297
- [currentModalState]="getCurrentModalState()"
90298
- [businessProfile]="profile()"
90299
- />
90300
- }
90301
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90302
- <symphiq-goal-objectives-modal-content
90303
- [goal]="data.goal"
90304
- [viewMode]="data.viewMode"
90305
- />
90306
- }
90307
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90308
- <symphiq-objective-strategies-modal-content
90309
- [objective]="data.objective"
90310
- [goalTitle]="data.goalTitle"
90311
- [viewMode]="data.viewMode"
90312
- />
90313
- }
90314
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90315
- <symphiq-strategy-recommendations-modal-content
90316
- [strategy]="data.strategy"
90317
- [objectiveTitle]="data.objectiveTitle"
90318
- [goalTitle]="data.goalTitle"
90319
- [viewMode]="data.viewMode"
90320
- [allMetrics]="allMetrics()"
90321
- [allCharts]="allCharts()"
90322
- [allInsights]="allInsights()"
90323
- [allBusinessInsights]="allBusinessInsights()"
90324
- [currentModalState]="getCurrentModalState()"
90325
- />
90326
- }
90327
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90328
- <symphiq-category-detail-modal-content
90329
- [category]="data.category"
90330
- [viewMode]="data.viewMode"
90331
- [scrollToSection]="data.scrollToSection"
90332
- />
90333
- }
90334
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90335
- <symphiq-strength-detail-modal-content
90336
- [strength]="data.strength"
90337
- [viewMode]="data.viewMode"
90338
- [allFunnelStrengths]="funnelStrengths()"
90339
- [currentModalState]="getCurrentModalState()"
90340
- />
90341
- }
90342
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90343
- <symphiq-gap-detail-modal-content
90344
- [gap]="data.gap"
90345
- [viewMode]="data.viewMode"
90346
- [allGoals]="allGoals()"
90347
- [allWeaknesses]="funnelWeaknesses()"
90348
- [currentModalState]="getCurrentModalState()"
90349
- />
90350
- }
90351
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90352
- <symphiq-opportunity-detail-modal-content
90353
- [opportunity]="data.opportunity"
90354
- [viewMode]="data.viewMode"
90355
- [allStrengths]="funnelStrengths()"
90356
- [currentModalState]="getCurrentModalState()"
90357
- />
90358
- }
90359
- </symphiq-profile-analysis-modal>
90360
-
90361
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90362
- <symphiq-funnel-analysis-modal
90363
- [isLightMode]="isLightMode()"
90364
- [viewMode]="viewMode()"
90365
- [allMetrics]="allMetrics()"
90366
- [allInsights]="allInsights()"
90367
- [allCharts]="allCharts()"
90368
- />
90369
-
90370
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
90371
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90372
-
90373
- <!-- Tooltip Container -->
90374
- <symphiq-tooltip-container/>
90375
-
90376
- <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90377
- @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90378
- <symphiq-sticky-subscription-continue-button
90379
- [viewMode]="viewMode()"
90380
- [isEnabled]="hasCurrencySelected()"
90381
- [isLoading]="isCurrencySelectionLoading()"
90382
- (continueClick)="handleStickyButtonClick()"
90383
- />
90384
- }
90385
-
90386
- <!-- Sticky Footer for Edit Currency Mode -->
90387
- @if (isEditingCurrency()) {
90388
- <div
90389
- [ngClass]="getEditCurrencyFooterClasses()"
90390
- class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
90391
- >
90392
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
90393
- <div class="flex items-center gap-4">
90394
- <button
90395
- (click)="handleCancelCurrencyEdit()"
90396
- [ngClass]="getEditCurrencyCancelButtonClasses()"
90397
- class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
90398
- >
90399
- Cancel
90400
- </button>
90401
- <button
90402
- (click)="handleContinueToPlans()"
90403
- [disabled]="!editingCurrencySelection()"
90404
- [ngClass]="getEditCurrencyContinueButtonClasses()"
90405
- class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
90406
- >
90407
- <span>Continue to Plans</span>
90408
- <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90409
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
90410
- </svg>
90411
- </button>
90412
- </div>
90413
- </div>
90414
- </div>
90415
- }
90416
- </div>
89949
+ template: `
89950
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89951
+ <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>
89952
+
89953
+ <!-- Scroll Progress Bar -->
89954
+ <div
89955
+ [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'">
89956
+ <div
89957
+ [style.width.%]="scrollProgress()"
89958
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89959
+ class="h-full transition-all duration-200 ease-out">
89960
+ </div>
89961
+ </div>
89962
+
89963
+ <div class="relative z-[51]">
89964
+ <!-- Dashboard Header -->
89965
+ <symphiq-dashboard-header
89966
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89967
+ [subtitle]="getAnalysisSubtitle()"
89968
+ [currentSection]="getAnalysisSubtitle()"
89969
+ [viewMode]="viewMode()"
89970
+ [viewModeLabel]="displayModeLabel()"
89971
+ [isLoading]="isLoading()"
89972
+ [requestedByUser]="requestedByUser()"
89973
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89974
+ (searchClick)="openSearch()"
89975
+ (viewModeClick)="openViewModeSwitcher()"
89976
+ />
89977
+
89978
+ <!-- Journey Progress Banner -->
89979
+ @if (isSimplifiedView() && !isOnboarded()) {
89980
+ <symphiq-journey-progress-indicator
89981
+ [viewMode]="viewMode()"
89982
+ [currentStepId]="currentStepId()"
89983
+ [showNextStepAction]="shouldShowContinueButton()"
89984
+ [forDemo]="forDemo()"
89985
+ [maxAccessibleStepId]="maxAccessibleStepId()"
89986
+ (nextStepClick)="nextStepClick.emit()"
89987
+ (stepClick)="stepClick.emit($event)"
89988
+ />
89989
+ }
89990
+
89991
+ <!-- Main Content -->
89992
+ <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()">
89993
+
89994
+ <!-- Welcome Banner (Simplified View Only) -->
89995
+ @if (isSimplifiedView()) {
89996
+ <div class="mb-12">
89997
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89998
+ <symphiq-shop-welcome-banner
89999
+ [viewMode]="viewMode()"
90000
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
90001
+ [isOnboarded]="isOnboarded()"
90002
+ />
90003
+ }
90004
+ @if (isFocusAreaAnalysis()) {
90005
+ <symphiq-focus-area-welcome-banner
90006
+ [viewMode]="viewMode()"
90007
+ [focusAreaDomain]="focusAreaDomain()"
90008
+ [focusAreaName]="focusAreaName()"
90009
+ [focusAreaDetails]="focusAreaDetails()"
90010
+ />
90011
+ }
90012
+ @if (isMetricAnalysis()) {
90013
+ <symphiq-metric-welcome-banner
90014
+ [viewMode]="viewMode()"
90015
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
90016
+ [isOnboarded]="isOnboarded()"
90017
+ />
90018
+ }
90019
+ </div>
90020
+ }
90021
+
90022
+ <!-- Simplified View Content -->
90023
+ @if (isSimplifiedView()) {
90024
+ <!-- Strategic Insights & Goals (or Subscription Flow) -->
90025
+ <div class="mb-8">
90026
+ @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
90027
+ <symphiq-strategic-goals-tiled-grid
90028
+ [goals]="strategicRoadmapGoals()"
90029
+ [viewMode]="viewMode()"
90030
+ (viewMoreClick)="openGoalModal($event)"
90031
+ />
90032
+ } @else {
90033
+ <!-- Subscription Value Proposition -->
90034
+ @if (!hasBillingCurrency() || isEditingCurrency()) {
90035
+ @if (!hasBillingCurrency()) {
90036
+ <div class="mb-8">
90037
+ <symphiq-subscription-value-proposition-card
90038
+ [viewMode]="viewMode()"
90039
+ />
90040
+ </div>
90041
+ }
90042
+
90043
+ <!-- Currency Selection -->
90044
+ <symphiq-billing-currency-selector-card
90045
+ [viewMode]="viewMode()"
90046
+ [isLoading]="isCurrencySelectionLoading()"
90047
+ [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
90048
+ (currencySelected)="handleCurrencyChange($event)"
90049
+ />
90050
+ } @else if (showPlanSelection()) {
90051
+ <!-- Plan Selection -->
90052
+
90053
+ <div class="mb-32">
90054
+ <symphiq-plan-selection-container
90055
+ [viewMode]="viewMode()"
90056
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90057
+ [planCardInfos]="planCardInfos()"
90058
+ [isLoading]="isPlanLoading()"
90059
+ [selectedPeriodUnit]="selectedPeriodUnit()"
90060
+ (periodUnitChanged)="handlePeriodUnitChange($event)"
90061
+ (planSelected)="handlePlanSelection($event)"
90062
+ (editCurrency)="handleEditCurrencyClick()"
90063
+ />
90064
+ </div>
90065
+ } @else {
90066
+ <symphiq-plan-selection-placeholder-card
90067
+ [viewMode]="viewMode()"
90068
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90069
+ (editCurrency)="handleEditCurrencyClick()"
90070
+ />
90071
+ }
90072
+ }
90073
+ </div>
90074
+
90075
+ <!-- Supporting Business Context -->
90076
+ @if (nonStrategicSections().length > 0) {
90077
+ <div>
90078
+ <symphiq-collapsible-analysis-section-group
90079
+ [sections]="nonStrategicSections()"
90080
+ [viewMode]="viewMode()"
90081
+ [executiveSummary]="executiveSummary()"
90082
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
90083
+ [metricExecutiveSummary]="metricExecutiveSummary()"
90084
+ [metricName]="metricName()"
90085
+ [allGoals]="allGoals()"
90086
+ [allMetrics]="allMetrics()"
90087
+ [allCharts]="allCharts()"
90088
+ [allInsights]="allInsights()"
90089
+ [businessProfile]="profile()"
90090
+ />
90091
+ </div>
90092
+ }
90093
+ }
90094
+
90095
+ <!-- Compact & Expanded View Content -->
90096
+ @if (!isSimplifiedView()) {
90097
+ <!-- SHOP Executive Summary -->
90098
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
90099
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
90100
+ <!-- Summary Banner -->
90101
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
90102
+ <div class="space-y-6">
90103
+ <div class="flex items-start justify-between gap-4">
90104
+ <div class="flex-1">
90105
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
90106
+ Executive Summary
90107
+ </h2>
90108
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
90109
+ {{ summary.gradeRationale }}
90110
+ </p>
90111
+ </div>
90112
+ @if (summary.overallGrade) {
90113
+ <symphiq-grade-badge
90114
+ [grade]="summary.overallGrade"
90115
+ [gradeRationale]="summary.gradeRationale || ''"
90116
+ [viewMode]="viewMode()"
90117
+ />
90118
+ }
90119
+ </div>
90120
+
90121
+ @if (summary.narrative) {
90122
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
90123
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
90124
+ Analysis Narrative
90125
+ </h3>
90126
+ <div class="relative">
90127
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
90128
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
90129
+ <symphiq-napkin-visual-placeholder
90130
+ [visual]="summary.napkinVisual"
90131
+ [viewMode]="viewMode()"
90132
+ />
90133
+ </div>
90134
+ }
90135
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
90136
+ {{ summary.narrative }}
90137
+ </p>
90138
+ <div class="clear-both"></div>
90139
+ </div>
90140
+ </div>
90141
+ }
90142
+
90143
+ <!-- Stats -->
90144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90145
+ <button
90146
+ type="button"
90147
+ (click)="onKeyStrengthsClick(summary)"
90148
+ [ngClass]="getKeyStrengthsStatCardClasses()"
90149
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90150
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90151
+ Key Strengths
90152
+ </div>
90153
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90154
+ {{ summary.keyStrengths?.length || 0 }}
90155
+ </div>
90156
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90157
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90158
+ <symphiq-icon
90159
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90160
+ size="w-4 h-4"
90161
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
90162
+ class="transition-transform group-hover:translate-x-1"
90163
+ />
90164
+ </div>
90165
+ </button>
90166
+ <button
90167
+ type="button"
90168
+ (click)="onCriticalGapsClick(summary)"
90169
+ [ngClass]="getCriticalGapsStatCardClasses()"
90170
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90171
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90172
+ Critical Gaps
90173
+ </div>
90174
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90175
+ {{ summary.criticalGaps?.length || 0 }}
90176
+ </div>
90177
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90178
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90179
+ <symphiq-icon
90180
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90181
+ size="w-4 h-4"
90182
+ [ngClass]="getCriticalGapsButtonTextClasses()"
90183
+ class="transition-transform group-hover:translate-x-1"
90184
+ />
90185
+ </div>
90186
+ </button>
90187
+ <button
90188
+ type="button"
90189
+ (click)="scrollToQuickWins()"
90190
+ [ngClass]="getQuickWinsStatCardClasses()"
90191
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90192
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90193
+ Quick Wins
90194
+ </div>
90195
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90196
+ {{ summary.quickWins?.length || 0 }}
90197
+ </div>
90198
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90199
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90200
+ <symphiq-icon
90201
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90202
+ size="w-4 h-4"
90203
+ [ngClass]="getQuickWinsButtonTextClasses()"
90204
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
90205
+ />
90206
+ </div>
90207
+ </button>
90208
+ </div>
90209
+ </div>
90210
+ </div>
90211
+
90212
+ <!-- Quick Wins -->
90213
+ @if (summary.quickWins && summary.quickWins.length > 0) {
90214
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90215
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90216
+ Quick Wins
90217
+ </h3>
90218
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90219
+ @for (win of summary.quickWins; track $index) {
90220
+ <div [ngClass]="getQuickWinCardClasses()"
90221
+ class="rounded-xl p-6 transition-all duration-300">
90222
+ <div class="space-y-4">
90223
+ <div class="flex items-start gap-3">
90224
+ <span [ngClass]="getNumberBadgeClasses()"
90225
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90226
+ {{ $index + 1 }}
90227
+ </span>
90228
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90229
+ {{ win.action }}
90230
+ </p>
90231
+ </div>
90232
+
90233
+ <div class="flex flex-wrap gap-2">
90234
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
90235
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90236
+ {{ formatLabel(win.effort) }} Effort
90237
+ </span>
90238
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
90239
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90240
+ {{ formatLabel(win.impact) }} Impact
90241
+ </span>
90242
+ </div>
90243
+
90244
+ @if (win.estimatedTimeframe) {
90245
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90246
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90247
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90248
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90249
+ </svg>
90250
+ <span>{{ win.estimatedTimeframe }}</span>
90251
+ </div>
90252
+ }
90253
+
90254
+ @if (win.relatedGoalId) {
90255
+ <div class="space-y-2">
90256
+ <h4 [ngClass]="getMetaTextClasses()"
90257
+ class="text-xs font-semibold uppercase tracking-wider">
90258
+ Related Goal
90259
+ </h4>
90260
+ <symphiq-related-goal-chips
90261
+ [relatedGoalIds]="[win.relatedGoalId]"
90262
+ [allGoals]="allGoals()"
90263
+ [viewMode]="viewMode()"
90264
+ />
90265
+ </div>
90266
+ }
90267
+ </div>
90268
+ </div>
90269
+ }
90270
+ </div>
90271
+ </div>
90272
+ }
90273
+ </section>
90274
+ }
90275
+
90276
+ <!-- FOCUS_AREA Executive Summary -->
90277
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90278
+ <symphiq-focus-area-executive-summary
90279
+ [viewMode]="viewMode()"
90280
+ [summary]="summary"
90281
+ [allGoals]="allGoals()"
90282
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
90283
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
90284
+ />
90285
+ }
90286
+
90287
+ <!-- METRIC Executive Summary -->
90288
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90289
+ <symphiq-metric-executive-summary
90290
+ [viewMode]="viewMode()"
90291
+ [summary]="summary"
90292
+ [metricName]="metricName()"
90293
+ [allGoals]="allGoals()"
90294
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90295
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90296
+ />
90297
+ }
90298
+
90299
+ <!-- Divider Before First Section -->
90300
+ @if (sections(); as sectionList) {
90301
+ @if (sectionList.length > 0 && sectionList[0].icon) {
90302
+ <symphiq-section-divider
90303
+ [viewMode]="viewMode()"
90304
+ [sectionIcon]="sectionList[0].icon"
90305
+ />
90306
+ }
90307
+ }
90308
+
90309
+ <!-- Profile Analysis Sections -->
90310
+ @if (sections(); as sectionList) {
90311
+ <section class="space-y-8">
90312
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90313
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90314
+ class="rounded-xl p-8 scroll-mt-24">
90315
+ <!-- Icon and Title -->
90316
+ <div class="flex items-start gap-3 mb-6">
90317
+ @if (section.icon) {
90318
+ <div [ngClass]="getSectionIconClasses()"
90319
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90320
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90321
+ </div>
90322
+ }
90323
+ <div class="flex-1">
90324
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90325
+ {{ section.title }}
90326
+ </h3>
90327
+ </div>
90328
+ </div>
90329
+
90330
+ <!-- Description and Visual Side-by-Side -->
90331
+ @if (section.description || (section.visual && section.visual.enabled)) {
90332
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90333
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
90334
+ @if (section.visual && section.visual.enabled) {
90335
+ <div class="w-full lg:w-2/3">
90336
+ <symphiq-napkin-visual-placeholder
90337
+ [visual]="section.visual"
90338
+ [viewMode]="viewMode()"
90339
+ />
90340
+ </div>
90341
+ }
90342
+ @if (section.description) {
90343
+ <div class="w-full"
90344
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90345
+ <p [ngClass]="getSectionDescriptionClasses()"
90346
+ class="text-sm leading-relaxed whitespace-pre-line">
90347
+ {{ section.description }}
90348
+ </p>
90349
+ </div>
90350
+ }
90351
+ </div>
90352
+ }
90353
+
90354
+ <!-- Section Content -->
90355
+ <symphiq-profile-section-content
90356
+ [section]="section"
90357
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90358
+ [viewMode]="viewMode()"
90359
+ [sectionIndex]="idx"
90360
+ [allGoals]="allGoals()"
90361
+ [allMetrics]="allMetrics()"
90362
+ [allCharts]="allCharts()"
90363
+ [allInsights]="allInsights()"
90364
+ [businessProfile]="profile()"
90365
+ />
90366
+ </div>
90367
+
90368
+ <!-- Section Divider (between sections) -->
90369
+ @if (!last) {
90370
+ <symphiq-section-divider
90371
+ [viewMode]="viewMode()"
90372
+ [sectionIcon]="sectionList[idx + 1].icon"
90373
+ />
90374
+ }
90375
+ }
90376
+ </section>
90377
+ }
90378
+ }
90379
+
90380
+ </main>
90381
+
90382
+ <!-- Table of Contents (Compact & Expanded Views) -->
90383
+ @if (!isSimplifiedView() && sections()) {
90384
+ <symphiq-floating-toc
90385
+ [sections]="tocSections()"
90386
+ [viewMode]="viewMode()"
90387
+ [embedded]="embedded()"
90388
+ [scrollElement]="scrollElement() ?? undefined"
90389
+ />
90390
+ }
90391
+
90392
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
90393
+ @if (!isSimplifiedView() && sections()) {
90394
+ <symphiq-section-navigation
90395
+ [sections]="tocSections()"
90396
+ [viewMode]="viewMode()"
90397
+ [embedded]="embedded()"
90398
+ [scrollElement]="scrollElement() ?? undefined"
90399
+ />
90400
+ }
90401
+
90402
+ <!-- Search Modal -->
90403
+ <symphiq-search-modal
90404
+ [isOpen]="isSearchOpen()"
90405
+ [isLightMode]="isLightMode()"
90406
+ (close)="closeSearch()"
90407
+ />
90408
+
90409
+ <!-- View Mode Switcher Modal -->
90410
+ <symphiq-view-mode-switcher-modal
90411
+ [isOpen]="isViewModeSwitcherOpen()"
90412
+ [currentMode]="currentDisplayMode()"
90413
+ [viewMode]="viewMode()"
90414
+ (close)="closeViewModeSwitcher()"
90415
+ (modeSelected)="handleDisplayModeChange($event)"
90416
+ />
90417
+
90418
+ <!-- Profile Analysis Modal -->
90419
+ <symphiq-profile-analysis-modal
90420
+ [isLightMode]="isLightMode()"
90421
+ [allMetrics]="allMetrics()"
90422
+ [allInsights]="allInsights()"
90423
+ [allBusinessInsights]="allBusinessInsights()"
90424
+ [allCharts]="allCharts()"
90425
+ >
90426
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90427
+ <symphiq-goal-card
90428
+ [goal]="data.goal"
90429
+ [viewMode]="data.viewMode"
90430
+ [isInModal]="true"
90431
+ [allMetrics]="allMetrics()"
90432
+ [allCharts]="allCharts()"
90433
+ [allInsights]="allInsights()"
90434
+ [currentModalState]="getCurrentModalState()"
90435
+ [businessProfile]="profile()"
90436
+ />
90437
+ }
90438
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90439
+ <symphiq-goal-objectives-modal-content
90440
+ [goal]="data.goal"
90441
+ [viewMode]="data.viewMode"
90442
+ />
90443
+ }
90444
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90445
+ <symphiq-objective-strategies-modal-content
90446
+ [objective]="data.objective"
90447
+ [goalTitle]="data.goalTitle"
90448
+ [viewMode]="data.viewMode"
90449
+ />
90450
+ }
90451
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90452
+ <symphiq-strategy-recommendations-modal-content
90453
+ [strategy]="data.strategy"
90454
+ [objectiveTitle]="data.objectiveTitle"
90455
+ [goalTitle]="data.goalTitle"
90456
+ [viewMode]="data.viewMode"
90457
+ [allMetrics]="allMetrics()"
90458
+ [allCharts]="allCharts()"
90459
+ [allInsights]="allInsights()"
90460
+ [allBusinessInsights]="allBusinessInsights()"
90461
+ [currentModalState]="getCurrentModalState()"
90462
+ />
90463
+ }
90464
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90465
+ <symphiq-category-detail-modal-content
90466
+ [category]="data.category"
90467
+ [viewMode]="data.viewMode"
90468
+ [scrollToSection]="data.scrollToSection"
90469
+ />
90470
+ }
90471
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90472
+ <symphiq-strength-detail-modal-content
90473
+ [strength]="data.strength"
90474
+ [viewMode]="data.viewMode"
90475
+ [allFunnelStrengths]="funnelStrengths()"
90476
+ [currentModalState]="getCurrentModalState()"
90477
+ />
90478
+ }
90479
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90480
+ <symphiq-gap-detail-modal-content
90481
+ [gap]="data.gap"
90482
+ [viewMode]="data.viewMode"
90483
+ [allGoals]="allGoals()"
90484
+ [allWeaknesses]="funnelWeaknesses()"
90485
+ [currentModalState]="getCurrentModalState()"
90486
+ />
90487
+ }
90488
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90489
+ <symphiq-opportunity-detail-modal-content
90490
+ [opportunity]="data.opportunity"
90491
+ [viewMode]="data.viewMode"
90492
+ [allStrengths]="funnelStrengths()"
90493
+ [currentModalState]="getCurrentModalState()"
90494
+ />
90495
+ }
90496
+ </symphiq-profile-analysis-modal>
90497
+
90498
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90499
+ <symphiq-funnel-analysis-modal
90500
+ [isLightMode]="isLightMode()"
90501
+ [viewMode]="viewMode()"
90502
+ [allMetrics]="allMetrics()"
90503
+ [allInsights]="allInsights()"
90504
+ [allCharts]="allCharts()"
90505
+ />
90506
+
90507
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
90508
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90509
+
90510
+ <!-- Tooltip Container -->
90511
+ <symphiq-tooltip-container/>
90512
+
90513
+ <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90514
+ @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90515
+ <symphiq-sticky-subscription-continue-button
90516
+ [viewMode]="viewMode()"
90517
+ [isEnabled]="hasCurrencySelected()"
90518
+ [isLoading]="isCurrencySelectionLoading()"
90519
+ (continueClick)="handleStickyButtonClick()"
90520
+ />
90521
+ }
90522
+
90523
+ <!-- Sticky Footer for Edit Currency Mode -->
90524
+ @if (isEditingCurrency()) {
90525
+ <div
90526
+ [ngClass]="getEditCurrencyFooterClasses()"
90527
+ class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
90528
+ >
90529
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
90530
+ <div class="flex items-center gap-4">
90531
+ <button
90532
+ (click)="handleCancelCurrencyEdit()"
90533
+ [ngClass]="getEditCurrencyCancelButtonClasses()"
90534
+ class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
90535
+ >
90536
+ Cancel
90537
+ </button>
90538
+ <button
90539
+ (click)="handleContinueToPlans()"
90540
+ [disabled]="!editingCurrencySelection()"
90541
+ [ngClass]="getEditCurrencyContinueButtonClasses()"
90542
+ class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
90543
+ >
90544
+ <span>Continue to Plans</span>
90545
+ <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90546
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
90547
+ </svg>
90548
+ </button>
90549
+ </div>
90550
+ </div>
90551
+ </div>
90552
+ }
90553
+ </div>
90417
90554
  `
90418
90555
  }]
90419
90556
  }], () => [], { funnelModalComponent: [{