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

package/components/table/src/models/table-item.model.d.ts

@@ -18,6 +18,12 @@ export interface SdTableMetaTree<T = any> {
     parentId?: string;
     /** Cached formatted child SdTableItem[] — populated on first expand/format */
     childItems?: SdTableItem<T>[];
+    /**
+     * Hierarchical index path từ root tới row hiện tại — sibling-index (1-based) per level.
+     * Vd root thứ nhất = [1], child thứ 2 của root đó = [1, 2], grandchild thứ 1 = [1, 2, 1].
+     * Template STT join('.') → "1", "1.2", "1.2.1". Populate trong `flattenTree`.
+     */
+    indexPath?: number[];
 }
 export interface SdTableDisplay {
     tooltip?: string;
@@ -32,15 +38,24 @@ export interface SdTableDisplay {
     isHtml: boolean;
     click?: () => void;
 }
+export interface SdTableMetaGroup<T = any> {
+    /** Children items thuộc group này (chỉ set trên group header row). */
+    items?: SdTableItem<T>[];
+    /** true = row này là synthetic group header (sinh bởi SdGroupPipe). */
+    isGroupHeader?: boolean;
+    /** Hash key của group (= Utilities.hash(values)). */
+    key?: string;
+    /** Resolved group-field values (vd `{ customerId: 1, customerName: 'A' }`). */
+    values?: Record<string, any>;
+    /** Trạng thái expand. Chỉ ý nghĩa khi `option.group.collapsible = true`. */
+    isExpanded?: boolean;
+}
 export interface SdTableMeta<T> {
     id: string;
     display: Record<string, SdTableDisplay>;
     selector?: SdTableMetaSelector;
     expand?: SdTableMetaExpand;
-    group?: {
-        htmlTemplate?: string;
-        items?: SdTableItem<T>[];
-    };
+    group?: SdTableMetaGroup<T>;
     tree?: SdTableMetaTree<T>;
 }
 export interface SdTableItem<T = any> {

package/components/table/src/models/table-option-export.model.d.ts

@@ -1,4 +1,4 @@
-import { SdNestedKeyOf } from '@sd-angular/core/utilities';
+import { NestedKeyOf } from '@sdcorejs/utils/models';
 import { SdTableFilterRequest } from '../services/table-filter/table-filter.model';
 export type SdTableOptionExport<T = any> = SdTableOptionExportDefault<T> | SdTableOptionExportCustom;
 export interface SdTableOptionExportDefault<T = any> {
@@ -23,7 +23,7 @@ export interface SdTableOptionExportCustom {
     onExport: (filterRequest: SdTableFilterRequest) => Promise<void>;
 }
 export interface SdTableOptionExportColumn<T = any> {
-    field: SdNestedKeyOf<T>;
+    field: NestedKeyOf<T>;
     title: string;
     description?: string;
     width?: string;
@@ -36,7 +36,7 @@ export interface SdTableOptionExportSheet<T = any> {
     name: string;
     items: T[] | (() => T[] | Promise<T[]>);
     headers: {
-        value: SdNestedKeyOf<T>;
+        value: NestedKeyOf<T>;
         display: string;
     }[];
 }

package/components/table/src/models/table-option-group.model.d.ts

@@ -1,4 +1,21 @@
+import { NestedKeyOf } from '@sdcorejs/utils/models';
 export interface SdTableOptionGroup<T = any> {
-    fields: string[];
-    htmlTemplate: (rowDatas: T[]) => string;
+    /**
+     * Danh sách field dùng để nhóm. Item có cùng giá trị tất cả `fields` sẽ vào cùng group.
+     * Ví dụ `['customerId']` group orders theo khách hàng.
+     * Type-safe qua `NestedKeyOf<T>` — hỗ trợ dot-notation cho nested object (vd `'customer.id'`).
+     */
+    fields: NestedKeyOf<T>[];
+    /**
+     * Mặc định group có collapse được không. true = render với UI có thể expand/collapse;
+     * false = luôn show toàn bộ children (mặc định).
+     */
+    collapsible?: boolean;
+    /** Nếu collapsible, mặc định trạng thái ban đầu: true = collapsed, false = expanded (default). */
+    defaultCollapsed?: boolean;
+    /**
+     * Predicate tùy chọn cho selection. Khi check `selectable` của group header.
+     * Mặc định: chỉ nhóm có >=1 child `selectable` mới hiển thị checkbox.
+     */
+    selectable?: (children: T[]) => boolean;
 }

package/components/table/src/models/table-option-selector.model.d.ts

@@ -21,6 +21,22 @@ export interface SdTableOptionSelector<T = any> {
      * Dùng khi cần programmatically set selected items từ bên ngoài.
      */
     defaultSelected?: (rowData: T) => boolean;
+    /**
+     * Giữ lại selection khi user chuyển trang / filter / sort / reload.
+     * Selection chỉ bị clear khi user bấm nút X (onClearSelection) hoặc bỏ chọn từng item.
+     *
+     * - Default (false): selection bị mất khi data items được re-fetch (server-side) hoặc
+     *   item references thay đổi. Action bar chỉ hiển thị số item selected ở page hiện tại.
+     * - Enabled (true): table giữ map nội bộ selectedItems theo `meta.id` (hash của data).
+     *   Sau mỗi #render, restore `isSelected` cho item nào id đã có trong map.
+     *   `selectedTableItems()` trả về TOÀN BỘ item đã chọn xuyên trang (kể cả off-page),
+     *   nên action bar + callback `click(items)` nhận đầy đủ data đang được chọn.
+     *
+     * Lưu ý: matching dựa trên `Utilities.hash(data)` — hai item có cùng data shape sẽ
+     * trùng id (mong muốn). Nếu data có timestamp/random field thay đổi giữa các lần fetch,
+     * id sẽ khác và selection không restore được.
+     */
+    preserveSelection?: boolean;
 }
 export type SdTableAction<T = any> = SdTableActionNormal<T> | SdTableActionChildren<T>;
 export interface SdTableActionNormal<T = any> {
@@ -34,7 +50,7 @@ export interface SdTableActionNormal<T = any> {
      * 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`,
      * ví dụ: `material-icons`, `material-icons-outlined`, `material-icons-round`,
-     * `material-icons-sharp`, `material-symbols-outlined`.
+     * `material-icons-sharp`.
      * Nếu không truyền, `SdButton` sẽ dùng font set mặc định của nó.
      */
     fontSet?: SdUnwrapSignal<SdButton['fontSet']>;

package/components/table/src/models/table-option-tree.model.d.ts

@@ -1,12 +1,100 @@
-export interface SdTableOptionTree<T = any> {
-    /** Key trên object row chứa mảng children. Mặc định: 'children' */
-    childrenKey?: string;
-    /** Giới hạn độ sâu cây. undefined = không giới hạn. */
+import { NestedKeyOf } from '@sdcorejs/utils/models';
+/**
+ * Cấu hình tree-rows cho `<sd-table>` — render dòng con inline dưới dòng cha
+ * kèm expand/collapse.
+ *
+ * Đây là discriminated union theo `loadType`:
+ * - `'static'` ({@link TableOptionTreeStatic}) — children đã nằm sẵn trong data
+ *   (embedded array tại `childrenKey`). Không gọi API khi bung.
+ * - `'lazy'`  ({@link TableOptionTreeLazy})  — children nạp theo yêu cầu qua
+ *   `onExpandChildren` khi người dùng bung dòng lần đầu.
+ *
+ * `loadType` là discriminant: TypeScript dựa vào nó để narrow union (vd chỉ
+ * `static` mới có `childrenKey`/`defaultExpanded`, chỉ `lazy` mới có
+ * `onExpandChildren`). Dùng type-guard `isLazyTree()` trong `tree.util.ts` để
+ * narrow an toàn thay vì truy cập field trực tiếp trên union.
+ *
+ * @example Static (children embedded)
+ * ```ts
+ * tree: { loadType: 'static', childrenKey: 'children', defaultExpanded: 1 }
+ * ```
+ * @example Lazy (nạp theo yêu cầu)
+ * ```ts
+ * tree: { loadType: 'lazy', onExpandChildren: row => api.getChildren(row.id) }
+ * ```
+ */
+export type SdTableOptionTree<T = any> = TableOptionTreeStatic<T> | TableOptionTreeLazy<T>;
+/**
+ * Tree với dữ liệu children **embedded** sẵn trong mỗi row.
+ *
+ * Table đọc mảng con tại `childrenKey` ngay trên object data; không có lời gọi
+ * bất đồng bộ nào khi bung dòng. Đây cũng là chế độ hỗ trợ **search ở cấp con**
+ * cho table `type: 'local'` (xem `tree.util.ts#subtreeMatches` /
+ * `filterMatchingChildren`): khi lọc, một nhánh được giữ lại nếu chính nó hoặc
+ * bất kỳ hậu duệ nào khớp từ khoá, và nhánh khớp sẽ tự bung.
+ */
+export interface TableOptionTreeStatic<T = any> {
+    /** Chế độ nạp children: dữ liệu đã embedded sẵn trong row. */
+    loadType: 'static';
+    /**
+     * Key trên object row chứa mảng children.
+     * Mặc định: `'children'`.
+     */
+    childrenKey?: NestedKeyOf<T> | 'children';
+    /**
+     * Giới hạn độ sâu cây (level gốc = 0).
+     * `undefined` = không giới hạn.
+     */
     maxDepth?: number;
-    /** false | true | number (mở tới cấp N) */
+    /**
+     * Trạng thái bung mặc định khi load:
+     * - `false` — thu gọn hết (mặc định)
+     * - `true`  — bung toàn bộ
+     * - `number N` — bung tới cấp `N` (row có `level < N` được bung)
+     */
     defaultExpanded?: boolean | number;
-    /** Lazy load khi row chưa có children embedded */
-    onExpandChildren?: (rowData: T) => Promise<T[]> | T[];
-    /** Pixel indent mỗi cấp. Mặc định: 20 */
+    /**
+     * Số pixel thụt lề (indent) cho mỗi cấp sâu.
+     * Mặc định: `20`.
+     */
+    indentSize?: number;
+}
+/**
+ * Tree với children **nạp lười (lazy)** theo yêu cầu.
+ *
+ * Khi người dùng bung một dòng lần đầu mà dòng đó chưa có children embedded,
+ * table gọi `onExpandChildren(row)` để nạp; kết quả được cache lại trên row
+ * (ghi vào key `'children'`) nên các lần bung sau không gọi lại.
+ *
+ * Lazy tree **không hỗ trợ** `childrenKey` tuỳ biến (luôn dùng `'children'` làm
+ * nơi lưu kết quả) và **không hỗ trợ** `defaultExpanded` (không thể bung mặc
+ * định nhánh chưa nạp).
+ */
+export interface TableOptionTreeLazy<T = any> {
+    /** Chế độ nạp children: nạp lười theo yêu cầu khi bung. */
+    loadType: 'lazy';
+    /**
+     * Giới hạn độ sâu cây (level gốc = 0).
+     * `undefined` = không giới hạn.
+     */
+    maxDepth?: number;
+    /**
+     * Hàm nạp children khi bung dòng chưa có children embedded.
+     * Trả về `Promise<T[]>`; kết quả được ghi vào key `'children'` của row data
+     * và cache cho các lần bung sau.
+     */
+    onExpandChildren: (rowData: T) => Promise<T[]>;
+    /**
+     * Xác định một row có con hay không — để quyết định có hiển thị icon expand.
+     * - Không truyền: MỌI lazy node đều hiện icon expand (không biết trước được).
+     * - Truyền: chỉ hiện icon khi trả `true`; trả `false` ⇒ row là lá (ẩn icon,
+     *   không gọi `onExpandChildren`).
+     * Lưu ý: nếu row đã có children embedded sẵn thì luôn coi là có con (bỏ qua hàm này).
+     */
+    hasChildren?: (rowData: T) => boolean;
+    /**
+     * Số pixel thụt lề (indent) cho mỗi cấp sâu.
+     * Mặc định: `20`.
+     */
     indentSize?: number;
 }

package/components/table/src/models/table-option.model.d.ts

@@ -1,4 +1,4 @@
-import { SdPagingReq } from '@sd-angular/core/utilities';
+import { PagingReq } from '@sdcorejs/utils/models';
 import { SdTableFilterRequest, SdTableOptionFilter } from '../services/table-filter/table-filter.model';
 import { SdTableColumn } from './table-column.model';
 import { SdTableCommand, SdTableCommandOption } from './table-command.model';
@@ -73,6 +73,28 @@ interface SdTableBaseOption<T = any> {
      * manual filter, cacheable và callback clear filter.
      */
     filter?: SdTableOptionFilter;
+    /**
+     * Cấu hình cột đánh số thứ tự (STT) ở đầu mỗi dòng.
+     * Khi enabled = true, table render thêm 1 cột STT (sticky đầu, sau selector).
+     * Số thứ tự tính theo global index (pageIndex * pageSize + i + 1) để tương thích phân trang.
+     */
+    index?: {
+        /** Bật/tắt cột STT. */
+        enabled?: boolean;
+        /** Tiêu đề header (mặc định '#'). */
+        title?: string;
+        /** Width của cột (mặc định '50px'). */
+        width?: string;
+    };
+    /**
+     * Bật cột filler ở cuối row để hấp thụ leftover width khi tổng width các cột data < container.
+     * Khi enabled = true, các cột utility (selection / STT / command) không bị browser stretch trên màn rộng.
+     * Mặc định off — table tự stretch cột data theo `width: 100%` như cũ.
+     */
+    filler?: {
+        /** Bật/tắt cột filler. */
+        enabled?: boolean;
+    };
     /**
      * Cấu hình kéo-thả đổi thứ tự dòng.
      * Chỉ bật khi table cho phép reorder dữ liệu phía client.
@@ -142,7 +164,7 @@ interface SdTableServerOption<T = any> extends SdTableBaseOption<T> {
      * `pagingReq` là dữ liệu paging đã được chuẩn hóa để dễ map sang API backend.
      * Hàm cần trả về `{ items, total }` để table render và tính phân trang.
      */
-    items: (filterRequest: SdTableFilterRequest<T>, pagingReq: SdPagingReq<T>) => Promise<{
+    items: (filterRequest: SdTableFilterRequest<T>, pagingReq: PagingReq<T>) => Promise<{
         items: T[];
         total: number;
     }>;

package/components/table/src/pipes/sd-group.pipe.d.ts

@@ -3,7 +3,21 @@ import { SdTableOption } from '../models/table-option.model';
 import { SdTableItem } from '../models/table-item.model';
 import * as i0 from "@angular/core";
 export declare class SdGroupPipe implements PipeTransform {
-    transform(items: SdTableItem[], gridOption: SdTableOption): SdTableItem[];
+    /**
+     * Nhóm items theo `option.group.fields`. Mỗi group sinh ra 1 synthetic SdTableItem
+     * (group header) đặt trước children. Header có `meta.group.isGroupHeader = true` + `key`
+     * + `values` + `items` + `isExpanded` để template + table consume.
+     *
+     * Khi `option.group.collapsible = true` + group đang collapse → children bị lọc khỏi output.
+     *
+     * `expandState` (optional, owned by component) — Map<key, expanded> giữ trạng thái
+     * expand/collapse qua các lần transform. Pipe đọc state từ Map; nếu key chưa tồn tại,
+     * dùng `!option.group.defaultCollapsed`. Pipe ghi state về Map cho lần read sau.
+     *
+     * @example
+     * `_items | sdGroup: _tableOption : groupExpandState`
+     */
+    transform(items: SdTableItem[], gridOption: SdTableOption, expandState?: Map<string, boolean>): SdTableItem[];
     static ɵfac: i0.ɵɵFactoryDeclaration<SdGroupPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<SdGroupPipe, "sdGroup", true>;
 }

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

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

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

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

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

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

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

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

package/components/upload-file/src/upload-file.component.d.ts

@@ -19,6 +19,9 @@ export declare class SdUploadFile<TArgs = any> {
     readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     readonly autoId: import("@angular/core").Signal<string | undefined>;
     readonly removeAutoId: (index: number) => string | undefined;
+    readonly dataDisabled: import("@angular/core").Signal<"true" | "false">;
+    readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
+    readonly dataCount: import("@angular/core").Signal<string>;
     readonly args: import("@angular/core").InputSignal<TArgs | undefined>;
     readonly label: import("@angular/core").InputSignal<string | undefined>;
     readonly key: import("@angular/core").InputSignal<string | undefined>;

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

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

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

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

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

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