@eric-emg/symphiq-components 1.2.367 → 1.2.368

package/fesm2022/symphiq-components.mjs

@@ -88531,19 +88531,17 @@ function ShopProfileQuestionAnswerComponent_Conditional_13_Template(rf, ctx) { i
     i0.ɵɵtextInterpolate1(" Shop > ", ctx_r1.breadcrumbPath(), " ");
 } }
 function ShopProfileQuestionAnswerComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 19)(2, "p", 33);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(0, "p", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("grid-template-rows", ctx_r1.isSticky() ? "0fr" : "1fr")("opacity", ctx_r1.isSticky() ? 0 : 1);
-    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.contextTextClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.question().context, " ");
 } }
-function ShopProfileQuestionAnswerComponent_Conditional_17_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
+function ShopProfileQuestionAnswerComponent_Conditional_17_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -88554,21 +88552,20 @@ function ShopProfileQuestionAnswerComponent_Conditional_17_For_10_Template(rf, c
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r3), " ");
 } }
 function ShopProfileQuestionAnswerComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 19)(2, "div", 34)(3, "div", 35)(4, "span", 36);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 33)(2, "span", 34);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(6, "svg", 37);
-    i0.ɵɵelement(7, "path", 38);
+    i0.ɵɵelementStart(4, "svg", 35);
+    i0.ɵɵelement(5, "path", 36);
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(8, "div", 39);
-    i0.ɵɵrepeaterCreate(9, ShopProfileQuestionAnswerComponent_Conditional_17_For_10_Template, 2, 2, "span", 40, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(6, "div", 37);
+    i0.ɵɵrepeaterCreate(7, ShopProfileQuestionAnswerComponent_Conditional_17_For_8_Template, 2, 2, "span", 38, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("grid-template-rows", ctx_r1.isSticky() ? "0fr" : "1fr")("opacity", ctx_r1.isSticky() ? 0 : 1);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Related to ", ctx_r1.relatedFocusAreas().length, " focus area(s) ");
@@ -88579,10 +88576,10 @@ function ShopProfileQuestionAnswerComponent_Conditional_17_Template(rf, ctx) { i
 } }
 function ShopProfileQuestionAnswerComponent_For_21_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 16)(1, "input", 41);
+    i0.ɵɵelementStart(0, "label", 17)(1, "input", 39);
     i0.ɵɵlistener("change", function ShopProfileQuestionAnswerComponent_For_21_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)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelementStart(2, "span", 40);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -88598,7 +88595,7 @@ function ShopProfileQuestionAnswerComponent_For_21_Template(rf, ctx) { if (rf &
 } }
 function ShopProfileQuestionAnswerComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵelementStart(0, "button", 41);
     i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Conditional_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleAddOtherAnswers()); });
     i0.ɵɵtext(1, " Add other answers ");
     i0.ɵɵelementEnd();
