@sd-angular/core 19.0.0-beta.99 → 19.0.3

package/components/table/src/services/table-filter/table-filter.model.d.ts

@@ -1,6 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdNestedKeyOf, SdOperator, SdOrder, SdPagingReq } from '@sd-angular/core/utilities';
+import { NestedKeyOf, Operator, Order, PagingReq } from '@sdcorejs/utils/models';
 import { Observable } from 'rxjs';
 import { SdTableColumn } from '../../models/table-column.model';
 export interface SdTableQuickFilter {
@@ -12,20 +12,20 @@ export interface TableFilterConfiguration {
     inlineExternal: Record<string, boolean>;
 }
 export interface TableFilterValue {
-    columnOperator?: Record<string, SdOperator>;
+    columnOperator?: Record<string, Operator>;
     columnFilter?: Record<string, any>;
     externalFilter?: Record<string, any>;
     notReload?: boolean;
     filtered?: boolean;
 }
 export interface SdTableFilterRequest<T = any> {
-    columnOperator: Record<SdNestedKeyOf<T>, SdOperator>;
-    rawColumnFilter: Record<SdNestedKeyOf<T>, any>;
+    columnOperator: Record<NestedKeyOf<T>, Operator>;
+    rawColumnFilter: Record<NestedKeyOf<T>, any>;
     rawExternalFilter: Record<string, any>;
     pageNumber: number;
     pageSize: number;
     orderBy?: string;
-    orderDirection?: SdOrder['direction'];
+    orderDirection?: Order['direction'];
     isExported?: boolean;
     visibledColumns?: SdTableColumn[];
 }
@@ -39,7 +39,7 @@ export interface SdTableOptionFilter<T = any> {
     /** Ẩn tất cả inline filter (chỉ còn external), nếu chọn auto thì sẽ ẩn khi total row <= 10, phù hợp cho các màn detail có ít dữ liệu */
     hideInlineFilter?: boolean | 'auto';
     /** Hàm xử lý khi đổi Operator của filter column */
-    operatorChange?: (column?: SdTableColumn, operator?: SdOperator) => void;
+    operatorChange?: (column?: SdTableColumn, operator?: Operator) => void;
     /** Danh sách external filter */
     externalFilters?: SdTableExternalFilter[];
     /** Số lượng cột external filter trên mỗi hàng (mặc định: 6) */
@@ -57,8 +57,8 @@ export declare const SdConvertToPagingReq: (filterRequest: SdTableFilterRequest,
     columns?: SdTableColumn[];
     externalFilters?: SdTableExternalFilter[];
     fieldMapping?: Record<string, string>;
-    orders?: SdOrder[];
-}) => SdPagingReq;
+    orders?: Order[];
+}) => PagingReq;
 export declare type SdTableExternalFilter<TData = any> = TextFilter<TData> | DateFilter<TData> | DateTimeFilter<TData> | DateRangeFilter<TData> | NumberFilter<TData> | ValuesFilter<TData> | LazyValuesFilter<TData> | BooleanFilter<TData> | CustomFilter<TData>;
 interface BaseFilter<TData = any> {
     field: string;
@@ -66,7 +66,7 @@ interface BaseFilter<TData = any> {
     defaultShowing?: boolean;
     required?: boolean;
     hidden?: boolean;
-    defaultOperator?: SdOperator;
+    defaultOperator?: Operator;
     data?: TData;
     onChange?: (value: any) => void;
 }

package/components/table/src/services/table-filter/table-filter.service.d.ts

@@ -1,5 +1,5 @@
 import { SdStorageService } from '@sd-angular/core/services';
-import { SdOperator } from '@sd-angular/core/utilities/models';
+import { Operator } from '@sdcorejs/utils/models';
 import { SdTableFilterDefDirective } from '../../directives/sd-table-filter-def.directive';
 import { SdTableColumn } from '../../models/table-column.model';
 import { SdTableExternalFilter, SdTableOptionFilter, TableFilterRegister } from './table-filter.model';
@@ -13,7 +13,7 @@ export declare class SdTableFilterService {
         columns: SdTableColumn[] | undefined;
         externalFilters: SdTableExternalFilter[] | undefined;
         filterDefs: SdTableFilterDefDirective[] | undefined;
-        columnOperator?: Record<string, SdOperator>;
+        columnOperator?: Record<string, Operator>;
     }) => TableFilterRegister;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTableFilterService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SdTableFilterService>;

