@eric-emg/symphiq-components 1.2.387 → 1.2.389

package/fesm2022/symphiq-components.mjs

@@ -88124,6 +88124,70 @@ class ShopProfileViewToggleComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileViewToggleComponent, { className: "ShopProfileViewToggleComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-view-toggle.component.ts", lineNumber: 33 }); })();
 
+class ProfileAnswerAnimationService {
+    constructor() {
+        this.previousAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "previousAnswerIds" }] : []));
+        this.animationState = signal({
+            newAnswerIds: new Set(),
+            removedAnswerIds: new Set()
+        }, ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    }
+    getAnimationState() {
+        return this.animationState.asReadonly();
+    }
+    snapshotCurrentAnswers(answerIds) {
+        this.previousAnswerIds.set(new Set(answerIds));
+    }
+    computeAnimationState(currentAnswerIds) {
+        const previous = this.previousAnswerIds();
+        const current = new Set(currentAnswerIds);
+        const newAnswerIds = new Set();
+        const removedAnswerIds = new Set();
+        current.forEach(id => {
+            if (!previous.has(id)) {
+                newAnswerIds.add(id);
+            }
+        });
+        previous.forEach(id => {
+            if (!current.has(id)) {
+                removedAnswerIds.add(id);
+            }
+        });
+        console.log('[AnimationService] State computed:', {
+            previous: Array.from(previous),
+            current: Array.from(current),
+            newIds: Array.from(newAnswerIds),
+            removedIds: Array.from(removedAnswerIds)
+        });
+        this.animationState.set({ newAnswerIds, removedAnswerIds });
+        this.previousAnswerIds.set(current);
+    }
+    isNewAnswer(answerId) {
+        return this.animationState().newAnswerIds.has(answerId);
+    }
+    clearAnimationState() {
+        this.animationState.set({
+            newAnswerIds: new Set(),
+            removedAnswerIds: new Set()
+        });
+    }
+    clearNewAnswer(answerId) {
+        this.animationState.update(state => {
+            const newIds = new Set(state.newAnswerIds);
+            newIds.delete(answerId);
+            return { ...state, newAnswerIds: newIds };
+        });
+    }
+    static { this.ɵfac = function ProfileAnswerAnimationService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnswerAnimationService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ProfileAnswerAnimationService, factory: ProfileAnswerAnimationService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProfileAnswerAnimationService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+
 const _forTrack0$3 = ($index, $item) => $item.answer.id;
 function ShopProfileQuestionCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -88173,7 +88237,10 @@ function ShopProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (
     i0.ɵɵrepeater(ctx_r0.relatedFocusAreas());
 } }
 function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵlistener("animationend", function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template_div_animationend_0_listener() { const answerData_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAnimationEnd(answerData_r4.answer.id)); });
+    i0.ɵɵelementStart(1, "span", 19);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(3, "symphiq-user-avatar", 20);
@@ -88182,23 +88249,24 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const answerData_r3 = ctx.$implicit;
+    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.ɵɵproperty("ngClass", ctx_r0.answerChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerTextClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", answerData_r3.answer.answer, " ");
+    i0.ɵɵtextInterpolate1(" ", answerData_r4.answer.answer, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("user", answerData_r3.user);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("user", answerData_r4.user);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerDateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
+    i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r4.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();
@@ -88236,6 +88304,7 @@ function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (
 } }
 class ShopProfileQuestionCardComponent {
     constructor() {
+        this.animationService = inject(ProfileAnswerAnimationService);
         this.question = input.required(...(ngDevMode ? [{ debugName: "question" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.viewType = input('category', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
@@ -88266,6 +88335,16 @@ class ShopProfileQuestionCardComponent {
             return q.focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
     }
+    isNewAnswer(answerId) {
+        if (answerId === undefined)
+            return false;
+        return this.animationService.isNewAnswer(answerId);
+    }
+    onAnimationEnd(answerId) {
+        if (answerId !== undefined) {
+            this.animationService.clearNewAnswer(answerId);
+        }
+    }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
     }
@@ -88368,7 +88447,7 @@ class ShopProfileQuestionCardComponent {
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg shadow-blue-500/20';
     }
     static { this.ɵfac = function ShopProfileQuestionCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileQuestionCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"] }, outputs: { answerClick: "answerClick" }, decls: 16, vars: 9, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "justify-end"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"] }, outputs: { answerClick: "answerClick" }, decls: 16, vars: 9, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "justify-end"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "animationend", "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd()();
@@ -88404,16 +88483,11 @@ 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], 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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
-        args: [{
-                selector: 'symphiq-shop-profile-question-card',
-                standalone: true,
-                imports: [CommonModule, UserAvatarComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
+        args: [{ selector: 'symphiq-shop-profile-question-card', standalone: true, imports: [CommonModule, UserAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
       <!-- Question Header with Checkbox -->
       <div class="flex items-start gap-3">
@@ -88461,7 +88535,11 @@ 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
+              [ngClass]="answerChipClasses()"
+              [class.animate-answer-pop-in]="isNewAnswer(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">
                 {{ answerData.answer.answer }}
               </span>
@@ -88513,10 +88591,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"] }]
     }], 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: 147 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];
@@ -89682,11 +89759,13 @@ class ShopProfileQuestionsModalComponent {
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.hostElement = inject(ElementRef);
+        this.animationService = inject(ProfileAnswerAnimationService);
         this.modalReady = signal(false, ...(ngDevMode ? [{ debugName: "modalReady" }] : []));
         this.answerModeActive = signal(false, ...(ngDevMode ? [{ debugName: "answerModeActive" }] : []));
         this.questionForAnswer = signal(null, ...(ngDevMode ? [{ debugName: "questionForAnswer" }] : []));
         this.navigationHistory = signal([], ...(ngDevMode ? [{ debugName: "navigationHistory" }] : []));
         this.modalMovedToBody = false;
+        this.savePending = signal(false, ...(ngDevMode ? [{ debugName: "savePending" }] : []));
         this.viewType = computed(() => {
             if (this.showAllQuestions())
                 return 'all';
@@ -89770,6 +89849,19 @@ class ShopProfileQuestionsModalComponent {
                 this.questionForAnswer.set(null);
                 this.navigationHistory.set([]);
                 this.returnModalToHost();
+                this.animationService.clearAnimationState();
+            }
+        });
+        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);
             }
         });
     }
@@ -89810,11 +89902,22 @@ class ShopProfileQuestionsModalComponent {
         }
     }
     onSaveAnswer(event) {
+        this.snapshotAnswersForAnimation();
         this.answerSave.emit(event);
     }
     onSaveAndNextAnswer(event) {
+        this.snapshotAnswersForAnimation();
         this.answerSave.emit(event);
     }
+    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);
+    }
     onNavigateToList() {
         this.answerModeActive.set(false);
         this.questionForAnswer.set(null);
@@ -90166,7 +90269,7 @@ class ShopProfileQuestionsModalComponent {
             type: ViewChild,
             args: ['modalWrapper']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 201 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 202 }); })();
 
 const _c0$3 = ["chartdiv"];
 function ShopProfileStatusCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {