@sd-angular/core 19.0.0-beta.86 → 19.0.0-beta.87

package/fesm2022/sd-angular-core-components-anchor.mjs

@@ -1,242 +1,147 @@
-import * as i2$1 from '@angular/common';
+import * as i1$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 { input, inject, ElementRef, effect, Component, output, ChangeDetectionStrategy, viewChild, contentChildren, booleanAttribute, signal, afterNextRender } 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 { Subject, Subscription, debounceTime, fromEvent, auditTime, map, filter, take } from 'rxjs';
+import * as i1 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;
+    title = input.required();
+    icon = input();
     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,
+    elementRef = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            if (this.title()) {
+                this.elementRef.nativeElement.removeAttribute('title');
+            }
         });
     }
-    ngOnDestroy() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", 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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchorItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", 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 } }, 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.21", 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.21", ngImport: i0, type: SdHorizontalAnchorList, deps: [{ token: AnchorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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.21", 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
-            }] } });
+            args: [{ selector: 'sd-anchor-item', imports: [CommonModule], standalone: true, 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: () => [] });
 
 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);
+    sections = input.required();
+    activeSectionId = input('');
+    ellipsis = input(false);
+    sidebarWidth = input('');
+    sdClickSection = output();
+    #delay = 200;
+    #clickSectionSubject = new Subject();
+    #subscription = new Subscription();
+    constructor() {
+        this.#subscription.add(this.#clickSectionSubject
+            .pipe(debounceTime(this.#delay))
+            .subscribe((id) => this.sdClickSection.emit(id)));
+    }
+    onClickSection = (id) => {
+        this.#clickSectionSubject.next(id);
+    };
+    ngOnDestroy() {
+        this.#subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdVerticalAnchorList, deps: [{ token: AnchorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdVerticalAnchorList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdVerticalAnchorList, isStandalone: true, selector: "sd-vertical-anchor-list", 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 } }, 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 class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\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: "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: "19.2.21", 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
-            }] } });
+            args: [{ selector: 'sd-vertical-anchor-list', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\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: () => [] });
 
 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);
+    wrapper = viewChild.required('wrapper');
+    sections = contentChildren(SdAnchorItem);
+    type = input('vertical');
+    sidebarWidth = input('200px');
+    ellipsis = input(false, { transform: booleanAttribute });
+    isOverscroll = input(false, { transform: booleanAttribute });
+    isHiddenAnchorList = input(false, { transform: booleanAttribute });
+    activeSectionId = signal('');
+    #scrollSubscription = new Subscription();
+    #clickScrollSubscription = new Subscription();
+    #delay = 100;
+    #currentScrollTop = 0;
+    #timeoutId = null;
+    constructor() {
+        afterNextRender(() => {
+            if (!this.isHiddenAnchorList()) {
+                this.activeSectionId.set(this.sections()[0]?.id ?? '');
+                this.#registerScrollSubscription();
             }
         });
     }
-    ngOnDestroy() {
-        this.#subscription?.unsubscribe();
-        this.service.destroy();
+    #registerScrollSubscription = () => {
+        this.#disposeResources();
+        const wrapperEl = this.wrapper().nativeElement;
+        this.#scrollSubscription = fromEvent(wrapperEl, 'scroll')
+            .pipe(auditTime(50))
+            .subscribe((event) => {
+            const el = event.target;
+            this.#currentScrollTop = this.#updateCurrentScroll(el);
+            for (const section of this.sections()) {
+                const rect = section.elementRef.nativeElement;
+                const rectTop = rect.offsetTop;
+                const rectBottom = rectTop + rect.offsetHeight;
+                if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {
+                    this.activeSectionId.set(section.id);
+                    break;
+                }
+            }
+        });
+    };
+    scrollSectionByClick(idSectionTarget) {
+        this.activeSectionId.set(idSectionTarget);
+        const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;
+        if (!targetSection)
+            return;
+        this.#disposeResources();
+        const wrapperEl = this.wrapper().nativeElement;
+        const targetElement = targetSection.nativeElement;
+        const prevScrollTop = this.#currentScrollTop;
+        this.#clickScrollSubscription = fromEvent(wrapperEl, 'scroll')
+            .pipe(auditTime(this.#delay), map((event) => {
+            const el = event.target;
+            this.#currentScrollTop = this.#updateCurrentScroll(el);
+            const wrapperTop = wrapperEl.getBoundingClientRect().top;
+            const targetRect = targetElement.getBoundingClientRect();
+            const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight;
+            return Math.abs(targetRect.top - wrapperTop) < 1 || isVisible;
+        }), filter(Boolean), debounceTime(this.#delay + 100), take(1))
+            .subscribe(() => this.#registerScrollSubscription());
+        this.#timeoutId = setTimeout(() => {
+            if (prevScrollTop === this.#currentScrollTop) {
+                this.#registerScrollSubscription();
+            }
+        }, this.#delay + 100);
+        wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });
     }