package/components/table/src/services/tree/tree.util.d.ts

@@ -1,10 +1,51 @@
-import { SdTableOptionTree } from '../../models/table-option-tree.model';
+import { SdTableOptionTree, TableOptionTreeLazy } from '../../models/table-option-tree.model';
 import { SdTableItem } from '../../models/table-item.model';
+/**
+ * Type-guard: tree có nạp children lười (lazy) hay không.
+ * Dùng để narrow discriminated union `SdTableOptionTree` một cách an toàn —
+ * thay vì truy cập `option.onExpandChildren` trực tiếp trên union (chỉ tồn tại
+ * ở nhánh lazy).
+ */
+export declare const isLazyTree: <T = any>(option?: SdTableOptionTree<T>) => option is TableOptionTreeLazy<T>;
+/**
+ * Key chứa mảng children trên object row.
+ * - `static`: lấy `childrenKey` đã cấu hình, mặc định `'children'`.
+ * - `lazy`: không có `childrenKey` riêng → luôn dùng `'children'` làm nơi lưu
+ *   kết quả nạp lười.
+ */
 export declare const getChildrenKey: (option?: SdTableOptionTree) => string;
 export declare const getChildrenFromData: <T>(data: T, option?: SdTableOptionTree) => T[];
+/**
+ * Trạng thái bung mặc định cho một cấp.
+ * Chỉ `static` mới có `defaultExpanded`; lazy luôn trả `false` (không thể bung
+ * mặc định nhánh chưa nạp).
+ */
 export declare const resolveDefaultExpanded: (level: number, option?: SdTableOptionTree) => boolean;
-export declare const resolveHasChildren: <T>(row: SdTableItem<T>, option?: SdTableOptionTree) => boolean;
+/**
+ * Row có khả năng có children hay không (để hiện nút bung).
+ * - Có children embedded → true.
+ * - Lazy tree: dùng `hasChildren(row.data)` nếu được cấu hình; không thì luôn
+ *   true (chưa biết cho tới khi nạp).
+ */
+export declare const resolveHasChildren: <T>(row: SdTableItem<T>, option?: SdTableOptionTree<T>) => boolean;
+/** Row cần nạp lười (lazy) khi bung: là lazy tree và chưa có children embedded. */
 export declare const hasLazyChildren: <T>(row: SdTableItem<T>, option?: SdTableOptionTree) => boolean;
+/**
+ * True nếu `data` HOẶC bất kỳ hậu duệ nào (theo `childrenKey`) thoả `predicate`.
+ *
+ * Dùng cho search ở cấp con (static tree, table `type: 'local'`): một nhánh
+ * gốc được giữ lại trong kết quả lọc nếu subtree của nó có ít nhất một node
+ * khớp từ khoá. `visited` chống đệ quy vô hạn khi data có circular reference.
+ */
+export declare const subtreeMatches: <T>(data: T, predicate: (data: T) => boolean, option?: SdTableOptionTree, visited?: Set<unknown>) => boolean;
+/**
+ * Lọc mảng children: chỉ giữ child có subtree khớp `predicate`.
+ *
+ * Trả về MẢNG MỚI nhưng GIỮ NGUYÊN object reference của từng child (không clone)
+ * — nhờ vậy `meta.id` (hash từ data) ổn định, selection / trạng thái bung không
+ * bị mất khi từ khoá search đổi. Đây là bước "prune" của tính năng search-con.
+ */
+export declare const filterMatchingChildren: <T>(children: T[], predicate: (data: T) => boolean, option?: SdTableOptionTree) => T[];
 export declare const flattenTree: <T>(roots: SdTableItem<T>[], option?: SdTableOptionTree, visited?: Set<string>) => SdTableItem<T>[];
 /** Thu thập mọi SdTableItem đã format trong cây (kể cả node đang collapse). */
 export declare const collectFormattedTreeRows: <T>(roots: SdTableItem<T>[]) => SdTableItem<T>[];

