@eric-emg/symphiq-components 1.2.340 → 1.2.341

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 (6) hide show
  1. package/fesm2022/symphiq-components.mjs +1115 -971
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +16 -16
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/styles.css +33 -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,107 @@ 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_8_Template(rf, ctx) { if (rf & 1) {
86876
+ i0.ɵɵelementStart(0, "div", 31);
86877
+ i0.ɵɵtext(1);
86878
+ i0.ɵɵelementEnd();
86879
+ } if (rf & 2) {
86880
+ const ctx_r0 = i0.ɵɵnextContext(2);
86881
+ i0.ɵɵproperty("ngClass", ctx_r0.savingsBadgeClasses());
86882
+ i0.ɵɵadvance();
86883
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsPercentage(), " ");
86884
+ } }
86875
86885
  function PlanCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
86876
- i0.ɵɵelementStart(0, "div", 1);
86877
- i0.ɵɵtext(1, " Best value ");
86886
+ i0.ɵɵelementStart(0, "div", 1)(1, "div", 27);
86887
+ i0.ɵɵnamespaceSVG();
86888
+ i0.ɵɵelementStart(2, "svg", 28);
86889
+ i0.ɵɵelement(3, "path", 29);
86890
+ i0.ɵɵelementEnd();
86891
+ i0.ɵɵnamespaceHTML();
86892
+ i0.ɵɵelementStart(4, "span", 30);
86893
+ i0.ɵɵtext(5, "Best Value");
86894
+ i0.ɵɵelementEnd();
86895
+ i0.ɵɵnamespaceSVG();
86896
+ i0.ɵɵelementStart(6, "svg", 28);
86897
+ i0.ɵɵelement(7, "path", 29);
86898
+ i0.ɵɵelementEnd()();
86899
+ i0.ɵɵconditionalCreate(8, PlanCardComponent_Conditional_1_Conditional_8_Template, 2, 2, "div", 31);
86878
86900
  i0.ɵɵelementEnd();
86879
86901
  } if (rf & 2) {
86880
86902
  const ctx_r0 = i0.ɵɵnextContext();
86903
+ i0.ɵɵadvance();
86881
86904
  i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
86905
+ i0.ɵɵadvance(7);
86906
+ i0.ɵɵconditional(ctx_r0.getSavingsPercentage() ? 8 : -1);
86882
86907
  } }
86883
- function PlanCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
86884
- i0.ɵɵelement(0, "div", 10);
86908
+ function PlanCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
86909
+ i0.ɵɵelementStart(0, "div", 5);
86910
+ i0.ɵɵnamespaceSVG();
86911
+ i0.ɵɵelementStart(1, "svg", 18);
86912
+ i0.ɵɵelement(2, "path", 32);
86913
+ i0.ɵɵelementEnd();
86914
+ i0.ɵɵtext(3, " Most Popular Choice ");
86915
+ i0.ɵɵelementEnd();
86916
+ } if (rf & 2) {
86917
+ const ctx_r0 = i0.ɵɵnextContext();
86918
+ i0.ɵɵproperty("ngClass", ctx_r0.recommendedTextClasses());
86919
+ } }
86920
+ function PlanCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
86921
+ i0.ɵɵelementStart(0, "div", 9);
86922
+ i0.ɵɵnamespaceSVG();
86923
+ i0.ɵɵelementStart(1, "svg", 18);
86924
+ i0.ɵɵelement(2, "path", 33);
86925
+ i0.ɵɵelementEnd();
86926
+ i0.ɵɵtext(3);
86927
+ i0.ɵɵelementEnd();
86928
+ } if (rf & 2) {
86929
+ const ctx_r0 = i0.ɵɵnextContext();
86930
+ i0.ɵɵproperty("ngClass", ctx_r0.savingsTextClasses());
86931
+ i0.ɵɵadvance(3);
86932
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsAmount(), " ");
86933
+ } }
86934
+ function PlanCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
86935
+ i0.ɵɵelement(0, "div", 12);
86885
86936
  } if (rf & 2) {
86886
86937
  const ctx_r0 = i0.ɵɵnextContext();
86887
86938
  i0.ɵɵproperty("ngClass", ctx_r0.radioInnerClasses());
@@ -86954,22 +87005,35 @@ class PlanCardComponent {
86954
87005
  aiUsageTooltipContent() {
86955
87006
  return {
86956
87007
  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
-
87008
+ markdown: `Your monthly subscription fee covers access to core features.
87009
+
87010
+ AI usage is tracked throughout the month.
87011
+
86961
87012
  At the end of each month, your total AI usage is calculated and automatically billed as a separate line item on your invoice.`
86962
87013
  };
86963
87014
  }
86964
87015
  cardContainerClasses() {
86965
87016
  const isSelected = this.isSelected();
87017
+ const isBestValue = this.showBestValueBadge();
86966
87018
  if (this.viewMode() === ViewModeEnum.DARK) {
87019
+ if (isBestValue && isSelected) {
87020
+ return 'bg-slate-800/60 border-amber-500 shadow-2xl shadow-amber-500/30';
87021
+ }
87022
+ if (isBestValue) {
87023
+ return 'bg-slate-800/50 border-amber-500/70 hover:border-amber-400 hover:shadow-2xl hover:shadow-amber-500/40';
87024
+ }
86967
87025
  if (isSelected) {
86968
87026
  return 'bg-slate-800/60 border-blue-500 shadow-2xl shadow-blue-500/20';
86969
87027
  }
86970
87028
  return 'bg-slate-800/40 border-slate-700/50 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10';
86971
87029
  }
86972
87030
  else {
87031
+ if (isBestValue && isSelected) {
87032
+ return 'bg-white border-amber-500 shadow-2xl shadow-amber-500/30';
87033
+ }
87034
+ if (isBestValue) {
87035
+ return 'bg-white border-amber-500/70 hover:border-amber-500 hover:shadow-2xl hover:shadow-amber-500/40';
87036
+ }
86973
87037
  if (isSelected) {
86974
87038
  return 'bg-white border-blue-500 shadow-2xl shadow-blue-500/20';
86975
87039
  }
@@ -86977,9 +87041,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
86977
87041
  }
86978
87042
  }
86979
87043
  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';
87044
+ return 'text-white';
86983
87045
  }
86984
87046
  planTitleClasses() {
86985
87047
  return this.viewMode() === ViewModeEnum.DARK
@@ -87064,65 +87126,119 @@ At the end of each month, your total AI usage is calculated and automatically bi
87064
87126
  ? 'text-slate-400'
87065
87127
  : 'text-slate-600';
87066
87128
  }
87129
+ savingsBadgeClasses() {
87130
+ return this.viewMode() === ViewModeEnum.DARK
87131
+ ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white'
87132
+ : 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white';
87133
+ }
87134
+ recommendedTextClasses() {
87135
+ return this.viewMode() === ViewModeEnum.DARK
87136
+ ? 'text-amber-400'
87137
+ : 'text-amber-600';
87138
+ }
87139
+ savingsTextClasses() {
87140
+ return this.viewMode() === ViewModeEnum.DARK
87141
+ ? 'text-emerald-400'
87142
+ : 'text-emerald-600';
87143
+ }
87144
+ getSavingsPercentage() {
87145
+ if (!this.showBestValueBadge())
87146
+ return null;
87147
+ const info = this.planInfo();
87148
+ if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
87149
+ const annualPrice = info.planItemPrice.price || 0;
87150
+ const monthlyEquivalent = (annualPrice / 12) * 12;
87151
+ const monthlyPrice = info.planItemPrice.price || annualPrice;
87152
+ if (monthlyPrice > 0) {
87153
+ const savings = ((monthlyEquivalent - annualPrice) / monthlyEquivalent) * 100;
87154
+ if (savings > 0) {
87155
+ return `Save ${Math.round(savings)}%`;
87156
+ }
87157
+ }
87158
+ }
87159
+ return null;
87160
+ }
87161
+ getSavingsAmount() {
87162
+ if (!this.showBestValueBadge())
87163
+ return null;
87164
+ const info = this.planInfo();
87165
+ if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
87166
+ const annualPrice = info.planItemPrice.price || 0;
87167
+ const monthlyPrice = annualPrice / 12;
87168
+ const monthlyPlanPrice = monthlyPrice * 1.2;
87169
+ const totalMonthlyOver12 = monthlyPlanPrice * 12;
87170
+ const savings = totalMonthlyOver12 - annualPrice;
87171
+ if (savings > 0) {
87172
+ const symbol = this.getCurrencySymbol();
87173
+ const savingsFormatted = Math.floor(savings).toLocaleString();
87174
+ return `${symbol}${savingsFormatted} savings vs. monthly billing`;
87175
+ }
87176
+ }
87177
+ return null;
87178
+ }
87067
87179
  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) {
87180
+ 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: 33, 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, "best-value-badge", "px-6", "py-2", "rounded-full", "text-base", "font-extrabold", "flex", "items-center", "gap-2", "shadow-2xl", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "sparkle-icon"], ["d", "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"], [1, "drop-shadow-lg"], [1, "savings-badge", "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
87181
  i0.ɵɵelementStart(0, "div", 0);
87070
87182
  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);
