@eric-emg/symphiq-components 1.2.373 → 1.2.375

package/fesm2022/symphiq-components.mjs

@@ -88682,6 +88682,9 @@ class ShopProfileQuestionAnswerComponent {
         this.saveButtonsDisabled = computed(() => {
             return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded();
         }, ...(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;
@@ -88703,17 +88706,37 @@ 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) => {
-                    if (!entry.isIntersecting) {
+                    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)`);
+                        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');
                         title?.classList.add('is-sticky');
                     }
                     else {
+                        console.log('[StickyDebug] Removing sticky classes');
                         header.classList.remove('shadow-md');
                         header.classList.remove('is-sticky');
                         title?.classList.remove('is-sticky');
@@ -88721,7 +88744,8 @@ class ShopProfileQuestionAnswerComponent {
                 });
             }, {
                 root: scrollRoot,
-                threshold: 0
+                threshold: 0,
+                rootMargin: '-20px 0px 0px 0px'
             });
             this.intersectionObserver.observe(sentinel);
         });