import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, inject, ElementRef, effect, Component, computed, output, ChangeDetectionStrategy, viewChild, contentChildren, booleanAttribute, signal, afterNextRender, untracked } from '@angular/core';
import { v4 } from 'uuid';
import { BrowserUtilities } from '@sdcorejs/utils/fns';
import { Subject, Subscription, debounceTime, fromEvent, take } from 'rxjs';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';

class SdAnchorItem {
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
    // Stable key dùng cho data-autoId. Nếu không truyền thì fallback về uuid (không stable giữa các lần render).
    key = input(undefined, ...(ngDevMode ? [{ debugName: "key" }] : []));
    id = v4();
    elementRef = inject(ElementRef);
    constructor() {
        effect(() => {
            if (this.title()) {
                this.elementRef.nativeElement.removeAttribute('title');
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdAnchorItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: SdAnchorItem, isStandalone: true, selector: "sd-anchor-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section>\n  <ng-content></ng-content>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdAnchorItem, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor-item', imports: [CommonModule], standalone: true, template: "<section>\n  <ng-content></ng-content>\n</section>\n" }]
        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });

// eslint-disable-next-line @angular-eslint/component-class-suffix
class AnchorNav {
    sections = input.required(...(ngDevMode ? [{ debugName: "sections" }] : []));
    activeSectionId = input('', ...(ngDevMode ? [{ debugName: "activeSectionId" }] : []));
    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : []));
    sidebarWidth = input('', ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
    // autoId được forward từ <sd-anchor>. Derive per-item autoId theo `key` của item (nếu có).
    parentAutoId = input(undefined, ...(ngDevMode ? [{ debugName: "parentAutoId" }] : []));
    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
    // CSS var binding cho active state — map SdColor → global token `--sd-{color}`.
    // SCSS đọc qua `var(--anchor-active-color)` cho border + text + icon.
    cssActiveVar = computed(() => `var(--sd-${this.color()})`, ...(ngDevMode ? [{ debugName: "cssActiveVar" }] : []));
    itemAutoId(section) {
        const parent = this.parentAutoId();
        const key = section.key();
        return parent && key ? `${parent}-${key}` : undefined;
    }
    clickSection = output();
    #delay = 200;
    #clickSectionSubject = new Subject();
    #subscription = new Subscription();
    constructor() {
        this.#subscription.add(this.#clickSectionSubject
            .pipe(debounceTime(this.#delay))
            .subscribe((id) => this.clickSection.emit(id)));
    }
    onClickSection = (id) => {
        this.#clickSectionSubject.next(id);
    };
    ngOnDestroy() {
        this.#subscription.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AnchorNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AnchorNav, isStandalone: true, selector: "anchor-nav", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, parentAutoId: { classPropertyName: "parentAutoId", publicName: "parentAutoId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSection: "clickSection" }, ngImport: i0, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AnchorNav, decorators: [{
            type: Component,
            args: [{ selector: 'anchor-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule], standalone: true, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeSectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSectionId", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], sidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidth", required: false }] }], parentAutoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentAutoId", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clickSection: [{ type: i0.Output, args: ["clickSection"] }] } });

class SdAnchor {
    wrapper = viewChild.required('wrapper');
    sections = contentChildren(SdAnchorItem, ...(ngDevMode ? [{ debugName: "sections" }] : []));
    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
    autoId = computed(() => (this.autoIdInput() ? `components-anchor-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
    sidebarWidth = input('200px', ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    overScroll = input(false, ...(ngDevMode ? [{ debugName: "overScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    // Mobile: default ẩn nav (sidebar TOC chiếm chỗ trên màn hình hẹp).
    // Consumer truyền `[hideNav]="false"` để force hiện trên mobile.
    hideNav = input(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "hideNav", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    // Màu highlight active nav (text + icon + vertical bar). Default 'primary'.
    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
    activeSectionId = signal('', ...(ngDevMode ? [{ debugName: "activeSectionId" }] : []));
    #initialized = false;
    #isClickScrolling = false;
    #clickScrollSubscription = null;
    #intersectionObserver = null;
    #visibleSections = new Set();
    #timeoutId = null;
    #timeoutScrollFallback = 200;
    constructor() {
        afterNextRender(() => {
            this.#initialized = true;
            if (!this.hideNav()) {
                this.#registerIntersectionObserver();
            }
        });
        // Lắng nghe thay đổi sections để đăng ký lại observe section
        effect(() => {
            this.sections();
            if (!this.hideNav() && this.#initialized) {
                untracked(() => this.#registerIntersectionObserver());
            }
        });
    }
    #registerIntersectionObserver() {
        this.#cleanIntersectionObserver();
        const wrapperEl = this.wrapper().nativeElement;
        // Brower API IntersectionObserver sẽ hỗ trợ khi nào 1 section được hiện ra trong wrapperEl
        this.#intersectionObserver = new IntersectionObserver(entries => {
            for (const entry of entries) {
                if (entry.isIntersecting) {
                    // Nếu section mới đi vào vùng nhìn thấy -> add vào set
                    this.#visibleSections.add(entry.target);
                }
                else {
                    // Nếu section đã đi ra khỏi vùng nhìn thấy -> xóa khỏi Set
                    this.#visibleSections.delete(entry.target);
                }
            }
            // Nếu đang scroll bởi click section thì return luôn, k phải quét qua tìm vùng section được active
            if (this.#isClickScrolling) {
                return;
            }
            for (const section of this.sections()) {
                // Kiểm tra xem DOM của section nào đang nằm trong danh sách đang nhìn thấy để active chính xác
                if (this.#visibleSections.has(section.elementRef.nativeElement)) {
                    if (this.activeSectionId() !== section.id) {
                        this.activeSectionId.set(section.id);
                    }
                    break;
                }
            }
        }, { root: wrapperEl, threshold: 0 });
        // Đăng ký theo dõi từng section có trong anchor
        for (const section of this.sections()) {
            this.#intersectionObserver.observe(section.elementRef.nativeElement);
        }
    }
    scrollSectionByClick(idSectionTarget) {
        this.activeSectionId.set(idSectionTarget);
        const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;
        if (!targetSection) {
            return;
        }
        this.#cleanScrollSectionByClickObserver();
        this.#isClickScrolling = true;
        const wrapperEl = this.wrapper().nativeElement;
        const targetElement = targetSection.nativeElement;
        const prevScrollTop = wrapperEl.scrollTop; // Lưu lại vị trí cuộn hiện tại của container
        const scrollTop = prevScrollTop + targetElement.getBoundingClientRect().top - wrapperEl.getBoundingClientRect().top; // Vị trí section cần scroll tới
        // Đăng ký sự kiện nếu đã được scroll xong
        this.#clickScrollSubscription = fromEvent(wrapperEl, 'scrollend')
            .pipe(take(1))
            .subscribe(() => {
            this.#isClickScrolling = false;
        });
        // Nếu sectionTarget đã ở đúng vị trí (click nhưng không scroll) thì sau #timeoutScrollFallback kích hoạt lại IntersectionObserver
        this.#timeoutId = setTimeout(() => {
            if (wrapperEl.scrollTop === prevScrollTop) {
                this.#isClickScrolling = false;
                this.#clickScrollSubscription?.unsubscribe();
            }
        }, this.#timeoutScrollFallback);
        wrapperEl.scrollTo({ top: scrollTop, behavior: 'smooth' });
    }
    #cleanScrollSectionByClickObserver = () => {
        if (this.#timeoutId) {
            clearTimeout(this.#timeoutId);
        }
        this.#clickScrollSubscription?.unsubscribe();
    };
    #cleanIntersectionObserver = () => {
        this.#intersectionObserver?.disconnect();
        this.#visibleSections.clear();
    };
    ngOnDestroy() {
        this.#cleanScrollSectionByClickObserver();
        this.#cleanIntersectionObserver();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, overScroll: { classPropertyName: "overScroll", publicName: "overScroll", isSignal: true, isRequired: false, transformFunction: null }, hideNav: { classPropertyName: "hideNav", publicName: "hideNav", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !overScroll() }\" #wrapper>\n  <div class=\"c-anchor-content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!hideNav()) {\n    <div class=\"c-anchor-list\" [style.flex-basis]=\"sidebarWidth()\">\n      <anchor-nav\n        [sections]=\"sections()\"\n        [ellipsis]=\"ellipsis()\"\n        [sidebarWidth]=\"sidebarWidth()\"\n        [activeSectionId]=\"activeSectionId()\"\n        [parentAutoId]=\"autoId()\"\n        [color]=\"color()\"\n        (clickSection)=\"scrollSectionByClick($event)\">\n      </anchor-nav>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{flex:1 1 auto;min-width:0}.c-anchor-vertical .c-anchor-list{flex:0 0 auto;position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnchorNav, selector: "anchor-nav", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth", "parentAutoId", "color"], outputs: ["clickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdAnchor, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AnchorNav], standalone: true, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !overScroll() }\" #wrapper>\n  <div class=\"c-anchor-content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!hideNav()) {\n    <div class=\"c-anchor-list\" [style.flex-basis]=\"sidebarWidth()\">\n      <anchor-nav\n        [sections]=\"sections()\"\n        [ellipsis]=\"ellipsis()\"\n        [sidebarWidth]=\"sidebarWidth()\"\n        [activeSectionId]=\"activeSectionId()\"\n        [parentAutoId]=\"autoId()\"\n        [color]=\"color()\"\n        (clickSection)=\"scrollSectionByClick($event)\">\n      </anchor-nav>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{flex:1 1 auto;min-width:0}.c-anchor-vertical .c-anchor-list{flex:0 0 auto;position:sticky;top:0;right:6px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdAnchorItem), { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidth", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], overScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "overScroll", required: false }] }], hideNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNav", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SdAnchor, SdAnchorItem };
//# sourceMappingURL=sdcorejs-angular-components-anchor.mjs.map
