@eric-emg/symphiq-components 1.2.178 → 1.2.179

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 +760 -745
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +57 -57
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -25654,226 +25654,226 @@ class JourneyProgressIndicatorComponent {
25654
25654
  }
25655
25655
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JourneyProgressIndicatorComponent, [{
25656
25656
  type: Component,
25657
- args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
25658
- <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
25659
- <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
25660
- <div class="max-w-7xl mx-auto overflow-visible">
25661
- <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
25662
- <div class="hidden lg:flex items-start justify-between overflow-visible">
25663
- <!-- Steps Container -->
25664
- <div class="flex-1 flex items-start justify-start overflow-visible">
25665
- @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
25666
- <!-- Step Column (Vertical Layout: Dot above, Label below) -->
25667
- <div
25668
- class="flex flex-col items-center relative step-column overflow-visible flex-shrink-0"
25669
- [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'"
25670
- [style.width]="'64px'"
25671
- (mouseenter)="setHoveredStep(idx)"
25672
- (mouseleave)="clearHoveredStep()"
25673
- (click)="handleStepClick(step, idx)">
25674
-
25675
- <!-- Icon Circle -->
25676
- <div
25677
- [ngClass]="getStepIconContainerClasses(step)"
25678
- class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5">
25679
- @if (step.status === 'completed') {
25680
- <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
25681
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25682
- </svg>
25683
- } @else if (step.status === 'current') {
25684
- <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25685
- } @else if (step.status === 'accessible') {
25686
- <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25687
- } @else {
25688
- <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
25689
- {{ idx + 1 }}
25690
- </span>
25691
- }
25692
- </div>
25693
-
25694
- <!-- Abbreviated Title (Always Visible) -->
25695
- <span
25696
- [ngClass]="getAbbreviatedTitleClasses(step)"
25697
- class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis">
25698
- {{ getAbbreviatedTitle(step.title) }}
25699
- </span>
25700
-
25701
- <!-- Absolute Positioned Tooltip -->
25702
- @if (hoveredStepIndex() === idx) {
25703
- <div
25704
- [ngClass]="getExpandedCardClasses(idx)"
25705
- [class.expanded-card-right]="isExpandRight(idx)"
25706
- [class.expanded-card-left]="isExpandLeft(idx)"
25707
- class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
25708
- [style.top]="'-29px'"
25709
- [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
25710
- [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
25711
- <div class="flex items-start px-4 py-3 expanded-content">
25712
- <!-- Step Number and Title with Description -->
25713
- <div class="flex items-start gap-2 w-full">
25714
- <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
25715
- <div class="flex flex-col gap-1 flex-1">
25716
- <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
25717
- <!-- Description (Delayed Fade In) -->
25718
- @if (shouldShowDetailedTooltip()) {
25719
- <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
25720
- {{ step.description }}
25721
- </p>
25722
- }
25723
- </div>
25724
- </div>
25725
- </div>
25726
- </div>
25727
- }
25728
- </div>
25729
-
25730
- <!-- Connector Line (Horizontal, stretches to fill available space) -->
25731
- @if (!isLast) {
25732
- <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
25733
- }
25734
- }
25735
- </div>
25736
-
25737
- <!-- Next Step Button -->
25738
- @if (showNextStepAction() && getNextStep()) {
25739
- <button
25740
- type="button"
25741
- (click)="handleNextStepClick()"
25742
- [disabled]="isLoading()"
25743
- [ngClass]="nextStepButtonClasses()"
25744
- class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0"
25745
- [class.cursor-pointer]="!isLoading()"
25746
- [class.cursor-not-allowed]="isLoading()"
25747
- [class.opacity-50]="isLoading()"
25748
- [class.hover:scale-105]="!isLoading()">
25749
- @if (isLoading()) {
25750
- <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
25751
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25752
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
25753
- </svg>
25754
- Loading...
25755
- } @else {
25756
- {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25757
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25758
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25759
- </svg>
25760
- }
25761
- </button>
25762
- }
25763
- </div>
25764
-
25765
- <!-- Mobile Navigation (below lg) -->
25766
- <div class="lg:hidden">
25767
- <div class="flex items-center justify-between gap-4">
25768
- <!-- Current Step Display -->
25769
- <div class="flex-1 flex items-center gap-3">
25770
- <!-- Step Icon -->
25771
- <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25772
- @if (getCurrentStep().status === 'completed') {
25773
- <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
25774
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25775
- </svg>
25776
- } @else if (getCurrentStep().status === 'current') {
25777
- <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25778
- } @else {
25779
- <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
25780
- {{ getCurrentStepIndex() + 1 }}
25781
- </span>
25782
- }
25783
- </div>
25784
-
25785
- <!-- Step Info -->
25786
- <div class="flex-1 text-left">
25787
- <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
25788
- {{ getCurrentStep().title }}
25789
- </h3>
25790
- <!-- Step Counter with Tooltip Trigger -->
25791
- <div
25792
- class="flex items-center gap-1.5 relative"
25793
- (mouseenter)="showMobileTooltip.set(true)"
25794
- (mouseleave)="showMobileTooltip.set(false)"
25795
- (click)="toggleMobileTooltip()">
25796
- <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
25797
- Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
25798
- </span>
25799
- <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
25800
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25801
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
25802
- </svg>
25803
- </div>
25804
-
25805
- <!-- Mobile Tooltip with All Steps -->
25806
- @if (showMobileTooltip()) {
25807
- <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
25808
- <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
25809
- <div class="space-y-2">
25810
- @for (step of steps(); track step.id; let idx = $index) {
25811
- <div class="flex items-start gap-2">
25812
- <!-- Step Icon -->
25813
- <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25814
- @if (step.status === 'completed') {
25815
- <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
25816
- <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25817
- </svg>
25818
- } @else if (step.status === 'current') {
25819
- <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25820
- } @else if (step.status === 'accessible') {
25821
- <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25822
- } @else {
25823
- <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
25824
- {{ idx + 1 }}
25825
- </span>
25826
- }
25827
- </div>
25828
- <!-- Step Info -->
25829
- <div class="flex-1 min-w-0">
25830
- <div class="flex items-center gap-2">
25831
- <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
25832
- <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
25833
- </div>
25834
- <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
25835
- {{ step.description }}
25836
- </p>
25837
- </div>
25838
- </div>
25839
- }
25840
- </div>
25841
- </div>
25842
- }
25843
- </div>
25844
- </div>
25845
- </div>
25846
-
25847
- <!-- Get Started Button -->
25848
- @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
25849
- <button
25850
- type="button"
25851
- (click)="handleNextStepClick()"
25852
- [disabled]="isLoading()"
25853
- [ngClass]="nextStepButtonClasses()"
25854
- class="px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap"
25855
- [class.cursor-pointer]="!isLoading()"
25856
- [class.cursor-not-allowed]="isLoading()"
25857
- [class.opacity-50]="isLoading()"
25858
- [class.hover:scale-105]="!isLoading()">
25859
- @if (isLoading()) {
25860
- <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
25861
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25862
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
25863
- </svg>
25864
- Loading...
25865
- } @else {
25866
- {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25867
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25868
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25869
- </svg>
25870
- }
25871
- </button>
25872
- }
25873
- </div>
25874
- </div>
25875
- </div>
25876
- </div>
25657
+ args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
25658
+ <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
25659
+ <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
25660
+ <div class="max-w-7xl mx-auto overflow-visible">
25661
+ <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
25662
+ <div class="hidden lg:flex items-start justify-between overflow-visible">
25663
+ <!-- Steps Container -->
25664
+ <div class="flex-1 flex items-start justify-start overflow-visible">
25665
+ @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
25666
+ <!-- Step Column (Vertical Layout: Dot above, Label below) -->
25667
+ <div
25668
+ class="flex flex-col items-center relative step-column overflow-visible flex-shrink-0"
25669
+ [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'"
25670
+ [style.width]="'64px'"
25671
+ (mouseenter)="setHoveredStep(idx)"
25672
+ (mouseleave)="clearHoveredStep()"
25673
+ (click)="handleStepClick(step, idx)">
25674
+
25675
+ <!-- Icon Circle -->
25676
+ <div
25677
+ [ngClass]="getStepIconContainerClasses(step)"
25678
+ class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5">
25679
+ @if (step.status === 'completed') {
25680
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
25681
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25682
+ </svg>
25683
+ } @else if (step.status === 'current') {
25684
+ <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25685
+ } @else if (step.status === 'accessible') {
25686
+ <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25687
+ } @else {
25688
+ <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
25689
+ {{ idx + 1 }}
25690
+ </span>
25691
+ }
25692
+ </div>
25693
+
25694
+ <!-- Abbreviated Title (Always Visible) -->
25695
+ <span
25696
+ [ngClass]="getAbbreviatedTitleClasses(step)"
25697
+ class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis">
25698
+ {{ getAbbreviatedTitle(step.title) }}
25699
+ </span>
25700
+
25701
+ <!-- Absolute Positioned Tooltip -->
25702
+ @if (hoveredStepIndex() === idx) {
25703
+ <div
25704
+ [ngClass]="getExpandedCardClasses(idx)"
25705
+ [class.expanded-card-right]="isExpandRight(idx)"
25706
+ [class.expanded-card-left]="isExpandLeft(idx)"
25707
+ class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
25708
+ [style.top]="'-29px'"
25709
+ [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
25710
+ [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
25711
+ <div class="flex items-start px-4 py-3 expanded-content">
25712
+ <!-- Step Number and Title with Description -->
25713
+ <div class="flex items-start gap-2 w-full">
25714
+ <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
25715
+ <div class="flex flex-col gap-1 flex-1">
25716
+ <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
25717
+ <!-- Description (Delayed Fade In) -->
25718
+ @if (shouldShowDetailedTooltip()) {
25719
+ <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
25720
+ {{ step.description }}
25721
+ </p>
25722
+ }
25723
+ </div>
25724
+ </div>
25725
+ </div>
25726
+ </div>
25727
+ }
25728
+ </div>
25729
+
25730
+ <!-- Connector Line (Horizontal, stretches to fill available space) -->
25731
+ @if (!isLast) {
25732
+ <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
25733
+ }
25734
+ }
25735
+ </div>
25736
+
25737
+ <!-- Next Step Button -->
25738
+ @if (showNextStepAction() && getNextStep()) {
25739
+ <button
25740
+ type="button"
25741
+ (click)="handleNextStepClick()"
25742
+ [disabled]="isLoading()"
25743
+ [ngClass]="nextStepButtonClasses()"
25744
+ class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0"
25745
+ [class.cursor-pointer]="!isLoading()"
25746
+ [class.cursor-not-allowed]="isLoading()"
25747
+ [class.opacity-50]="isLoading()"
25748
+ [class.hover:scale-105]="!isLoading()">
25749
+ @if (isLoading()) {
25750
+ <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
25751
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25752
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
25753
+ </svg>
25754
+ Loading...
25755
+ } @else {
25756
+ {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25757
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25758
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25759
+ </svg>
25760
+ }
25761
+ </button>
25762
+ }
25763
+ </div>
25764
+
25765
+ <!-- Mobile Navigation (below lg) -->
25766
+ <div class="lg:hidden">
25767
+ <div class="flex items-center justify-between gap-4">
25768
+ <!-- Current Step Display -->
25769
+ <div class="flex-1 flex items-center gap-3">
25770
+ <!-- Step Icon -->
25771
+ <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25772
+ @if (getCurrentStep().status === 'completed') {
25773
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
25774
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25775
+ </svg>
25776
+ } @else if (getCurrentStep().status === 'current') {
25777
+ <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25778
+ } @else {
25779
+ <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
25780
+ {{ getCurrentStepIndex() + 1 }}
25781
+ </span>
25782
+ }
25783
+ </div>
25784
+
25785
+ <!-- Step Info -->
25786
+ <div class="flex-1 text-left">
25787
+ <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
25788
+ {{ getCurrentStep().title }}
25789
+ </h3>
25790
+ <!-- Step Counter with Tooltip Trigger -->
25791
+ <div
25792
+ class="flex items-center gap-1.5 relative"
25793
+ (mouseenter)="showMobileTooltip.set(true)"
25794
+ (mouseleave)="showMobileTooltip.set(false)"
25795
+ (click)="toggleMobileTooltip()">
25796
+ <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
25797
+ Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
25798
+ </span>
25799
+ <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
25800
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25801
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
25802
+ </svg>
25803
+ </div>
25804
+
25805
+ <!-- Mobile Tooltip with All Steps -->
25806
+ @if (showMobileTooltip()) {
25807
+ <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
25808
+ <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
25809
+ <div class="space-y-2">
25810
+ @for (step of steps(); track step.id; let idx = $index) {
25811
+ <div class="flex items-start gap-2">
25812
+ <!-- Step Icon -->
25813
+ <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25814
+ @if (step.status === 'completed') {
25815
+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
25816
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
25817
+ </svg>
25818
+ } @else if (step.status === 'current') {
25819
+ <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25820
+ } @else if (step.status === 'accessible') {
25821
+ <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25822
+ } @else {
25823
+ <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
25824
+ {{ idx + 1 }}
25825
+ </span>
25826
+ }
25827
+ </div>
25828
+ <!-- Step Info -->
25829
+ <div class="flex-1 min-w-0">
25830
+ <div class="flex items-center gap-2">
25831
+ <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
25832
+ <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
25833
+ </div>
25834
+ <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
25835
+ {{ step.description }}
25836
+ </p>
25837
+ </div>
25838
+ </div>
25839
+ }
25840
+ </div>
25841
+ </div>
25842
+ }
25843
+ </div>
25844
+ </div>
25845
+ </div>
25846
+
25847
+ <!-- Get Started Button -->
25848
+ @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
25849
+ <button
25850
+ type="button"
25851
+ (click)="handleNextStepClick()"
25852
+ [disabled]="isLoading()"
25853
+ [ngClass]="nextStepButtonClasses()"
25854
+ class="px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap"
25855
+ [class.cursor-pointer]="!isLoading()"
25856
+ [class.cursor-not-allowed]="isLoading()"
25857
+ [class.opacity-50]="isLoading()"
25858
+ [class.hover:scale-105]="!isLoading()">
25859
+ @if (isLoading()) {
25860
+ <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
25861
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25862
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
25863
+ </svg>
25864
+ Loading...
25865
+ } @else {
25866
+ {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25867
+ <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25868
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25869
+ </svg>
25870
+ }
25871
+ </button>
25872
+ }
25873
+ </div>
25874
+ </div>
25875
+ </div>
25876
+ </div>
25877
25877
  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.step-glow-current{box-shadow:0 0 0 3px #3b82f64d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-current-dark{box-shadow:0 0 0 3px #60a5fa4d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-completed{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark{box-shadow:0 0 0 2px #34d39933}.step-glow-accessible{box-shadow:0 0 0 2px #3b82f61f}.step-glow-accessible-dark{box-shadow:0 0 0 2px #60a5fa26}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column:hover .step-circle{transform:scale(1.05)}.expanded-card-right{animation:expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left{animation:expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade{animation:fadeIn .15s ease-out forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.expanded-content{animation:contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes contentFadeIn{to{opacity:1}}\n"] }]
25878
25878
  }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] }); })();
25879
25879
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 369 }); })();
@@ -32412,7 +32412,7 @@ class FocusAreaOpportunityDetailModalContentComponent {
32412
32412
  `
32413
32413
  }]
32414
32414
  }], null, { opportunity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opportunity", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
32415
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunityDetailModalContentComponent, { className: "FocusAreaOpportunityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunity-detail-modal-content.component.ts", lineNumber: 92 }); })();
32415
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunityDetailModalContentComponent, { className: "FocusAreaOpportunityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunity-detail-modal-content.component.ts", lineNumber: 94 }); })();
32416
32416
 
32417
32417
  class CircularProgressComponent {
32418
32418
  constructor() {
@@ -56291,9 +56291,6 @@ class FunnelMetricsVisualizationComponent {
56291
56291
  return formatNumber(value);
56292
56292
  }
56293
56293
  getMetricTitle(metric) {
56294
- if (metric.description) {
56295
- return metric.description;
56296
- }
56297
56294
  return metric.metric
56298
56295
  .split('_')
56299
56296
  .map(word => word.charAt(0) + word.slice(1).toLowerCase())
@@ -57681,7 +57678,25 @@ class InitialTargetSettingComponent {
57681
57678
  }
57682
57679
  const series = transformUiDataToChartSeries(mainData, yoyData, MetricEnum.PURCHASE_REVENUE);
57683
57680
  if (series.length === 0) {
57684
- console.log('no series length');
57681
+ console.log('[revenueChartData] series.length === 0. Diagnostic info:', {
57682
+ mainData: {
57683
+ exists: !!mainData,
57684
+ hasConvertedDataResults: !!mainData?.convertedDataResults,
57685
+ metrics: mainData?.convertedDataResults?.metrics,
57686
+ dimensions: mainData?.convertedDataResults?.dimensions,
57687
+ hasPurchaseRevenue: mainData?.convertedDataResults?.metrics?.includes(MetricEnum.PURCHASE_REVENUE),
57688
+ rowCount: mainData?.convertedDataResults?.rows?.length ?? 0
57689
+ },
57690
+ yoyData: {
57691
+ exists: !!yoyData,
57692
+ hasConvertedDataResults: !!yoyData?.convertedDataResults,
57693
+ metrics: yoyData?.convertedDataResults?.metrics,
57694
+ dimensions: yoyData?.convertedDataResults?.dimensions,
57695
+ hasPurchaseRevenue: yoyData?.convertedDataResults?.metrics?.includes(MetricEnum.PURCHASE_REVENUE),
57696
+ rowCount: yoyData?.convertedDataResults?.rows?.length ?? 0
57697
+ },
57698
+ targetMetric: MetricEnum.PURCHASE_REVENUE
57699
+ });
57685
57700
  return null;
57686
57701
  }
57687
57702
  return {
@@ -63428,7 +63443,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
63428
63443
  type: HostListener,
63429
63444
  args: ['document:keydown', ['$event']]
63430
63445
  }] }); })();
63431
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 336 }); })();
63446
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 337 }); })();
63432
63447
 
63433
63448
  function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
63434
63449
  i0.ɵɵelement(0, "div", 6);
@@ -84446,525 +84461,525 @@ class SymphiqProfileAnalysisDashboardComponent {
84446
84461
  standalone: true,
84447
84462
  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],
84448
84463
  changeDetection: ChangeDetectionStrategy.OnPush,
84449
- template: `
84450
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
84451
- <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>
84452
-
84453
- <!-- Scroll Progress Bar -->
84454
- <div
84455
- [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'">
84456
- <div
84457
- [style.width.%]="scrollProgress()"
84458
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
84459
- class="h-full transition-all duration-200 ease-out">
84460
- </div>
84461
- </div>
84462
-
84463
- <div class="relative z-[51]">
84464
- <!-- Dashboard Header -->
84465
- <symphiq-dashboard-header
84466
- [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
84467
- [subtitle]="getAnalysisSubtitle()"
84468
- [currentSection]="getAnalysisSubtitle()"
84469
- [viewMode]="viewMode()"
84470
- [viewModeLabel]="displayModeLabel()"
84471
- [isLoading]="isLoading()"
84472
- [requestedByUser]="requestedByUser()"
84473
- [createdDate]="profileAnalysis()?.selfContentCompletedDate"
84474
- (searchClick)="openSearch()"
84475
- (viewModeClick)="openViewModeSwitcher()"
84476
- />
84477
-
84478
- <!-- Journey Progress Banner -->
84479
- @if (isSimplifiedView() && !isOnboarded()) {
84480
- <symphiq-journey-progress-indicator
84481
- [viewMode]="viewMode()"
84482
- [currentStepId]="currentStepId()"
84483
- [showNextStepAction]="true"
84484
- [forDemo]="forDemo()"
84485
- [maxAccessibleStepId]="maxAccessibleStepId()"
84486
- (nextStepClick)="nextStepClick.emit()"
84487
- (stepClick)="stepClick.emit($event)"
84488
- />
84489
- }
84490
-
84491
- <!-- Main Content -->
84492
- <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
84493
-
84494
- <!-- Welcome Banner (Simplified View Only) -->
84495
- @if (isSimplifiedView()) {
84496
- <div class="mb-12">
84497
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
84498
- <symphiq-shop-welcome-banner
84499
- [viewMode]="viewMode()"
84500
- [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
84501
- [isOnboarded]="isOnboarded()"
84502
- />
84503
- }
84504
- @if (isFocusAreaAnalysis()) {
84505
- <symphiq-focus-area-welcome-banner
84506
- [viewMode]="viewMode()"
84507
- [focusAreaDomain]="focusAreaDomain()"
84508
- [focusAreaName]="focusAreaName()"
84509
- [focusAreaDetails]="focusAreaDetails()"
84510
- />
84511
- }
84512
- @if (isMetricAnalysis()) {
84513
- <symphiq-metric-welcome-banner
84514
- [viewMode]="viewMode()"
84515
- [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
84516
- [isOnboarded]="isOnboarded()"
84517
- />
84518
- }
84519
- </div>
84520
- }
84521
-
84522
- <!-- Simplified View Content -->
84523
- @if (isSimplifiedView()) {
84524
- <!-- Strategic Insights & Goals -->
84525
- <div class="mb-8">
84526
- <symphiq-strategic-goals-tiled-grid
84527
- [goals]="strategicRoadmapGoals()"
84528
- [viewMode]="viewMode()"
84529
- (viewMoreClick)="openGoalModal($event)"
84530
- />
84531
- </div>
84532
-
84533
- <!-- Supporting Business Context -->
84534
- @if (nonStrategicSections().length > 0) {
84535
- <div>
84536
- <symphiq-collapsible-analysis-section-group
84537
- [sections]="nonStrategicSections()"
84538
- [viewMode]="viewMode()"
84539
- [executiveSummary]="executiveSummary()"
84540
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
84541
- [metricExecutiveSummary]="metricExecutiveSummary()"
84542
- [metricName]="metricName()"
84543
- [allGoals]="allGoals()"
84544
- [allMetrics]="allMetrics()"
84545
- [allCharts]="allCharts()"
84546
- [allInsights]="allInsights()"
84547
- />
84548
- </div>
84549
- }
84550
- }
84551
-
84552
- <!-- Compact & Expanded View Content -->
84553
- @if (!isSimplifiedView()) {
84554
- <!-- SHOP Executive Summary -->
84555
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
84556
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
84557
- <!-- Summary Banner -->
84558
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
84559
- <div class="space-y-6">
84560
- <div class="flex items-start justify-between gap-4">
84561
- <div class="flex-1">
84562
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
84563
- Executive Summary
84564
- </h2>
84565
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
84566
- {{ summary.gradeRationale }}
84567
- </p>
84568
- </div>
84569
- @if (summary.overallGrade) {
84570
- <symphiq-grade-badge
84571
- [grade]="summary.overallGrade"
84572
- [gradeRationale]="summary.gradeRationale || ''"
84573
- [viewMode]="viewMode()"
84574
- />
84575
- }
84576
- </div>
84577
-
84578
- @if (summary.narrative) {
84579
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
84580
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
84581
- Analysis Narrative
84582
- </h3>
84583
- <div class="relative">
84584
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
84585
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
84586
- <symphiq-napkin-visual-placeholder
84587
- [visual]="summary.napkinVisual"
84588
- [viewMode]="viewMode()"
84589
- />
84590
- </div>
84591
- }
84592
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
84593
- {{ summary.narrative }}
84594
- </p>
84595
- <div class="clear-both"></div>
84596
- </div>
84597
- </div>
84598
- }
84599
-
84600
- <!-- Stats -->
84601
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
84602
- <button
84603
- type="button"
84604
- (click)="onKeyStrengthsClick(summary)"
84605
- [ngClass]="getKeyStrengthsStatCardClasses()"
84606
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84607
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84608
- Key Strengths
84609
- </div>
84610
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
84611
- {{ summary.keyStrengths?.length || 0 }}
84612
- </div>
84613
- <div class="flex items-center gap-1.5 text-xs font-medium">
84614
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
84615
- <symphiq-icon
84616
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
84617
- size="w-4 h-4"
84618
- [ngClass]="getKeyStrengthsButtonTextClasses()"
84619
- class="transition-transform group-hover:translate-x-1"
84620
- />
84621
- </div>
84622
- </button>
84623
- <button
84624
- type="button"
84625
- (click)="onCriticalGapsClick(summary)"
84626
- [ngClass]="getCriticalGapsStatCardClasses()"
84627
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84628
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84629
- Critical Gaps
84630
- </div>
84631
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
84632
- {{ summary.criticalGaps?.length || 0 }}
84633
- </div>
84634
- <div class="flex items-center gap-1.5 text-xs font-medium">
84635
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
84636
- <symphiq-icon
84637
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
84638
- size="w-4 h-4"
84639
- [ngClass]="getCriticalGapsButtonTextClasses()"
84640
- class="transition-transform group-hover:translate-x-1"
84641
- />
84642
- </div>
84643
- </button>
84644
- <button
84645
- type="button"
84646
- (click)="scrollToQuickWins()"
84647
- [ngClass]="getQuickWinsStatCardClasses()"
84648
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84649
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84650
- Quick Wins
84651
- </div>
84652
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
84653
- {{ summary.quickWins?.length || 0 }}
84654
- </div>
84655
- <div class="flex items-center gap-1.5 text-xs font-medium">
84656
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
84657
- <symphiq-icon
84658
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
84659
- size="w-4 h-4"
84660
- [ngClass]="getQuickWinsButtonTextClasses()"
84661
- class="transition-transform group-hover:translate-y-1 animate-bounce"
84662
- />
84663
- </div>
84664
- </button>
84665
- </div>
84666
- </div>
84667
- </div>
84668
-
84669
- <!-- Quick Wins -->
84670
- @if (summary.quickWins && summary.quickWins.length > 0) {
84671
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
84672
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
84673
- Quick Wins
84674
- </h3>
84675
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
84676
- @for (win of summary.quickWins; track $index) {
84677
- <div [ngClass]="getQuickWinCardClasses()"
84678
- class="rounded-xl p-6 transition-all duration-300">
84679
- <div class="space-y-4">
84680
- <div class="flex items-start gap-3">
84681
- <span [ngClass]="getNumberBadgeClasses()"
84682
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
84683
- {{ $index + 1 }}
84684
- </span>
84685
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
84686
- {{ win.action }}
84687
- </p>
84688
- </div>
84689
-
84690
- <div class="flex flex-wrap gap-2">
84691
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
84692
- class="px-3 py-1 rounded-full text-xs font-semibold">
84693
- {{ formatLabel(win.effort) }} Effort
84694
- </span>
84695
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
84696
- class="px-3 py-1 rounded-full text-xs font-semibold">
84697
- {{ formatLabel(win.impact) }} Impact
84698
- </span>
84699
- </div>
84700
-
84701
- @if (win.estimatedTimeframe) {
84702
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
84703
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
84704
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
84705
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
84706
- </svg>
84707
- <span>{{ win.estimatedTimeframe }}</span>
84708
- </div>
84709
- }
84710
-
84711
- @if (win.relatedGoalId) {
84712
- <div class="space-y-2">
84713
- <h4 [ngClass]="getMetaTextClasses()"
84714
- class="text-xs font-semibold uppercase tracking-wider">
84715
- Related Goal
84716
- </h4>
84717
- <symphiq-related-goal-chips
84718
- [relatedGoalIds]="[win.relatedGoalId]"
84719
- [allGoals]="allGoals()"
84720
- [viewMode]="viewMode()"
84721
- />
84722
- </div>
84723
- }
84724
- </div>
84725
- </div>
84726
- }
84727
- </div>
84728
- </div>
84729
- }
84730
- </section>
84731
- }
84732
-
84733
- <!-- FOCUS_AREA Executive Summary -->
84734
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
84735
- <symphiq-focus-area-executive-summary
84736
- [viewMode]="viewMode()"
84737
- [summary]="summary"
84738
- [allGoals]="allGoals()"
84739
- (topPrioritiesClick)="handleTopPrioritiesClick()"
84740
- (priorityDetailClick)="handlePriorityDetailClick($event)"
84741
- />
84742
- }
84743
-
84744
- <!-- METRIC Executive Summary -->
84745
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
84746
- <symphiq-metric-executive-summary
84747
- [viewMode]="viewMode()"
84748
- [summary]="summary"
84749
- [metricName]="metricName()"
84750
- [allGoals]="allGoals()"
84751
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
84752
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
84753
- />
84754
- }
84755
-
84756
- <!-- Divider Before First Section -->
84757
- @if (sections(); as sectionList) {
84758
- @if (sectionList.length > 0 && sectionList[0].icon) {
84759
- <symphiq-section-divider
84760
- [viewMode]="viewMode()"
84761
- [sectionIcon]="sectionList[0].icon"
84762
- />
84763
- }
84764
- }
84765
-
84766
- <!-- Profile Analysis Sections -->
84767
- @if (sections(); as sectionList) {
84768
- <section class="space-y-8">
84769
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
84770
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
84771
- class="rounded-xl p-8 scroll-mt-24">
84772
- <!-- Icon and Title -->
84773
- <div class="flex items-start gap-3 mb-6">
84774
- @if (section.icon) {
84775
- <div [ngClass]="getSectionIconClasses()"
84776
- class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
84777
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
84778
- </div>
84779
- }
84780
- <div class="flex-1">
84781
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
84782
- {{ section.title }}
84783
- </h3>
84784
- </div>
84785
- </div>
84786
-
84787
- <!-- Description and Visual Side-by-Side -->
84788
- @if (section.description || (section.visual && section.visual.enabled)) {
84789
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
84790
- [class.lg:flex-row-reverse]="idx % 2 === 0">
84791
- @if (section.visual && section.visual.enabled) {
84792
- <div class="w-full lg:w-2/3">
84793
- <symphiq-napkin-visual-placeholder
84794
- [visual]="section.visual"
84795
- [viewMode]="viewMode()"
84796
- />
84797
- </div>
84798
- }
84799
- @if (section.description) {
84800
- <div class="w-full"
84801
- [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
84802
- <p [ngClass]="getSectionDescriptionClasses()"
84803
- class="text-sm leading-relaxed whitespace-pre-line">
84804
- {{ section.description }}
84805
- </p>
84806
- </div>
84807
- }
84808
- </div>
84809
- }
84810
-
84811
- <!-- Section Content -->
84812
- <symphiq-profile-section-content
84813
- [section]="section"
84814
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
84815
- [viewMode]="viewMode()"
84816
- [sectionIndex]="idx"
84817
- [allGoals]="allGoals()"
84818
- [allMetrics]="allMetrics()"
84819
- [allCharts]="allCharts()"
84820
- [allInsights]="allInsights()"
84821
- />
84822
- </div>
84823
-
84824
- <!-- Section Divider (between sections) -->
84825
- @if (!last) {
84826
- <symphiq-section-divider
84827
- [viewMode]="viewMode()"
84828
- [sectionIcon]="sectionList[idx + 1].icon"
84829
- />
84830
- }
84831
- }
84832
- </section>
84833
- }
84834
- }
84835
-
84836
- </main>
84837
-
84838
- <!-- Table of Contents (Compact & Expanded Views) -->
84839
- @if (!isSimplifiedView() && sections()) {
84840
- <symphiq-floating-toc
84841
- [sections]="tocSections()"
84842
- [viewMode]="viewMode()"
84843
- [embedded]="embedded()"
84844
- [scrollElement]="scrollElement() ?? undefined"
84845
- />
84846
- }
84847
-
84848
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
84849
- @if (!isSimplifiedView() && sections()) {
84850
- <symphiq-section-navigation
84851
- [sections]="tocSections()"
84852
- [viewMode]="viewMode()"
84853
- [embedded]="embedded()"
84854
- [scrollElement]="scrollElement() ?? undefined"
84855
- />
84856
- }
84857
-
84858
- <!-- Search Modal -->
84859
- <symphiq-search-modal
84860
- [isOpen]="isSearchOpen()"
84861
- [isLightMode]="isLightMode()"
84862
- (close)="closeSearch()"
84863
- />
84864
-
84865
- <!-- View Mode Switcher Modal -->
84866
- <symphiq-view-mode-switcher-modal
84867
- [isOpen]="isViewModeSwitcherOpen()"
84868
- [currentMode]="currentDisplayMode()"
84869
- [viewMode]="viewMode()"
84870
- (close)="closeViewModeSwitcher()"
84871
- (modeSelected)="handleDisplayModeChange($event)"
84872
- />
84873
-
84874
- <!-- Profile Analysis Modal -->
84875
- <symphiq-profile-analysis-modal
84876
- [isLightMode]="isLightMode()"
84877
- [allMetrics]="allMetrics()"
84878
- [allInsights]="allInsights()"
84879
- [allBusinessInsights]="allBusinessInsights()"
84880
- [allCharts]="allCharts()"
84881
- >
84882
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
84883
- <symphiq-goal-card
84884
- [goal]="data.goal"
84885
- [viewMode]="data.viewMode"
84886
- [isInModal]="true"
84887
- [allMetrics]="allMetrics()"
84888
- [allCharts]="allCharts()"
84889
- [allInsights]="allInsights()"
84890
- [currentModalState]="getCurrentModalState()"
84891
- />
84892
- }
84893
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
84894
- <symphiq-goal-objectives-modal-content
84895
- [goal]="data.goal"
84896
- [viewMode]="data.viewMode"
84897
- />
84898
- }
84899
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
84900
- <symphiq-objective-strategies-modal-content
84901
- [objective]="data.objective"
84902
- [goalTitle]="data.goalTitle"
84903
- [viewMode]="data.viewMode"
84904
- />
84905
- }
84906
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
84907
- <symphiq-strategy-recommendations-modal-content
84908
- [strategy]="data.strategy"
84909
- [objectiveTitle]="data.objectiveTitle"
84910
- [goalTitle]="data.goalTitle"
84911
- [viewMode]="data.viewMode"
84912
- [allMetrics]="allMetrics()"
84913
- [allCharts]="allCharts()"
84914
- [allInsights]="allInsights()"
84915
- [allBusinessInsights]="allBusinessInsights()"
84916
- [currentModalState]="getCurrentModalState()"
84917
- />
84918
- }
84919
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
84920
- <symphiq-category-detail-modal-content
84921
- [category]="data.category"
84922
- [viewMode]="data.viewMode"
84923
- [scrollToSection]="data.scrollToSection"
84924
- />
84925
- }
84926
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
84927
- <symphiq-strength-detail-modal-content
84928
- [strength]="data.strength"
84929
- [viewMode]="data.viewMode"
84930
- [allFunnelStrengths]="funnelStrengths()"
84931
- [currentModalState]="getCurrentModalState()"
84932
- />
84933
- }
84934
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
84935
- <symphiq-gap-detail-modal-content
84936
- [gap]="data.gap"
84937
- [viewMode]="data.viewMode"
84938
- [allGoals]="allGoals()"
84939
- [allWeaknesses]="funnelWeaknesses()"
84940
- [currentModalState]="getCurrentModalState()"
84941
- />
84942
- }
84943
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
84944
- <symphiq-opportunity-detail-modal-content
84945
- [opportunity]="data.opportunity"
84946
- [viewMode]="data.viewMode"
84947
- [allStrengths]="funnelStrengths()"
84948
- [currentModalState]="getCurrentModalState()"
84949
- />
84950
- }
84951
- </symphiq-profile-analysis-modal>
84952
-
84953
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
84954
- <symphiq-funnel-analysis-modal
84955
- [isLightMode]="isLightMode()"
84956
- [viewMode]="viewMode()"
84957
- [allMetrics]="allMetrics()"
84958
- [allInsights]="allInsights()"
84959
- [allCharts]="allCharts()"
84960
- />
84961
-
84962
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
84963
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
84964
-
84965
- <!-- Tooltip Container -->
84966
- <symphiq-tooltip-container/>
84967
- </div>
84464
+ template: `
84465
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
84466
+ <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>
84467
+
84468
+ <!-- Scroll Progress Bar -->
84469
+ <div
84470
+ [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'">
84471
+ <div
84472
+ [style.width.%]="scrollProgress()"
84473
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
84474
+ class="h-full transition-all duration-200 ease-out">
84475
+ </div>
84476
+ </div>
84477
+
84478
+ <div class="relative z-[51]">
84479
+ <!-- Dashboard Header -->
84480
+ <symphiq-dashboard-header
84481
+ [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
84482
+ [subtitle]="getAnalysisSubtitle()"
84483
+ [currentSection]="getAnalysisSubtitle()"
84484
+ [viewMode]="viewMode()"
84485
+ [viewModeLabel]="displayModeLabel()"
84486
+ [isLoading]="isLoading()"
84487
+ [requestedByUser]="requestedByUser()"
84488
+ [createdDate]="profileAnalysis()?.selfContentCompletedDate"
84489
+ (searchClick)="openSearch()"
84490
+ (viewModeClick)="openViewModeSwitcher()"
84491
+ />
84492
+
84493
+ <!-- Journey Progress Banner -->
84494
+ @if (isSimplifiedView() && !isOnboarded()) {
84495
+ <symphiq-journey-progress-indicator
84496
+ [viewMode]="viewMode()"
84497
+ [currentStepId]="currentStepId()"
84498
+ [showNextStepAction]="true"
84499
+ [forDemo]="forDemo()"
84500
+ [maxAccessibleStepId]="maxAccessibleStepId()"
84501
+ (nextStepClick)="nextStepClick.emit()"
84502
+ (stepClick)="stepClick.emit($event)"
84503
+ />
84504
+ }
84505
+
84506
+ <!-- Main Content -->
84507
+ <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
84508
+
84509
+ <!-- Welcome Banner (Simplified View Only) -->
84510
+ @if (isSimplifiedView()) {
84511
+ <div class="mb-12">
84512
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
84513
+ <symphiq-shop-welcome-banner
84514
+ [viewMode]="viewMode()"
84515
+ [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
84516
+ [isOnboarded]="isOnboarded()"
84517
+ />
84518
+ }
84519
+ @if (isFocusAreaAnalysis()) {
84520
+ <symphiq-focus-area-welcome-banner
84521
+ [viewMode]="viewMode()"
84522
+ [focusAreaDomain]="focusAreaDomain()"
84523
+ [focusAreaName]="focusAreaName()"
84524
+ [focusAreaDetails]="focusAreaDetails()"
84525
+ />
84526
+ }
84527
+ @if (isMetricAnalysis()) {
84528
+ <symphiq-metric-welcome-banner
84529
+ [viewMode]="viewMode()"
84530
+ [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
84531
+ [isOnboarded]="isOnboarded()"
84532
+ />
84533
+ }
84534
+ </div>
84535
+ }
84536
+
84537
+ <!-- Simplified View Content -->
84538
+ @if (isSimplifiedView()) {
84539
+ <!-- Strategic Insights & Goals -->
84540
+ <div class="mb-8">
84541
+ <symphiq-strategic-goals-tiled-grid
84542
+ [goals]="strategicRoadmapGoals()"
84543
+ [viewMode]="viewMode()"
84544
+ (viewMoreClick)="openGoalModal($event)"
84545
+ />
84546
+ </div>
84547
+
84548
+ <!-- Supporting Business Context -->
84549
+ @if (nonStrategicSections().length > 0) {
84550
+ <div>
84551
+ <symphiq-collapsible-analysis-section-group
84552
+ [sections]="nonStrategicSections()"
84553
+ [viewMode]="viewMode()"
84554
+ [executiveSummary]="executiveSummary()"
84555
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
84556
+ [metricExecutiveSummary]="metricExecutiveSummary()"
84557
+ [metricName]="metricName()"
84558
+ [allGoals]="allGoals()"
84559
+ [allMetrics]="allMetrics()"
84560
+ [allCharts]="allCharts()"
84561
+ [allInsights]="allInsights()"
84562
+ />
84563
+ </div>
84564
+ }
84565
+ }
84566
+
84567
+ <!-- Compact & Expanded View Content -->
84568
+ @if (!isSimplifiedView()) {
84569
+ <!-- SHOP Executive Summary -->
84570
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
84571
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
84572
+ <!-- Summary Banner -->
84573
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
84574
+ <div class="space-y-6">
84575
+ <div class="flex items-start justify-between gap-4">
84576
+ <div class="flex-1">
84577
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
84578
+ Executive Summary
84579
+ </h2>
84580
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
84581
+ {{ summary.gradeRationale }}
84582
+ </p>
84583
+ </div>
84584
+ @if (summary.overallGrade) {
84585
+ <symphiq-grade-badge
84586
+ [grade]="summary.overallGrade"
84587
+ [gradeRationale]="summary.gradeRationale || ''"
84588
+ [viewMode]="viewMode()"
84589
+ />
84590
+ }
84591
+ </div>
84592
+
84593
+ @if (summary.narrative) {
84594
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
84595
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
84596
+ Analysis Narrative
84597
+ </h3>
84598
+ <div class="relative">
84599
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
84600
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
84601
+ <symphiq-napkin-visual-placeholder
84602
+ [visual]="summary.napkinVisual"
84603
+ [viewMode]="viewMode()"
84604
+ />
84605
+ </div>
84606
+ }
84607
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
84608
+ {{ summary.narrative }}
84609
+ </p>
84610
+ <div class="clear-both"></div>
84611
+ </div>
84612
+ </div>
84613
+ }
84614
+
84615
+ <!-- Stats -->
84616
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
84617
+ <button
84618
+ type="button"
84619
+ (click)="onKeyStrengthsClick(summary)"
84620
+ [ngClass]="getKeyStrengthsStatCardClasses()"
84621
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84622
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84623
+ Key Strengths
84624
+ </div>
84625
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
84626
+ {{ summary.keyStrengths?.length || 0 }}
84627
+ </div>
84628
+ <div class="flex items-center gap-1.5 text-xs font-medium">
84629
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
84630
+ <symphiq-icon
84631
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
84632
+ size="w-4 h-4"
84633
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
84634
+ class="transition-transform group-hover:translate-x-1"
84635
+ />
84636
+ </div>
84637
+ </button>
84638
+ <button
84639
+ type="button"
84640
+ (click)="onCriticalGapsClick(summary)"
84641
+ [ngClass]="getCriticalGapsStatCardClasses()"
84642
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84643
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84644
+ Critical Gaps
84645
+ </div>
84646
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
84647
+ {{ summary.criticalGaps?.length || 0 }}
84648
+ </div>
84649
+ <div class="flex items-center gap-1.5 text-xs font-medium">
84650
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
84651
+ <symphiq-icon
84652
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
84653
+ size="w-4 h-4"
84654
+ [ngClass]="getCriticalGapsButtonTextClasses()"
84655
+ class="transition-transform group-hover:translate-x-1"
84656
+ />
84657
+ </div>
84658
+ </button>
84659
+ <button
84660
+ type="button"
84661
+ (click)="scrollToQuickWins()"
84662
+ [ngClass]="getQuickWinsStatCardClasses()"
84663
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
84664
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
84665
+ Quick Wins
84666
+ </div>
84667
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
84668
+ {{ summary.quickWins?.length || 0 }}
84669
+ </div>
84670
+ <div class="flex items-center gap-1.5 text-xs font-medium">
84671
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
84672
+ <symphiq-icon
84673
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
84674
+ size="w-4 h-4"
84675
+ [ngClass]="getQuickWinsButtonTextClasses()"
84676
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
84677
+ />
84678
+ </div>
84679
+ </button>
84680
+ </div>
84681
+ </div>
84682
+ </div>
84683
+
84684
+ <!-- Quick Wins -->
84685
+ @if (summary.quickWins && summary.quickWins.length > 0) {
84686
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
84687
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
84688
+ Quick Wins
84689
+ </h3>
84690
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
84691
+ @for (win of summary.quickWins; track $index) {
84692
+ <div [ngClass]="getQuickWinCardClasses()"
84693
+ class="rounded-xl p-6 transition-all duration-300">
84694
+ <div class="space-y-4">
84695
+ <div class="flex items-start gap-3">
84696
+ <span [ngClass]="getNumberBadgeClasses()"
84697
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
84698
+ {{ $index + 1 }}
84699
+ </span>
84700
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
84701
+ {{ win.action }}
84702
+ </p>
84703
+ </div>
84704
+
84705
+ <div class="flex flex-wrap gap-2">
84706
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
84707
+ class="px-3 py-1 rounded-full text-xs font-semibold">
84708
+ {{ formatLabel(win.effort) }} Effort
84709
+ </span>
84710
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
84711
+ class="px-3 py-1 rounded-full text-xs font-semibold">
84712
+ {{ formatLabel(win.impact) }} Impact
84713
+ </span>
84714
+ </div>
84715
+
84716
+ @if (win.estimatedTimeframe) {
84717
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
84718
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
84719
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
84720
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
84721
+ </svg>
84722
+ <span>{{ win.estimatedTimeframe }}</span>
84723
+ </div>
84724
+ }
84725
+
84726
+ @if (win.relatedGoalId) {
84727
+ <div class="space-y-2">
84728
+ <h4 [ngClass]="getMetaTextClasses()"
84729
+ class="text-xs font-semibold uppercase tracking-wider">
84730
+ Related Goal
84731
+ </h4>
84732
+ <symphiq-related-goal-chips
84733
+ [relatedGoalIds]="[win.relatedGoalId]"
84734
+ [allGoals]="allGoals()"
84735
+ [viewMode]="viewMode()"
84736
+ />
84737
+ </div>
84738
+ }
84739
+ </div>
84740
+ </div>
84741
+ }
84742
+ </div>
84743
+ </div>
84744
+ }
84745
+ </section>
84746
+ }
84747
+
84748
+ <!-- FOCUS_AREA Executive Summary -->
84749
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
84750
+ <symphiq-focus-area-executive-summary
84751
+ [viewMode]="viewMode()"
84752
+ [summary]="summary"
84753
+ [allGoals]="allGoals()"
84754
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
84755
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
84756
+ />
84757
+ }
84758
+
84759
+ <!-- METRIC Executive Summary -->
84760
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
84761
+ <symphiq-metric-executive-summary
84762
+ [viewMode]="viewMode()"
84763
+ [summary]="summary"
84764
+ [metricName]="metricName()"
84765
+ [allGoals]="allGoals()"
84766
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
84767
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
84768
+ />
84769
+ }
84770
+
84771
+ <!-- Divider Before First Section -->
84772
+ @if (sections(); as sectionList) {
84773
+ @if (sectionList.length > 0 && sectionList[0].icon) {
84774
+ <symphiq-section-divider
84775
+ [viewMode]="viewMode()"
84776
+ [sectionIcon]="sectionList[0].icon"
84777
+ />
84778
+ }
84779
+ }
84780
+
84781
+ <!-- Profile Analysis Sections -->
84782
+ @if (sections(); as sectionList) {
84783
+ <section class="space-y-8">
84784
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
84785
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
84786
+ class="rounded-xl p-8 scroll-mt-24">
84787
+ <!-- Icon and Title -->
84788
+ <div class="flex items-start gap-3 mb-6">
84789
+ @if (section.icon) {
84790
+ <div [ngClass]="getSectionIconClasses()"
84791
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
84792
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
84793
+ </div>
84794
+ }
84795
+ <div class="flex-1">
84796
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
84797
+ {{ section.title }}
84798
+ </h3>
84799
+ </div>
84800
+ </div>
84801
+
84802
+ <!-- Description and Visual Side-by-Side -->
84803
+ @if (section.description || (section.visual && section.visual.enabled)) {
84804
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
84805
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
84806
+ @if (section.visual && section.visual.enabled) {
84807
+ <div class="w-full lg:w-2/3">
84808
+ <symphiq-napkin-visual-placeholder
84809
+ [visual]="section.visual"
84810
+ [viewMode]="viewMode()"
84811
+ />
84812
+ </div>
84813
+ }
84814
+ @if (section.description) {
84815
+ <div class="w-full"
84816
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
84817
+ <p [ngClass]="getSectionDescriptionClasses()"
84818
+ class="text-sm leading-relaxed whitespace-pre-line">
84819
+ {{ section.description }}
84820
+ </p>
84821
+ </div>
84822
+ }
84823
+ </div>
84824
+ }
84825
+
84826
+ <!-- Section Content -->
84827
+ <symphiq-profile-section-content
84828
+ [section]="section"
84829
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
84830
+ [viewMode]="viewMode()"
84831
+ [sectionIndex]="idx"
84832
+ [allGoals]="allGoals()"
84833
+ [allMetrics]="allMetrics()"
84834
+ [allCharts]="allCharts()"
84835
+ [allInsights]="allInsights()"
84836
+ />
84837
+ </div>
84838
+
84839
+ <!-- Section Divider (between sections) -->
84840
+ @if (!last) {
84841
+ <symphiq-section-divider
84842
+ [viewMode]="viewMode()"
84843
+ [sectionIcon]="sectionList[idx + 1].icon"
84844
+ />
84845
+ }
84846
+ }
84847
+ </section>
84848
+ }
84849
+ }
84850
+
84851
+ </main>
84852
+
84853
+ <!-- Table of Contents (Compact & Expanded Views) -->
84854
+ @if (!isSimplifiedView() && sections()) {
84855
+ <symphiq-floating-toc
84856
+ [sections]="tocSections()"
84857
+ [viewMode]="viewMode()"
84858
+ [embedded]="embedded()"
84859
+ [scrollElement]="scrollElement() ?? undefined"
84860
+ />
84861
+ }
84862
+
84863
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
84864
+ @if (!isSimplifiedView() && sections()) {
84865
+ <symphiq-section-navigation
84866
+ [sections]="tocSections()"
84867
+ [viewMode]="viewMode()"
84868
+ [embedded]="embedded()"
84869
+ [scrollElement]="scrollElement() ?? undefined"
84870
+ />
84871
+ }
84872
+
84873
+ <!-- Search Modal -->
84874
+ <symphiq-search-modal
84875
+ [isOpen]="isSearchOpen()"
84876
+ [isLightMode]="isLightMode()"
84877
+ (close)="closeSearch()"
84878
+ />
84879
+
84880
+ <!-- View Mode Switcher Modal -->
84881
+ <symphiq-view-mode-switcher-modal
84882
+ [isOpen]="isViewModeSwitcherOpen()"
84883
+ [currentMode]="currentDisplayMode()"
84884
+ [viewMode]="viewMode()"
84885
+ (close)="closeViewModeSwitcher()"
84886
+ (modeSelected)="handleDisplayModeChange($event)"
84887
+ />
84888
+
84889
+ <!-- Profile Analysis Modal -->
84890
+ <symphiq-profile-analysis-modal
84891
+ [isLightMode]="isLightMode()"
84892
+ [allMetrics]="allMetrics()"
84893
+ [allInsights]="allInsights()"
84894
+ [allBusinessInsights]="allBusinessInsights()"
84895
+ [allCharts]="allCharts()"
84896
+ >
84897
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
84898
+ <symphiq-goal-card
84899
+ [goal]="data.goal"
84900
+ [viewMode]="data.viewMode"
84901
+ [isInModal]="true"
84902
+ [allMetrics]="allMetrics()"
84903
+ [allCharts]="allCharts()"
84904
+ [allInsights]="allInsights()"
84905
+ [currentModalState]="getCurrentModalState()"
84906
+ />
84907
+ }
84908
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
84909
+ <symphiq-goal-objectives-modal-content
84910
+ [goal]="data.goal"
84911
+ [viewMode]="data.viewMode"
84912
+ />
84913
+ }
84914
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
84915
+ <symphiq-objective-strategies-modal-content
84916
+ [objective]="data.objective"
84917
+ [goalTitle]="data.goalTitle"
84918
+ [viewMode]="data.viewMode"
84919
+ />
84920
+ }
84921
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
84922
+ <symphiq-strategy-recommendations-modal-content
84923
+ [strategy]="data.strategy"
84924
+ [objectiveTitle]="data.objectiveTitle"
84925
+ [goalTitle]="data.goalTitle"
84926
+ [viewMode]="data.viewMode"
84927
+ [allMetrics]="allMetrics()"
84928
+ [allCharts]="allCharts()"
84929
+ [allInsights]="allInsights()"
84930
+ [allBusinessInsights]="allBusinessInsights()"
84931
+ [currentModalState]="getCurrentModalState()"
84932
+ />
84933
+ }
84934
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
84935
+ <symphiq-category-detail-modal-content
84936
+ [category]="data.category"
84937
+ [viewMode]="data.viewMode"
84938
+ [scrollToSection]="data.scrollToSection"
84939
+ />
84940
+ }
84941
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
84942
+ <symphiq-strength-detail-modal-content
84943
+ [strength]="data.strength"
84944
+ [viewMode]="data.viewMode"
84945
+ [allFunnelStrengths]="funnelStrengths()"
84946
+ [currentModalState]="getCurrentModalState()"
84947
+ />
84948
+ }
84949
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
84950
+ <symphiq-gap-detail-modal-content
84951
+ [gap]="data.gap"
84952
+ [viewMode]="data.viewMode"
84953
+ [allGoals]="allGoals()"
84954
+ [allWeaknesses]="funnelWeaknesses()"
84955
+ [currentModalState]="getCurrentModalState()"
84956
+ />
84957
+ }
84958
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
84959
+ <symphiq-opportunity-detail-modal-content
84960
+ [opportunity]="data.opportunity"
84961
+ [viewMode]="data.viewMode"
84962
+ [allStrengths]="funnelStrengths()"
84963
+ [currentModalState]="getCurrentModalState()"
84964
+ />
84965
+ }
84966
+ </symphiq-profile-analysis-modal>
84967
+
84968
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
84969
+ <symphiq-funnel-analysis-modal
84970
+ [isLightMode]="isLightMode()"
84971
+ [viewMode]="viewMode()"
84972
+ [allMetrics]="allMetrics()"
84973
+ [allInsights]="allInsights()"
84974
+ [allCharts]="allCharts()"
84975
+ />
84976
+
84977
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
84978
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
84979
+
84980
+ <!-- Tooltip Container -->
84981
+ <symphiq-tooltip-container/>
84982
+ </div>
84968
84983
  `
84969
84984
  }]
84970
84985
  }], () => [], { funnelModalComponent: [{