@sd-angular/core 19.0.0-beta.5 → 19.0.0-beta.51

package/components/mini-editor/src/mini-editor.component.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '@angular/core';
+import { ClassicEditor } from 'ckeditor5';
+import { ControlValueAccessor } from '@angular/forms';
+import { SdMiniEditorOption, SdMiniEditorConfig } from './mini-editor.model';
+import * as i0 from "@angular/core";
+/**
+ * Component sd-mini-editor - Editor đơn giản cho comment input
+ * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)
+ * Hỗ trợ mention và output format (html/markdown)
+ *
+ * @example
+ * ```html
+ * <sd-mini-editor
+ *   [option]="editorOption"
+ *   [(ngModel)]="content"
+ *   (contentChange)="onContentChange($event)"
+ * >
+ * </sd-mini-editor>
+ * ```
+ */
+export declare class SdMiniEditor implements ControlValueAccessor {
+    #private;
+    /** Cấu hình option cho editor */
+    option: SdMiniEditorOption;
+    /** NgModel binding - nội dung HTML/Markdown */
+    value: string;
+    valueChange: EventEmitter<string>;
+    /** Event emitter khi content thay đổi */
+    contentChange: EventEmitter<string>;
+    /** Event emitter khi blur */
+    blur: EventEmitter<FocusEvent>;
+    /** Event emitter khi focus */
+    focus: EventEmitter<FocusEvent>;
+    /** Disabled state */
+    disabled: boolean;
+    Editor: typeof ClassicEditor;
+    get editorConfig(): SdMiniEditorConfig;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Xử lý khi editor ready
+     */
+    onReady(editor: ClassicEditor): void;
+    /**
+     * Set nội dung cho editor
+     */
+    setContent(content: string): void;
+    /**
+     * Get nội dung từ editor
+     */
+    getContent(): string;
+    /**
+     * Get nội dung HTML gốc (không convert)
+     */
+    getHtmlContent(): string;
+    /**
+     * Focus vào editor
+     */
+    focusEditor(): void;
+    /**
+     * Insert mention vào vị trí con trỏ hiện tại
+     */
+    insertMention(item: {
+        id: string;
+        name: string;
+        marker?: string;
+    }): void;
+    /**
+     * Get danh sách mentions trong nội dung
+     */
+    getMentions(): Array<{
+        id: string;
+        name: string;
+        marker: string;
+    }>;
+    /**
+     * ControlValueAccessor: Write value
+     */
+    writeValue(value: string): void;
+    /**
+     * ControlValueAccessor: Register change callback
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * ControlValueAccessor: Register touched callback
+     */
+    registerOnTouched(fn: () => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdMiniEditor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdMiniEditor, "sd-mini-editor", never, { "option": { "alias": "option"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "contentChange": "contentChange"; "blur": "blur"; "focus": "focus"; }, never, never, true, never>;
+}

package/components/mini-editor/src/mini-editor.model.d.ts

@@ -0,0 +1,44 @@
+import { EditorConfig, MentionFeed, MentionFeedObjectItem } from 'ckeditor5';
+export type { MentionFeedObjectItem };
+export type SdMiniEditorOutputFormat = 'html' | 'markdown';
+export interface SdMiniEditorMentionConfig {
+    /** Feed data cho mention - có thể là array hoặc function trả về Promise
+     * CKEditor MentionFeed đã hỗ trợ: marker, minChars, dropdownLimit, itemRenderer
+     */
+    feeds?: MentionFeed[];
+    /** Custom render function cho giá trị mention khi chèn vào editor
+     * Trả về object với text và các attributes tùy chỉnh
+     */
+    valueRender?: (item: MentionFeedObjectItem) => {
+        text: string;
+        attributes?: Record<string, string>;
+    };
+}
+export type SdMiniEditorMentionItem<T = any> = MentionFeedObjectItem & {
+    data?: T;
+};
+export interface SdMiniEditorOption {
+    /** Output format: 'html' hoặc 'markdown' (mặc định: 'html') */
+    outputFormat?: SdMiniEditorOutputFormat;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Chiều cao editor (mặc định: auto) */
+    height?: string;
+    /** Chiều cao tối đa của editor (ví dụ: '300px') */
+    maxHeight?: string;
+    /** Bật/tắt mention plugin */
+    enableMention?: boolean;
+    /** Cấu hình mention */
+    mentionConfig?: SdMiniEditorMentionConfig;
+    /** Callback khi nội dung thay đổi */
+    onChange?: (content: string) => void;
+    /** Callback khi blur */
+    onBlur?: (event: FocusEvent) => void;
+    /** Callback khi focus */
+    onFocus?: (event: FocusEvent) => void;
+    /** Callback khi mention được chọn */
+    onMentionSelect?: (item: SdMiniEditorMentionItem) => void;
+}
+export type SdMiniEditorConfig = EditorConfig & {
+    getOption?: () => SdMiniEditorOption;
+};

package/components/side-drawer/src/side-drawer.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkPortal } from '@angular/cdk/portal';
-import { AfterViewInit, ApplicationRef, ChangeDetectorRef, EventEmitter, Injector, OnDestroy, ElementRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ApplicationRef, ChangeDetectorRef, EventEmitter, Injector, OnDestroy, ViewContainerRef } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdLoadingService } from '@sd-angular/core/services';
 import { Observable } from 'rxjs';