87183
+ i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 9, 2, "div", 1);
87072
87184
  i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "h3", 4);
87073
87185
  i0.ɵɵtext(5);
87074
87186
  i0.ɵɵelementEnd();
87075
- i0.ɵɵelementStart(6, "div", 5)(7, "span", 6);
87076
- i0.ɵɵtext(8);
87187
+ i0.ɵɵconditionalCreate(6, PlanCardComponent_Conditional_6_Template, 4, 1, "div", 5);
87188
+ i0.ɵɵelementStart(7, "div", 6)(8, "span", 7);
87189
+ i0.ɵɵtext(9);
87077
87190
  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);
87191
+ i0.ɵɵelementStart(10, "span", 8);
87192
+ i0.ɵɵtext(11);
87193
+ i0.ɵɵelementEnd()();
87194
+ i0.ɵɵconditionalCreate(12, PlanCardComponent_Conditional_12_Template, 4, 2, "div", 9);
87195
+ i0.ɵɵelementEnd();
87196
+ i0.ɵɵelementStart(13, "div", 10)(14, "div", 11);
87197
+ i0.ɵɵconditionalCreate(15, PlanCardComponent_Conditional_15_Template, 1, 1, "div", 12);
87083
87198
  i0.ɵɵelementEnd()()();
87084
- i0.ɵɵelementStart(14, "div", 11)(15, "div", 12)(16, "div", 13)(17, "span", 14);
87085
- i0.ɵɵtext(18, "AI usage");
87199
+ i0.ɵɵelementStart(16, "div", 13)(17, "div", 14)(18, "div", 15)(19, "span", 16);
87200
+ i0.ɵɵtext(20, "AI usage");
87086
87201
  i0.ɵɵelementEnd();
87087
- i0.ɵɵelementStart(19, "button", 15);
87202
+ i0.ɵɵelementStart(21, "button", 17);
87088
87203
  i0.ɵɵnamespaceSVG();
87089
- i0.ɵɵelementStart(20, "svg", 16);
87090
- i0.ɵɵelement(21, "path", 17);
87204
+ i0.ɵɵelementStart(22, "svg", 18);
87205
+ i0.ɵɵelement(23, "path", 19);
87091
87206
  i0.ɵɵelementEnd()()();
87092
87207
  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. ");
87208
+ i0.ɵɵelementStart(24, "span", 20);
87209
+ i0.ɵɵtext(25, " Charged monthly based on your actual usage\u2014no per-token counting, just straightforward monthly billing. ");
87095
87210
  i0.ɵɵelementEnd()();
87096
- i0.ɵɵelementStart(24, "div", 12)(25, "span", 14);
87097
- i0.ɵɵtext(26, "Unlimited recommendations");
87211
+ i0.ɵɵelementStart(26, "div", 14)(27, "span", 16);
87212
+ i0.ɵɵtext(28, "Unlimited recommendations");
87098
87213
  i0.ɵɵelementEnd();
