@eric-emg/symphiq-components 1.2.384 → 1.2.385

package/fesm2022/symphiq-components.mjs

@@ -12,7 +12,7 @@ import * as i1$1 from '@angular/common';
 import { NgClass, CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { trigger, transition, style, animate, keyframes } from '@angular/animations';
+import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MarkdownComponent } from 'ngx-markdown';
 import dayjs from 'dayjs';
@@ -88184,7 +88184,7 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
 } if (rf & 2) {
     const answerData_r3 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("@answerAnimation", undefined)("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵproperty("@answerAnimation", ctx_r0.getAnimationState(answerData_r3.answer.id))("ngClass", ctx_r0.answerChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
     i0.ɵɵadvance();
@@ -88192,7 +88192,7 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("user", answerData_r3.user);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("@answerAnimation", undefined)("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵproperty("@answerAnimation", ctx_r0.getAnimationState(answerData_r3.answer.id))("ngClass", ctx_r0.answerDateClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
 } }
@@ -88242,6 +88242,8 @@ class ShopProfileQuestionCardComponent {
         this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.answerClick = output();
+        this.knownAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "knownAnswerIds" }] : []));
+        this.newAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "newAnswerIds" }] : []));
         this.questionAnswers = computed(() => {
             const questionId = this.question().id;
             const answers = this.profileShopAnswers();
@@ -88265,6 +88267,30 @@ class ShopProfileQuestionCardComponent {
             const q = this.question();
             return q.focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
+        effect(() => {
+            const currentAnswers = this.questionAnswers();
+            const currentIds = new Set(currentAnswers.map(a => a.answer.id).filter((id) => id !== undefined));
+            const known = untracked(() => this.knownAnswerIds());
+            if (known.size === 0) {
+                this.knownAnswerIds.set(currentIds);
+                this.newAnswerIds.set(new Set());
+            }
+            else {
+                const newIds = new Set();
+                currentIds.forEach(id => {
+                    if (!known.has(id)) {
+                        newIds.add(id);
+                    }
+                });
+                this.newAnswerIds.set(newIds);
+                this.knownAnswerIds.set(currentIds);
+            }
+        });
+    }
+    getAnimationState(answerId) {
+        if (!answerId)
+            return 'existing';
+        return this.newAnswerIds().has(answerId) ? 'new' : 'existing';
     }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
@@ -88406,14 +88432,17 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
         } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, data: { animation: [
                 trigger('answerAnimation', [
-                    transition(':enter', [
+                    state('existing', style({ opacity: 1, transform: 'scale(1)' })),
+                    state('new', style({ opacity: 1, transform: 'scale(1)' })),
+                    transition('void => new', [
                         animate('500ms ease-out', keyframes([
                             style({ opacity: 0, transform: 'scale(0.8)', boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)', offset: 0 }),
                             style({ opacity: 1, transform: 'scale(1.05)', boxShadow: '0 0 20px 4px rgba(59, 130, 246, 0.5)', offset: 0.5 }),
                             style({ opacity: 1, transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)', offset: 1 })
                         ]))
                     ]),
-                    transition(':leave', [
+                    transition('void => existing', []),
+                    transition('* => void', [
                         animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                     ])
                 ])
@@ -88428,14 +88457,17 @@ class ShopProfileQuestionCardComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('answerAnimation', [
-                        transition(':enter', [
+                        state('existing', style({ opacity: 1, transform: 'scale(1)' })),
+                        state('new', style({ opacity: 1, transform: 'scale(1)' })),
+                        transition('void => new', [
                             animate('500ms ease-out', keyframes([
                                 style({ opacity: 0, transform: 'scale(0.8)', boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)', offset: 0 }),
                                 style({ opacity: 1, transform: 'scale(1.05)', boxShadow: '0 0 20px 4px rgba(59, 130, 246, 0.5)', offset: 0.5 }),
                                 style({ opacity: 1, transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)', offset: 1 })
                             ]))
                         ]),
-                        transition(':leave', [
+                        transition('void => existing', []),
+                        transition('* => void', [
                             animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                         ])
                     ])
@@ -88488,7 +88520,7 @@ class ShopProfileQuestionCardComponent {
         <!-- Answered State - Show answer chips -->
         <div class="flex flex-wrap gap-3">
           @for (answerData of questionAnswers(); track answerData.answer.id) {
-            <div @answerAnimation [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+            <div [@answerAnimation]="getAnimationState(answerData.answer.id)" [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
               <span [ngClass]="answerTextClasses()" class="text-sm font-medium">
                 {{ answerData.answer.answer }}
               </span>
@@ -88498,7 +88530,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div @answerAnimation [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+            <div [@answerAnimation]="getAnimationState(answerData.answer.id)" [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
               Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
             </div>
           }
@@ -88542,8 +88574,8 @@ class ShopProfileQuestionCardComponent {
     </div>
   `
             }]
-    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 134 }); })();
+    }], () => [], { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 140 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];