@sd-angular/core 19.0.0-beta.2 → 19.0.0-beta.21

package/assets/scss/ckeditor5.scss

@@ -21,11 +21,68 @@
 @import '@ckeditor/ckeditor5-basic-styles/dist/index.css';
 // @import '@ckeditor/ckeditor5-block-quote/dist/index.css';
 @import '@ckeditor/ckeditor5-heading/dist/index.css';
-@import '@ckeditor/ckeditor5-image/dist/index.css';
+// @import '@ckeditor/ckeditor5-image/dist/index.css';
+@import '@ckeditor/ckeditor5-image/dist/index-editor.css';
 @import '@ckeditor/ckeditor5-indent/dist/index.css';
 @import '@ckeditor/ckeditor5-link/dist/index.css';
 @import '@ckeditor/ckeditor5-list/dist/index.css';
 // @import '@ckeditor/ckeditor5-media-embed/dist/index.css';
 @import '@ckeditor/ckeditor5-paste-from-office/dist/index.css';
-@import '@ckeditor/ckeditor5-table/dist/index.css';
+
+// hung.pham16: không sử dụng default styles của ckeditor vì server không hỗ trợ
+// @import '@ckeditor/ckeditor5-table/dist/index.css';
+@import '@ckeditor/ckeditor5-table/dist/index-editor.css';
+
 // @import '@ckeditor/ckeditor5-mention/dist/index.css';
+
+// Custom toolbar
+.ck-editor {
+  /* --- 1. GIẢM KÍCH THƯỚC ICON VÀ CHỮ --- */
+  /* Giảm cỡ chữ trong dropdown (mặc định khoảng 13px) */
+  --ck-font-size-base: 11px !important;
+
+  /* Giảm kích thước Icon (mặc định 20px) */
+  --ck-icon-size: 16px !important;
+
+  /* --- 2. TỐI ƯU KHOẢNG CÁCH (Padding/Margin) --- */
+
+  /* Giảm khoảng cách giữa các nút */
+  --ck-spacing-small: 2px !important;
+  --ck-spacing-standard: 6px !important;
+  --ck-spacing-large: 8px !important;
+
+  /*  */
+  --ck-color-table-focused-cell-background: transparent !important;
+  --ck-table-content-default-border-color: transparent !important;
+
+  //
+  --ck-insert-table-dropdown-padding: 10px;
+  --ck-insert-table-dropdown-box-height: 16px;
+  --ck-insert-table-dropdown-box-width: 16px;
+  --ck-insert-table-dropdown-box-margin: 1px;
+
+  --ck-focus-ring: 1px solid var(--ck-color-base-border);
+}
+
+/* Giảm độ cao của thanh toolbar (cho gọn) */
+.ck-toolbar {
+  min-height: 32px !important; /* Mặc định thường là 40px */
+  padding: 2px !important;
+
+  /* Làm màu nền toolbar nhạt hơn cho hiện đại */
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.ck-toolbar__items {
+  /* Chỉnh nút bấm trong toolbar nhỏ lại */
+  > .ck-button {
+    padding: 2px 4px !important; /* Giảm padding trái phải của nút */
+    min-height: 24px !important;
+  }
+
+  /* Chỉnh lại dropdown (Heading, Font Size) cho khớp */
+  > .ck-dropdown {
+    min-height: 24px !important;
+  }
+}

package/components/avatar/index.d.ts

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

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

@@ -0,0 +1,14 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdAvatar implements OnInit {
+    #private;
+    src: string | undefined | null;
+    size: number;
+    isUrl: boolean;
+    initials: string;
+    bgColor: string;
+    ngOnInit(): void;
+    handleError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/document-builder/src/document-builder.component.d.ts

@@ -7,23 +7,28 @@ export declare class SdDocumentBuilder {
     option: SdDocumentBuilderOption;
     disabled: boolean;
     set _disabled(val: boolean | '' | undefined | null);
+    contentChange: EventEmitter<string>;
     Editor: typeof ClassicEditor;
     config: SdEditorConfig;
-    contentChange: EventEmitter<string>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onReady(editor: ClassicEditor): void;
-    scrollToComment: (markerId: string) => void;
     setContent: (html: string) => void;
     getContent: () => string;
     setOrientation: (orientation: "PORTRAIT" | "LANDSCAPE") => void;
     getOrientation: () => "PORTRAIT" | "LANDSCAPE";
-    getVariables: () => SdDocumentBuilderVariable[];
-    getComments(): SdDocumentBuilderComment[];
     scrollToTop(): void;
     heading: {
-        getHeadings: () => SdDocumentBuilderHeading[];
-        scrollToHeading: (id: string) => void;
+        /**
+         * Lấy tất cả headings trong document
+         * @returns Danh sách tất cả headings
+         */
+        all: () => SdDocumentBuilderHeading[];
+        /**
+         * Scroll tới vị trí của heading
+         * @param id - ID của heading cần scroll tới
+         */
+        scroll: (id: string) => void;
     };
     comment: {
         /**
@@ -37,7 +42,10 @@ export declare class SdDocumentBuilder {
          * @param data - Dữ liệu extra data
          * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
          */
-        add: <T = any>(range: ModelRange, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
+        add: <T = any>(range: ModelRange, comment: string, args?: {
+            markerIdExternal?: string | number;
+            data?: T;
+        }) => SdDocumentBuilderComment<T> | null;
         /**
          * Cập nhật nội dung comment
          * @param markerId - ID của marker
@@ -63,6 +71,18 @@ export declare class SdDocumentBuilder {
          */
         scroll: (markerId: string) => void;
     };
+    variable: {
+        /**
+         * Lấy tất cả variabes trong document
+         * @returns Danh sách tất cả variables
+         */
+        all: <T = any>() => SdDocumentBuilderVariable<T>[];
+        /**
+         * Scroll tới vị trí của variable
+         * @param uuid - uuid của variable FE sẽ tự sinh sau mỗi lần drop vào editor
+         */
+        scroll: (uuid: string) => void;
+    };
     /**
      * Xuất file Word có Header/Footer
      * @param fileName Tên file
@@ -76,6 +96,8 @@ export declare class SdDocumentBuilder {
         header?: string;
         footer?: string;
     }): void;
+    hightSelectRange: (range: ModelRange) => void;
+    removeHighlightSeclectRange: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDocumentBuilder, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdDocumentBuilder, "sd-document-builder", never, { "option": { "alias": "option"; "required": true; }; "_disabled": { "alias": "disabled"; "required": false; }; }, { "contentChange": "contentChange"; }, never, never, true, never>;
 }

package/components/document-builder/src/document-builder.config.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Cấu hình màu cho Document Builder
+ * Bảng màu tập trung và cấu hình cho việc lựa chọn màu nhất quán
+ */
+import { ColorPickerConfig, FontColorConfig, FontSizeConfig, HeadingConfig } from 'ckeditor5';
+/**
+ * Trả về bảng màu chung được sử dụng trong tất cả tính năng của document builder
+ * @returns Mảng các tùy chọn màu được định sẵn với giá trị hex và label
+ */
+export declare function getPresetColors(): FontColorConfig['colors'];
+/**
+ * Trả về cấu hình bộ chọn màu với định dạng hex
+ * @returns Đối tượng cấu hình bộ chọn màu
+ */
+export declare function getColorPickerConfig(): ColorPickerConfig;
+/**
+ * Trả về cấu hình kích thước font cho document builder
+ * @returns Mảng các tùy chọn kích thước font được định sẵn
+ */
+export declare function getFontSizeOptions(): FontSizeConfig['options'];
+export declare function getHeadingOptions(): HeadingConfig['options'];

package/components/document-builder/src/document-builder.model.d.ts

@@ -4,7 +4,7 @@ export type SdEditorConfig = EditorConfig & {
 };
 export interface SdDocumentBuilderOption {
     onDropVariable?: (variable: SdDocumentBuilderVariable, dropIndex: number) => boolean | Promise<boolean | SdDocumentBuilderVariable>;
-    onAddComment?: (range: ModelRange) => void;
+    onAddComment?: (selectedComment: SdDocumentBuilderSelectedComment) => void;
     onSelectComment?: (markerId: string) => void;
     onSelection?: (selection: ModelDocumentSelection, $event: EventInfo<string, unknown>) => void;
     onOrientation?: (orientation: 'PORTRAIT' | 'LANDSCAPE') => void;
@@ -12,10 +12,15 @@ export interface SdDocumentBuilderOption {
 }
 export interface SdDocumentBuilderVariable<T = any> {
     id: string;
+    uuid?: string;
     value: string;
     display: string;
     data?: T;
 }
+export interface SdDocumentBuilderSelectedComment {
+    range: ModelRange;
+    selectedText: string;
+}
 export interface SdDocumentBuilderComment<T = any> {
     markerId: string;
     selectedText: string;

package/components/document-builder/src/document-builder.utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Document Builder Utilities
+ * Các hàm tiện ích cho document builder
+ */
+/**
+ * Chuẩn hóa nội dung bằng cách chuyển đổi tất cả màu HSL và RGB sang hex
+ * @param content - Nội dung HTML cần chuẩn hóa
+ * @returns Nội dung đã được chuẩn hóa với màu hex
+ */
+export declare function normalize(content: string): string;

package/components/document-builder/src/plugins/{table-fit.plugin.d.ts → heading/heading.plugin.d.ts}

@@ -1,4 +1,4 @@
 import { Plugin } from 'ckeditor5';
-export declare class TableFitPlugin extends Plugin {
+export declare class HeadingPlugin extends Plugin {
     init(): void;
 }

package/components/document-builder/src/plugins/highlight-range/highlight-range.plugin.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'ckeditor5';
+export declare class HighlightRangePlugin extends Plugin {
+    init(): void;
+}

package/components/document-builder/src/plugins/image-custom/image-custom.plugin.d.ts

@@ -0,0 +1,31 @@
+import { Plugin } from 'ckeditor5';
+export declare class ImageCustomPlugin extends Plugin {
+    static get pluginName(): "ImageCustomPlugin";
+    init(): void;
+    /**
+     * Xử lý sự kiện chèn ảnh
+     */
+    private handleImageInsert;
+    /**
+     * Xử lý sự kiện thay đổi attribute ảnh
+     */
+    private handleImageAttributeChange;
+    /**
+     * Xử lý sự kiện thay đổi style ảnh - thêm float inline style cho căn chỉnh
+     */
+    private handleImageStyleChange;
+    /**
+     * Áp dụng custom styles cho element ảnh
+     */
+    private applyCustomStyles;
+    /**
+     * Tìm container ck-widget (element figure)
+     * CKEditor wrap ảnh block trong <figure class="ck-widget"><img></figure>
+     */
+    private findWidgetElement;
+    /**
+     * Tìm element img thực tế bên trong widget structure
+     * CKEditor wrap ảnh block trong <figure class="ck-widget"><img></figure>
+     */
+    private findImgElement;
+}

package/components/document-builder/src/plugins/{image-upload.plugin.d.ts → image-upload/image-upload.plugin.d.ts}

@@ -1,8 +1,4 @@
 import { Plugin } from 'ckeditor5';
-/**
- * Custom base64 upload adapter plugin for CKEditor 5.
- * Converts uploaded images to base64 data URLs instead of uploading to a server.
- */
 export declare class ImageUploadPlugin extends Plugin {
     static get pluginName(): "ImageUploadPlugin";
     init(): void;

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

@@ -1,5 +1,7 @@
-export * from './page-orientation.plugin';
-export * from './comment.plugin';
-export * from './variable.plugin';
-export * from './table-fit.plugin';
-export * from './image-upload.plugin';
+export * from './heading/heading.plugin';
+export * from './comment/comment.plugin';
+export * from './variable/variable.plugin';
+export * from './table-fit/table-fit.plugin';
+export * from './image-upload/image-upload.plugin';
+export * from './image-custom/image-custom.plugin';
+export * from './page-orientation/page-orientation.plugin';

package/components/document-builder/src/plugins/table-fit/table-fit.plugin.d.ts

@@ -0,0 +1,29 @@
+import { Plugin } from 'ckeditor5';
+export declare class TableFitPlugin extends Plugin {
+    init(): void;
+    /**
+     * Apply default table width
+     */
+    private _applyTableDefaults;
+    /**
+     * Apply default borders to all cells in a table
+     */
+    private _applyCellBorders;
+    /**
+     * Setup listener to preserve cell/table styles when model changes
+     */
+    private _setupStylePreservationOnModelChange;
+    /**
+     * Find tables that need border fixes from model changes
+     */
+    private _findTablesNeedingFix;
+    /**
+     * Find parent table element
+     */
+    private _findParentTable;
+    /**
+     * Cleanup listeners when plugin is destroyed
+     * Note: this.listenTo() listeners are automatically cleaned up by super.destroy()
+     */
+    destroy(): void;
+}

package/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from '@sd-angular/core/components/avatar';
 export * from '@sd-angular/core/components/button';
 export * from '@sd-angular/core/components/badge';
 export * from '@sd-angular/core/components/tab-router';
@@ -13,3 +14,4 @@ export * from '@sd-angular/core/components/anchor-v2';
 export * from '@sd-angular/core/components/query-builder';
 export * from '@sd-angular/core/components/import-excel';
 export * from '@sd-angular/core/components/document-builder';
+export * from '@sd-angular/core/components/mini-editor';

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

@@ -0,0 +1,2 @@
+export * from './src/mini-editor.model';
+export * from './src/mini-editor.component';

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,42 @@
+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;
+    /** 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/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,7 +1,7 @@
 import { 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 { SdColor, SdNestedKeyOf, SdOperator } from '@sd-angular/core/utilities';
 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;
@@ -45,14 +45,14 @@ 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'];
 }
 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;
@@ -62,7 +62,7 @@ interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
     };
 }
 interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'boolean';
     option?: {
         displayOnTrue?: string;
@@ -70,14 +70,14 @@ interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
     };
 }
 interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'date' | 'datetime' | 'time';
     filter?: SdTableColumnBase['filter'] & {
         type?: 'daterange' | 'date' | 'split-date';
     };
 }
 export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'values';
     badge?: (value: any, rowData: T) => SdColor;
     badgeIcon?: (value: any, rowData: T) => string;
@@ -90,7 +90,7 @@ export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
     };
 }
 export interface SdTableColumnLazyValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'lazy-values';
     option: {
         valueField: string;

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

@@ -1,4 +1,8 @@
 import { 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;

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

@@ -14,7 +14,8 @@ export interface SdTableDisplay {
     badge?: {
         type: SdBadge['type'] | undefined | null;
         color: SdBadge['color'] | undefined | null;
-        icon: string | undefined | null;
+        icon?: string | undefined | null;
+        title?: string | number | null | undefined;
     };
     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.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;
     }>;