@@ -13,7 +13,6 @@ export declare class SdSideDrawer extends SdBaseSecureComponent implements After
     private loadingService;
     id: string;
     portal: CdkPortal;
-    drawerContainerRef: ElementRef;
     title: string;
     set _title(val: string | null | undefined);
     width: string;

package/components/tab-router/src/components/tab-router-item/tab-router-item.component.d.ts

@@ -1,16 +1,19 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { SdTab, SdTabInfo } from '../../models';
 import { SdTabRouterService } from '../../services/tab-router.service';
+import { Router } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class SdTabRouterItemComponent implements OnInit, OnDestroy {
     #private;
     private cdRef;
     private tabRouterService;
+    private router;
     tab: SdTab;
     tabInfo?: SdTabInfo;
-    constructor(cdRef: ChangeDetectorRef, tabRouterService: SdTabRouterService);
+    constructor(cdRef: ChangeDetectorRef, tabRouterService: SdTabRouterService, router: Router);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    onTabClick: (event: Event) => void;
     close: (event: Event) => void;
     onMousedown: (event: MouseEvent) => void;
     onMouseup: (event: MouseEvent) => void;

package/components/tab-router/src/components/tab-router-outlet/tab-router-outlet.component.d.ts

@@ -1,24 +1,12 @@
-import { ChangeDetectorRef, Injector, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { SdNotifyService } from '@sd-angular/core/services/notify';
+import { OnDestroy } from '@angular/core';
 import { SdTab } from '../../models';
-import { SdTabDecoratorService } from '../../services/tab-decorator.service';
-import { SdTabRouterService } from '../../services/tab-router.service';
 import { SdTabRouterNavComponent } from '../tab-router-nav/tab-router-nav.component';
 import * as i0 from "@angular/core";
 export declare class SdTabRouterOutletComponent implements OnDestroy {
     #private;
-    private router;
-    private activatedRoute;
-    private cd;
-    private injector;
-    private tabDecoratorService;
-    private tabRouterService;
-    private sdNotifyService;
     tabRouterNav?: SdTabRouterNavComponent;
-    tabs: SdTab[];
-    constructor(router: Router, activatedRoute: ActivatedRoute, cd: ChangeDetectorRef, injector: Injector, tabDecoratorService: SdTabDecoratorService, // KHÔNG XÓA
-    tabRouterService: SdTabRouterService, sdNotifyService: SdNotifyService);
+    tabs: import("@angular/core").WritableSignal<SdTab[]>;
+    constructor();
     ngOnDestroy(): void;
     tabTrackBy: (index: number, tab: SdTab) => string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTabRouterOutletComponent, never>;

package/components/table/src/components/column-filter/column-filter.component.d.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectorRef, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, Signal } from '@angular/core';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdTableColumn } from '../../models/table-column.model';
 import { SdOperator } from '@sd-angular/core/utilities';
+import { SdTableColumn } from '../../models/table-column.model';
 import * as i0 from "@angular/core";
 export declare class ColumnFilterComponent implements OnInit, OnDestroy {
     #private;
@@ -22,7 +22,7 @@ export declare class ColumnFilterComponent implements OnInit, OnDestroy {
         display: string;
     }[];
     column: SdTableColumn;
-    items: any[] | SdSearch;
+    items: any[] | Signal<any[]> | SdSearch;
     cacheValues?: Record<string, any[]>;
     set _column(column: SdTableColumn);
     filterChange: EventEmitter<any>;

package/components/table/src/components/external-filter/external-filter.component.d.ts

@@ -26,7 +26,7 @@ export declare class ExternalFilterComponent implements AfterViewInit, OnDestroy
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onKeyupEnter: () => void;
-    onFilter: () => void;
+    onFilter: (externalFilter: SdTableExternalFilter) => void;
     onSubmit: () => void;
     updateFilter: () => void;
     clearFilter: (event?: Event) => void;

package/components/table/src/components/selector-action/action-filter.pipe.d.ts

@@ -2,6 +2,7 @@ import { PipeTransform } from '@angular/core';
 import { SdTableAction } from '../../models/table-option-selector.model';
 import { SdTableItem } from '../../models/table-item.model';
 import { SdButton } from '@sd-angular/core/components/button';
+import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export declare class ActionFilterPipe implements PipeTransform {
     #private;
@@ -13,21 +14,21 @@ export type Action<T = any> = ActionNormal<T> | ActionChildren<T>;
 interface ActionNormal<T = any> {
     variant: 'normal';
     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']>;
     click: (selectedItems?: T[]) => void;
 }
 interface ActionChildren<T = any> {
     variant: 'children';
     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']>;
     children: ActionNormal<T>[];
 }
 export {};

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

@@ -0,0 +1,2 @@
+export * from './sd-table-column-filter-def.directive';
+export * from './sticky-shadow.directive';

package/components/table/src/directives/sd-table-column-filter-def.directive.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdTableColumnFilterDefDirective {
+    templateRef: TemplateRef<any>;
+    sdTableColumnFilterDef?: string;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTableColumnFilterDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableColumnFilterDefDirective, "[sdTableColumnFilterDef]", never, { "sdTableColumnFilterDef": { "alias": "sdTableColumnFilterDef"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/table/src/directives/sticky-shadow.directive.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive thêm hiệu ứng đổ bóng (elevation-2) vào cột sticky cuối cùng bên trái
+ * và cột sticky đầu tiên bên phải, tạo ngăn cách trực quan với phần được scroll.
+ *
+ * Chỉ dùng nội bộ trong sd-table, không chìa ra ngoài.
+ *
+ * Gắn vào scroll container của table:
+ * @example
+ * <div class="c-table" stickyShadow>...</div>
+ */
+export declare class StickyShadowDirective {
+    #private;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StickyShadowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StickyShadowDirective, "[stickyShadow]", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,11 +1,20 @@
-import { TemplateRef } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { SdBadge } from '@sd-angular/core/components/badge';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdColor, SdOperator } from '@sd-angular/core/utilities';
+import { SdNestedKeyOf, SdOperator } from '@sd-angular/core/utilities';
+import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 export type SdTableColumn<T = any> = SdTableColumnText<T> | SdTableColumnNumber<T> | SdTableColumnBool<T> | SdTableColumnDate<T> | SdTableColumnValues<T> | SdTableColumnLazyValues<T> | SdTableColumnChildren<T>;
 export type SdTableColumnTransformFunc<T = any> = (value: any, rowData: T, args?: {
     isExport?: boolean;
 }) => string | Promise<string>;
+interface Badge {
+    type?: SdUnwrapSignal<SdBadge['type']>;
+    color?: SdUnwrapSignal<SdBadge['color']>;
+    icon?: SdUnwrapSignal<SdBadge['icon']>;
+    title?: SdUnwrapSignal<SdBadge['title']>;
+}
+type UseBadgeFunc<T = any> = (value: any, rowData: T) => Badge;
+type UseBadgeValuesFunc<T = any, K = any> = (value: any, rowData: T, items: K[]) => Badge;
 interface SdTableColumnBase<T = any> {
     title: string;
     titleHtml?: string;
@@ -17,12 +26,6 @@ interface SdTableColumnBase<T = any> {
     invisible?: boolean;
     fixed?: boolean;
     align?: 'right';
-    useBadge?: (value: any, rowData: T) => {
-        type?: SdBadge['type'];
-        color?: SdBadge['color'];
-        icon?: SdBadge['icon'];
-        title?: SdBadge['title'];
-    };
     cellStyle?: (value: any, rowData: T) => Record<string, string>;
     htmlTemplate?: (value: any, rowData: T) => string;
     transform?: SdTableColumnTransformFunc<T>;
@@ -45,59 +48,55 @@ interface SdTableColumnBase<T = any> {
     copiable?: boolean;
 }
 interface SdTableColumnText<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'string';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeFunc<T>;
 }
 interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'number';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeFunc<T>;
     filter?: SdTableColumnBase['filter'] & {
         type?: 'split-number';
     };
 }
 interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'boolean';
+    useBadge?: UseBadgeFunc<T>;
     option?: {
         displayOnTrue?: string;
         displayOnFalse?: string;
     };
 }
 interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'date' | 'datetime' | 'time';
+    useBadge?: UseBadgeFunc<T>;
     filter?: SdTableColumnBase['filter'] & {
         type?: 'daterange' | 'date' | 'split-date';
     };
 }
-export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+export interface SdTableColumnValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: SdNestedKeyOf<T>;
     type: 'values';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeValuesFunc<T, K>;
     option: {
-        valueField: string;
-        displayField: string;
-        items: any[] | (() => Promise<any[]>);
-        selection?: 'AUTOCOMPLETE' | 'MULTIPLE' | 'MULTIPLEAUTOCOMPLETE';
+        items: K[] | Signal<K[]> | (() => Promise<K[]>);
+        valueField: SdNestedKeyOf<K>;
+        displayField: SdNestedKeyOf<K>;
+        selection?: 'MULTIPLE';
     };
 }
-export interface SdTableColumnLazyValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+export interface SdTableColumnLazyValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: SdNestedKeyOf<T>;
     type: 'lazy-values';
+    useBadge?: UseBadgeFunc<T>;
     option: {
-        valueField: string;
-        displayField: string;
-        items: SdSearch;
-        views?: (values: string[]) => Promise<any[]>;
-        mapValue?: (value: any, rowData?: T) => string | string[];
+        items: SdSearch<K>;
+        valueField: SdNestedKeyOf<K>;
+        displayField: SdNestedKeyOf<K>;
+        views?: (values: string[]) => Promise<K[]>;
         selection?: 'MULTIPLE';
     };
 }

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-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;
@@ -11,22 +12,22 @@ export interface SdTableOptionSelector<T = any> {
 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,15 +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 { SdTableOptionStyle } from './table-option-style.model';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
     key?: string;
@@ -23,6 +24,7 @@ interface SdTableBaseOption<T = any> {
     group?: SdTableOptionGroup<T>;
     filter?: SdTableOptionFilter;
     commands?: SdTableCommand<T>[];
+    command?: SdTableCommandOption<T>;
     columns: SdTableColumn<T>[];
     style?: SdTableOptionStyle<T>;
 }
@@ -32,7 +34,7 @@ interface SdTableLocalOption<T = any> extends SdTableBaseOption<T> {
 }
 interface SdTableServerOption<T = any> extends SdTableBaseOption<T> {
     type: 'server';
-    items: (filterRequest: SdTableFilterRequest<T>) => Promise<{
+    items: (filterRequest: SdTableFilterRequest<T>, pagingReq: SdPagingReq<T>) => Promise<{
         items: T[];
         total: number;
     }>;

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>;
@@ -20,7 +20,7 @@ export interface TableFilterValue {
 }
 export interface SdTableFilterRequest<T = any> {
     columnOperator: Record<string, SdOperator>;
-    rawColumnFilter: Record<keyof T, any>;
+    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';