@eric-emg/symphiq-components 1.2.385 → 1.2.387

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, state, keyframes } from '@angular/animations';
+import { trigger, transition, style, animate } 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", ctx_r0.getAnimationState(answerData_r3.answer.id))("ngClass", ctx_r0.answerChipClasses());
+    i0.ɵɵproperty("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("@answerAnimation", ctx_r0.getAnimationState(answerData_r3.answer.id))("ngClass", ctx_r0.answerDateClasses());
+    i0.ɵɵproperty("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, 9, null, null, _forTrack0$3);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 7, null, null, _forTrack0$3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -88242,8 +88242,6 @@ class ShopProfileQuestionCardComponent {
         this.profileShopAnswers = input([], ...(ngDevMode ? [{ debugName: "profileShopAnswers" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.answerClick = output();
-        this.knownAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "knownAnswerIds" }] : []));
-        this.newAnswerIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "newAnswerIds" }] : []));
         this.questionAnswers = computed(() => {
             const questionId = this.question().id;
             const answers = this.profileShopAnswers();
@@ -88267,30 +88265,6 @@ class ShopProfileQuestionCardComponent {
             const q = this.question();
             return q.focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
-        effect(() => {
-            const currentAnswers = this.questionAnswers();
-            const currentIds = new Set(currentAnswers.map(a => a.answer.id).filter((id) => id !== undefined));
-            const known = untracked(() => this.knownAnswerIds());
-            if (known.size === 0) {
-                this.knownAnswerIds.set(currentIds);
-                this.newAnswerIds.set(new Set());
-            }
-            else {
-                const newIds = new Set();
-                currentIds.forEach(id => {
-                    if (!known.has(id)) {
-                        newIds.add(id);
-                    }
-                });
-                this.newAnswerIds.set(newIds);
-                this.knownAnswerIds.set(currentIds);
-            }
-        });
-    }
-    getAnimationState(answerId) {
-        if (!answerId)
-            return 'existing';
-        return this.newAnswerIds().has(answerId) ? 'new' : 'existing';
     }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
@@ -88430,23 +88404,7 @@ 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, data: { animation: [
-                trigger('answerAnimation', [
-                    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('void => existing', []),
-                    transition('* => void', [
-                        animate('300ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' }))
-                    ])
-                ])
-            ] }, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, UserAvatarComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
@@ -88455,23 +88413,6 @@ class ShopProfileQuestionCardComponent {
                 standalone: true,
                 imports: [CommonModule, UserAvatarComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                animations: [
-                    trigger('answerAnimation', [
-                        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('void => existing', []),
-                        transition('* => void', [
-                            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 -->
@@ -88520,7 +88461,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]="getAnimationState(answerData.answer.id)" [ngClass]="answerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+            <div [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>
@@ -88530,7 +88471,7 @@ class ShopProfileQuestionCardComponent {
                 size="small"
               />
             </div>
-            <div [@answerAnimation]="getAnimationState(answerData.answer.id)" [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+            <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
               Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
             </div>
           }
@@ -88574,8 +88515,8 @@ class ShopProfileQuestionCardComponent {
     </div>
   `
             }]
-    }], () => [], { 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 }); })();
+    }], 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 }); })();
 
 const _c0$5 = ["scrollContainer"];
 const _c1$2 = ["stickySentinel"];
@@ -88768,7 +88709,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);
@@ -88778,15 +88719,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" }] : []));
@@ -88869,6 +88822,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" }] : []));
@@ -89211,7 +89167,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 ");
@@ -89239,10 +89195,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());
@@ -89274,13 +89228,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', [
@@ -89479,8 +89432,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>
@@ -89491,25 +89446,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>
@@ -89528,7 +89485,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"];