@eric-emg/symphiq-components 1.2.125 → 1.2.128

package/fesm2022/symphiq-components.mjs

@@ -55526,106 +55526,106 @@ class FocusAreaWelcomeBannerComponent {
                 standalone: true,
                 imports: [CommonModule, ConfidenceLevelCardComponent, SymphiqIconComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="contentClasses()" class="px-8 py-8">
-        <div class="flex items-start gap-6">
-          <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
-            <symphiq-icon [icon]="focusAreaIcon()" size="w-8 h-8" />
-          </div>
-
-          <div class="flex-1">
-            <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
-              @if (isOnboarded) {
-                Your {{ focusAreaDisplayName() }} Analysis
-              } @else {
-                Welcome to Your {{ focusAreaDisplayName() }} Analysis
-              }
-            </h2>
-
-            <!-- Description and Confidence Card in Responsive Layout -->
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
-              <!-- Description (takes 2 columns on large screens) -->
-              <div class="lg:col-span-2 space-y-3">
-                <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                  {{ focusAreaDisplayName() }} Analysis provides a deep dive into this specific operational domain. By analyzing your approach, tools, and performance in {{ focusAreaDisplayName() | lowercase }}, Symphiq identifies tactical opportunities and creates an actionable roadmap for improvement.
-                </p>
-                <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                  <strong class="font-semibold">Why this matters:</strong> Rather than generic best practices, this analysis delivers domain-specific insights tailored to your current capabilities, resources, and market position—ensuring recommendations are both impactful and achievable.
-                </p>
-              </div>
-
-              <!-- Confidence Card (takes 1 column on large screens, full width on mobile) -->
-              <div class="lg:col-span-1">
-                <symphiq-confidence-level-card
-                  [viewMode]="viewMode"
-                  currentStepId="focus-area-analysis"
-                  [focusAreaDetails]="focusAreaDetails"
-                  [currentFocusAreaDomain]="focusAreaDomain"
-                />
-              </div>
-            </div>
-
-            <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
-              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <div class="flex-1">
-                <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-2">
-                  What You'll See Below
-                </h3>
-                <ul [ngClass]="highlightListClasses()" class="space-y-2 text-sm">
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Focus Area Health</strong> — Current maturity and performance assessment for {{ focusAreaDisplayName() | lowercase }}</span>
-                  </li>
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Top Priorities</strong> — High-impact improvements specific to this operational domain</span>
-                  </li>
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Tactical Roadmap</strong> — Step-by-step goals, strategies, and recommendations for domain optimization</span>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
-              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                @if (isOnboarded) {
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                } @else {
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                }
-              </svg>
-              <div class="flex-1">
-                <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
-                  @if (isOnboarded) {
-                    Keep Your Focus Area Updated
-                  } @else {
-                    Continue Your Journey
-                  }
-                </h3>
-                <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
-                  @if (isOnboarded) {
-                    As you implement improvements, adopt new tools, or refine your {{ focusAreaDisplayName() | lowercase }} approach, update this analysis to keep recommendations aligned with your evolving capabilities and market opportunities.
-                  } @else {
-                    This analysis provides domain-specific insights. To unlock the full power of Symphiq, explore additional focus areas and connect them to your shop operations and funnel metrics.
-                  }
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="contentClasses()" class="px-8 py-8">
+        <div class="flex items-start gap-6">
+          <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+            <symphiq-icon [icon]="focusAreaIcon()" size="w-8 h-8" />
+          </div>
+
+          <div class="flex-1">
+            <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
+              @if (isOnboarded) {
+                Your {{ focusAreaDisplayName() }} Analysis
+              } @else {
+                Welcome to Your {{ focusAreaDisplayName() }} Analysis
+              }
+            </h2>
+
+            <!-- Description and Confidence Card in Responsive Layout -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+              <!-- Description (takes 2 columns on large screens) -->
+              <div class="lg:col-span-2 space-y-3">
+                <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                  {{ focusAreaDisplayName() }} Analysis provides a deep dive into this specific operational domain. By analyzing your approach, tools, and performance in {{ focusAreaDisplayName() | lowercase }}, Symphiq identifies tactical opportunities and creates an actionable roadmap for improvement.
+                </p>
+                <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                  <strong class="font-semibold">Why this matters:</strong> Rather than generic best practices, this analysis delivers domain-specific insights tailored to your current capabilities, resources, and market position—ensuring recommendations are both impactful and achievable.
+                </p>
+              </div>
+
+              <!-- Confidence Card (takes 1 column on large screens, full width on mobile) -->
+              <div class="lg:col-span-1">
+                <symphiq-confidence-level-card
+                  [viewMode]="viewMode"
+                  currentStepId="focus-area-analysis"
+                  [focusAreaDetails]="focusAreaDetails"
+                  [currentFocusAreaDomain]="focusAreaDomain"
+                />
+              </div>
+            </div>
+
+            <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
+              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+              <div class="flex-1">
+                <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-2">
+                  What You'll See Below
+                </h3>
+                <ul [ngClass]="highlightListClasses()" class="space-y-2 text-sm">
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Focus Area Health</strong> — Current maturity and performance assessment for {{ focusAreaDisplayName() | lowercase }}</span>
+                  </li>
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Top Priorities</strong> — High-impact improvements specific to this operational domain</span>
+                  </li>
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Tactical Roadmap</strong> — Step-by-step goals, strategies, and recommendations for domain optimization</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
+              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                @if (isOnboarded) {
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                } @else {
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                }
+              </svg>
+              <div class="flex-1">
+                <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
+                  @if (isOnboarded) {
+                    Keep Your Focus Area Updated
+                  } @else {
+                    Continue Your Journey
+                  }
+                </h3>
+                <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
+                  @if (isOnboarded) {
+                    As you implement improvements, adopt new tools, or refine your {{ focusAreaDisplayName() | lowercase }} approach, update this analysis to keep recommendations aligned with your evolving capabilities and market opportunities.
+                  } @else {
+                    This analysis provides domain-specific insights. To unlock the full power of Symphiq, explore additional focus areas and connect them to your shop operations and funnel metrics.
+                  }
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{
@@ -73269,14 +73269,22 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.embeddedScrollEffect = effect(() => {
             const scrollEvent = this.scrollEvent();
             const isEmbedded = this.embedded();
+            console.log('[ProfileAnalysis] embeddedScrollEffect triggered', {
+                isEmbedded,
+                hasScrollEvent: !!scrollEvent,
+                scrollEventDetail: scrollEvent?.detail
+            });
             if (isEmbedded && !scrollEvent) {
+                console.log('[ProfileAnalysis] Early return: embedded but no scrollEvent');
                 return;
             }
             if (!scrollEvent || !isEmbedded) {
+                console.log('[ProfileAnalysis] Early return: no scrollEvent or not embedded');
                 return;
             }
             const detail = scrollEvent.detail;
             if (!detail) {
+                console.log('[ProfileAnalysis] Early return: no detail in scrollEvent');
                 return;
             }
             const scrollTop = detail.scrollTop || 0;
@@ -73288,14 +73296,27 @@ class SymphiqProfileAnalysisDashboardComponent {
                 this.headerScrollService.isScrolled.set(false);
             }
             const scrollElement = this.scrollElement();
+            console.log('[ProfileAnalysis] Scroll progress calculation', {
+                scrollTop,
+                hasScrollElement: !!scrollElement,
+                scrollHeight: scrollElement?.scrollHeight,
+                clientHeight: scrollElement?.clientHeight
+            });
             if (scrollElement) {
                 const scrollHeight = scrollElement.scrollHeight || 0;
                 const clientHeight = scrollElement.clientHeight || 0;
                 const maxScroll = scrollHeight - clientHeight;
                 if (maxScroll > 0) {
                     const progress = (scrollTop / maxScroll) * 100;
+                    console.log('[ProfileAnalysis] Setting scrollProgress', { maxScroll, progress: Math.min(100, Math.max(0, progress)) });
                     this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
                 }
+                else {
+                    console.log('[ProfileAnalysis] maxScroll <= 0, not updating progress', { maxScroll });
+                }
+            }
+            else {
+                console.log('[ProfileAnalysis] No scrollElement available');
             }
         }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
         // Signal version of funnelAnalysis for reactive computed signals
@@ -73368,8 +73389,6 @@ class SymphiqProfileAnalysisDashboardComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "executiveSummary" }] : []));
         this.sections = computed(() => {
-            console.log('this.profileAnalysis()', this.profileAnalysis());
-            console.log('this.profileAnalysis()?.profileAnalysisStructured', this.profileAnalysis()?.profileAnalysisStructured);
             return this.profileAnalysis()?.profileAnalysisStructured?.sections;
         }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
         this.allGoals = computed(() => {
@@ -73602,9 +73621,11 @@ class SymphiqProfileAnalysisDashboardComponent {
     }
     onWindowScroll() {
         this.headerScrollService.handleScroll(this.embedded());
-        const scrollTop = window.scrollY;
-        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-        this.scrollProgress.set((scrollTop / docHeight) * 100);
+        if (!this.embedded()) {
+            const scrollTop = window.scrollY;
+            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+            this.scrollProgress.set((scrollTop / docHeight) * 100);
+        }
     }
     ngOnChanges(changes) {
         // Update the signal whenever funnelAnalysis input changes