@sdcorejs/angular 20.0.8 → 20.0.10

package/assets/scss/core/utilities/_grid.scss

@@ -1,11 +1,13 @@
+@use "sass:math";
+
 // --------------------------------------------------------------------------
-// Grid — row/col 12-column flexbox + native CSS Grid container
-//   Thuần CSS Flexbox / CSS Grid, không phụ thuộc framework ngoài.
-//   Breakpoint convention (sm/md/lg/xl) trùng Bootstrap để host app dễ migrate.
+// Grid - row/col 12-column flexbox + native CSS Grid container
+// Pure CSS Flexbox / CSS Grid, with no external framework dependency.
+// Breakpoint convention (sm/md/lg/xl) matches Bootstrap to ease host migration.
 // --------------------------------------------------------------------------
 
 // --------------------------------------------------------------------------
-// 1. Flexbox row/col  (.row, .col-{1-12})
+// 1. Flexbox row/col (.row, .col-{1-12})
 // --------------------------------------------------------------------------
 $grid-columns: 12;
 $grid-gutter: 16px;
@@ -45,13 +47,15 @@ $grid-gutter: 16px;
   > * { padding-left: 2px; padding-right: 2px; }
 }
 
-// .col-1 … .col-12
+// .col-1 ... .col-12
 @for $i from 1 through $grid-columns {
+  $col-size: math.percentage(math.div($i, $grid-columns));
+
   .col-#{$i} {
     box-sizing: border-box;
-    width: percentage(calc($i / $grid-columns));
-    flex: 0 0 percentage(calc($i / $grid-columns));
-    max-width: percentage(calc($i / $grid-columns));
+    width: $col-size;
+    flex: 0 0 $col-size;
+    max-width: $col-size;
     padding-left: calc($grid-gutter / 2);
     padding-right: calc($grid-gutter / 2);
   }
@@ -65,12 +69,12 @@ $grid-gutter: 16px;
 
 // --------------------------------------------------------------------------
 // 1b. Responsive columns
-//   col-sm-{1-12} : ≥ 576px
-//   col-md-{1-12} : ≥ 768px
-//   col-lg-{1-12} : ≥ 992px
-//   col-xl-{1-12} : ≥ 1200px
+//   col-sm-{1-12}: >= 576px
+//   col-md-{1-12}: >= 768px
+//   col-lg-{1-12}: >= 992px
+//   col-xl-{1-12}: >= 1200px
 //
