@eric-emg/symphiq-components 1.2.384 → 1.2.386

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, keyframes } from '@angular/animations';
+import { trigger, transition, style, animate, state, 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", undefined)("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵproperty("@answerAnimation", answerData_r3.animState)("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", undefined)("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵproperty("@answerAnimation", answerData_r3.animState)("ngClass", ctx_r0.answerDateClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r3.answer.createdDate), " ");
 } }
@@ -88242,18 +88242,36 @@ class ShopProfileQuestionCardComponent {
         this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.answerClick = output();
-        this.questionAnswers = computed(() => {
+        this.knownAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "knownAnswerIds" }] : []));
+        this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
+        this.questionAnswersWithState = 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 [];
-            return answers
+            const result = answers
                 .filter(a => a.profileQuestionId === questionId)
-                .map(answer => ({
-                answer,
-                user: allUsers.find(u => u.id === answer.creatorUserId)
-            }));
+                .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'
+                };
+            });
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "questionAnswersWithState" }] : []));
+        this.questionAnswers = computed(() => {
+            return this.questionAnswersWithState();
         }, ...(ngDevMode ? [{ debugName: "questionAnswers" }] : []));
         this.isAnswered = computed(() => {
             return this.questionAnswers().length > 0;
@@ -88265,6 +88283,34 @@ 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);
+            }
+        });
     }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
