@eric-emg/symphiq-components 1.2.386 → 1.2.388

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, state, keyframes } from '@angular/animations';
+import { trigger, transition, style, animate, 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", answerData_r3.animState)("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵproperty("@answerChip", undefined)("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", answerData_r3.animState)("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵproperty("@answerChip", undefined)("ngClass", ctx_r0.answerDateClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
 } }
@@ -88202,6 +88202,7 @@ function ShopProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("@.disabled", !ctx_r0.animationsEnabled());
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.questionAnswers());
 } }
@@ -88242,36 +88243,21 @@ 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.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
-        this.questionAnswersWithState = computed(() => {
+        this.animationsEnabled = signal(false, ...(ngDevMode ? [{ debugName: "animationsEnabled" }] : []));
+        this.questionAnswers = computed(() => {
             const questionId = this.question().id;
             const answers = this.profileShopAnswers();
             const allUsers = this.users();
-            const known = this.knownAnswerIds();
-            const initialized = this.isInitialized();
-            console.log(`[QuestionCard ${questionId}] Computing answers:`, {
-                answerCount: answers?.length,
-                knownIds: Array.from(known),
-                initialized
-            });
             if (!questionId || !answers)
                 return [];
             const result = answers
                 .filter(a => a.profileQuestionId === questionId)
-                .map(answer => {
-                const isNew = initialized && answer.id !== undefined && !known.has(answer.id);
-                console.log(`[QuestionCard ${questionId}] Answer ${answer.id}: isNew=${isNew}, initialized=${initialized}, inKnown=${answer.id !== undefined && known.has(answer.id)}`);
-                return {
-                    answer,
-                    user: allUsers.find(u => u.id === answer.creatorUserId),
-                    animState: isNew ? 'new' : 'existing'
-                };
-            });
+                .map(answer => ({
+                answer,
+                user: allUsers.find(u => u.id === answer.creatorUserId)
+            }));
+            console.log(`[QuestionCard ${questionId}] Answers:`, result.map(r => r.answer.id));
             return result;
-        }, ...(ngDevMode ? [{ debugName: "questionAnswersWithState" }] : []));
-        this.questionAnswers = computed(() => {
-            return this.questionAnswersWithState();
         }, ...(ngDevMode ? [{ debugName: "questionAnswers" }] : []));
         this.isAnswered = computed(() => {
             return this.questionAnswers().length > 0;
@@ -88283,34 +88269,13 @@ class ShopProfileQuestionCardComponent {
             const q = this.question();
             return q.focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
-        effect(() => {
-            const currentAnswers = this.questionAnswersWithState();
-            const currentIds = new Set(currentAnswers.map(a => a.answer.id).filter((id) => id !== undefined));
-            const known = untracked(() => this.knownAnswerIds());
-            const initialized = untracked(() => this.isInitialized());
-            const questionId = this.question().id;
-            console.log(`[QuestionCard ${questionId}] Effect triggered:`, {
-                currentIds: Array.from(currentIds),
-                knownIds: Array.from(known),
-                initialized
-            });
-            if (!initialized) {
-                console.log(`[QuestionCard ${questionId}] First run - marking all ${currentIds.size} as known`);
-                this.knownAnswerIds.set(new Set(currentIds));
-                setTimeout(() => {
-                    console.log(`[QuestionCard ${questionId}] Setting initialized=true`);
-                    this.isInitialized.set(true);
-                }, 50);
-            }
-            else {
-                const newKnown = new Set(known);
-                currentIds.forEach(id => newKnown.add(id));
-                if (newKnown.size !== known.size) {
-                    console.log(`[QuestionCard ${questionId}] Adding new IDs to known:`, Array.from(currentIds).filter(id => !known.has(id)));
-                }
-                this.knownAnswerIds.set(newKnown);
-            }
-        });
+    }
+    ngOnInit() {
+        console.log(`[QuestionCard ${this.question().id}] ngOnInit - enabling animations after delay`);
+        setTimeout(() => {
+            console.log(`[QuestionCard ${this.question().id}] Animations now enabled`);
+            this.animationsEnabled.set(true);
+        }, 100);
     }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
@@ -88422,7 +88387,7 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, ShopProfileQuestionCardComponent_Conditional_6_Template, 2, 2, "p", 5);
             i0.ɵɵconditionalCreate(7, ShopProfileQuestionCardComponent_Conditional_7_Template, 7, 2, "div", 6);
-            i0.ɵɵconditionalCreate(8, ShopProfileQuestionCardComponent_Conditional_8_Template, 3, 0, "div", 7)(9, ShopProfileQuestionCardComponent_Conditional_9_Template, 11, 6, "div", 8);
+            i0.ɵɵconditionalCreate(8, ShopProfileQuestionCardComponent_Conditional_8_Template, 3, 1, "div", 7)(9, ShopProfileQuestionCardComponent_Conditional_9_Template, 11, 6, "div", 8);
             i0.ɵɵelementStart(10, "div", 9)(11, "button", 10);
             i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Template_button_click_11_listener() { return ctx.onAnswerClick(); });
             i0.ɵɵelementStart(12, "span");
@@ -88451,18 +88416,15 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
         } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, data: { animation: [
-                trigger('answerAnimation', [
-                    state('existing', style({ opacity: 1, transform: 'scale(1)' })),
-                    state('new', style({ opacity: 1, transform: 'scale(1)' })),
-                    transition('void => new', [
+                trigger('answerChip', [
+                    transition(':enter', [
                         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('void => existing', []),
-                    transition('* => void', [
+                    transition(':leave', [
                         animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                     ])
                 ])
@@ -88476,18 +88438,15 @@ class ShopProfileQuestionCardComponent {
                 imports: [CommonModule, UserAvatarComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
-                    trigger('answerAnimation', [
-                        state('existing', style({ opacity: 1, transform: 'scale(1)' })),
-                        state('new', style({ opacity: 1, transform: 'scale(1)' })),
-                        transition('void => new', [
+                    trigger('answerChip', [
+                        transition(':enter', [
                             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('void => existing', []),
-                        transition('* => void', [
+                        transition(':leave', [
                             animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                         ])
                     ])
@@ -88538,9 +88497,9 @@ class ShopProfileQuestionCardComponent {
       <!-- Answer Section -->
       @if (questionAnswers().length > 0) {
         <!-- Answered State - Show answer chips -->
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-wrap gap-3" [@.disabled]="!animationsEnabled()">
           @for (answerData of questionAnswers(); track answerData.answer.id) {
-            <div [@answerAnimation]="answerData.animState" [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+            <div @answerChip [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>
@@ -88550,7 +88509,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div [@answerAnimation]="answerData.animState" [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+            <div @answerChip [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
               Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
             </div>
           }
@@ -88594,8 +88553,8 @@ class ShopProfileQuestionCardComponent {
     </div>
   `
             }]
-    }], () => [], { 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 }); })();
+    }], 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: 136 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];