@eric-emg/symphiq-components 1.2.435 → 1.2.436

package/fesm2022/symphiq-components.mjs

@@ -24919,6 +24919,10 @@ class ConfidenceLevelCardComponent {
         this.elementRef = inject(ElementRef);
         this.hasAnimated = signal(false, ...(ngDevMode ? [{ debugName: "hasAnimated" }] : []));
         this.animatedPercentage = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentage" }] : []));
+        this.isGradeChanging = signal(false, ...(ngDevMode ? [{ debugName: "isGradeChanging" }] : []));
+        this.previousPercentage = signal(null, ...(ngDevMode ? [{ debugName: "previousPercentage" }] : []));
+        this.previousGrade = signal(null, ...(ngDevMode ? [{ debugName: "previousGrade" }] : []));
+        this.isInitialLoad = signal(true, ...(ngDevMode ? [{ debugName: "isInitialLoad" }] : []));
         this.confidenceData = computed(() => {
             const stepId = this.currentStepId();
             const dataMap = {
@@ -25173,6 +25177,27 @@ class ConfidenceLevelCardComponent {
             }
             return 'bg-gradient-to-r from-red-500 to-rose-500';
         }, ...(ngDevMode ? [{ debugName: "progressGlowClasses" }] : []));
+        effect(() => {
+            const currentData = this.confidenceData();
+            const prevPercentage = this.previousPercentage();
+            const prevGrade = this.previousGrade();
+            if (this.isInitialLoad() && this.hasAnimated()) {
+                this.isInitialLoad.set(false);
+                this.previousPercentage.set(currentData.percentage);
+                this.previousGrade.set(currentData.grade);
+                return;
+            }
+            if (!this.isInitialLoad() && this.hasAnimated()) {
+                if (prevPercentage !== null && prevPercentage !== currentData.percentage) {
+                    this.animateValueChange(prevPercentage, currentData.percentage);
+                    this.previousPercentage.set(currentData.percentage);
+                }
+                if (prevGrade !== null && prevGrade !== currentData.grade) {
+                    this.triggerGradeChangeAnimation();
+                    this.previousGrade.set(currentData.grade);
+                }
+            }
+        });
     }
     ngOnInit() {
         this.setupObserver();
@@ -25226,6 +25251,33 @@ class ConfidenceLevelCardComponent {
         };
         this.animationFrame = requestAnimationFrame(animate);
     }
+    animateValueChange(fromValue, toValue) {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
+        }
+        const startTime = performance.now();
+        const duration = 1000;
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+            const currentValue = fromValue + (toValue - fromValue) * easeOutCubic;
+            this.animatedPercentage.set(Math.round(currentValue));
+            if (progress < 1) {
+                this.animationFrame = requestAnimationFrame(animate);
+            }
+            else {
+                this.animatedPercentage.set(toValue);
+            }
+        };
+        this.animationFrame = requestAnimationFrame(animate);
+    }
+    triggerGradeChangeAnimation() {
+        this.isGradeChanging.set(true);
+        setTimeout(() => {
+            this.isGradeChanging.set(false);
+        }, 800);
+    }
     calculateFocusAreaPercentage() {
         const BASE_PERCENTAGE = 55;
         const MAX_PERCENTAGE = 75;
@@ -25326,7 +25378,7 @@ class ConfidenceLevelCardComponent {
         return `Strong context building. Symphiq has comprehensive business, operational, and marketing knowledge with detailed metric analysis (${completedCount}/${totalCount} metrics complete). Continue analyzing remaining metrics to achieve maximum confidence.`;
     }
     static { this.ɵfac = function ConfidenceLevelCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfidenceLevelCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfidenceLevelCardComponent, selectors: [["symphiq-confidence-level-card"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], focusAreaDetails: [1, "focusAreaDetails"], currentFocusAreaDomain: [1, "currentFocusAreaDomain"], currentMetric: [1, "currentMetric"] }, decls: 29, vars: 29, consts: [[1, "rounded-2xl", "p-6", "transition-all", "duration-500", "hover:scale-[1.02]", "relative", "overflow-hidden", "group", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", "transition-opacity", "duration-500", "group-hover:opacity-50", 3, "ngClass"], [1, "relative", "z-10"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "relative", "flex-shrink-0", "transition-all", "duration-300", "hover:scale-110", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-xl", "blur-xl", "opacity-60", "transition-opacity", "duration-300", "group-hover:opacity-80", 3, "ngClass"], [1, "relative", "px-5", "py-3", "rounded-xl", "text-center", "backdrop-blur-sm", 3, "ngClass"], [1, "text-[10px]", "font-bold", "uppercase", "tracking-wider", "mb-0.5", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "relative"], [1, "h-3", "rounded-full", "overflow-hidden", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "relative", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-3", "rounded-full", "blur-md", "opacity-40", "transition-all", "duration-1000", "ease-out", "-z-10", 3, "ngClass"]], template: function ConfidenceLevelCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfidenceLevelCardComponent, selectors: [["symphiq-confidence-level-card"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], focusAreaDetails: [1, "focusAreaDetails"], currentFocusAreaDomain: [1, "currentFocusAreaDomain"], currentMetric: [1, "currentMetric"] }, decls: 29, vars: 31, consts: [[1, "rounded-2xl", "p-6", "transition-all", "duration-500", "hover:scale-[1.02]", "relative", "overflow-hidden", "group", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", "transition-opacity", "duration-500", "group-hover:opacity-50", 3, "ngClass"], [1, "relative", "z-10"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "relative", "flex-shrink-0", "transition-all", "duration-300", "hover:scale-110", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-xl", "blur-xl", "opacity-60", "transition-all", "duration-500", "group-hover:opacity-80", 3, "ngClass"], [1, "relative", "px-5", "py-3", "rounded-xl", "text-center", "backdrop-blur-sm", "transition-all", "duration-500", 3, "ngClass"], [1, "text-[10px]", "font-bold", "uppercase", "tracking-wider", "mb-0.5", "transition-colors", "duration-500", 3, "ngClass"], [1, "text-3xl", "font-bold", "transition-all", "duration-500", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "relative"], [1, "h-3", "rounded-full", "overflow-hidden", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "relative", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-3", "rounded-full", "blur-md", "opacity-40", "transition-all", "duration-1000", "ease-out", "-z-10", 3, "ngClass"]], template: function ConfidenceLevelCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "h3", 5);
@@ -25369,7 +25421,7 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate2(" ", ctx.confidenceData().qualitativeStatus, " + ", ctx.confidenceData().quantitativeStatus, " ");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("animate-pulse-glow", ctx.shouldPulse());
+            i0.ɵɵclassProp("animate-pulse-glow", ctx.shouldPulse())("grade-change-animate", ctx.isGradeChanging());
             i0.ɵɵproperty("ngClass", ctx.gradeBadgeContainerClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.glowEffectClasses());
@@ -25401,85 +25453,86 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("width", ctx.animatedPercentage(), "%");
             i0.ɵɵproperty("ngClass", ctx.progressGlowClasses());
-        } }, 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 }); }
+        } }, 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}}@keyframes _ngcontent-%COMP%_grade-change{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.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}.grade-change-animate[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_grade-change .8s ease-out}@media (prefers-reduced-motion: reduce){.confidence-card-animate[_ngcontent-%COMP%], .animate-pulse-glow[_ngcontent-%COMP%], .grade-change-animate[_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.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: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], currentFocusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFocusAreaDomain", required: false }] }], currentMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetric", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 140 }); })();
+        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()"
+            [class.grade-change-animate]="isGradeChanging()">
+            <!-- Glow effect -->
+            <div [ngClass]="glowEffectClasses()" class="absolute inset-0 rounded-xl blur-xl opacity-60 transition-all duration-500 group-hover:opacity-80"></div>
+            <!-- Badge content -->
+            <div [ngClass]="gradeBadgeClasses()" class="relative px-5 py-3 rounded-xl text-center backdrop-blur-sm transition-all duration-500">
+              <div [ngClass]="gradeLabelClasses()" class="text-[10px] font-bold uppercase tracking-wider mb-0.5 transition-colors duration-500">Grade</div>
+              <div [ngClass]="gradeValueClasses()" class="text-3xl font-bold transition-all duration-500">{{ 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}}@keyframes grade-change{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.confidence-card-animate{animation:confidence-fade-in-up .6s ease-out forwards}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.grade-change-animate{animation:grade-change .8s ease-out}@media (prefers-reduced-motion: reduce){.confidence-card-animate,.animate-pulse-glow,.grade-change-animate{animation:none;opacity:1}}\n"] }]
+    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], currentFocusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFocusAreaDomain", required: false }] }], currentMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetric", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 161 }); })();
 
 function FunnelWelcomeBannerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Your Funnel Analysis ");