@sd-angular/core 19.0.0-beta.8 → 19.0.0-beta.80

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

@@ -1,9 +1,13 @@
-import { SdColor } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';
+export interface SdTableCommandOption<T = any> {
+    align?: 'left' | 'right';
+    commands?: SdTableCommand<T>[];
+}
 export type SdTableCommand<T = any> = SdTableCommandNormal<T> | SdTableCommandChildren<T>;
 export interface SdTableCommandNormal<T = any> {
     color?: SdColor;
     icon?: string | ((rowData: T) => string);
-    fontSet?: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
+    fontSet?: MaterialIconFontSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
@@ -12,7 +16,7 @@ export interface SdTableCommandNormal<T = any> {
 }
 export interface SdTableCommandChildren<T = any> {
     icon?: string | ((rowData: T) => string);
-    fontSet?: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
+    fontSet?: MaterialIconFontSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);

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

@@ -1,4 +1,5 @@
 import { SdBadge } from '@sd-angular/core/components/badge';
+import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 export interface SdTableMetaSelector {
     selectable?: boolean;
     isSelected?: boolean;
@@ -12,10 +13,10 @@ export interface SdTableMetaExpand {
 export interface SdTableDisplay {
     tooltip?: string;
     badge?: {
-        type: SdBadge['type'] | undefined | null;
-        color: SdBadge['color'] | undefined | null;
-        icon?: string | undefined | null;
-        title?: string | number | null | undefined;
+        type: SdUnwrapSignal<SdBadge['type']>;
+        color: SdUnwrapSignal<SdBadge['color']>;
+        icon?: SdUnwrapSignal<SdBadge['icon']>;
+        title?: SdUnwrapSignal<SdBadge['title']>;
     };
     cellStyle?: Record<string, string>;
     data: string | number | undefined | null;

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

@@ -7,6 +7,8 @@ export interface OriginColumn {
     title: string;
     width?: string;
     invisible?: boolean;
+    fixed?: boolean;
+    truncate?: boolean;
 }
 export interface ConfiguredColumn {
     origin: OriginColumn;
@@ -14,6 +16,7 @@ export interface ConfiguredColumn {
     width?: string;
     invisible?: boolean;
     fixed?: boolean;
+    truncate?: boolean;
 }
 export interface ConfiguredTable {
     columns?: ConfiguredColumn[];

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

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

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

@@ -1,4 +1,5 @@
 import { SdButton } from '@sd-angular/core/components/button';
+import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 export interface SdTableOptionSelector<T = any> {
     visible?: boolean;
     single?: boolean;
@@ -7,26 +8,32 @@ export interface SdTableOptionSelector<T = any> {
     onSelect?: (rowData?: T, selectedItems?: T[]) => void;
     onSelectAll?: (selectedItems: T[]) => void;
     disabled?: (rowData?: T, selectedItems?: T[]) => boolean;
+    /**
+     * Predicate để tự động pre-select item sau mỗi lần load.
+     * Table sẽ gọi hàm này cho từng item và set isSelected = true nếu trả về true.
+     * Dùng khi cần programmatically set selected items từ bên ngoài.
+     */
+    defaultSelected?: (rowData: T) => boolean;
 }
 export type SdTableAction<T = any> = SdTableActionNormal<T> | SdTableActionChildren<T>;
 export interface SdTableActionNormal<T = any> {
     icon?: string;
-    fontSet?: SdButton['fontSet'];
-    tooltip?: SdButton['tooltip'];
-    title?: SdButton['title'];
-    color?: SdButton['color'];
-    type?: SdButton['type'];
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    title?: SdUnwrapSignal<SdButton['title']>;
+    color?: SdUnwrapSignal<SdButton['color']>;
+    type?: SdUnwrapSignal<SdButton['type']>;
     hidden?: boolean | ((rowData?: T) => boolean);
     isGrouped?: boolean;
     click: (selectedItems?: T[]) => void;
 }
 interface SdTableActionChildren<T = any> {
     icon?: string;
-    fontSet?: SdButton['fontSet'];
-    tooltip?: SdButton['tooltip'];
-    title?: SdButton['title'];
-    color?: SdButton['color'];
-    type?: SdButton['type'];
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    title?: SdUnwrapSignal<SdButton['title']>;
+    color?: SdUnwrapSignal<SdButton['color']>;
+    type?: SdUnwrapSignal<SdButton['type']>;
     hidden?: boolean | ((rowData?: T) => boolean);
     isGrouped?: boolean;
     children: SdTableActionNormal<T>[];

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

@@ -1,16 +1,16 @@
-import { SdTableColumn } from './table-column.model';
-import { SdTableCommand } from './table-command.model';
+import { SdPagingReq } from '@sd-angular/core/utilities';
 import { SdTableFilterRequest, SdTableOptionFilter } from '../services/table-filter/table-filter.model';
+import { SdTableColumn } from './table-column.model';
+import { SdTableCommand, SdTableCommandOption } from './table-command.model';
+import { TableOptionConfig } from './table-option-config.model';
+import { SdTableOptionExpand } from './table-option-expand.model';
 import { SdTableOptionExport } from './table-option-export.model';
+import { SdTableOptionGroup } from './table-option-group.model';
+import { SdTableOptionPaginate } from './table-option-paginate.model';
 import { SdTableOptionReload } from './table-option-reload.model';
-import { SdTableOptionExpand } from './table-option-expand.model';
 import { SdTableOptionSelector } from './table-option-selector.model';
-import { SdTableOptionStyle } from './table-option-style.model';
-import { SdTableOptionGroup } from './table-option-group.model';
 import { SdTableOptionSort } from './table-option-sort.model';
-import { SdTableOptionPaginate } from './table-option-paginate.model';
-import { TableOptionConfig } from './table-option-config.model';
-import { SdPagingReq } from '@sd-angular/core/utilities';
+import { SdTableOptionStyle } from './table-option-style.model';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
     key?: string;
@@ -23,7 +23,14 @@ interface SdTableBaseOption<T = any> {
     export?: SdTableOptionExport<T>;
     group?: SdTableOptionGroup<T>;
     filter?: SdTableOptionFilter;
+    rowReorder?: {
+        enabled?: boolean;
+        onChange?: (newRows: T[], movedItem: T, fromIndex: number, toIndex: number) => void;
+        icon?: string;
+        disabled?: (row: T, index: number) => boolean;
+    };
     commands?: SdTableCommand<T>[];
+    command?: SdTableCommandOption<T>;
     columns: SdTableColumn<T>[];
     style?: SdTableOptionStyle<T>;
 }

package/components/table/src/services/index.d.ts

@@ -0,0 +1,3 @@
+export * from './table-export/table-export.service';
+export * from './table-format/table-format.service';
+export * from './config.service';

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

@@ -0,0 +1,26 @@
+import { SdExcelColumn } from '@sd-angular/core/services';
+import { ConfiguredTableResult } from '../../models/table-option-config.model';
+import { SdTableOption } from '../../models/table-option.model';
+import { SdTableFilterRequest } from '../table-filter/table-filter.model';
+import * as i0 from "@angular/core";
+export interface SdTableExportContext<T = any> {
+    option: SdTableOption<T>;
+    configuration?: ConfiguredTableResult;
+    total: number;
+    cacheObjValues: Record<string, Record<string, string>>;
+    fetchChunk: (pageNumber: number, pageSize: number) => Promise<T[] | {
+        items: any[];
+        total: number;
+    }>;
+    getFilterInfo: () => SdTableFilterRequest;
+}
+export declare class TableExportService {
+    #private;
+    exporting: import("@angular/core").WritableSignal<boolean>;
+    exportTitle: import("@angular/core").WritableSignal<string>;
+    exportExcel: (context: SdTableExportContext, columns?: SdExcelColumn[]) => Promise<void>;
+    exportCSV: (context: SdTableExportContext, columns?: SdExcelColumn[]) => Promise<void>;
+    exportCustom: (context: SdTableExportContext) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableExportService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TableExportService>;
+}

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

@@ -1,8 +1,8 @@
-import { Observable } from 'rxjs';
-import { SdTableColumn } from '../../models/table-column.model';
 import { TemplateRef } from '@angular/core';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdOperator, SdOrder, SdPagingReq } from '@sd-angular/core/utilities';
+import { SdNestedKeyOf, SdOperator, SdOrder, SdPagingReq } from '@sd-angular/core/utilities';
+import { Observable } from 'rxjs';
+import { SdTableColumn } from '../../models/table-column.model';
 export interface SdTableQuickFilter {
     code: string;
     columnFilter: Record<string, any>;
@@ -19,8 +19,8 @@ export interface TableFilterValue {
     filtered?: boolean;
 }
 export interface SdTableFilterRequest<T = any> {
-    columnOperator: Record<string, SdOperator>;
-    rawColumnFilter: Record<keyof T, any>;
+    columnOperator: Record<SdNestedKeyOf<T>, SdOperator>;
+    rawColumnFilter: Record<SdNestedKeyOf<T>, any>;
     rawExternalFilter: Record<string, any>;
     pageNumber: number;
     pageSize: number;
@@ -68,6 +68,7 @@ interface BaseFilter<TData = any> {
     hidden?: boolean;
     defaultOperator?: SdOperator;
     data?: TData;
+    onChange?: (value: any) => void;
 }
 interface TextFilter<TData = any> extends BaseFilter<TData> {
     type: 'string';

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

@@ -0,0 +1,16 @@
+import { SdTableColumn } from '../../models/table-column.model';
+import { SdTableItem } from '../../models/table-item.model';
+import * as i0 from "@angular/core";
+export declare class TableFormatService {
+    #private;
+    /**
+     * Tải và cache các giá trị từ điển cho cột 'values'
+     */
+    loadValues(columns: SdTableColumn[], cacheValues: Record<string, any[]>, cacheObjValues: Record<string, Record<string, string>>): Promise<void>;
+    /**
+     * Chuyển đổi dữ liệu thô thành SdTableItem kèm các thiết lập hiển thị (Display Meta)
+     */
+    format<T = any>(rawItems: T[], columns: SdTableColumn[], cacheValues: Record<string, any[]>, cacheObjValues: Record<string, Record<string, string>>): Promise<SdTableItem<T>[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFormatService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TableFormatService>;
+}

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

@@ -1,19 +1,20 @@
-import { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
-import { SdExcelColumn, SdExcelService, SdNotifyService } from '@sd-angular/core/services';
+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 { 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';
 import { SdTableColumn } from './models/table-column.model';
 import { SdTableOption } from './models/table-option.model';
-import { TableFilterRegister } from './services/table-filter/table-filter.model';
+import { SdTableFilterRequest, TableFilterRegister } from './services/table-filter/table-filter.model';
+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 { SdFormatNumberPipe } from '@sd-angular/core/pipes';
 import { SdOperator } from '@sd-angular/core/utilities';
 import { ExternalFilterComponent } from './components';
 import { ConfigComponent } from './components/config/config.component';
@@ -21,8 +22,6 @@ import { SdPopupExport } from './components/popup-export/popup-export.component'
 import { ISdTableConfiguration } from './configurations';
 import { SdTableItem } from './models/table-item.model';
 import { ConfiguredTableResult } from './models/table-option-config.model';
-import { ConfigService } from './services/config.service';
-import { SdTableFilterService } from './services/table-filter/table-filter.service';
 import * as i0 from "@angular/core";
 export declare class MatPaginatorIntlCro extends MatPaginatorIntl {
     firstPageLabel: string;
@@ -36,60 +35,51 @@ export declare class MatPaginatorIntlCro extends MatPaginatorIntl {
 }
 export declare class SdTable<T = unknown> extends SdBaseSecureComponent implements OnInit, AfterViewInit, OnDestroy {
     #private;
-    private ref;
-    private formatNumberPipe;
-    tableConfiguration: ISdTableConfiguration | undefined;
-    private configService;
-    private excelService;
-    private notifyService;
-    private gridFilterService;
-    autoId?: string;
-    set _autoId(val: string | undefined | null);
-    table?: MatTable<any>;
-    configComponent?: ConfigComponent;
-    sdPopupExport?: SdPopupExport;
-    scroll?: SdScrollDirective;
+    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    autoId: import("@angular/core").Signal<string | undefined>;
+    option: import("@angular/core").InputSignal<SdTableOption<T>>;
+    table: import("@angular/core").Signal<MatTable<any> | undefined>;
+    configComponent: import("@angular/core").Signal<ConfigComponent | undefined>;
+    sdPopupExport: import("@angular/core").Signal<SdPopupExport | undefined>;
+    scroll: import("@angular/core").Signal<SdScrollDirective | undefined>;
+    quickAction: import("@angular/core").Signal<SdQuickAction | undefined>;
+    externalFilter: import("@angular/core").Signal<ExternalFilterComponent | 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[]>;
+    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>>;
+    hasFooter: import("@angular/core").Signal<boolean>;
+    titleDef: import("@angular/core").Signal<Record<string, SdTableTitleDefDirective>>;
+    tableOption: import("@angular/core").WritableSignal<SdTableOption<T> | undefined>;
+    configuration: import("@angular/core").WritableSignal<ConfiguredTableResult | undefined>;
+    items: import("@angular/core").WritableSignal<SdTableItem<T>[]>;
+    selectedTableItems: import("@angular/core").WritableSignal<SdTableItem<T>[]>;
+    total: import("@angular/core").WritableSignal<number | undefined>;
+    loading: import("@angular/core").WritableSignal<boolean>;
+    exporting: import("@angular/core").WritableSignal<boolean>;
+    isSelectAll: import("@angular/core").WritableSignal<boolean>;
+    exportTitle: import("@angular/core").WritableSignal<string>;
+    isFiltered: import("@angular/core").WritableSignal<boolean>;
+    requireFiltered: import("@angular/core").WritableSignal<boolean>;
     filterRegister: TableFilterRegister;
     key: string;
-    quickAction?: SdQuickAction;
-    externalFilter?: ExternalFilterComponent;
-    tableOption: SdTableOption<T>;
-    configuration?: ConfiguredTableResult;
-    set option(option: SdTableOption);
-    items: SdTableItem<T>[];
-    selectedTableItems: SdTableItem<T>[];
-    total?: number;
-    loading: boolean;
-    isHiddenPaginator: boolean;
-    set paginator(paginator: MatPaginator);
-    set sort(sort: MatSort);
-    sdSubInformation?: SdMaterialSubInformationDefDirective;
-    sdCellDefs: QueryList<SdTabelCellDefDirective>;
-    cellDef: Record<string, SdTabelCellDefDirective>;
-    sdFooterDefs: QueryList<SdMaterialFooterDefDirective>;
-    footerDef: Record<string, SdMaterialFooterDefDirective>;
-    hasFooter: boolean;
-    sdFilterDefs: QueryList<SdTableFilterDefDirective>;
-    filterDefs: SdTableFilterDefDirective[];
     columnOperator: Record<string, SdOperator>;
     columnFilter?: Record<string, any>;
-    exporting: boolean;
-    isSelectAll: boolean;
-    exportTitle: string;
     cacheValues: Record<string, any[]>;
-    constructor(ref: ChangeDetectorRef, formatNumberPipe: SdFormatNumberPipe, tableConfiguration: ISdTableConfiguration | undefined, configService: ConfigService, excelService: SdExcelService, notifyService: SdNotifyService, gridFilterService: SdTableFilterService);
+    tableConfiguration: ISdTableConfiguration | null;
+    constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    isFiltered: boolean;
-    requireFiltered: boolean;
+    getFilterRequest: () => SdTableFilterRequest;
     reload: (force?: boolean, scrollTop?: boolean) => Promise<void>;
-    onExport: (args?: {
-        columns?: SdExcelColumn[];
-        isCSV?: boolean;
-    }) => Promise<void>;
-    exportExcel: () => void;
-    exportCSV: () => void;
+    exportExcel: (columns?: SdExcelColumn[]) => void;
+    exportCSV: (columns?: SdExcelColumn[]) => void;
     exportCustom: () => void;
     onFilterChange: () => void;
     onExpand: (rowData: SdTableItem<T>) => Promise<void>;
@@ -106,6 +96,9 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     detectChanges: () => void;
     onOperatorChange: (column: SdTableColumn, operator: SdOperator) => void;
     trackBy: (index: number, item: SdTableItem) => string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, [null, null, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "_autoId": { "alias": "autoId"; "required": false; }; "option": { "alias": "option"; "required": false; }; }, {}, ["sdSubInformation", "sdCellDefs", "sdFooterDefs", "sdFilterDefs"], ["[sdTableTop]"], true, never>;
+    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>;
 }

package/components/upload-file/src/configurations/upload-file.configuration.d.ts

@@ -1,17 +1,50 @@
 import { InjectionToken } from '@angular/core';
+/**
+ * Contract cấu hình cho cơ chế upload file của sd-angular.
+ *
+ * Cách dùng phổ biến:
+ * - Portal có thể provide cấu hình mặc định ở tầng global.
+ * - Mỗi module có thể provide thêm cấu hình riêng (thường với `multi: true`).
+ * - Khi có nhiều cấu hình cùng lúc, dùng `key` để chọn đúng provider.
+ *
+ * Luồng xử lý:
+ * 1) `upload`: upload file mới, trả về danh sách id/key.
+ * 2) `details`: lấy metadata để render danh sách file từ id/key.
+ * 3) `download` (optional): tải file theo id/key.
+ */
 export interface ISdUploadFileConfiguration<TArgs = any> {
+    /**
+     * Định danh cấu hình upload.
+     * Bắt buộc khi app có nhiều provider upload để tránh mapping nhầm.
+     */
+    key?: string;
+    /** Upload file và trả về danh sách id/key dùng cho lưu trữ. */
     upload: SdUploadFileFuncUpload<TArgs>;
+    /** Nhận danh sách id/key và trả về dữ liệu hiển thị file trong UI. */
     details: SdUploadFileFuncDetails<TArgs>;
+    /** Tùy chọn: tải file về theo id/key. */
     download?: SdUploadFileFuncDownload<TArgs>;
 }
-export declare const SD_UPLOAD_FILE_CONFIG: InjectionToken<ISdUploadFileConfiguration<any>>;
+/**
+ * Token DI cho upload configuration.
+ * Khuyến nghị provide dạng `multi: true` để hỗ trợ nhiều nguồn upload trong cùng app/module.
+ */
+export declare const SD_UPLOAD_FILE_CONFIGURATION: InjectionToken<ISdUploadFileConfiguration<any>>;
+/** Hàm upload file và trả về danh sách id/key tương ứng. */
 export type SdUploadFileFuncUpload<TArgs> = (files: File[], args?: TArgs) => Promise<string[]>;
+/** Hàm lấy thông tin file phục vụ hiển thị từ danh sách id/key. */
 export type SdUploadFileFuncDetails<TArgs> = (idOrKey: (string | number)[], args?: TArgs) => Promise<SdUploadFileDetail[]>;
+/** Hàm tải file theo id/key. */
 export type SdUploadFileFuncDownload<TArgs> = (idOrKey: string | number, args?: TArgs) => Promise<void>;
 export interface SdUploadFileDetail {
+    /** Định danh file được backend trả về sau upload. */
     idOrKey: string;
+    /** URL truy cập file (CDN hoặc direct URL). */
     cdn: string;
+    /** Tên hiển thị file. */
     name?: string;
+    /** Đuôi file: png, jpg, pdf... */
     extension?: string;
+    /** Dung lượng file tính theo MB (nếu backend có trả về). */
     size?: number;
 }

package/components/upload-file/src/services/upload-file.service.d.ts

@@ -1,7 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class UploadFileService {
     #private;
-    constructor();
     isHashedKey: (key: string) => boolean;
     get: (key: string) => File | null;
     add: (file: File) => string | null;

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

@@ -1,69 +1,67 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
-import { FormGroup, NgForm } from '@angular/forms';
+import { ElementRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { SdLabelDefDirective } from '@sd-angular/core/forms/directives';
 import { SdFormControl } from '@sd-angular/core/forms/models';
-import { SdConfirmService, SdNotifyService } from '@sd-angular/core/services';
 import { PreviewComponent } from './components/preview/preview.component';
-import { ISdUploadFileConfiguration, SdUploadFileFuncDetails } from './configurations';
-import { PreviewFile, UploadFileService } from './services';
+import { SdUploadFileFuncDownload, SdUploadFileFuncDetails, SdUploadFileFuncUpload } from './configurations';
+import { PreviewFile } from './services';
 import * as i0 from "@angular/core";
-export declare class SdUploadFile<TArgs = any> implements AfterViewInit, OnDestroy {
+export declare class SdUploadFile<TArgs = any> {
     #private;
-    private ref;
-    private notifyService;
-    private confirmService;
-    private readonly uploadFileConfig;
-    private uploadFileService;
-    previewFile?: PreviewComponent;
-    id: string;
-    selectedFile?: PreviewFile | null;
-    formControl: SdFormControl;
-    set _form(val: NgForm | FormGroup);
-    set _name(val: string | undefined);
-    args?: TArgs;
-    label?: string;
-    helperText?: string;
-    set _helperText(val: string | undefined);
-    description?: string;
-    type: 'image' | 'document' | 'file';
-    set _type(type: 'image' | 'document' | 'file' | undefined | null);
-    set disabled(val: boolean | '' | undefined | null);
-    required: boolean;
-    set _required(val: boolean | '' | undefined | null);
-    extensions: string[];
-    set _extensions(extensions: string[] | undefined | null);
-    max: number;
-    set _max(max: number | undefined | null);
-    maxOfImage: number;
-    set _maxOfImage(value: number | undefined | null);
-    maxSize?: number;
-    maxWidth?: number;
-    maxHeight?: number;
-    scaleToPixel?: number;
-    previewWidth: string;
-    previewHeight: string;
-    align: 'left' | 'center';
-    details?: SdUploadFileFuncDetails<any>;
-    imageValidator?: (image: HTMLImageElement) => string;
-    previewFiles: PreviewFile[];
-    set model(model: (string | number | undefined | null)[] | undefined | null);
-    loaded: EventEmitter<PreviewFile[]>;
-    modelChange: EventEmitter<(string | number)[]>;
-    filesChanged: EventEmitter<(string | File)[]>;
-    dropElements?: QueryList<ElementRef>;
-    canvas?: ElementRef;
-    sdLabelDef?: SdLabelDefDirective;
-    constructor(ref: ChangeDetectorRef, notifyService: SdNotifyService, confirmService: SdConfirmService, uploadFileConfig: ISdUploadFileConfiguration, uploadFileService: UploadFileService);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    readonly id: string;
+    readonly formControl: SdFormControl;
+    readonly previewFiles: import("@angular/core").WritableSignal<PreviewFile[]>;
+    readonly selectedFile: import("@angular/core").WritableSignal<PreviewFile | null | undefined>;
+    readonly previewFileComponent: import("@angular/core").Signal<PreviewComponent | undefined>;
+    readonly dropElements: import("@angular/core").Signal<readonly ElementRef<any>[]>;
+    readonly sdLabelDef: import("@angular/core").Signal<SdLabelDefDirective | undefined>;
+    readonly args: import("@angular/core").InputSignal<TArgs | undefined>;
+    readonly label: import("@angular/core").InputSignal<string | undefined>;
+    readonly key: import("@angular/core").InputSignal<string | undefined>;
+    readonly description: import("@angular/core").InputSignal<string | undefined>;
+    readonly previewWidth: import("@angular/core").InputSignal<string>;
+    readonly previewHeight: import("@angular/core").InputSignal<string>;
+    readonly align: import("@angular/core").InputSignal<"left" | "center">;
+    readonly uploadInput: import("@angular/core").InputSignal<SdUploadFileFuncUpload<any> | undefined>;
+    readonly details: import("@angular/core").InputSignal<SdUploadFileFuncDetails<any> | undefined>;
+    readonly downloadInput: import("@angular/core").InputSignal<SdUploadFileFuncDownload<any> | undefined>;
+    readonly imageValidator: import("@angular/core").InputSignal<((image: HTMLImageElement) => string) | undefined>;
+    readonly maxSize: import("@angular/core").InputSignal<number | undefined>;
+    readonly maxWidth: import("@angular/core").InputSignal<number | undefined>;
+    readonly maxHeight: import("@angular/core").InputSignal<number | undefined>;
+    readonly scaleToPixel: import("@angular/core").InputSignal<number | undefined>;
+    form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
+    readonly nameInput: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | null | undefined>;
+    readonly type: import("@angular/core").InputSignalWithTransform<"image" | "document" | "file", "image" | "document" | "file" | null | undefined>;
+    readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
+    readonly maxOfImage: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
+    readonly extensions: import("@angular/core").InputSignalWithTransform<string[], string[] | null | undefined>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, boolean | "" | null | undefined>;
+    readonly generatedDescription: import("@angular/core").Signal<string | undefined>;
+    readonly loaded: import("@angular/core").OutputEmitterRef<PreviewFile[]>;
+    readonly filesChanged: import("@angular/core").OutputEmitterRef<(string | File)[]>;
+    readonly model: import("@angular/core").ModelSignal<(string | number)[]>;
+    constructor();
     onUpload: () => void;
     onRemove: (file: PreviewFile) => void;
     onDrop: (event: CdkDragDrop<string[]>) => void;
     onImgError: (previewFile: PreviewFile) => void;
     onSelect: (file: PreviewFile) => void;
+    /**
+     * Lấy danh sách các File từ previewFiles (chưa upload).
+     */
     getFiles: () => Promise<File[]>;
+    /**
+     * Thực hiện upload các file và gán giá trị, output trả ra mảng idOrKeys.
+     * HÀM NÀY BẮT BUỘC PHẢI GỌI TRƯỚC KHI GỌI VỀ SERVER.
+     */
     upload: () => Promise<void>;
+    /**
+     * Mở popup preview ảnh.
+     */
     preview: () => Promise<void>;
     /**
      * Tải xuống một tệp tin dựa trên đối tượng PreviewFile.
@@ -77,5 +75,5 @@ export declare class SdUploadFile<TArgs = any> implements AfterViewInit, OnDestr
     onDownload: (previewFile: PreviewFile) => void;
     isLastVisibleOverlay(fileIndex: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdUploadFile<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "_form": { "alias": "form"; "required": false; }; "_name": { "alias": "name"; "required": false; }; "args": { "alias": "args"; "required": false; }; "label": { "alias": "label"; "required": false; }; "_helperText": { "alias": "helperText"; "required": false; }; "description": { "alias": "description"; "required": false; }; "_type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "_required": { "alias": "required"; "required": false; }; "_extensions": { "alias": "extensions"; "required": false; }; "_max": { "alias": "max"; "required": false; }; "_maxOfImage": { "alias": "maxOfImage"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; }; "previewWidth": { "alias": "previewWidth"; "required": false; }; "previewHeight": { "alias": "previewHeight"; "required": false; }; "align": { "alias": "align"; "required": false; }; "details": { "alias": "details"; "required": false; }; "imageValidator": { "alias": "imageValidator"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "loaded": "loaded"; "modelChange": "modelChange"; "filesChanged": "filesChanged"; }, ["sdLabelDef"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "args": { "alias": "args"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "previewHeight": { "alias": "previewHeight"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "uploadInput": { "alias": "upload"; "required": false; "isSignal": true; }; "details": { "alias": "details"; "required": false; "isSignal": true; }; "downloadInput": { "alias": "download"; "required": false; "isSignal": true; }; "imageValidator": { "alias": "imageValidator"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "nameInput": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxOfImage": { "alias": "maxOfImage"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "loaded": "loaded"; "filesChanged": "filesChanged"; "model": "modelChange"; }, ["sdLabelDef"], never, true, never>;
 }

package/components/view/index.d.ts

@@ -0,0 +1 @@
+export * from './src/view.component';