import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, Component, EventEmitter, Output, ContentChildren, ViewChild } from '@angular/core';
import { v4 } from 'uuid';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { Subject, Subscription, debounceTime, fromEvent, auditTime, map, filter, take } from 'rxjs';

class SdAnchorItemV2 {
    elementRef;
    title;
    icon;
    id = v4();
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorItemV2, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdAnchorItemV2, isStandalone: true, selector: "sd-anchor-item-v2", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<section>\r\n  <ng-content></ng-content>\r\n</section>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorItemV2, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor-item-v2', imports: [CommonModule], standalone: true, template: "<section>\r\n  <ng-content></ng-content>\r\n</section>\r\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
                type: Input
            }], icon: [{
                type: Input
            }] } });

class SdAnchorVerticalListV2 {
    constructor() { }
    sections;
    activeSectionId = '';
    ellipsis;
    sidebarWidth;
    sdClickSection = new EventEmitter();
    #delay = 200;
    #clickSectionSubject = new Subject();
    #subscription = new Subscription();
    ngOnInit() {
        this.#subscription.add(this.#clickSectionSubject.pipe(debounceTime(this.#delay)).subscribe((idSectionTarget) => {
            this.sdClickSection.emit(idSectionTarget);
        }));
    }
    onClickSection = (idSectionTarget) => {
        this.#clickSectionSubject.next(idSectionTarget);
    };
    ngOnDestroy() {
        this.#subscription?.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorVerticalListV2, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAnchorVerticalListV2, isStandalone: true, selector: "sd-anchor-vertical-list-v2", inputs: { sections: "sections", activeSectionId: "activeSectionId", ellipsis: "ellipsis", sidebarWidth: "sidebarWidth" }, outputs: { sdClickSection: "sdClickSection" }, ngImport: i0, template: "<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      class=\"c-anchor-list-item\"\r\n      [class.active]=\"section.id === activeSectionId\"\r\n      (click)=\"onClickSection(section.id)\"\r\n      (keydown.enter)=\"onClickSection(section.id)\"\r\n      tabindex=\"0\">\r\n      @if (section?.icon) {\r\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section?.icon }}</mat-icon>\r\n      }\r\n      <div\r\n        class=\"c-anchor-list-item-text\"\r\n        [ngClass]=\"{\r\n          ellipsis\r\n        }\">\r\n        {{ section.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\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}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{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(--sd-primary);font-weight:700}.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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorVerticalListV2, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor-vertical-list-v2', imports: [CommonModule, MatIconModule], standalone: true, template: "<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      class=\"c-anchor-list-item\"\r\n      [class.active]=\"section.id === activeSectionId\"\r\n      (click)=\"onClickSection(section.id)\"\r\n      (keydown.enter)=\"onClickSection(section.id)\"\r\n      tabindex=\"0\">\r\n      @if (section?.icon) {\r\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section?.icon }}</mat-icon>\r\n      }\r\n      <div\r\n        class=\"c-anchor-list-item-text\"\r\n        [ngClass]=\"{\r\n          ellipsis\r\n        }\">\r\n        {{ section.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\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}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{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(--sd-primary);font-weight:700}.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: Input
            }], activeSectionId: [{
                type: Input
            }], ellipsis: [{
                type: Input
            }], sidebarWidth: [{
                type: Input
            }], sdClickSection: [{
                type: Output
            }] } });

