import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, Component, EventEmitter, Output, ViewChild, ContentChildren } from '@angular/core';
import { v4 } from 'uuid';
import { BehaviorSubject, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';

class AnchorService {
    #sections = [];
    #activeIdSubject = new BehaviorSubject(null);
    #scrollSubscription = null;
    #TOP_OFFSET = 140;
    #BOTTOM_OFFSET = 8;
    #CANCEL_SCROLL_DELAY = 1000;
    #lastProgrammaticScroll = 0;
    constructor() { }
    get activeIdAsObservable() {
        return this.#activeIdSubject.asObservable();
    }
    get activeId() {
        return this.#activeIdSubject.value;
    }
    registerSection(section) {
        this.#sections.push(section);
        if (this.#sections.length === 1) {
            this.#setActiveId(section.id);
        }
    }
    scrollSectionToView(id) {
        const section = this.#sections.find(s => s.id === id);
        if (section) {
            section.element.scrollIntoView({ behavior: 'smooth', block: 'start' });
            this.#setActiveId(id);
            this.#lastProgrammaticScroll = Date.now();
        }
    }
    #setActiveId(id) {
        this.#activeIdSubject.next(id);
    }
    onScroll(scrollContainer) {
        this.#scrollSubscription?.unsubscribe();
        this.#scrollSubscription = fromEvent(scrollContainer, 'scroll')
            .pipe(debounceTime(100))
            .subscribe(() => {
            // Chặn việc sau khi scroll bằng code (bấm ở menu) và thực hiện scroll tự nhiên nhẹ nó sẽ nhảy
            if (Date.now() - this.#lastProgrammaticScroll < this.#CANCEL_SCROLL_DELAY) {
                return;
            }
            const sections = document.querySelectorAll('sd-anchor-item');
            sections.forEach(section => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= this.#TOP_OFFSET && rect.bottom > this.#BOTTOM_OFFSET) {
                    const id = section.querySelector('section')?.getAttribute('data-sd-anchor-section-id');
                    this.#setActiveId(id);
                }
            });
        });
    }
    destroy() {
        this.#scrollSubscription?.unsubscribe();
        this.#activeIdSubject.complete();
    }
}

class SdAnchorItem {
    elementRef;
    service;
    title;
    icon;
    id = v4();
    constructor(elementRef, service) {
        this.elementRef = elementRef;
        this.service = service;
    }
    ngAfterViewInit() {
        this.service.registerSection({
            id: this.id,
            element: this.elementRef.nativeElement,
            title: this.title,
        });
    }
    ngOnDestroy() { }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchorItem, deps: [{ token: i0.ElementRef }, { token: AnchorService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdAnchorItem, isStandalone: true, selector: "sd-anchor-item", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<section [attr.data-sd-anchor-section-id]=\"id\">\r\n  <ng-content [attr.data-sd-anchor-section-id]=\"id\"></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: SdAnchorItem, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor-item', standalone: true, imports: [CommonModule], template: "<section [attr.data-sd-anchor-section-id]=\"id\">\r\n  <ng-content [attr.data-sd-anchor-section-id]=\"id\"></ng-content>\r\n</section>\r\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AnchorService }], propDecorators: { title: [{
                type: Input
            }], icon: [{
                type: Input
            }] } });

