@eric-emg/symphiq-components 1.2.377 → 1.2.381

package/fesm2022/symphiq-components.mjs

@@ -88523,8 +88523,8 @@ const _c1$2 = ["stickySentinel"];
 const _c2$1 = ["stickyHeader"];
 const _c3$1 = ["questionTitle"];
 const _forTrack0$2 = ($index, $item) => $item.tempId;
-function ShopProfileQuestionAnswerComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+function ShopProfileQuestionAnswerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -88533,41 +88533,73 @@ function ShopProfileQuestionAnswerComponent_Conditional_16_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Shop > ", ctx_r1.breadcrumbPath(), " ");
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 18);
-    i0.ɵɵtext(1);
+function ShopProfileQuestionAnswerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "div", 27)(2, "div", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.skeletonClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.skeletonClasses());
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h2", 18, 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.questionTextClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.question().question, " ");
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "div", 29)(2, "div", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.skeletonClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.skeletonClasses());
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.contextTextClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.question().context, " ");
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_22_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+function ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r3 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaChipClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r3), " ");
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 38)(2, "span", 39);
+function ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33)(2, "span", 34);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(4, "svg", 40);
-    i0.ɵɵelement(5, "path", 41);
+    i0.ɵɵelementStart(4, "svg", 35);
+    i0.ɵɵelement(5, "path", 36);
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "div", 42);
-    i0.ɵɵrepeaterCreate(7, ShopProfileQuestionAnswerComponent_Conditional_22_For_8_Template, 2, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(6, "div", 37);
+    i0.ɵɵrepeaterCreate(7, ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_1_For_8_Template, 2, 2, "span", 38, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
@@ -88577,35 +88609,125 @@ function ShopProfileQuestionAnswerComponent_Conditional_22_Template(rf, ctx) { i
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.relatedFocusAreas());
 } }
-function ShopProfileQuestionAnswerComponent_For_26_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 22)(1, "input", 44);
-    i0.ɵɵlistener("change", function ShopProfileQuestionAnswerComponent_For_26_Template_input_change_1_listener() { const option_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleAnswer(option_r5.text)); });
+function ShopProfileQuestionAnswerComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_0_Template, 2, 2, "p", 31);
+    i0.ɵɵconditionalCreate(1, ShopProfileQuestionAnswerComponent_Conditional_23_Conditional_1_Template, 9, 3, "div", 32);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.question().context ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.relatedFocusAreas().length > 0 ? 1 : -1);
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 39);
+    i0.ɵɵelementStart(2, "p", 40);
+    i0.ɵɵtext(3, "Saving your answer...");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.savingTextClasses());
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 42)(1, "input", 52);
+    i0.ɵɵlistener("change", function ShopProfileQuestionAnswerComponent_Conditional_26_For_2_Template_input_change_1_listener() { const option_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleAnswer(option_r6.text)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 45);
+    i0.ɵɵelementStart(2, "span", 53);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const option_r5 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const option_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.checkboxRowClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", option_r5.isSelected)("ngClass", ctx_r1.checkboxClasses());
+    i0.ɵɵproperty("checked", option_r6.isSelected)("ngClass", ctx_r1.checkboxClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.checkboxLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r5.text, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r6.text, " ");
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 46);
-    i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleAddOtherAnswers()); });
+function ShopProfileQuestionAnswerComponent_Conditional_26_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_26_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleAddOtherAnswers()); });
     i0.ɵɵtext(1, " Add other answers ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.addOtherAnswersButtonClasses());
 } }
+function ShopProfileQuestionAnswerComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionAnswerComponent_Conditional_26_For_2_Template, 4, 5, "label", 42, _forTrack0$2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 43)(4, "div", 44)(5, "div", 45)(6, "div", 46)(7, "textarea", 47);
+    i0.ɵɵtwoWayListener("ngModelChange", function ShopProfileQuestionAnswerComponent_Conditional_26_Template_textarea_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.customAnswerText, $event) || (ctx_r1.customAnswerText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 48)(9, "button", 49);
+    i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_26_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCustomAnswers()); });
+    i0.ɵɵtext(10, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 50);
+    i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_26_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addCustomAnswers()); });
+    i0.ɵɵtext(12, " Add ");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵconditionalCreate(13, ShopProfileQuestionAnswerComponent_Conditional_26_Conditional_13_Template, 2, 1, "button", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.answerOptions());
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("grid-template-rows", ctx_r1.addOtherAnswersExpanded() ? "1fr" : "0fr");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.customAnswerText);
+    i0.ɵɵproperty("ngClass", ctx_r1.textareaClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.canAddCustomAnswers())("ngClass", ctx_r1.addButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.addOtherAnswersExpanded() ? 13 : -1);
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 55);
+    i0.ɵɵelement(1, "circle", 56)(2, "path", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Saving...");
+    i0.ɵɵelementEnd();
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Save");
+    i0.ɵɵelementEnd();
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 55);
+    i0.ɵɵelement(1, "circle", 56)(2, "path", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Saving...");
+    i0.ɵɵelementEnd();
+} }
+function ShopProfileQuestionAnswerComponent_Conditional_34_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.ɵɵelementEnd();
+} }
 class ShopProfileQuestionAnswerComponent {
     constructor() {
         this.question = input.required(...(ngDevMode ? [{ debugName: "question" }] : []));
@@ -88618,11 +88740,18 @@ class ShopProfileQuestionAnswerComponent {
         this.backClick = output();
         this.saveClick = output();
         this.saveAndNextClick = output();
+        this.navigateToList = output();
+        this.navigateToNextQuestion = output();
         this.ngZone = inject(NgZone);
         this.isSticky = false;
         this.selectedAnswerTexts = signal([], ...(ngDevMode ? [{ debugName: "selectedAnswerTexts" }] : []));
         this.addOtherAnswersExpanded = signal(false, ...(ngDevMode ? [{ debugName: "addOtherAnswersExpanded" }] : []));
         this.customAnswerText = signal('', ...(ngDevMode ? [{ debugName: "customAnswerText" }] : []));
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+        this.pendingSaveAction = signal(null, ...(ngDevMode ? [{ debugName: "pendingSaveAction" }] : []));
+        this.pendingQuestionId = signal(null, ...(ngDevMode ? [{ debugName: "pendingQuestionId" }] : []));
+        this.isCountAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isCountAnimating" }] : []));
+        this.previousAnsweredCount = signal(null, ...(ngDevMode ? [{ debugName: "previousAnsweredCount" }] : []));
         this.answerOptions = computed(() => {
             const q = this.question();
             const potentialAnswers = q.potentialAnswers || [];
@@ -88662,10 +88791,12 @@ class ShopProfileQuestionAnswerComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "breadcrumbPath" }] : []));
         this.unansweredQuestions = computed(() => {
-            return this.filteredQuestions().filter(q => !q.answered);
+            const answers = this.profileShopAnswers();
+            return this.filteredQuestions().filter(q => !answers.some(a => a.profileQuestionId === q.id));
         }, ...(ngDevMode ? [{ debugName: "unansweredQuestions" }] : []));
         this.answeredCount = computed(() => {
-            return this.filteredQuestions().filter(q => q.answered).length;
+            const answers = this.profileShopAnswers();
+            return this.filteredQuestions().filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
         }, ...(ngDevMode ? [{ debugName: "answeredCount" }] : []));
         this.totalCount = computed(() => {
             return this.filteredQuestions().length;
@@ -88680,12 +88811,10 @@ class ShopProfileQuestionAnswerComponent {
             return this.customAnswerText().trim().length > 0;
         }, ...(ngDevMode ? [{ debugName: "canAddCustomAnswers" }] : []));
         this.saveButtonsDisabled = computed(() => {
-            return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded();
+            return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded() || this.isSaving();
         }, ...(ngDevMode ? [{ debugName: "saveButtonsDisabled" }] : []));
         this.stickyState = false;
         this.lastStickyChange = 0;
-        this.stickyChangeCount = 0;
-        // Initialize selected answers from existing profile answers
         effect(() => {
             const questionId = this.question().id;
             const existingAnswers = this.profileShopAnswers()
@@ -88693,6 +88822,34 @@ class ShopProfileQuestionAnswerComponent {
                 .map(a => a.answer || '');
             this.selectedAnswerTexts.set(existingAnswers);
         });
+        effect(() => {
+            const answers = this.profileShopAnswers();
+            const pendingId = this.pendingQuestionId();
+            const pendingAction = this.pendingSaveAction();
+            if (pendingId !== null && pendingAction !== null) {
+                const hasAnswerForQuestion = answers.some(a => a.profileQuestionId === pendingId);
+                if (hasAnswerForQuestion) {
+                    this.isSaving.set(false);
+                    if (pendingAction === 'save') {
+                        this.navigateToList.emit();
+                    }
+                    else if (pendingAction === 'saveAndNext') {
+                        this.navigateToNextQuestion.emit();
+                    }
+                    this.pendingQuestionId.set(null);
+                    this.pendingSaveAction.set(null);
+                }
+            }
+        });
+        effect(() => {
+            const currentCount = this.answeredCount();
+            const prevCount = this.previousAnsweredCount();
+            if (prevCount !== null && currentCount > prevCount) {
+                this.isCountAnimating.set(true);
+                setTimeout(() => this.isCountAnimating.set(false), 400);
+            }
+            this.previousAnsweredCount.set(currentCount);
+        });
     }
     ngAfterViewInit() {
         this.setupStickyObserver();
@@ -88706,47 +88863,32 @@ class ShopProfileQuestionAnswerComponent {
         const header = this.stickyHeader?.nativeElement;
         const title = this.questionTitle?.nativeElement;
         if (!sentinel || !scrollRoot || !header) {
-            console.log('[StickyDebug] Setup failed - missing elements:', { sentinel: !!sentinel, scrollRoot: !!scrollRoot, header: !!header });
             return;
         }
-        console.log('[StickyDebug] Setting up IntersectionObserver');
         this.ngZone.runOutsideAngular(() => {
             this.intersectionObserver = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
                     const now = Date.now();
                     const timeSinceLastChange = now - this.lastStickyChange;
                     const newStickyState = !entry.isIntersecting;
-                    this.stickyChangeCount++;
-                    console.log(`[StickyDebug #${this.stickyChangeCount}] isIntersecting: ${entry.isIntersecting}, boundingClientRect.top: ${entry.boundingClientRect.top.toFixed(1)}, intersectionRatio: ${entry.intersectionRatio.toFixed(3)}, currentSticky: ${this.stickyState}, newSticky: ${newStickyState}, timeSinceLastChange: ${timeSinceLastChange}ms`);
-                    // Debounce: ignore changes within 250ms (longer than the 200ms CSS transition) to prevent flip-flopping
-                    if (timeSinceLastChange < 250 && this.stickyState !== newStickyState) {
-                        console.log(`[StickyDebug] DEBOUNCED - ignoring change from ${this.stickyState} to ${newStickyState} (only ${timeSinceLastChange}ms since last change)`);
+                    if (timeSinceLastChange < 350 && this.stickyState !== newStickyState) {
                         return;
                     }
                     if (this.stickyState === newStickyState) {
-                        console.log(`[StickyDebug] No state change needed (already ${this.stickyState})`);
                         return;
                     }
                     this.stickyState = newStickyState;
                     this.lastStickyChange = now;
                     if (newStickyState) {
-                        console.log('[StickyDebug] Applying sticky classes');
-                        header.classList.add('shadow-md');
-                        header.classList.add('is-sticky');
+                        header.classList.add('shadow-md', 'is-sticky');
                         title?.classList.add('is-sticky');
                     }
                     else {
-                        console.log('[StickyDebug] Removing sticky classes');
-                        header.classList.remove('shadow-md');
-                        header.classList.remove('is-sticky');
+                        header.classList.remove('shadow-md', 'is-sticky');
                         title?.classList.remove('is-sticky');
                     }
                 });
-            }, {
-                root: scrollRoot,
-                threshold: 0,
-                rootMargin: '-20px 0px 0px 0px'
-            });
+            }, { root: scrollRoot, threshold: 0, rootMargin: '-20px 0px 0px 0px' });
             this.intersectionObserver.observe(sentinel);
         });
     }
