@eric-emg/symphiq-components 1.2.387 → 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 } 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("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵproperty("@answerChip", undefined)("ngClass", ctx_r0.answerChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
     i0.ɵɵadvance();
@@ -88192,16 +88192,17 @@ 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("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵproperty("@answerChip", undefined)("ngClass", ctx_r0.answerDateClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
 } }
 function ShopProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 7, null, null, _forTrack0$3);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 9, null, null, _forTrack0$3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("@.disabled", !ctx_r0.animationsEnabled());
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.questionAnswers());
 } }
@@ -88242,18 +88243,21 @@ class ShopProfileQuestionCardComponent {
         this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.answerClick = output();
+        this.animationsEnabled = signal(false, ...(ngDevMode ? [{ debugName: "animationsEnabled" }] : []));
         this.questionAnswers = computed(() => {
             const questionId = this.question().id;
             const answers = this.profileShopAnswers();
             const allUsers = this.users();
             if (!questionId || !answers)
                 return [];
-            return answers
+            const result = answers
                 .filter(a => a.profileQuestionId === questionId)
                 .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: "questionAnswers" }] : []));
         this.isAnswered = computed(() => {
             return this.questionAnswers().length > 0;
@@ -88266,6 +88270,13 @@ class ShopProfileQuestionCardComponent {
             return q.focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
     }
+    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);
     }
@@ -88376,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");
@@ -88404,7 +88415,20 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵproperty("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
-        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, data: { animation: [
+                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(':leave', [
+                        animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
+                    ])
+                ])
+            ] }, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
@@ -88413,6 +88437,20 @@ class ShopProfileQuestionCardComponent {
                 standalone: true,
                 imports: [CommonModule, UserAvatarComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
+                animations: [
+                    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(':leave', [
+                            animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
+                        ])
+                    ])
+                ],
                 template: `
     <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
       <!-- Question Header with Checkbox -->
@@ -88459,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 [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>
@@ -88471,7 +88509,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div [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>
           }
@@ -88516,7 +88554,7 @@ class ShopProfileQuestionCardComponent {
   `
             }]
     }], 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: 119 }); })();
+(() => { (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"];