@eric-emg/symphiq-components 1.2.510 → 1.2.512

package/fesm2022/symphiq-components.mjs

@@ -1906,13 +1906,13 @@ class MetricFormatterService {
 
 class HeaderScrollService {
     constructor() {
-        this.DEFAULT_COLLAPSE_THRESHOLD = 180;
+        this.DEFAULT_COLLAPSE_THRESHOLD = 50;
         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.DEBUG = false;
         this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
         this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.scrollTimeout = null;
@@ -1929,7 +1929,6 @@ class HeaderScrollService {
             stateChangeCooldown: this.DEFAULT_STATE_CHANGE_COOLDOWN,
             debounceDelay: this.DEFAULT_DEBOUNCE_DELAY
         };
-        console.warn('[HeaderScrollService] INITIALIZED - v2 with bounce prevention');
     }
     log(message, data) {
         if (this.DEBUG) {
@@ -2039,7 +2038,7 @@ class HeaderScrollService {
                 return;
             }
             this.stateChangeCount++;
-            console.warn('[HeaderScroll] STATE CHANGE #' + this.stateChangeCount, {
+            this.log('STATE CHANGE #' + this.stateChangeCount, {
                 from: finalCurrentState ? 'collapsed' : 'expanded',
                 to: finalDesiredState ? 'collapsed' : 'expanded',
                 finalPosition,
@@ -2087,6 +2086,100 @@ class HeaderScrollService {
             this.scrollTimeout = null;
         }
     }
+    handleEmbeddedScroll(scrollTop, collapseThreshold, expandThreshold) {
+        const now = Date.now();
+        if (this.isProgrammaticScroll) {
+            this.log('Embedded ignored: programmatic scroll', { scrollTop });
+            return;
+        }
+        const timeSinceLastChange = now - this.lastStateChangeTime;
+        if (timeSinceLastChange < this.config.stateChangeCooldown) {
+            return;
+        }
+        const scrollDelta = scrollTop - 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 = scrollTop;
+        const currentState = this.isScrolled();
+        let desiredState = currentState;
+        if (!currentState && scrollTop > collapseThreshold) {
+            desiredState = true;
+        }
+        else if (currentState && scrollTop < expandThreshold) {
+            desiredState = false;
+        }
+        if (currentState === desiredState) {
+            return;
+        }
+        const isStable = this.scrollStabilityCount >= this.STABILITY_THRESHOLD;
+        const hasConsistentDirection = this.consecutiveDirectionCount >= 3;
+        const directionMatchesIntent = (desiredState && this.scrollDirection === 'down') ||
+            (!desiredState && this.scrollDirection === 'up');
+        this.log('Embedded state change candidate', {
+            scrollTop,
+            currentState: currentState ? 'collapsed' : 'expanded',
+            desiredState: desiredState ? 'collapsed' : 'expanded',
+            stability: this.scrollStabilityCount,
+            direction: this.scrollDirection,
+            isStable,
+            hasConsistentDirection,
+            directionMatchesIntent
+        });
+        if (!isStable && !hasConsistentDirection) {
+            this.log('Embedded blocked: insufficient stability');
+            return;
+        }
+        if (!directionMatchesIntent && !isStable) {
+            this.log('Embedded blocked: direction mismatch');
+            return;
+        }
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+        this.scrollTimeout = setTimeout(() => {
+            const finalCurrentState = this.isScrolled();
+            let finalDesiredState = finalCurrentState;
+            if (!finalCurrentState && scrollTop > collapseThreshold) {
+                finalDesiredState = true;
+            }
+            else if (finalCurrentState && scrollTop < expandThreshold) {
+                finalDesiredState = false;
+            }
+            if (finalCurrentState === finalDesiredState) {
+                return;
+            }
+            this.stateChangeCount++;
+            this.log('EMBEDDED STATE CHANGE #' + this.stateChangeCount, {
+                from: finalCurrentState ? 'collapsed' : 'expanded',
+                to: finalDesiredState ? 'collapsed' : 'expanded',
+                scrollTop
+            });
+            this.isProgrammaticScroll = true;
+            this.isScrolled.set(finalDesiredState);
+            this.lastStateChangeTime = Date.now();
+            this.scrollStabilityCount = 0;
+            this.consecutiveDirectionCount = 0;
+            setTimeout(() => {
+                this.isProgrammaticScroll = false;
+                this.lastScrollPosition = scrollTop;
+            }, 400);
+        }, this.config.debounceDelay);
+    }
     static { this.ɵfac = function HeaderScrollService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HeaderScrollService)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: HeaderScrollService, factory: HeaderScrollService.ɵfac, providedIn: 'root' }); }
 }
@@ -2095,7 +2188,7 @@ class HeaderScrollService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [], null); })();
+    }], null, null); })();
 
 class IconService {
     constructor(http, sanitizer) {
@@ -95716,7 +95809,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
         this.AiDynamicContentStatusEnum = AiDynamicContentStatusEnum;
         this.ProfileAnalysisReviewStatusEnum = ProfileAnalysisReviewStatusEnum;
         this.COLLAPSE_THRESHOLD = 50;
-        this.EXPAND_THRESHOLD = 30;
+        this.EXPAND_THRESHOLD = 10;
         this.embeddedScrollEffect = effect(() => {
             const scrollEvent = this.scrollEvent();
             const isEmbedded = this.embedded();
@@ -95731,13 +95824,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                 return;
             }
             const scrollTop = detail.scrollTop || 0;
-            const currentState = this.headerScrollService.isScrolled();
-            if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
-                this.headerScrollService.isScrolled.set(true);
-            }
-            else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
-                this.headerScrollService.isScrolled.set(false);
-            }
+            this.headerScrollService.handleEmbeddedScroll(scrollTop, this.COLLAPSE_THRESHOLD, this.EXPAND_THRESHOLD);
             const scrollElement = this.scrollElement();
             if (scrollElement) {
                 const scrollHeight = scrollElement.scrollHeight || 0;