@eric-emg/symphiq-components 1.2.131 → 1.2.133

package/fesm2022/symphiq-components.mjs

@@ -25750,7 +25750,7 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵelement(28, "div", 21);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵclassProp("animate-fade-in-up", ctx.hasAnimated());
+            i0.ɵɵclassProp("confidence-card-animate", ctx.hasAnimated());
             i0.ɵɵproperty("ngClass", ctx.cardContainerClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.backgroundOverlayClasses());
@@ -25793,83 +25793,83 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("width", ctx.animatedPercentage(), "%");
             i0.ɵɵproperty("ngClass", ctx.progressGlowClasses());
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}.animate-fade-in-up[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fade-in-up .6s ease-out}.animate-pulse-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.animate-fade-in-up[_ngcontent-%COMP%], .animate-pulse-glow[_ngcontent-%COMP%]{animation:none}}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_confidence-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}.confidence-card-animate[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_confidence-fade-in-up .6s ease-out forwards}.animate-pulse-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.confidence-card-animate[_ngcontent-%COMP%], .animate-pulse-glow[_ngcontent-%COMP%]{animation:none;opacity:1}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfidenceLevelCardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-confidence-level-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      [ngClass]="cardContainerClasses()"
-      class="rounded-2xl p-6 transition-all duration-500 hover:scale-[1.02] relative overflow-hidden group"
-      [class.animate-fade-in-up]="hasAnimated()">
-
-      <!-- Animated background gradient overlay -->
-      <div [ngClass]="backgroundOverlayClasses()" class="absolute inset-0 opacity-30 transition-opacity duration-500 group-hover:opacity-50"></div>
-
-      <!-- Content -->
-      <div class="relative z-10">
-        <!-- Header with Title and Grade Badge -->
-        <div class="flex items-start justify-between gap-4 mb-4">
-          <div class="flex-1 min-w-0">
-            <h3 [ngClass]="titleClasses()" class="text-lg font-bold mb-1">
-              Confidence Level
-            </h3>
-            <p [ngClass]="subtitleClasses()" class="text-xs font-medium">
-              {{ confidenceData().qualitativeStatus }} + {{ confidenceData().quantitativeStatus }}
-            </p>
-          </div>
-
-          <!-- Grade Badge with Glow -->
-          <div
-            [ngClass]="gradeBadgeContainerClasses()"
-            class="relative flex-shrink-0 transition-all duration-300 hover:scale-110"
-            [class.animate-pulse-glow]="shouldPulse()">
-            <!-- Glow effect -->
-            <div [ngClass]="glowEffectClasses()" class="absolute inset-0 rounded-xl blur-xl opacity-60 transition-opacity duration-300 group-hover:opacity-80"></div>
-            <!-- Badge content -->
-            <div [ngClass]="gradeBadgeClasses()" class="relative px-5 py-3 rounded-xl text-center backdrop-blur-sm">
-              <div [ngClass]="gradeLabelClasses()" class="text-[10px] font-bold uppercase tracking-wider mb-0.5">Grade</div>
-              <div [ngClass]="gradeValueClasses()" class="text-3xl font-bold">{{ confidenceData().grade }}</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Description -->
-        <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mb-4">
-          {{ confidenceData().description }}
-        </p>
-
-        <!-- Progress Bar -->
-        <div class="space-y-2">
-          <div class="flex items-center justify-between">
-            <span [ngClass]="progressLabelClasses()" class="text-xs font-semibold">Context Completeness</span>
-            <span [ngClass]="progressValueClasses()" class="text-xs font-bold">{{ animatedPercentage() }}%</span>
-          </div>
-
-          <!-- Progress Track -->
-          <div class="relative">
-            <!-- Background track -->
-            <div [ngClass]="progressTrackClasses()" class="h-3 rounded-full overflow-hidden relative">
-              <!-- Progress bar with shimmer -->
-              <div
-                [style.width.%]="animatedPercentage()"
-                [ngClass]="progressBarClasses()"
-                class="h-full transition-all duration-1000 ease-out relative">
-                <!-- Shimmer effect -->
-                <div [ngClass]="shimmerClasses()" class="absolute inset-0 opacity-30"></div>
-              </div>
-            </div>
-            <!-- Glow underneath -->
-            <div
-              [style.width.%]="animatedPercentage()"
-              [ngClass]="progressGlowClasses()"
-              class="absolute top-0 left-0 h-3 rounded-full blur-md opacity-40 transition-all duration-1000 ease-out -z-10">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: ["@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.animate-fade-in-up{animation:fade-in-up .6s ease-out}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.animate-fade-in-up,.animate-pulse-glow{animation:none}}\n"] }]
+        args: [{ selector: 'symphiq-confidence-level-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      [ngClass]="cardContainerClasses()"
+      class="rounded-2xl p-6 transition-all duration-500 hover:scale-[1.02] relative overflow-hidden group"
+      [class.confidence-card-animate]="hasAnimated()">
+
+      <!-- Animated background gradient overlay -->
+      <div [ngClass]="backgroundOverlayClasses()" class="absolute inset-0 opacity-30 transition-opacity duration-500 group-hover:opacity-50"></div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <!-- Header with Title and Grade Badge -->
+        <div class="flex items-start justify-between gap-4 mb-4">
+          <div class="flex-1 min-w-0">
+            <h3 [ngClass]="titleClasses()" class="text-lg font-bold mb-1">
+              Confidence Level
+            </h3>
+            <p [ngClass]="subtitleClasses()" class="text-xs font-medium">
+              {{ confidenceData().qualitativeStatus }} + {{ confidenceData().quantitativeStatus }}
+            </p>
+          </div>
+
+          <!-- Grade Badge with Glow -->
+          <div
+            [ngClass]="gradeBadgeContainerClasses()"
+            class="relative flex-shrink-0 transition-all duration-300 hover:scale-110"
+            [class.animate-pulse-glow]="shouldPulse()">
+            <!-- Glow effect -->
+            <div [ngClass]="glowEffectClasses()" class="absolute inset-0 rounded-xl blur-xl opacity-60 transition-opacity duration-300 group-hover:opacity-80"></div>
+            <!-- Badge content -->
+            <div [ngClass]="gradeBadgeClasses()" class="relative px-5 py-3 rounded-xl text-center backdrop-blur-sm">
+              <div [ngClass]="gradeLabelClasses()" class="text-[10px] font-bold uppercase tracking-wider mb-0.5">Grade</div>
+              <div [ngClass]="gradeValueClasses()" class="text-3xl font-bold">{{ confidenceData().grade }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Description -->
+        <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mb-4">
+          {{ confidenceData().description }}
+        </p>
+
+        <!-- Progress Bar -->
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <span [ngClass]="progressLabelClasses()" class="text-xs font-semibold">Context Completeness</span>
+            <span [ngClass]="progressValueClasses()" class="text-xs font-bold">{{ animatedPercentage() }}%</span>
+          </div>
+
+          <!-- Progress Track -->
+          <div class="relative">
+            <!-- Background track -->
+            <div [ngClass]="progressTrackClasses()" class="h-3 rounded-full overflow-hidden relative">
+              <!-- Progress bar with shimmer -->
+              <div
+                [style.width.%]="animatedPercentage()"
+                [ngClass]="progressBarClasses()"
+                class="h-full transition-all duration-1000 ease-out relative">
+                <!-- Shimmer effect -->
+                <div [ngClass]="shimmerClasses()" class="absolute inset-0 opacity-30"></div>
+              </div>
+            </div>
+            <!-- Glow underneath -->
+            <div
+              [style.width.%]="animatedPercentage()"
+              [ngClass]="progressGlowClasses()"
+              class="absolute top-0 left-0 h-3 rounded-full blur-md opacity-40 transition-all duration-1000 ease-out -z-10">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@keyframes confidence-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.confidence-card-animate{animation:confidence-fade-in-up .6s ease-out forwards}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.confidence-card-animate,.animate-pulse-glow{animation:none;opacity:1}}\n"] }]
     }], null, { viewMode: [{
             type: Input
         }], currentStepId: [{
@@ -25881,7 +25881,7 @@ class ConfidenceLevelCardComponent {
         }], currentMetric: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 139 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 140 }); })();
 
 function FunnelWelcomeBannerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Your Funnel Analysis ");
