@sd-angular/core 19.0.0-beta.93 → 19.0.0-beta.95

package/README.md

@@ -35,7 +35,8 @@
 |---|---|
 | `@angular/core` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
 | `@angular/material` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
-| `@angular/material-moment-adapter` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `@angular/material-date-fns-adapter` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `date-fns` | `^3 \|\| ^4` |
 
 ### Installation / Cài đặt
 

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

@@ -5,6 +5,9 @@ export declare class SdAnchor implements OnDestroy {
     #private;
     wrapper: import("@angular/core").Signal<ElementRef<any>>;
     sections: import("@angular/core").Signal<readonly SdAnchorItem[]>;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    readonly itemAutoId: (key: string | undefined) => string | undefined;
     type: import("@angular/core").InputSignal<"vertical" | "horizontal">;
     sidebarWidth: import("@angular/core").InputSignal<string>;
     ellipsis: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -15,5 +18,5 @@ export declare class SdAnchor implements OnDestroy {
     scrollSectionByClick(idSectionTarget: string): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "isOverscroll": { "alias": "isOverscroll"; "required": false; "isSignal": true; }; "isHiddenAnchorList": { "alias": "isHiddenAnchorList"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "isOverscroll": { "alias": "isOverscroll"; "required": false; "isSignal": true; }; "isHiddenAnchorList": { "alias": "isHiddenAnchorList"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
 }

package/components/anchor/src/components/anchor-item/anchor-item.component.d.ts

@@ -4,9 +4,10 @@ import * as i0 from "@angular/core";
 export declare class SdAnchorItem implements IAnchorItem {
     title: import("@angular/core").InputSignal<string>;
     icon: import("@angular/core").InputSignal<string | undefined>;
+    key: import("@angular/core").InputSignal<string | undefined>;
     id: string;
     elementRef: ElementRef<any>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchorItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorItem, "sd-anchor-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorItem, "sd-anchor-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/anchor/src/components/anchor-vertical/anchor-vertical-list.component.d.ts

@@ -7,10 +7,12 @@ export declare class SdAnchorVerticalList implements OnDestroy {
     activeSectionId: import("@angular/core").InputSignal<string>;
     ellipsis: import("@angular/core").InputSignal<boolean>;
     sidebarWidth: import("@angular/core").InputSignal<string>;
+    parentAutoId: import("@angular/core").InputSignal<string | null | undefined>;
+    itemAutoId(section: SdAnchorItem): string | undefined;
     sdClickSection: import("@angular/core").OutputEmitterRef<string>;
     constructor();
     onClickSection: (id: string) => void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchorVerticalList, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorVerticalList, "sd-anchor-vertical-list", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeSectionId": { "alias": "activeSectionId"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; }, { "sdClickSection": "sdClickSection"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorVerticalList, "sd-anchor-vertical-list", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeSectionId": { "alias": "activeSectionId"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "parentAutoId": { "alias": "parentAutoId"; "required": false; "isSignal": true; }; }, { "sdClickSection": "sdClickSection"; }, never, never, true, never>;
 }

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@angular/core';
+import { I18nService } from '@sd-angular/core/i18n';
 import { ClassicEditor, EditorConfig } from 'ckeditor5';
 import * as i0 from "@angular/core";
 export declare class SdHeaderFooterBuilder {
@@ -6,7 +7,9 @@ export declare class SdHeaderFooterBuilder {
     Editor: typeof ClassicEditor;
     set model(value: string | undefined | null);
     modelChange: EventEmitter<string>;
-    config: EditorConfig;
+    config: EditorConfig & {
+        _i18n?: I18nService;
+    };
     onReady(editor: ClassicEditor): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdHeaderFooterBuilder, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdHeaderFooterBuilder, "sd-header-footer-builder", never, { "model": { "alias": "model"; "required": false; }; }, { "modelChange": "modelChange"; }, never, never, true, never>;

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

@@ -1,7 +1,9 @@
 import { EditorConfig, EventInfo, ModelDocumentSelection, ViewDataTransfer } from 'ckeditor5';
+import { I18nService } from '@sd-angular/core/i18n';
 import { CkCommentConfig } from './plugins/ck-comment/ck-comment.plugin.model';
 export type DocumentBuilderOption = EditorConfig & {
     getOption?: () => SdDocumentBuilderOption;
+    _i18n?: I18nService;
 };
 export interface SdDocumentBuilderOption {
     onDropVariable?: (variable: SdDocumentBuilderVariable) => boolean | Promise<boolean | SdDocumentBuilderVariable>;

package/components/editor/src/models/editor.model.d.ts

@@ -1,7 +1,9 @@
 import { EditorConfig } from 'ckeditor5';
+import { I18nService } from '@sd-angular/core/i18n';
 import { SdEditorImageConfig } from './image-upload.plugin.model';
 export interface SdEditorOption {
     imageConfig?: SdEditorImageConfig;
+    _i18n?: I18nService;
 }
 export type EditorOption = EditorConfig & {
     getOption?: () => SdEditorOption;

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

@@ -1,3 +1,4 @@
 import { FileLoader } from 'ckeditor5';
+import { I18nService } from '@sd-angular/core/i18n';
 import { SdEditorImageUploadValidation } from '../../../models';
-export declare const validateAndGetFile: (loader: FileLoader, validation?: SdEditorImageUploadValidation, onWarning?: (message: string) => void) => Promise<File>;
+export declare const validateAndGetFile: (loader: FileLoader, validation?: SdEditorImageUploadValidation, onWarning?: (message: string) => void, i18n?: I18nService) => Promise<File>;

package/components/form-generic/src/components/form-builder/components/attribute-table/attribute-table.component.d.ts

@@ -22,13 +22,15 @@ export declare class AttributeTable {
     set _columns(columns: SdFormGenericTableColumn[] | undefined | null);
     columnsChange: EventEmitter<SdFormGenericTableColumn[]>;
     column?: SdFormGenericTableColumn;
-    constructor(formGenericConfiguration: ISdFormGenericConfiguration);
+    constructor(formGenericConfiguration: ISdFormGenericConfiguration | null);
     onChangeColumnsKey: (value: any) => void;
     addColumn: () => void;
+    readonly columnTypeIcons: Record<string, string>;
+    columnTypeSymbol: (type: string | undefined) => string;
     selectedIdx?: number | undefined;
     editColumn: (idx: number) => void;
     removeColumn: (idx: number) => void;
     onConfirm: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AttributeTable, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AttributeTable, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AttributeTable, "attribute-table", never, { "components": { "alias": "components"; "required": true; }; "variables": { "alias": "variables"; "required": true; }; "_columnsKey": { "alias": "columnsKey"; "required": true; }; "_columns": { "alias": "columns"; "required": true; }; }, { "columnsKeyChange": "columnsKeyChange"; "columnsChange": "columnsChange"; }, never, never, true, never>;
 }

package/components/form-generic/src/components/form-builder/components/attribute-template/attribute-template.component.d.ts

@@ -8,8 +8,8 @@ export declare class AttributeTemplate {
     component: SdFormGenericComponent;
     set _component(component: SdFormGenericComponent);
     sdChange: EventEmitter<SdFormGenericComponent>;
-    constructor(formGenericConfiguration: ISdFormGenericConfiguration);
+    constructor(formGenericConfiguration: ISdFormGenericConfiguration | null);
     onChange: (value: string | number | null) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AttributeTemplate, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AttributeTemplate, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AttributeTemplate, "attribute-template", never, { "_component": { "alias": "component"; "required": true; }; }, { "sdChange": "sdChange"; }, never, never, true, never>;
 }

package/components/form-generic/src/components/form-builder/components/configure-validation/configure-validation.component.d.ts

@@ -19,13 +19,13 @@ export declare class ConfigureValidationComponent {
         display: string;
     }[];
     accept: EventEmitter<SdFormGenericValidation[]>;
-    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration);
+    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration | null);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     open: (formGeneric: SdFormGeneric) => void;
     addValidation: (type: SdFormGenericValidation["type"]) => void;
     removaValidation: (index: number) => void;
     updateValidations: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigureValidationComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigureValidationComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ConfigureValidationComponent, "configure-validation", never, {}, { "accept": "accept"; }, never, never, true, never>;
 }

package/components/form-generic/src/components/form-builder/components/group/attribute/group-attribute.component.d.ts

@@ -0,0 +1,23 @@
+import { FormGroup } from '@angular/forms';
+import { SdFormGenericComponent, SdFormGenericGroup } from '../../../../../models';
+import * as i0 from "@angular/core";
+declare const COLOR_PRESETS: readonly ["primary", "secondary", "success", "warning", "error"];
+export declare class GroupAttribute {
+    #private;
+    readonly iconPresets: readonly ["category", "folder", "inventory_2", "group_work", "workspaces", "view_quilt"];
+    readonly colorPresets: readonly ["primary", "secondary", "success", "warning", "error"];
+    readonly componentIcons: Record<string, {
+        symbol: string;
+        label: string;
+    }>;
+    form: FormGroup<{}>;
+    /** Required group reference. Mutated in place khi user pick icon/color/expression. */
+    readonly group: import("@angular/core").InputSignal<SdFormGenericGroup>;
+    constructor();
+    pickIcon: (icon: string) => void;
+    pickColor: (color: (typeof COLOR_PRESETS)[number]) => void;
+    symbolForChild: (c: SdFormGenericComponent) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GroupAttribute, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GroupAttribute, "group-attribute", never, { "group": { "alias": "group"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/components/form-generic/src/components/form-builder/components/group/index.d.ts

@@ -0,0 +1 @@
+export * from './attribute/group-attribute.component';

package/components/form-generic/src/components/form-builder/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './checkbox';
 export * from './html';
 export * from './upload';
 export * from './table';
+export * from './group';

package/components/form-generic/src/components/form-builder/components/table/control/table-control.component.d.ts

@@ -11,6 +11,9 @@ export declare class TableControl {
     constructor(ref: ChangeDetectorRef, builderService: BuilderService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    columnIcon: (type: string) => "image" | "text_fields" | "123" | "calendar_month" | "radio_button_checked" | "check_box" | "attach_file";
+    sampleRows: () => number[];
+    cellPreview: (column: any, rowIndex: number) => any;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TableControl, "table-control", never, { "_component": { "alias": "component"; "required": true; }; }, {}, never, never, true, never>;
 }

package/components/form-generic/src/components/form-builder/form-builder.component.d.ts

@@ -1,15 +1,12 @@
 import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop';
-import { ChangeDetectorRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdModal } from '@sd-angular/core/components/modal';
-import { SdConfirmService, SdNotifyService } from '@sd-angular/core/services';
-import { FormBuilderComponent, SdFormGenericComponent, SdFormGenericGroup, SdFormGenericVariable } from '../../models';
+import { FormBuilderComponent, FormBuilderComponentGroup, SdFormGenericComponent, SdFormGenericGroup, SdFormGenericVariable } from '../../models';
 import { SdFormGenericValidation } from '../../models/form-generic-validation.model';
 import { SdFormGeneric } from '../../models/form-generic.model';
 import { SdFormRender } from '../form-render/form-render.component';
 import { ConfigureValidationComponent } from './components/configure-validation/configure-validation.component';
-import { BuilderService } from './services';
 import * as i0 from "@angular/core";
 interface DragDropRowItem {
     items: (SdFormGenericComponent | SdFormGenericGroup)[];
@@ -17,31 +14,71 @@ interface DragDropRowItem {
 }
 export declare class SdFormBuilder extends SdBaseSecureComponent {
     #private;
-    private ref;
-    private notifyService;
-    private confirmService;
-    private builderService;
-    popupViewJSON?: SdModal;
-    popupConfigureVariables?: SdModal;
-    configureValidation?: ConfigureValidationComponent;
-    formRender?: SdFormRender;
+    readonly popupViewJSON: import("@angular/core").Signal<SdModal | undefined>;
+    readonly popupConfigureVariables: import("@angular/core").Signal<SdModal | undefined>;
+    readonly configureValidation: import("@angular/core").Signal<ConfigureValidationComponent | undefined>;
+    readonly formRender: import("@angular/core").Signal<SdFormRender | undefined>;
     form: FormGroup<{}>;
-    constructor(ref: ChangeDetectorRef, notifyService: SdNotifyService, confirmService: SdConfirmService, builderService: BuilderService);
+    /** Input chính: schema form. Mỗi lần ref thay đổi → effect sẽ clone về local arrays. */
+    readonly formGeneric: import("@angular/core").InputSignal<SdFormGeneric | undefined>;
+    readonly formBuilderComponents: FormBuilderComponent[];
+    readonly componentIcons: Record<string, {
+        symbol: string;
+        label: string;
+    }>;
+    readonly paletteSearch: import("@angular/core").WritableSignal<string>;
+    readonly paletteGroups: import("@angular/core").Signal<{
+        key: FormBuilderComponentGroup;
+        label: string;
+        items: FormBuilderComponent[];
+    }[]>;
     components: Required<SdFormGeneric>['components'];
     variables: Required<SdFormGeneric>['variables'];
     validations: Required<SdFormGeneric>['validations'];
+    /** Cloned variables — dùng cho modal "Configure variables" (huỷ thì discard, ok thì gán ngược). */
     clonedVariables: SdFormGenericVariable[];
-    set _formGeneric(formGeneric: SdFormGeneric);
-    formBuilderComponents: FormBuilderComponent[];
-    selectedComponent?: SdFormGenericComponent | SdFormGenericGroup;
+    readonly selectedComponent: import("@angular/core").WritableSignal<SdFormGenericComponent | SdFormGenericGroup | undefined>;
+    readonly isPreview: import("@angular/core").WritableSignal<boolean>;
+    /** Signal toàn cục: TRUE khi BẤT KỲ cdkDrag nào đang active (palette, canvas, group, resize).
+     *  Trigger class `.fb-shell--dragging` để ẩn hover/actions/resize toàn diện, không phụ thuộc :has(). */
+    readonly isAnyDragging: import("@angular/core").WritableSignal<boolean>;
     expand: boolean;
     dragDropRows: DragDropRowItem[];
     isDragging: boolean;
     targetItem?: DragDropRowItem;
-    isPreview: boolean;
+    private lastDragPointer?;
+    /** Handler chung cho mọi cdkDragStarted — set signal global true. */
+    onAnyDragStarted: () => void;
+    onAnyDragMoved: (event: CdkDragMove<any>) => void;
+    /** Handler chung cho mọi cdkDragEnded — set signal global false (dùng setTimeout 0
+     *  để chờ CDK xử lý xong drop event trước khi UI re-enable). */
+    onAnyDragEnded: () => void;
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     addComponent: (item: FormBuilderComponent, index?: number) => void;
+    /** Symbol Material để render trên canvas item / attribute header. */
+    symbolFor: (item: SdFormGenericComponent | SdFormGenericGroup) => string;
+    /** Human-readable type label (e.g. "Text field", "Date"). */
+    typeLabelFor: (item: SdFormGenericComponent | SdFormGenericGroup) => string;
+    /** True nếu component có expression điều kiện — drives the "conditional" status chip. */
+    hasConditional: (item: SdFormGenericComponent | SdFormGenericGroup) => boolean;
+    /** Map SdColor preset → 2 CSS var names cho header-bg và header-fg của group card. */
+    groupColorVars: (color: string | undefined | null) => {
+        bg: string;
+        fg: string;
+    };
+    /** Segmented Design/Preview toggle (replaces play_circle/stop_circle). */
+    setMode: (preview: boolean) => void;
+    /** Nested drop handler — when dragging a palette item or canvas item INTO a group body. */
+    dropInGroup: (event: CdkDragDrop<any[]>, group: SdFormGenericGroup) => void;
+    /** Quick-add break sau row chỉ định.
+     *  Tính component index cuối cùng của row đó trong this.components, splice break vào sau.
+     *  Không qua palette — chỉ là utility action bám theo row trên canvas.
+     */
+    insertBreakAfter: (row: DragDropRowItem) => void;
+    /** Remove a child component from a group's nested list. */
+    removeFromGroup: (group: SdFormGenericGroup, id: string) => void;
     removeComponent: (id: string) => void;
     selectComponent: (item?: SdFormGenericComponent | SdFormGenericGroup) => void;
     onClickedOutside: (e: any) => void;
@@ -55,6 +92,12 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     noReturnPredicate: () => boolean;
     changeSizeControl: (event: CdkDragMove<SdFormGenericComponent | SdFormGenericGroup>, item: SdFormGenericComponent | SdFormGenericGroup, items: (SdFormGenericComponent | SdFormGenericGroup)[], currentIndex: number) => Promise<void>;
     dragEndChangeSizeControl: (event: any) => void;
+    /** Resize a child item INSIDE a group.
+     *  Math: lấy bounding của chính item, tính (mouse.x - item.left) / colWidth = newCols.
+     *  Cách này đúng cho cả flex-wrap (item ở wrap row 2+) vì dùng item-relative,
+     *  không phải sum-of-all-preceding-cols (sai khi item wrap xuống row mới).
+     */
+    changeSizeChildInGroup: (event: CdkDragMove<SdFormGenericComponent>, child: SdFormGenericComponent, group: SdFormGenericGroup) => void;
     onChangeViewed: (component: SdFormGenericComponent) => void;
     onChangeHidden: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
     onDuplicate: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
@@ -72,6 +115,6 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     onUpdateValidations: (validations: SdFormGenericValidation[]) => void;
     onValidate: () => Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdFormBuilder, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdFormBuilder, "sd-form-builder", never, { "_formGeneric": { "alias": "formGeneric"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdFormBuilder, "sd-form-builder", never, { "formGeneric": { "alias": "formGeneric"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};

package/components/form-generic/src/components/form-render/form-render.component.d.ts

@@ -29,11 +29,11 @@ export declare class SdFormRender extends SdBaseSecureComponent implements OnDes
         key: string;
         value: any;
     }>;
-    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration);
+    constructor(ref: ChangeDetectorRef, formGenericConfiguration: ISdFormGenericConfiguration | null);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     upload: () => Promise<void>;
     getValidationMessages: (alert: SdFormGenericValidation["alert"]) => Promise<string[] | undefined>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdFormRender, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdFormRender, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdFormRender, "sd-form-render", never, { "form": { "alias": "form"; "required": false; }; "_configuration": { "alias": "configuration"; "required": true; }; "_default": { "alias": "defaultEntity"; "required": false; }; "_entity": { "alias": "entity"; "required": false; }; "_properties": { "alias": "properties"; "required": false; }; "_viewed": { "alias": "viewed"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/form-generic/src/models/form-generic-component.model.d.ts

@@ -26,7 +26,7 @@ export interface SdFormGenericVariable {
     key: string;
     label: string;
 }
-export type SdFormGenericComponent = SdFormGenericTextfield | SdFormGenericChipString | SdFormGenericChipCalendar | SdFormGenericTextarea | SdFormGenericNumber | SdFormGenericCheckbox | SdFormGenericDatetime | SdFormGenericValues | SdFormGenericUpload | SdFormGenericTable | SdFormGenericHtml;
+export type SdFormGenericComponent = SdFormGenericTextfield | SdFormGenericChipString | SdFormGenericChipCalendar | SdFormGenericTextarea | SdFormGenericNumber | SdFormGenericCheckbox | SdFormGenericDatetime | SdFormGenericValues | SdFormGenericUpload | SdFormGenericTable | SdFormGenericHtml | SdFormGenericBreak;
 export type SdFormGenericValues = SdFormGenericRadio | SdFormGenericSelect | SdFormGenericChecklist;
 export interface SdFormGenericComponentBase {
     template?: string;
@@ -254,6 +254,17 @@ export interface SdFormGenericTable extends SdFormGenericComponentBase {
         titleButtonCreate?: string;
     } & SdFormGenericComponentBase['properties'];
 }
+/**
+ * Break component — invisible runtime element ép xuống dòng mới. Dùng khi layout có
+ * vùng cố định và việc ẩn/hiện trường khác không nên xáo trộn vị trí các trường còn lại.
+ * Ở canvas (design) render thanh ngang mảnh; ở runtime render empty 12-col cell.
+ *
+ * Extend SdFormGenericComponentBase để tương thích với union narrowing trong các pipe/render
+ * (key, validate, disabled, properties full) — runtime sẽ ignore mọi field ngoài id/type/layout.
+ */
+export interface SdFormGenericBreak extends SdFormGenericComponentBase {
+    type: 'break';
+}
 export interface SdFormGenericHtml {
     template?: string;
     id: string;
@@ -282,12 +293,21 @@ export interface SdFormGenericHtml {
         query?: Record<string, any>;
     };
 }
+export type FormBuilderComponentGroup = 'basic' | 'choice' | 'advanced' | 'layout';
 export interface FormBuilderComponent {
     type: string;
-    icon: string;
+    /** Material Symbols Rounded icon name. Rendered via <span class="msi">{symbol}</span>. */
+    symbol: string;
+    /** Category group for the left palette grouping. */
+    group: FormBuilderComponentGroup;
     name: string;
 }
 export declare const FormBuilderComponents: FormBuilderComponent[];
+/** Lookup: component type → Material Symbol + label, used by attribute panel header. */
+export declare const COMPONENT_ICONS: Record<string, {
+    symbol: string;
+    label: string;
+}>;
 export declare const GetComponentAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => {
     value: string;
     display: string;

package/components/index.d.ts

@@ -20,3 +20,4 @@ export * from '@sd-angular/core/components/code-editor';
 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';

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

@@ -6,6 +6,9 @@ export declare class SdModal {
     static index: import("@angular/core").WritableSignal<number>;
     templateRef: import("@angular/core").Signal<TemplateRef<any>>;
     modal: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    readonly closeButtonAutoId: import("@angular/core").Signal<string | undefined>;
     title: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
     width: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
@@ -22,5 +25,5 @@ export declare class SdModal {
     open: () => void;
     close: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "[sdHeader]", "*", "[sdFooterLeft]", "[sdFooterRight]", "[sdFooter]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "[sdHeader]", "*", "[sdFooterLeft]", "[sdFooterRight]", "[sdFooter]"], true, never>;
 }

package/components/preview/index.d.ts

@@ -1 +1,4 @@
 export * from './src/preview-image/preview-image.component';
+export * from './src/preview-image/preview-image.types';
+export * from './src/preview-pdf/preview-pdf.component';
+export * from './src/preview-pdf/preview-pdf.types';

package/components/preview/src/preview-image/preview-image.component.d.ts

@@ -1,28 +1,88 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { SdModal } from '@sd-angular/core/components/modal';
+import { OnDestroy } from '@angular/core';
+import { NormalizedImage, PreviewItem, PreviewStage, PreviewTheme, ThumbnailPosition } from './preview-image.types';
 import * as i0 from "@angular/core";
-interface Image {
-    id: string;
-    blobSrc: string;
-    src?: string;
-    name: string;
-    size: number;
-}
-export declare class SdPreviewImage {
+export declare class SdPreviewImage implements OnDestroy {
     #private;
-    private cd;
-    modal: SdModal;
-    close: EventEmitter<void>;
-    title: string;
-    thumbnailPosition: 'right' | 'left' | 'bottom' | 'top';
-    activeIndex: number;
-    images: Image[];
-    constructor(cd: ChangeDetectorRef);
-    open: (urlOrFiles: (string | File)[] | undefined | null) => Promise<void>;
-    onClickThumbnailImage: (index: number) => void;
-    updateCurrentImage: (direction: 1 | -1) => void;
-    onClose: () => void;
+    static readonly MIN_ZOOM = 0.25;
+    static readonly MAX_ZOOM = 4;
+    static readonly ZOOM_STEP = 0.1;
+    static readonly SWIPE_THRESHOLD = 40;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdPrev: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdNext: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdZoomIn: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdZoomOut: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdFit: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdRotate: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdDownload: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdFullscreen: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdRetry: import("@angular/core").Signal<string | undefined>;
+    readonly autoIdThumb: (i: number) => string | undefined;
+    readonly autoIdDot: (i: number) => string | undefined;
+    readonly items: import("@angular/core").InputSignal<PreviewItem[]>;
+    readonly title: import("@angular/core").InputSignal<string | undefined>;
+    readonly thumbnailPosition: import("@angular/core").InputSignal<ThumbnailPosition>;
+    readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+    readonly downloadable: import("@angular/core").InputSignal<boolean>;
+    readonly zoomable: import("@angular/core").InputSignal<boolean>;
+    readonly loop: import("@angular/core").InputSignal<boolean>;
+    readonly startIndex: import("@angular/core").InputSignal<number>;
+    readonly theme: import("@angular/core").InputSignal<PreviewTheme>;
+    readonly close: import("@angular/core").OutputEmitterRef<void>;
+    readonly activeIndexChange: import("@angular/core").OutputEmitterRef<number>;
+    readonly download: import("@angular/core").OutputEmitterRef<{
+        index: number;
+        item: NormalizedImage;
+    }>;
+    readonly imageError: import("@angular/core").OutputEmitterRef<{
+        index: number;
+        reason: string;
+    }>;
+    readonly activeIndex: import("@angular/core").Signal<number>;
+    readonly images: import("@angular/core").Signal<NormalizedImage[]>;
+    readonly zoom: import("@angular/core").Signal<number>;
+    readonly rotation: import("@angular/core").Signal<number>;
+    readonly pan: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    }>;
+    readonly stage: import("@angular/core").Signal<PreviewStage>;
+    readonly isFullscreen: import("@angular/core").Signal<boolean>;
+    readonly activeImage: import("@angular/core").Signal<NormalizedImage | undefined>;
+    readonly hasPrev: import("@angular/core").Signal<boolean>;
+    readonly hasNext: import("@angular/core").Signal<boolean>;
+    readonly zoomPercent: import("@angular/core").Signal<number>;
+    readonly imageTransform: import("@angular/core").Signal<string>;
+    readonly shellClass: import("@angular/core").Signal<{
+        [x: string]: boolean;
+        'sd-preview-shell': boolean;
+        'sd-preview-shell--fullscreen': boolean;
+    }>;
+    constructor();
+    ngOnDestroy(): void;
+    onClickThumbnailImage(index: number): void;
+    updateCurrentImage(direction: 1 | -1): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    fitToScreen(): void;
+    rotate(direction: 'left' | 'right'): void;
+    downloadCurrent(): void;
+    toggleFullscreen(): void;
+    /** Retry just the active image (Artboard G action). */
+    retryActive(): Promise<void>;
+    /** User clicked the X button — emit close intent for the consumer to react. */
+    requestClose(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onWheel(event: WheelEvent): void;
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(event: PointerEvent): void;
+    onPointerCancel(event: PointerEvent): void;
+    onImageDblClick(): void;
+    onImageError(): void;
+    trackByImage(_i: number, item: NormalizedImage): string;
+    formatBytes(bytes: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdPreviewImage, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdPreviewImage, "sd-preview-image", never, {}, { "close": "close"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdPreviewImage, "sd-preview-image", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "thumbnailPosition": { "alias": "thumbnailPosition"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "downloadable": { "alias": "downloadable"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "startIndex": { "alias": "startIndex"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "close": "close"; "activeIndexChange": "activeIndexChange"; "download": "download"; "imageError": "imageError"; }, never, never, true, never>;
 }
-export {};

package/components/preview/src/preview-image/preview-image.types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Shape descriptor accepted by SdPreviewImage's `items` signal input.
+ *
+ * - `string` — CDN/HTTP URL; component will fetch as blob and create a File.
+ * - `File` — already-selected file from <input type="file">. Must be `image/*`.
+ * - Detailed object — when the caller wants to override name/caption/alt.
+ */
+export type PreviewItem = string | File | {
+    url?: string;
+    file?: File;
+    name?: string;
+    caption?: string;
+    alt?: string;
+    mime?: string;
+};
+/**
+ * Internal normalized record. One per slot in the gallery.
+ * `blobUrl` is always set after a successful load so the <img> binding can
+ * be uniform; `url` retains the original CDN URL for download fallback.
+ */
+export interface NormalizedImage {
+    id: string;
+    url?: string;
+    blobUrl: string;
+    name: string;
+    size: number;
+    caption?: string;
+    alt?: string;
+    loading: boolean;
+    error: boolean;
+}
+/**
+ * Stage = the visual state of the main image area inside the viewer shell.
+ * Driven by an internal `_stage` signal in the component.
+ */
+export type PreviewStage = 'ready' | 'loading' | 'error' | 'empty';
+/**
+ * Where the thumbnail navigator sits relative to the stage. `none` removes
+ * thumbnails entirely (single-image lightbox); `dots` swaps the strip for
+ * compact dot indicators (≤ 8 images).
+ */
+export type ThumbnailPosition = 'bottom' | 'right' | 'left' | 'top' | 'dots' | 'none';
+/**
+ * Color scheme for the preview shell. `'dark'` (default) keeps the original
+ * dark-theme tokens (black surfaces, white text). `'light'` flips the token
+ * set to white surfaces / dark text — picks up `--sd-primary`, `--sd-error`,
+ * `--sd-success` from the consumer theme when present.
+ *
+ * Exposed via `[attr.data-theme]` on the host so SCSS can swap CSS custom
+ * properties via the `:host([data-theme="light"])` selector — no runtime
+ * style switching is required.
+ */
+export type PreviewTheme = 'dark' | 'light';