@@ -88621,7 +88618,6 @@ class ShopProfileQuestionAnswerComponent {
         this.selectedAnswerTexts = signal([], ...(ngDevMode ? [{ debugName: "selectedAnswerTexts" }] : []));
         this.addOtherAnswersExpanded = signal(false, ...(ngDevMode ? [{ debugName: "addOtherAnswersExpanded" }] : []));
         this.customAnswerText = signal('', ...(ngDevMode ? [{ debugName: "customAnswerText" }] : []));
-        this.isSticky = signal(false, ...(ngDevMode ? [{ debugName: "isSticky" }] : []));
         this.answerOptions = computed(() => {
             const q = this.question();
             const potentialAnswers = q.potentialAnswers || [];
@@ -88681,8 +88677,6 @@ class ShopProfileQuestionAnswerComponent {
         this.saveButtonsDisabled = computed(() => {
             return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded();
         }, ...(ngDevMode ? [{ debugName: "saveButtonsDisabled" }] : []));
-        this.lastScrollTop = 0;
-        this.scrollLogCount = 0;
         // Initialize selected answers from existing profile answers
         effect(() => {
             const questionId = this.question().id;
@@ -88691,32 +88685,6 @@ class ShopProfileQuestionAnswerComponent {
                 .map(a => a.answer || '');
             this.selectedAnswerTexts.set(existingAnswers);
         });
-        // Log when isSticky changes
-        effect(() => {
-            const sticky = this.isSticky();
-            console.log(`[ScrollDebug] isSticky changed to: ${sticky}`);
-        });
-    }
-    onScroll() {
-        const container = this.scrollContainer?.nativeElement;
-        if (container) {
-            const scrollTop = container.scrollTop;
-            const scrollHeight = container.scrollHeight;
-            const clientHeight = container.clientHeight;
-            const wasSticky = this.isSticky();
-            const willBeSticky = scrollTop > 10;
-            // Detect scroll jumps (scroll position changed by more than 50px unexpectedly)
-            const scrollDelta = scrollTop - this.lastScrollTop;
-            const isJump = Math.abs(scrollDelta) > 50;
-            this.scrollLogCount++;
-            console.log(`[ScrollDebug #${this.scrollLogCount}] scrollTop: ${scrollTop.toFixed(1)}, delta: ${scrollDelta.toFixed(1)}, isJump: ${isJump}, wasSticky: ${wasSticky}, willBeSticky: ${willBeSticky}, scrollHeight: ${scrollHeight}, clientHeight: ${clientHeight}`);
-            if (isJump) {
-                console.warn(`[ScrollDebug] JUMP DETECTED! From ${this.lastScrollTop.toFixed(1)} to ${scrollTop.toFixed(1)} (delta: ${scrollDelta.toFixed(1)})`);
-                console.trace('[ScrollDebug] Stack trace for jump:');
-            }
-            this.lastScrollTop = scrollTop;
-            this.isSticky.set(willBeSticky);
-        }
     }
     toggleAnswer(text) {
         const current = this.selectedAnswerTexts();
@@ -88821,12 +88789,7 @@ class ShopProfileQuestionAnswerComponent {
             ? 'text-slate-500'
             : 'text-slate-400';
     }
-    stickyHeaderClasses() {
-        if (this.isSticky()) {
-            return this.isLightMode()
-                ? 'bg-white/95 backdrop-blur-sm'
-                : 'bg-slate-800/95 backdrop-blur-sm';
-        }
+    questionHeaderClasses() {
         return this.isLightMode()
             ? 'bg-transparent'
             : 'bg-transparent';
@@ -88922,11 +88885,9 @@ class ShopProfileQuestionAnswerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _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: 42, vars: 34, consts: [["scrollContainer", ""], [1, "flex", "flex-col", "h-full"], [1, "flex-1", "overflow-y-auto", 3, "scroll"], [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, "sticky", "top-0", "z-10", "px-6", "py-4", "transition-all", "duration-300", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "grid", "transition-[grid-template-rows,opacity]", "duration-300", "ease-in-out", 3, "grid-template-rows", "opacity"], [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, "grid", "transition-[grid-template-rows,opacity]", "duration-300", "ease-in-out"], [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"], ["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" }, decls: 42, vars: 28, consts: [["scrollContainer", ""], [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, "px-6", "py-4", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "font-bold", "text-lg", 3, "ngClass"], [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) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2, 0);
-            i0.ɵɵlistener("scroll", function ShopProfileQuestionAnswerComponent_Template_div_scroll_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll()); });
-            i0.ɵɵelementStart(3, "div", 3)(4, "h4", 4);
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2, 0)(3, "div", 3)(4, "h4", 4);
             i0.ɵɵtext(5, " Unanswered questions status ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "div", 7);
@@ -88940,37 +88901,37 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵelementStart(14, "h2", 12);
             i0.ɵɵtext(15);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(16, ShopProfileQuestionAnswerComponent_Conditional_16_Template, 4, 6, "div", 13);
-            i0.ɵɵconditionalCreate(17, ShopProfileQuestionAnswerComponent_Conditional_17_Template, 11, 7, "div", 13);
+            i0.ɵɵconditionalCreate(16, ShopProfileQuestionAnswerComponent_Conditional_16_Template, 2, 2, "p", 13);
+            i0.ɵɵconditionalCreate(17, ShopProfileQuestionAnswerComponent_Conditional_17_Template, 9, 3, "div", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 14)(19, "div", 15);
-            i0.ɵɵrepeaterCreate(20, ShopProfileQuestionAnswerComponent_For_21_Template, 4, 5, "label", 16, _forTrack0$2);
+            i0.ɵɵelementStart(18, "div", 15)(19, "div", 16);
+            i0.ɵɵrepeaterCreate(20, ShopProfileQuestionAnswerComponent_For_21_Template, 4, 5, "label", 17, _forTrack0$2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 17)(23, "div", 18)(24, "div", 19)(25, "div", 20)(26, "textarea", 21);
+            i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "div", 20)(25, "div", 21)(26, "textarea", 22);
             i0.ɵɵtwoWayListener("ngModelChange", function ShopProfileQuestionAnswerComponent_Template_textarea_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.customAnswerText, $event) || (ctx.customAnswerText = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 22)(28, "button", 23);
+            i0.ɵɵelementStart(27, "div", 23)(28, "button", 24);
             i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelCustomAnswers()); });
             i0.ɵɵtext(29, " Cancel ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "button", 24);
+            i0.ɵɵelementStart(30, "button", 25);
             i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addCustomAnswers()); });
             i0.ɵɵtext(31, " Add ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵconditionalCreate(32, ShopProfileQuestionAnswerComponent_Conditional_32_Template, 2, 1, "button", 25);
+            i0.ɵɵconditionalCreate(32, ShopProfileQuestionAnswerComponent_Conditional_32_Template, 2, 1, "button", 26);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(33, "div", 26)(34, "div", 27)(35, "button", 28);
+            i0.ɵɵelementStart(33, "div", 27)(34, "div", 28)(35, "button", 29);
             i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSave()); });
             i0.ɵɵtext(36, " Save ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "button", 29);
+            i0.ɵɵelementStart(37, "button", 30);
             i0.ɵɵlistener("click", function ShopProfileQuestionAnswerComponent_Template_button_click_37_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSaveAndNext()); });
             i0.ɵɵelementStart(38, "span");
             i0.ɵɵtext(39, "Save & next unanswered");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(40, "svg", 30);
