@sdcorejs/angular 20.0.10 → 20.1.0

package/assets/scss/themes/material-theme.scss

@@ -1,101 +1,22 @@
 @use '@angular/material' as mat;
-@use './default.scss' as default;
-@use 'sass:map';
 
-// --------------------------------------------------
-// Palette M2 — generated từ hex color
-// --------------------------------------------------
-$custom-primary-palette: mat.m2-define-palette(
-  (
-    50: #f0f1f5,
-    100: #d7dcea,
-    200: #abbce3,
-    300: #6e90e3,
-    400: #346aea,
-    500: #2a66f4,
-    600: #0645db,
-    700: #0131a3,
-    800: #00216d,
-    900: #001546,
-    contrast: (
-      400: white,
-      500: white,
-      600: white,
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-$custom-accent-palette: mat.m2-define-palette(
-  (
-    50: #f1f3f1,
-    100: #dce5dd,
-    200: #bbd3bc,
-    300: #8fc291,
-    400: #67b76a,
-    500: #4caf50,
-    600: #3a8c3d,
-    700: #29692c,
-    800: #1c471e,
-    900: #132f14,
-    contrast: (
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-$custom-warn-palette: mat.m2-define-palette(
-  (
-    50: #f5f0f0,
-    100: #ead9d6,
-    200: #e4b0aa,
-    300: #e6786b,
-    400: #ee4430,
-    500: #f82c13,
-    600: #d11801,
-    700: #9a1100,
-    800: #680b00,
-    900: #440700,
-    contrast: (
-      600: white,
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-// --------------------------------------------------
-// Theme
-// --------------------------------------------------
-$custom-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $custom-primary-palette,
-      accent: $custom-accent-palette,
-      warn: $custom-warn-palette,
-    ),
-    density: -3,
-  )
-);
-
-@include mat.all-component-themes($custom-theme);
-
-// Fix paginator density riêng về 0 để không bị lệch
 html {
+  color-scheme: light;
+
   @include mat.theme(
     (
       color: (
         theme-type: light,
         primary: mat.$azure-palette,
-        tertiary: mat.$blue-palette,
+        tertiary: mat.$green-palette,
       ),
       typography: Roboto,
       density: 0,
     )
   );
 }
+
+body {
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+}

package/components/badge/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { EventEmitter } from '@angular/core';
+import { SdIconSet } from '@sdcorejs/angular/modules/icon';
 import { Color, Size } from '@sdcorejs/utils/models';
-import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
 
 type SdBadgeType = 'tag' | 'round' | 'icon';
 declare class SdBadge {
@@ -14,7 +14,7 @@ declare class SdBadge {
     info: _angular_core.InputSignalWithTransform<boolean, unknown>;
     warning: _angular_core.InputSignalWithTransform<boolean, unknown>;
     error: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    fontSet: _angular_core.InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    fontSet: _angular_core.InputSignalWithTransform<SdIconSet | undefined, SdIconSet | null | undefined>;
     title: _angular_core.InputSignal<string | number | null | undefined>;
     description: _angular_core.InputSignal<string | null | undefined>;
     tooltip: _angular_core.InputSignal<string | null | undefined>;
@@ -33,7 +33,7 @@ declare class SdBadge {
     }>;
     iconColorClasses: _angular_core.Signal<{
         'c-primary': boolean;
-        'c-black400': boolean;
+        'c-secondary': boolean;
         'c-info': boolean;
         'c-success': boolean;
         'c-warning': boolean;
@@ -43,11 +43,8 @@ declare class SdBadge {
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
-        'material-icons': boolean;
-        'material-icons-outlined': boolean;
-        'material-icons-round': boolean;
-        'material-icons-sharp': boolean;
     }>;
+    iconCssSize: _angular_core.Signal<"18px" | "24px" | "16px">;
     containerSizeClasses: _angular_core.Signal<{
         'c-badge--sm': boolean;
         'c-badge--md': boolean;
@@ -63,10 +60,6 @@ declare class SdBadge {
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
-        'material-icons': boolean;
-        'material-icons-outlined': boolean;
-        'material-icons-round': boolean;
-        'material-icons-sharp': boolean;
     }>;
     containerCombinedClasses: _angular_core.Signal<{
         'c-badge--sm': boolean;
@@ -81,7 +74,7 @@ declare class SdBadge {
     }>;
     iconCombinedClasses: _angular_core.Signal<{
         'c-primary': boolean;
-        'c-black400': boolean;
+        'c-secondary': boolean;
         'c-info': boolean;
         'c-success': boolean;
         'c-warning': boolean;
@@ -89,10 +82,6 @@ declare class SdBadge {
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
-        'material-icons': boolean;
-        'material-icons-outlined': boolean;
-        'material-icons-round': boolean;
-        'material-icons-sharp': boolean;
     }>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdBadge, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "warning": { "alias": "warning"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;

package/components/button/index.d.ts

@@ -1,19 +1,20 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy } from '@angular/core';
 import { Color } from '@sdcorejs/utils/models';
-import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { SdIconSet } from '@sdcorejs/angular/modules/icon';
 
-type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
+type SdButtonType = 'fill' | 'light' | 'outline' | 'text';
 type SdButtonSize = 'sm' | 'md' | 'lg';
 type SdButtonHtmlType = 'button' | 'submit' | 'reset';
+type SdButtonColor = Color | 'black';
 declare class SdButton implements OnInit, OnDestroy {
     #private;
     private el;
     autoIdInput: _angular_core.InputSignal<string | null | undefined>;
     type: _angular_core.InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
-    color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
+    color: _angular_core.InputSignalWithTransform<SdButtonColor, SdButtonColor | null | undefined>;
     size: _angular_core.InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
-    fontSet: _angular_core.InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    fontSet: _angular_core.InputSignalWithTransform<SdIconSet | undefined, SdIconSet | null | undefined>;
     title: _angular_core.InputSignal<string | null | undefined>;
     width: _angular_core.InputSignal<string | null | undefined>;
     tooltip: _angular_core.InputSignal<string | null | undefined>;
@@ -29,6 +30,7 @@ declare class SdButton implements OnInit, OnDestroy {
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
+        'c-black': boolean;
         'c-disabled': boolean;
         'c-block': boolean;
     }>;
@@ -42,4 +44,4 @@ declare class SdButton implements OnInit, OnDestroy {
 }
 
 export { SdButton };
-export type { SdButtonHtmlType, SdButtonSize, SdButtonType };
+export type { SdButtonColor, SdButtonHtmlType, SdButtonSize, SdButtonType };

package/components/inform/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { Color } from '@sdcorejs/utils/models';
-import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { SdIconSet } from '@sdcorejs/angular/modules/icon';
 
 /**
  * Marker cho vùng action custom chiếu vào <sd-inform>.
@@ -25,7 +25,7 @@ declare class SdInform {
     description: _angular_core.InputSignal<string | undefined>;
     icon: _angular_core.InputSignal<string | undefined>;
     hideIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    fontSet: _angular_core.InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    fontSet: _angular_core.InputSignalWithTransform<SdIconSet | undefined, SdIconSet | null | undefined>;
     closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     actionLabel: _angular_core.InputSignal<string | undefined>;
     lineClamp: _angular_core.InputSignal<number | undefined>;
@@ -47,12 +47,6 @@ declare class SdInform {
         'c-error': boolean;
     }>;
     effectiveIcon: _angular_core.Signal<string | null>;
-    fontSetClasses: _angular_core.Signal<{
-        'material-icons': boolean;
-        'material-icons-outlined': boolean;
-        'material-icons-round': boolean;
-        'material-icons-sharp': boolean;
-    }>;
     hasActionSlot: _angular_core.Signal<boolean>;
     clampLines: _angular_core.Signal<number | null>;
     showToggle: _angular_core.Signal<boolean>;

package/components/modal/index.d.ts

@@ -27,7 +27,7 @@ declare class SdModal {
     open: () => void;
     close: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdModal, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "[sdHeader]", "*", "[sdFooterLeft]", "[sdFooterRight]", "[sdFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooterLeft]", "[sdFooterRight]"], true, never>;
 }
 
 export { SdModal };

package/components/query-builder/index.d.ts

@@ -150,7 +150,7 @@ interface QbDateModeOption {
     icon: string;
 }
 /** Stable option list for the date-mode select (module ref — never reallocated). */
-declare const QB_DATE_MODES: readonly QbDateModeOption[];
+declare const QB_DATE_MODES: QbDateModeOption[];
 /** One value-source option for field-to-field comparison UI. */
 interface QbValueSourceOption {
     value: QbValueSource;
@@ -159,9 +159,9 @@ interface QbValueSourceOption {
     icon: string;
 }
 /** Stable option list for choosing between a literal value and another field. */
-declare const QB_VALUE_SOURCE_OPTIONS: readonly QbValueSourceOption[];
+declare const QB_VALUE_SOURCE_OPTIONS: QbValueSourceOption[];
 /** Stable combined direction×unit option list (token `'unit:direction'`). */
-declare const QB_RELATIVE_UNIT_OPTIONS: readonly {
+declare const QB_RELATIVE_UNIT_OPTIONS: {
     value: string;
     display: string;
 }[];
@@ -204,11 +204,11 @@ declare class SdQueryBuilder {
     readonly resolvedAutoId: _angular_core.Signal<string | undefined>;
     readonly fieldByKey: _angular_core.Signal<Record<string, SdQueryBuilderField>>;
     /** Stable option list for the date-mode select. */
-    readonly dateModes: readonly _sdcorejs_angular_components_query_builder.QbDateModeOption[];
+    readonly dateModes: _sdcorejs_angular_components_query_builder.QbDateModeOption[];
     /** Stable option list for the literal-vs-field operand select. */
-    readonly valueSourceOptions: readonly _sdcorejs_angular_components_query_builder.QbValueSourceOption[];
+    readonly valueSourceOptions: _sdcorejs_angular_components_query_builder.QbValueSourceOption[];
     /** Stable combined unit×direction option list for the relative select. */
-    readonly relativeUnitOptions: readonly {
+    readonly relativeUnitOptions: {
         value: string;
         display: string;
     }[];

package/components/section/index.d.ts

@@ -9,15 +9,11 @@ declare class SdSection {
     iconColor: _angular_core.InputSignal<Color>;
     collapsed: _angular_core.ModelSignal<boolean>;
     collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** @deprecated Use `collapsible` instead. */
-    collapsable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly isCollapsible: _angular_core.Signal<boolean>;
     hideHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    noPaddingBody: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
     toggleCollapse: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSection, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooterLeft]", "[sdFooterRight]"], true, never>;
 }
 
 declare class SdSectionItem {

package/components/side-drawer/index.d.ts

@@ -26,7 +26,7 @@ declare class SdSideDrawer {
     stopLoading: () => void;
     preventScroll: (event: Event) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSideDrawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSideDrawer, "sd-side-drawer", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; "drawerClass": { "alias": "drawerClass"; "required": false; "isSignal": true; }; "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSideDrawer, "sd-side-drawer", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; "drawerClass": { "alias": "drawerClass"; "required": false; "isSignal": true; }; "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooterLeft]", "[sdFooterRight]"], true, never>;
 }
 
 export { SdSideDrawer };

package/components/table/index.d.ts

@@ -3,12 +3,13 @@ import { TemplateRef, Signal, EventEmitter, ChangeDetectorRef, InjectionToken, A
 import { SdBadge } from '@sdcorejs/angular/components/badge';
 import { SdSearch } from '@sdcorejs/angular/forms';
 import { Operator, NestedKeyOf, Order, PagingReq, Color } from '@sdcorejs/utils/models';
-import { SdUnwrapSignal, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
 import { MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
 import { SdExcelColumn, SdLoadingService, SdExcelService, SdNotifyService, SdConfirmService } from '@sdcorejs/angular/services';
 import { Observable } from 'rxjs';
+import { SdIconSet } from '@sdcorejs/angular/modules/icon';
 import { SdButton } from '@sdcorejs/angular/components/button';
 import { CdkDrag, CdkDropList, CdkDragDrop } from '@angular/cdk/drag-drop';
 import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
@@ -341,8 +342,6 @@ interface SdTableOptionFilter<T = any> {
     manualFilter?: boolean;
     /** Có thể thu gọn bộ lọc hay không */
     collapsible?: boolean;
-    /** @deprecated Use `collapsible` instead. */
-    collapsable?: boolean;
     /** Ẩn toolbar (xóa bộ lọc, thiết lập) của external filter, khi có ít external filter user không cần chức năng này */
     hideExternalFilterToolbar?: boolean;
     /** Hàm xử lý khi trigger clear filter từ external filter */
@@ -451,7 +450,7 @@ type SdTableCommand<T = any> = SdTableCommandNormal<T> | SdTableCommandChildren<
 interface SdTableCommandNormal<T = any> {
     color?: Color;
     icon?: string | ((rowData: T) => string);
-    fontSet?: MaterialIconFontSet;
+    fontSet?: SdIconSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
@@ -460,7 +459,7 @@ interface SdTableCommandNormal<T = any> {
 }
 interface SdTableCommandChildren<T = any> {
     icon?: string | ((rowData: T) => string);
-    fontSet?: MaterialIconFontSet;
+    fontSet?: SdIconSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
@@ -635,13 +634,13 @@ type SdTableAction<T = any> = SdTableActionNormal<T> | SdTableActionChildren<T>;
 interface SdTableActionNormal<T = any> {
     /**
      * Tên icon hiển thị trên action button.
-     * Giá trị này được render qua `mat-icon`, vì vậy nên dùng đúng tên glyph của Material Icons.
+     * Giá trị này được render qua `sd-icon`, vì vậy nên dùng đúng tên glyph của configured icon set.
      * Tra cứu icon tại: https://fonts.google.com/icons
      */
     icon?: string;
     /**
-     * Font set của Material icon.
-     * Kiểu thực tế lấy từ `SdButton['fontSet']` và chỉ hỗ trợ các giá trị thuộc `MaterialIconFontSet`,
+     * Font set của icon.
+     * Kiểu thực tế lấy từ `SdButton['fontSet']` và chỉ hỗ trợ các giá trị thuộc `SdIconSet`,
      * ví dụ: `material-icons`, `material-icons-outlined`, `material-icons-round`,
      * `material-icons-sharp`.
      * Nếu không truyền, `SdButton` sẽ dùng font set mặc định của nó.
@@ -672,11 +671,11 @@ interface SdTableActionNormal<T = any> {
 interface SdTableActionChildren<T = any> {
     /**
      * Tên icon của action cha (group action).
-     * Giá trị nên là tên glyph Material Icons: https://fonts.google.com/icons
+     * Giá trị nên là tên glyph configured icon set: https://fonts.google.com/icons
      */
     icon?: string;
     /**
-     * Font set của Material icon cho action cha.
+     * Font set của icon cho action cha.
      * Dùng cùng kiểu dữ liệu với `SdButton['fontSet']`.
      */
     fontSet?: SdUnwrapSignal<SdButton['fontSet']>;

package/components/tree/index.d.ts

@@ -1,7 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Signal, TemplateRef } from '@angular/core';
 import { SdButton } from '@sdcorejs/angular/components/button';
-import { SdUnwrapSignal, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { SdIconSet } from '@sdcorejs/angular/modules/icon';
+import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
 import { Color } from '@sdcorejs/utils/models';
 
 type SdTreeDataSource<TItem = any> = TItem[] | Signal<TItem[]> | (() => TItem[] | Promise<TItem[]>);
@@ -60,7 +61,7 @@ interface SdTreeCommand<T = any> {
     title: string | ((item: T) => string);
     icon?: string | ((item: T) => string | undefined | null);
     color?: Color;
-    fontSet?: MaterialIconFontSet;
+    fontSet?: SdIconSet;
     disabled?: boolean | ((item: T) => boolean);
     hidden?: boolean | ((item: T) => boolean);
     click: (item: T) => void;

package/fesm2022/sdcorejs-angular-components-anchor.mjs

@@ -1,11 +1,10 @@
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, effect, Component, computed, output, ChangeDetectionStrategy, viewChild, contentChildren, booleanAttribute, signal, afterNextRender, untracked } from '@angular/core';
 import { Utilities, BrowserUtilities } from '@sdcorejs/utils/fns';
 import { Subject, Subscription, debounceTime, fromEvent, take } from 'rxjs';
-import * as i1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
 class SdAnchorItem {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -59,11 +58,11 @@ class AnchorNav {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnchorNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AnchorNav, isStandalone: true, selector: "anchor-nav", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, parentAutoId: { classPropertyName: "parentAutoId", publicName: "parentAutoId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSection: "clickSection" }, ngImport: i0, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AnchorNav, isStandalone: true, selector: "anchor-nav", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, parentAutoId: { classPropertyName: "parentAutoId", publicName: "parentAutoId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSection: "clickSection" }, ngImport: i0, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <sd-icon class=\"c-anchor-list-item-icon\" [name]=\"section.icon()\"></sd-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnchorNav, decorators: [{
             type: Component,
-            args: [{ selector: 'anchor-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule], standalone: true, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
+            args: [{ selector: 'anchor-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdIcon, CommonModule], standalone: true, template: "<div\n  class=\"c-anchor-list\"\n  [style.width]=\"sidebarWidth()\"\n  [style.--anchor-active-color]=\"cssActiveVar()\">\n  @for (section of sections(); track section.id) {\n    <div\n      class=\"c-anchor-list-item\"\n      [class.active]=\"section.id === activeSectionId()\"\n      (click)=\"onClickSection(section.id)\"\n      (keydown.enter)=\"onClickSection(section.id)\"\n      [attr.data-autoId]=\"itemAutoId(section)\"\n      tabindex=\"0\">\n      @if (section.icon()) {\n        <sd-icon class=\"c-anchor-list-item-icon\" [name]=\"section.icon()\"></sd-icon>\n      }\n      <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n        {{ section.title() }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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-text);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-icon{flex:0 0 auto}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{flex:1 1 0;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--anchor-active-color, var(--sd-primary));color:var(--anchor-active-color, var(--sd-primary));font-weight:700}.c-anchor-list .c-anchor-list-item.active .c-anchor-list-item-icon{color:var(--anchor-active-color, var(--sd-primary))}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeSectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSectionId", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], sidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidth", required: false }] }], parentAutoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentAutoId", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clickSection: [{ type: i0.Output, args: ["clickSection"] }] } });
 
 class SdAnchor {
@@ -178,7 +177,7 @@ class SdAnchor {
         this.#cleanIntersectionObserver();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, overScroll: { classPropertyName: "overScroll", publicName: "overScroll", isSignal: true, isRequired: false, transformFunction: null }, hideNav: { classPropertyName: "hideNav", publicName: "hideNav", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !overScroll() }\" #wrapper>\n  <div class=\"c-anchor-content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!hideNav()) {\n    <div class=\"c-anchor-list\" [style.flex-basis]=\"sidebarWidth()\">\n      <anchor-nav\n        [sections]=\"sections()\"\n        [ellipsis]=\"ellipsis()\"\n        [sidebarWidth]=\"sidebarWidth()\"\n        [activeSectionId]=\"activeSectionId()\"\n        [parentAutoId]=\"autoId()\"\n        [color]=\"color()\"\n        (clickSection)=\"scrollSectionByClick($event)\">\n      </anchor-nav>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{flex:1 1 auto;min-width:0}.c-anchor-vertical .c-anchor-list{flex:0 0 auto;position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnchorNav, selector: "anchor-nav", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth", "parentAutoId", "color"], outputs: ["clickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, overScroll: { classPropertyName: "overScroll", publicName: "overScroll", isSignal: true, isRequired: false, transformFunction: null }, hideNav: { classPropertyName: "hideNav", publicName: "hideNav", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !overScroll() }\" #wrapper>\n  <div class=\"c-anchor-content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!hideNav()) {\n    <div class=\"c-anchor-list\" [style.flex-basis]=\"sidebarWidth()\">\n      <anchor-nav\n        [sections]=\"sections()\"\n        [ellipsis]=\"ellipsis()\"\n        [sidebarWidth]=\"sidebarWidth()\"\n        [activeSectionId]=\"activeSectionId()\"\n        [parentAutoId]=\"autoId()\"\n        [color]=\"color()\"\n        (clickSection)=\"scrollSectionByClick($event)\">\n      </anchor-nav>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{flex:1 1 auto;min-width:0}.c-anchor-vertical .c-anchor-list{flex:0 0 auto;position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnchorNav, selector: "anchor-nav", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth", "parentAutoId", "color"], outputs: ["clickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdAnchor, decorators: [{
             type: Component,