@eric-emg/symphiq-components 1.2.328 → 1.2.330

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +584 -576
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +3 -2
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -86547,8 +86547,12 @@ class PlanSelectionPlaceholderCardComponent {
86547
86547
  ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white'
86548
86548
  : 'bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-800';
86549
86549
  }
86550
+ onEditClick() {
86551
+ console.log('[PlanSelectionPlaceholderCard] Edit button clicked, emitting editCurrency');
86552
+ this.editCurrency.emit();
86553
+ }
86550
86554
  static { this.ɵfac = function PlanSelectionPlaceholderCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanSelectionPlaceholderCardComponent)(); }; }
86551
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionPlaceholderCardComponent, selectors: [["symphiq-plan-selection-placeholder-card"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"] }, outputs: { editCurrency: "editCurrency" }, decls: 37, vars: 14, 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"], [1, "text-center", "space-y-6"], [1, "w-20", "h-20", "mx-auto", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "space-y-3"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "leading-relaxed", "max-w-md", "mx-auto", 3, "ngClass"], [1, "p-5", "rounded-xl", "border", "inline-block", 3, "ngClass"], [1, "flex", "items-start", "gap-3", "text-left"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", "clip-rule", "evenodd"], [1, "flex-1"], [1, "text-sm", "leading-relaxed", 3, "ngClass"]], template: function PlanSelectionPlaceholderCardComponent_Template(rf, ctx) { if (rf & 1) {
86555
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionPlaceholderCardComponent, selectors: [["symphiq-plan-selection-placeholder-card"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"] }, outputs: { editCurrency: "editCurrency" }, decls: 37, vars: 14, 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", "cursor-pointer", 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"], [1, "text-center", "space-y-6"], [1, "w-20", "h-20", "mx-auto", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "space-y-3"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "leading-relaxed", "max-w-md", "mx-auto", 3, "ngClass"], [1, "p-5", "rounded-xl", "border", "inline-block", 3, "ngClass"], [1, "flex", "items-start", "gap-3", "text-left"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", "clip-rule", "evenodd"], [1, "flex-1"], [1, "text-sm", "leading-relaxed", 3, "ngClass"]], template: function PlanSelectionPlaceholderCardComponent_Template(rf, ctx) { if (rf & 1) {
86552
86556
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
86553
86557
  i0.ɵɵnamespaceSVG();
86554
86558
  i0.ɵɵelementStart(4, "svg", 4);
@@ -86564,7 +86568,7 @@ class PlanSelectionPlaceholderCardComponent {
86564
86568
  i0.ɵɵtext(12);
86565
86569
  i0.ɵɵelementEnd();
86566
86570
  i0.ɵɵelementStart(13, "button", 9);
86567
- i0.ɵɵlistener("click", function PlanSelectionPlaceholderCardComponent_Template_button_click_13_listener() { return ctx.editCurrency.emit(); });
86571
+ i0.ɵɵlistener("click", function PlanSelectionPlaceholderCardComponent_Template_button_click_13_listener() { return ctx.onEditClick(); });
86568
86572
  i0.ɵɵnamespaceSVG();
86569
86573
  i0.ɵɵelementStart(14, "svg", 10);
86570
86574
  i0.ɵɵelement(15, "path", 11);
@@ -86650,9 +86654,9 @@ class PlanSelectionPlaceholderCardComponent {
86650
86654
  <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
86651
86655
  Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
86652
86656
  <button
86653
- (click)="editCurrency.emit()"
86657
+ (click)="onEditClick()"
86654
86658
  [ngClass]="editButtonClasses()"
86655
- class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
86659
+ class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
86656
86660
  >
86657
86661
  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86658
86662
  <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>
@@ -88365,7 +88369,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Co
88365
88369
  function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
88366
88370
  const _r6 = i0.ɵɵgetCurrentView();
88367
88371
  i0.ɵɵelementStart(0, "symphiq-plan-selection-placeholder-card", 35);
88368
- i0.ɵɵlistener("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template_symphiq_plan_selection_placeholder_card_editCurrency_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCurrencyClick.emit()); });
88372
+ i0.ɵɵlistener("editCurrency", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_2_Conditional_2_Template_symphiq_plan_selection_placeholder_card_editCurrency_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleEditCurrencyClick()); });
88369
88373
  i0.ɵɵelementEnd();
88370
88374
  } if (rf & 2) {
88371
88375
  let tmp_4_0;
@@ -89644,6 +89648,10 @@ class SymphiqProfileAnalysisDashboardComponent {
89644
89648
  handlePlanSelection(plan) {
89645
89649
  this.planSelected.emit(plan);
89646
89650
  }
89651
+ handleEditCurrencyClick() {
89652
+ console.log('[ProfileAnalysisDashboard] Edit currency clicked, emitting editCurrencyClick');
89653
+ this.editCurrencyClick.emit();
89654
+ }
89647
89655
  static { this.ɵfac = function SymphiqProfileAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileAnalysisDashboardComponent)(); }; }
89648
89656
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileAnalysisDashboardComponent, selectors: [["symphiq-profile-analysis-dashboard"]], viewQuery: function SymphiqProfileAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
89649
89657
  i0.ɵɵviewQuery(ModalComponent, 5);
@@ -89760,577 +89768,577 @@ class SymphiqProfileAnalysisDashboardComponent {
89760
89768
  standalone: true,
89761
89769
  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],
89762
89770
  changeDetection: ChangeDetectionStrategy.OnPush,
89763
- template: `
89764
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89765
- <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>
89766
-
89767
- <!-- Scroll Progress Bar -->
89768
- <div
89769
- [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'">
89770
- <div
89771
- [style.width.%]="scrollProgress()"
89772
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89773
- class="h-full transition-all duration-200 ease-out">
89774
- </div>
89775
- </div>
89776
-
89777
- <div class="relative z-[51]">
89778
- <!-- Dashboard Header -->
89779
- <symphiq-dashboard-header
89780
- [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89781
- [subtitle]="getAnalysisSubtitle()"
89782
- [currentSection]="getAnalysisSubtitle()"
89783
- [viewMode]="viewMode()"
89784
- [viewModeLabel]="displayModeLabel()"
89785
- [isLoading]="isLoading()"
89786
- [requestedByUser]="requestedByUser()"
89787
- [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89788
- (searchClick)="openSearch()"
89789
- (viewModeClick)="openViewModeSwitcher()"
89790
- />
89791
-
89792
- <!-- Journey Progress Banner -->
89793
- @if (isSimplifiedView() && !isOnboarded()) {
89794
- <symphiq-journey-progress-indicator
89795
- [viewMode]="viewMode()"
89796
- [currentStepId]="currentStepId()"
89797
- [showNextStepAction]="shouldShowContinueButton()"
89798
- [forDemo]="forDemo()"
89799
- [maxAccessibleStepId]="maxAccessibleStepId()"
89800
- (nextStepClick)="nextStepClick.emit()"
89801
- (stepClick)="stepClick.emit($event)"
89802
- />
89803
- }
89804
-
89805
- <!-- Main Content -->
89806
- <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()">
89807
-
89808
- <!-- Welcome Banner (Simplified View Only) -->
89809
- @if (isSimplifiedView()) {
89810
- <div class="mb-12">
89811
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89812
- <symphiq-shop-welcome-banner
89813
- [viewMode]="viewMode()"
89814
- [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
89815
- [isOnboarded]="isOnboarded()"
89816
- />
89817
- }
89818
- @if (isFocusAreaAnalysis()) {
89819
- <symphiq-focus-area-welcome-banner
89820
- [viewMode]="viewMode()"
89821
- [focusAreaDomain]="focusAreaDomain()"
89822
- [focusAreaName]="focusAreaName()"
89823
- [focusAreaDetails]="focusAreaDetails()"
89824
- />
89825
- }
89826
- @if (isMetricAnalysis()) {
89827
- <symphiq-metric-welcome-banner
89828
- [viewMode]="viewMode()"
89829
- [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
89830
- [isOnboarded]="isOnboarded()"
89831
- />
89832
- }
89833
- </div>
89834
- }
89835
-
89836
- <!-- Simplified View Content -->
89837
- @if (isSimplifiedView()) {
89838
- <!-- Strategic Insights & Goals (or Subscription Flow) -->
89839
- <div class="mb-8">
89840
- @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
89841
- <symphiq-strategic-goals-tiled-grid
89842
- [goals]="strategicRoadmapGoals()"
89843
- [viewMode]="viewMode()"
89844
- (viewMoreClick)="openGoalModal($event)"
89845
- />
89846
- } @else {
89847
- <!-- Subscription Value Proposition -->
89848
- @if (!hasBillingCurrency()) {
89849
- <div class="mb-8">
89850
- <symphiq-subscription-value-proposition-card
89851
- [viewMode]="viewMode()"
89852
- />
89853
- </div>
89854
-
89855
- <!-- Currency Selection -->
89856
- <symphiq-billing-currency-selector-card
89857
- [viewMode]="viewMode()"
89858
- [isLoading]="isCurrencySelectionLoading()"
89859
- (currencySelected)="handleCurrencySelection($event)"
89860
- />
89861
- } @else if (showPlanSelection()) {
89862
- <!-- Plan Selection -->
89863
-
89864
- <div class="mb-32">
89865
- <symphiq-plan-selection-container
89866
- [viewMode]="viewMode()"
89867
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89868
- [planCardInfos]="planCardInfos()"
89869
- [isLoading]="isPlanLoading()"
89870
- [selectedPeriodUnit]="selectedPeriodUnit()"
89871
- (periodUnitChanged)="handlePeriodUnitChange($event)"
89872
- (planSelected)="handlePlanSelection($event)"
89873
- (editCurrency)="editCurrencyClick.emit()"
89874
- />
89875
- </div>
89876
- } @else {
89877
- <symphiq-plan-selection-placeholder-card
89878
- [viewMode]="viewMode()"
89879
- [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89880
- (editCurrency)="editCurrencyClick.emit()"
89881
- />
89882
- }
89883
- }
89884
- </div>
89885
-
89886
- <!-- Supporting Business Context -->
89887
- @if (nonStrategicSections().length > 0) {
89888
- <div>
89889
- <symphiq-collapsible-analysis-section-group
89890
- [sections]="nonStrategicSections()"
89891
- [viewMode]="viewMode()"
89892
- [executiveSummary]="executiveSummary()"
89893
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
89894
- [metricExecutiveSummary]="metricExecutiveSummary()"
89895
- [metricName]="metricName()"
89896
- [allGoals]="allGoals()"
89897
- [allMetrics]="allMetrics()"
89898
- [allCharts]="allCharts()"
89899
- [allInsights]="allInsights()"
89900
- [businessProfile]="profile()"
89901
- />
89902
- </div>
89903
- }
89904
- }
89905
-
89906
- <!-- Compact & Expanded View Content -->
89907
- @if (!isSimplifiedView()) {
89908
- <!-- SHOP Executive Summary -->
89909
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
89910
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
89911
- <!-- Summary Banner -->
89912
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
89913
- <div class="space-y-6">
89914
- <div class="flex items-start justify-between gap-4">
89915
- <div class="flex-1">
89916
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
89917
- Executive Summary
89918
- </h2>
89919
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
89920
- {{ summary.gradeRationale }}
89921
- </p>
89922
- </div>
89923
- @if (summary.overallGrade) {
89924
- <symphiq-grade-badge
89925
- [grade]="summary.overallGrade"
89926
- [gradeRationale]="summary.gradeRationale || ''"
89927
- [viewMode]="viewMode()"
89928
- />
89929
- }
89930
- </div>
89931
-
89932
- @if (summary.narrative) {
89933
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
89934
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
89935
- Analysis Narrative
89936
- </h3>
89937
- <div class="relative">
89938
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
89939
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
89940
- <symphiq-napkin-visual-placeholder
89941
- [visual]="summary.napkinVisual"
89942
- [viewMode]="viewMode()"
89943
- />
89944
- </div>
89945
- }
89946
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
89947
- {{ summary.narrative }}
89948
- </p>
89949
- <div class="clear-both"></div>
89950
- </div>
89951
- </div>
89952
- }
89953
-
89954
- <!-- Stats -->
89955
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
89956
- <button
89957
- type="button"
89958
- (click)="onKeyStrengthsClick(summary)"
89959
- [ngClass]="getKeyStrengthsStatCardClasses()"
89960
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89961
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89962
- Key Strengths
89963
- </div>
89964
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
89965
- {{ summary.keyStrengths?.length || 0 }}
89966
- </div>
89967
- <div class="flex items-center gap-1.5 text-xs font-medium">
89968
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
89969
- <symphiq-icon
89970
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
89971
- size="w-4 h-4"
89972
- [ngClass]="getKeyStrengthsButtonTextClasses()"
89973
- class="transition-transform group-hover:translate-x-1"
89974
- />
89975
- </div>
89976
- </button>
89977
- <button
89978
- type="button"
89979
- (click)="onCriticalGapsClick(summary)"
89980
- [ngClass]="getCriticalGapsStatCardClasses()"
89981
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89982
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89983
- Critical Gaps
89984
- </div>
89985
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
89986
- {{ summary.criticalGaps?.length || 0 }}
89987
- </div>
89988
- <div class="flex items-center gap-1.5 text-xs font-medium">
89989
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
89990
- <symphiq-icon
89991
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
89992
- size="w-4 h-4"
89993
- [ngClass]="getCriticalGapsButtonTextClasses()"
89994
- class="transition-transform group-hover:translate-x-1"
89995
- />
89996
- </div>
89997
- </button>
89998
- <button
89999
- type="button"
90000
- (click)="scrollToQuickWins()"
90001
- [ngClass]="getQuickWinsStatCardClasses()"
90002
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90003
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90004
- Quick Wins
90005
- </div>
90006
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90007
- {{ summary.quickWins?.length || 0 }}
90008
- </div>
90009
- <div class="flex items-center gap-1.5 text-xs font-medium">
90010
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90011
- <symphiq-icon
90012
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90013
- size="w-4 h-4"
90014
- [ngClass]="getQuickWinsButtonTextClasses()"
90015
- class="transition-transform group-hover:translate-y-1 animate-bounce"
90016
- />
90017
- </div>
90018
- </button>
90019
- </div>
90020
- </div>
90021
- </div>
90022
-
90023
- <!-- Quick Wins -->
90024
- @if (summary.quickWins && summary.quickWins.length > 0) {
90025
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90026
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90027
- Quick Wins
90028
- </h3>
90029
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90030
- @for (win of summary.quickWins; track $index) {
90031
- <div [ngClass]="getQuickWinCardClasses()"
90032
- class="rounded-xl p-6 transition-all duration-300">
90033
- <div class="space-y-4">
90034
- <div class="flex items-start gap-3">
90035
- <span [ngClass]="getNumberBadgeClasses()"
90036
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90037
- {{ $index + 1 }}
90038
- </span>
90039
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90040
- {{ win.action }}
90041
- </p>
90042
- </div>
90043
-
90044
- <div class="flex flex-wrap gap-2">
90045
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
90046
- class="px-3 py-1 rounded-full text-xs font-semibold">
90047
- {{ formatLabel(win.effort) }} Effort
90048
- </span>
90049
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
90050
- class="px-3 py-1 rounded-full text-xs font-semibold">
90051
- {{ formatLabel(win.impact) }} Impact
90052
- </span>
90053
- </div>
90054
-
90055
- @if (win.estimatedTimeframe) {
90056
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90057
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90058
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90059
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90060
- </svg>
90061
- <span>{{ win.estimatedTimeframe }}</span>
90062
- </div>
90063
- }
90064
-
90065
- @if (win.relatedGoalId) {
90066
- <div class="space-y-2">
90067
- <h4 [ngClass]="getMetaTextClasses()"
90068
- class="text-xs font-semibold uppercase tracking-wider">
90069
- Related Goal
90070
- </h4>
90071
- <symphiq-related-goal-chips
90072
- [relatedGoalIds]="[win.relatedGoalId]"
90073
- [allGoals]="allGoals()"
90074
- [viewMode]="viewMode()"
90075
- />
90076
- </div>
90077
- }
90078
- </div>
90079
- </div>
90080
- }
90081
- </div>
90082
- </div>
90083
- }
90084
- </section>
90085
- }
90086
-
90087
- <!-- FOCUS_AREA Executive Summary -->
90088
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90089
- <symphiq-focus-area-executive-summary
90090
- [viewMode]="viewMode()"
90091
- [summary]="summary"
90092
- [allGoals]="allGoals()"
90093
- (topPrioritiesClick)="handleTopPrioritiesClick()"
90094
- (priorityDetailClick)="handlePriorityDetailClick($event)"
90095
- />
90096
- }
90097
-
90098
- <!-- METRIC Executive Summary -->
90099
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90100
- <symphiq-metric-executive-summary
90101
- [viewMode]="viewMode()"
90102
- [summary]="summary"
90103
- [metricName]="metricName()"
90104
- [allGoals]="allGoals()"
90105
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90106
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90107
- />
90108
- }
90109
-
90110
- <!-- Divider Before First Section -->
90111
- @if (sections(); as sectionList) {
90112
- @if (sectionList.length > 0 && sectionList[0].icon) {
90113
- <symphiq-section-divider
90114
- [viewMode]="viewMode()"
90115
- [sectionIcon]="sectionList[0].icon"
90116
- />
90117
- }
90118
- }
90119
-
90120
- <!-- Profile Analysis Sections -->
90121
- @if (sections(); as sectionList) {
90122
- <section class="space-y-8">
90123
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90124
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90125
- class="rounded-xl p-8 scroll-mt-24">
90126
- <!-- Icon and Title -->
90127
- <div class="flex items-start gap-3 mb-6">
90128
- @if (section.icon) {
90129
- <div [ngClass]="getSectionIconClasses()"
90130
- class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90131
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90132
- </div>
90133
- }
90134
- <div class="flex-1">
90135
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90136
- {{ section.title }}
90137
- </h3>
90138
- </div>
90139
- </div>
90140
-
90141
- <!-- Description and Visual Side-by-Side -->
90142
- @if (section.description || (section.visual && section.visual.enabled)) {
90143
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90144
- [class.lg:flex-row-reverse]="idx % 2 === 0">
90145
- @if (section.visual && section.visual.enabled) {
90146
- <div class="w-full lg:w-2/3">
90147
- <symphiq-napkin-visual-placeholder
90148
- [visual]="section.visual"
90149
- [viewMode]="viewMode()"
90150
- />
90151
- </div>
90152
- }
90153
- @if (section.description) {
90154
- <div class="w-full"
90155
- [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90156
- <p [ngClass]="getSectionDescriptionClasses()"
90157
- class="text-sm leading-relaxed whitespace-pre-line">
90158
- {{ section.description }}
90159
- </p>
90160
- </div>
90161
- }
90162
- </div>
90163
- }
90164
-
90165
- <!-- Section Content -->
90166
- <symphiq-profile-section-content
90167
- [section]="section"
90168
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90169
- [viewMode]="viewMode()"
90170
- [sectionIndex]="idx"
90171
- [allGoals]="allGoals()"
90172
- [allMetrics]="allMetrics()"
90173
- [allCharts]="allCharts()"
90174
- [allInsights]="allInsights()"
90175
- [businessProfile]="profile()"
90176
- />
90177
- </div>
90178
-
90179
- <!-- Section Divider (between sections) -->
90180
- @if (!last) {
90181
- <symphiq-section-divider
90182
- [viewMode]="viewMode()"
90183
- [sectionIcon]="sectionList[idx + 1].icon"
90184
- />
90185
- }
90186
- }
90187
- </section>
90188
- }
90189
- }
90190
-
90191
- </main>
90192
-
90193
- <!-- Table of Contents (Compact & Expanded Views) -->
90194
- @if (!isSimplifiedView() && sections()) {
90195
- <symphiq-floating-toc
90196
- [sections]="tocSections()"
90197
- [viewMode]="viewMode()"
90198
- [embedded]="embedded()"
90199
- [scrollElement]="scrollElement() ?? undefined"
90200
- />
90201
- }
90202
-
90203
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
90204
- @if (!isSimplifiedView() && sections()) {
90205
- <symphiq-section-navigation
90206
- [sections]="tocSections()"
90207
- [viewMode]="viewMode()"
90208
- [embedded]="embedded()"
90209
- [scrollElement]="scrollElement() ?? undefined"
90210
- />
90211
- }
90212
-
90213
- <!-- Search Modal -->
90214
- <symphiq-search-modal
90215
- [isOpen]="isSearchOpen()"
90216
- [isLightMode]="isLightMode()"
90217
- (close)="closeSearch()"
90218
- />
90219
-
90220
- <!-- View Mode Switcher Modal -->
90221
- <symphiq-view-mode-switcher-modal
90222
- [isOpen]="isViewModeSwitcherOpen()"
90223
- [currentMode]="currentDisplayMode()"
90224
- [viewMode]="viewMode()"
90225
- (close)="closeViewModeSwitcher()"
90226
- (modeSelected)="handleDisplayModeChange($event)"
90227
- />
90228
-
90229
- <!-- Profile Analysis Modal -->
90230
- <symphiq-profile-analysis-modal
90231
- [isLightMode]="isLightMode()"
90232
- [allMetrics]="allMetrics()"
90233
- [allInsights]="allInsights()"
90234
- [allBusinessInsights]="allBusinessInsights()"
90235
- [allCharts]="allCharts()"
90236
- >
90237
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90238
- <symphiq-goal-card
90239
- [goal]="data.goal"
90240
- [viewMode]="data.viewMode"
90241
- [isInModal]="true"
90242
- [allMetrics]="allMetrics()"
90243
- [allCharts]="allCharts()"
90244
- [allInsights]="allInsights()"
90245
- [currentModalState]="getCurrentModalState()"
90246
- [businessProfile]="profile()"
90247
- />
90248
- }
90249
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90250
- <symphiq-goal-objectives-modal-content
90251
- [goal]="data.goal"
90252
- [viewMode]="data.viewMode"
90253
- />
90254
- }
90255
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90256
- <symphiq-objective-strategies-modal-content
90257
- [objective]="data.objective"
90258
- [goalTitle]="data.goalTitle"
90259
- [viewMode]="data.viewMode"
90260
- />
90261
- }
90262
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90263
- <symphiq-strategy-recommendations-modal-content
90264
- [strategy]="data.strategy"
90265
- [objectiveTitle]="data.objectiveTitle"
90266
- [goalTitle]="data.goalTitle"
90267
- [viewMode]="data.viewMode"
90268
- [allMetrics]="allMetrics()"
90269
- [allCharts]="allCharts()"
90270
- [allInsights]="allInsights()"
90271
- [allBusinessInsights]="allBusinessInsights()"
90272
- [currentModalState]="getCurrentModalState()"
90273
- />
90274
- }
90275
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90276
- <symphiq-category-detail-modal-content
90277
- [category]="data.category"
90278
- [viewMode]="data.viewMode"
90279
- [scrollToSection]="data.scrollToSection"
90280
- />
90281
- }
90282
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90283
- <symphiq-strength-detail-modal-content
90284
- [strength]="data.strength"
90285
- [viewMode]="data.viewMode"
90286
- [allFunnelStrengths]="funnelStrengths()"
90287
- [currentModalState]="getCurrentModalState()"
90288
- />
90289
- }
90290
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90291
- <symphiq-gap-detail-modal-content
90292
- [gap]="data.gap"
90293
- [viewMode]="data.viewMode"
90294
- [allGoals]="allGoals()"
90295
- [allWeaknesses]="funnelWeaknesses()"
90296
- [currentModalState]="getCurrentModalState()"
90297
- />
90298
- }
90299
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90300
- <symphiq-opportunity-detail-modal-content
90301
- [opportunity]="data.opportunity"
90302
- [viewMode]="data.viewMode"
90303
- [allStrengths]="funnelStrengths()"
90304
- [currentModalState]="getCurrentModalState()"
90305
- />
90306
- }
90307
- </symphiq-profile-analysis-modal>
90308
-
90309
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90310
- <symphiq-funnel-analysis-modal
90311
- [isLightMode]="isLightMode()"
90312
- [viewMode]="viewMode()"
90313
- [allMetrics]="allMetrics()"
90314
- [allInsights]="allInsights()"
90315
- [allCharts]="allCharts()"
90316
- />
90317
-
90318
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
90319
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90320
-
90321
- <!-- Tooltip Container -->
90322
- <symphiq-tooltip-container/>
90323
-
90324
- <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90325
- @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90326
- <symphiq-sticky-subscription-continue-button
90327
- [viewMode]="viewMode()"
90328
- [isEnabled]="hasCurrencySelected()"
90329
- [isLoading]="isCurrencySelectionLoading()"
90330
- (continueClick)="handleStickyButtonClick()"
90331
- />
90332
- }
90333
- </div>
89771
+ template: `
89772
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
89773
+ <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>
89774
+
89775
+ <!-- Scroll Progress Bar -->
89776
+ <div
89777
+ [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'">
89778
+ <div
89779
+ [style.width.%]="scrollProgress()"
89780
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
89781
+ class="h-full transition-all duration-200 ease-out">
89782
+ </div>
89783
+ </div>
89784
+
89785
+ <div class="relative z-[51]">
89786
+ <!-- Dashboard Header -->
89787
+ <symphiq-dashboard-header
89788
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
89789
+ [subtitle]="getAnalysisSubtitle()"
89790
+ [currentSection]="getAnalysisSubtitle()"
89791
+ [viewMode]="viewMode()"
89792
+ [viewModeLabel]="displayModeLabel()"
89793
+ [isLoading]="isLoading()"
89794
+ [requestedByUser]="requestedByUser()"
89795
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
89796
+ (searchClick)="openSearch()"
89797
+ (viewModeClick)="openViewModeSwitcher()"
89798
+ />
89799
+
89800
+ <!-- Journey Progress Banner -->
89801
+ @if (isSimplifiedView() && !isOnboarded()) {
89802
+ <symphiq-journey-progress-indicator
89803
+ [viewMode]="viewMode()"
89804
+ [currentStepId]="currentStepId()"
89805
+ [showNextStepAction]="shouldShowContinueButton()"
89806
+ [forDemo]="forDemo()"
89807
+ [maxAccessibleStepId]="maxAccessibleStepId()"
89808
+ (nextStepClick)="nextStepClick.emit()"
89809
+ (stepClick)="stepClick.emit($event)"
89810
+ />
89811
+ }
89812
+
89813
+ <!-- Main Content -->
89814
+ <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()">
89815
+
89816
+ <!-- Welcome Banner (Simplified View Only) -->
89817
+ @if (isSimplifiedView()) {
89818
+ <div class="mb-12">
89819
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
89820
+ <symphiq-shop-welcome-banner
89821
+ [viewMode]="viewMode()"
89822
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
89823
+ [isOnboarded]="isOnboarded()"
89824
+ />
89825
+ }
89826
+ @if (isFocusAreaAnalysis()) {
89827
+ <symphiq-focus-area-welcome-banner
89828
+ [viewMode]="viewMode()"
89829
+ [focusAreaDomain]="focusAreaDomain()"
89830
+ [focusAreaName]="focusAreaName()"
89831
+ [focusAreaDetails]="focusAreaDetails()"
89832
+ />
89833
+ }
89834
+ @if (isMetricAnalysis()) {
89835
+ <symphiq-metric-welcome-banner
89836
+ [viewMode]="viewMode()"
89837
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
89838
+ [isOnboarded]="isOnboarded()"
89839
+ />
89840
+ }
89841
+ </div>
89842
+ }
89843
+
89844
+ <!-- Simplified View Content -->
89845
+ @if (isSimplifiedView()) {
89846
+ <!-- Strategic Insights & Goals (or Subscription Flow) -->
89847
+ <div class="mb-8">
89848
+ @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
89849
+ <symphiq-strategic-goals-tiled-grid
89850
+ [goals]="strategicRoadmapGoals()"
89851
+ [viewMode]="viewMode()"
89852
+ (viewMoreClick)="openGoalModal($event)"
89853
+ />
89854
+ } @else {
89855
+ <!-- Subscription Value Proposition -->
89856
+ @if (!hasBillingCurrency()) {
89857
+ <div class="mb-8">
89858
+ <symphiq-subscription-value-proposition-card
89859
+ [viewMode]="viewMode()"
89860
+ />
89861
+ </div>
89862
+
89863
+ <!-- Currency Selection -->
89864
+ <symphiq-billing-currency-selector-card
89865
+ [viewMode]="viewMode()"
89866
+ [isLoading]="isCurrencySelectionLoading()"
89867
+ (currencySelected)="handleCurrencySelection($event)"
89868
+ />
89869
+ } @else if (showPlanSelection()) {
89870
+ <!-- Plan Selection -->
89871
+
89872
+ <div class="mb-32">
89873
+ <symphiq-plan-selection-container
89874
+ [viewMode]="viewMode()"
89875
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89876
+ [planCardInfos]="planCardInfos()"
89877
+ [isLoading]="isPlanLoading()"
89878
+ [selectedPeriodUnit]="selectedPeriodUnit()"
89879
+ (periodUnitChanged)="handlePeriodUnitChange($event)"
89880
+ (planSelected)="handlePlanSelection($event)"
89881
+ (editCurrency)="editCurrencyClick.emit()"
89882
+ />
89883
+ </div>
89884
+ } @else {
89885
+ <symphiq-plan-selection-placeholder-card
89886
+ [viewMode]="viewMode()"
89887
+ [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
89888
+ (editCurrency)="handleEditCurrencyClick()"
89889
+ />
89890
+ }
89891
+ }
89892
+ </div>
89893
+
89894
+ <!-- Supporting Business Context -->
89895
+ @if (nonStrategicSections().length > 0) {
89896
+ <div>
89897
+ <symphiq-collapsible-analysis-section-group
89898
+ [sections]="nonStrategicSections()"
89899
+ [viewMode]="viewMode()"
89900
+ [executiveSummary]="executiveSummary()"
89901
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
89902
+ [metricExecutiveSummary]="metricExecutiveSummary()"
89903
+ [metricName]="metricName()"
89904
+ [allGoals]="allGoals()"
89905
+ [allMetrics]="allMetrics()"
89906
+ [allCharts]="allCharts()"
89907
+ [allInsights]="allInsights()"
89908
+ [businessProfile]="profile()"
89909
+ />
89910
+ </div>
89911
+ }
89912
+ }
89913
+
89914
+ <!-- Compact & Expanded View Content -->
89915
+ @if (!isSimplifiedView()) {
89916
+ <!-- SHOP Executive Summary -->
89917
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
89918
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
89919
+ <!-- Summary Banner -->
89920
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
89921
+ <div class="space-y-6">
89922
+ <div class="flex items-start justify-between gap-4">
89923
+ <div class="flex-1">
89924
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
89925
+ Executive Summary
89926
+ </h2>
89927
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
89928
+ {{ summary.gradeRationale }}
89929
+ </p>
89930
+ </div>
89931
+ @if (summary.overallGrade) {
89932
+ <symphiq-grade-badge
89933
+ [grade]="summary.overallGrade"
89934
+ [gradeRationale]="summary.gradeRationale || ''"
89935
+ [viewMode]="viewMode()"
89936
+ />
89937
+ }
89938
+ </div>
89939
+
89940
+ @if (summary.narrative) {
89941
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
89942
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
89943
+ Analysis Narrative
89944
+ </h3>
89945
+ <div class="relative">
89946
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
89947
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
89948
+ <symphiq-napkin-visual-placeholder
89949
+ [visual]="summary.napkinVisual"
89950
+ [viewMode]="viewMode()"
89951
+ />
89952
+ </div>
89953
+ }
89954
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
89955
+ {{ summary.narrative }}
89956
+ </p>
89957
+ <div class="clear-both"></div>
89958
+ </div>
89959
+ </div>
89960
+ }
89961
+
89962
+ <!-- Stats -->
89963
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
89964
+ <button
89965
+ type="button"
89966
+ (click)="onKeyStrengthsClick(summary)"
89967
+ [ngClass]="getKeyStrengthsStatCardClasses()"
89968
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89969
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89970
+ Key Strengths
89971
+ </div>
89972
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
89973
+ {{ summary.keyStrengths?.length || 0 }}
89974
+ </div>
89975
+ <div class="flex items-center gap-1.5 text-xs font-medium">
89976
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
89977
+ <symphiq-icon
89978
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
89979
+ size="w-4 h-4"
89980
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
89981
+ class="transition-transform group-hover:translate-x-1"
89982
+ />
89983
+ </div>
89984
+ </button>
89985
+ <button
89986
+ type="button"
89987
+ (click)="onCriticalGapsClick(summary)"
89988
+ [ngClass]="getCriticalGapsStatCardClasses()"
89989
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
89990
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
89991
+ Critical Gaps
89992
+ </div>
89993
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
89994
+ {{ summary.criticalGaps?.length || 0 }}
89995
+ </div>
89996
+ <div class="flex items-center gap-1.5 text-xs font-medium">
89997
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
89998
+ <symphiq-icon
89999
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
90000
+ size="w-4 h-4"
90001
+ [ngClass]="getCriticalGapsButtonTextClasses()"
90002
+ class="transition-transform group-hover:translate-x-1"
90003
+ />
90004
+ </div>
90005
+ </button>
90006
+ <button
90007
+ type="button"
90008
+ (click)="scrollToQuickWins()"
90009
+ [ngClass]="getQuickWinsStatCardClasses()"
90010
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
90011
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
90012
+ Quick Wins
90013
+ </div>
90014
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
90015
+ {{ summary.quickWins?.length || 0 }}
90016
+ </div>
90017
+ <div class="flex items-center gap-1.5 text-xs font-medium">
90018
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
90019
+ <symphiq-icon
90020
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
90021
+ size="w-4 h-4"
90022
+ [ngClass]="getQuickWinsButtonTextClasses()"
90023
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
90024
+ />
90025
+ </div>
90026
+ </button>
90027
+ </div>
90028
+ </div>
90029
+ </div>
90030
+
90031
+ <!-- Quick Wins -->
90032
+ @if (summary.quickWins && summary.quickWins.length > 0) {
90033
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
90034
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
90035
+ Quick Wins
90036
+ </h3>
90037
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
90038
+ @for (win of summary.quickWins; track $index) {
90039
+ <div [ngClass]="getQuickWinCardClasses()"
90040
+ class="rounded-xl p-6 transition-all duration-300">
90041
+ <div class="space-y-4">
90042
+ <div class="flex items-start gap-3">
90043
+ <span [ngClass]="getNumberBadgeClasses()"
90044
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
90045
+ {{ $index + 1 }}
90046
+ </span>
90047
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
90048
+ {{ win.action }}
90049
+ </p>
90050
+ </div>
90051
+
90052
+ <div class="flex flex-wrap gap-2">
90053
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
90054
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90055
+ {{ formatLabel(win.effort) }} Effort
90056
+ </span>
90057
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
90058
+ class="px-3 py-1 rounded-full text-xs font-semibold">
90059
+ {{ formatLabel(win.impact) }} Impact
90060
+ </span>
90061
+ </div>
90062
+
90063
+ @if (win.estimatedTimeframe) {
90064
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
90065
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90066
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90067
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
90068
+ </svg>
90069
+ <span>{{ win.estimatedTimeframe }}</span>
90070
+ </div>
90071
+ }
90072
+
90073
+ @if (win.relatedGoalId) {
90074
+ <div class="space-y-2">
90075
+ <h4 [ngClass]="getMetaTextClasses()"
90076
+ class="text-xs font-semibold uppercase tracking-wider">
90077
+ Related Goal
90078
+ </h4>
90079
+ <symphiq-related-goal-chips
90080
+ [relatedGoalIds]="[win.relatedGoalId]"
90081
+ [allGoals]="allGoals()"
90082
+ [viewMode]="viewMode()"
90083
+ />
90084
+ </div>
90085
+ }
90086
+ </div>
90087
+ </div>
90088
+ }
90089
+ </div>
90090
+ </div>
90091
+ }
90092
+ </section>
90093
+ }
90094
+
90095
+ <!-- FOCUS_AREA Executive Summary -->
90096
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
90097
+ <symphiq-focus-area-executive-summary
90098
+ [viewMode]="viewMode()"
90099
+ [summary]="summary"
90100
+ [allGoals]="allGoals()"
90101
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
90102
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
90103
+ />
90104
+ }
90105
+
90106
+ <!-- METRIC Executive Summary -->
90107
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
90108
+ <symphiq-metric-executive-summary
90109
+ [viewMode]="viewMode()"
90110
+ [summary]="summary"
90111
+ [metricName]="metricName()"
90112
+ [allGoals]="allGoals()"
90113
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
90114
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
90115
+ />
90116
+ }
90117
+
90118
+ <!-- Divider Before First Section -->
90119
+ @if (sections(); as sectionList) {
90120
+ @if (sectionList.length > 0 && sectionList[0].icon) {
90121
+ <symphiq-section-divider
90122
+ [viewMode]="viewMode()"
90123
+ [sectionIcon]="sectionList[0].icon"
90124
+ />
90125
+ }
90126
+ }
90127
+
90128
+ <!-- Profile Analysis Sections -->
90129
+ @if (sections(); as sectionList) {
90130
+ <section class="space-y-8">
90131
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
90132
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
90133
+ class="rounded-xl p-8 scroll-mt-24">
90134
+ <!-- Icon and Title -->
90135
+ <div class="flex items-start gap-3 mb-6">
90136
+ @if (section.icon) {
90137
+ <div [ngClass]="getSectionIconClasses()"
90138
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
90139
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
90140
+ </div>
90141
+ }
90142
+ <div class="flex-1">
90143
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
90144
+ {{ section.title }}
90145
+ </h3>
90146
+ </div>
90147
+ </div>
90148
+
90149
+ <!-- Description and Visual Side-by-Side -->
90150
+ @if (section.description || (section.visual && section.visual.enabled)) {
90151
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
90152
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
90153
+ @if (section.visual && section.visual.enabled) {
90154
+ <div class="w-full lg:w-2/3">
90155
+ <symphiq-napkin-visual-placeholder
90156
+ [visual]="section.visual"
90157
+ [viewMode]="viewMode()"
90158
+ />
90159
+ </div>
90160
+ }
90161
+ @if (section.description) {
90162
+ <div class="w-full"
90163
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
90164
+ <p [ngClass]="getSectionDescriptionClasses()"
90165
+ class="text-sm leading-relaxed whitespace-pre-line">
90166
+ {{ section.description }}
90167
+ </p>
90168
+ </div>
90169
+ }
90170
+ </div>
90171
+ }
90172
+
90173
+ <!-- Section Content -->
90174
+ <symphiq-profile-section-content
90175
+ [section]="section"
90176
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
90177
+ [viewMode]="viewMode()"
90178
+ [sectionIndex]="idx"
90179
+ [allGoals]="allGoals()"
90180
+ [allMetrics]="allMetrics()"
90181
+ [allCharts]="allCharts()"
90182
+ [allInsights]="allInsights()"
90183
+ [businessProfile]="profile()"
90184
+ />
90185
+ </div>
90186
+
90187
+ <!-- Section Divider (between sections) -->
90188
+ @if (!last) {
90189
+ <symphiq-section-divider
90190
+ [viewMode]="viewMode()"
90191
+ [sectionIcon]="sectionList[idx + 1].icon"
90192
+ />
90193
+ }
90194
+ }
90195
+ </section>
90196
+ }
90197
+ }
90198
+
90199
+ </main>
90200
+
90201
+ <!-- Table of Contents (Compact & Expanded Views) -->
90202
+ @if (!isSimplifiedView() && sections()) {
90203
+ <symphiq-floating-toc
90204
+ [sections]="tocSections()"
90205
+ [viewMode]="viewMode()"
90206
+ [embedded]="embedded()"
90207
+ [scrollElement]="scrollElement() ?? undefined"
90208
+ />
90209
+ }
90210
+
90211
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
90212
+ @if (!isSimplifiedView() && sections()) {
90213
+ <symphiq-section-navigation
90214
+ [sections]="tocSections()"
90215
+ [viewMode]="viewMode()"
90216
+ [embedded]="embedded()"
90217
+ [scrollElement]="scrollElement() ?? undefined"
90218
+ />
90219
+ }
90220
+
90221
+ <!-- Search Modal -->
90222
+ <symphiq-search-modal
90223
+ [isOpen]="isSearchOpen()"
90224
+ [isLightMode]="isLightMode()"
90225
+ (close)="closeSearch()"
90226
+ />
90227
+
90228
+ <!-- View Mode Switcher Modal -->
90229
+ <symphiq-view-mode-switcher-modal
90230
+ [isOpen]="isViewModeSwitcherOpen()"
90231
+ [currentMode]="currentDisplayMode()"
90232
+ [viewMode]="viewMode()"
90233
+ (close)="closeViewModeSwitcher()"
90234
+ (modeSelected)="handleDisplayModeChange($event)"
90235
+ />
90236
+
90237
+ <!-- Profile Analysis Modal -->
90238
+ <symphiq-profile-analysis-modal
90239
+ [isLightMode]="isLightMode()"
90240
+ [allMetrics]="allMetrics()"
90241
+ [allInsights]="allInsights()"
90242
+ [allBusinessInsights]="allBusinessInsights()"
90243
+ [allCharts]="allCharts()"
90244
+ >
90245
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
90246
+ <symphiq-goal-card
90247
+ [goal]="data.goal"
90248
+ [viewMode]="data.viewMode"
90249
+ [isInModal]="true"
90250
+ [allMetrics]="allMetrics()"
90251
+ [allCharts]="allCharts()"
90252
+ [allInsights]="allInsights()"
90253
+ [currentModalState]="getCurrentModalState()"
90254
+ [businessProfile]="profile()"
90255
+ />
90256
+ }
90257
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
90258
+ <symphiq-goal-objectives-modal-content
90259
+ [goal]="data.goal"
90260
+ [viewMode]="data.viewMode"
90261
+ />
90262
+ }
90263
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
90264
+ <symphiq-objective-strategies-modal-content
90265
+ [objective]="data.objective"
90266
+ [goalTitle]="data.goalTitle"
90267
+ [viewMode]="data.viewMode"
90268
+ />
90269
+ }
90270
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
90271
+ <symphiq-strategy-recommendations-modal-content
90272
+ [strategy]="data.strategy"
90273
+ [objectiveTitle]="data.objectiveTitle"
90274
+ [goalTitle]="data.goalTitle"
90275
+ [viewMode]="data.viewMode"
90276
+ [allMetrics]="allMetrics()"
90277
+ [allCharts]="allCharts()"
90278
+ [allInsights]="allInsights()"
90279
+ [allBusinessInsights]="allBusinessInsights()"
90280
+ [currentModalState]="getCurrentModalState()"
90281
+ />
90282
+ }
90283
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
90284
+ <symphiq-category-detail-modal-content
90285
+ [category]="data.category"
90286
+ [viewMode]="data.viewMode"
90287
+ [scrollToSection]="data.scrollToSection"
90288
+ />
90289
+ }
90290
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
90291
+ <symphiq-strength-detail-modal-content
90292
+ [strength]="data.strength"
90293
+ [viewMode]="data.viewMode"
90294
+ [allFunnelStrengths]="funnelStrengths()"
90295
+ [currentModalState]="getCurrentModalState()"
90296
+ />
90297
+ }
90298
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
90299
+ <symphiq-gap-detail-modal-content
90300
+ [gap]="data.gap"
90301
+ [viewMode]="data.viewMode"
90302
+ [allGoals]="allGoals()"
90303
+ [allWeaknesses]="funnelWeaknesses()"
90304
+ [currentModalState]="getCurrentModalState()"
90305
+ />
90306
+ }
90307
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
90308
+ <symphiq-opportunity-detail-modal-content
90309
+ [opportunity]="data.opportunity"
90310
+ [viewMode]="data.viewMode"
90311
+ [allStrengths]="funnelStrengths()"
90312
+ [currentModalState]="getCurrentModalState()"
90313
+ />
90314
+ }
90315
+ </symphiq-profile-analysis-modal>
90316
+
90317
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
90318
+ <symphiq-funnel-analysis-modal
90319
+ [isLightMode]="isLightMode()"
90320
+ [viewMode]="viewMode()"
90321
+ [allMetrics]="allMetrics()"
90322
+ [allInsights]="allInsights()"
90323
+ [allCharts]="allCharts()"
90324
+ />
90325
+
90326
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
90327
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
90328
+
90329
+ <!-- Tooltip Container -->
90330
+ <symphiq-tooltip-container/>
90331
+
90332
+ <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
90333
+ @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
90334
+ <symphiq-sticky-subscription-continue-button
90335
+ [viewMode]="viewMode()"
90336
+ [isEnabled]="hasCurrencySelected()"
90337
+ [isLoading]="isCurrencySelectionLoading()"
90338
+ (continueClick)="handleStickyButtonClick()"
90339
+ />
90340
+ }
90341
+ </div>
90334
90342
  `
90335
90343
  }]
90336
90344
  }], () => [], { funnelModalComponent: [{