@@ -88406,14 +88452,17 @@ class ShopProfileQuestionCardComponent {
             i0.ɵɵtextInterpolate(ctx.isAnswered() ? "Edit Answer" : "Answer");
         } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, data: { animation: [
                 trigger('answerAnimation', [
-                    transition(':enter', [
+                    state('existing', style({ opacity: 1, transform: 'scale(1)' })),
+                    state('new', style({ opacity: 1, transform: 'scale(1)' })),
+                    transition('void => new', [
                         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', [
+                    transition('void => existing', []),
+                    transition('* => void', [
                         animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                     ])
                 ])
@@ -88428,14 +88477,17 @@ class ShopProfileQuestionCardComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('answerAnimation', [
-                        transition(':enter', [
+                        state('existing', style({ opacity: 1, transform: 'scale(1)' })),
+                        state('new', style({ opacity: 1, transform: 'scale(1)' })),
+                        transition('void => new', [
                             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', [
+                        transition('void => existing', []),
+                        transition('* => void', [
                             animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
                         ])
                     ])
@@ -88488,7 +88540,7 @@ class ShopProfileQuestionCardComponent {
         <!-- Answered State - Show answer chips -->
         <div class="flex flex-wrap gap-3">
           @for (answerData of questionAnswers(); track answerData.answer.id) {
-            <div @answerAnimation [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+            <div [@answerAnimation]="answerData.animState" [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>
@@ -88498,7 +88550,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div @answerAnimation [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+            <div [@answerAnimation]="answerData.animState" [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
               Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
             </div>
           }
@@ -88542,8 +88594,8 @@ class ShopProfileQuestionCardComponent {
     </div>
   `
             }]
-    }], 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: 134 }); })();
+    }], () => [], { 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 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];
@@ -88736,7 +88788,7 @@ function ShopProfileQuestionAnswerComponent_Conditional_31_Template(rf, ctx) { i
     i0.ɵɵtext(1, "Save");
     i0.ɵɵelementEnd();
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionAnswerComponent_Conditional_32_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 55);
     i0.ɵɵelement(1, "circle", 56)(2, "path", 57);
@@ -88746,15 +88798,27 @@ function ShopProfileQuestionAnswerComponent_Conditional_33_Template(rf, ctx) { i
     i0.ɵɵtext(4, "Saving...");
     i0.ɵɵelementEnd();
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionAnswerComponent_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Save & next unanswered");
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 58);
-    i0.ɵɵelement(3, "path", 59);
+    i0.ɵɵelementStart(2, "svg", 59);
+    i0.ɵɵelement(3, "path", 60);
     i0.ɵɵelementEnd();
 } }
+function ShopProfileQuestionAnswerComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAndNext()); });
+    i0.ɵɵconditionalCreate(1, ShopProfileQuestionAnswerComponent_Conditional_32_Conditional_1_Template, 5, 0)(2, ShopProfileQuestionAnswerComponent_Conditional_32_Conditional_2_Template, 4, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r1.saveButtonsDisabled())("ngClass", ctx_r1.saveAndNextButtonClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isSaving() && ctx_r1.pendingSaveAction() === "saveAndNext" ? 1 : 2);
+} }
 class ShopProfileQuestionAnswerComponent {
     constructor() {
         this.question = input.required(...(ngDevMode ? [{ debugName: "question" }] : []));
@@ -88837,6 +88901,9 @@ class ShopProfileQuestionAnswerComponent {
                 return 0;
             return (this.answeredCount() / total) * 100;
         }, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : []));
+        this.allQuestionsAnswered = computed(() => {
+            return this.unansweredQuestions().length === 0;
+        }, ...(ngDevMode ? [{ debugName: "allQuestionsAnswered" }] : []));
         this.canAddCustomAnswers = computed(() => {
             return this.customAnswerText().trim().length > 0;
         }, ...(ngDevMode ? [{ debugName: "canAddCustomAnswers" }] : []));
@@ -89179,7 +89246,7 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stickySentinel = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stickyHeader = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.questionTitle = _t.first);
-        } }, inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], filteredQuestions: [1, "filteredQuestions"], profileShopAnswers: [1, "profileShopAnswers"] }, outputs: { backClick: "backClick", saveClick: "saveClick", saveAndNextClick: "saveAndNextClick", navigateToList: "navigateToList", navigateToNextQuestion: "navigateToNextQuestion" }, decls: 35, vars: 25, consts: [["scrollContainer", ""], ["stickySentinel", ""], ["stickyHeader", ""], ["questionTitle", ""], [1, "flex", "flex-col", "h-full"], [1, "flex-1", "overflow-y-auto"], [1, "px-6", "py-4", "border-b", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-1"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", "whitespace-nowrap", 3, "ngClass"], [1, "inline-block", "tabular-nums", "transition-transform", "duration-300"], [1, "h-0"], [1, "sticky", "top-0", "z-10", "px-6", "py-4", "transition-all", "duration-200", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "font-bold", "text-2xl", "[&.is-sticky]:text-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "px-6"], [1, "mt-3", "space-y-2"], [1, "px-6", "py-6"], [1, "flex", "flex-col", "items-center", "justify-center", "py-12"], [1, "px-6", "py-4", "border-t", "sticky", "bottom-0", "z-10", 3, "ngClass"], [1, "flex", "items-center", "gap-4"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "border", "disabled:opacity-50", "disabled:cursor-not-allowed", "hover:scale-[1.02]", "active:scale-95", "disabled:hover:scale-100", "flex", "items-center", "justify-center", "gap-2", "min-w-[80px]", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "flex-1", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "disabled:opacity-50", "disabled:cursor-not-allowed", "hover:scale-[1.01]", "active:scale-[0.99]", "disabled:hover:scale-100", 3, "click", "disabled", "ngClass"], [1, "h-7", "rounded", "w-3/4", "animate-pulse", 3, "ngClass"], [1, "h-7", "rounded", "w-1/2", "animate-pulse", 3, "ngClass"], [1, "h-4", "rounded", "w-full", "animate-pulse", 3, "ngClass"], [1, "h-4", "rounded", "w-5/6", "animate-pulse", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-3", 3, "ngClass"], [1, "mt-4"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], ["size", "medium", 3, "viewMode"], [1, "mt-4", "text-sm", "font-medium", 3, "ngClass"], [1, "space-y-3", "mb-4"], [1, "flex", "items-start", "gap-3", "p-4", "rounded-lg", "cursor-pointer", "transition-all", "duration-200", "hover:scale-[1.01]", 3, "ngClass"], [1, "mb-6"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "pb-4"], ["rows", "5", "placeholder", "Enter your answer(s) here, separated by returns.", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "text-sm", "resize-y", "transition-colors", "duration-200", "focus:ring-2", "focus:ring-offset-2", 3, "ngModelChange", "ngModel", "ngClass"], [1, "flex", "items-center", "gap-3", "mt-3"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["type", "button", 1, "flex-1", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", "disabled:hover:scale-100", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "w-full", "px-5", "py-3", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "border-2", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass"], ["type", "checkbox", 1, "mt-0.5", "w-5", "h-5", "rounded", "border-2", "cursor-pointer", "transition-all", "duration-200", "focus:ring-2", "focus:ring-offset-2", 3, "change", "checked", "ngClass"], [1, "text-base", "flex-1", 3, "ngClass"], ["type", "button", 1, "w-full", "px-5", "py-3", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "border-2", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass"], ["xmlns", "http://www.w3.org/2000/svg", "fill", "none", "viewBox", "0 0 24 24", 1, "animate-spin", "h-4", "w-4"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["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"]], template: function ShopProfileQuestionAnswerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], filteredQuestions: [1, "filteredQuestions"], profileShopAnswers: [1, "profileShopAnswers"] }, outputs: { backClick: "backClick", saveClick: "saveClick", saveAndNextClick: "saveAndNextClick", navigateToList: "navigateToList", navigateToNextQuestion: "navigateToNextQuestion" }, decls: 33, vars: 27, consts: [["scrollContainer", ""], ["stickySentinel", ""], ["stickyHeader", ""], ["questionTitle", ""], [1, "flex", "flex-col", "h-full"], [1, "flex-1", "overflow-y-auto"], [1, "px-6", "py-4", "border-b", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-1"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", "whitespace-nowrap", 3, "ngClass"], [1, "inline-block", "tabular-nums", "transition-transform", "duration-300"], [1, "h-0"], [1, "sticky", "top-0", "z-10", "px-6", "py-4", "transition-all", "duration-200", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "font-bold", "text-2xl", "[&.is-sticky]:text-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "px-6"], [1, "mt-3", "space-y-2"], [1, "px-6", "py-6"], [1, "flex", "flex-col", "items-center", "justify-center", "py-12"], [1, "px-6", "py-4", "border-t", "sticky", "bottom-0", "z-10", 3, "ngClass"], [1, "flex", "items-center", "gap-4"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", "hover:scale-[1.02]", "active:scale-95", "disabled:hover:scale-100", "flex", "items-center", "justify-center", "gap-2", "min-w-[80px]", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "flex-1", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "disabled:opacity-50", "disabled:cursor-not-allowed", "hover:scale-[1.01]", "active:scale-[0.99]", "disabled:hover:scale-100", 3, "disabled", "ngClass"], [1, "h-7", "rounded", "w-3/4", "animate-pulse", 3, "ngClass"], [1, "h-7", "rounded", "w-1/2", "animate-pulse", 3, "ngClass"], [1, "h-4", "rounded", "w-full", "animate-pulse", 3, "ngClass"], [1, "h-4", "rounded", "w-5/6", "animate-pulse", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-3", 3, "ngClass"], [1, "mt-4"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], ["size", "medium", 3, "viewMode"], [1, "mt-4", "text-sm", "font-medium", 3, "ngClass"], [1, "space-y-3", "mb-4"], [1, "flex", "items-start", "gap-3", "p-4", "rounded-lg", "cursor-pointer", "transition-all", "duration-200", "hover:scale-[1.01]", 3, "ngClass"], [1, "mb-6"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "pb-4"], ["rows", "5", "placeholder", "Enter your answer(s) here, separated by returns.", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "text-sm", "resize-y", "transition-colors", "duration-200", "focus:ring-2", "focus:ring-offset-2", 3, "ngModelChange", "ngModel", "ngClass"], [1, "flex", "items-center", "gap-3", "mt-3"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["type", "button", 1, "flex-1", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "disabled:opacity-50", "disabled:cursor-not-allowed", "disabled:hover:scale-100", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "w-full", "px-5", "py-3", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "border-2", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "ngClass"], ["type", "checkbox", 1, "mt-0.5", "w-5", "h-5", "rounded", "border-2", "cursor-pointer", "transition-all", "duration-200", "focus:ring-2", "focus:ring-offset-2", 3, "change", "checked", "ngClass"], [1, "text-base", "flex-1", 3, "ngClass"], ["type", "button", 1, "w-full", "px-5", "py-3", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "border-2", "hover:scale-[1.01]", "active:scale-[0.99]", 3, "click", "ngClass"], ["xmlns", "http://www.w3.org/2000/svg", "fill", "none", "viewBox", "0 0 24 24", 1, "animate-spin", "h-4", "w-4"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["type", "button", 1, "flex-1", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "disabled:opacity-50", "disabled:cursor-not-allowed", "hover:scale-[1.01]", "active:scale-[0.99]", "disabled:hover:scale-100", 3, "click", "disabled", "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"]], template: function ShopProfileQuestionAnswerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 4)(1, "div", 5, 0)(3, "div", 6)(4, "h4", 7);
             i0.ɵɵtext(5, " Unanswered questions status ");
@@ -89207,10 +89274,8 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSave()); });
             i0.ɵɵconditionalCreate(30, ShopProfileQuestionAnswerComponent_Conditional_30_Template, 5, 0)(31, ShopProfileQuestionAnswerComponent_Conditional_31_Template, 2, 0, "span");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "button", 26);
-            i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSaveAndNext()); });
-            i0.ɵɵconditionalCreate(33, ShopProfileQuestionAnswerComponent_Conditional_33_Template, 5, 0)(34, ShopProfileQuestionAnswerComponent_Conditional_34_Template, 4, 0);
-            i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(32, ShopProfileQuestionAnswerComponent_Conditional_32_Template, 3, 3, "button", 26);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.statusHeaderClasses());
@@ -89242,13 +89307,12 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.footerClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", ctx.saveButtonsDisabled())("ngClass", ctx.saveButtonClasses());
+            i0.ɵɵclassProp("flex-1", ctx.allQuestionsAnswered())("border", !ctx.allQuestionsAnswered());
+            i0.ɵɵproperty("disabled", ctx.saveButtonsDisabled())("ngClass", ctx.allQuestionsAnswered() ? ctx.saveAndNextButtonClasses() : ctx.saveButtonClasses());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSaving() && ctx.pendingSaveAction() === "save" ? 30 : 31);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", ctx.saveButtonsDisabled())("ngClass", ctx.saveAndNextButtonClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSaving() && ctx.pendingSaveAction() === "saveAndNext" ? 33 : 34);
+            i0.ɵɵconditional(!ctx.allQuestionsAnswered() ? 32 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, IndeterminateSpinnerComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
@@ -89447,8 +89511,10 @@ class ShopProfileQuestionAnswerComponent {
             type="button"
             (click)="onSave()"
             [disabled]="saveButtonsDisabled()"
-            [ngClass]="saveButtonClasses()"
-            class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 border disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-95 disabled:hover:scale-100 flex items-center justify-center gap-2 min-w-[80px]">
+            [ngClass]="allQuestionsAnswered() ? saveAndNextButtonClasses() : saveButtonClasses()"
+            [class.flex-1]="allQuestionsAnswered()"
+            class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-95 disabled:hover:scale-100 flex items-center justify-center gap-2 min-w-[80px]"
+            [class.border]="!allQuestionsAnswered()">
             @if (isSaving() && pendingSaveAction() === 'save') {
               <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -89459,25 +89525,27 @@ class ShopProfileQuestionAnswerComponent {
               <span>Save</span>
             }
           </button>
-          <button
-            type="button"
-            (click)="onSaveAndNext()"
-            [disabled]="saveButtonsDisabled()"
-            [ngClass]="saveAndNextButtonClasses()"
-            class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.01] active:scale-[0.99] disabled:hover:scale-100">
-            @if (isSaving() && pendingSaveAction() === 'saveAndNext') {
-              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-              <span>Saving...</span>
-            } @else {
-              <span>Save & next unanswered</span>
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-              </svg>
-            }
-          </button>
+          @if (!allQuestionsAnswered()) {
+            <button
+              type="button"
+              (click)="onSaveAndNext()"
+              [disabled]="saveButtonsDisabled()"
+              [ngClass]="saveAndNextButtonClasses()"
+              class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.01] active:scale-[0.99] disabled:hover:scale-100">
+              @if (isSaving() && pendingSaveAction() === 'saveAndNext') {
+                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>Saving...</span>
+              } @else {
+                <span>Save & next unanswered</span>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              }
+            </button>
+          }
         </div>
       </div>
     </div>
@@ -89496,7 +89564,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: 260 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 264 }); })();
 
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];