@@ -88792,10 +88934,26 @@ class ShopProfileQuestionAnswerComponent {
         this.addOtherAnswersExpanded.set(false);
     }
     onSave() {
-        this.saveClick.emit();
+        const questionId = this.question().id;
+        this.isSaving.set(true);
+        this.pendingSaveAction.set('save');
+        this.pendingQuestionId.set(questionId);
+        const event = {
+            profileQuestionId: questionId,
+            answers: this.selectedAnswerTexts()
+        };
+        this.saveClick.emit(event);
     }
     onSaveAndNext() {
-        this.saveAndNextClick.emit();
+        const questionId = this.question().id;
+        this.isSaving.set(true);
+        this.pendingSaveAction.set('saveAndNext');
+        this.pendingQuestionId.set(questionId);
+        const event = {
+            profileQuestionId: questionId,
+            answers: this.selectedAnswerTexts()
+        };
+        this.saveAndNextClick.emit(event);
     }
     getFocusAreaTitle(focusArea) {
         return FocusAreaDomainEnumUtil.title(focusArea);
@@ -88823,6 +88981,16 @@ class ShopProfileQuestionAnswerComponent {
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
+    skeletonClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-200'
+            : 'bg-slate-700';
+    }
+    savingTextClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
     statusHeaderClasses() {
         return this.isLightMode()
             ? 'bg-slate-50/50 border-slate-200'
@@ -88955,7 +89123,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" }, decls: 47, vars: 28, 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, "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, "font-bold", "text-2xl", "[&.is-sticky]:text-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "px-6"], [1, "text-sm", "leading-relaxed", "mt-3", 3, "ngClass"], [1, "mt-4"], [1, "px-6", "py-6"], [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"], [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", 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"], ["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"], [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"], ["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"]], 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: 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) {
             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 ");
@@ -88963,48 +89131,30 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵelementStart(6, "div", 8)(7, "div", 9)(8, "div", 10);
             i0.ɵɵelement(9, "div", 11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(10, "div", 12);
-            i0.ɵɵtext(11);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(12, "div", 13, 1);
-            i0.ɵɵelementStart(14, "div", 14, 2);
-            i0.ɵɵconditionalCreate(16, ShopProfileQuestionAnswerComponent_Conditional_16_Template, 2, 2, "div", 15);
-            i0.ɵɵelementStart(17, "h2", 16, 3);
-            i0.ɵɵtext(19);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(20, "div", 17);
-            i0.ɵɵconditionalCreate(21, ShopProfileQuestionAnswerComponent_Conditional_21_Template, 2, 2, "p", 18);
-            i0.ɵɵconditionalCreate(22, ShopProfileQuestionAnswerComponent_Conditional_22_Template, 9, 3, "div", 19);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 20)(24, "div", 21);
-            i0.ɵɵrepeaterCreate(25, ShopProfileQuestionAnswerComponent_For_26_Template, 4, 5, "label", 22, _forTrack0$2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 23)(28, "div", 24)(29, "div", 25)(30, "div", 26)(31, "textarea", 27);
-            i0.ɵɵtwoWayListener("ngModelChange", function ShopProfileQuestionAnswerComponent_Template_textarea_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.customAnswerText, $event) || (ctx.customAnswerText = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 28)(33, "button", 29);
-            i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelCustomAnswers()); });
-            i0.ɵɵtext(34, " Cancel ");
+            i0.ɵɵelementStart(10, "div", 12)(11, "span", 13);
+            i0.ɵɵtext(12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "button", 30);
-            i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addCustomAnswers()); });
-            i0.ɵɵtext(36, " Add ");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵconditionalCreate(37, ShopProfileQuestionAnswerComponent_Conditional_37_Template, 2, 1, "button", 31);
+            i0.ɵɵtext(13);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(38, "div", 32)(39, "div", 33)(40, "button", 34);
-            i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_40_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSave()); });
-            i0.ɵɵtext(41, " Save ");
+            i0.ɵɵelement(14, "div", 14, 1);
+            i0.ɵɵelementStart(16, "div", 15, 2);
+            i0.ɵɵconditionalCreate(18, ShopProfileQuestionAnswerComponent_Conditional_18_Template, 2, 2, "div", 16);
+            i0.ɵɵconditionalCreate(19, ShopProfileQuestionAnswerComponent_Conditional_19_Template, 3, 2, "div", 17)(20, ShopProfileQuestionAnswerComponent_Conditional_20_Template, 3, 2, "h2", 18);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "button", 35);
-            i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSaveAndNext()); });
-            i0.ɵɵelementStart(43, "span");
-            i0.ɵɵtext(44, "Save & next unanswered");
+            i0.ɵɵelementStart(21, "div", 19);
+            i0.ɵɵconditionalCreate(22, ShopProfileQuestionAnswerComponent_Conditional_22_Template, 3, 2, "div", 20)(23, ShopProfileQuestionAnswerComponent_Conditional_23_Template, 2, 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(45, "svg", 36);
-            i0.ɵɵelement(46, "path", 37);
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(24, "div", 21);
+            i0.ɵɵconditionalCreate(25, ShopProfileQuestionAnswerComponent_Conditional_25_Template, 4, 2, "div", 22)(26, ShopProfileQuestionAnswerComponent_Conditional_26_Template, 14, 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(27, "div", 23)(28, "div", 24)(29, "button", 25);
+            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()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.statusHeaderClasses());
@@ -89018,39 +89168,32 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.progressTextClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate2(" ", ctx.answeredCount(), " / ", ctx.totalCount(), " answered ");
+            i0.ɵɵclassProp("scale-125", ctx.isCountAnimating())("text-emerald-400", ctx.isCountAnimating());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.answeredCount());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" / ", ctx.totalCount(), " answered ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.stickyHeaderClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.viewType() !== "all" ? 16 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.questionTextClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.question().question, " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.question().context ? 21 : -1);
+            i0.ɵɵconditional(ctx.viewType() !== "all" ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.relatedFocusAreas().length > 0 ? 22 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.answerOptions());
+            i0.ɵɵconditional(ctx.isSaving() ? 19 : 20);
             i0.ɵɵadvance(3);
