@eric-emg/symphiq-components 1.2.344 → 1.2.345
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.
- package/fesm2022/symphiq-components.mjs +125 -125
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +14 -14
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/styles.css +6 -0
|
@@ -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-
|
|
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-
|
|
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 #
|
|
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 #
|
|
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-
|
|
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-
|
|
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>
|