class SdAnchorV2 {
    renderer;
    constructor(renderer) {
        this.renderer = renderer;
    }
    wrapper;
    anchorContent;
    sections; // Danh sách sd-anchor-v2 được khai báo
    type = 'vertical';
    sidebarWidth = '200px'; // Độ rộng của danh sách tiêu đề
    ellipsis = false; // Có thu gọn tiêu đề bằng dấu 3 chấm?
    set _ellipsis(value) {
        this.ellipsis = value === '' || !!value;
    }
    isOverscroll = false; // Có cho phép scroll vượt qua sd-anchor và scroll tiếp đến phần tử bên ngoài?
    set _isOverscroll(value) {
        this.isOverscroll = value === '' || !!value;
    }
    isHiddenAnchorList = false; // Có ẩn danh sách tiêu đề section hay không?
    set _isHiddenAnchorList(value) {
        this.isHiddenAnchorList = value === '' || !!value;
    }
    // RxJS
    // Note : Scroll bằng con lăn chuột hay scroll bằng click thì tại 1 thời điểm chỉ được lắng nghe 1 Rxjs
    #scrollSubscription = new Subscription(); // Scroll bằng con lăn chuột
    #clickScrollSubscription = new Subscription(); // Scroll bằng click
    // End
    // Variables Private
    #delay = 100;
    #currentScrollTop = 0;
    #timeoutId = null;
    // End
    // Variables Public
    activeSectionId = '';
    // End
    ngAfterViewInit() {
        if (!this.isHiddenAnchorList) {
            this.activeSectionId = this.sections?.first?.id ?? ''; // Active section đầu tiên
            this.#registerScrollSubscription(); // Đăng ký Rxjs Scroll bằng con lăn chuột
            this.#setWidthAnchorContent();
        }
    }
    #registerScrollSubscription = () => {
        this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ
        const wrapperEl = this.wrapper.nativeElement;
        const scroll$ = fromEvent(wrapperEl, 'scroll').pipe(debounceTime(this.#delay));
        this.#scrollSubscription = scroll$.subscribe((event) => {
            const elementTarget = event.target;
            this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Ví trí scroll hiện tại
            for (const section of this.sections) {
                // Vùng section chiếm diện tích
                const rect = section?.elementRef?.nativeElement;
                const rectTop = rect.offsetTop;
                const rectBottom = rectTop + rect.offsetHeight;
                // End
                if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {
                    this.activeSectionId = section?.id;
                    break;
                }
            }
        });
    };
    scrollSectionByClick(idSectionTarget) {
        // Khi scrollByClick sẽ có 2 case xảy ra:
        // Case 1 : Được scroll (ElementTarget không nằm trong vùng viewport và được scroll đến vị trí)
        // Case 2 : Không được scroll (ElementTarget đã được scroll trước đó hoặc đã nằm trong vùng viewport luôn)
        this.activeSectionId = idSectionTarget;
        const targetSection = this.sections.find(s => s?.id === this.activeSectionId)?.elementRef;
        if (!targetSection) {
            return;
        }
        this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ
        const wrapperEl = this.wrapper.nativeElement;
        const targetElement = targetSection.nativeElement;
        const prevScrollTop = this.#currentScrollTop; // Lưu lại ví trí trước khi scroll bởi event click
        // Case 1: Nếu được Scroll check điều kiện để đăng ký lại Rxjs Scroll bằng con lăn chuột
        const clickScrollEnd$ = fromEvent(wrapperEl, 'scroll');
        this.#clickScrollSubscription = clickScrollEnd$
            .pipe(auditTime(this.#delay), map((event) => {
            const elementTarget = event.target;
            this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Cập nhật vị trí sau mỗi lần #delay
            const wrapperTop = wrapperEl.getBoundingClientRect().top;
            const targetRect = targetElement.getBoundingClientRect();
            const targetTop = targetRect.top;
            const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight; // Nằm trong viewPort
            return Math.abs(targetTop - wrapperTop) < 1 || isVisible; // Đã được scroll tới hoặc element đã nằm trong vùng viewPort
        }), filter(Boolean), debounceTime(this.#delay + 100), take(1))
            .subscribe(() => {
            this.#registerScrollSubscription(); // Đã xác nhận scroll xong thì mới đăng ký lại Rxjs Scroll bằng con lăn chuột
        });
        // // End
        // Case 2: Nếu không được scroll thì sau (#delay + 100) đăng ký lại Rxjs Scroll bằng con lăn chuột
        this.#timeoutId = setTimeout(() => {
            if (prevScrollTop === this.#currentScrollTop) {
                this.#registerScrollSubscription();
            }
        }, this.#delay + 100);
        wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' }); // Action scroll
        // End
    }
    #updateCurrentScroll(elementTarget) {
        const style = getComputedStyle(elementTarget);
        const paddingTop = parseFloat(style.paddingTop);
        const borderTop = parseFloat(style.borderTopWidth);
        return elementTarget.scrollTop + paddingTop + borderTop; // Vị trí scroll thực tế nếu có padding, border
    }
    // Giải phóng tất cả subscription và timer đang hoạt động
    #disposeResources = () => {
        if (this.#timeoutId) {
            clearTimeout(this.#timeoutId);
        }
        this.#scrollSubscription?.unsubscribe();
        this.#clickScrollSubscription?.unsubscribe();
    };
    // Thiết lập chiều rộng nội dung phụ thuộc vào chiều rộng danh sách tiêu đề section
    #setWidthAnchorContent = () => {
        const gap = '16px'; // Khoảng cách giữa nội dung và danh sách tiêu đề section
        this.renderer.setStyle(this.anchorContent.nativeElement, 'width', `calc(100% - ${this.sidebarWidth} - ${gap})`);
    };
    ngOnDestroy() {
        this.#disposeResources();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorV2, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAnchorV2, isStandalone: true, selector: "sd-anchor-v2", inputs: { type: "type", sidebarWidth: "sidebarWidth", _ellipsis: ["ellipsis", "_ellipsis"], _isOverscroll: ["isOverscroll", "_isOverscroll"], _isHiddenAnchorList: ["isHiddenAnchorList", "_isHiddenAnchorList"] }, queries: [{ propertyName: "sections", predicate: SdAnchorItemV2 }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "anchorContent", first: true, predicate: ["anchorContent"], descendants: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll }\" #wrapper>\r\n  <!-- N\u1ED9i dung -->\r\n  <div class=\"c-anchor-content\" #anchorContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Danh s\u00E1ch ti\u00EAu \u0111\u1EC1 c\u00E1c sections-->\r\n   @if(!isHiddenAnchorList){\r\n     <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n       <sd-anchor-vertical-list-v2\r\n         [sections]=\"sections\"\r\n         [ellipsis]=\"ellipsis\"\r\n         [sidebarWidth]=\"sidebarWidth\"\r\n         [activeSectionId]=\"activeSectionId\"\r\n         (sdClickSection)=\"scrollSectionByClick($event)\">\r\n       </sd-anchor-vertical-list-v2>\r\n     </div>\r\n   }\r\n</div>\r\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{width:100%}.c-anchor-vertical .c-anchor-list{position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SdAnchorVerticalListV2, selector: "sd-anchor-vertical-list-v2", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth"], outputs: ["sdClickSection"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorV2, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor-v2', imports: [CommonModule, SdAnchorVerticalListV2], standalone: true, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll }\" #wrapper>\r\n  <!-- N\u1ED9i dung -->\r\n  <div class=\"c-anchor-content\" #anchorContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Danh s\u00E1ch ti\u00EAu \u0111\u1EC1 c\u00E1c sections-->\r\n   @if(!isHiddenAnchorList){\r\n     <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n       <sd-anchor-vertical-list-v2\r\n         [sections]=\"sections\"\r\n         [ellipsis]=\"ellipsis\"\r\n         [sidebarWidth]=\"sidebarWidth\"\r\n         [activeSectionId]=\"activeSectionId\"\r\n         (sdClickSection)=\"scrollSectionByClick($event)\">\r\n       </sd-anchor-vertical-list-v2>\r\n     </div>\r\n   }\r\n</div>\r\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{width:100%}.c-anchor-vertical .c-anchor-list{position:sticky;top:0;right:6px}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { wrapper: [{
                type: ViewChild,
                args: ['wrapper', { static: false }]
            }], anchorContent: [{
                type: ViewChild,
                args: ['anchorContent', { static: false }]
            }], sections: [{
                type: ContentChildren,
                args: [SdAnchorItemV2]
            }], type: [{
                type: Input
            }], sidebarWidth: [{
                type: Input
            }], _ellipsis: [{
                type: Input,
                args: ['ellipsis']
            }], _isOverscroll: [{
                type: Input,
                args: ['isOverscroll']
            }], _isHiddenAnchorList: [{
                type: Input,
                args: ['isHiddenAnchorList']
            }] } });

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

export { SdAnchorItemV2, SdAnchorV2 };
//# sourceMappingURL=sd-angular-core-components-anchor-v2.mjs.map
