@eric-emg/symphiq-components 1.2.344 → 1.2.346

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 +736 -734
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +42 -41
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/styles.css +6 -0
package/fesm2022/symphiq-components.mjs CHANGED
@@ -86998,10 +86998,10 @@ class PlanCardComponent {
86998
86998
  aiUsageTooltipContent() {
86999
86999
  return {
87000
87000
  title: 'How it works:',
87001
- markdown: `Your monthly subscription fee covers access to core features.
87002
-
87003
- AI usage is tracked throughout the month.
87004
-
87001
+ markdown: `Your monthly subscription fee covers access to core features.
87002
+
87003
+ AI usage is tracked throughout the month.
87004
+
87005
87005
  At the end of each month, your total AI usage is calculated and automatically billed as a separate line item on your invoice.`
87006
87006
  };
87007
87007
  }
@@ -87010,7 +87010,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
87010
87010
  const isBestValue = this.showBestValueBadge();
87011
87011
  if (this.viewMode() === ViewModeEnum.DARK) {
87012
87012
  if (isBestValue && isSelected) {
87013
- return 'bg-slate-800/60 border-purple-500 shadow-2xl shadow-purple-500/30';
87013
+ return 'bg-slate-800/60 border-blue-500 shadow-2xl shadow-blue-500/30';
87014
87014
  }
87015
87015
  if (isBestValue) {
87016
87016
  return 'bg-slate-800/50 border-amber-500/70 hover:border-amber-400 hover:shadow-2xl hover:shadow-amber-500/40';
@@ -87022,7 +87022,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
87022
87022
  }
87023
87023
  else {
87024
87024
  if (isBestValue && isSelected) {
87025
- return 'bg-white border-purple-500 shadow-2xl shadow-purple-500/30';
87025
+ return 'bg-white border-blue-500 shadow-2xl shadow-blue-500/30';
87026
87026
  }
87027
87027
  if (isBestValue) {
87028
87028
  return 'bg-white border-amber-500/70 hover:border-amber-500 hover:shadow-2xl hover:shadow-amber-500/40';
@@ -87288,126 +87288,126 @@ At the end of each month, your total AI usage is calculated and automatically bi
87288
87288
  i0.ɵɵproperty("ngClass", ctx.contractTermsLabelClasses());
87289
87289
  i0.ɵɵadvance(2);
87290
87290
  i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses())("innerHTML", ctx.getContractTerms(), i0.ɵɵsanitizeHtml);
87291
- } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes _ngcontent-%COMP%_border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed,#8b5cf6,#9333ea,#a855f7);background-size:300% 300%}.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 12s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow-selected 12s ease-in-out infinite}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 14s ease-in-out infinite}.savings-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 14s ease-in-out infinite}"], changeDetection: 0 }); }
87291
+ } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #3b82f699,0 0 40px #3b82f666,0 0 60px #3b82f633,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #3b82f6b3,0 0 50px #3b82f680,0 0 75px #3b82f64d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes _ngcontent-%COMP%_border-glow-selected{0%,to{box-shadow:0 0 20px #3b82f666,0 0 40px #3b82f633,0 0 60px #3b82f61a}50%{box-shadow:0 0 25px #3b82f680,0 0 50px #3b82f64d,0 0 75px #3b82f626}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;background:linear-gradient(135deg,#3b82f6,#2563eb,#1d4ed8,#3b82f6,#2563eb,#3b82f6);background-size:300% 300%}.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 12s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow-selected 12s ease-in-out infinite}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 14s ease-in-out infinite}.savings-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 14s ease-in-out infinite}"], changeDetection: 0 }); }
87292
87292
  }
87293
87293
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanCardComponent, [{
87294
87294
  type: Component,
87295
- args: [{ selector: 'symphiq-plan-card', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
87296
- <div
87297
- (click)="handleCardClick()"
87298
- [ngClass]="cardContainerClasses()"
87299
- [class.best-value-card]="showBestValueBadge() && !isSelected()"
87300
- [class.best-value-card-selected]="showBestValueBadge() && isSelected()"
87301
- class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
87302
-
87303
- @if (showBestValueBadge()) {
87304
- <div class="absolute -top-5 left-1/2 flex flex-col items-center gap-2 z-10">
87305
- <div [ngClass]="badgeClasses()"
87306
- [class.best-value-badge]="!isSelected()"
87307
- [class.best-value-badge-selected]="isSelected()"
87308
- class="px-6 py-2 rounded-full text-base font-extrabold shadow-2xl">
87309
- <span class="drop-shadow-lg">Best Value</span>
87310
- </div>
87311
- @if (getSavingsPercentage()) {
87312
- <div [ngClass]="savingsBadgeClasses()"
87313
- [class.savings-badge]="!isSelected()"
87314
- [class.savings-badge-selected]="isSelected()"
87315
- class="px-3 py-1 rounded-full text-xs font-bold shadow-lg">
87316
- {{ getSavingsPercentage() }}
87317
- </div>
87318
- }
87319
- </div>
87320
- }
87321
-
87322
- <div class="flex items-start justify-between mb-6">
87323
- <div class="flex-1">
87324
- <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
87325
- {{ getPlanTitle() }}
87326
- </h3>
87327
- @if (showBestValueBadge()) {
87328
- <div [ngClass]="recommendedTextClasses()" class="text-sm font-semibold mb-2 flex items-center gap-1">
87329
- <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87330
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
87331
- </svg>
87332
- Most Popular Choice
87333
- </div>
87334
- }
87335
- <div class="flex items-baseline gap-2">
87336
- <span [ngClass]="priceClasses()" class="text-4xl font-bold">
87337
- {{ formatPrice() }}
87338
- </span>
87339
- <span [ngClass]="pricePeriodClasses()" class="text-base">
87340
- {{ getPricePeriod() }}
87341
- </span>
87342
- </div>
87343
- @if (showBestValueBadge() && getSavingsAmount()) {
87344
- <div [ngClass]="savingsTextClasses()" class="text-sm font-bold mt-2 flex items-center gap-1">
87345
- <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87346
- <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
87347
- </svg>
87348
- {{ getSavingsAmount() }}
87349
- </div>
87350
- }
87351
- </div>
87352
- <div class="flex-shrink-0 ml-4">
87353
- <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
87354
- @if (isSelected()) {
87355
- <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
87356
- }
87357
- </div>
87358
- </div>
87359
- </div>
87360
-
87361
- <div [ngClass]="sectionClasses()" class="space-y-4">
87362
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87363
- <div class="flex items-center gap-2">
87364
- <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
87365
- <button
87366
- [libSymphiqTooltip]="aiUsageTooltipContent()"
87367
- tooltipType="markdown"
87368
- tooltipPosition="right"
87369
- [ngClass]="tooltipButtonClasses()"
87370
- class="w-5 h-5 rounded-full flex items-center justify-center">
87371
- <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87372
- <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
87373
- </svg>
87374
- </button>
87375
- </div>
87376
- <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
87377
- Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
87378
- </span>
87379
- </div>
87380
-
87381
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87382
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
87383
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87384
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87385
- </svg>
87386
- </div>
87387
-
87388
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87389
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
87390
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87391
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87392
- </svg>
87393
- </div>
87394
-
87395
- <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
87396
- <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
87397
- <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87398
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87399
- </svg>
87400
- </div>
87401
-
87402
- <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
87403
- <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
87404
- Contract terms
87405
- </h4>
87406
- <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
87407
- </div>
87408
- </div>
87409
- </div>
87410
- `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge{animation:pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:pulse-glow 12s ease-in-out infinite,shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected{animation:pulse-glow-selected 12s ease-in-out infinite,shimmer 20s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed,#8b5cf6,#9333ea,#a855f7);background-size:300% 300%}.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 12s infinite}.best-value-card{animation:border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected{animation:border-glow-selected 12s ease-in-out infinite}.best-value-card:hover{transform:scale(1.02)}.savings-badge{animation:pulse-glow 14s ease-in-out infinite}.savings-badge-selected{animation:pulse-glow-selected 14s ease-in-out infinite}\n"] }]
87295
+ args: [{ selector: 'symphiq-plan-card', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
87296
+ <div
87297
+ (click)="handleCardClick()"
87298
+ [ngClass]="cardContainerClasses()"
87299
+ [class.best-value-card]="showBestValueBadge() && !isSelected()"
87300
+ [class.best-value-card-selected]="showBestValueBadge() && isSelected()"
87301
+ class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
87302
+
87303
+ @if (showBestValueBadge()) {
87304
+ <div class="absolute -top-5 left-1/2 flex flex-col items-center gap-2 z-10">
87305
+ <div [ngClass]="badgeClasses()"
87306
+ [class.best-value-badge]="!isSelected()"
87307
+ [class.best-value-badge-selected]="isSelected()"
87308
+ class="px-6 py-2 rounded-full text-base font-extrabold shadow-2xl">
87309
+ <span class="drop-shadow-lg">Best Value</span>
87310
+ </div>
87311
+ @if (getSavingsPercentage()) {
87312
+ <div [ngClass]="savingsBadgeClasses()"
87313
+ [class.savings-badge]="!isSelected()"
87314
+ [class.savings-badge-selected]="isSelected()"
87315
+ class="px-3 py-1 rounded-full text-xs font-bold shadow-lg">
87316
+ {{ getSavingsPercentage() }}
87317
+ </div>
87318
+ }
87319
+ </div>
87320
+ }
87321
+
87322
+ <div class="flex items-start justify-between mb-6">
87323
+ <div class="flex-1">
87324
+ <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
87325
+ {{ getPlanTitle() }}
87326
+ </h3>
87327
+ @if (showBestValueBadge()) {
87328
+ <div [ngClass]="recommendedTextClasses()" class="text-sm font-semibold mb-2 flex items-center gap-1">
87329
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87330
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
87331
+ </svg>
87332
+ Most Popular Choice
87333
+ </div>
87334
+ }
87335
+ <div class="flex items-baseline gap-2">
87336
+ <span [ngClass]="priceClasses()" class="text-4xl font-bold">
87337
+ {{ formatPrice() }}
87338
+ </span>
87339
+ <span [ngClass]="pricePeriodClasses()" class="text-base">
87340
+ {{ getPricePeriod() }}
87341
+ </span>
87342
+ </div>
87343
+ @if (showBestValueBadge() && getSavingsAmount()) {
87344
+ <div [ngClass]="savingsTextClasses()" class="text-sm font-bold mt-2 flex items-center gap-1">
87345
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87346
+ <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
87347
+ </svg>
87348
+ {{ getSavingsAmount() }}
87349
+ </div>
87350
+ }
87351
+ </div>
87352
+ <div class="flex-shrink-0 ml-4">
87353
+ <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
87354
+ @if (isSelected()) {
87355
+ <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
87356
+ }
87357
+ </div>
87358
+ </div>
87359
+ </div>
87360
+
87361
+ <div [ngClass]="sectionClasses()" class="space-y-4">
87362
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87363
+ <div class="flex items-center gap-2">
87364
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
87365
+ <button
87366
+ [libSymphiqTooltip]="aiUsageTooltipContent()"
87367
+ tooltipType="markdown"
87368
+ tooltipPosition="right"
87369
+ [ngClass]="tooltipButtonClasses()"
87370
+ class="w-5 h-5 rounded-full flex items-center justify-center">
87371
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
87372
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
87373
+ </svg>
87374
+ </button>
87375
+ </div>
87376
+ <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
87377
+ Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
87378
+ </span>
87379
+ </div>
87380
+
87381
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87382
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
87383
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87384
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87385
+ </svg>
87386
+ </div>
87387
+
87388
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
87389
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
87390
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87391
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87392
+ </svg>
87393
+ </div>
87394
+
87395
+ <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
87396
+ <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
87397
+ <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
87398
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
87399
+ </svg>
87400
+ </div>
87401
+
87402
+ <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
87403
+ <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
87404
+ Contract terms
87405
+ </h4>
87406
+ <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
87407
+ </div>
87408
+ </div>
87409
+ </div>
87410
+ `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #3b82f699,0 0 40px #3b82f666,0 0 60px #3b82f633,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #3b82f6b3,0 0 50px #3b82f680,0 0 75px #3b82f64d,inset 0 0 25px #fff6}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes border-glow-selected{0%,to{box-shadow:0 0 20px #3b82f666,0 0 40px #3b82f633,0 0 60px #3b82f61a}50%{box-shadow:0 0 25px #3b82f680,0 0 50px #3b82f64d,0 0 75px #3b82f626}}.best-value-badge{animation:pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:pulse-glow 12s ease-in-out infinite,shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected{animation:pulse-glow-selected 12s ease-in-out infinite,shimmer 20s linear infinite;background:linear-gradient(135deg,#3b82f6,#2563eb,#1d4ed8,#3b82f6,#2563eb,#3b82f6);background-size:300% 300%}.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 12s infinite}.best-value-card{animation:border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected{animation:border-glow-selected 12s ease-in-out infinite}.best-value-card:hover{transform:scale(1.02)}.savings-badge{animation:pulse-glow 14s ease-in-out infinite}.savings-badge-selected{animation:pulse-glow-selected 14s ease-in-out infinite}\n"] }]
87411
87411
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], monthlyComparisonPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyComparisonPrice", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
87412
87412
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 270 }); })();
87413
87413
 
@@ -87593,7 +87593,7 @@ class PlanSelectionContainerComponent {
87593
87593
  : 'text-slate-700';
87594
87594
  }
87595
87595
  static { this.ɵfac = function PlanSelectionContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanSelectionContainerComponent)(); }; }
87596
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionContainerComponent, selectors: [["symphiq-plan-selection-container"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"], planCardInfos: [1, "planCardInfos"], isLoading: [1, "isLoading"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", editCurrency: "editCurrency", checkout: "checkout" }, decls: 23, vars: 13, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [3, "periodUnitChanged", "viewMode", "selectedPeriodUnit", "isLoading"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-6", "min-h-[500px]", "mb-32"], [1, "flex", "flex-col", "gap-8", "mb-32", "min-h-[500px]"], [1, "text-center", "py-16", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "px-6", "py-4", "border-t", "shadow-lg", "z-50", 3, "ngClass"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["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"], [1, "text-lg", "font-semibold", 3, "ngClass"], [1, "text-sm", "mt-2", 3, "ngClass"], [1, "max-w-4xl", "mx-auto", "flex", "items-center", "justify-between"], [3, "ngClass"], [1, "font-medium"], [1, "px-6", "py-3", "bg-gradient-to-r", "from-emerald-500", "to-cyan-500", "hover:from-emerald-600", "hover:to-cyan-600", "text-white", "font-semibold", "rounded-lg", "shadow-md", "transition-all", "duration-200", 3, "click"]], template: function PlanSelectionContainerComponent_Template(rf, ctx) { if (rf & 1) {
87596
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionContainerComponent, selectors: [["symphiq-plan-selection-container"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"], planCardInfos: [1, "planCardInfos"], isLoading: [1, "isLoading"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", editCurrency: "editCurrency", checkout: "checkout" }, decls: 23, vars: 13, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [3, "periodUnitChanged", "viewMode", "selectedPeriodUnit", "isLoading"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-6", "min-h-[500px]", "mb-32"], [1, "flex", "flex-col", "gap-8", "mb-32", "min-h-[500px]"], [1, "text-center", "py-16", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "px-6", "py-4", "border-t", "shadow-lg", "z-50", 3, "ngClass"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["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"], [1, "text-lg", "font-semibold", 3, "ngClass"], [1, "text-sm", "mt-2", 3, "ngClass"], [1, "max-w-4xl", "mx-auto", "flex", "items-center", "justify-between"], [3, "ngClass"], [1, "font-medium"], [1, "px-12", "py-3", "min-w-[200px]", "bg-gradient-to-r", "from-emerald-500", "to-cyan-500", "hover:from-emerald-600", "hover:to-cyan-600", "text-white", "font-semibold", "rounded-lg", "shadow-md", "transition-all", "duration-200", 3, "click"]], template: function PlanSelectionContainerComponent_Template(rf, ctx) { if (rf & 1) {
87597
87597
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
87598
87598
  i0.ɵɵnamespaceSVG();
87599
87599
  i0.ɵɵelementStart(4, "svg", 4);
@@ -87739,7 +87739,7 @@ class PlanSelectionContainerComponent {
87739
87739
  </div>
87740
87740
  <button
87741
87741
  (click)="handleCheckout()"
87742
- class="px-6 py-3 bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-semibold rounded-lg shadow-md transition-all duration-200"
87742
+ class="px-12 py-3 min-w-[200px] bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-semibold rounded-lg shadow-md transition-all duration-200"
87743
87743
  >
87744
87744
  Checkout plan
87745
87745
  </button>
@@ -88512,7 +88512,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Co
88512
88512
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
88513
88513
  const _r5 = i0.ɵɵgetCurrentView();
88514
88514
  i0.ɵɵelementStart(0, "div", 31)(1, "symphiq-plan-selection-container", 35);
88515
- i0.ɵɵlistener("periodUnitChanged", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_periodUnitChanged_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handlePeriodUnitChange($event)); })("planSelected", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_planSelected_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handlePlanSelection($event)); })("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_editCurrency_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleEditCurrencyClick()); });
88515
+ i0.ɵɵlistener("periodUnitChanged", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_periodUnitChanged_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handlePeriodUnitChange($event)); })("planSelected", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_planSelected_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handlePlanSelection($event)); })("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_editCurrency_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleEditCurrencyClick()); })("checkout", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template_symphiq_plan_selection_container_checkout_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.checkoutPlanClick.emit($event)); });
88516
88516
  i0.ɵɵelementEnd()();
88517
88517
  } if (rf & 2) {
88518
88518
  let tmp_4_0;
@@ -89064,6 +89064,7 @@ class SymphiqProfileAnalysisDashboardComponent {
89064
89064
  this.editCurrencyClick = output();
89065
89065
  this.periodUnitChanged = output();
89066
89066
  this.planSelected = output();
89067
+ this.checkoutPlanClick = output();
89067
89068
  this.isCurrencySelectionLoading = signal(false, ...(ngDevMode ? [{ debugName: "isCurrencySelectionLoading" }] : []));
89068
89069
  this.selectedCurrency = signal(null, ...(ngDevMode ? [{ debugName: "selectedCurrency" }] : []));
89069
89070
  this.isPlanLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPlanLoading" }] : []));
@@ -89899,7 +89900,7 @@ class SymphiqProfileAnalysisDashboardComponent {
89899
89900
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _t.first);
89900
89901
  } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
89901
89902
  i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
89902
- } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected" }, features: [i0.ɵɵNgOnChangesFeature], decls: 29, vars: 50, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "goals", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "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", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
89903
+ } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 29, vars: 50, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "goals", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "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", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
89903
89904
  i0.ɵɵelementStart(0, "div", 0);
89904
89905
  i0.ɵɵelement(1, "div", 1);
89905
89906
  i0.ɵɵelementStart(2, "div");
@@ -90010,621 +90011,622 @@ class SymphiqProfileAnalysisDashboardComponent {
90010
90011
  standalone: true,
90011
90012
  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],
90012
90013
  changeDetection: ChangeDetectionStrategy.OnPush,
90013
- template: `
90014
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
90015
- <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>
90016
-
90017
- <!-- Scroll Progress Bar -->
90018
- <div
90019
- [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'">
90020
- <div
90021
- [style.width.%]="scrollProgress()"
90022
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
90023
- class="h-full transition-all duration-200 ease-out">
90024
- </div>
90025
- </div>
90026
-
90027
- <div class="relative z-[51]">
90028
- <!-- Dashboard Header -->
90029
- <symphiq-dashboard-header
90030
- [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
90031
- [subtitle]="getAnalysisSubtitle()"
90032
- [currentSection]="getAnalysisSubtitle()"
90033
- [viewMode]="viewMode()"
90034
- [viewModeLabel]="displayModeLabel()"
90035
- [isLoading]="isLoading()"
90036
- [requestedByUser]="requestedByUser()"
90037
- [createdDate]="profileAnalysis()?.selfContentCompletedDate"
90038
- (searchClick)="openSearch()"
90039
- (viewModeClick)="openViewModeSwitcher()"
90040
- />
90041
-
90042
- <!-- Journey Progress Banner -->
90043
- @if (isSimplifiedView() && !isOnboarded()) {
90044
- <symphiq-journey-progress-indicator
90045
- [viewMode]="viewMode()"
90046
- [currentStepId]="currentStepId()"
90047
- [showNextStepAction]="shouldShowContinueButton()"
90048
- [forDemo]="forDemo()"
90049
- [maxAccessibleStepId]="maxAccessibleStepId()"
90050
- (nextStepClick)="nextStepClick.emit()"
90051
- (stepClick)="stepClick.emit($event)"
90052
- />
90053
- }
90054
-
90055
- <!-- Main Content -->
90056
- <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()">
90057
-
90058
- <!-- Welcome Banner (Simplified View Only) -->
90059
- @if (isSimplifiedView()) {
90060
- <div class="mb-12">
90061
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
90062
- <symphiq-shop-welcome-banner
90063
- [viewMode]="viewMode()"
90064
- [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
90065
- [isOnboarded]="isOnboarded()"
90066
- />
90067
- }
90068
- @if (isFocusAreaAnalysis()) {
90069
- <symphiq-focus-area-welcome-banner
90070
- [viewMode]="viewMode()"
90071
- [focusAreaDomain]="focusAreaDomain()"
90072
- [focusAreaName]="focusAreaName()"
90073
- [focusAreaDetails]="focusAreaDetails()"
90074
- />
90075
- }
90076
- @if (isMetricAnalysis()) {
90077
- <symphiq-metric-welcome-banner
90078
- [viewMode]="viewMode()"
90079
- [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
90080
- [isOnboarded]="isOnboarded()"
90081
- />
90082
- }
90083
- </div>
90084
- }
90085
-
90086
- <!-- Simplified View Content -->
90087
- @if (isSimplifiedView()) {
90088
- <!-- Strategic Insights & Goals (or Subscription Flow) -->
90089
- <div class="mb-8">
90090
- @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
90091
- <symphiq-strategic-goals-tiled-grid
90092
- [goals]="strategicRoadmapGoals()"
90093
- [viewMode]="viewMode()"
90094
- (viewMoreClick)="openGoalModal($event)"
90095
- />
90096
- } @else {
90097
- <!-- Subscription Value Proposition -->
90098
- @if (!hasBillingCurrency() || isEditingCurrency()) {
90099
- @if (!hasBillingCurrency()) {
90100
- <div class="mb-8">
90101
- <symphiq-subscription-value-proposition-card
90102
- [viewMode]="viewMode()"
90103
- />
90104
- </div>
90105
- }
90106
-
90107
- <!-- Currency Selection -->
90108
- <symphiq-billing-currency-selector-card
90109
- [viewMode]="viewMode()"
90110
- [isLoading]="isCurrencySelectionLoading()"
90111
- [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
90112
- (currencySelected)="handleCurrencyChange($event)"
90113
- />
90114
- } @else if (showPlanSelection()) {
90115
- <!-- Plan Selection -->
90116
-
90117
- <div class="mb-32">
90118
- <symphiq-plan-selection-container
90119
- [viewMode]="viewMode()"
90120
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90121
- [planCardInfos]="planCardInfos()"
90122
- [isLoading]="isPlanLoading()"
90123
- [selectedPeriodUnit]="selectedPeriodUnit()"
90124
- (periodUnitChanged)="handlePeriodUnitChange($event)"
90125
- (planSelected)="handlePlanSelection($event)"
90126
- (editCurrency)="handleEditCurrencyClick()"
90127
- />
90128
- </div>
90129
- } @else {
90130
- <symphiq-plan-selection-placeholder-card
90131
- [viewMode]="viewMode()"
90132
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90133
- (editCurrency)="handleEditCurrencyClick()"
90134
- />
90135
- }
90136
- }
90137
- </div>
90138
-
90139
- <!-- Supporting Business Context -->
90140
- @if (nonStrategicSections().length > 0) {
90141
- <div>
90142
- <symphiq-collapsible-analysis-section-group
90143
- [sections]="nonStrategicSections()"
90144
- [viewMode]="viewMode()"
90145
- [executiveSummary]="executiveSummary()"
90146
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
90147
- [metricExecutiveSummary]="metricExecutiveSummary()"
90148
- [metricName]="metricName()"
90149
- [allGoals]="allGoals()"
90150
- [allMetrics]="allMetrics()"
90151
- [allCharts]="allCharts()"
90152
- [allInsights]="allInsights()"
90153
- [businessProfile]="profile()"
90154
- />
90155
- </div>
90156
- }
90157
- }
90158
-
90159
- <!-- Compact & Expanded View Content -->
90160
- @if (!isSimplifiedView()) {
90161
- <!-- SHOP Executive Summary -->
90162
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
90163
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
90164
- <!-- Summary Banner -->
90165
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
90166
- <div class="space-y-6">
90167
- <div class="flex items-start justify-between gap-4">
90168
- <div class="flex-1">
90169
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
90170
- Executive Summary
90171
- </h2>
90172
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
90173
- {{ summary.gradeRationale }}
90174
- </p>
90175
- </div>
90176
- @if (summary.overallGrade) {
90177
- <symphiq-grade-badge
90178
- [grade]="summary.overallGrade"
90179
- [gradeRationale]="summary.gradeRationale || ''"
90180
- [viewMode]="viewMode()"
90181
- />
90182
- }
90183
- </div>
90184
-
90185
- @if (summary.narrative) {
90186
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
90187
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
90188
- Analysis Narrative
90189
- </h3>
90190
- <div class="relative">
90191
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
90192
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
90193
- <symphiq-napkin-visual-placeholder
90194
- [visual]="summary.napkinVisual"
90195
- [viewMode]="viewMode()"
90196
- />
90197
- </div>
90198
- }
90199
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
90200
- {{ summary.narrative }}
90201
- </p>
90202
- <div class="clear-both"></div>
90203
- </div>
90204
- </div>
90205
- }
90206
-
90207
- <!-- Stats -->
90208
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90209
- <button
90210
- type="button"
90211
- (click)="onKeyStrengthsClick(summary)"
90212
- [ngClass]="getKeyStrengthsStatCardClasses()"
90213
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90214
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90215
- Key Strengths
90216
- </div>
90217
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90218
- {{ summary.keyStrengths?.length || 0 }}
90219
- </div>
90220
- <div class="flex items-center gap-1.5 text-xs font-medium">
90221
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90222
- <symphiq-icon
90223
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90224
- size="w-4 h-4"
90225
- [ngClass]="getKeyStrengthsButtonTextClasses()"
90226
- class="transition-transform group-hover:translate-x-1"
90227
- />
90228
- </div>
90229
- </button>
90230
- <button
90231
- type="button"
90232
- (click)="onCriticalGapsClick(summary)"
90233
- [ngClass]="getCriticalGapsStatCardClasses()"
90234
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90235
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90236
- Critical Gaps
90237
- </div>
90238
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90239
- {{ summary.criticalGaps?.length || 0 }}
90240
- </div>
90241
- <div class="flex items-center gap-1.5 text-xs font-medium">
90242
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90243
- <symphiq-icon
90244
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90245
- size="w-4 h-4"
90246
- [ngClass]="getCriticalGapsButtonTextClasses()"
90247
- class="transition-transform group-hover:translate-x-1"
90248
- />
90249
- </div>
90250
- </button>
90251
- <button
90252
- type="button"
90253
- (click)="scrollToQuickWins()"
90254
- [ngClass]="getQuickWinsStatCardClasses()"
90255
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90256
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90257
- Quick Wins
90258
- </div>
90259
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90260
- {{ summary.quickWins?.length || 0 }}
90261
- </div>
90262
- <div class="flex items-center gap-1.5 text-xs font-medium">
90263
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90264
- <symphiq-icon
90265
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90266
- size="w-4 h-4"
90267
- [ngClass]="getQuickWinsButtonTextClasses()"
90268
- class="transition-transform group-hover:translate-y-1 animate-bounce"
90269
- />
90270
- </div>
90271
- </button>
90272
- </div>
90273
- </div>
90274
- </div>
90275
-
90276
- <!-- Quick Wins -->
90277
- @if (summary.quickWins && summary.quickWins.length > 0) {
90278
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90279
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90280
- Quick Wins
90281
- </h3>
90282
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90283
- @for (win of summary.quickWins; track $index) {
90284
- <div [ngClass]="getQuickWinCardClasses()"
90285
- class="rounded-xl p-6 transition-all duration-300">
90286
- <div class="space-y-4">
90287
- <div class="flex items-start gap-3">
90288
- <span [ngClass]="getNumberBadgeClasses()"
90289
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90290
- {{ $index + 1 }}
90291
- </span>
90292
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90293
- {{ win.action }}
90294
- </p>
90295
- </div>
90296
-
90297
- <div class="flex flex-wrap gap-2">
90298
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
90299
- class="px-3 py-1 rounded-full text-xs font-semibold">
90300
- {{ formatLabel(win.effort) }} Effort
90301
- </span>
90302
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
90303
- class="px-3 py-1 rounded-full text-xs font-semibold">
90304
- {{ formatLabel(win.impact) }} Impact
90305
- </span>
90306
- </div>
90307
-
90308
- @if (win.estimatedTimeframe) {
90309
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90310
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90311
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90312
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90313
- </svg>
90314
- <span>{{ win.estimatedTimeframe }}</span>
90315
- </div>
90316
- }
90317
-
90318
- @if (win.relatedGoalId) {
90319
- <div class="space-y-2">
90320
- <h4 [ngClass]="getMetaTextClasses()"
90321
- class="text-xs font-semibold uppercase tracking-wider">
90322
- Related Goal
90323
- </h4>
90324
- <symphiq-related-goal-chips
90325
- [relatedGoalIds]="[win.relatedGoalId]"
90326
- [allGoals]="allGoals()"
90327
- [viewMode]="viewMode()"
90328
- />
90329
- </div>
90330
- }
90331
- </div>
90332
- </div>
90333
- }
90334
- </div>
90335
- </div>
90336
- }
90337
- </section>
90338
- }
90339
-
90340
- <!-- FOCUS_AREA Executive Summary -->
90341
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90342
- <symphiq-focus-area-executive-summary
90343
- [viewMode]="viewMode()"
90344
- [summary]="summary"
90345
- [allGoals]="allGoals()"
90346
- (topPrioritiesClick)="handleTopPrioritiesClick()"
90347
- (priorityDetailClick)="handlePriorityDetailClick($event)"
90348
- />
90349
- }
90350
-
90351
- <!-- METRIC Executive Summary -->
90352
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90353
- <symphiq-metric-executive-summary
90354
- [viewMode]="viewMode()"
90355
- [summary]="summary"
90356
- [metricName]="metricName()"
90357
- [allGoals]="allGoals()"
90358
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90359
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90360
- />
90361
- }
90362
-
90363
- <!-- Divider Before First Section -->
90364
- @if (sections(); as sectionList) {
90365
- @if (sectionList.length > 0 && sectionList[0].icon) {
90366
- <symphiq-section-divider
90367
- [viewMode]="viewMode()"
90368
- [sectionIcon]="sectionList[0].icon"
90369
- />
90370
- }
90371
- }
90372
-
90373
- <!-- Profile Analysis Sections -->
90374
- @if (sections(); as sectionList) {
90375
- <section class="space-y-8">
90376
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90377
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90378
- class="rounded-xl p-8 scroll-mt-24">
90379
- <!-- Icon and Title -->
90380
- <div class="flex items-start gap-3 mb-6">
90381
- @if (section.icon) {
90382
- <div [ngClass]="getSectionIconClasses()"
90383
- class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90384
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90385
- </div>
90386
- }
90387
- <div class="flex-1">
90388
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90389
- {{ section.title }}
90390
- </h3>
90391
- </div>
90392
- </div>
90393
-
90394
- <!-- Description and Visual Side-by-Side -->
90395
- @if (section.description || (section.visual && section.visual.enabled)) {
90396
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90397
- [class.lg:flex-row-reverse]="idx % 2 === 0">
90398
- @if (section.visual && section.visual.enabled) {
90399
- <div class="w-full lg:w-2/3">
90400
- <symphiq-napkin-visual-placeholder
90401
- [visual]="section.visual"
90402
- [viewMode]="viewMode()"
90403
- />
90404
- </div>
90405
- }
90406
- @if (section.description) {
90407
- <div class="w-full"
90408
- [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90409
- <p [ngClass]="getSectionDescriptionClasses()"
90410
- class="text-sm leading-relaxed whitespace-pre-line">
90411
- {{ section.description }}
90412
- </p>
90413
- </div>
90414
- }
90415
- </div>
90416
- }
90417
-
90418
- <!-- Section Content -->
90419
- <symphiq-profile-section-content
90420
- [section]="section"
90421
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90422
- [viewMode]="viewMode()"
90423
- [sectionIndex]="idx"
90424
- [allGoals]="allGoals()"
90425
- [allMetrics]="allMetrics()"
90426
- [allCharts]="allCharts()"
90427
- [allInsights]="allInsights()"
90428
- [businessProfile]="profile()"
90429
- />
90430
- </div>
90431
-
90432
- <!-- Section Divider (between sections) -->
90433
- @if (!last) {
90434
- <symphiq-section-divider
90435
- [viewMode]="viewMode()"
90436
- [sectionIcon]="sectionList[idx + 1].icon"
90437
- />
90438
- }
90439
- }
90440
- </section>
90441
- }
90442
- }
90443
-
90444
- </main>
90445
-
90446
- <!-- Table of Contents (Compact & Expanded Views) -->
90447
- @if (!isSimplifiedView() && sections()) {
90448
- <symphiq-floating-toc
90449
- [sections]="tocSections()"
90450
- [viewMode]="viewMode()"
90451
- [embedded]="embedded()"
90452
- [scrollElement]="scrollElement() ?? undefined"
90453
- />
90454
- }
90455
-
90456
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
90457
- @if (!isSimplifiedView() && sections()) {
90458
- <symphiq-section-navigation
90459
- [sections]="tocSections()"
90460
- [viewMode]="viewMode()"
90461
- [embedded]="embedded()"
90462
- [scrollElement]="scrollElement() ?? undefined"
90463
- />
90464
- }
90465
-
90466
- <!-- Search Modal -->
90467
- <symphiq-search-modal
90468
- [isOpen]="isSearchOpen()"
90469
- [isLightMode]="isLightMode()"
90470
- (close)="closeSearch()"
90471
- />
90472
-
90473
- <!-- View Mode Switcher Modal -->
90474
- <symphiq-view-mode-switcher-modal
90475
- [isOpen]="isViewModeSwitcherOpen()"
90476
- [currentMode]="currentDisplayMode()"
90477
- [viewMode]="viewMode()"
90478
- (close)="closeViewModeSwitcher()"
90479
- (modeSelected)="handleDisplayModeChange($event)"
90480
- />
90481
-
90482
- <!-- Profile Analysis Modal -->
90483
- <symphiq-profile-analysis-modal
90484
- [isLightMode]="isLightMode()"
90485
- [allMetrics]="allMetrics()"
90486
- [allInsights]="allInsights()"
90487
- [allBusinessInsights]="allBusinessInsights()"
90488
- [allCharts]="allCharts()"
90489
- >
90490
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90491
- <symphiq-goal-card
90492
- [goal]="data.goal"
90493
- [viewMode]="data.viewMode"
90494
- [isInModal]="true"
90495
- [allMetrics]="allMetrics()"
90496
- [allCharts]="allCharts()"
90497
- [allInsights]="allInsights()"
90498
- [currentModalState]="getCurrentModalState()"
90499
- [businessProfile]="profile()"
90500
- />
90501
- }
90502
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90503
- <symphiq-goal-objectives-modal-content
90504
- [goal]="data.goal"
90505
- [viewMode]="data.viewMode"
90506
- />
90507
- }
90508
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90509
- <symphiq-objective-strategies-modal-content
90510
- [objective]="data.objective"
90511
- [goalTitle]="data.goalTitle"
90512
- [viewMode]="data.viewMode"
90513
- />
90514
- }
90515
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90516
- <symphiq-strategy-recommendations-modal-content
90517
- [strategy]="data.strategy"
90518
- [objectiveTitle]="data.objectiveTitle"
90519
- [goalTitle]="data.goalTitle"
90520
- [viewMode]="data.viewMode"
90521
- [allMetrics]="allMetrics()"
90522
- [allCharts]="allCharts()"
90523
- [allInsights]="allInsights()"
90524
- [allBusinessInsights]="allBusinessInsights()"
90525
- [currentModalState]="getCurrentModalState()"
90526
- />
90527
- }
90528
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90529
- <symphiq-category-detail-modal-content
90530
- [category]="data.category"
90531
- [viewMode]="data.viewMode"
90532
- [scrollToSection]="data.scrollToSection"
90533
- />
90534
- }
90535
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90536
- <symphiq-strength-detail-modal-content
90537
- [strength]="data.strength"
90538
- [viewMode]="data.viewMode"
90539
- [allFunnelStrengths]="funnelStrengths()"
90540
- [currentModalState]="getCurrentModalState()"
90541
- />
90542
- }
90543
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90544
- <symphiq-gap-detail-modal-content
90545
- [gap]="data.gap"
90546
- [viewMode]="data.viewMode"
90547
- [allGoals]="allGoals()"
90548
- [allWeaknesses]="funnelWeaknesses()"
90549
- [currentModalState]="getCurrentModalState()"
90550
- />
90551
- }
90552
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90553
- <symphiq-opportunity-detail-modal-content
90554
- [opportunity]="data.opportunity"
90555
- [viewMode]="data.viewMode"
90556
- [allStrengths]="funnelStrengths()"
90557
- [currentModalState]="getCurrentModalState()"
90558
- />
90559
- }
90560
- </symphiq-profile-analysis-modal>
90561
-
90562
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90563
- <symphiq-funnel-analysis-modal
90564
- [isLightMode]="isLightMode()"
90565
- [viewMode]="viewMode()"
90566
- [allMetrics]="allMetrics()"
90567
- [allInsights]="allInsights()"
90568
- [allCharts]="allCharts()"
90569
- />
90570
-
90571
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
90572
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90573
-
90574
- <!-- Tooltip Container -->
90575
- <symphiq-tooltip-container/>
90576
-
90577
- <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90578
- @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90579
- <symphiq-sticky-subscription-continue-button
90580
- [viewMode]="viewMode()"
90581
- [isEnabled]="hasCurrencySelected()"
90582
- [isLoading]="isCurrencySelectionLoading()"
90583
- (continueClick)="handleStickyButtonClick()"
90584
- />
90585
- }
90586
-
90587
- <!-- Sticky Footer for Edit Currency Mode -->
90588
- @if (isEditingCurrency()) {
90589
- <div
90590
- [ngClass]="getEditCurrencyFooterClasses()"
90591
- class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
90592
- >
90593
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
90594
- <div class="flex items-center gap-4">
90595
- <button
90596
- (click)="handleCancelCurrencyEdit()"
90597
- [ngClass]="getEditCurrencyCancelButtonClasses()"
90598
- class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
90599
- >
90600
- Cancel
90601
- </button>
90602
- <button
90603
- (click)="handleContinueToPlans()"
90604
- [disabled]="!editingCurrencySelection()"
90605
- [ngClass]="getEditCurrencyContinueButtonClasses()"
90606
- 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"
90607
- >
90608
- <span>Continue to Plans</span>
90609
- <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90610
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
90611
- </svg>
90612
- </button>
90613
- </div>
90614
- </div>
90615
- </div>
90616
- }
90617
- </div>
90014
+ template: `
90015
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
90016
+ <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>
90017
+
90018
+ <!-- Scroll Progress Bar -->
90019
+ <div
90020
+ [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'">
90021
+ <div
90022
+ [style.width.%]="scrollProgress()"
90023
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
90024
+ class="h-full transition-all duration-200 ease-out">
90025
+ </div>
90026
+ </div>
90027
+
90028
+ <div class="relative z-[51]">
90029
+ <!-- Dashboard Header -->
90030
+ <symphiq-dashboard-header
90031
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
90032
+ [subtitle]="getAnalysisSubtitle()"
90033
+ [currentSection]="getAnalysisSubtitle()"
90034
+ [viewMode]="viewMode()"
90035
+ [viewModeLabel]="displayModeLabel()"
90036
+ [isLoading]="isLoading()"
90037
+ [requestedByUser]="requestedByUser()"
90038
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
90039
+ (searchClick)="openSearch()"
90040
+ (viewModeClick)="openViewModeSwitcher()"
90041
+ />
90042
+
90043
+ <!-- Journey Progress Banner -->
90044
+ @if (isSimplifiedView() && !isOnboarded()) {
90045
+ <symphiq-journey-progress-indicator
90046
+ [viewMode]="viewMode()"
90047
+ [currentStepId]="currentStepId()"
90048
+ [showNextStepAction]="shouldShowContinueButton()"
90049
+ [forDemo]="forDemo()"
90050
+ [maxAccessibleStepId]="maxAccessibleStepId()"
90051
+ (nextStepClick)="nextStepClick.emit()"
90052
+ (stepClick)="stepClick.emit($event)"
90053
+ />
90054
+ }
90055
+
90056
+ <!-- Main Content -->
90057
+ <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()">
90058
+
90059
+ <!-- Welcome Banner (Simplified View Only) -->
90060
+ @if (isSimplifiedView()) {
90061
+ <div class="mb-12">
90062
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
90063
+ <symphiq-shop-welcome-banner
90064
+ [viewMode]="viewMode()"
90065
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
90066
+ [isOnboarded]="isOnboarded()"
90067
+ />
90068
+ }
90069
+ @if (isFocusAreaAnalysis()) {
90070
+ <symphiq-focus-area-welcome-banner
90071
+ [viewMode]="viewMode()"
90072
+ [focusAreaDomain]="focusAreaDomain()"
90073
+ [focusAreaName]="focusAreaName()"
90074
+ [focusAreaDetails]="focusAreaDetails()"
90075
+ />
90076
+ }
90077
+ @if (isMetricAnalysis()) {
90078
+ <symphiq-metric-welcome-banner
90079
+ [viewMode]="viewMode()"
90080
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
90081
+ [isOnboarded]="isOnboarded()"
90082
+ />
90083
+ }
90084
+ </div>
90085
+ }
90086
+
90087
+ <!-- Simplified View Content -->
90088
+ @if (isSimplifiedView()) {
90089
+ <!-- Strategic Insights & Goals (or Subscription Flow) -->
90090
+ <div class="mb-8">
90091
+ @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
90092
+ <symphiq-strategic-goals-tiled-grid
90093
+ [goals]="strategicRoadmapGoals()"
90094
+ [viewMode]="viewMode()"
90095
+ (viewMoreClick)="openGoalModal($event)"
90096
+ />
90097
+ } @else {
90098
+ <!-- Subscription Value Proposition -->
90099
+ @if (!hasBillingCurrency() || isEditingCurrency()) {
90100
+ @if (!hasBillingCurrency()) {
90101
+ <div class="mb-8">
90102
+ <symphiq-subscription-value-proposition-card
90103
+ [viewMode]="viewMode()"
90104
+ />
90105
+ </div>
90106
+ }
90107
+
90108
+ <!-- Currency Selection -->
90109
+ <symphiq-billing-currency-selector-card
90110
+ [viewMode]="viewMode()"
90111
+ [isLoading]="isCurrencySelectionLoading()"
90112
+ [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
90113
+ (currencySelected)="handleCurrencyChange($event)"
90114
+ />
90115
+ } @else if (showPlanSelection()) {
90116
+ <!-- Plan Selection -->
90117
+
90118
+ <div class="mb-32">
90119
+ <symphiq-plan-selection-container
90120
+ [viewMode]="viewMode()"
90121
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90122
+ [planCardInfos]="planCardInfos()"
90123
+ [isLoading]="isPlanLoading()"
90124
+ [selectedPeriodUnit]="selectedPeriodUnit()"
90125
+ (periodUnitChanged)="handlePeriodUnitChange($event)"
90126
+ (planSelected)="handlePlanSelection($event)"
90127
+ (editCurrency)="handleEditCurrencyClick()"
90128
+ (checkout)="checkoutPlanClick.emit($event)"
90129
+ />
90130
+ </div>
90131
+ } @else {
90132
+ <symphiq-plan-selection-placeholder-card
90133
+ [viewMode]="viewMode()"
90134
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
90135
+ (editCurrency)="handleEditCurrencyClick()"
90136
+ />
90137
+ }
90138
+ }
90139
+ </div>
90140
+
90141
+ <!-- Supporting Business Context -->
90142
+ @if (nonStrategicSections().length > 0) {
90143
+ <div>
90144
+ <symphiq-collapsible-analysis-section-group
90145
+ [sections]="nonStrategicSections()"
90146
+ [viewMode]="viewMode()"
90147
+ [executiveSummary]="executiveSummary()"
90148
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
90149
+ [metricExecutiveSummary]="metricExecutiveSummary()"
90150
+ [metricName]="metricName()"
90151
+ [allGoals]="allGoals()"
90152
+ [allMetrics]="allMetrics()"
90153
+ [allCharts]="allCharts()"
90154
+ [allInsights]="allInsights()"
90155
+ [businessProfile]="profile()"
90156
+ />
90157
+ </div>
90158
+ }
90159
+ }
90160
+
90161
+ <!-- Compact & Expanded View Content -->
90162
+ @if (!isSimplifiedView()) {
90163
+ <!-- SHOP Executive Summary -->
90164
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
90165
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
90166
+ <!-- Summary Banner -->
90167
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
90168
+ <div class="space-y-6">
90169
+ <div class="flex items-start justify-between gap-4">
90170
+ <div class="flex-1">
90171
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
90172
+ Executive Summary
90173
+ </h2>
90174
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
90175
+ {{ summary.gradeRationale }}
90176
+ </p>
90177
+ </div>
90178
+ @if (summary.overallGrade) {
90179
+ <symphiq-grade-badge
90180
+ [grade]="summary.overallGrade"
90181
+ [gradeRationale]="summary.gradeRationale || ''"
90182
+ [viewMode]="viewMode()"
90183
+ />
90184
+ }
90185
+ </div>
90186
+
90187
+ @if (summary.narrative) {
90188
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
90189
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
90190
+ Analysis Narrative
90191
+ </h3>
90192
+ <div class="relative">
90193
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
90194
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
90195
+ <symphiq-napkin-visual-placeholder
90196
+ [visual]="summary.napkinVisual"
90197
+ [viewMode]="viewMode()"
90198
+ />
90199
+ </div>
90200
+ }
90201
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
90202
+ {{ summary.narrative }}
90203
+ </p>
90204
+ <div class="clear-both"></div>
90205
+ </div>
90206
+ </div>
90207
+ }
90208
+
90209
+ <!-- Stats -->
90210
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
90211
+ <button
90212
+ type="button"
90213
+ (click)="onKeyStrengthsClick(summary)"
90214
+ [ngClass]="getKeyStrengthsStatCardClasses()"
90215
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90216
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90217
+ Key Strengths
90218
+ </div>
90219
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
90220
+ {{ summary.keyStrengths?.length || 0 }}
90221
+ </div>
90222
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90223
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
90224
+ <symphiq-icon
90225
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90226
+ size="w-4 h-4"
90227
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
90228
+ class="transition-transform group-hover:translate-x-1"
90229
+ />
90230
+ </div>
90231
+ </button>
90232
+ <button
90233
+ type="button"
90234
+ (click)="onCriticalGapsClick(summary)"
90235
+ [ngClass]="getCriticalGapsStatCardClasses()"
90236
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90237
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90238
+ Critical Gaps
90239
+ </div>
90240
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
90241
+ {{ summary.criticalGaps?.length || 0 }}
90242
+ </div>
90243
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90244
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
90245
+ <symphiq-icon
90246
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90247
+ size="w-4 h-4"
90248
+ [ngClass]="getCriticalGapsButtonTextClasses()"
90249
+ class="transition-transform group-hover:translate-x-1"
90250
+ />
90251
+ </div>
90252
+ </button>
90253
+ <button
90254
+ type="button"
90255
+ (click)="scrollToQuickWins()"
90256
+ [ngClass]="getQuickWinsStatCardClasses()"
90257
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90258
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90259
+ Quick Wins
90260
+ </div>
90261
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90262
+ {{ summary.quickWins?.length || 0 }}
90263
+ </div>
90264
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90265
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90266
+ <symphiq-icon
90267
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90268
+ size="w-4 h-4"
90269
+ [ngClass]="getQuickWinsButtonTextClasses()"
90270
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
90271
+ />
90272
+ </div>
90273
+ </button>
90274
+ </div>
90275
+ </div>
90276
+ </div>
90277
+
90278
+ <!-- Quick Wins -->
90279
+ @if (summary.quickWins && summary.quickWins.length > 0) {
90280
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90281
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90282
+ Quick Wins
90283
+ </h3>
90284
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90285
+ @for (win of summary.quickWins; track $index) {
90286
+ <div [ngClass]="getQuickWinCardClasses()"
90287
+ class="rounded-xl p-6 transition-all duration-300">
90288
+ <div class="space-y-4">
90289
+ <div class="flex items-start gap-3">
90290
+ <span [ngClass]="getNumberBadgeClasses()"
90291
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90292
+ {{ $index + 1 }}
90293
+ </span>
90294
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90295
+ {{ win.action }}
90296
+ </p>
90297
+ </div>
90298
+
90299
+ <div class="flex flex-wrap gap-2">
90300
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
90301
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90302
+ {{ formatLabel(win.effort) }} Effort
90303
+ </span>
90304
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
90305
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90306
+ {{ formatLabel(win.impact) }} Impact
90307
+ </span>
90308
+ </div>
90309
+
90310
+ @if (win.estimatedTimeframe) {
90311
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90312
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90313
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90314
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90315
+ </svg>
90316
+ <span>{{ win.estimatedTimeframe }}</span>
90317
+ </div>
90318
+ }
90319
+
90320
+ @if (win.relatedGoalId) {
90321
+ <div class="space-y-2">
90322
+ <h4 [ngClass]="getMetaTextClasses()"
90323
+ class="text-xs font-semibold uppercase tracking-wider">
90324
+ Related Goal
90325
+ </h4>
90326
+ <symphiq-related-goal-chips
90327
+ [relatedGoalIds]="[win.relatedGoalId]"
90328
+ [allGoals]="allGoals()"
90329
+ [viewMode]="viewMode()"
90330
+ />
90331
+ </div>
90332
+ }
90333
+ </div>
90334
+ </div>
90335
+ }
90336
+ </div>
90337
+ </div>
90338
+ }
90339
+ </section>
90340
+ }
90341
+
90342
+ <!-- FOCUS_AREA Executive Summary -->
90343
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90344
+ <symphiq-focus-area-executive-summary
90345
+ [viewMode]="viewMode()"
90346
+ [summary]="summary"
90347
+ [allGoals]="allGoals()"
90348
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
90349
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
90350
+ />
90351
+ }
90352
+
90353
+ <!-- METRIC Executive Summary -->
90354
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90355
+ <symphiq-metric-executive-summary
90356
+ [viewMode]="viewMode()"
90357
+ [summary]="summary"
90358
+ [metricName]="metricName()"
90359
+ [allGoals]="allGoals()"
90360
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90361
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90362
+ />
90363
+ }
90364
+
90365
+ <!-- Divider Before First Section -->
90366
+ @if (sections(); as sectionList) {
90367
+ @if (sectionList.length > 0 && sectionList[0].icon) {
90368
+ <symphiq-section-divider
90369
+ [viewMode]="viewMode()"
90370
+ [sectionIcon]="sectionList[0].icon"
90371
+ />
90372
+ }
90373
+ }
90374
+
90375
+ <!-- Profile Analysis Sections -->
90376
+ @if (sections(); as sectionList) {
90377
+ <section class="space-y-8">
90378
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90379
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90380
+ class="rounded-xl p-8 scroll-mt-24">
90381
+ <!-- Icon and Title -->
90382
+ <div class="flex items-start gap-3 mb-6">
90383
+ @if (section.icon) {
90384
+ <div [ngClass]="getSectionIconClasses()"
90385
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90386
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90387
+ </div>
90388
+ }
90389
+ <div class="flex-1">
90390
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90391
+ {{ section.title }}
90392
+ </h3>
90393
+ </div>
90394
+ </div>
90395
+
90396
+ <!-- Description and Visual Side-by-Side -->
90397
+ @if (section.description || (section.visual && section.visual.enabled)) {
90398
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90399
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
90400
+ @if (section.visual && section.visual.enabled) {
90401
+ <div class="w-full lg:w-2/3">
90402
+ <symphiq-napkin-visual-placeholder
90403
+ [visual]="section.visual"
90404
+ [viewMode]="viewMode()"
90405
+ />
90406
+ </div>
90407
+ }
90408
+ @if (section.description) {
90409
+ <div class="w-full"
90410
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90411
+ <p [ngClass]="getSectionDescriptionClasses()"
90412
+ class="text-sm leading-relaxed whitespace-pre-line">
90413
+ {{ section.description }}
90414
+ </p>
90415
+ </div>
90416
+ }
90417
+ </div>
90418
+ }
90419
+
90420
+ <!-- Section Content -->
90421
+ <symphiq-profile-section-content
90422
+ [section]="section"
90423
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90424
+ [viewMode]="viewMode()"
90425
+ [sectionIndex]="idx"
90426
+ [allGoals]="allGoals()"
90427
+ [allMetrics]="allMetrics()"
90428
+ [allCharts]="allCharts()"
90429
+ [allInsights]="allInsights()"
90430
+ [businessProfile]="profile()"
90431
+ />
90432
+ </div>
90433
+
90434
+ <!-- Section Divider (between sections) -->
90435
+ @if (!last) {
90436
+ <symphiq-section-divider
90437
+ [viewMode]="viewMode()"
90438
+ [sectionIcon]="sectionList[idx + 1].icon"
90439
+ />
90440
+ }
90441
+ }
90442
+ </section>
90443
+ }
90444
+ }
90445
+
90446
+ </main>
90447
+
90448
+ <!-- Table of Contents (Compact & Expanded Views) -->
90449
+ @if (!isSimplifiedView() && sections()) {
90450
+ <symphiq-floating-toc
90451
+ [sections]="tocSections()"
90452
+ [viewMode]="viewMode()"
90453
+ [embedded]="embedded()"
90454
+ [scrollElement]="scrollElement() ?? undefined"
90455
+ />
90456
+ }
90457
+
90458
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
90459
+ @if (!isSimplifiedView() && sections()) {
90460
+ <symphiq-section-navigation
90461
+ [sections]="tocSections()"
90462
+ [viewMode]="viewMode()"
90463
+ [embedded]="embedded()"
90464
+ [scrollElement]="scrollElement() ?? undefined"
90465
+ />
90466
+ }
90467
+
90468
+ <!-- Search Modal -->
90469
+ <symphiq-search-modal
90470
+ [isOpen]="isSearchOpen()"
90471
+ [isLightMode]="isLightMode()"
90472
+ (close)="closeSearch()"
90473
+ />
90474
+
90475
+ <!-- View Mode Switcher Modal -->
90476
+ <symphiq-view-mode-switcher-modal
90477
+ [isOpen]="isViewModeSwitcherOpen()"
90478
+ [currentMode]="currentDisplayMode()"
90479
+ [viewMode]="viewMode()"
90480
+ (close)="closeViewModeSwitcher()"
90481
+ (modeSelected)="handleDisplayModeChange($event)"
90482
+ />
90483
+
90484
+ <!-- Profile Analysis Modal -->
90485
+ <symphiq-profile-analysis-modal
90486
+ [isLightMode]="isLightMode()"
90487
+ [allMetrics]="allMetrics()"
90488
+ [allInsights]="allInsights()"
90489
+ [allBusinessInsights]="allBusinessInsights()"
90490
+ [allCharts]="allCharts()"
90491
+ >
90492
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90493
+ <symphiq-goal-card
90494
+ [goal]="data.goal"
90495
+ [viewMode]="data.viewMode"
90496
+ [isInModal]="true"
90497
+ [allMetrics]="allMetrics()"
90498
+ [allCharts]="allCharts()"
90499
+ [allInsights]="allInsights()"
90500
+ [currentModalState]="getCurrentModalState()"
90501
+ [businessProfile]="profile()"
90502
+ />
90503
+ }
90504
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90505
+ <symphiq-goal-objectives-modal-content
90506
+ [goal]="data.goal"
90507
+ [viewMode]="data.viewMode"
90508
+ />
90509
+ }
90510
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90511
+ <symphiq-objective-strategies-modal-content
90512
+ [objective]="data.objective"
90513
+ [goalTitle]="data.goalTitle"
90514
+ [viewMode]="data.viewMode"
90515
+ />
90516
+ }
90517
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90518
+ <symphiq-strategy-recommendations-modal-content
90519
+ [strategy]="data.strategy"
90520
+ [objectiveTitle]="data.objectiveTitle"
90521
+ [goalTitle]="data.goalTitle"
90522
+ [viewMode]="data.viewMode"
90523
+ [allMetrics]="allMetrics()"
90524
+ [allCharts]="allCharts()"
90525
+ [allInsights]="allInsights()"
90526
+ [allBusinessInsights]="allBusinessInsights()"
90527
+ [currentModalState]="getCurrentModalState()"
90528
+ />
90529
+ }
90530
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90531
+ <symphiq-category-detail-modal-content
90532
+ [category]="data.category"
90533
+ [viewMode]="data.viewMode"
90534
+ [scrollToSection]="data.scrollToSection"
90535
+ />
90536
+ }
90537
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90538
+ <symphiq-strength-detail-modal-content
90539
+ [strength]="data.strength"
90540
+ [viewMode]="data.viewMode"
90541
+ [allFunnelStrengths]="funnelStrengths()"
90542
+ [currentModalState]="getCurrentModalState()"
90543
+ />
90544
+ }
90545
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90546
+ <symphiq-gap-detail-modal-content
90547
+ [gap]="data.gap"
90548
+ [viewMode]="data.viewMode"
90549
+ [allGoals]="allGoals()"
90550
+ [allWeaknesses]="funnelWeaknesses()"
90551
+ [currentModalState]="getCurrentModalState()"
90552
+ />
90553
+ }
90554
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90555
+ <symphiq-opportunity-detail-modal-content
90556
+ [opportunity]="data.opportunity"
90557
+ [viewMode]="data.viewMode"
90558
+ [allStrengths]="funnelStrengths()"
90559
+ [currentModalState]="getCurrentModalState()"
90560
+ />
90561
+ }
90562
+ </symphiq-profile-analysis-modal>
90563
+
90564
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90565
+ <symphiq-funnel-analysis-modal
90566
+ [isLightMode]="isLightMode()"
90567
+ [viewMode]="viewMode()"
90568
+ [allMetrics]="allMetrics()"
90569
+ [allInsights]="allInsights()"
90570
+ [allCharts]="allCharts()"
90571
+ />
90572
+
90573
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
90574
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90575
+
90576
+ <!-- Tooltip Container -->
90577
+ <symphiq-tooltip-container/>
90578
+
90579
+ <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90580
+ @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90581
+ <symphiq-sticky-subscription-continue-button
90582
+ [viewMode]="viewMode()"
90583
+ [isEnabled]="hasCurrencySelected()"
90584
+ [isLoading]="isCurrencySelectionLoading()"
90585
+ (continueClick)="handleStickyButtonClick()"
90586
+ />
90587
+ }
90588
+
90589
+ <!-- Sticky Footer for Edit Currency Mode -->
90590
+ @if (isEditingCurrency()) {
90591
+ <div
90592
+ [ngClass]="getEditCurrencyFooterClasses()"
90593
+ class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
90594
+ >
90595
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
90596
+ <div class="flex items-center gap-4">
90597
+ <button
90598
+ (click)="handleCancelCurrencyEdit()"
90599
+ [ngClass]="getEditCurrencyCancelButtonClasses()"
90600
+ class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
90601
+ >
90602
+ Cancel
90603
+ </button>
90604
+ <button
90605
+ (click)="handleContinueToPlans()"
90606
+ [disabled]="!editingCurrencySelection()"
90607
+ [ngClass]="getEditCurrencyContinueButtonClasses()"
90608
+ 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"
90609
+ >
90610
+ <span>Continue to Plans</span>
90611
+ <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90612
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
90613
+ </svg>
90614
+ </button>
90615
+ </div>
90616
+ </div>
90617
+ </div>
90618
+ }
90619
+ </div>
90618
90620
  `
90619
90621
  }]
90620
90622
  }], () => [], { funnelModalComponent: [{
90621
90623
  type: ViewChild,
90622
90624
  args: [ModalComponent]
90623
- }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], onWindowScroll: [{
90625
+ }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], checkoutPlanClick: [{ type: i0.Output, args: ["checkoutPlanClick"] }], onWindowScroll: [{
90624
90626
  type: HostListener,
90625
90627
  args: ['window:scroll', ['$event']]
90626
90628
  }] }); })();
90627
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 721 }); })();
90629
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 723 }); })();
90628
90630
 
90629
90631
  class ScrollProgressBarComponent {
90630
90632
  constructor() {