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

package/components/autoid-inspector/index.d.ts

@@ -0,0 +1,8 @@
+export * from './src/autoid-inspector.component';
+export * from './src/models/autoid-element.model';
+export * from './src/models/autoid-inspector-config.model';
+export * from './src/models/autoid-export-format.model';
+export * from './src/services/autoid-scanner.service';
+export * from './src/services/autoid-audit.service';
+export * from './src/services/autoid-highlight.service';
+export * from './src/services/autoid-export.service';

package/components/autoid-inspector/src/autoid-inspector.component.d.ts

@@ -0,0 +1,37 @@
+import { OnDestroy } from '@angular/core';
+import { SdAutoidElement, SdAutoidAuditResult } from './models/autoid-element.model';
+import { SdAutoidInspectorConfig } from './models/autoid-inspector-config.model';
+import * as i0 from "@angular/core";
+type Segment = 'audit' | 'elements' | 'export';
+export declare class SdAutoidInspector implements OnDestroy {
+    #private;
+    enabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    config: import("@angular/core").InputSignal<SdAutoidInspectorConfig | undefined>;
+    open: import("@angular/core").WritableSignal<boolean>;
+    segment: import("@angular/core").WritableSignal<Segment>;
+    filter: import("@angular/core").WritableSignal<string>;
+    elements: import("@angular/core").WritableSignal<SdAutoidElement[]>;
+    audit: import("@angular/core").WritableSignal<SdAutoidAuditResult | null>;
+    copyOk: import("@angular/core").WritableSignal<boolean>;
+    highlightOn: import("@angular/core").WritableSignal<boolean>;
+    dismissed: import("@angular/core").WritableSignal<boolean>;
+    filteredElements: import("@angular/core").Signal<SdAutoidElement[]>;
+    ngOnDestroy(): void;
+    togglePanel: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    refresh: () => void;
+    dismissFab: (event: Event) => void;
+    toggleHighlight: () => void;
+    setSegment: (seg: Segment) => void;
+    copyJson: () => Promise<void>;
+    copyXpath: (autoid: string) => Promise<void>;
+    exportCsv: () => void;
+    exportJson: () => void;
+    exportMdPom: () => void;
+    exportMdTable: () => void;
+    onEscape(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidInspector, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAutoidInspector, "sd-autoid-inspector", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/components/autoid-inspector/src/models/autoid-element.model.d.ts

@@ -0,0 +1,22 @@
+export interface SdAutoidElement {
+    stt: number;
+    name: string;
+    autoid: string;
+    tag: string;
+    value: string;
+    xpath: string;
+    duplicate: boolean;
+}
+export interface SdAutoidMissing {
+    tag: string;
+    selector: string;
+    outerHtmlPreview: string;
+    nameHint: string;
+}
+export interface SdAutoidAuditResult {
+    total: number;
+    duplicates: Record<string, number>;
+    duplicateCount: number;
+    missing: SdAutoidMissing[];
+    missingCount: number;
+}

package/components/autoid-inspector/src/models/autoid-export-format.model.d.ts

@@ -0,0 +1,6 @@
+export type SdAutoidExportFormat = 'csv' | 'json' | 'md-pom' | 'md-table';
+export interface SdAutoidExportMeta {
+    pageUrl: string;
+    pageTitle: string;
+    timestamp: string;
+}

package/components/autoid-inspector/src/models/autoid-inspector-config.model.d.ts

@@ -0,0 +1,8 @@
+export interface SdAutoidInspectorConfig {
+    /** Selector phụ thêm cần audit (mặc định component đã cover sd-* form + sd-button). */
+    extraRequireSelectors?: string[];
+    /** Root scan, mặc định document.body. */
+    root?: HTMLElement;
+}
+/** Selector mặc định coi là phải có data-autoid. */
+export declare const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS: ReadonlyArray<string>;

package/components/autoid-inspector/src/services/autoid-audit.service.d.ts

@@ -0,0 +1,19 @@
+import { SdAutoidElement, SdAutoidAuditResult } from '../models/autoid-element.model';
+import * as i0 from "@angular/core";
+export declare class SdAutoidAuditService {
+    /**
+     * Audit kết quả scan + DOM:
+     * - duplicates: map autoid → count khi count > 1
+     * - missing: element khớp selector yêu cầu nhưng KHÔNG có [data-autoid]
+     */
+    audit(elements: SdAutoidElement[], options?: {
+        requireSelectors?: ReadonlyArray<string>;
+        root?: HTMLElement;
+    }): SdAutoidAuditResult;
+    private findMissing;
+    private buildSelectorPath;
+    private shortHtml;
+    private resolveNameHint;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidAuditService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidAuditService>;
+}

package/components/autoid-inspector/src/services/autoid-export.service.d.ts

@@ -0,0 +1,19 @@
+import { SdAutoidElement } from '../models/autoid-element.model';
+import { SdAutoidExportMeta } from '../models/autoid-export-format.model';
+import * as i0 from "@angular/core";
+export declare class SdAutoidExportService {
+    toJson(elements: SdAutoidElement[]): string;
+    toCsv(elements: SdAutoidElement[]): string;
+    /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
+    toMarkdownPom(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    /** Markdown reference table, group theo tag sd-*. */
+    toMarkdownTable(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    download(content: string, filename: string, mime: string): void;
+    copyToClipboard(content: string): Promise<void>;
+    private q;
+    private mdCell;
+    private toCamel;
+    private toPascal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidExportService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidExportService>;
+}

package/components/autoid-inspector/src/services/autoid-highlight.service.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class SdAutoidHighlightService {
+    #private;
+    /** Apply outline cho mọi [data-autoid]: xanh nếu unique, đỏ nếu duplicate. Idempotent. */
+    apply(root?: HTMLElement): void;
+    /** Highlight tập element không có autoid (missing) bằng outline cam dashed. */
+    applyMissing(nodes: HTMLElement[]): void;
+    /** Restore inline style như trước khi apply. */
+    clear(root?: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidHighlightService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidHighlightService>;
+}

package/components/autoid-inspector/src/services/autoid-scanner.service.d.ts

@@ -0,0 +1,13 @@
+import { SdAutoidElement } from '../models/autoid-element.model';
+import * as i0 from "@angular/core";
+export declare class SdAutoidScannerService {
+    /** Quét toàn bộ element có [data-autoid] trong root, gắn thông tin name/tag/value/xpath. */
+    scan(root?: HTMLElement): SdAutoidElement[];
+    /** Group element theo autoid để consumer lấy duplicate map. */
+    groupByAutoid(elements: SdAutoidElement[]): Record<string, SdAutoidElement[]>;
+    private resolveName;
+    private resolveSdTag;
+    private resolveValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidScannerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidScannerService>;
+}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { I18nService } from '@sd-angular/core/i18n';
+import { DocumentBuilderI18n } from '../../document-builder.model';
 import { ClassicEditor, EditorConfig } from 'ckeditor5';
 import * as i0 from "@angular/core";
 export declare class SdHeaderFooterBuilder {
@@ -8,7 +8,7 @@ export declare class SdHeaderFooterBuilder {
     set model(value: string | undefined | null);
     modelChange: EventEmitter<string>;
     config: EditorConfig & {
-        _i18n?: I18nService;
+        _i18n?: DocumentBuilderI18n;
     };
     onReady(editor: ClassicEditor): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdHeaderFooterBuilder, never>;

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

@@ -1,9 +1,13 @@
 import { EditorConfig, EventInfo, ModelDocumentSelection, ViewDataTransfer } from 'ckeditor5';
-import { I18nService } from '@sd-angular/core/i18n';
+import { I18nParams } from '@sd-angular/core/i18n';
 import { CkCommentConfig } from './plugins/ck-comment/ck-comment.plugin.model';
+/** Plain translator cho CKEditor plugin — tránh truyền thẳng I18nService (private fields mất `this` qua config). */
+export interface DocumentBuilderI18n {
+    t(key: string, params?: I18nParams): string;
+}
 export type DocumentBuilderOption = EditorConfig & {
     getOption?: () => SdDocumentBuilderOption;
-    _i18n?: I18nService;
+    _i18n?: DocumentBuilderI18n;
 };
 export interface SdDocumentBuilderOption {
     onDropVariable?: (variable: SdDocumentBuilderVariable) => boolean | Promise<boolean | SdDocumentBuilderVariable>;

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

@@ -36,6 +36,14 @@ export declare class SdEditor {
     constructor();
     onReady: (editor: ClassicEditor) => void;
     focusEditor: () => void | undefined;
+    /**
+     * Xử lý tải lên các file và trả về nội dung dữ liệu cuối cùng.
+     * * @description
+     * - Đối với các file upload chế độ 'deferred' (chỉ xử lý khi submit), cần @ViewChild component và gọi hàm upload() này.
+     * - Hỗ trợ two-way binding.
+     * - Hàm hỗ trợ trả ra data cuối cùng.
+     * * @returns {Promise<string>} Nội dung cuối cùng được trích xuất từ sd-editor.
+     */
     upload: () => Promise<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdEditor, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdEditor, "sd-editor", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdBlur": "sdBlur"; "sdFocus": "sdFocus"; }, never, never, true, never>;

package/components/editor/src/models/image-upload.plugin.model.d.ts

@@ -8,11 +8,44 @@ export interface SdEditorImageUploadValidation {
     allowedFormats?: string[];
 }
 export interface SdEditorImageConfig {
+    /**
+     * Chế độ tải lên hình ảnh.
+     * 'immediate': Upload ngay khi chọn ảnh.
+     * 'deferred': Lưu tạm ảnh blob, khi submit thì viewChild component sd-editor rồi gọi upload() để tự động map lại src lấy từ uploadFn,
+     * @default 'deferred'
+     */
     uploadMode?: 'deferred' | 'immediate';
+    /**
+     * Hàm xử lý tải lên file
+     * Nếu thuộc tính này được khai báo, tính năng tải lên hình ảnh trong editor sẽ tự động được kích hoạt.
+     * @param files Danh sách các tệp (File) cần tải lên.
+     * @returns Promise chứa mảng thông tin chi tiết của các tệp sau khi tải lên thành công.
+     */
     uploadFn?: (files: File[]) => Promise<SdEditorUploadFileDetail[]>;
+    /**
+     * Validation hình ảnh trước khi tiến hành tải lên.
+     */
     validation?: SdEditorImageUploadValidation;
+    /**
+     * Số lượng luồng tải lên (API calls) tối đa được thực thi đồng thời.
+     * Ví dụ: Nếu có 10 API cần tải lên, hệ thống sẽ đưa vào hàng đợi và xử lý song song dựa trên giới hạn này để tránh nghẽn mạng và rateLimit phía BE.
+     * @default 2
+     */
     maxConcurrentUploads?: number;
+    /**
+     * Số lượng file được gom nhóm (batch) trong mỗi lần gọi hàm `uploadFn`.
+     * Nếu Backend hỗ trợ multi-file, có thể thiết lập số này lớn hơn để gửi nhiều file trong cùng một payload.
+     * Ví dụ: Nếu chọn 10 file và `batchSize = 5`, hệ thống sẽ chỉ gọi 2 API, mỗi lần gửi 5 file.
+     * * @default 2
+     */
     batchSize?: number;
+    /**
+     * Số lượng hình ảnh tối đa người dùng được phép chọn trong một lần thao tác.
+     */
     maxImagesPerSelection?: number;
+    /**
+     * Kích hoạt chế độ tải chậm (lazy load) cho hình ảnh để tối ưu hóa hiệu suất
+     * @default true
+     */
     lazyLoad?: boolean;
 }

package/components/editor/src/plugins/image-upload/utils/style.utils.d.ts

@@ -1,2 +1,3 @@
 export declare const countTextLength: (content: string) => number;
+export declare const imageInlineStylesToClasses: (html: string) => string;
 export declare const imageClassesToInlineStyles: (html: string) => string;

package/components/index.d.ts

@@ -19,3 +19,4 @@ export * from '@sd-angular/core/components/chart';
 export * from '@sd-angular/core/components/editor';
 export * from '@sd-angular/core/components/splitter';
 export * from '@sd-angular/core/components/preview';
+export * from '@sd-angular/core/components/autoid-inspector';

package/components/table/index.d.ts

@@ -1,6 +1,7 @@
 export * from './src/directives/sd-table-cell-def.directive';
 export * from './src/directives/sd-table-expand-def.directive';
 export * from './src/directives/sd-table-filter-def.directive';
+export * from './src/directives/sd-table-footer-def.directive';
 export * from './src/directives/sd-table-title-def.directive';
 export * from './src/table.component';
 export * from './src/services/table-filter/table-filter.model';

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

@@ -1,3 +1,4 @@
 export * from './table-option.model';
 export * from './table-column.model';
 export * from './table-command.model';
+export * from './table-option-tree.model';

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

@@ -10,6 +10,15 @@ export interface SdTableMetaExpand {
     isExpanding?: boolean;
     data?: any;
 }
+export interface SdTableMetaTree<T = any> {
+    level: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+    isExpanding?: boolean;
+    parentId?: string;
+    /** Cached formatted child SdTableItem[] — populated on first expand/format */
+    childItems?: SdTableItem<T>[];
+}
 export interface SdTableDisplay {
     tooltip?: string;
     badge?: {
@@ -32,6 +41,7 @@ export interface SdTableMeta<T> {
         htmlTemplate?: string;
         items?: SdTableItem<T>[];
     };
+    tree?: SdTableMetaTree<T>;
 }
 export interface SdTableItem<T = any> {
     meta: SdTableMeta<T>;

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

@@ -1,6 +1,11 @@
+export interface SdTableRowCssContext {
+    level: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+}
 export interface SdTableOptionStyle<T = any> {
     shadow?: boolean;
     maxHeight?: string;
     minHeight?: string;
-    rowCss?: (rowData: T) => Record<string, string>;
+    rowCss?: (rowData: T, index?: number, ctx?: SdTableRowCssContext) => Record<string, string>;
 }

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

@@ -0,0 +1,12 @@
+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. */
+    maxDepth?: number;
+    /** false | true | number (mở tới cấp N) */
+    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 */
+    indentSize?: number;
+}

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

@@ -11,6 +11,7 @@ import { SdTableOptionReload } from './table-option-reload.model';
 import { SdTableOptionSelector } from './table-option-selector.model';
 import { SdTableOptionSort } from './table-option-sort.model';
 import { SdTableOptionStyle } from './table-option-style.model';
+import { SdTableOptionTree } from './table-option-tree.model';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
     /**
@@ -61,6 +62,11 @@ interface SdTableBaseOption<T = any> {
      * Xem thêm tại `SdTableOptionGroup`.
      */
     group?: SdTableOptionGroup<T>;
+    /**
+     * Cấu hình tree rows — render children inline dưới parent.
+     * Xem thêm tại `SdTableOptionTree`.
+     */
+    tree?: SdTableOptionTree<T>;
     /**
      * Cấu hình filter của table.
      * Xem thêm tại `SdTableOptionFilter` để biết filter inline, external filter,

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

@@ -1 +1,2 @@
 export * from './filter-values.pipe';
+export * from './sd-tree.pipe';

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

@@ -0,0 +1,9 @@
+import { PipeTransform } from '@angular/core';
+import { SdTableOptionTree } from '../models/table-option-tree.model';
+import { SdTableItem } from '../models/table-item.model';
+import * as i0 from "@angular/core";
+export declare class SdTreePipe implements PipeTransform {
+    transform(items: SdTableItem[], treeOption?: SdTableOptionTree, _revision?: number): SdTableItem[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTreePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SdTreePipe, "sdTree", true>;
+}

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

@@ -0,0 +1,14 @@
+import { SdTableOptionTree } from '../../models/table-option-tree.model';
+import { SdTableItem } from '../../models/table-item.model';
+export declare const getChildrenKey: (option?: SdTableOptionTree) => string;
+export declare const getChildrenFromData: <T>(data: T, option?: SdTableOptionTree) => T[];
+export declare const resolveDefaultExpanded: (level: number, option?: SdTableOptionTree) => boolean;
+export declare const resolveHasChildren: <T>(row: SdTableItem<T>, option?: SdTableOptionTree) => boolean;
+export declare const hasLazyChildren: <T>(row: SdTableItem<T>, option?: SdTableOptionTree) => boolean;
+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>[];
+/** Flatten ALL nodes regardless of expand state — used for export */
+export declare const flattenTreeAll: <T>(roots: SdTableItem<T>[], option?: SdTableOptionTree, visited?: Set<string>) => SdTableItem<T>[];
+/** Flatten raw data tree for export (ignores expand state) */
+export declare const flattenDataTree: <T>(roots: T[], option?: SdTableOptionTree, visited?: Set<unknown>) => T[];

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

@@ -70,6 +70,7 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     columnOperator: Record<string, SdOperator>;
     columnFilter?: Record<string, any>;
     cacheValues: Record<string, any[]>;
+    treeRevision: import("@angular/core").WritableSignal<number>;
     exporting: import("@angular/core").WritableSignal<boolean>;
     exportTitle: import("@angular/core").WritableSignal<string>;
     tableConfiguration: ISdTableConfiguration | null;
@@ -82,11 +83,13 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     exportExcel: (columns?: SdExcelColumn[]) => void;
     exportCSV: (columns?: SdExcelColumn[]) => void;
     exportCustom: () => void;
+    onTreeToggle: (row: SdTableItem<T>) => Promise<void>;
     onFilterChange: () => void;
     onExpand: (rowData: SdTableItem<T>) => Promise<void>;
     onSelect: (rowData: SdTableItem<T>) => void;
     onSelectAll: () => void;
     onClearSelection: (items?: SdTableItem<T>[]) => void;
+    rowStyle: (row: SdTableItem<T>, index?: number) => Record<string, string> | null;
     clearFilter: () => void;
     setFilter: (args: {
         columnFilter?: Record<string, any>;