-            i0.ɵɵstyleProp("grid-template-rows", ctx.addOtherAnswersExpanded() ? "1fr" : "0fr");
+            i0.ɵɵconditional(ctx.isSaving() ? 22 : 23);
             i0.ɵɵadvance(3);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.customAnswerText);
-            i0.ɵɵproperty("ngClass", ctx.textareaClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.cancelButtonClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.canAddCustomAnswers())("ngClass", ctx.addButtonClasses());
+            i0.ɵɵconditional(ctx.isSaving() ? 25 : 26);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.addOtherAnswersExpanded() ? 37 : -1);
-            i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.footerClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.saveButtonsDisabled())("ngClass", ctx.saveButtonClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isSaving() && ctx.pendingSaveAction() === "save" ? 30 : 31);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.saveButtonsDisabled())("ngClass", ctx.saveAndNextButtonClasses());
-        } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel], encapsulation: 2, data: { animation: [
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isSaving() && ctx.pendingSaveAction() === "saveAndNext" ? 33 : 34);
+        } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, IndeterminateSpinnerComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0 }),
@@ -89064,7 +89207,7 @@ class ShopProfileQuestionAnswerComponent {
         args: [{
                 selector: 'symphiq-shop-profile-question-answer',
                 standalone: true,
-                imports: [CommonModule, FormsModule],
+                imports: [CommonModule, FormsModule, IndeterminateSpinnerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('fadeIn', [
@@ -89074,175 +89217,217 @@ class ShopProfileQuestionAnswerComponent {
                         ])
                     ])
                 ],
-                template: `
-    <div class="flex flex-col h-full">
-      <!-- Scrollable Content -->
-      <div #scrollContainer class="flex-1 overflow-y-auto">
-        <!-- Unanswered Questions Status -->
-        <div [ngClass]="statusHeaderClasses()" class="px-6 py-4 border-b">
-          <h4 [ngClass]="statusTitleClasses()" class="text-sm font-semibold mb-3">
-            Unanswered questions status
-          </h4>
-          <div class="flex items-center gap-3">
-            <div class="flex-1">
-              <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
-                <div
-                  [ngClass]="progressBarFillClasses()"
-                  class="h-full transition-all duration-500 ease-out rounded-full"
-                  [style.width.%]="progressPercentage()"></div>
-              </div>
-            </div>
-            <div [ngClass]="progressTextClasses()" class="text-sm font-medium whitespace-nowrap">
-              {{ answeredCount() }} / {{ totalCount() }} answered
-            </div>
-          </div>
-        </div>
-
-        <!-- Sentinel for intersection observer -->
-        <div #stickySentinel class="h-0"></div>
-
-        <!-- Sticky Question Header -->
-        <div #stickyHeader [ngClass]="stickyHeaderClasses()" class="sticky top-0 z-10 px-6 py-4 transition-all duration-200">
-          <!-- Breadcrumb - hide for All Questions mode -->
-          @if (viewType() !== 'all') {
-            <div [ngClass]="breadcrumbClasses()" class="text-sm italic mb-2">
-              Shop > {{ breadcrumbPath() }}
-            </div>
-          }
-
-          <!-- Question - animates from text-2xl to text-lg when sticky -->
-          <h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-2xl [&.is-sticky]:text-lg transition-all duration-200">
-            {{ question().question }}
-          </h2>
-        </div>
-
-        <!-- Context and Focus Areas - scroll under sticky header -->
-        <div class="px-6">
-          <!-- Context -->
-          @if (question().context) {
-            <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
-              {{ question().context }}
-            </p>
-          }
-
-          <!-- Related Focus Areas -->
-          @if (relatedFocusAreas().length > 0) {
-            <div class="mt-4">
-              <div class="flex items-center gap-2 mb-2">
-                <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
-                  Related to {{ relatedFocusAreas().length }} focus area(s)
-                </span>
-                <svg class="w-4 h-4" [ngClass]="relatedLabelClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path 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"></path>
-                </svg>
-              </div>
-              <div class="flex flex-wrap gap-2">
-                @for (focusArea of relatedFocusAreas(); track focusArea) {
-                  <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
-                    {{ getFocusAreaTitle(focusArea) }}
-                  </span>
-                }
-              </div>
-            </div>
-          }
-        </div>
-
-        <div class="px-6 py-6">
-
-        <!-- Answer Options -->
-        <div class="space-y-3 mb-4">
-          @for (option of answerOptions(); track option.tempId) {
-            <label
-              [ngClass]="checkboxRowClasses()"
-              class="flex items-start gap-3 p-4 rounded-lg cursor-pointer transition-all duration-200 hover:scale-[1.01]">
-              <input
-                type="checkbox"
-                [checked]="option.isSelected"
-                (change)="toggleAnswer(option.text)"
-                [ngClass]="checkboxClasses()"
-                class="mt-0.5 w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200 focus:ring-2 focus:ring-offset-2" />
-              <span [ngClass]="checkboxLabelClasses()" class="text-base flex-1">
-                {{ option.text }}
-              </span>
-            </label>
-          }
-        </div>
-
-        <!-- Add Other Answers -->
-        <div class="mb-6">
-          <div
-            class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-            [style.grid-template-rows]="addOtherAnswersExpanded() ? '1fr' : '0fr'">
-            <div class="overflow-hidden min-h-0">
-              <div class="pb-4">
-                <textarea
-                  [(ngModel)]="customAnswerText"
-                  [ngClass]="textareaClasses()"
-                  class="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"
-                  rows="5"
-                  placeholder="Enter your answer(s) here, separated by returns."></textarea>
-                <div class="flex items-center gap-3 mt-3">
-                  <button
-                    type="button"
-                    (click)="cancelCustomAnswers()"
-                    [ngClass]="cancelButtonClasses()"
-                    class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 active:scale-95">
-                    Cancel
-                  </button>
-                  <button
-                    type="button"
-                    (click)="addCustomAnswers()"
-                    [disabled]="!canAddCustomAnswers()"
-                    [ngClass]="addButtonClasses()"
-                    class="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">
-                    Add
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          @if (!addOtherAnswersExpanded()) {
-            <button
-              type="button"
-              (click)="toggleAddOtherAnswers()"
-              [ngClass]="addOtherAnswersButtonClasses()"
-              class="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]">
-              Add other answers
-            </button>
-          }
-        </div>
-        </div>
-      </div>
-
-      <!-- Sticky Footer -->
-      <div [ngClass]="footerClasses()" class="px-6 py-4 border-t sticky bottom-0 z-10">
-        <div class="flex items-center gap-4">
-          <button
-            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">
-            Save
-          </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">
-            <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>
+                template: `
+    <div class="flex flex-col h-full">
+      <!-- Scrollable Content -->
+      <div #scrollContainer class="flex-1 overflow-y-auto">
+        <!-- Unanswered Questions Status -->
+        <div [ngClass]="statusHeaderClasses()" class="px-6 py-4 border-b">
+          <h4 [ngClass]="statusTitleClasses()" class="text-sm font-semibold mb-3">
+            Unanswered questions status
+          </h4>
+          <div class="flex items-center gap-3">
+            <div class="flex-1">
+              <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
+                <div
+                  [ngClass]="progressBarFillClasses()"
+                  class="h-full transition-all duration-500 ease-out rounded-full"
+                  [style.width.%]="progressPercentage()"></div>
+              </div>
+            </div>
+            <div [ngClass]="progressTextClasses()" class="text-sm font-medium whitespace-nowrap">
+              <span 
+                class="inline-block tabular-nums transition-transform duration-300"
+                [class.scale-125]="isCountAnimating()"
+                [class.text-emerald-400]="isCountAnimating()">{{ answeredCount() }}</span> / {{ totalCount() }} answered
+            </div>
+          </div>
+        </div>
+
+        <!-- Sentinel for intersection observer -->
+        <div #stickySentinel class="h-0"></div>
+
+        <!-- Sticky Question Header -->
+        <div #stickyHeader [ngClass]="stickyHeaderClasses()" class="sticky top-0 z-10 px-6 py-4 transition-all duration-200">
+          <!-- Breadcrumb - hide for All Questions mode -->
+          @if (viewType() !== 'all') {
+            <div [ngClass]="breadcrumbClasses()" class="text-sm italic mb-2">
+              Shop > {{ breadcrumbPath() }}
+            </div>
+          }
+
+          <!-- Question - animates from text-2xl to text-lg when sticky -->
+          @if (isSaving()) {
+            <div class="space-y-2">
+              <div [ngClass]="skeletonClasses()" class="h-7 rounded w-3/4 animate-pulse"></div>
+              <div [ngClass]="skeletonClasses()" class="h-7 rounded w-1/2 animate-pulse"></div>
+            </div>
+          } @else {
+            <h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-2xl [&.is-sticky]:text-lg transition-all duration-200">
+              {{ question().question }}
+            </h2>
+          }
+        </div>
+
+        <!-- Context and Focus Areas - scroll under sticky header -->
+        <div class="px-6">
+          @if (isSaving()) {
+            <!-- Skeleton for context -->
+            <div class="mt-3 space-y-2">
+              <div [ngClass]="skeletonClasses()" class="h-4 rounded w-full animate-pulse"></div>
+              <div [ngClass]="skeletonClasses()" class="h-4 rounded w-5/6 animate-pulse"></div>
+            </div>
+          } @else {
+            <!-- Context -->
+            @if (question().context) {
+              <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
+                {{ question().context }}
+              </p>
+            }
+
+            <!-- Related Focus Areas -->
+            @if (relatedFocusAreas().length > 0) {
+              <div class="mt-4">
+                <div class="flex items-center gap-2 mb-2">
+                  <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
+                    Related to {{ relatedFocusAreas().length }} focus area(s)
+                  </span>
+                  <svg class="w-4 h-4" [ngClass]="relatedLabelClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path 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"></path>
+                  </svg>
+                </div>
+                <div class="flex flex-wrap gap-2">
+                  @for (focusArea of relatedFocusAreas(); track focusArea) {
+                    <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
+                      {{ getFocusAreaTitle(focusArea) }}
+                    </span>
+                  }
+                </div>
+              </div>
+            }
+          }
+        </div>
+
+        <div class="px-6 py-6">
+
+        @if (isSaving()) {
+          <!-- Loading spinner for answers -->
+          <div class="flex flex-col items-center justify-center py-12">
+            <symphiq-indeterminate-spinner [viewMode]="viewMode()" size="medium" />
+            <p [ngClass]="savingTextClasses()" class="mt-4 text-sm font-medium">Saving your answer...</p>
+          </div>
+        } @else {
+          <!-- Answer Options -->
+          <div class="space-y-3 mb-4">
+            @for (option of answerOptions(); track option.tempId) {
+              <label
+                [ngClass]="checkboxRowClasses()"
+                class="flex items-start gap-3 p-4 rounded-lg cursor-pointer transition-all duration-200 hover:scale-[1.01]">
+                <input
+                  type="checkbox"
+                  [checked]="option.isSelected"
+                  (change)="toggleAnswer(option.text)"
+                  [ngClass]="checkboxClasses()"
+                  class="mt-0.5 w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200 focus:ring-2 focus:ring-offset-2" />
+                <span [ngClass]="checkboxLabelClasses()" class="text-base flex-1">
+                  {{ option.text }}
+                </span>
+              </label>
+            }
+          </div>
+
+          <!-- Add Other Answers -->
+          <div class="mb-6">
+            <div
+              class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+              [style.grid-template-rows]="addOtherAnswersExpanded() ? '1fr' : '0fr'">
+              <div class="overflow-hidden min-h-0">
+                <div class="pb-4">
+                  <textarea
+                    [(ngModel)]="customAnswerText"
+                    [ngClass]="textareaClasses()"
+                    class="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"
+                    rows="5"
+                    placeholder="Enter your answer(s) here, separated by returns."></textarea>
+                  <div class="flex items-center gap-3 mt-3">
+                    <button
+                      type="button"
+                      (click)="cancelCustomAnswers()"
+                      [ngClass]="cancelButtonClasses()"
+                      class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 active:scale-95">
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      (click)="addCustomAnswers()"
+                      [disabled]="!canAddCustomAnswers()"
+                      [ngClass]="addButtonClasses()"
+                      class="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">
+                      Add
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            @if (!addOtherAnswersExpanded()) {
+              <button
+                type="button"
+                (click)="toggleAddOtherAnswers()"
+                [ngClass]="addOtherAnswersButtonClasses()"
+                class="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]">
+                Add other answers
+              </button>
+            }
+          </div>
+        }
+        </div>
+      </div>
+
+      <!-- Sticky Footer -->
+      <div [ngClass]="footerClasses()" class="px-6 py-4 border-t sticky bottom-0 z-10">
+        <div class="flex items-center gap-4">
+          <button
+            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]">
+            @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>
+                <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</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>
+        </div>
+      </div>
+    </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 }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], filteredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filteredQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], saveClick: [{ type: i0.Output, args: ["saveClick"] }], saveAndNextClick: [{ type: i0.Output, args: ["saveAndNextClick"] }], scrollContainer: [{
+    }], () => [], { 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 }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], filteredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filteredQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], saveClick: [{ type: i0.Output, args: ["saveClick"] }], saveAndNextClick: [{ type: i0.Output, args: ["saveAndNextClick"] }], navigateToList: [{ type: i0.Output, args: ["navigateToList"] }], navigateToNextQuestion: [{ type: i0.Output, args: ["navigateToNextQuestion"] }], scrollContainer: [{
             type: ViewChild,
             args: ['scrollContainer']
         }], stickySentinel: [{
@@ -89255,7 +89440,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: 209 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 259 }); })();
 
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];
@@ -89367,7 +89552,7 @@ function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditio
 function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-shop-profile-question-answer", 36);
