@eric-emg/symphiq-components 1.2.109 → 1.2.111

package/fesm2022/symphiq-components.mjs

@@ -24146,25 +24146,70 @@ class FloatingTocComponent {
     isSectionExpanded(sectionId) {
         return this.expandedSections().has(sectionId);
     }
+    getScrollOffset() {
+        return this.HEADER_OFFSET + this.parentHeaderOffset;
+    }
+    scrollToElement(element) {
+        const offset = this.getScrollOffset();
+        console.log('[FloatingTOC] scrollToElement', {
+            embedded: this.embedded,
+            hasScrollElement: !!this.scrollElement,
+            offset,
+            headerOffset: this.HEADER_OFFSET,
+            parentHeaderOffset: this.parentHeaderOffset
+        });
+        if (this.embedded && this.scrollElement) {
+            const scrollContainer = this.scrollElement;
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const relativeTop = elementRect.top - containerRect.top;
+            const targetScrollTop = scrollContainer.scrollTop + relativeTop - offset;
+            console.log('[FloatingTOC] Scrolling container', {
+                containerScrollTop: scrollContainer.scrollTop,
+                relativeTop,
+                targetScrollTop
+            });
+            scrollContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+        }
+        else {
+            const elementRect = element.getBoundingClientRect();
+            const targetScrollTop = window.scrollY + elementRect.top - offset;
+            console.log('[FloatingTOC] Scrolling window', {
+                windowScrollY: window.scrollY,
+                elementTop: elementRect.top,
+                targetScrollTop
+            });
+            window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+        }
+    }
     scrollToSection(sectionId) {
+        console.log('[FloatingTOC] scrollToSection called', { sectionId });
         const element = document.getElementById(`section-${sectionId}`);
         if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this.scrollToElement(element);
+        }
+        else {
+            console.warn('[FloatingTOC] Element not found for section:', sectionId);
         }
         if (!this.isPinned()) {
             this.isHovered.set(false);
         }
     }
     scrollToSubsection(subsectionId) {
+        console.log('[FloatingTOC] scrollToSubsection called', { subsectionId });
         const element = document.getElementById(`subsection-${subsectionId}`);
         if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this.scrollToElement(element);
+        }
+        else {
+            console.warn('[FloatingTOC] Element not found for subsection:', subsectionId);
         }
         if (!this.isPinned()) {
             this.isHovered.set(false);
         }
     }
     scrollToTop() {
+        console.log('[FloatingTOC] scrollToTop called', { embedded: this.embedded });
         if (this.embedded && this.scrollElement) {
             this.scrollElement.scrollTo({ top: 0, behavior: 'smooth' });
         }