class SdHorizontalAnchorList {
    service;
    sections;
    activeId = null;
    sdOnClickSectionItem = new EventEmitter();
    constructor(service) {
        this.service = service;
    }
    ngOnInit() {
        this.service.activeIdAsObservable.subscribe(id => (this.activeId = id));
    }
    onTabClick(section) {
        this.service.scrollSectionToView(section.id);
        this.sdOnClickSectionItem.emit(section);
    }
    onWheel(event, container) {
        if (container.scrollWidth > container.clientWidth) {
            event.preventDefault();
            container.scrollLeft += event.deltaY;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHorizontalAnchorList, deps: [{ token: AnchorService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdHorizontalAnchorList, isStandalone: true, selector: "sd-horizontal-anchor-list", inputs: { sections: "sections" }, outputs: { sdOnClickSectionItem: "sdOnClickSectionItem" }, ngImport: i0, template: "<div class=\"c-anchor-list\" #tabList (wheel)=\"onWheel($event, tabList)\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      [class.active]=\"section.id === activeId\"\r\n      [attr.data-sd-anchor-list-id]=\"section.id\"\r\n      (click)=\"onTabClick(section)\"\r\n      (keydown.enter)=\"onTabClick(section)\"\r\n      tabindex=\"0\"\r\n      class=\"c-anchor-list-item\">\r\n      @if (section.icon) {\r\n        <mat-icon>{{ section.icon }}</mat-icon>\r\n      }\r\n      {{ section.title }}\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:row;background-color:#fff;overflow-x:hidden}.c-anchor-list .c-anchor-list-item{border-bottom:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-bottom:2px solid var(--sd-primary);font-weight:700}.c-anchor-list .c-anchor-list-item:not(.active){border-bottom:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SdHorizontalAnchorList, decorators: [{
            type: Component,
            args: [{ selector: 'sd-horizontal-anchor-list', standalone: true, imports: [CommonModule, MatIconModule], template: "<div class=\"c-anchor-list\" #tabList (wheel)=\"onWheel($event, tabList)\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      [class.active]=\"section.id === activeId\"\r\n      [attr.data-sd-anchor-list-id]=\"section.id\"\r\n      (click)=\"onTabClick(section)\"\r\n      (keydown.enter)=\"onTabClick(section)\"\r\n      tabindex=\"0\"\r\n      class=\"c-anchor-list-item\">\r\n      @if (section.icon) {\r\n        <mat-icon>{{ section.icon }}</mat-icon>\r\n      }\r\n      {{ section.title }}\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:row;background-color:#fff;overflow-x:hidden}.c-anchor-list .c-anchor-list-item{border-bottom:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-bottom:2px solid var(--sd-primary);font-weight:700}.c-anchor-list .c-anchor-list-item:not(.active){border-bottom:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
        }], ctorParameters: () => [{ type: AnchorService }], propDecorators: { sections: [{
                type: Input
            }], sdOnClickSectionItem: [{
                type: Output
            }] } });

class SdVerticalAnchorList {
    service;
    sections;
    width;
    ellipsis;
    sdOnClickSectionItem = new EventEmitter();
    activeId = null;
    constructor(service) {
        this.service = service;
    }
    ngOnInit() {
        this.service.activeIdAsObservable.subscribe(id => (this.activeId = id));
    }
    onTabClick(section) {
        this.service.scrollSectionToView(section.id);
        this.sdOnClickSectionItem.emit(section);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdVerticalAnchorList, deps: [{ token: AnchorService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdVerticalAnchorList, isStandalone: true, selector: "sd-vertical-anchor-list", inputs: { sections: "sections", width: "width", ellipsis: "ellipsis" }, outputs: { sdOnClickSectionItem: "sdOnClickSectionItem" }, ngImport: i0, template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"width\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      [class.active]=\"section.id === activeId\"\r\n      [attr.data-sd-anchor-list-id]=\"section.id\"\r\n      (click)=\"onTabClick(section)\"\r\n      (keydown.enter)=\"onTabClick(section)\"\r\n      tabindex=\"0\"\r\n      class=\"c-anchor-list-item\">\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{position:fixed;right:6px;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.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: i2$1.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: SdVerticalAnchorList, decorators: [{
            type: Component,
            args: [{ selector: 'sd-vertical-anchor-list', standalone: true, imports: [CommonModule, MatIconModule], template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"width\">\r\n  @for (section of sections; track section.id) {\r\n    <div\r\n      [class.active]=\"section.id === activeId\"\r\n      [attr.data-sd-anchor-list-id]=\"section.id\"\r\n      (click)=\"onTabClick(section)\"\r\n      (keydown.enter)=\"onTabClick(section)\"\r\n      tabindex=\"0\"\r\n      class=\"c-anchor-list-item\">\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{position:fixed;right:6px;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.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: () => [{ type: AnchorService }], propDecorators: { sections: [{
                type: Input
            }], width: [{
                type: Input
            }], ellipsis: [{
                type: Input
            }], sdOnClickSectionItem: [{
                type: Output
            }] } });

class SdAnchor {
    service;
    elementRef;
    type = 'vertical';
    scrollContainer = null;
    width = '200px';
    ellipsis = false;
    set _ellipsis(value) {
        this.ellipsis = value === '' || !!value;
    }
    sections;
    scrollContainerRef;
    sdClickSectionItem = new EventEmitter();
    sdSectionChange = new EventEmitter();
    #scrollContainer = null;
    #subscription = null;
    constructor(service, elementRef) {
        this.service = service;
        this.elementRef = elementRef;
    }
    ngAfterViewInit() {
        this.#setScrollContainer();
        if (this.#scrollContainer) {
            this.service.onScroll(this.#scrollContainer);
        }
        this.#subscription = this.service.activeIdAsObservable.subscribe(id => {
            const section = this.sections.find(section => section.id === id);
            if (section) {
                this.sdSectionChange.emit(section);
            }
        });
    }
    ngOnDestroy() {
        this.#subscription?.unsubscribe();
        this.service.destroy();
    }
    #setScrollContainer() {
        if (this.scrollContainer === 'parent') {
            this.#scrollContainer = this.elementRef?.nativeElement?.parentElement;
        }
        else if (this.scrollContainer instanceof HTMLElement) {
            this.#scrollContainer = this.scrollContainer;
        }
        else {
            this.#scrollContainer = this.type === 'vertical' ? window : this.scrollContainerRef?.nativeElement;
        }
    }
    handleClickSectionItem(section) {
        this.sdClickSectionItem.emit(section);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchor, deps: [{ token: AnchorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { type: "type", scrollContainer: "scrollContainer", width: "width", _ellipsis: ["ellipsis", "_ellipsis"] }, outputs: { sdClickSectionItem: "sdClickSectionItem", sdSectionChange: "sdSectionChange" }, providers: [AnchorService], queries: [{ propertyName: "sections", predicate: SdAnchorItem }], viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "@if (type === 'horizontal') {\r\n  <div class=\"c-anchor-horizontal\">\r\n    <sd-horizontal-anchor-list [sections]=\"sections\" (sdOnClickSectionItem)=\"handleClickSectionItem($event)\"></sd-horizontal-anchor-list>\r\n    <div class=\"c-anchor-content\" #scrollContainer>\r\n      <ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div class=\"c-anchor-vertical\">\r\n    <div class=\"c-anchor-content\">\r\n      <ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\r\n    </div>\r\n    <div\r\n      class=\"c-anchor-list\"\r\n      [style.width]=\"width\"\r\n      >\r\n      <sd-vertical-anchor-list\r\n        [sections]=\"sections\"\r\n        (sdOnClickSectionItem)=\"handleClickSectionItem($event)\"\r\n        [width]=\"width\"\r\n        [ellipsis]=\"ellipsis\"></sd-vertical-anchor-list>\r\n    </div>\r\n  </div>\r\n}\r\n<ng-template #tempOutlet>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".c-anchor-horizontal{display:flex;flex-direction:column;height:100%;width:100%;gap:16px}.c-anchor-horizontal .c-anchor-content{flex:1;overflow-y:scroll;height:100%}.c-anchor-vertical{display:flex;height:100%;width:100%;gap:16px;position:relative}.c-anchor-vertical .c-anchor-content{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdVerticalAnchorList, selector: "sd-vertical-anchor-list", inputs: ["sections", "width", "ellipsis"], outputs: ["sdOnClickSectionItem"] }, { kind: "component", type: SdHorizontalAnchorList, selector: "sd-horizontal-anchor-list", inputs: ["sections"], outputs: ["sdOnClickSectionItem"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAnchor, decorators: [{
            type: Component,
            args: [{ selector: 'sd-anchor', imports: [CommonModule, SdVerticalAnchorList, SdHorizontalAnchorList], providers: [AnchorService], template: "@if (type === 'horizontal') {\r\n  <div class=\"c-anchor-horizontal\">\r\n    <sd-horizontal-anchor-list [sections]=\"sections\" (sdOnClickSectionItem)=\"handleClickSectionItem($event)\"></sd-horizontal-anchor-list>\r\n    <div class=\"c-anchor-content\" #scrollContainer>\r\n      <ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div class=\"c-anchor-vertical\">\r\n    <div class=\"c-anchor-content\">\r\n      <ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\r\n    </div>\r\n    <div\r\n      class=\"c-anchor-list\"\r\n      [style.width]=\"width\"\r\n      >\r\n      <sd-vertical-anchor-list\r\n        [sections]=\"sections\"\r\n        (sdOnClickSectionItem)=\"handleClickSectionItem($event)\"\r\n        [width]=\"width\"\r\n        [ellipsis]=\"ellipsis\"></sd-vertical-anchor-list>\r\n    </div>\r\n  </div>\r\n}\r\n<ng-template #tempOutlet>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".c-anchor-horizontal{display:flex;flex-direction:column;height:100%;width:100%;gap:16px}.c-anchor-horizontal .c-anchor-content{flex:1;overflow-y:scroll;height:100%}.c-anchor-vertical{display:flex;height:100%;width:100%;gap:16px;position:relative}.c-anchor-vertical .c-anchor-content{flex:1}\n"] }]
        }], ctorParameters: () => [{ type: AnchorService }, { type: i0.ElementRef }], propDecorators: { type: [{
                type: Input
            }], scrollContainer: [{
                type: Input
            }], width: [{
                type: Input
            }], _ellipsis: [{
                type: Input,
                args: ['ellipsis']
            }], sections: [{
                type: ContentChildren,
                args: [SdAnchorItem]
            }], scrollContainerRef: [{
                type: ViewChild,
                args: ['scrollContainer']
            }], sdClickSectionItem: [{
                type: Output
            }], sdSectionChange: [{
                type: Output
            }] } });

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

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