@@ -36062,13 +36062,14 @@ class ViewportAnimationDirective {
         this.once = true;
         this.hasAnimated = false;
         this.isFirstObservation = true;
-        this.shouldSkipAnimation = false;
     }
     ngOnInit() {
         if (typeof window === 'undefined') {
             return;
         }
-        // Don't hide elements initially - let IntersectionObserver determine visibility
+        // Set initial hidden state immediately before observer fires
+        // This prevents the flash of visible content before fade-out in embedded contexts
+        this.setupInitialState();
         this.setupObserver();
     }
     ngOnDestroy() {
@@ -36107,24 +36108,23 @@ class ViewportAnimationDirective {
     setupObserver() {
         this.observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
-                // First observation - determine if element is initially visible
+                // First observation - if already visible, animate in immediately
                 if (this.isFirstObservation) {
                     this.isFirstObservation = false;
                     if (entry.isIntersecting) {
-                        // Element is initially visible - skip animation entirely
-                        this.shouldSkipAnimation = true;
-                        this.hasAnimated = true;
-                        return; // Leave element visible as-is
-                    }
-                    else {
-                        // Element is initially hidden (below fold) - set up for animation
-                        this.setupInitialState();
-                        return; // Don't animate yet, wait for scroll
+                        // Element is initially visible - animate in now
+                        this.animateIn();
+                        if (this.once) {
+                            this.hasAnimated = true;
+                        }
+                        return;
                     }
+                    // Element not visible yet - wait for scroll
+                    return;
                 }
                 // Subsequent observations - normal animation logic
                 if (entry.isIntersecting) {
-                    if (!this.shouldSkipAnimation && (!this.hasAnimated || !this.once)) {
+                    if (!this.hasAnimated || !this.once) {
                         this.animateIn();
                         if (this.once) {
                             this.hasAnimated = true;