87099
87214
  i0.ɵɵnamespaceSVG();
87100
- i0.ɵɵelementStart(27, "svg", 19);
87101
- i0.ɵɵelement(28, "path", 20);
87215
+ i0.ɵɵelementStart(29, "svg", 21);
87216
+ i0.ɵɵelement(30, "path", 22);
87102
87217
  i0.ɵɵelementEnd()();
87103
87218
  i0.ɵɵnamespaceHTML();
87104
- i0.ɵɵelementStart(29, "div", 12)(30, "span", 14);
87105
- i0.ɵɵtext(31, "Unlimited seats");
87219
+ i0.ɵɵelementStart(31, "div", 14)(32, "span", 16);
87220
+ i0.ɵɵtext(33, "Unlimited seats");
87106
87221
  i0.ɵɵelementEnd();
87107
87222
  i0.ɵɵnamespaceSVG();
87108
- i0.ɵɵelementStart(32, "svg", 19);
87109
- i0.ɵɵelement(33, "path", 20);
87223
+ i0.ɵɵelementStart(34, "svg", 21);
87224
+ i0.ɵɵelement(35, "path", 22);
87110
87225
  i0.ɵɵelementEnd()();
87111
87226
  i0.ɵɵnamespaceHTML();
87112
- i0.ɵɵelementStart(34, "div", 21)(35, "span", 14);
87113
- i0.ɵɵtext(36, "Google Analytics integration");
87227
+ i0.ɵɵelementStart(36, "div", 23)(37, "span", 16);
87228
+ i0.ɵɵtext(38, "Google Analytics integration");
87114
87229
  i0.ɵɵelementEnd();
87115
87230
  i0.ɵɵnamespaceSVG();
87116
- i0.ɵɵelementStart(37, "svg", 19);
87117
- i0.ɵɵelement(38, "path", 20);
87231
+ i0.ɵɵelementStart(39, "svg", 21);
87232
+ i0.ɵɵelement(40, "path", 22);
87118
87233
  i0.ɵɵelementEnd()();
87119
87234
  i0.ɵɵnamespaceHTML();
87120
- i0.ɵɵelementStart(39, "div", 22)(40, "h4", 23);
87121
- i0.ɵɵtext(41, " Contract terms ");
87235
+ i0.ɵɵelementStart(41, "div", 24)(42, "h4", 25);
87236
+ i0.ɵɵtext(43, " Contract terms ");
87122
87237
  i0.ɵɵelementEnd();
87123
- i0.ɵɵelement(42, "p", 24);
87238
+ i0.ɵɵelement(44, "p", 26);
87124
87239
  i0.ɵɵelementEnd()()();
87125
87240
  } if (rf & 2) {
87241
+ i0.ɵɵclassProp("best-value-card", ctx.showBestValueBadge());
87126
87242
  i0.ɵɵproperty("ngClass", ctx.cardContainerClasses());
87127
87243
  i0.ɵɵadvance();
87128
87244
  i0.ɵɵconditional(ctx.showBestValueBadge() ? 1 : -1);
@@ -87130,6 +87246,8 @@ At the end of each month, your total AI usage is calculated and automatically bi
87130
87246
  i0.ɵɵproperty("ngClass", ctx.planTitleClasses());
87131
87247
  i0.ɵɵadvance();
87132
87248
  i0.ɵɵtextInterpolate1(" ", ctx.getPlanTitle(), " ");
87249
+ i0.ɵɵadvance();
87250
+ i0.ɵɵconditional(ctx.showBestValueBadge() ? 6 : -1);
87133
87251
  i0.ɵɵadvance(2);
87134
87252
  i0.ɵɵproperty("ngClass", ctx.priceClasses());
87135
87253
  i0.ɵɵadvance();
@@ -87138,10 +87256,12 @@ At the end of each month, your total AI usage is calculated and automatically bi
87138
87256
  i0.ɵɵproperty("ngClass", ctx.pricePeriodClasses());
87139
87257
  i0.ɵɵadvance();
87140
87258
  i0.ɵɵtextInterpolate1(" ", ctx.getPricePeriod(), " ");
87259
+ i0.ɵɵadvance();
87260
+ i0.ɵɵconditional(ctx.showBestValueBadge() && ctx.getSavingsAmount() ? 12 : -1);
87141
87261
  i0.ɵɵadvance(2);
87142
87262
  i0.ɵɵproperty("ngClass", ctx.radioClasses());
87143
87263
  i0.ɵɵadvance();
87144
- i0.ɵɵconditional(ctx.isSelected() ? 13 : -1);
87264
+ i0.ɵɵconditional(ctx.isSelected() ? 15 : -1);
87145
87265
  i0.ɵɵadvance();
87146
87266
  i0.ɵɵproperty("ngClass", ctx.sectionClasses());
87147
87267
  i0.ɵɵadvance();
@@ -87176,103 +87296,127 @@ At the end of each month, your total AI usage is calculated and automatically bi
87176
87296
  i0.ɵɵproperty("ngClass", ctx.contractTermsLabelClasses());
87177
87297
  i0.ɵɵadvance(2);
87178
87298
  i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses())("innerHTML", ctx.getContractTerms(), i0.ɵɵsanitizeHtml);
87179
- } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
87299
+ } }, 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.1);box-shadow:0 0 30px #eab308cc,0 0 60px #eab30899,0 0 90px #eab30866,inset 0 0 30px #ffffff80}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_sparkle{0%,to{opacity:1;transform:rotate(0) scale(1)}50%{opacity:.7;transform:rotate(180deg) scale(1.2)}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30880,0 0 40px #eab3084d,0 0 60px #eab30826,inset 0 0 20px #eab3081a}50%{box-shadow:0 0 30px #eab308b3,0 0 60px #eab30880,0 0 90px #eab3084d,inset 0 0 30px #eab30833}}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite,_ngcontent-%COMP%_shimmer 3s linear infinite;position:relative;overflow:hidden}.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 2s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 2s ease-in-out infinite;transform:scale(1.05);border-width:3px}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.07)}.sparkle-icon[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_sparkle 1.5s ease-in-out infinite}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2.5s ease-in-out infinite}"], changeDetection: 0 }); }
87180
87300
  }
