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

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
 
@@ -188,7 +189,7 @@ import { SdButton } from '@sd-angular/core/components/button';
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `type` | `'fill' \| 'light' \| 'outline' \| 'link'` | `'light'` | Kiểu nút |
-| `color` | `SdColor` | `'secondary'` | Màu sắc |
+| `color` | `Color` | `'secondary'` | Màu sắc |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Kích thước |
 | `title` | `string` | — | Nhãn nút |
 | `prefixIcon` | `string` | — | Icon Material trước text |
@@ -220,10 +221,10 @@ import { SdBadge } from '@sd-angular/core/components/badge';
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `type` | `'tag' \| 'round' \| 'icon'` | `'icon'` | Kiểu badge |
-| `color` | `SdColor` | `'secondary'` | Màu sắc |
+| `color` | `Color` | `'secondary'` | Màu sắc |
 | `title` | `string \| number` | — | Nội dung hiển thị |
 | `icon` | `string` | — | Icon Material |
-| `size` | `SdSize` | `'sm'` | Kích thước |
+| `size` | `Size` | `'sm'` | Kích thước |
 | `tooltip` | `string` | — | Tooltip |
 
 Shorthand color inputs (boolean): `primary`, `secondary`, `success`, `info`, `warning`, `error`.
@@ -249,7 +250,7 @@ import { SdSection } from '@sd-angular/core/components/section';
 | `title` | `string` | *required* | Tiêu đề section |
 | `subTitle` | `string` | — | Tiêu đề phụ |
 | `icon` | `string` | — | Icon Material |
-| `iconColor` | `SdColor` | `'primary'` | Màu icon |
+| `iconColor` | `Color` | `'primary'` | Màu icon |
 | `collapsable` | `boolean` | `false` | Cho phép thu gọn |
 | `collapsed` | `boolean` | `false` | Trạng thái ban đầu thu gọn |
 | `hideHeader` | `boolean` | `false` | Ẩn phần header |
@@ -277,7 +278,7 @@ import { SdModal } from '@sd-angular/core/components/modal';
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `title` | `string` | — | Tiêu đề modal |
-| `color` | `SdColor` | `'primary'` | Màu header |
+| `color` | `Color` | `'primary'` | Màu header |
 | `width` | `'sx' \| 'sm' \| 'md' \| 'lg' \| string` | `'md'` | Độ rộng (md = 60vw) |
 | `height` | `string` | `'auto'` | Chiều cao |
 | `view` | `'dialog' \| 'bottom-sheet'` | auto | Tự động bottom-sheet trên mobile |
@@ -405,7 +406,6 @@ import { SdAvatar } from '@sd-angular/core/components/avatar';
 | `SdHistory` | `@sd-angular/core/components/history` | Lịch sử thay đổi |
 | `SdImportExcel` | `@sd-angular/core/components/import-excel` | Wizard import Excel |
 | `SdQueryBuilder` | `@sd-angular/core/components/query-builder` | Visual query builder |
-| `SdWorkflow` | `@sd-angular/core/components/workflow` | Workflow builder |
 | `SdCodeEditor` | `@sd-angular/core/components/code-editor` | Code editor (PrismJS) |
 | `SdMiniEditor` | `@sd-angular/core/components/mini-editor` | Rich text editor nhỏ |
 | `SdDocumentBuilder` | `@sd-angular/core/components/document-builder` | Document builder |
@@ -653,7 +653,7 @@ export * from './src/my-component.component';
 // my-component.component.ts
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { SdColor } from '@sd-angular/core/utilities';
+import { Color } from '@sd-angular/core/utilities';
 
 @Component({
   selector: 'sd-my-component',
@@ -664,7 +664,7 @@ import { SdColor } from '@sd-angular/core/utilities';
   imports: [],
 })
 export class SdMyComponent extends SdBaseSecureComponent {
-  color = input<SdColor, SdColor | undefined | null>('primary', {
+  color = input<Color, Color | undefined | null>('primary', {
     transform: (value) => value || 'primary',
   });
 
@@ -690,7 +690,7 @@ export * from '@sd-angular/core/components/my-component';
 | Base class | Extend `SdBaseSecureComponent` cho component có permission |
 | Change detection | Luôn dùng `ChangeDetectionStrategy.OnPush` |
 | Standalone | Luôn `standalone: true` |
-| Colors | Dùng `SdColor` type, không hardcode màu |
+| Colors | Dùng `Color` type, không hardcode màu |
 
 ### Build
 

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/badge/src/badge.component.d.ts

@@ -1,12 +1,11 @@
 import { EventEmitter } from '@angular/core';
-import { SdColor, SdSize } from '@sd-angular/core/utilities/models';
 import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export type SdBadgeType = 'tag' | 'round' | 'icon';
 export declare class SdBadge {
     defaultIcon: string;
     type: import("@angular/core").InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
-    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
     primary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     secondary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     success: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -18,10 +17,10 @@ export declare class SdBadge {
     description: import("@angular/core").InputSignal<string | null | undefined>;
     tooltip: import("@angular/core").InputSignal<string | null | undefined>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;
-    size: import("@angular/core").InputSignalWithTransform<SdSize, SdSize | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Size, import("@sdcorejs/utils/models").Size | null | undefined>;
     click: EventEmitter<Event>;
     onClick: (event: Event) => void;
-    effectiveColor: import("@angular/core").Signal<SdColor>;
+    effectiveColor: import("@angular/core").Signal<import("@sdcorejs/utils/models").Color>;
     baseColorClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
         'c-secondary': boolean;

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

@@ -1,6 +1,6 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
 export type SdButtonSize = 'sm' | 'md' | 'lg';
@@ -10,7 +10,7 @@ export declare class SdButton extends SdBaseSecureComponent implements OnInit, O
     private el;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     type: import("@angular/core").InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
-    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
     size: import("@angular/core").InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
     fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
     title: import("@angular/core").InputSignal<string | null | undefined>;

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 { SdI18nService } from '@sd-angular/core/i18n';
+import { I18nService } from '@sd-angular/core/i18n';
 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?: SdI18nService;
+        _i18n?: I18nService;
     };
     onReady(editor: ClassicEditor): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdHeaderFooterBuilder, never>;

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

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

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

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

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

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

@@ -8,9 +8,7 @@ export * from '@sd-angular/core/components/table';
 export * from '@sd-angular/core/components/quick-action';
 export * from '@sd-angular/core/components/upload-file';
 export * from '@sd-angular/core/components/section';
-export * from '@sd-angular/core/components/workflow';
 export * from '@sd-angular/core/components/anchor';
-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';
@@ -20,3 +18,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

@@ -1,13 +1,15 @@
 import { ElementRef, TemplateRef } from '@angular/core';
-import { SdColor } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export declare class SdModal {
     #private;
     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>;
+    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
     width: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     height: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     view: import("@angular/core").InputSignalWithTransform<"dialog" | "bottom-sheet" | undefined, "dialog" | "bottom-sheet" | null | undefined>;
@@ -22,5 +24,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';