package/components/table/src/table.component.d.ts

@@ -5,6 +5,7 @@ import { MatTable } from '@angular/material/table';
 import { SdExcelColumn } from '@sd-angular/core/services';
 import { SdTableCellDefDirective } from './directives/sd-table-cell-def.directive';
 import { SdTableExpandDefDirective } from './directives/sd-table-expand-def.directive';
+import { SdTableGroupDefDirective, SdTableGroupDefContext } from './directives/sd-table-group-def.directive';
 import { SdTableFilterDefDirective } from './directives/sd-table-filter-def.directive';
 import { SdMaterialFooterDefDirective } from './directives/sd-table-footer-def.directive';
 import { SdTableTitleDefDirective } from './directives/sd-table-title-def.directive';
@@ -15,7 +16,7 @@ import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdQuickAction } from '@sd-angular/core/components/quick-action';
 import { SdScrollDirective } from '@sd-angular/core/directives';
-import { SdOperator } from '@sd-angular/core/utilities';
+import { Operator } from '@sdcorejs/utils/models';
 import { ExternalFilterComponent, MobileFilterComponent } from './components';
 import { ConfigComponent } from './components/config/config.component';
 import { SdPopupExport } from './components/popup-export/popup-export.component';
@@ -48,15 +49,16 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     mobileFilter: import("@angular/core").Signal<MobileFilterComponent | undefined>;
     paginator: import("@angular/core").Signal<MatPaginator | undefined>;
     sort: import("@angular/core").Signal<MatSort | undefined>;
-    sdSubInformation: import("@angular/core").Signal<SdTableExpandDefDirective | undefined>;
-    sdCellDefs: import("@angular/core").Signal<readonly SdTableCellDefDirective[]>;
-    sdFooterDefs: import("@angular/core").Signal<readonly SdMaterialFooterDefDirective[]>;
+    sdSubInformation: import("@angular/core").Signal<SdTableExpandDefDirective<any> | undefined>;
+    sdGroupDef: import("@angular/core").Signal<SdTableGroupDefDirective<any> | undefined>;
+    sdCellDefs: import("@angular/core").Signal<readonly SdTableCellDefDirective<any>[]>;
+    sdFooterDefs: import("@angular/core").Signal<readonly SdMaterialFooterDefDirective<any>[]>;
     sdFilterDefs: import("@angular/core").Signal<readonly SdTableFilterDefDirective[]>;
-    sdTitleDefs: import("@angular/core").Signal<readonly SdTableTitleDefDirective[]>;
-    cellDef: import("@angular/core").Signal<Record<string, SdTableCellDefDirective>>;
-    footerDef: import("@angular/core").Signal<Record<string, SdMaterialFooterDefDirective>>;
+    sdTitleDefs: import("@angular/core").Signal<readonly SdTableTitleDefDirective<any>[]>;
+    cellDef: import("@angular/core").Signal<Record<string, SdTableCellDefDirective<any>>>;
+    footerDef: import("@angular/core").Signal<Record<string, SdMaterialFooterDefDirective<any>>>;
     hasFooter: import("@angular/core").Signal<boolean>;
-    titleDef: import("@angular/core").Signal<Record<string, SdTableTitleDefDirective>>;
+    titleDef: import("@angular/core").Signal<Record<string, SdTableTitleDefDirective<any>>>;
     tableOption: import("@angular/core").WritableSignal<SdTableOption<T> | undefined>;
     configuration: import("@angular/core").WritableSignal<ConfiguredTableResult | undefined>;
     items: import("@angular/core").WritableSignal<SdTableItem<T>[]>;