-    i0.ɵɵlistener("backClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_backClick_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onBackFromAnswerMode()); })("saveClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_saveClick_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSaveAnswer()); })("saveAndNextClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_saveAndNextClick_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSaveAndNextAnswer()); });
+    i0.ɵɵlistener("backClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_backClick_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onBackFromAnswerMode()); })("saveClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_saveClick_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSaveAnswer($event)); })("saveAndNextClick", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_saveAndNextClick_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSaveAndNextAnswer($event)); })("navigateToList", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_navigateToList_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNavigateToList()); })("navigateToNextQuestion", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_14_Template_symphiq_shop_profile_question_answer_navigateToNextQuestion_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNavigateToNextQuestion()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -89448,6 +89633,7 @@ class ShopProfileQuestionsModalComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.close = output();
         this.questionAnswerClick = output();
+        this.answerSave = output();
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.hostElement = inject(ElementRef);
@@ -89500,7 +89686,8 @@ class ShopProfileQuestionsModalComponent {
             return [];
         }, ...(ngDevMode ? [{ debugName: "filteredQuestions" }] : []));
         this.answeredCount = computed(() => {
-            return this.filteredQuestions().filter(q => q.answered === true).length;
+            const answers = this.profileShopAnswers();
+            return this.filteredQuestions().filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
         }, ...(ngDevMode ? [{ debugName: "answeredCount" }] : []));
         this.totalCount = computed(() => {
             return this.filteredQuestions().length;
@@ -89519,7 +89706,9 @@ class ShopProfileQuestionsModalComponent {
                     this.moveModalToBody();
                     this.modalReady.set(true);
                     if (this.startDirectAnswer()) {
-                        const firstUnanswered = this.filteredQuestions().find(q => !q.answered);
+                        const answers = this.profileShopAnswers();
+                        const isAnswered = (q) => answers.some(a => a.profileQuestionId === q.id);
+                        const firstUnanswered = this.filteredQuestions().find(q => !isAnswered(q));
                         if (firstUnanswered) {
                             this.answerModeActive.set(true);
                             this.questionForAnswer.set(firstUnanswered);
@@ -89575,11 +89764,38 @@ class ShopProfileQuestionsModalComponent {
             this.navigationHistory.set([]);
         }
     }
-    onSaveAnswer() {
-        // Placeholder for save logic
+    onSaveAnswer(event) {
+        this.answerSave.emit(event);
+    }
+    onSaveAndNextAnswer(event) {
+        this.answerSave.emit(event);
     }
-    onSaveAndNextAnswer() {
-        // Placeholder for save and next logic
+    onNavigateToList() {
+        this.answerModeActive.set(false);
+        this.questionForAnswer.set(null);
+        this.navigationHistory.set([]);
+    }
+    onNavigateToNextQuestion() {
+        const currentQuestion = this.questionForAnswer();
+        if (currentQuestion) {
+            const questions = this.filteredQuestions();
+            const answers = this.profileShopAnswers();
+            const isAnswered = (q) => answers.some(a => a.profileQuestionId === q.id);
+            const currentIndex = questions.findIndex(q => q.id === currentQuestion.id);
+            const nextUnanswered = questions.slice(currentIndex + 1).find(q => !isAnswered(q))
+                || questions.slice(0, currentIndex).find(q => !isAnswered(q));
+            if (nextUnanswered) {
+                this.questionForAnswer.set(nextUnanswered);
+                if (nextUnanswered.id) {
+                    this.navigationHistory.set([...this.navigationHistory(), nextUnanswered.id]);
+                }
+            }
+            else {
+                this.answerModeActive.set(false);
+                this.questionForAnswer.set(null);
+                this.navigationHistory.set([]);
+            }
+        }
     }
     formatCategoryName(category) {
         return category
@@ -89696,7 +89912,7 @@ class ShopProfileQuestionsModalComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
-        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [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", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["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, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "question", "viewMode", "viewType", "profileShopAnswers", "users"], [3, "answerClick", "question", "viewMode", "viewType", "profileShopAnswers", "users"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileShopAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileShopAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [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", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["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, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "question", "viewMode", "viewType", "profileShopAnswers", "users"], [3, "answerClick", "question", "viewMode", "viewType", "profileShopAnswers", "users"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileShopAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileShopAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ShopProfileQuestionsModalComponent_Conditional_0_Template, 10, 5, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -89885,8 +90101,10 @@ class ShopProfileQuestionsModalComponent {
                     [filteredQuestions]="filteredQuestions()"
                     [profileShopAnswers]="profileShopAnswers()"
                     (backClick)="onBackFromAnswerMode()"
-                    (saveClick)="onSaveAnswer()"
-                    (saveAndNextClick)="onSaveAndNextAnswer()" />
+                    (saveClick)="onSaveAnswer($event)"
+                    (saveAndNextClick)="onSaveAndNextAnswer($event)"
+                    (navigateToList)="onNavigateToList()"
+                    (navigateToNextQuestion)="onNavigateToNextQuestion()" />
                 }
               </div>
             }
@@ -89896,14 +90114,14 @@ class ShopProfileQuestionsModalComponent {
     }
   `
             }]
-    }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], showAllQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllQuestions", required: false }] }], startDirectAnswer: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDirectAnswer", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], questionAnswerClick: [{ type: i0.Output, args: ["questionAnswerClick"] }], modalContent: [{
+    }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], showAllQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllQuestions", required: false }] }], startDirectAnswer: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDirectAnswer", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], questionAnswerClick: [{ type: i0.Output, args: ["questionAnswerClick"] }], answerSave: [{ type: i0.Output, args: ["answerSave"] }], modalContent: [{
             type: ViewChild,
             args: ['modalContent']
         }], modalWrapper: [{
             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: 199 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 201 }); })();
 
 const _c0$3 = ["chartdiv"];
 function ShopProfileStatusCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
@@ -89959,6 +90177,7 @@ class ShopProfileStatusCardComponent {
         this.startAnsweringAll = input(false, ...(ngDevMode ? [{ debugName: "startAnsweringAll" }] : []));
         this.startCategoryQuestions = output();
         this.questionAnswerRequested = output();
+        this.answerSave = output();
         this.currentView = signal('category', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
         this.questionsModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "questionsModalOpen" }] : []));
         this.selectedCategoryId = signal(null, ...(ngDevMode ? [{ debugName: "selectedCategoryId" }] : []));
@@ -90090,6 +90309,9 @@ class ShopProfileStatusCardComponent {
     onQuestionAnswerClick(question) {
         this.questionAnswerRequested.emit(question);
     }
+    onAnswerSave(event) {
+        this.answerSave.emit(event);
+    }
     formatCategoryName(category) {
         return category
             .split('_')
@@ -90260,7 +90482,7 @@ class ShopProfileStatusCardComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"], startAnsweringAll: [1, "startAnsweringAll"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested" }, decls: 27, vars: 21, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "flex-wrap", "items-center", "gap-6", "mb-8"], [1, "rounded-xl", "p-6", "flex-1", "min-w-[300px]", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 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-1"], [1, "leading-relaxed", 3, "ngClass"], [1, "flex-shrink-0"], [1, "w-[250px]", "h-[250px]"], [3, "close", "questionAnswerClick", "isOpen", "questions", "profileShopAnswers", "users", "selectedCategoryId", "selectedFocusAreaId", "showAllQuestions", "startDirectAnswer", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"], profileShopAnswers: [1, "profileShopAnswers"], users: [1, "users"], startAnsweringAll: [1, "startAnsweringAll"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested", answerSave: "answerSave" }, decls: 27, vars: 21, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "flex-wrap", "items-center", "gap-6", "mb-8"], [1, "rounded-xl", "p-6", "flex-1", "min-w-[300px]", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 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-1"], [1, "leading-relaxed", 3, "ngClass"], [1, "flex-shrink-0"], [1, "w-[250px]", "h-[250px]"], [3, "close", "questionAnswerClick", "answerSave", "isOpen", "questions", "profileShopAnswers", "users", "selectedCategoryId", "selectedFocusAreaId", "showAllQuestions", "startDirectAnswer", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5);
             i0.ɵɵnamespaceSVG();
@@ -90289,7 +90511,7 @@ class ShopProfileStatusCardComponent {
             i0.ɵɵconditionalCreate(25, ShopProfileStatusCardComponent_Conditional_25_Template, 3, 4);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(26, "symphiq-shop-profile-questions-modal", 20);
-            i0.ɵɵlistener("close", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_close_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionsModalClose()); })("questionAnswerClick", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_questionAnswerClick_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionAnswerClick($event)); });
+            i0.ɵɵlistener("close", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_close_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionsModalClose()); })("questionAnswerClick", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_questionAnswerClick_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionAnswerClick($event)); })("answerSave", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_answerSave_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAnswerSave($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -90412,14 +90634,15 @@ class ShopProfileStatusCardComponent {
       [startDirectAnswer]="startDirectAnswer()"
       [viewMode]="viewMode()"
       (close)="onQuestionsModalClose()"
-      (questionAnswerClick)="onQuestionAnswerClick($event)" />
+      (questionAnswerClick)="onQuestionAnswerClick($event)"
+      (answerSave)="onAnswerSave($event)" />
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], startAnsweringAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAnsweringAll", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], chartDiv: [{
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], startAnsweringAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAnsweringAll", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], answerSave: [{ type: i0.Output, args: ["answerSave"] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 125 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 127 }); })();
 
 function ShopProfileStickyFooterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -91266,7 +91489,7 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_8_Template(rf, ctx
 function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 30)(1, "symphiq-shop-profile-status-card", 31, 0);
-    i0.ɵɵlistener("startCategoryQuestions", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template_symphiq_shop_profile_status_card_startCategoryQuestions_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleStartCategoryQuestions($event)); });
+    i0.ɵɵlistener("startCategoryQuestions", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template_symphiq_shop_profile_status_card_startCategoryQuestions_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleStartCategoryQuestions($event)); })("answerSave", function SymphiqProfileAnalysisDashboardComponent_Conditional_9_Conditional_0_Template_symphiq_shop_profile_status_card_answerSave_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleProfileQuestionAnswerSave($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -91903,6 +92126,7 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.checkoutPlanClick = output();
         this.answerShopProfileQuestions = output();
         this.continueShopProfileQuestions = output();
+        this.profileQuestionAnswerSave = output();
         this.isCurrencySelectionLoading = signal(false, ...(ngDevMode ? [{ debugName: "isCurrencySelectionLoading" }] : []));
         this.selectedCurrency = signal(null, ...(ngDevMode ? [{ debugName: "selectedCurrency" }] : []));
         this.isPlanLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPlanLoading" }] : []));
@@ -92775,6 +92999,9 @@ class SymphiqProfileAnalysisDashboardComponent {
     handleStartCategoryQuestions(categoryId) {
         this.answerShopProfileQuestions.emit(categoryId);
     }
+    handleProfileQuestionAnswerSave(event) {
+        this.profileQuestionAnswerSave.emit(event);
+    }
     handleShopProfileContinueClick() {
         if (this.shopProfileStatusCard) {
             this.shopProfileStatusCard.openAllQuestionsAnswerMode();
@@ -92790,7 +93017,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopProfileStatusCard = _t.first);
         } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileShopAnswers: [1, "profileShopAnswers"], profileShopAnswerHistories: [1, "profileShopAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 51, consts: [["shopProfileStatusCard", ""], [1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileShopAnswers", "users"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileShopAnswers: [1, "profileShopAnswers"], profileShopAnswerHistories: [1, "profileShopAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 51, consts: [["shopProfileStatusCard", ""], [1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "answerSave", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileShopAnswers", "users"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵelement(1, "div", 2);
             i0.ɵɵelementStart(2, "div");
@@ -92991,6 +93218,7 @@ class SymphiqProfileAnalysisDashboardComponent {
                     [profileShopAnswers]="profileShopAnswers() || []"
                     [users]="users() || []"
                     (startCategoryQuestions)="handleStartCategoryQuestions($event)"
+                    (answerSave)="handleProfileQuestionAnswerSave($event)"
                 />
               </div>
             }
@@ -93557,11 +93785,11 @@ class SymphiqProfileAnalysisDashboardComponent {
         }], shopProfileStatusCard: [{
             type: ViewChild,
             args: ['shopProfileStatusCard']
-        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShop", required: false }] }], profileShopQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], profileShopAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswerHistories", required: false }] }], itemStatusProfileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileShop", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], checkoutPlanClick: [{ type: i0.Output, args: ["checkoutPlanClick"] }], answerShopProfileQuestions: [{ type: i0.Output, args: ["answerShopProfileQuestions"] }], continueShopProfileQuestions: [{ type: i0.Output, args: ["continueShopProfileQuestions"] }], onWindowScroll: [{
+        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], analysisType: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisType", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShop", required: false }] }], profileShopQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], profileShopAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswerHistories", required: false }] }], itemStatusProfileShop: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileShop", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], currencySelectionClick: [{ type: i0.Output, args: ["currencySelectionClick"] }], editCurrencyClick: [{ type: i0.Output, args: ["editCurrencyClick"] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], checkoutPlanClick: [{ type: i0.Output, args: ["checkoutPlanClick"] }], answerShopProfileQuestions: [{ type: i0.Output, args: ["answerShopProfileQuestions"] }], continueShopProfileQuestions: [{ type: i0.Output, args: ["continueShopProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], onWindowScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 769 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 771 }); })();
 
 class ScrollProgressBarComponent {
     constructor() {
@@ -94542,5 +94770,5 @@ var pieChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
 //# sourceMappingURL=symphiq-components.mjs.map