-//   Mobile-first: mặc định width: 100%, áp dụng kích thước khi đủ rộng.
+// Mobile-first: default width is 100%; column size applies from breakpoint up.
 // --------------------------------------------------------------------------
 $grid-breakpoints: (
   'sm': 576px,
@@ -79,7 +83,7 @@ $grid-breakpoints: (
   'xl': 1200px,
 );
 
-// col-{bp} — chiếm hết chiều rộng tại breakpoint đó
+// col-{bp} - full-width flexible column at the breakpoint
 @each $bp, $min-width in $grid-breakpoints {
   @media (min-width: $min-width) {
     .col-#{$bp} {
@@ -90,15 +94,17 @@ $grid-breakpoints: (
   }
 }
 
-// col-{bp}-{1-12} — chiếm n/12 chiều rộng tại breakpoint đó
+// col-{bp}-{1-12} - n/12 column width at the breakpoint
 @each $bp, $min-width in $grid-breakpoints {
   @media (min-width: $min-width) {
     @for $i from 1 through $grid-columns {
+      $col-size: math.percentage(math.div($i, $grid-columns));
+
       .col-#{$bp}-#{$i} {
         box-sizing: border-box;
-        width: percentage(calc($i / $grid-columns));
-        flex: 0 0 percentage(calc($i / $grid-columns));
-        max-width: percentage(calc($i / $grid-columns));
+        width: $col-size;
+        flex: 0 0 $col-size;
+        max-width: $col-size;
         padding-left: calc($grid-gutter / 2);
         padding-right: calc($grid-gutter / 2);
       }
@@ -107,7 +113,7 @@ $grid-breakpoints: (
 }
 
 // --------------------------------------------------------------------------
-// 2. CSS Grid container  (.grid-container)
+// 2. CSS Grid container (.grid-container)
 //    grid-container + grid-cols-{1-12} + col-span-{1-12}
 // --------------------------------------------------------------------------
 .grid-container {

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
 import { ModelRange, EditorConfig, ModelDocumentSelection, EventInfo, ViewDataTransfer, ClassicEditor, Plugin, Widget, ContextualBalloon } from 'ckeditor5';
 import { I18nParams } from '@sdcorejs/angular/i18n';
 
@@ -199,7 +199,7 @@ declare class CkCommentPlugin extends Plugin {
     clearPendingSelection(): void;
 }
 
-declare class SdDocumentBuilder {
+declare class SdDocumentBuilder implements OnInit, OnDestroy {
     #private;
     option: SdDocumentBuilderOption;
     disabled: boolean;

package/components/form-generic/index.d.ts

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PipeTransform, OnDestroy, ChangeDetectorRef, AfterViewInit, QueryList, EventEmitter } from '@angular/core';
+import { InjectionToken, PipeTransform, OnDestroy, OnInit, ChangeDetectorRef, AfterViewInit, QueryList, EventEmitter } from '@angular/core';
 import { SdSearch, SdCustomValidator } from '@sdcorejs/angular/forms/models';
 import { SdTableColumn, SdTableOption, SdTable } from '@sdcorejs/angular/components/table';
 import { SdUploadFile } from '@sdcorejs/angular/components/upload-file';
 import { Operator as Operator$1, ValidationPatternType, Color } from '@sdcorejs/utils/models';
 import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
-import { CdkDragMove, CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDragMove, CdkDragDrop, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
 import { FormGroup } from '@angular/forms';
 import { SdModal } from '@sdcorejs/angular/components/modal';
 import { Subject } from 'rxjs';
@@ -458,14 +458,14 @@ interface SdFormGenericHtml {
 type FormBuilderComponentGroup = 'basic' | 'choice' | 'advanced' | 'layout';
 interface FormBuilderComponent {
     type: string;
-    /** Material Symbols Rounded icon name. Rendered via <span class="msi">{symbol}</span>. */
+    /** Material Icons Outlined icon name. Rendered via the builder icon alias. */
     symbol: string;
     /** Category group for the left palette grouping. */
     group: FormBuilderComponentGroup;
     name: string;
 }
 declare const FormBuilderComponents: FormBuilderComponent[];
-/** Lookup: component type → Material Symbol + label, used by attribute panel header. */
+/** Lookup: component type → Material icon + label, used by attribute panel header. */
 declare const COMPONENT_ICONS: Record<string, {
     symbol: string;
     label: string;
@@ -530,7 +530,7 @@ interface IWorkflowConfigurationForm<TSelectionArgs = any> {
     templates: SdFormGenericTemplate[];
     selections: SdFormGenericDefinitionSelection<any, TSelectionArgs>[] | (() => SdFormGenericDefinitionSelection<any, TSelectionArgs>[]) | (() => Promise<SdFormGenericDefinitionSelection[]>);
     getValues?: (key: string, selectionArgs?: TSelectionArgs) => Promise<SdFormGenericSelectionItem[]>;
-    getLazyValues?: (key: string, selectionArgs?: TSelectionArgs) => ((searchArgs: Parameters<SdSearch>[0], args: SdFormGenericArgs) => Promise<SdFormGenericSelectionItem[]>);
+    getLazyValues?: (key: string, selectionArgs?: TSelectionArgs) => (searchArgs: Parameters<SdSearch>[0], args: SdFormGenericArgs) => Promise<SdFormGenericSelectionItem[]>;
     tables: SdFormGenericDefinitionTable[];
     htmls: SdFormGenericDefinitionHtml[] | (() => SdFormGenericDefinitionHtml[]) | (() => Promise<SdFormGenericDefinitionHtml[]>);
     validation?: SdFormGenericValidationConfiguration;
@@ -544,7 +544,6 @@ declare const SD_FORM_GENERIC_CONFIGURATION: InjectionToken<ISdFormGenericConfig
 declare class FormGenericService {
     #private;
     private readonly configuration;
-    constructor(configuration: ISdFormGenericConfiguration);
     get selections(): (() => Promise<SdFormGenericDefinitionSelection[]>) | SdFormGenericDefinitionSelection<any, any>[] | (() => SdFormGenericDefinitionSelection<any, any>[]);
     get tables(): _sdcorejs_angular_components_form_generic.SdFormGenericDefinitionTable<any>[];
     getSelection: (valuesKey: string | undefined | null) => Promise<SdFormGenericDefinitionSelection | undefined>;
@@ -560,7 +559,7 @@ declare class FormGenericService {
         definitions: () => Promise<SdFormGenericDefinitionHtml[]>;
         getContent: (template: string, query?: Record<string, any>) => Promise<string>;
     };
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormGenericService, [{ optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormGenericService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FormGenericService>;
 }
 
@@ -590,7 +589,7 @@ declare class SdFormRenderService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SdFormRenderService>;
 }
 
-declare class UploadComponent implements OnDestroy {
+declare class UploadComponent implements OnDestroy, OnInit {
     #private;
     private readonly ref;
     setVariables: Subject<{
@@ -620,7 +619,7 @@ declare class UploadComponent implements OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<UploadComponent, "lib-upload", never, { "setVariables": { "alias": "setVariables"; "required": true; }; "form": { "alias": "form"; "required": false; }; "_entity": { "alias": "entity"; "required": true; }; "_component": { "alias": "component"; "required": true; }; "_disabled": { "alias": "disabled"; "required": false; }; "_required": { "alias": "required"; "required": false; }; "_viewed": { "alias": "viewed"; "required": false; }; "_validator": { "alias": "validator"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class TableComponent implements AfterViewInit, OnDestroy {
+declare class TableComponent implements AfterViewInit, OnDestroy, OnInit {
     #private;
     private ref;
     private readonly formGenericService;
@@ -691,8 +690,6 @@ declare class LibItemComponent {
 
 declare class SdFormRender implements OnDestroy, AfterViewInit {
     #private;
-    private ref;
-    private formGenericConfiguration;
     formRenderItems: QueryList<LibItemComponent>;
     form: FormGroup;
     configuration: SdFormRenderConfiguration;
@@ -711,18 +708,17 @@ declare class SdFormRender implements OnDestroy, AfterViewInit {
         key: string;
         value: any;
     }>;
-    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration | null);
+    private readonly ref;
+    private readonly formGenericConfiguration;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     upload: () => Promise<void>;
     getValidationMessages: (alert: SdFormGenericValidation["alert"]) => Promise<string[] | undefined>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdFormRender, [null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdFormRender, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdFormRender, "sd-form-render", never, { "form": { "alias": "form"; "required": false; }; "_configuration": { "alias": "configuration"; "required": true; }; "_default": { "alias": "defaultEntity"; "required": false; }; "_entity": { "alias": "entity"; "required": false; }; "_properties": { "alias": "properties"; "required": false; }; "_viewed": { "alias": "viewed"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class ConfigureValidationComponent {
-    private ref;
-    private formGenericConfiguration;
+declare class ConfigureValidationComponent implements AfterViewInit, OnDestroy {
     modal?: SdModal;
     form: FormGroup<{}>;
     attributes: Attribute[];
@@ -733,22 +729,35 @@ declare class ConfigureValidationComponent {
         display: string;
     }[];
     accept: EventEmitter<SdFormGenericValidation[]>;
-    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration | null);
+    private readonly ref;
+    private readonly formGenericConfiguration;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     open: (formGeneric: SdFormGeneric) => void;
     addValidation: (type: SdFormGenericValidation["type"]) => void;
     removaValidation: (index: number) => void;
     updateValidations: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigureValidationComponent, [null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigureValidationComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ConfigureValidationComponent, "configure-validation", never, {}, { "accept": "accept"; }, never, never, true, never>;
 }
 
-interface DragDropRowItem {
-    items: (SdFormGenericComponent | SdFormGenericGroup)[];
+type FormBuilderLayoutItem = SdFormGenericComponent | SdFormGenericGroup;
+interface FormBuilderLayoutRow {
+    id: string;
+    items: FormBuilderLayoutItem[];
+    columns: number;
+}
+
+interface DragDropRowItem extends FormBuilderLayoutRow {
     rowIndex?: number;
 }
-declare class SdFormBuilder {
+interface ResizeState {
+    itemId: string;
+    rowId: string;
+    columns: string;
+}
+declare class SdFormBuilder implements OnInit, OnDestroy {
     #private;
     readonly popupViewJSON: i0.Signal<SdModal | undefined>;
     readonly popupConfigureVariables: i0.Signal<SdModal | undefined>;
@@ -781,6 +790,9 @@ declare class SdFormBuilder {
     /** Signal toàn cục: TRUE khi BẤT KỲ cdkDrag nào đang active (palette, canvas, group, resize).
      *  Trigger class `.fb-shell--dragging` để ẩn hover/actions/resize toàn diện, không phụ thuộc :has(). */
     readonly isAnyDragging: i0.WritableSignal<boolean>;
+    readonly dragSource: i0.WritableSignal<"row" | "palette" | "canvas" | "resize" | undefined>;
+    readonly resizeState: i0.WritableSignal<ResizeState | undefined>;
+    readonly isResizing: i0.Signal<boolean>;
     expand: boolean;
     dragDropRows: DragDropRowItem[];
     isDragging: boolean;
@@ -788,18 +800,25 @@ declare class SdFormBuilder {
     private lastDragPointer?;
     /** Handler chung cho mọi cdkDragStarted — set signal global true. */
     onAnyDragStarted: () => void;
+    onPaletteDragStarted: () => void;
+    onRowDragStarted: () => void;
     onAnyDragMoved: (event: CdkDragMove<any>) => void;
     /** Handler chung cho mọi cdkDragEnded — set signal global false (dùng setTimeout 0
      *  để chờ CDK xử lý xong drop event trước khi UI re-enable). */
     onAnyDragEnded: () => void;
+    startResizeControl: (item: SdFormGenericComponent | SdFormGenericGroup, row: DragDropRowItem) => void;
+    endResizeControl: (event: any) => void;
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
-    addComponent: (item: FormBuilderComponent, index?: number) => void;
+    addComponent: (item: FormBuilderComponent, index?: number, layoutColumns?: string) => void;
     /** Symbol Material để render trên canvas item / attribute header. */
     symbolFor: (item: SdFormGenericComponent | SdFormGenericGroup) => string;
     /** Human-readable type label (e.g. "Text field", "Date"). */
     typeLabelFor: (item: SdFormGenericComponent | SdFormGenericGroup) => string;
+    placeholderSymbolFor: (item: FormBuilderComponent | SdFormGenericComponent | SdFormGenericGroup | DragDropRowItem | undefined) => string;
+    placeholderTitleFor: (item: FormBuilderComponent | SdFormGenericComponent | SdFormGenericGroup | DragDropRowItem | undefined) => string;
+    placeholderMetaFor: (item: FormBuilderComponent | SdFormGenericComponent | SdFormGenericGroup | DragDropRowItem | undefined) => string;
     /** True nếu component có expression điều kiện — drives the "conditional" status chip. */
     hasConditional: (item: SdFormGenericComponent | SdFormGenericGroup) => boolean;
     /** Map SdColor preset → 2 CSS var names cho header-bg và header-fg của group card. */
@@ -828,6 +847,9 @@ declare class SdFormBuilder {
     dragStartComponentItem: (event: any) => void;
     dragEndComponentItem: (event: any) => void;
     onMouseover: (event: MouseEvent, rowItem: DragDropRowItem) => void;
+    isRowFull: (row: DragDropRowItem) => boolean;
+    isRowInlineDropLocked: (row: DragDropRowItem) => boolean;
+    canEnterRowDropList: (drag: CdkDrag<FormBuilderComponent | SdFormGenericComponent | SdFormGenericGroup>, drop: CdkDropList<(SdFormGenericComponent | SdFormGenericGroup)[]>) => boolean;
     onFocus: (event: FocusEvent) => void;
     xuLyKeoCheo: (dragItem?: SdFormGenericComponent | SdFormGenericGroup) => void;
     noReturnPredicate: () => boolean;
@@ -853,7 +875,7 @@ declare class SdFormBuilder {
     static ɵcmp: i0.ɵɵComponentDeclaration<SdFormBuilder, "sd-form-builder", never, { "formGeneric": { "alias": "formGeneric"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class SdFeelExpression {
+declare class SdFeelExpression implements OnInit {
     #private;
     private ref;
     private expressionFeelPipe;

package/components/import-excel/index.d.ts

@@ -97,7 +97,7 @@ interface SdUploadExcelColumnStringArray<T = any> extends SdUploadExcelBaseColum
     minlength?: number;
     maxlength?: number;
 }
-type SdImportExcelItem<T = any> = {
+interface SdImportExcelItem<T = any> {
     data: T;
     meta: {
         excelIndex: number;
@@ -107,7 +107,7 @@ type SdImportExcelItem<T = any> = {
         warning: Record<string, string>;
         warningMessages: string[];
     };
-};
+}
 
 declare class ColumnHiddenPipe implements PipeTransform {
     constructor();

package/components/mini-editor/index.d.ts

@@ -1,7 +1,7 @@
 import { MentionFeed, MentionFeedObjectItem, EditorConfig, ClassicEditor } from 'ckeditor5';
 export { MentionFeedObjectItem } from 'ckeditor5';
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import { OnDestroy, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 type SdMiniEditorOutputFormat = 'html' | 'markdown';
@@ -62,7 +62,7 @@ type SdMiniEditorConfig = EditorConfig & {
  * </sd-mini-editor>
  * ```
  */
-declare class SdMiniEditor implements ControlValueAccessor {
+declare class SdMiniEditor implements ControlValueAccessor, OnDestroy {
     #private;
     /** Cấu hình option cho editor */
     option: SdMiniEditorOption;
@@ -113,11 +113,11 @@ declare class SdMiniEditor implements ControlValueAccessor {
     /**
      * Get danh sách mentions trong nội dung
      */
-    getMentions(): Array<{
+    getMentions(): {
         id: string;
         name: string;
         marker: string;
-    }>;
+    }[];
     /**
      * ControlValueAccessor: Write value
      */

package/components/modal/index.d.ts

@@ -16,7 +16,7 @@ declare class SdModal {
     width: _angular_core.InputSignalWithTransform<string, string | null | undefined>;
     height: _angular_core.InputSignalWithTransform<string, string | null | undefined>;
     view: _angular_core.InputSignalWithTransform<"dialog" | "bottom-sheet" | undefined, "dialog" | "bottom-sheet" | null | undefined>;
-    modalClass: _angular_core.InputSignalWithTransform<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>;
+    modalClass: _angular_core.InputSignalWithTransform<string | Record<string, boolean> | string[], string | Record<string, boolean> | string[] | null | undefined>;
     lazyLoadContent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     hideClose: _angular_core.InputSignalWithTransform<boolean, boolean | "">;
     disableBackdropClose: _angular_core.InputSignalWithTransform<boolean, boolean | "">;

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: ReadonlyArray<QbDateModeOption>;
+declare const QB_DATE_MODES: readonly QbDateModeOption[];
 /** One value-source option for field-to-field comparison UI. */
 interface QbValueSourceOption {
     value: QbValueSource;
@@ -159,12 +159,12 @@ interface QbValueSourceOption {
     icon: string;
 }
 /** Stable option list for choosing between a literal value and another field. */
-declare const QB_VALUE_SOURCE_OPTIONS: ReadonlyArray<QbValueSourceOption>;
+declare const QB_VALUE_SOURCE_OPTIONS: readonly QbValueSourceOption[];
 /** Stable combined direction×unit option list (token `'unit:direction'`). */
-declare const QB_RELATIVE_UNIT_OPTIONS: ReadonlyArray<{
+declare const QB_RELATIVE_UNIT_OPTIONS: readonly {
     value: string;
     display: string;
-}>;
+}[];
 /** Shared empty option array — stable ref for fallbacks (avoids per-call allocation). */
 declare const QB_EMPTY_OPTIONS: SdQueryBuilderFieldOption[];
 

package/components/tab-router/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Type, ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { InjectionToken, Type, ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Color } from '@sdcorejs/utils/models';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -22,6 +22,7 @@ interface SdTab {
     tabInfoChanges: Subject<SdTabInfo>;
     beforeClose?: () => boolean | Promise<boolean>;
 }
+declare const SD_TAB: InjectionToken<SdTab>;
 
 declare class SdTabRouterNavComponent {
     tabRouterNav: i0.Signal<ElementRef<any> | undefined>;
@@ -87,7 +88,6 @@ declare class SdTabRouterService {
     currentTabChanges: BehaviorSubject<SdTab | undefined>;
     newTabs: BehaviorSubject<SdTab | undefined>;
     updateTabs: BehaviorSubject<SdTab | undefined>;
-    constructor();
     addBuilder: (builder: SdTabComponentBuilder) => void;
     get currentTab(): SdTab | undefined;
     get currentKey(): string | null;
@@ -100,5 +100,5 @@ declare class SdTabRouterService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SdTabRouterService>;
 }
 
-export { SdTabComponent, SdTabRouterOutletComponent, SdTabRouterService };
+export { SD_TAB, SdTabComponent, SdTabRouterOutletComponent, SdTabRouterService };
 export type { SdTab, SdTabComponentArgs, SdTabComponentBuilder, SdTabInfo };

package/components/table/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, Signal, EventEmitter, ChangeDetectorRef, InjectionToken, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { TemplateRef, Signal, EventEmitter, ChangeDetectorRef, InjectionToken, AfterViewInit, OnDestroy } from '@angular/core';
 import { SdBadge } from '@sdcorejs/angular/components/badge';
 import { SdSearch } from '@sdcorejs/angular/forms';
 import { Operator, NestedKeyOf, Order, PagingReq, Color } from '@sdcorejs/utils/models';
@@ -60,6 +60,7 @@ interface SdTableColumnBase<T = any> {
     filter?: {
         disabled?: boolean;
         default?: any;
+        onChange?: (value: any, column?: SdTableColumn<T>, columnFilter?: Record<string, any>) => void;
         operator?: {
             default?: Operator;
             enable?: boolean;
@@ -81,7 +82,7 @@ interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
     field: NestedKeyOf<T>;
     type: 'number';
     useBadge?: UseBadgeFunc<T>;
-    filter?: SdTableColumnBase['filter'] & {
+    filter?: SdTableColumnBase<T>['filter'] & {
         type?: 'split-number';
     };
 }
@@ -98,7 +99,7 @@ interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
     field: NestedKeyOf<T>;
     type: 'date' | 'datetime' | 'time';
     useBadge?: UseBadgeFunc<T>;
-    filter?: SdTableColumnBase['filter'] & {
+    filter?: SdTableColumnBase<T>['filter'] & {
         type?: 'daterange' | 'date' | 'split-date';
     };
 }
@@ -1146,7 +1147,7 @@ declare class MatPaginatorIntlCro extends MatPaginatorIntl {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatPaginatorIntlCro, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MatPaginatorIntlCro>;
 }
-declare class SdTable<T = unknown> implements OnInit, AfterViewInit, OnDestroy {
+declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
     #private;
     autoIdInput: _angular_core.InputSignal<string | null | undefined>;
     autoId: _angular_core.Signal<string | undefined>;
@@ -1182,14 +1183,13 @@ declare class SdTable<T = unknown> implements OnInit, AfterViewInit, OnDestroy {
     filterRegister: TableFilterRegister;
     key: string;
     columnOperator: Record<string, Operator>;
-    columnFilter?: Record<string, any>;
-    cacheValues: Record<string, any[]>;
+    columnFilter?: NonNullable<TableFilterValue['columnFilter']>;
+    cacheValues: Record<string, unknown[]>;
     treeRevision: _angular_core.WritableSignal<number>;
     exporting: _angular_core.WritableSignal<boolean>;
     exportTitle: _angular_core.WritableSignal<string>;
     tableConfiguration: ISdTableConfiguration | null;
     constructor();
-    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getFilterRequest: () => SdTableFilterRequest;
@@ -1229,10 +1229,7 @@ declare class SdTable<T = unknown> implements OnInit, AfterViewInit, OnDestroy {
     groupContext: (header: SdTableItem<T>) => SdTableGroupDefContext<T>;
     rowStyle: (row: SdTableItem<T>, index?: number) => Record<string, string> | null;
     clearFilter: () => void;
-    setFilter: (args: {
-        columnFilter?: Record<string, any>;
-        externalFilter?: Record<string, any>;
-    }) => void;
+    setFilter: (args?: Pick<TableFilterValue, "columnFilter" | "externalFilter">) => void;
     get dataItems(): T[];
     get selectedItems(): T[];
     detectChanges: () => void;

package/components/view/index.d.ts

@@ -21,7 +21,7 @@ declare class SdView {
      * 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: _angular_core.InputSignal<string | null | undefined>;
+    display: _angular_core.InputSignal<unknown>;
     /** When set, the value renders as a link (`<a [sdHref]>`) instead of plain text. */
     hyperlink: _angular_core.InputSignal<string | null | undefined>;
     /** Label template handed down by a parent control (wins over `label` + `#sdLabel`). */

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

@@ -29,7 +29,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             args: [{ selector: 'sd-anchor-item', imports: [CommonModule], standalone: true, template: "<section>\n  <ng-content></ng-content>\n</section>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
 
-// eslint-disable-next-line @angular-eslint/component-class-suffix
 class AnchorNav {
     sections = input.required(...(ngDevMode ? [{ debugName: "sections" }] : []));
     activeSectionId = input('', ...(ngDevMode ? [{ debugName: "activeSectionId" }] : []));
@@ -51,9 +50,7 @@ class AnchorNav {
     #clickSectionSubject = new Subject();
     #subscription = new Subscription();
     constructor() {
-        this.#subscription.add(this.#clickSectionSubject
-            .pipe(debounceTime(this.#delay))
-            .subscribe((id) => this.clickSection.emit(id)));
+        this.#subscription.add(this.#clickSectionSubject.pipe(debounceTime(this.#delay)).subscribe((id) => this.clickSection.emit(id)));
     }
     onClickSection = (id) => {
         this.#clickSectionSubject.next(id);
@@ -77,10 +74,10 @@ class SdAnchor {
     sidebarWidth = input('200px', ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
     ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     overScroll = input(false, ...(ngDevMode ? [{ debugName: "overScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    // Mobile: default ẩn nav (sidebar TOC chiếm chỗ trên màn hình hẹp).
-    // Consumer truyền `[hideNav]="false"` để force hiện trên mobile.
+    // Mobile: default ?n nav (sidebar TOC chi?m ch? tr�n m�n h�nh h?p).
+    // Consumer truy?n `[hideNav]="false"` d? force hi?n tr�n mobile.
     hideNav = input(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "hideNav", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    // Màu highlight active nav (text + icon + vertical bar). Default 'primary'.
+    // M�u highlight active nav (text + icon + vertical bar). Default 'primary'.
     color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
     activeSectionId = signal('', ...(ngDevMode ? [{ debugName: "activeSectionId" }] : []));
     #initialized = false;
@@ -97,7 +94,7 @@ class SdAnchor {
                 this.#registerIntersectionObserver();
             }
         });
-        // Lắng nghe thay đổi sections để đăng ký lại observe section
+        // L?ng nghe thay d?i sections d? dang k� l?i observe section
         effect(() => {
             this.sections();
             if (!this.hideNav() && this.#initialized) {
@@ -108,24 +105,24 @@ class SdAnchor {
     #registerIntersectionObserver() {
         this.#cleanIntersectionObserver();
         const wrapperEl = this.wrapper().nativeElement;
-        // Brower API IntersectionObserver sẽ hỗ trợ khi nào 1 section được hiện ra trong wrapperEl
+        // Brower API IntersectionObserver s? h? tr? khi n�o 1 section du?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
+                    // N?u section m?i di 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
+                    // N?u section d� di 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
+            // N?u dang scroll b?i click section th� return lu�n, k ph?i qu�t qua t�m v�ng section du?c active
             if (this.#isClickScrolling) {
                 return;
             }
             for (const section of this.sections()) {
-                // 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
+                // Ki?m tra xem DOM c?a section n�o dang n?m trong danh s�ch dang nh�n th?y d? active ch�nh x�c
                 if (this.#visibleSections.has(section.elementRef.nativeElement)) {
                     if (this.activeSectionId() !== section.id) {
                         this.activeSectionId.set(section.id);
@@ -134,7 +131,7 @@ class SdAnchor {
                 }
             }
         }, { root: wrapperEl, threshold: 0 });
-        // Đăng ký theo dõi từng section có trong anchor
+        // �ang k� theo d�i t?ng section c� trong anchor
         for (const section of this.sections()) {
             this.#intersectionObserver.observe(section.elementRef.nativeElement);
         }
@@ -149,15 +146,15 @@ class SdAnchor {
         this.#isClickScrolling = true;
         const wrapperEl = this.wrapper().nativeElement;
         const targetElement = targetSection.nativeElement;
-        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
+        const prevScrollTop = wrapperEl.scrollTop; // Luu 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
+        // �ang k� s? ki?n n?u d� du?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
+        // N?u sectionTarget d� ? d�ng v? tr� (click nhung kh�ng scroll) th� sau #timeoutScrollFallback k�ch ho?t l?i IntersectionObserver
         this.#timeoutId = setTimeout(() => {
             if (wrapperEl.scrollTop === prevScrollTop) {
                 this.#isClickScrolling = false;