87181
87301
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanCardComponent, [{
87182
87302
  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
- }]
87303
+ args: [{ selector: 'symphiq-plan-card', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
87304
+ <div
87305
+ (click)="handleCardClick()"
87306
+ [ngClass]="cardContainerClasses()"
87307
+ [class.best-value-card]="showBestValueBadge()"
87308
+ class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
87309
+
87310
+ @if (showBestValueBadge()) {
87311
+ <div class="absolute -top-5 left-1/2 flex flex-col items-center gap-2 z-10">
87312
+ <div [ngClass]="badgeClasses()" class="best-value-badge px-6 py-2 rounded-full text-base font-extrabold flex items-center gap-2 shadow-2xl">
87313
+ <svg class="w-5 h-5 sparkle-icon" fill="currentColor" viewBox="0 0 20 20">
87314
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
87315
+ </svg>
87316
+ <span class="drop-shadow-lg">Best Value</span>
87317
+ <svg class="w-5 h-5 sparkle-icon" fill="currentColor" viewBox="0 0 20 20">
87318
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
87319
+ </svg>
87320
+ </div>
87321
+ @if (getSavingsPercentage()) {
87322
+ <div [ngClass]="savingsBadgeClasses()" class="savings-badge px-3 py-1 rounded-full text-xs font-bold shadow-lg">
87323
+ {{ getSavingsPercentage() }}
87324
+ </div>
87325
+ }
87326
+ </div>
87327
+ }
87328
+
87329
+ <div class="flex items-start justify-between mb-6">
87330
+ <div class="flex-1">
87331
+ <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
87332
+ {{ getPlanTitle() }}
87333
+ </h3>
87334
+ @if (showBestValueBadge()) {
87335
+ <div [ngClass]="recommendedTextClasses()" class="text-sm font-semibold mb-2 flex items-center gap-1">
87336
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87337
+ <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"/>
87338
+ </svg>
87339
+ Most Popular Choice
87340
+ </div>
87341
+ }
87342
+ <div class="flex items-baseline gap-2">
87343
+ <span [ngClass]="priceClasses()" class="text-4xl font-bold">
87344
+ {{ formatPrice() }}
87345
+ </span>
87346
+ <span [ngClass]="pricePeriodClasses()" class="text-base">
87347
+ {{ getPricePeriod() }}
87348
+ </span>
87349
+ </div>
87350
+ @if (showBestValueBadge() && getSavingsAmount()) {
87351
+ <div [ngClass]="savingsTextClasses()" class="text-sm font-bold mt-2 flex items-center gap-1">
87352
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87353
+ <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"/>
87354
+ </svg>
87355
+ {{ getSavingsAmount() }}
87356
+ </div>
87357
+ }
87358
+ </div>
87359
+ <div class="flex-shrink-0 ml-4">
87360
+ <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
87361
+ @if (isSelected()) {
87362
+ <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
87363
+ }
87364
+ </div>
87365
+ </div>
87366
+ </div>
87367
+
87368
+ <div [ngClass]="sectionClasses()" class="space-y-4">
87369
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87370
+ <div class="flex items-center gap-2">
87371
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
87372
+ <button
87373
+ [libSymphiqTooltip]="aiUsageTooltipContent()"
87374
+ tooltipType="markdown"
87375
+ tooltipPosition="right"
87376
+ [ngClass]="tooltipButtonClasses()"
87377
+ class="w-5 h-5 rounded-full flex items-center justify-center">
87378
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87379
+ <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>
87380
+ </svg>
87381
+ </button>
87382
+ </div>
87383
+ <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
87384
+ Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
87385
+ </span>
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 recommendations</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 border-b">
87396
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</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]="featureRowClasses()" class="flex justify-between items-center py-3">
87403
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
87404
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87405
+ <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>
87406
+ </svg>
87407
+ </div>
87408
+
87409
+ <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
87410
+ <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
87411
+ Contract terms
87412
+ </h4>
87413
+ <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
87414
+ </div>
87415
+ </div>
87416
+ </div>
87417
+ `, 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.1);box-shadow:0 0 30px #eab308cc,0 0 60px #eab30899,0 0 90px #eab30866,inset 0 0 30px #ffffff80}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes sparkle{0%,to{opacity:1;transform:rotate(0) scale(1)}50%{opacity:.7;transform:rotate(180deg) scale(1.2)}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30880,0 0 40px #eab3084d,0 0 60px #eab30826,inset 0 0 20px #eab3081a}50%{box-shadow:0 0 30px #eab308b3,0 0 60px #eab30880,0 0 90px #eab3084d,inset 0 0 30px #eab30833}}@keyframes float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.best-value-badge{animation:pulse-glow 2s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:pulse-glow 2s ease-in-out infinite,shimmer 3s linear infinite;position:relative;overflow:hidden}.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 2s infinite}.best-value-card{animation:border-glow 2s ease-in-out infinite;transform:scale(1.05);border-width:3px}.best-value-card:hover{transform:scale(1.07)}.sparkle-icon{animation:sparkle 1.5s ease-in-out infinite}.savings-badge{animation:pulse-glow 2.5s ease-in-out infinite}\n"] }]
87274
87418
  }], 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 }); })();
87419
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 239 }); })();
87276
87420
 
87277
87421
  const _forTrack0$1 = ($index, $item) => $item.planItemPrice.id;
87278
87422
  function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
@@ -87470,81 +87614,81 @@ class PlanSelectionContainerComponent {
87470
87614
  standalone: true,
87471
87615
  imports: [CommonModule, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent],
87472
87616
  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>
87617
+ template: `
87618
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
87619
+ <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
87620
+ <div class="flex items-center gap-3">
87621
+ <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
87622
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87623
+ <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>
87624
+ </svg>
87625
+ </div>
87626
+ <div>
87627
+ <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
87628
+ Choose Your Plan
87629
+ </h2>
87630
+ <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
87631
+ Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
87632
+ <button
87633
+ (click)="editCurrency.emit()"
87634
+ [ngClass]="editButtonClasses()"
87635
+ class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
87636
+ >
87637
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87638
+ <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>
87639
+ </svg>
87640
+ Edit
87641
+ </button>
87642
+ </p>
87643
+ </div>
87644
+ </div>
87645
+ </div>
87646
+
87647
+ <div [ngClass]="contentClasses()" class="p-8">
87648
+ <symphiq-billing-period-toggle
87649
+ [viewMode]="viewMode()"
87650
+ [selectedPeriodUnit]="selectedPeriodUnit()"
87651
+ [isLoading]="isLoading()"
87652
+ (periodUnitChanged)="handlePeriodChange($event)"
87653
+ />
87654
+
87655
+ @if (isLoading()) {
87656
+ <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
87657
+ <symphiq-indeterminate-spinner
87658
+ [viewMode]="viewMode()"
87659
+ [size]="'large'"
87660
+ />
87661
+ <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
87662
+ Loading your plan options...
87663
+ </p>
87664
+ </div>
87665
+ } @else if (planCardInfos() && planCardInfos()!.length > 0) {
87666
+ <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
87667
+ @for (plan of planCardInfos(); track plan.planItemPrice.id) {
87668
+ <symphiq-plan-card
87669
+ [viewMode]="viewMode()"
87670
+ [planInfo]="plan"
87671
+ [isSelected]="isSelectedPlan(plan)"
87672
+ [selectedPeriodUnit]="selectedPeriodUnit()"
87673
+ (planSelected)="handlePlanSelection($event)"
87674
+ />
87675
+ }
87676
+ </div>
87677
+ } @else {
87678
+ <div [ngClass]="emptyStateClasses()" class="text-center py-16">
87679
+ <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87680
+ <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>
87681
+ </svg>
87682
+ <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
87683
+ No plans available
87684
+ </p>
87685
+ <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
87686
+ Please contact support if this issue persists
87687
+ </p>
87688
+ </div>
87689
+ }
87690
+ </div>
87691
+ </div>
87548
87692
  `
87549
87693
  }]
87550
87694
  }], 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 +89953,611 @@ class SymphiqProfileAnalysisDashboardComponent {
89809
89953
  standalone: true,
89810
89954
  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
89955
  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>
89956
+ template: `
89957
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89958
+ <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>
89959
+
89960
+ <!-- Scroll Progress Bar -->
89961
+ <div
89962
+ [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'">
89963
+ <div
89964
+ [style.width.%]="scrollProgress()"
89965
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89966
+ class="h-full transition-all duration-200 ease-out">
89967
+ </div>
89968
+ </div>
89969
+
89970
+ <div class="relative z-[51]">
89971
+ <!-- Dashboard Header -->
89972
+ <symphiq-dashboard-header
89973
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89974
+ [subtitle]="getAnalysisSubtitle()"
89975
+ [currentSection]="getAnalysisSubtitle()"
89976
+ [viewMode]="viewMode()"
89977
+ [viewModeLabel]="displayModeLabel()"
89978
+ [isLoading]="isLoading()"
89979
+ [requestedByUser]="requestedByUser()"
89980
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89981
+ (searchClick)="openSearch()"
89982
+ (viewModeClick)="openViewModeSwitcher()"
89983
+ />
89984
+
89985
+ <!-- Journey Progress Banner -->
89986
+ @if (isSimplifiedView() && !isOnboarded()) {
89987
+ <symphiq-journey-progress-indicator
89988
+ [viewMode]="viewMode()"
89989
+ [currentStepId]="currentStepId()"
89990
+ [showNextStepAction]="shouldShowContinueButton()"
89991
+ [forDemo]="forDemo()"
89992
+ [maxAccessibleStepId]="maxAccessibleStepId()"
89993
+ (nextStepClick)="nextStepClick.emit()"
89994
+ (stepClick)="stepClick.emit($event)"
89995
+ />
89996
+ }
89997
+
89998
+ <!-- Main Content -->
89999
+ <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()">
90000
+
90001
+ <!-- Welcome Banner (Simplified View Only) -->
90002
+ @if (isSimplifiedView()) {
90003
+ <div class="mb-12">
90004
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
90005
+ <symphiq-shop-welcome-banner
90006
+ [viewMode]="viewMode()"
90007
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
90008
+ [isOnboarded]="isOnboarded()"
90009
+ />
90010
+ }
90011
+ @if (isFocusAreaAnalysis()) {
90012
+ <symphiq-focus-area-welcome-banner
90013
+ [viewMode]="viewMode()"
90014
+ [focusAreaDomain]="focusAreaDomain()"
90015
+ [focusAreaName]="focusAreaName()"
90016
+ [focusAreaDetails]="focusAreaDetails()"
90017
+ />
90018
+ }
90019
+ @if (isMetricAnalysis()) {
90020
+ <symphiq-metric-welcome-banner
90021
+ [viewMode]="viewMode()"
90022
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
90023
+ [isOnboarded]="isOnboarded()"
90024
+ />
90025
+ }
90026
+ </div>
90027
+ }
90028
+
90029
+ <!-- Simplified View Content -->
90030
+ @if (isSimplifiedView()) {
90031
+ <!-- Strategic Insights & Goals (or Subscription Flow) -->
90032
+ <div class="mb-8">
90033
+ @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
90034
+ <symphiq-strategic-goals-tiled-grid
90035
+ [goals]="strategicRoadmapGoals()"
90036
+ [viewMode]="viewMode()"
90037
+ (viewMoreClick)="openGoalModal($event)"
90038
+ />
90039
+ } @else {
90040
+ <!-- Subscription Value Proposition -->
90041
+ @if (!hasBillingCurrency() || isEditingCurrency()) {
90042
+ @if (!hasBillingCurrency()) {
90043
+ <div class="mb-8">
90044
+ <symphiq-subscription-value-proposition-card
90045
+ [viewMode]="viewMode()"
90046
+ />
90047
+ </div>
90048
+ }
90049
+
90050
+ <!-- Currency Selection -->
90051
+ <symphiq-billing-currency-selector-card
90052
+ [viewMode]="viewMode()"
90053
+ [isLoading]="isCurrencySelectionLoading()"
90054
+ [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
90055
+ (currencySelected)="handleCurrencyChange($event)"
90056
+ />
90057
+ } @else if (showPlanSelection()) {
90058
+ <!-- Plan Selection -->
90059
+
90060
+ <div class="mb-32">
90061
+ <symphiq-plan-selection-container
90062
+ [viewMode]="viewMode()"
90063
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90064
+ [planCardInfos]="planCardInfos()"
90065
+ [isLoading]="isPlanLoading()"
90066
+ [selectedPeriodUnit]="selectedPeriodUnit()"
90067
+ (periodUnitChanged)="handlePeriodUnitChange($event)"
90068
+ (planSelected)="handlePlanSelection($event)"
90069
+ (editCurrency)="handleEditCurrencyClick()"
90070
+ />
90071
+ </div>
90072
+ } @else {
90073
+ <symphiq-plan-selection-placeholder-card
90074
+ [viewMode]="viewMode()"
90075
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90076
+ (editCurrency)="handleEditCurrencyClick()"
90077
+ />
90078
+ }
90079
+ }
90080
+ </div>
90081
+
90082
+ <!-- Supporting Business Context -->
90083
+ @if (nonStrategicSections().length > 0) {
90084
+ <div>
90085
+ <symphiq-collapsible-analysis-section-group
90086
+ [sections]="nonStrategicSections()"
90087
+ [viewMode]="viewMode()"
90088
+ [executiveSummary]="executiveSummary()"
90089
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
90090
+ [metricExecutiveSummary]="metricExecutiveSummary()"
90091
+ [metricName]="metricName()"
90092
+ [allGoals]="allGoals()"
90093
+ [allMetrics]="allMetrics()"
90094
+ [allCharts]="allCharts()"
90095
+ [allInsights]="allInsights()"
90096
+ [businessProfile]="profile()"
90097
+ />
90098
+ </div>
90099
+ }
90100
+ }
90101
+
90102
+ <!-- Compact & Expanded View Content -->
90103
+ @if (!isSimplifiedView()) {
90104
+ <!-- SHOP Executive Summary -->
90105
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
90106
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
90107
+ <!-- Summary Banner -->
90108
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
90109
+ <div class="space-y-6">
90110
+ <div class="flex items-start justify-between gap-4">
90111
+ <div class="flex-1">
90112
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
90113
+ Executive Summary
90114
+ </h2>
90115
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
90116
+ {{ summary.gradeRationale }}
90117
+ </p>
90118
+ </div>
90119
+ @if (summary.overallGrade) {
90120
+ <symphiq-grade-badge
90121
+ [grade]="summary.overallGrade"
90122
+ [gradeRationale]="summary.gradeRationale || ''"
90123
+ [viewMode]="viewMode()"
90124
+ />
90125
+ }
90126
+ </div>
90127
+
90128
+ @if (summary.narrative) {
90129
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
90130
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
90131
+ Analysis Narrative
90132
+ </h3>
90133
+ <div class="relative">
90134
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
90135
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
90136
+ <symphiq-napkin-visual-placeholder
90137
+ [visual]="summary.napkinVisual"
90138
+ [viewMode]="viewMode()"
90139
+ />
90140
+ </div>
90141
+ }
90142
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
90143
+ {{ summary.narrative }}
90144
+ </p>
90145
+ <div class="clear-both"></div>
90146
+ </div>
90147
+ </div>
90148
+ }
90149
+
90150
+ <!-- Stats -->
90151
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90152
+ <button
90153
+ type="button"
90154
+ (click)="onKeyStrengthsClick(summary)"
90155
+ [ngClass]="getKeyStrengthsStatCardClasses()"
90156
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90157
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90158
+ Key Strengths
90159
+ </div>
90160
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90161
+ {{ summary.keyStrengths?.length || 0 }}
90162
+ </div>
90163
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90164
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90165
+ <symphiq-icon
90166
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90167
+ size="w-4 h-4"
90168
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
90169
+ class="transition-transform group-hover:translate-x-1"
90170
+ />
90171
+ </div>
90172
+ </button>
90173
+ <button
90174
+ type="button"
90175
+ (click)="onCriticalGapsClick(summary)"
90176
+ [ngClass]="getCriticalGapsStatCardClasses()"
90177
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90178
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90179
+ Critical Gaps
90180
+ </div>
90181
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90182
+ {{ summary.criticalGaps?.length || 0 }}
90183
+ </div>
90184
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90185
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90186
+ <symphiq-icon
90187
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90188
+ size="w-4 h-4"
90189
+ [ngClass]="getCriticalGapsButtonTextClasses()"
90190
+ class="transition-transform group-hover:translate-x-1"
90191
+ />
90192
+ </div>
90193
+ </button>
90194
+ <button
90195
+ type="button"
90196
+ (click)="scrollToQuickWins()"
90197
+ [ngClass]="getQuickWinsStatCardClasses()"
90198
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90199
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90200
+ Quick Wins
90201
+ </div>
90202
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90203
+ {{ summary.quickWins?.length || 0 }}
90204
+ </div>
90205
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90206
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90207
+ <symphiq-icon
90208
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90209
+ size="w-4 h-4"
90210
+ [ngClass]="getQuickWinsButtonTextClasses()"
90211
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
90212
+ />
90213
+ </div>
90214
+ </button>
90215
+ </div>
90216
+ </div>
90217
+ </div>
90218
+
90219
+ <!-- Quick Wins -->
90220
+ @if (summary.quickWins && summary.quickWins.length > 0) {
90221
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90222
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90223
+ Quick Wins
90224
+ </h3>
90225
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90226
+ @for (win of summary.quickWins; track $index) {
90227
+ <div [ngClass]="getQuickWinCardClasses()"
90228
+ class="rounded-xl p-6 transition-all duration-300">
90229
+ <div class="space-y-4">
90230
+ <div class="flex items-start gap-3">
90231
+ <span [ngClass]="getNumberBadgeClasses()"
90232
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90233
+ {{ $index + 1 }}
90234
+ </span>
90235
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90236
+ {{ win.action }}
90237
+ </p>
90238
+ </div>
90239
+
90240
+ <div class="flex flex-wrap gap-2">
90241
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
90242
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90243
+ {{ formatLabel(win.effort) }} Effort
90244
+ </span>
90245
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
90246
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90247
+ {{ formatLabel(win.impact) }} Impact
90248
+ </span>
90249
+ </div>
90250
+
90251
+ @if (win.estimatedTimeframe) {
90252
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90253
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90254
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90255
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90256
+ </svg>
90257
+ <span>{{ win.estimatedTimeframe }}</span>
90258
+ </div>
90259
+ }
90260
+
90261
+ @if (win.relatedGoalId) {
90262
+ <div class="space-y-2">
90263
+ <h4 [ngClass]="getMetaTextClasses()"
90264
+ class="text-xs font-semibold uppercase tracking-wider">
90265
+ Related Goal
90266
+ </h4>
90267
+ <symphiq-related-goal-chips
90268
+ [relatedGoalIds]="[win.relatedGoalId]"
90269
+ [allGoals]="allGoals()"
90270
+ [viewMode]="viewMode()"
90271
+ />
90272
+ </div>
90273
+ }
90274
+ </div>
90275
+ </div>
90276
+ }
90277
+ </div>
90278
+ </div>
90279
+ }
90280
+ </section>
90281
+ }
90282
+
90283
+ <!-- FOCUS_AREA Executive Summary -->
90284
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90285
+ <symphiq-focus-area-executive-summary
90286
+ [viewMode]="viewMode()"
90287
+ [summary]="summary"
90288
+ [allGoals]="allGoals()"
90289
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
90290
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
90291
+ />
90292
+ }
90293
+
90294
+ <!-- METRIC Executive Summary -->
90295
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90296
+ <symphiq-metric-executive-summary
90297
+ [viewMode]="viewMode()"
90298
+ [summary]="summary"
90299
+ [metricName]="metricName()"
90300
+ [allGoals]="allGoals()"
90301
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90302
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90303
+ />
90304
+ }
90305
+
90306
+ <!-- Divider Before First Section -->
90307
+ @if (sections(); as sectionList) {
90308
+ @if (sectionList.length > 0 && sectionList[0].icon) {
90309
+ <symphiq-section-divider
90310
+ [viewMode]="viewMode()"
90311
+ [sectionIcon]="sectionList[0].icon"
90312
+ />
90313
+ }
90314
+ }
90315
+
90316
+ <!-- Profile Analysis Sections -->
90317
+ @if (sections(); as sectionList) {
90318
+ <section class="space-y-8">
90319
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90320
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90321
+ class="rounded-xl p-8 scroll-mt-24">
90322
+ <!-- Icon and Title -->
90323
+ <div class="flex items-start gap-3 mb-6">
90324
+ @if (section.icon) {
90325
+ <div [ngClass]="getSectionIconClasses()"
90326
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90327
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90328
+ </div>
90329
+ }
90330
+ <div class="flex-1">
90331
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90332
+ {{ section.title }}
90333
+ </h3>
90334
+ </div>
90335
+ </div>
90336
+
90337
+ <!-- Description and Visual Side-by-Side -->
90338
+ @if (section.description || (section.visual && section.visual.enabled)) {
90339
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90340
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
90341
+ @if (section.visual && section.visual.enabled) {
90342
+ <div class="w-full lg:w-2/3">
90343
+ <symphiq-napkin-visual-placeholder
90344
+ [visual]="section.visual"
90345
+ [viewMode]="viewMode()"
90346
+ />
90347
+ </div>
90348
+ }
90349
+ @if (section.description) {
90350
+ <div class="w-full"
90351
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90352
+ <p [ngClass]="getSectionDescriptionClasses()"
90353
+ class="text-sm leading-relaxed whitespace-pre-line">
90354
+ {{ section.description }}
90355
+ </p>
90356
+ </div>
90357
+ }
90358
+ </div>
90359
+ }
90360
+
90361
+ <!-- Section Content -->
90362
+ <symphiq-profile-section-content
90363
+ [section]="section"
90364
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90365
+ [viewMode]="viewMode()"
90366
+ [sectionIndex]="idx"
90367
+ [allGoals]="allGoals()"
90368
+ [allMetrics]="allMetrics()"
90369
+ [allCharts]="allCharts()"
90370
+ [allInsights]="allInsights()"
90371
+ [businessProfile]="profile()"
90372
+ />
90373
+ </div>
90374
+
90375
+ <!-- Section Divider (between sections) -->
90376
+ @if (!last) {
90377
+ <symphiq-section-divider
90378
+ [viewMode]="viewMode()"
90379
+ [sectionIcon]="sectionList[idx + 1].icon"
90380
+ />
90381
+ }
90382
+ }
90383
+ </section>
90384
+ }
90385
+ }
90386
+
90387
+ </main>
90388
+
90389
+ <!-- Table of Contents (Compact & Expanded Views) -->
90390
+ @if (!isSimplifiedView() && sections()) {
90391
+ <symphiq-floating-toc
90392
+ [sections]="tocSections()"
90393
+ [viewMode]="viewMode()"
90394
+ [embedded]="embedded()"
90395
+ [scrollElement]="scrollElement() ?? undefined"
90396
+ />
90397
+ }
90398
+
90399
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
90400
+ @if (!isSimplifiedView() && sections()) {
90401
+ <symphiq-section-navigation
90402
+ [sections]="tocSections()"
90403
+ [viewMode]="viewMode()"
90404
+ [embedded]="embedded()"
90405
+ [scrollElement]="scrollElement() ?? undefined"
90406
+ />
90407
+ }
90408
+
90409
+ <!-- Search Modal -->
90410
+ <symphiq-search-modal
90411
+ [isOpen]="isSearchOpen()"
90412
+ [isLightMode]="isLightMode()"
90413
+ (close)="closeSearch()"
90414
+ />
90415
+
90416
+ <!-- View Mode Switcher Modal -->
90417
+ <symphiq-view-mode-switcher-modal
90418
+ [isOpen]="isViewModeSwitcherOpen()"
90419
+ [currentMode]="currentDisplayMode()"
90420
+ [viewMode]="viewMode()"
90421
+ (close)="closeViewModeSwitcher()"
90422
+ (modeSelected)="handleDisplayModeChange($event)"
90423
+ />
90424
+
90425
+ <!-- Profile Analysis Modal -->
90426
+ <symphiq-profile-analysis-modal
90427
+ [isLightMode]="isLightMode()"
90428
+ [allMetrics]="allMetrics()"
90429
+ [allInsights]="allInsights()"
90430
+ [allBusinessInsights]="allBusinessInsights()"
90431
+ [allCharts]="allCharts()"
90432
+ >
90433
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90434
+ <symphiq-goal-card
90435
+ [goal]="data.goal"
90436
+ [viewMode]="data.viewMode"
90437
+ [isInModal]="true"
90438
+ [allMetrics]="allMetrics()"
90439
+ [allCharts]="allCharts()"
90440
+ [allInsights]="allInsights()"
90441
+ [currentModalState]="getCurrentModalState()"
90442
+ [businessProfile]="profile()"
90443
+ />
90444
+ }
90445
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90446
+ <symphiq-goal-objectives-modal-content
90447
+ [goal]="data.goal"
90448
+ [viewMode]="data.viewMode"
90449
+ />
90450
+ }
90451
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90452
+ <symphiq-objective-strategies-modal-content
90453
+ [objective]="data.objective"
90454
+ [goalTitle]="data.goalTitle"
90455
+ [viewMode]="data.viewMode"
90456
+ />
90457
+ }
90458
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90459
+ <symphiq-strategy-recommendations-modal-content
90460
+ [strategy]="data.strategy"
90461
+ [objectiveTitle]="data.objectiveTitle"
90462
+ [goalTitle]="data.goalTitle"
90463
+ [viewMode]="data.viewMode"
90464
+ [allMetrics]="allMetrics()"
90465
+ [allCharts]="allCharts()"
90466
+ [allInsights]="allInsights()"
90467
+ [allBusinessInsights]="allBusinessInsights()"
90468
+ [currentModalState]="getCurrentModalState()"
90469
+ />
90470
+ }
90471
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90472
+ <symphiq-category-detail-modal-content
90473
+ [category]="data.category"
90474
+ [viewMode]="data.viewMode"
90475
+ [scrollToSection]="data.scrollToSection"
90476
+ />
90477
+ }
90478
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90479
+ <symphiq-strength-detail-modal-content
90480
+ [strength]="data.strength"
90481
+ [viewMode]="data.viewMode"
90482
+ [allFunnelStrengths]="funnelStrengths()"
90483
+ [currentModalState]="getCurrentModalState()"
90484
+ />
90485
+ }
90486
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90487
+ <symphiq-gap-detail-modal-content
90488
+ [gap]="data.gap"
90489
+ [viewMode]="data.viewMode"
90490
+ [allGoals]="allGoals()"
90491
+ [allWeaknesses]="funnelWeaknesses()"
90492
+ [currentModalState]="getCurrentModalState()"
90493
+ />
90494
+ }
90495
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90496
+ <symphiq-opportunity-detail-modal-content
90497
+ [opportunity]="data.opportunity"
90498
+ [viewMode]="data.viewMode"
90499
+ [allStrengths]="funnelStrengths()"
90500
+ [currentModalState]="getCurrentModalState()"
90501
+ />
90502
+ }
90503
+ </symphiq-profile-analysis-modal>
90504
+
90505
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90506
+ <symphiq-funnel-analysis-modal
90507
+ [isLightMode]="isLightMode()"
90508
+ [viewMode]="viewMode()"
90509
+ [allMetrics]="allMetrics()"
90510
+ [allInsights]="allInsights()"
90511
+ [allCharts]="allCharts()"
90512
+ />
90513
+
90514
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
90515
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90516
+
90517
+ <!-- Tooltip Container -->
90518
+ <symphiq-tooltip-container/>
90519
+
90520
+ <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90521
+ @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90522
+ <symphiq-sticky-subscription-continue-button
90523
+ [viewMode]="viewMode()"
90524
+ [isEnabled]="hasCurrencySelected()"
90525
+ [isLoading]="isCurrencySelectionLoading()"
90526
+ (continueClick)="handleStickyButtonClick()"
90527
+ />
90528
+ }
90529
+
90530
+ <!-- Sticky Footer for Edit Currency Mode -->
90531
+ @if (isEditingCurrency()) {
90532
+ <div
90533
+ [ngClass]="getEditCurrencyFooterClasses()"
90534
+ class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
90535
+ >
90536
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
90537
+ <div class="flex items-center gap-4">
90538
+ <button
90539
+ (click)="handleCancelCurrencyEdit()"
90540
+ [ngClass]="getEditCurrencyCancelButtonClasses()"
90541
+ class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
90542
+ >
90543
+ Cancel
90544
+ </button>
90545
+ <button
90546
+ (click)="handleContinueToPlans()"
90547
+ [disabled]="!editingCurrencySelection()"
90548
+ [ngClass]="getEditCurrencyContinueButtonClasses()"
90549
+ 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"
90550
+ >
90551
+ <span>Continue to Plans</span>
90552
+ <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90553
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
90554
+ </svg>
90555
+ </button>
90556
+ </div>
90557
+ </div>
90558
+ </div>
90559
+ }
90560
+ </div>
90417
90561
  `
90418
90562
  }]
90419
90563
  }], () => [], { funnelModalComponent: [{