-            i0.ɵɵelement(41, "path", 31);
+            i0.ɵɵelementStart(40, "svg", 31);
+            i0.ɵɵelement(41, "path", 32);
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -88987,12 +88948,10 @@ class ShopProfileQuestionAnswerComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate2(" ", ctx.answeredCount(), " / ", ctx.totalCount(), " answered ");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("shadow-md", ctx.isSticky());
-            i0.ɵɵproperty("ngClass", ctx.stickyHeaderClasses());
+            i0.ɵɵproperty("ngClass", ctx.questionHeaderClasses());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.viewType() !== "all" ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("text-xl", !ctx.isSticky())("text-lg", ctx.isSticky());
             i0.ɵɵproperty("ngClass", ctx.questionTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.question().question, " ");
@@ -89046,7 +89005,7 @@ class ShopProfileQuestionAnswerComponent {
                 template: `
     <div class="flex flex-col h-full">
       <!-- Scrollable Content -->
-      <div #scrollContainer class="flex-1 overflow-y-auto" (scroll)="onScroll()">
+      <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">
@@ -89067,8 +89026,8 @@ class ShopProfileQuestionAnswerComponent {
           </div>
         </div>
 
-        <!-- Sticky Question Header -->
-        <div [ngClass]="stickyHeaderClasses()" class="sticky top-0 z-10 px-6 py-4 transition-all duration-300" [class.shadow-md]="isSticky()">
+        <!-- Question Header -->
+        <div [ngClass]="questionHeaderClasses()" class="px-6 py-4">
           <!-- Breadcrumb - hide for All Questions mode -->
           @if (viewType() !== 'all') {
             <div [ngClass]="breadcrumbClasses()" class="text-sm italic mb-2">
@@ -89077,48 +89036,34 @@ class ShopProfileQuestionAnswerComponent {
           }
 
           <!-- Question -->
-          <h2 [ngClass]="questionTextClasses()" class="font-bold transition-all duration-300" [class.text-xl]="!isSticky()" [class.text-lg]="isSticky()">
+          <h2 [ngClass]="questionTextClasses()" class="font-bold text-lg">
             {{ question().question }}
           </h2>
 
-          <!-- Context - collapse smoothly when sticky -->
+          <!-- Context -->
           @if (question().context) {
-            <div
-              class="grid transition-[grid-template-rows,opacity] duration-300 ease-in-out"
-              [style.grid-template-rows]="isSticky() ? '0fr' : '1fr'"
-              [style.opacity]="isSticky() ? 0 : 1">
-              <div class="overflow-hidden min-h-0">
-                <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
-                  {{ question().context }}
-                </p>
-              </div>
-            </div>
+            <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
+              {{ question().context }}
+            </p>
           }
 
-          <!-- Related Focus Areas - collapse smoothly when sticky -->
+          <!-- Related Focus Areas -->
           @if (relatedFocusAreas().length > 0) {
-            <div
-              class="grid transition-[grid-template-rows,opacity] duration-300 ease-in-out"
-              [style.grid-template-rows]="isSticky() ? '0fr' : '1fr'"
-              [style.opacity]="isSticky() ? 0 : 1">
-              <div class="overflow-hidden min-h-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 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>
           }
@@ -89223,7 +89168,7 @@ class ShopProfileQuestionAnswerComponent {
             type: ViewChild,
             args: ['scrollContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 215 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionAnswerComponent, { className: "ShopProfileQuestionAnswerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-answer.component.ts", lineNumber: 201 }); })();
 
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];