@eric-emg/symphiq-components 1.2.381 → 1.2.384

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("@answerAnimation", undefined)("ngClass", ctx_r0.answerChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
     i0.ɵɵadvance();
@@ -88192,13 +88192,13 @@ 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("@answerAnimation", 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();
@@ -88404,7 +88404,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('answerAnimation', [
+                    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 +88426,20 @@ class ShopProfileQuestionCardComponent {
                 standalone: true,
                 imports: [CommonModule, UserAvatarComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
+                animations: [
+                    trigger('answerAnimation', [
+                        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 -->
@@ -88461,7 +88488,7 @@ class ShopProfileQuestionCardComponent {
         <!-- Answered State - Show answer chips -->
         <div class="flex flex-wrap gap-3">
           @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 @answerAnimation [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 +88498,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+            <div @answerAnimation [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
               Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
             </div>
           }
@@ -88516,7 +88543,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: 134 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];
@@ -88745,6 +88772,7 @@ class ShopProfileQuestionAnswerComponent {
         this.ngZone = inject(NgZone);
         this.isSticky = false;
         this.selectedAnswerTexts = signal([], ...(ngDevMode ? [{ debugName: "selectedAnswerTexts" }] : []));
+        this.initialAnswerTexts = signal([], ...(ngDevMode ? [{ debugName: "initialAnswerTexts" }] : []));
         this.addOtherAnswersExpanded = signal(false, ...(ngDevMode ? [{ debugName: "addOtherAnswersExpanded" }] : []));
         this.customAnswerText = signal('', ...(ngDevMode ? [{ debugName: "customAnswerText" }] : []));
         this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
@@ -88752,6 +88780,8 @@ class ShopProfileQuestionAnswerComponent {
         this.pendingQuestionId = signal(null, ...(ngDevMode ? [{ debugName: "pendingQuestionId" }] : []));
         this.isCountAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isCountAnimating" }] : []));
         this.previousAnsweredCount = signal(null, ...(ngDevMode ? [{ debugName: "previousAnsweredCount" }] : []));
+        this.saveStartTime = signal(0, ...(ngDevMode ? [{ debugName: "saveStartTime" }] : []));
+        this.lastLoadedQuestionId = signal(null, ...(ngDevMode ? [{ debugName: "lastLoadedQuestionId" }] : []));
         this.answerOptions = computed(() => {
             const q = this.question();
             const potentialAnswers = q.potentialAnswers || [];
@@ -88810,17 +88840,36 @@ class ShopProfileQuestionAnswerComponent {
         this.canAddCustomAnswers = computed(() => {
             return this.customAnswerText().trim().length > 0;
         }, ...(ngDevMode ? [{ debugName: "canAddCustomAnswers" }] : []));
+        this.hasAnswersChanged = computed(() => {
+            const initial = this.initialAnswerTexts();
+            const current = this.selectedAnswerTexts();
+            if (initial.length !== current.length)
+                return true;
+            const sortedInitial = [...initial].sort();
+            const sortedCurrent = [...current].sort();
+            return sortedInitial.some((val, idx) => val !== sortedCurrent[idx]);
+        }, ...(ngDevMode ? [{ debugName: "hasAnswersChanged" }] : []));
         this.saveButtonsDisabled = computed(() => {
-            return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded() || this.isSaving();
+            const noAnswers = this.selectedAnswerTexts().length === 0;
+            const isExpanded = this.addOtherAnswersExpanded();
+            const saving = this.isSaving();
+            const hasInitialAnswers = this.initialAnswerTexts().length > 0;
+            const unchanged = hasInitialAnswers && !this.hasAnswersChanged();
+            return noAnswers || isExpanded || saving || unchanged;
         }, ...(ngDevMode ? [{ debugName: "saveButtonsDisabled" }] : []));
         this.stickyState = false;
         this.lastStickyChange = 0;
         effect(() => {
-            const questionId = this.question().id;
-            const existingAnswers = this.profileShopAnswers()
+            const questionId = this.question().id ?? null;
+            const lastId = untracked(() => this.lastLoadedQuestionId());
+            if (questionId === lastId)
+                return;
+            this.lastLoadedQuestionId.set(questionId);
+            const existingAnswers = untracked(() => this.profileShopAnswers())
                 .filter(a => a.profileQuestionId === questionId)
                 .map(a => a.answer || '');
             this.selectedAnswerTexts.set(existingAnswers);
+            this.initialAnswerTexts.set(existingAnswers);
         });
         effect(() => {
             const answers = this.profileShopAnswers();
@@ -88829,15 +88878,20 @@ class ShopProfileQuestionAnswerComponent {
             if (pendingId !== null && pendingAction !== null) {
                 const hasAnswerForQuestion = answers.some(a => a.profileQuestionId === pendingId);
                 if (hasAnswerForQuestion) {
-                    this.isSaving.set(false);
-                    if (pendingAction === 'save') {
-                        this.navigateToList.emit();
-                    }
-                    else if (pendingAction === 'saveAndNext') {
-                        this.navigateToNextQuestion.emit();
-                    }
-                    this.pendingQuestionId.set(null);
-                    this.pendingSaveAction.set(null);
+                    const elapsed = Date.now() - this.saveStartTime();
+                    const minDelay = 300;
+                    const remainingDelay = Math.max(0, minDelay - elapsed);
+                    setTimeout(() => {
+                        this.isSaving.set(false);
+                        if (pendingAction === 'save') {
+                            this.navigateToList.emit();
+                        }
+                        else if (pendingAction === 'saveAndNext') {
+                            this.navigateToNextQuestion.emit();
+                        }
+                        this.pendingQuestionId.set(null);
+                        this.pendingSaveAction.set(null);
+                    }, remainingDelay);
                 }
             }
         });
@@ -88935,6 +88989,7 @@ class ShopProfileQuestionAnswerComponent {
     }
     onSave() {
         const questionId = this.question().id;
+        this.saveStartTime.set(Date.now());
         this.isSaving.set(true);
         this.pendingSaveAction.set('save');
         this.pendingQuestionId.set(questionId);
@@ -88946,6 +89001,7 @@ class ShopProfileQuestionAnswerComponent {
     }
     onSaveAndNext() {
         const questionId = this.question().id;
+        this.saveStartTime.set(Date.now());
         this.isSaving.set(true);
         this.pendingSaveAction.set('saveAndNext');
         this.pendingQuestionId.set(questionId);
@@ -89440,7 +89496,7 @@ class ShopProfileQuestionAnswerComponent {
             type: ViewChild,
             args: ['questionTitle']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 259 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 260 }); })();
 
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];
@@ -90201,6 +90257,7 @@ class ShopProfileStatusCardComponent {
         }, ...(ngDevMode ? [{ debugName: "hasQuestions" }] : []));
         this.questionsByCategory = computed(() => {
             const questions = this.questions();
+            const answers = this.profileShopAnswers();
             const categoryMap = new Map();
             questions.forEach(q => {
                 const category = q.category || 'Other';
@@ -90211,7 +90268,7 @@ class ShopProfileStatusCardComponent {
             });
             const items = [];
             categoryMap.forEach((categoryQuestions, category) => {
-                const answeredCount = categoryQuestions.filter(q => q.answered === true).length;
+                const answeredCount = categoryQuestions.filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
                 const totalCount = categoryQuestions.length;
                 const progress = totalCount > 0 ? (answeredCount / totalCount) * 100 : 0;
                 items.push({
@@ -90223,15 +90280,11 @@ class ShopProfileStatusCardComponent {
                     progress
                 });
             });
-            return items.sort((a, b) => {
-                if (a.progress !== b.progress) {
-                    return a.progress - b.progress;
-                }
-                return a.name.localeCompare(b.name);
-            });
+            return items.sort((a, b) => a.name.localeCompare(b.name));
         }, ...(ngDevMode ? [{ debugName: "questionsByCategory" }] : []));
         this.questionsByFocusArea = computed(() => {
             const questions = this.questions();
+            const answers = this.profileShopAnswers();
             const focusAreaMap = new Map();
             questions.forEach(q => {
                 const focusAreas = q.focusAreaDomains || [];
@@ -90253,7 +90306,7 @@ class ShopProfileStatusCardComponent {
             });
             const items = [];
             focusAreaMap.forEach((faQuestions, focusArea) => {
-                const answeredCount = faQuestions.filter(q => q.answered === true).length;
+                const answeredCount = faQuestions.filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
                 const totalCount = faQuestions.length;
                 const progress = totalCount > 0 ? (answeredCount / totalCount) * 100 : 0;
                 items.push({
@@ -90265,12 +90318,7 @@ class ShopProfileStatusCardComponent {
                     progress
                 });
             });
-            return items.sort((a, b) => {
-                if (a.progress !== b.progress) {
-                    return a.progress - b.progress;
-                }
-                return a.name.localeCompare(b.name);
-            });
+            return items.sort((a, b) => a.name.localeCompare(b.name));
         }, ...(ngDevMode ? [{ debugName: "questionsByFocusArea" }] : []));
         this.currentGroupedQuestions = computed(() => {
             return this.currentView() === 'category'