-    #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;
-        }
+    #updateCurrentScroll(el) {
+        const style = getComputedStyle(el);
+        return el.scrollTop + parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth);
     }
-    handleClickSectionItem(section) {
-        this.sdClickSectionItem.emit(section);
+    #disposeResources = () => {
+        if (this.#timeoutId)
+            clearTimeout(this.#timeoutId);
+        this.#scrollSubscription?.unsubscribe();
+        this.#clickScrollSubscription?.unsubscribe();
+    };
+    ngOnDestroy() {
+        this.#disposeResources();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { type: { classPropertyName: "type", publicName: "type", 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 }, isOverscroll: { classPropertyName: "isOverscroll", publicName: "isOverscroll", isSignal: true, isRequired: false, transformFunction: null }, isHiddenAnchorList: { classPropertyName: "isHiddenAnchorList", publicName: "isHiddenAnchorList", 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': !isOverscroll() }\" #wrapper>\r\n  <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (!isHiddenAnchorList()) {\r\n    <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\r\n      <sd-vertical-anchor-list\r\n        [sections]=\"sections()\"\r\n        [ellipsis]=\"ellipsis()\"\r\n        [sidebarWidth]=\"sidebarWidth()\"\r\n        [activeSectionId]=\"activeSectionId()\"\r\n        (sdClickSection)=\"scrollSectionByClick($event)\">\r\n      </sd-vertical-anchor-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SdVerticalAnchorList, selector: "sd-vertical-anchor-list", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth"], outputs: ["sdClickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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
-            }] } });
+            args: [{ selector: 'sd-anchor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SdVerticalAnchorList], standalone: true, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\r\n  <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (!isHiddenAnchorList()) {\r\n    <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\r\n      <sd-vertical-anchor-list\r\n        [sections]=\"sections()\"\r\n        [ellipsis]=\"ellipsis()\"\r\n        [sidebarWidth]=\"sidebarWidth()\"\r\n        [activeSectionId]=\"activeSectionId()\"\r\n        (sdClickSection)=\"scrollSectionByClick($event)\">\r\n      </sd-vertical-anchor-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sd-angular-core-components-anchor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-anchor.mjs","sources":["../../../projects/sd-angular/components/anchor/src/services/anchor.service.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor-horizontal/anchor-list/anchor-list.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-horizontal/anchor-list/anchor-list.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.html","../../../projects/sd-angular/components/anchor/src/components/main/main.component.ts","../../../projects/sd-angular/components/anchor/src/components/main/main.component.html","../../../projects/sd-angular/components/anchor/sd-angular-core-components-anchor.ts"],"sourcesContent":["import { BehaviorSubject, fromEvent, Subscription } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { AnchorSection } from '../models/anchor.model';\r\nimport { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';\r\n\r\nexport class AnchorService {\r\n  #sections: AnchorSection[] = [];\r\n  #activeIdSubject = new BehaviorSubject<string | null>(null);\r\n  #scrollSubscription: Subscription | null = null;\r\n  #TOP_OFFSET = 140;\r\n  #BOTTOM_OFFSET = 8;\r\n  #CANCEL_SCROLL_DELAY = 1000;\r\n  #lastProgrammaticScroll = 0;\r\n\r\n  constructor() {}\r\n\r\n  get activeIdAsObservable() {\r\n    return this.#activeIdSubject.asObservable();\r\n  }\r\n  get activeId() {\r\n    return this.#activeIdSubject.value;\r\n  }\r\n\r\n  registerSection(section: AnchorSection) {\r\n    this.#sections.push(section);\r\n    if (this.#sections.length === 1) {\r\n      this.#setActiveId(section.id);\r\n    }\r\n  }\r\n\r\n  scrollSectionToView(id: string) {\r\n    const section = this.#sections.find(s => s.id === id);\r\n    if (section) {\r\n      section.element.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n      this.#setActiveId(id);\r\n      this.#lastProgrammaticScroll = Date.now();\r\n    }\r\n  }\r\n\r\n  #setActiveId(id: string) {\r\n    this.#activeIdSubject.next(id);\r\n  }\r\n\r\n  onScroll(scrollContainer: HasEventTargetAddRemove<Event>) {\r\n    this.#scrollSubscription?.unsubscribe();\r\n    this.#scrollSubscription = fromEvent(scrollContainer, 'scroll')\r\n      .pipe(debounceTime(100))\r\n      .subscribe(() => {\r\n        // 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\r\n        if (Date.now() - this.#lastProgrammaticScroll < this.#CANCEL_SCROLL_DELAY) {\r\n          return;\r\n        }\r\n        const sections = document.querySelectorAll('sd-anchor-item');\r\n        sections.forEach(section => {\r\n          const rect = section.getBoundingClientRect();\r\n          if (rect.top <= this.#TOP_OFFSET && rect.bottom > this.#BOTTOM_OFFSET) {\r\n            const id = section.querySelector('section')?.getAttribute('data-sd-anchor-section-id')!;\r\n            this.#setActiveId(id);\r\n          }\r\n        });\r\n      });\r\n  }\r\n\r\n  destroy() {\r\n    this.#scrollSubscription?.unsubscribe();\r\n    this.#activeIdSubject.complete();\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { AnchorService } from '../../services';\r\n\r\n@Component({\r\n  selector: 'sd-anchor-item',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './anchor-item.component.html',\r\n  styleUrl: './anchor-item.component.scss',\r\n})\r\nexport class SdAnchorItem implements AfterViewInit, OnDestroy {\r\n  @Input() title!: string;\r\n  @Input() icon?: string;\r\n  id = uuidv4();\r\n\r\n  constructor(\r\n    public elementRef: ElementRef,\r\n    private service: AnchorService\r\n  ) {}\r\n\r\n  ngAfterViewInit() {\r\n    this.service.registerSection({\r\n      id: this.id,\r\n      element: this.elementRef.nativeElement,\r\n      title: this.title,\r\n    });\r\n  }\r\n\r\n  ngOnDestroy() {}\r\n}\r\n","<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","import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { AnchorService } from '../../../services';\r\nimport { SdAnchorItem } from '../../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n  selector: 'sd-horizontal-anchor-list',\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule],\r\n  templateUrl: './anchor-list.component.html',\r\n  styleUrl: './anchor-list.component.scss',\r\n})\r\nexport class SdHorizontalAnchorList implements OnInit {\r\n  @Input() sections!: QueryList<SdAnchorItem>;\r\n  activeId: string | null = null;\r\n  @Output() sdOnClickSectionItem = new EventEmitter<SdAnchorItem>();\r\n\r\n  constructor(private service: AnchorService) {}\r\n\r\n  ngOnInit() {\r\n    this.service.activeIdAsObservable.subscribe(id => (this.activeId = id));\r\n  }\r\n\r\n  onTabClick(section: SdAnchorItem) {\r\n    this.service.scrollSectionToView(section.id);\r\n    this.sdOnClickSectionItem.emit(section);\r\n  }\r\n\r\n  onWheel(event: WheelEvent, container: HTMLElement) {\r\n    if (container.scrollWidth > container.clientWidth) {\r\n      event.preventDefault();\r\n      container.scrollLeft += event.deltaY;\r\n    }\r\n  }\r\n}\r\n","<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","import { CommonModule } from '@angular/common';\r\nimport { Component, EventEmitter, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { AnchorService } from '../../../services';\r\nimport { SdAnchorItem } from '../../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n  selector: 'sd-vertical-anchor-list',\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule],\r\n  templateUrl: './anchor-list.component.html',\r\n  styleUrl: './anchor-list.component.scss',\r\n})\r\nexport class SdVerticalAnchorList implements OnInit {\r\n  @Input() sections!: QueryList<SdAnchorItem>;\r\n  @Input() width!: string;\r\n  @Input() ellipsis!:boolean\r\n  \r\n  @Output() sdOnClickSectionItem = new EventEmitter<SdAnchorItem>();\r\n  activeId: string | null = null;\r\n\r\n  constructor(private service: AnchorService) {}\r\n\r\n  ngOnInit() {\r\n    this.service.activeIdAsObservable.subscribe(id => (this.activeId = id));\r\n  }\r\n\r\n  onTabClick(section: SdAnchorItem) {\r\n    this.service.scrollSectionToView(section.id);\r\n    this.sdOnClickSectionItem.emit(section);\r\n  }\r\n}\r\n","<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","import { CommonModule } from '@angular/common';\r\nimport {\r\n  AfterViewInit,\r\n  Component,\r\n  ContentChildren,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  OnDestroy,\r\n  Output,\r\n  QueryList,\r\n  ViewChild,\r\n} from '@angular/core';\r\nimport { AnchorService } from '../../services';\r\nimport { SdHorizontalAnchorList } from '../anchor-horizontal/anchor-list/anchor-list.component';\r\nimport { SdAnchorItem } from '../anchor-item/anchor-item.component';\r\nimport { SdVerticalAnchorList } from '../anchor-vertical/anchor-list/anchor-list.component';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'sd-anchor',\r\n  templateUrl: './main.component.html',\r\n  styleUrls: ['./main.component.scss'],\r\n  imports: [CommonModule, SdVerticalAnchorList, SdHorizontalAnchorList],\r\n  providers: [AnchorService],\r\n})\r\nexport class SdAnchor implements AfterViewInit, OnDestroy {\r\n  @Input() type: 'vertical' | 'horizontal' = 'vertical';\r\n  @Input() scrollContainer?: 'parent' | HTMLElement | null = null;\r\n  @Input() width: string = '200px';\r\n  ellipsis = false;\r\n  @Input('ellipsis') set _ellipsis(value: '' | boolean | undefined | null) {\r\n    this.ellipsis = value === '' || !!value;\r\n  }\r\n  @ContentChildren(SdAnchorItem) sections!: QueryList<SdAnchorItem>;\r\n  @ViewChild('scrollContainer') scrollContainerRef!: ElementRef<HTMLElement>;\r\n\r\n  @Output() sdClickSectionItem = new EventEmitter<SdAnchorItem>();\r\n  @Output() sdSectionChange = new EventEmitter<SdAnchorItem>();\r\n\r\n  #scrollContainer: HTMLElement | Window | null = null;\r\n  #subscription: Subscription | null = null;\r\n\r\n  constructor(\r\n    private service: AnchorService,\r\n    private elementRef: ElementRef\r\n  ) {}\r\n\r\n  ngAfterViewInit() {\r\n    this.#setScrollContainer();\r\n\r\n    if (this.#scrollContainer) {\r\n      this.service.onScroll(this.#scrollContainer);\r\n    }\r\n\r\n    this.#subscription = this.service.activeIdAsObservable.subscribe(id => {\r\n      const section = this.sections.find(section => section.id === id);\r\n      if (section) {\r\n        this.sdSectionChange.emit(section);\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription?.unsubscribe();\r\n    this.service.destroy();\r\n  }\r\n\r\n  #setScrollContainer() {\r\n    if (this.scrollContainer === 'parent') {\r\n      this.#scrollContainer = this.elementRef?.nativeElement?.parentElement;\r\n    } else if (this.scrollContainer instanceof HTMLElement) {\r\n      this.#scrollContainer = this.scrollContainer;\r\n    } else {\r\n      this.#scrollContainer = this.type === 'vertical' ? window : this.scrollContainerRef?.nativeElement;\r\n    }\r\n  }\r\n\r\n  handleClickSectionItem(section: SdAnchorItem) {\r\n    this.sdClickSectionItem.emit(section);\r\n  }\r\n}\r\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuidv4","i1.AnchorService","i3","i2"],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-anchor.mjs","sources":["../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.html","../../../projects/sd-angular/components/anchor/src/components/main/main.component.ts","../../../projects/sd-angular/components/anchor/src/components/main/main.component.html","../../../projects/sd-angular/components/anchor/sd-angular-core-components-anchor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, effect, inject, input } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { IAnchorItem } from '../../models';\r\n\r\n@Component({\r\n  selector: 'sd-anchor-item',\r\n  templateUrl: './anchor-item.component.html',\r\n  styleUrls: ['./anchor-item.component.scss'],\r\n  imports: [CommonModule],\r\n  standalone: true,\r\n})\r\nexport class SdAnchorItem implements IAnchorItem {\r\n  title = input.required<string>();\r\n  icon = input<string | undefined>();\r\n  id: string = uuidv4();\r\n  elementRef = inject(ElementRef);\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      if (this.title()) {\r\n        this.elementRef.nativeElement.removeAttribute('title');\r\n      }\r\n    });\r\n  }\r\n}\r\n","<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","import { ChangeDetectionStrategy, Component, OnDestroy, input, output } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { Subject, Subscription, debounceTime } from 'rxjs';\r\nimport { SdAnchorItem } from '../../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n  selector: 'sd-vertical-anchor-list',\r\n  templateUrl: './anchor-list.component.html',\r\n  styleUrls: ['./anchor-list.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [CommonModule, MatIconModule],\r\n  standalone: true,\r\n})\r\nexport class SdVerticalAnchorList implements OnDestroy {\r\n  sections = input.required<readonly SdAnchorItem[]>();\r\n  activeSectionId = input<string>('');\r\n  ellipsis = input<boolean>(false);\r\n  sidebarWidth = input<string>('');\r\n\r\n  sdClickSection = output<string>();\r\n\r\n  #delay = 200;\r\n  #clickSectionSubject = new Subject<string>();\r\n  #subscription = new Subscription();\r\n\r\n  constructor() {\r\n    this.#subscription.add(\r\n      this.#clickSectionSubject\r\n        .pipe(debounceTime(this.#delay))\r\n        .subscribe((id: string) => this.sdClickSection.emit(id))\r\n    );\r\n  }\r\n\r\n  onClickSection = (id: string): void => {\r\n    this.#clickSectionSubject.next(id);\r\n  };\r\n\r\n  ngOnDestroy(): void {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n}\r\n","<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 class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\r\n        {{ section.title() }}\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  OnDestroy,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  contentChildren,\r\n  input,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { Subscription, auditTime, debounceTime, filter, fromEvent, map, take } from 'rxjs';\r\nimport { SdVerticalAnchorList } from '../anchor-vertical/anchor-list/anchor-list.component';\r\nimport { SdAnchorItem } from '../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n  selector: 'sd-anchor',\r\n  templateUrl: './main.component.html',\r\n  styleUrls: ['./main.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [CommonModule, SdVerticalAnchorList],\r\n  standalone: true,\r\n})\r\nexport class SdAnchor implements OnDestroy {\r\n  wrapper = viewChild.required<ElementRef>('wrapper');\r\n  sections = contentChildren(SdAnchorItem);\r\n\r\n  type = input<'vertical' | 'horizontal'>('vertical');\r\n  sidebarWidth = input<string>('200px');\r\n  ellipsis = input(false, { transform: booleanAttribute });\r\n  isOverscroll = input(false, { transform: booleanAttribute });\r\n  isHiddenAnchorList = input(false, { transform: booleanAttribute });\r\n\r\n  activeSectionId = signal<string>('');\r\n\r\n  #scrollSubscription = new Subscription();\r\n  #clickScrollSubscription = new Subscription();\r\n  #delay = 100;\r\n  #currentScrollTop = 0;\r\n  #timeoutId: ReturnType<typeof setTimeout> | null = null;\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      if (!this.isHiddenAnchorList()) {\r\n        this.activeSectionId.set(this.sections()[0]?.id ?? '');\r\n        this.#registerScrollSubscription();\r\n      }\r\n    });\r\n  }\r\n\r\n  #registerScrollSubscription = (): void => {\r\n    this.#disposeResources();\r\n    const wrapperEl = this.wrapper().nativeElement;\r\n    this.#scrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\r\n      .pipe(auditTime(50))\r\n      .subscribe((event: UIEvent) => {\r\n        const el = event.target as HTMLElement;\r\n        this.#currentScrollTop = this.#updateCurrentScroll(el);\r\n        for (const section of this.sections()) {\r\n          const rect = section.elementRef.nativeElement;\r\n          const rectTop = rect.offsetTop;\r\n          const rectBottom = rectTop + rect.offsetHeight;\r\n          if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {\r\n            this.activeSectionId.set(section.id);\r\n            break;\r\n          }\r\n        }\r\n      });\r\n  };\r\n\r\n  scrollSectionByClick(idSectionTarget: string): void {\r\n    this.activeSectionId.set(idSectionTarget);\r\n    const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;\r\n    if (!targetSection) return;\r\n\r\n    this.#disposeResources();\r\n    const wrapperEl = this.wrapper().nativeElement;\r\n    const targetElement = targetSection.nativeElement;\r\n    const prevScrollTop = this.#currentScrollTop;\r\n\r\n    this.#clickScrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\r\n      .pipe(\r\n        auditTime(this.#delay),\r\n        map((event: UIEvent) => {\r\n          const el = event.target as HTMLElement;\r\n          this.#currentScrollTop = this.#updateCurrentScroll(el);\r\n          const wrapperTop = wrapperEl.getBoundingClientRect().top;\r\n          const targetRect = targetElement.getBoundingClientRect();\r\n          const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight;\r\n          return Math.abs(targetRect.top - wrapperTop) < 1 || isVisible;\r\n        }),\r\n        filter(Boolean),\r\n        debounceTime(this.#delay + 100),\r\n        take(1)\r\n      )\r\n      .subscribe(() => this.#registerScrollSubscription());\r\n\r\n    this.#timeoutId = setTimeout(() => {\r\n      if (prevScrollTop === this.#currentScrollTop) {\r\n        this.#registerScrollSubscription();\r\n      }\r\n    }, this.#delay + 100);\r\n\r\n    wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });\r\n  }\r\n\r\n  #updateCurrentScroll(el: HTMLElement): number {\r\n    const style = getComputedStyle(el);\r\n    return el.scrollTop + parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth);\r\n  }\r\n\r\n  #disposeResources = (): void => {\r\n    if (this.#timeoutId) clearTimeout(this.#timeoutId);\r\n    this.#scrollSubscription?.unsubscribe();\r\n    this.#clickScrollSubscription?.unsubscribe();\r\n  };\r\n\r\n  ngOnDestroy(): void {\r\n    this.#disposeResources();\r\n  }\r\n}\r\n","<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\r\n  <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (!isHiddenAnchorList()) {\r\n    <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\r\n      <sd-vertical-anchor-list\r\n        [sections]=\"sections()\"\r\n        [ellipsis]=\"ellipsis()\"\r\n        [sidebarWidth]=\"sidebarWidth()\"\r\n        [activeSectionId]=\"activeSectionId()\"\r\n        (sdClickSection)=\"scrollSectionByClick($event)\">\r\n      </sd-vertical-anchor-list>\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuidv4"],"mappings":"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"}

package/fesm2022/sd-angular-core-components-avatar.mjs

@@ -88,11 +88,11 @@ class SdAvatar {
         return colors[Math.abs(hash) % colors.length];
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\r\n  @if (isUrl()) {\r\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\r\n      {{ initials() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\n  @if (isUrl()) {\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\n  } @else {\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\n      {{ initials() }}\n    </span>\n  }\n</div>\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAvatar, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\r\n  @if (isUrl()) {\r\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\r\n      {{ initials() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'sd-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\n  @if (isUrl()) {\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\n  } @else {\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\n      {{ initials() }}\n    </span>\n  }\n</div>\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [] });
 
 /**