@eric-emg/symphiq-components 1.2.389 → 1.2.391

package/fesm2022/symphiq-components.mjs

@@ -88127,16 +88127,38 @@ class ShopProfileViewToggleComponent {
 class ProfileAnswerAnimationService {
     constructor() {
         this.previousAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "previousAnswerIds" }] : []));
+        this.previousAnswersMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "previousAnswersMap" }] : []));
         this.animationState = signal({
             newAnswerIds: new Set(),
             removedAnswerIds: new Set()
         }, ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+        this.removedAnswers = computed(() => {
+            const removedIds = this.animationState().removedAnswerIds;
+            const map = this.previousAnswersMap();
+            const removed = [];
+            removedIds.forEach(id => {
+                const answer = map.get(id);
+                if (answer) {
+                    removed.push(answer);
+                }
+            });
+            return removed;
+        }, ...(ngDevMode ? [{ debugName: "removedAnswers" }] : []));
     }
     getAnimationState() {
         return this.animationState.asReadonly();
     }
-    snapshotCurrentAnswers(answerIds) {
-        this.previousAnswerIds.set(new Set(answerIds));
+    snapshotCurrentAnswers(answers) {
+        const ids = new Set();
+        const map = new Map();
+        answers.forEach(a => {
+            if (a.id !== undefined) {
+                ids.add(a.id);
+                map.set(a.id, a);
+            }
+        });
+        this.previousAnswerIds.set(ids);
+        this.previousAnswersMap.set(map);
     }
     computeAnimationState(currentAnswerIds) {
         const previous = this.previousAnswerIds();
@@ -88165,6 +88187,9 @@ class ProfileAnswerAnimationService {
     isNewAnswer(answerId) {
         return this.animationState().newAnswerIds.has(answerId);
     }
+    isRemovedAnswer(answerId) {
+        return this.animationState().removedAnswerIds.has(answerId);
+    }
     clearAnimationState() {
         this.animationState.set({
             newAnswerIds: new Set(),
@@ -88178,6 +88203,13 @@ class ProfileAnswerAnimationService {
             return { ...state, newAnswerIds: newIds };
         });
     }
+    clearRemovedAnswer(answerId) {
+        this.animationState.update(state => {
+            const removedIds = new Set(state.removedAnswerIds);
+            removedIds.delete(answerId);
+            return { ...state, removedAnswerIds: removedIds };
+        });
+    }
     static { this.ɵfac = function ProfileAnswerAnimationService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnswerAnimationService)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ProfileAnswerAnimationService, factory: ProfileAnswerAnimationService.ɵfac, providedIn: 'root' }); }
 }
@@ -88251,7 +88283,7 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
 } if (rf & 2) {
     const answerData_r4 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("animate-answer-pop-in", ctx_r0.isNewAnswer(answerData_r4.answer.id));
+    i0.ɵɵclassProp("animate-answer-pop-in", ctx_r0.isNewAnswer(answerData_r4.answer.id))("animate-answer-fade-out", ctx_r0.isRemovedAnswer(answerData_r4.answer.id));
     i0.ɵɵproperty("ngClass", ctx_r0.answerChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
@@ -88266,12 +88298,12 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
 } }
 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, 9, null, null, _forTrack0$3);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 11, null, null, _forTrack0$3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.questionAnswers());
+    i0.ɵɵrepeater(ctx_r0.displayAnswers());
 } }
 function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8)(1, "div", 22)(2, "div", 23);
@@ -88324,6 +88356,20 @@ class ShopProfileQuestionCardComponent {
                 user: allUsers.find(u => u.id === answer.creatorUserId)
             }));
         }, ...(ngDevMode ? [{ debugName: "questionAnswers" }] : []));
+        this.displayAnswers = computed(() => {
+            const questionId = this.question().id;
+            const current = this.questionAnswers();
+            const allUsers = this.users();
+            const removedAnswers = this.animationService.removedAnswers()
+                .filter(a => a.profileQuestionId === questionId)
+                .map(answer => ({
+                answer,
+                user: allUsers.find(u => u.id === answer.creatorUserId)
+            }));
+            const currentIds = new Set(current.map(c => c.answer.id));
+            const uniqueRemoved = removedAnswers.filter(r => !currentIds.has(r.answer.id));
+            return [...current, ...uniqueRemoved];
+        }, ...(ngDevMode ? [{ debugName: "displayAnswers" }] : []));
         this.isAnswered = computed(() => {
             return this.questionAnswers().length > 0;
         }, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
@@ -88340,9 +88386,19 @@ class ShopProfileQuestionCardComponent {
             return false;
         return this.animationService.isNewAnswer(answerId);
     }
+    isRemovedAnswer(answerId) {
+        if (answerId === undefined)
+            return false;
+        return this.animationService.isRemovedAnswer(answerId);
+    }
     onAnimationEnd(answerId) {
         if (answerId !== undefined) {
-            this.animationService.clearNewAnswer(answerId);
+            if (this.animationService.isNewAnswer(answerId)) {
+                this.animationService.clearNewAnswer(answerId);
+            }
+            if (this.animationService.isRemovedAnswer(answerId)) {
+                this.animationService.clearRemovedAnswer(answerId);
+            }
         }
     }
     getFocusAreaTitle(focusArea) {
@@ -88478,12 +88534,12 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.questionAnswers().length > 0 ? 8 : 9);
+            i0.ɵɵconditional(ctx.displayAnswers().length > 0 ? 8 : 9);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
-        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], styles: ["@keyframes _ngcontent-%COMP%_answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_answerPopIn .5s ease-out forwards}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], styles: ["@keyframes _ngcontent-%COMP%_answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_answerPopIn .5s ease-out forwards}@keyframes _ngcontent-%COMP%_answerFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.animate-answer-fade-out[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_answerFadeOut .4s ease-out forwards}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
@@ -88531,13 +88587,14 @@ class ShopProfileQuestionCardComponent {
       }
 
       <!-- Answer Section -->