@@ -68,7 +70,7 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     requireFiltered: import("@angular/core").WritableSignal<boolean>;
     filterRegister: TableFilterRegister;
     key: string;
-    columnOperator: Record<string, SdOperator>;
+    columnOperator: Record<string, Operator>;
     columnFilter?: Record<string, any>;
     cacheValues: Record<string, any[]>;
     treeRevision: import("@angular/core").WritableSignal<number>;
@@ -91,6 +93,29 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     onSelect: (rowData: SdTableItem<T>) => void;
     onSelectAll: () => void;
     onClearSelection: (items?: SdTableItem<T>[]) => void;
+    /** true nếu MỌI selectable child trong group đều selected. Group rỗng (không child) → false. */
+    isGroupAllSelected: (header: SdTableItem<T>) => boolean;
+    /** true nếu CÓ MỘT VÀI selectable child selected nhưng KHÔNG phải tất cả. */
+    isGroupIndeterminate: (header: SdTableItem<T>) => boolean;
+    /** Toggle select-all cho 1 group: set isSelected cho mọi selectable child, sync state. */
+    onSelectGroup: (header: SdTableItem<T>, checked: boolean) => void;
+    groupExpandState: Map<string, boolean>;
+    /** Toggle expand/collapse cho 1 group (chỉ ý nghĩa khi option.group.collapsible). */
+    toggleGroupExpand: (header: SdTableItem<T>) => void;
+    /**
+     * Predicate cho matRowDef.when — phân biệt group header row vs data row.
+     * Group header row dùng matRowDef riêng với column list ['sdGroupHeader'] (1 cell duy nhất).
+     * Data row dùng displayedColumns nguyên vẹn.
+     */
+    isGroupHeaderRow: (_idx: number, row: SdTableItem<T>) => boolean;
+    isDataRow: (_idx: number, row: SdTableItem<T>) => boolean;
+    /**
+     * Colspan cho cell sdGroupHeader trên group row = displayedColumns.length.
+     * Span TOÀN BỘ width data row vì group row chỉ có 1 cell.
+     */
+    sdGroupColspan: import("@angular/core").Signal<number>;
+    /** Build context object truyền vào SdTableGroupDefDirective template. */
+    groupContext: (header: SdTableItem<T>) => SdTableGroupDefContext<T>;
     rowStyle: (row: SdTableItem<T>, index?: number) => Record<string, string> | null;
     clearFilter: () => void;
     setFilter: (args: {
@@ -101,12 +126,12 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     get selectedItems(): T[];
     detectChanges: () => void;
     onColumnResize: (field: string, width: string) => void;
-    onOperatorChange: (column: SdTableColumn, operator: SdOperator | undefined) => void;
+    onOperatorChange: (column: SdTableColumn, operator: Operator | undefined) => void;
     trackBy: (index: number, item: SdTableItem) => string;
     pageOffset: import("@angular/core").Signal<number>;
     isReorderDisabled(item: SdTableItem<T>): boolean;
     reorderSortPredicate: (index: number, drag: CdkDrag<SdTableItem<T>>, drop: CdkDropList<SdTableItem<T>[]>) => boolean;
     onReorderDrop(event: CdkDragDrop<SdTableItem<T>[]>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; }, {}, ["sdSubInformation", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; }, {}, ["sdSubInformation", "sdGroupDef", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
 }

package/components/view/src/view.component.d.ts

@@ -1,16 +1,50 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * `<sd-view>` — pure read-only display of a value (text, hyperlink, or a custom template).
+ *
+ * Presentational proxy with no state of its own: the parent form control (`<sd-select>`,
+ * `<sd-input>`, …) computes the display string + resolved selection and passes them in;
+ * `<sd-view>` only decides WHICH template renders. It is the single rendering path for every
+ * "viewed" state across the form controls (DETAIL `viewed=true` and the `viewed='inline'`
+ * text face), so a custom `valueTemplate` (e.g. `sdViewDef` / `#sdValue`) looks identical in
+ * both. OnPush — re-renders only when an input signal changes.
+ */
 export declare class SdView {
+    /** Optional label rendered above the value (omitted when a parent supplies its own label). */
     label: import("@angular/core").InputSignal<string | null | undefined>;
+    /** Raw selected value — NOT rendered directly; only exposed in the `valueTemplate` context as `value`. */
     value: import("@angular/core").InputSignal<any>;
+    /**
+     * Display string — what shows when no custom value template is bound.
+     * why: `input.required()` forces the parent to bind `[display]` (compile error otherwise),
+     * so the component never has to guess a fallback string from `value`.
+     */
     display: import("@angular/core").InputSignal<string | null | undefined>;
+    /** When set, the value renders as a link (`<a [sdHref]>`) instead of plain text. */
     hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
+    /** Label template handed down by a parent control (wins over `label` + `#sdLabel`). */
     labelTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    /** Value template handed down by a parent control (wins over `display` + `#sdValue`). */
     valueTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    /**
+     * Resolved selected-item objects passed by the parent (e.g. `<sd-select>`).
+     * why: the parent owns option/lazy resolution — `<sd-view>` is a proxy and must NOT rebuild
+     * the list. Exposed in the value-template context so a "head +N" template can read `displayField`.
+     */
+    selectedItems: import("@angular/core").InputSignal<any[] | undefined>;
+    /** `#sdLabel` template projected directly into `<sd-view>` (fallback when no `[labelTemplate]`). */
     contentLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    /** `#sdValue` template projected directly into `<sd-view>` (fallback when no `[valueTemplate]`). */
     contentValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    /**
+     * Effective label template: input from parent wins, else the projected `#sdLabel`.
+     * why: `computed` caches the choice so the template's `@if (activeLabelTemplate())` doesn't
+     * re-evaluate two content-child reads on every change-detection pass.
+     */
     activeLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    /** Effective value template: input from parent wins, else the projected `#sdValue`. Cached for the same reason. */
     activeValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdView, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdView, "sd-view", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": true; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "labelTemplate": { "alias": "labelTemplate"; "required": false; "isSignal": true; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; "isSignal": true; }; }, {}, ["contentLabelTemplate", "contentValueTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdView, "sd-view", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": true; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "labelTemplate": { "alias": "labelTemplate"; "required": false; "isSignal": true; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; }, {}, ["contentLabelTemplate", "contentValueTemplate"], never, true, never>;
 }

package/directives/src/sd-desktop.directive.d.ts

@@ -1,9 +1,7 @@
-import { ViewContainerRef, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class SdDesktopDirective {
-    private templateRef;
-    private viewContainerRef;
-    constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef);
+    #private;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDesktopDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SdDesktopDirective, "[sdDesktop]", never, {}, {}, never, never, true, never>;
 }

package/directives/src/sd-mobile.directive.d.ts

@@ -1,9 +1,7 @@
-import { TemplateRef, ViewContainerRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class SdMobileDirective {
-    private templateRef;
-    private viewContainerRef;
-    constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef);
+    #private;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SdMobileDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SdMobileDirective, "[sdMobile]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,10 +1,10 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, effect, Component, computed, output, ChangeDetectionStrategy, viewChild, contentChildren, booleanAttribute, signal, afterNextRender } from '@angular/core';
+import { input, inject, ElementRef, effect, Component, computed, output, ChangeDetectionStrategy, viewChild, contentChildren, booleanAttribute, signal, afterNextRender, untracked } from '@angular/core';
 import { v4 } from 'uuid';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
-import { Subject, Subscription, debounceTime, fromEvent, auditTime, map, filter, take } from 'rxjs';
+import { Subject, Subscription, debounceTime, fromEvent, take } from 'rxjs';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -63,11 +63,11 @@ class AnchorNav {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AnchorNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AnchorNav, isStandalone: true, selector: "anchor-nav", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, parentAutoId: { classPropertyName: "parentAutoId", publicName: "parentAutoId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSection: "clickSection" }, ngImport: i0, template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"sidebarWidth()\"\r\n  [style.--anchor-active-color]=\"cssActiveVar()\">\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      [attr.data-autoId]=\"itemAutoId(section)\"\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(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AnchorNav, isStandalone: true, selector: "anchor-nav", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, parentAutoId: { classPropertyName: "parentAutoId", publicName: "parentAutoId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSection: "clickSection" }, ngImport: i0, template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"sidebarWidth()\"\r\n  [style.--anchor-active-color]=\"cssActiveVar()\">\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      [attr.data-autoId]=\"itemAutoId(section)\"\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;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AnchorNav, decorators: [{
             type: Component,
-            args: [{ selector: 'anchor-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule], standalone: true, template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"sidebarWidth()\"\r\n  [style.--anchor-active-color]=\"cssActiveVar()\">\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      [attr.data-autoId]=\"itemAutoId(section)\"\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(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
+            args: [{ selector: 'anchor-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule], standalone: true, template: "<div\r\n  class=\"c-anchor-list\"\r\n  [style.width]=\"sidebarWidth()\"\r\n  [style.--anchor-active-color]=\"cssActiveVar()\">\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      [attr.data-autoId]=\"itemAutoId(section)\"\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;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
         }], ctorParameters: () => [] });
 
 class SdAnchor {
@@ -84,76 +84,102 @@ class SdAnchor {
     // Màu highlight active nav (text + icon + vertical bar). Default 'primary'.
     color = input('primary');
     activeSectionId = signal('');
-    #scrollSubscription = new Subscription();
-    #clickScrollSubscription = new Subscription();
-    #delay = 100;
-    #currentScrollTop = 0;
+    #initialized = false;
+    #isClickScrolling = false;
+    #clickScrollSubscription = null;
+    #intersectionObserver = null;
+    #visibleSections = new Set();
     #timeoutId = null;
+    #timeoutScrollFallback = 200;
     constructor() {
         afterNextRender(() => {
+            this.#initialized = true;
             if (!this.hideNav()) {
-                this.activeSectionId.set(this.sections()[0]?.id ?? '');
-                this.#registerScrollSubscription();
+                this.#registerIntersectionObserver();
+            }
+        });
+        // Lắng nghe thay đổi sections để đăng ký lại observe section
+        effect(() => {
+            this.sections();
+            if (!this.hideNav() && this.#initialized) {
+                untracked(() => this.#registerIntersectionObserver());
             }
         });
     }
-    #registerScrollSubscription = () => {
-        this.#disposeResources();
+    #registerIntersectionObserver() {
+        this.#cleanIntersectionObserver();
         const wrapperEl = this.wrapper().nativeElement;
-        this.#scrollSubscription = fromEvent(wrapperEl, 'scroll')
-            .pipe(auditTime(50))
-            .subscribe((event) => {
-            const el = event.target;
-            this.#currentScrollTop = this.#updateCurrentScroll(el);
+        // Brower API IntersectionObserver sẽ hỗ trợ khi nào 1 section được hiện ra trong wrapperEl
+        this.#intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    // Nếu section mới đi vào vùng nhìn thấy -> add vào set
+                    this.#visibleSections.add(entry.target);
+                }
+                else {
+                    // Nếu section đã đi ra khỏi vùng nhìn thấy -> xóa khỏi Set
+                    this.#visibleSections.delete(entry.target);
+                }
+            }
+            // Nếu đang scroll bởi click section thì return luôn, k phải quét qua tìm vùng section được active
+            if (this.#isClickScrolling) {
+                return;
+            }
             for (const section of this.sections()) {
-                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);
+                // Kiểm tra xem DOM của section nào đang nằm trong danh sách đang nhìn thấy để active chính xác
+                if (this.#visibleSections.has(section.elementRef.nativeElement)) {
+                    if (this.activeSectionId() !== section.id) {
+                        this.activeSectionId.set(section.id);
+                    }
                     break;
                 }
             }
-        });
-    };
+        }, { root: wrapperEl, threshold: 0 });
+        // Đăng ký theo dõi từng section có trong anchor
+        for (const section of this.sections()) {
+            this.#intersectionObserver.observe(section.elementRef.nativeElement);
+        }
+    }
     scrollSectionByClick(idSectionTarget) {
         this.activeSectionId.set(idSectionTarget);
         const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;
-        if (!targetSection)
+        if (!targetSection) {
             return;
-        this.#disposeResources();
+        }
+        this.#cleanScrollSectionByClickObserver();
+        this.#isClickScrolling = true;
         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());
