@eric-emg/symphiq-components 1.2.332 → 1.2.333
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 +116 -96
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +8 -8
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/styles.css +0 -16
|
@@ -87478,7 +87478,7 @@ class PlanSelectionContainerComponent {
|
|
|
87478
87478
|
: 'text-slate-500';
|
|
87479
87479
|
}
|
|
87480
87480
|
static { this.ɵfac = function PlanSelectionContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanSelectionContainerComponent)(); }; }
|
|
87481
|
-
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" }, decls: 22, vars: 12, 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", "py-16", "space-y-6"], [1, "
|
|
87481
|
+
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" }, decls: 22, vars: 12, 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", "py-16", "space-y-6"], [1, "flex", "flex-col", "gap-8", "mb-32"], [1, "text-center", "py-16", 3, "ngClass"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit"], ["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"]], template: function PlanSelectionContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
87482
87482
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
|
|
87483
87483
|
i0.ɵɵnamespaceSVG();
|
|
87484
87484
|
i0.ɵɵelementStart(4, "svg", 4);
|
|
@@ -87536,81 +87536,81 @@ class PlanSelectionContainerComponent {
|
|
|
87536
87536
|
standalone: true,
|
|
87537
87537
|
imports: [CommonModule, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent],
|
|
87538
87538
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
87539
|
-
template: `
|
|
87540
|
-
<div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
|
|
87541
|
-
<div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
|
|
87542
|
-
<div class="flex items-center gap-3">
|
|
87543
|
-
<div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
|
|
87544
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87545
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
|
87546
|
-
</svg>
|
|
87547
|
-
</div>
|
|
87548
|
-
<div>
|
|
87549
|
-
<h2 [ngClass]="titleClasses()" class="text-xl font-bold">
|
|
87550
|
-
Choose Your Plan
|
|
87551
|
-
</h2>
|
|
87552
|
-
<p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
|
|
87553
|
-
Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
|
|
87554
|
-
<button
|
|
87555
|
-
(click)="editCurrency.emit()"
|
|
87556
|
-
[ngClass]="editButtonClasses()"
|
|
87557
|
-
class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
|
|
87558
|
-
>
|
|
87559
|
-
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87560
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
87561
|
-
</svg>
|
|
87562
|
-
Edit
|
|
87563
|
-
</button>
|
|
87564
|
-
</p>
|
|
87565
|
-
</div>
|
|
87566
|
-
</div>
|
|
87567
|
-
</div>
|
|
87568
|
-
|
|
87569
|
-
<div [ngClass]="contentClasses()" class="p-8">
|
|
87570
|
-
<symphiq-billing-period-toggle
|
|
87571
|
-
[viewMode]="viewMode()"
|
|
87572
|
-
[selectedPeriodUnit]="selectedPeriodUnit()"
|
|
87573
|
-
[isLoading]="isLoading()"
|
|
87574
|
-
(periodUnitChanged)="handlePeriodChange($event)"
|
|
87575
|
-
/>
|
|
87576
|
-
|
|
87577
|
-
@if (isLoading()) {
|
|
87578
|
-
<div class="flex flex-col items-center justify-center py-16 space-y-6">
|
|
87579
|
-
<symphiq-indeterminate-spinner
|
|
87580
|
-
[viewMode]="viewMode()"
|
|
87581
|
-
[size]="'large'"
|
|
87582
|
-
/>
|
|
87583
|
-
<p [ngClass]="loadingTextClasses()" class="text-base font-medium">
|
|
87584
|
-
Loading your plan options...
|
|
87585
|
-
</p>
|
|
87586
|
-
</div>
|
|
87587
|
-
} @else if (planCardInfos() && planCardInfos()!.length > 0) {
|
|
87588
|
-
<div class="
|
|
87589
|
-
@for (plan of planCardInfos(); track plan.planItem.id) {
|
|
87590
|
-
<symphiq-plan-card
|
|
87591
|
-
[viewMode]="viewMode()"
|
|
87592
|
-
[planInfo]="plan"
|
|
87593
|
-
[isSelected]="isSelectedPlan(plan)"
|
|
87594
|
-
[selectedPeriodUnit]="selectedPeriodUnit()"
|
|
87595
|
-
(planSelected)="handlePlanSelection($event)"
|
|
87596
|
-
/>
|
|
87597
|
-
}
|
|
87598
|
-
</div>
|
|
87599
|
-
} @else {
|
|
87600
|
-
<div [ngClass]="emptyStateClasses()" class="text-center py-16">
|
|
87601
|
-
<svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87602
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
87603
|
-
</svg>
|
|
87604
|
-
<p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
|
|
87605
|
-
No plans available
|
|
87606
|
-
</p>
|
|
87607
|
-
<p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
|
|
87608
|
-
Please contact support if this issue persists
|
|
87609
|
-
</p>
|
|
87610
|
-
</div>
|
|
87611
|
-
}
|
|
87612
|
-
</div>
|
|
87613
|
-
</div>
|
|
87539
|
+
template: `
|
|
87540
|
+
<div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
|
|
87541
|
+
<div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
|
|
87542
|
+
<div class="flex items-center gap-3">
|
|
87543
|
+
<div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
|
|
87544
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87545
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
|
87546
|
+
</svg>
|
|
87547
|
+
</div>
|
|
87548
|
+
<div>
|
|
87549
|
+
<h2 [ngClass]="titleClasses()" class="text-xl font-bold">
|
|
87550
|
+
Choose Your Plan
|
|
87551
|
+
</h2>
|
|
87552
|
+
<p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
|
|
87553
|
+
Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
|
|
87554
|
+
<button
|
|
87555
|
+
(click)="editCurrency.emit()"
|
|
87556
|
+
[ngClass]="editButtonClasses()"
|
|
87557
|
+
class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
|
|
87558
|
+
>
|
|
87559
|
+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87560
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
87561
|
+
</svg>
|
|
87562
|
+
Edit
|
|
87563
|
+
</button>
|
|
87564
|
+
</p>
|
|
87565
|
+
</div>
|
|
87566
|
+
</div>
|
|
87567
|
+
</div>
|
|
87568
|
+
|
|
87569
|
+
<div [ngClass]="contentClasses()" class="p-8">
|
|
87570
|
+
<symphiq-billing-period-toggle
|
|
87571
|
+
[viewMode]="viewMode()"
|
|
87572
|
+
[selectedPeriodUnit]="selectedPeriodUnit()"
|
|
87573
|
+
[isLoading]="isLoading()"
|
|
87574
|
+
(periodUnitChanged)="handlePeriodChange($event)"
|
|
87575
|
+
/>
|
|
87576
|
+
|
|
87577
|
+
@if (isLoading()) {
|
|
87578
|
+
<div class="flex flex-col items-center justify-center py-16 space-y-6">
|
|
87579
|
+
<symphiq-indeterminate-spinner
|
|
87580
|
+
[viewMode]="viewMode()"
|
|
87581
|
+
[size]="'large'"
|
|
87582
|
+
/>
|
|
87583
|
+
<p [ngClass]="loadingTextClasses()" class="text-base font-medium">
|
|
87584
|
+
Loading your plan options...
|
|
87585
|
+
</p>
|
|
87586
|
+
</div>
|
|
87587
|
+
} @else if (planCardInfos() && planCardInfos()!.length > 0) {
|
|
87588
|
+
<div class="flex flex-col gap-8 mb-32">
|
|
87589
|
+
@for (plan of planCardInfos(); track plan.planItem.id) {
|
|
87590
|
+
<symphiq-plan-card
|
|
87591
|
+
[viewMode]="viewMode()"
|
|
87592
|
+
[planInfo]="plan"
|
|
87593
|
+
[isSelected]="isSelectedPlan(plan)"
|
|
87594
|
+
[selectedPeriodUnit]="selectedPeriodUnit()"
|
|
87595
|
+
(planSelected)="handlePlanSelection($event)"
|
|
87596
|
+
/>
|
|
87597
|
+
}
|
|
87598
|
+
</div>
|
|
87599
|
+
} @else {
|
|
87600
|
+
<div [ngClass]="emptyStateClasses()" class="text-center py-16">
|
|
87601
|
+
<svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
87602
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
87603
|
+
</svg>
|
|
87604
|
+
<p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
|
|
87605
|
+
No plans available
|
|
87606
|
+
</p>
|
|
87607
|
+
<p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
|
|
87608
|
+
Please contact support if this issue persists
|
|
87609
|
+
</p>
|
|
87610
|
+
</div>
|
|
87611
|
+
}
|
|
87612
|
+
</div>
|
|
87613
|
+
</div>
|
|
87614
87614
|
`
|
|
87615
87615
|
}]
|
|
87616
87616
|
}], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }] }); })();
|
|
@@ -88377,7 +88377,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Co
|
|
|
88377
88377
|
function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
88378
88378
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
88379
88379
|
i0.ɵɵelementStart(0, "div", 31)(1, "symphiq-plan-selection-container", 35);
|
|
88380
|
-
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.
|
|
88380
|
+
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()); });
|
|
88381
88381
|
i0.ɵɵelementEnd()();
|
|
88382
88382
|
} if (rf & 2) {
|
|
88383
88383
|
let tmp_4_0;
|
|
@@ -88887,8 +88887,13 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_28_Template(rf, ct
|
|
|
88887
88887
|
i0.ɵɵelementEnd();
|
|
88888
88888
|
i0.ɵɵelementStart(5, "button", 98);
|
|
88889
88889
|
i0.ɵɵlistener("click", function SymphiqProfileAnalysisDashboardComponent_Conditional_28_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleContinueToPlans()); });
|
|
88890
|
-
i0.ɵɵ
|
|
88891
|
-
i0.ɵɵ
|
|
88890
|
+
i0.ɵɵelementStart(6, "span");
|
|
88891
|
+
i0.ɵɵtext(7, "Continue to Plans");
|
|
88892
|
+
i0.ɵɵelementEnd();
|
|
88893
|
+
i0.ɵɵnamespaceSVG();
|
|
88894
|
+
i0.ɵɵelementStart(8, "svg", 99);
|
|
88895
|
+
i0.ɵɵelement(9, "path", 100);
|
|
88896
|
+
i0.ɵɵelementEnd()()()()();
|
|
88892
88897
|
} if (rf & 2) {
|
|
88893
88898
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
88894
88899
|
i0.ɵɵproperty("ngClass", ctx_r1.getEditCurrencyFooterClasses());
|
|
@@ -88896,6 +88901,8 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_28_Template(rf, ct
|
|
|
88896
88901
|
i0.ɵɵproperty("ngClass", ctx_r1.getEditCurrencyCancelButtonClasses());
|
|
88897
88902
|
i0.ɵɵadvance(2);
|
|
88898
88903
|
i0.ɵɵproperty("disabled", !ctx_r1.editingCurrencySelection())("ngClass", ctx_r1.getEditCurrencyContinueButtonClasses());
|
|
88904
|
+
i0.ɵɵadvance(3);
|
|
88905
|
+
i0.ɵɵclassProp("translate-x-1", ctx_r1.editingCurrencySelection());
|
|
88899
88906
|
} }
|
|
88900
88907
|
class SymphiqProfileAnalysisDashboardComponent {
|
|
88901
88908
|
constructor() {
|
|
@@ -89713,18 +89720,28 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
89713
89720
|
}
|
|
89714
89721
|
getEditCurrencyFooterClasses() {
|
|
89715
89722
|
return this.viewMode() === ViewModeEnum.DARK
|
|
89716
|
-
? 'bg-slate-900/
|
|
89717
|
-
: 'bg-white/
|
|
89723
|
+
? 'bg-slate-900/80 border-slate-700/50'
|
|
89724
|
+
: 'bg-white/80 border-slate-200';
|
|
89718
89725
|
}
|
|
89719
89726
|
getEditCurrencyCancelButtonClasses() {
|
|
89720
89727
|
return this.viewMode() === ViewModeEnum.DARK
|
|
89721
|
-
? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white'
|
|
89722
|
-
: 'bg-slate-200 text-slate-700 hover:bg-slate-300 hover:text-slate-900';
|
|
89728
|
+
? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white hover:scale-[1.02] active:scale-[0.98]'
|
|
89729
|
+
: 'bg-slate-200 text-slate-700 hover:bg-slate-300 hover:text-slate-900 hover:scale-[1.02] active:scale-[0.98]';
|
|
89723
89730
|
}
|
|
89724
89731
|
getEditCurrencyContinueButtonClasses() {
|
|
89725
|
-
|
|
89726
|
-
|
|
89727
|
-
|
|
89732
|
+
const isDisabled = !this.editingCurrencySelection();
|
|
89733
|
+
if (this.viewMode() === ViewModeEnum.DARK) {
|
|
89734
|
+
if (isDisabled) {
|
|
89735
|
+
return 'bg-slate-700 text-slate-500 cursor-not-allowed opacity-50';
|
|
89736
|
+
}
|
|
89737
|
+
return 'bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600 text-white hover:from-blue-500 hover:via-cyan-500 hover:to-teal-500 hover:scale-[1.02] hover:shadow-blue-500/25 active:scale-[0.98] cursor-pointer';
|
|
89738
|
+
}
|
|
89739
|
+
else {
|
|
89740
|
+
if (isDisabled) {
|
|
89741
|
+
return 'bg-slate-300 text-slate-500 cursor-not-allowed opacity-50';
|
|
89742
|
+
}
|
|
89743
|
+
return 'bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600 text-white hover:from-blue-700 hover:via-cyan-700 hover:to-teal-700 hover:scale-[1.02] hover:shadow-blue-600/25 active:scale-[0.98] cursor-pointer';
|
|
89744
|
+
}
|
|
89728
89745
|
}
|
|
89729
89746
|
static { this.ɵfac = function SymphiqProfileAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileAnalysisDashboardComponent)(); }; }
|
|
89730
89747
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileAnalysisDashboardComponent, selectors: [["symphiq-profile-analysis-dashboard"]], viewQuery: function SymphiqProfileAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
|
|
@@ -89734,7 +89751,7 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
89734
89751
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _t.first);
|
|
89735
89752
|
} }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
89736
89753
|
i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
|
|
89737
|
-
} }, 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", "
|
|
89754
|
+
} }, 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) {
|
|
89738
89755
|
i0.ɵɵelementStart(0, "div", 0);
|
|
89739
89756
|
i0.ɵɵelement(1, "div", 1);
|
|
89740
89757
|
i0.ɵɵelementStart(2, "div");
|
|
@@ -89769,7 +89786,7 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
89769
89786
|
i0.ɵɵelementEnd();
|
|
89770
89787
|
i0.ɵɵelement(24, "symphiq-funnel-analysis-modal", 20)(25, "symphiq-business-analysis-modal", 21)(26, "symphiq-tooltip-container");
|
|
89771
89788
|
i0.ɵɵconditionalCreate(27, SymphiqProfileAnalysisDashboardComponent_Conditional_27_Template, 1, 3, "symphiq-sticky-subscription-continue-button", 22);
|
|
89772
|
-
i0.ɵɵconditionalCreate(28, SymphiqProfileAnalysisDashboardComponent_Conditional_28_Template,
|
|
89789
|
+
i0.ɵɵconditionalCreate(28, SymphiqProfileAnalysisDashboardComponent_Conditional_28_Template, 10, 6, "div", 23);
|
|
89773
89790
|
i0.ɵɵelementEnd()();
|
|
89774
89791
|
} if (rf & 2) {
|
|
89775
89792
|
let tmp_5_0;
|
|
@@ -89958,7 +89975,7 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
89958
89975
|
[selectedPeriodUnit]="selectedPeriodUnit()"
|
|
89959
89976
|
(periodUnitChanged)="handlePeriodUnitChange($event)"
|
|
89960
89977
|
(planSelected)="handlePlanSelection($event)"
|
|
89961
|
-
(editCurrency)="
|
|
89978
|
+
(editCurrency)="handleEditCurrencyClick()"
|
|
89962
89979
|
/>
|
|
89963
89980
|
</div>
|
|
89964
89981
|
} @else {
|
|
@@ -90423,14 +90440,14 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
90423
90440
|
@if (isEditingCurrency()) {
|
|
90424
90441
|
<div
|
|
90425
90442
|
[ngClass]="getEditCurrencyFooterClasses()"
|
|
90426
|
-
class="fixed bottom-0 left-0 right-0 z-50 border-t
|
|
90443
|
+
class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
|
|
90427
90444
|
>
|
|
90428
|
-
<div class="
|
|
90429
|
-
<div class="flex items-center
|
|
90445
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
90446
|
+
<div class="flex items-center gap-4">
|
|
90430
90447
|
<button
|
|
90431
90448
|
(click)="handleCancelCurrencyEdit()"
|
|
90432
90449
|
[ngClass]="getEditCurrencyCancelButtonClasses()"
|
|
90433
|
-
class="px-6 py-
|
|
90450
|
+
class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
|
|
90434
90451
|
>
|
|
90435
90452
|
Cancel
|
|
90436
90453
|
</button>
|
|
@@ -90438,9 +90455,12 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
90438
90455
|
(click)="handleContinueToPlans()"
|
|
90439
90456
|
[disabled]="!editingCurrencySelection()"
|
|
90440
90457
|
[ngClass]="getEditCurrencyContinueButtonClasses()"
|
|
90441
|
-
class="px-
|
|
90458
|
+
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"
|
|
90442
90459
|
>
|
|
90443
|
-
Continue to Plans
|
|
90460
|
+
<span>Continue to Plans</span>
|
|
90461
|
+
<svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
90462
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
|
90463
|
+
</svg>
|
|
90444
90464
|
</button>
|
|
90445
90465
|
</div>
|
|
90446
90466
|
</div>
|
|
@@ -90456,7 +90476,7 @@ class SymphiqProfileAnalysisDashboardComponent {
|
|
|
90456
90476
|
type: HostListener,
|
|
90457
90477
|
args: ['window:scroll', ['$event']]
|
|
90458
90478
|
}] }); })();
|
|
90459
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber:
|
|
90479
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 720 }); })();
|
|
90460
90480
|
|
|
90461
90481
|
class ScrollProgressBarComponent {
|
|
90462
90482
|
constructor() {
|