-      @if (questionAnswers().length > 0) {
+      @if (displayAnswers().length > 0) {
         <!-- Answered State - Show answer chips -->
         <div class="flex flex-wrap gap-3">
-          @for (answerData of questionAnswers(); track answerData.answer.id) {
+          @for (answerData of displayAnswers(); track answerData.answer.id) {
             <div
               [ngClass]="answerChipClasses()"
               [class.animate-answer-pop-in]="isNewAnswer(answerData.answer.id)"
+              [class.animate-answer-fade-out]="isRemovedAnswer(answerData.answer.id)"
               (animationend)="onAnimationEnd(answerData.answer.id)"
               class="flex items-center gap-2 px-4 py-2.5 rounded-full">
               <span [ngClass]="answerTextClasses()" class="text-sm font-medium">
@@ -88591,9 +88648,9 @@ class ShopProfileQuestionCardComponent {
         </button>
       </div>
     </div>
-  `, styles: ["@keyframes answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in{animation:answerPopIn .5s ease-out forwards}\n"] }]
+  `, styles: ["@keyframes answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in{animation:answerPopIn .5s ease-out forwards}@keyframes answerFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.animate-answer-fade-out{animation:answerFadeOut .4s ease-out forwards}\n"] }]
     }], 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: 147 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 161 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];
@@ -89765,7 +89822,7 @@ class ShopProfileQuestionsModalComponent {
         this.questionForAnswer = signal(null, ...(ngDevMode ? [{ debugName: "questionForAnswer" }] : []));
         this.navigationHistory = signal([], ...(ngDevMode ? [{ debugName: "navigationHistory" }] : []));
         this.modalMovedToBody = false;
-        this.savePending = signal(false, ...(ngDevMode ? [{ debugName: "savePending" }] : []));
+        this.snapshotAnswerIds = signal(null, ...(ngDevMode ? [{ debugName: "snapshotAnswerIds" }] : []));
         this.viewType = computed(() => {
             if (this.showAllQuestions())
                 return 'all';
@@ -89854,14 +89911,19 @@ class ShopProfileQuestionsModalComponent {
         });
         effect(() => {
             const answers = this.profileShopAnswers();
-            const pending = this.savePending();
-            if (pending && answers.length > 0) {
-                const answerIds = answers
-                    .map(a => a.id)
-                    .filter((id) => id !== undefined);
-                console.log('[Modal] Save completed, computing animation state');
-                this.animationService.computeAnimationState(answerIds);
-                this.savePending.set(false);
+            const snapshot = this.snapshotAnswerIds();
+            if (snapshot === null)
+                return;
+            const currentIds = new Set(answers.map(a => a.id).filter((id) => id !== undefined));
+            const hasNewIds = [...currentIds].some(id => !snapshot.has(id));
+            const hasRemovedIds = [...snapshot].some(id => !currentIds.has(id));
+            if (hasNewIds || hasRemovedIds) {
+                console.log('[Modal] Answers changed, computing animation state', {
+                    snapshot: Array.from(snapshot),
+                    current: Array.from(currentIds)
+                });
+                this.animationService.computeAnimationState(Array.from(currentIds));
+                this.snapshotAnswerIds.set(null);
             }
         });
     }
@@ -89911,12 +89973,10 @@ class ShopProfileQuestionsModalComponent {
     }
     snapshotAnswersForAnimation() {
         const answers = this.profileShopAnswers();
-        const answerIds = answers
-            .map(a => a.id)
-            .filter((id) => id !== undefined);
-        console.log('[Modal] Snapshotting current answers before save:', answerIds);
-        this.animationService.snapshotCurrentAnswers(answerIds);
-        this.savePending.set(true);
+        const answerIds = new Set(answers.map(a => a.id).filter((id) => id !== undefined));
+        console.log('[Modal] Snapshotting current answers before save:', Array.from(answerIds));
+        this.snapshotAnswerIds.set(answerIds);
+        this.animationService.snapshotCurrentAnswers(answers);
     }
     onNavigateToList() {
         this.answerModeActive.set(false);