@eric-emg/symphiq-components 1.2.507 → 1.2.508

package/fesm2022/symphiq-components.mjs

@@ -1906,11 +1906,13 @@ class MetricFormatterService {
 
 class HeaderScrollService {
     constructor() {
-        this.DEFAULT_COLLAPSE_THRESHOLD = 150;
-        this.DEFAULT_EXPAND_THRESHOLD = 10;
-        this.DEFAULT_STATE_CHANGE_COOLDOWN = 400;
-        this.DEFAULT_DEBOUNCE_DELAY = 200;
+        this.DEFAULT_COLLAPSE_THRESHOLD = 180;
+        this.DEFAULT_EXPAND_THRESHOLD = 5;
+        this.DEFAULT_STATE_CHANGE_COOLDOWN = 500;
+        this.DEFAULT_DEBOUNCE_DELAY = 250;
         this.HEADER_HEIGHT_DIFF = 48;
+        this.STABILITY_THRESHOLD = 8;
+        this.DEBUG = true;
         this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.scrollTimeout = null;
@@ -1918,7 +1920,9 @@ class HeaderScrollService {
         this.isProgrammaticScroll = false;
         this.lastScrollPosition = 0;
         this.scrollStabilityCount = 0;
-        this.STABILITY_THRESHOLD = 5;
+        this.scrollDirection = 'none';
+        this.consecutiveDirectionCount = 0;
+        this.stateChangeCount = 0;
         this.config = {
             collapseThreshold: this.DEFAULT_COLLAPSE_THRESHOLD,
             expandThreshold: this.DEFAULT_EXPAND_THRESHOLD,
@@ -1926,86 +1930,158 @@ class HeaderScrollService {
             debounceDelay: this.DEFAULT_DEBOUNCE_DELAY
         };
     }
+    log(message, data) {
+        if (this.DEBUG) {
+            const timestamp = new Date().toISOString().split('T')[1];
+            console.log(`[HeaderScroll ${timestamp}] ${message}`, data ?? '');
+        }
+    }
     configure(config) {
         this.config = {
             ...this.config,
             ...config
         };
+        this.log('Configured', { config: this.config });
     }
     handleScroll(embedded = false) {
         if (embedded) {
             return;
         }
         const scrollPosition = window.scrollY;
+        const now = Date.now();
         const windowHeight = window.innerHeight;
         const documentHeight = document.documentElement.scrollHeight;
         const maxScroll = documentHeight - windowHeight;
         const progress = maxScroll > 0 ? (scrollPosition / maxScroll) * 100 : 0;
         this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
         if (this.isProgrammaticScroll) {
+            this.log('Ignored: programmatic scroll', { scrollPosition });
             return;
         }
-        const now = Date.now();
         const timeSinceLastChange = now - this.lastStateChangeTime;
         if (timeSinceLastChange < this.config.stateChangeCooldown) {
+            this.log('Ignored: cooldown active', {
+                timeSinceLastChange,
+                cooldown: this.config.stateChangeCooldown,
+                scrollPosition
+            });
             return;
         }
-        if (this.scrollTimeout) {
-            clearTimeout(this.scrollTimeout);
+        const scrollDelta = scrollPosition - this.lastScrollPosition;
+        const absScrollDelta = Math.abs(scrollDelta);
+        const newDirection = scrollDelta > 2 ? 'down' : scrollDelta < -2 ? 'up' : 'none';
+        if (newDirection !== 'none') {
+            if (newDirection === this.scrollDirection) {
+                this.consecutiveDirectionCount++;
+            }
+            else {
+                this.consecutiveDirectionCount = 1;
+                this.scrollDirection = newDirection;
+            }
+        }
+        if (absScrollDelta < 3) {
+            this.scrollStabilityCount++;
+        }
+        else {
+            this.scrollStabilityCount = 0;
         }
+        this.lastScrollPosition = scrollPosition;
         const currentState = this.isScrolled();
-        let newState = currentState;
+        let desiredState = currentState;
         if (!currentState && scrollPosition > this.config.collapseThreshold) {
-            newState = true;
+            desiredState = true;
         }
         else if (currentState && scrollPosition < this.config.expandThreshold) {
-            newState = false;
+            desiredState = false;
         }
-        const scrollDelta = Math.abs(scrollPosition - this.lastScrollPosition);
-        this.lastScrollPosition = scrollPosition;
-        if (scrollDelta < 5) {
-            this.scrollStabilityCount++;
+        if (currentState === desiredState) {
+            return;
         }
-        else {
-            this.scrollStabilityCount = 0;
+        const isStable = this.scrollStabilityCount >= this.STABILITY_THRESHOLD;
+        const hasConsistentDirection = this.consecutiveDirectionCount >= 3;
+        const directionMatchesIntent = (desiredState && this.scrollDirection === 'down') ||
+            (!desiredState && this.scrollDirection === 'up');
+        this.log('State change candidate', {
+            scrollPosition,
+            currentState: currentState ? 'collapsed' : 'expanded',
+            desiredState: desiredState ? 'collapsed' : 'expanded',
+            stability: this.scrollStabilityCount,
+            direction: this.scrollDirection,
+            directionCount: this.consecutiveDirectionCount,
+            isStable,
+            hasConsistentDirection,
+            directionMatchesIntent
+        });
+        if (!isStable && !hasConsistentDirection) {
+            this.log('Blocked: insufficient stability or direction consistency');
+            return;
         }
-        if (currentState !== newState && this.scrollStabilityCount >= this.STABILITY_THRESHOLD) {
-            this.scrollTimeout = setTimeout(() => {
-                const finalPosition = window.scrollY;
-                const finalCurrentState = this.isScrolled();
-                let finalState = finalCurrentState;
-                if (!finalCurrentState && finalPosition > this.config.collapseThreshold) {
-                    finalState = true;
-                }
-                else if (finalCurrentState && finalPosition < this.config.expandThreshold) {
-                    finalState = false;
-                }
-                if (this.isScrolled() !== finalState) {
-                    this.isProgrammaticScroll = true;
-                    this.isScrolled.set(finalState);
-                    this.lastStateChangeTime = Date.now();
-                    this.scrollStabilityCount = 0;
-                    if (finalState) {
-                        window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
-                    }
-                    setTimeout(() => {
-                        this.isProgrammaticScroll = false;
-                        this.lastScrollPosition = window.scrollY;
-                    }, 350);
-                }
-            }, this.config.debounceDelay);
+        if (!directionMatchesIntent && !isStable) {
+            this.log('Blocked: direction does not match intent and not stable');
+            return;
         }
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+        this.scrollTimeout = setTimeout(() => {
+            const finalPosition = window.scrollY;
+            const finalCurrentState = this.isScrolled();
+            let finalDesiredState = finalCurrentState;
+            if (!finalCurrentState && finalPosition > this.config.collapseThreshold) {
+                finalDesiredState = true;
+            }
+            else if (finalCurrentState && finalPosition < this.config.expandThreshold) {
+                finalDesiredState = false;
+            }
+            if (finalCurrentState === finalDesiredState) {
+                this.log('Debounce check: no change needed', { finalPosition, finalCurrentState });
+                return;
+            }
+            this.stateChangeCount++;
+            this.log('STATE CHANGE EXECUTING', {
+                stateChangeNumber: this.stateChangeCount,
+                from: finalCurrentState ? 'collapsed' : 'expanded',
+                to: finalDesiredState ? 'collapsed' : 'expanded',
+                finalPosition,
+                willCompensate: finalDesiredState
+            });
+            this.isProgrammaticScroll = true;
+            this.isScrolled.set(finalDesiredState);
+            this.lastStateChangeTime = Date.now();
+            this.scrollStabilityCount = 0;
+            this.consecutiveDirectionCount = 0;
+            if (finalDesiredState) {
+                const beforeScroll = window.scrollY;
+                window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
+                this.log('Scroll compensation applied', {
+                    before: beforeScroll,
+                    after: window.scrollY,
+                    compensation: this.HEADER_HEIGHT_DIFF
+                });
+            }
+            setTimeout(() => {
+                this.isProgrammaticScroll = false;
+                this.lastScrollPosition = window.scrollY;
+                this.log('Programmatic scroll lock released', { scrollPosition: window.scrollY });
+            }, 400);
+        }, this.config.debounceDelay);
     }
     resetHeaderState() {
+        this.log('resetHeaderState called');
         this.isProgrammaticScroll = true;
         setTimeout(() => {
             this.isProgrammaticScroll = false;
             this.isScrolled.set(false);
+            this.log('resetHeaderState complete');
         }, 800);
     }
     resetState() {
+        this.log('resetState called');
         this.isScrolled.set(false);
         this.scrollProgress.set(0);
+        this.scrollStabilityCount = 0;
+        this.consecutiveDirectionCount = 0;
+        this.scrollDirection = 'none';
         if (this.scrollTimeout) {
             clearTimeout(this.scrollTimeout);
             this.scrollTimeout = null;