+        const prevScrollTop = wrapperEl.scrollTop; // Lưu lại vị trí cuộn hiện tại của container
+        const scrollTop = prevScrollTop + targetElement.getBoundingClientRect().top - wrapperEl.getBoundingClientRect().top; // Vị trí section cần scroll tới
+        // Đăng ký sự kiện nếu đã được scroll xong
+        this.#clickScrollSubscription = fromEvent(wrapperEl, 'scrollend')
+            .pipe(take(1))
+            .subscribe(() => {
+            this.#isClickScrolling = false;
+        });
+        // Nếu sectionTarget đã ở đúng vị trí (click nhưng không scroll) thì sau #timeoutScrollFallback kích hoạt lại IntersectionObserver
         this.#timeoutId = setTimeout(() => {
-            if (prevScrollTop === this.#currentScrollTop) {
-                this.#registerScrollSubscription();
+            if (wrapperEl.scrollTop === prevScrollTop) {
+                this.#isClickScrolling = false;
+                this.#clickScrollSubscription?.unsubscribe();
             }
-        }, this.#delay + 100);
-        wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });
-    }
-    #updateCurrentScroll(el) {
-        const style = getComputedStyle(el);
-        return el.scrollTop + parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth);
+        }, this.#timeoutScrollFallback);
+        wrapperEl.scrollTo({ top: scrollTop, behavior: 'smooth' });
     }
-    #disposeResources = () => {
-        if (this.#timeoutId)
+    #cleanScrollSectionByClickObserver = () => {
+        if (this.#timeoutId) {
             clearTimeout(this.#timeoutId);
-        this.#scrollSubscription?.unsubscribe();
+        }
         this.#clickScrollSubscription?.unsubscribe();
     };
+    #cleanIntersectionObserver = () => {
+        this.#intersectionObserver?.disconnect();
+        this.#visibleSections.clear();
+    };
     ngOnDestroy() {
-        this.#disposeResources();
+        this.#cleanScrollSectionByClickObserver();
+        this.#cleanIntersectionObserver();
     }
     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: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, overScroll: { classPropertyName: "overScroll", publicName: "overScroll", isSignal: true, isRequired: false, transformFunction: null }, hideNav: { classPropertyName: "hideNav", publicName: "hideNav", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !overScroll() }\" #wrapper>\r\n  <div class=\"c-anchor-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (!hideNav()) {\r\n    <div class=\"c-anchor-list\" [style.flex-basis]=\"sidebarWidth()\">\r\n      <anchor-nav\r\n        [sections]=\"sections()\"\r\n        [ellipsis]=\"ellipsis()\"\r\n        [sidebarWidth]=\"sidebarWidth()\"\r\n        [activeSectionId]=\"activeSectionId()\"\r\n        [parentAutoId]=\"autoId()\"\r\n        [color]=\"color()\"\r\n        (clickSection)=\"scrollSectionByClick($event)\">\r\n      </anchor-nav>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{flex:1 1 auto;min-width:0}.c-anchor-vertical .c-anchor-list{flex:0 0 auto;position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnchorNav, selector: "anchor-nav", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth", "parentAutoId", "color"], outputs: ["clickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });