@sdcorejs/angular 19.1.6 → 19.2.0

package/README.md

@@ -21,6 +21,16 @@ Install the package major that matches your Angular application.
 
 The package manifests accept Angular 19–21 peers, while releases provide an Angular-aligned package line for each major. The first version number is reserved for Angular compatibility, so read the [changelog](https://github.com/sdcorejs/sdcorejs-angular/blob/main/CHANGELOG.md) for explicitly labeled breaking changes before upgrading.
 
+### Peer dependencies
+
+The package declares these peers. A standard Angular CLI application already provides all of them except `@angular/material` and `@angular/material-date-fns-adapter`, which is why only those two appear in the install commands above.
+
+| Peer | Range |
+| --- | --- |
+| `@angular/animations` · `@angular/cdk` · `@angular/common` · `@angular/core` · `@angular/forms` · `@angular/platform-browser` · `@angular/router` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `@angular/material` · `@angular/material-date-fns-adapter` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `rxjs` | `^7.8.0` |
+
 ## Installation and setup
 
 The examples below use Angular 19; replace `19` with your application's Angular major.

package/assets/scss/core/menu.scss

@@ -0,0 +1,18 @@
+// why: Material tạo khoảng cách giữa leading icon và nhãn của menu item bằng `margin-right` đặt trên
+// `.mat-icon`. Với `<sd-icon>` thì `.mat-icon` nằm BÊN TRONG host, nên margin đó không đẩy nhãn ra —
+// nó chỉ làm glyph lệch và bị xén trong host (sd-icon đã trung hoà margin đó ở cấp component). Rule
+// dưới đây trả khoảng cách về đúng cấp: host `<sd-icon>` khi nó là icon dẫn đầu của menu item.
+//
+// Đặt ở cấp host nên Material font icon và Lucide SVG hành xử giống hệt nhau — Lucide không render
+// `.mat-icon` nên trước đây không nhận được khoảng cách nào từ Material.
+//
+// Chỉ nhắm con TRỰC TIẾP: menu tự bọc icon trong wrapper flex có `gap` riêng (sd-table command,
+// sd-tree command) không được cộng thêm margin. Angular slot nội dung không phải `mat-icon` vào
+// trong `.mat-mdc-menu-item-text`, nên phải liệt kê cả hai cấp.
+//
+// Bọc trong `:where()` để specificity bằng 0: bất kỳ rule nào của menu cụ thể — kể cả một class đơn —
+// cũng thắng, nên đây là default an toàn chứ không phải thứ phải đi vá bằng `!important`.
+:where(.mat-mdc-menu-item > sd-icon:first-child),
+:where(.mat-mdc-menu-item > .mat-mdc-menu-item-text > sd-icon:first-child) {
+  margin-right: var(--mat-menu-item-spacing, 12px);
+}

package/assets/scss/core/utilities/_misc.scss

@@ -18,3 +18,18 @@
 // --------------------------------------------------------------------------
 .visible   { visibility: visible !important; }
 .invisible { visibility: hidden !important; }
+
+// --------------------------------------------------------------------------
+// Screen-reader-only text (visually hidden, still in the accessibility tree)
+// --------------------------------------------------------------------------
+.sd-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}

package/assets/scss/sd-core.scss

@@ -4,6 +4,7 @@
 @use './core/color.scss';
 @use './core/form.scss';
 @use './core/image.scss';
+@use './core/menu.scss';
 @use './core/scrollbar.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';

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

@@ -12,11 +12,13 @@ export declare class SdAnchor implements OnDestroy {
     ellipsis: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     overScroll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     hideNav: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    hideNavOnMobile: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     color: import("@angular/core").InputSignal<Color>;
+    readonly navHidden: import("@angular/core").Signal<boolean>;
     activeSectionId: import("@angular/core").WritableSignal<string>;
     constructor();
     scrollSectionByClick(idSectionTarget: string): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "hideNavOnMobile": { "alias": "hideNavOnMobile"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
 }

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

@@ -21,6 +21,7 @@ export declare class SdBadge {
     size: import("@angular/core").InputSignalWithTransform<Size, Size | null | undefined>;
     readonly click: EventEmitter<Event>;
     onClick: (event: Event) => void;
+    onActivateKey: (event: Event) => void;
     effectiveColor: import("@angular/core").Signal<Color>;
     baseColorClasses: import("@angular/core").Signal<{
         'c-primary': boolean;

package/components/ckeditor-styles/src/ckeditor-styles.component.d.ts

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),
  *   which means whichever Angular component declares it must use ViewEncapsulation.None.
  * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,
- *   `<sd-document-builder>`) would un-scope all their local styles too.
+ *   `<sd-mini-editor>`) would un-scope all their local styles too.
  * - Instead, this tiny no-render component owns the global CSS. The editor components embed
  *   `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>
  *   the first time any editor instance mounts. Editor components themselves keep

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

@@ -8,7 +8,7 @@ export declare class ExpressionBuilderComponent implements OnInit {
     modal?: SdModal;
     form: FormGroup<{}>;
     attributeOperators: Record<"string" | "number" | "boolean" | "datetime" | "values", {
-        value: import("@sdcorejs/angular/components/form-generic").Operator;
+        value: import("@sdcorejs/angular/components/form-generic").SdFormGenericOperator;
         symbol?: string;
         display: string;
     }[]>;
@@ -37,6 +37,7 @@ export declare class ExpressionBuilderComponent implements OnInit {
     constructor(...args: unknown[]);
     ngOnInit(): void;
     onEdit: () => Promise<void>;
+    onExprKeydown: (event: KeyboardEvent) => void;
     addCondition: (conditions: SdFormGenericExpression["conditions"]) => void;
     addCombinator: (conditions: SdFormGenericExpression["conditions"]) => void;
     remove: (conditions: SdFormGenericExpression["conditions"], idx: number) => void;

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

@@ -104,7 +104,7 @@ export declare class SdFormBuilder implements OnInit, OnDestroy {
     placeholderColumnsFor: (item: FormBuilderComponent | SdFormGenericComponent | SdFormGenericGroup | DragDropRowItem | undefined) => number;
     /** 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. */
+    /** Map Color preset → 2 CSS var names cho header-bg và header-fg của group card. */
     groupColorVars: (color: string | undefined | null) => {
         bg: string;
         fg: string;
@@ -112,6 +112,7 @@ export declare class SdFormBuilder implements OnInit, OnDestroy {
     /** Segmented Design/Preview toggle (replaces play_circle/stop_circle). */
     setMode: (preview: boolean) => void;
     /** Mở canvas thiết kế riêng cho 1 group (chỉ children của nó). Snapshot để Cancel revert. */
+    onEnterGroupEditKeydown: (group: SdFormGenericGroup, event: KeyboardEvent) => void;
     enterGroupEdit: (group: SdFormGenericGroup) => void;
     /** OK: giữ thay đổi children, quay về canvas chính. */
     confirmGroupEdit: () => void;
@@ -124,6 +125,7 @@ export declare class SdFormBuilder implements OnInit, OnDestroy {
     /** Xoá component theo scope hiện tại (top-level hoặc children của group đang Detail). */
     removeComponent: (id: string) => void;
     selectComponent: (item?: SdFormGenericComponent | SdFormGenericGroup) => void;
+    onPaletteItemKeydown: (item: FormBuilderComponent, event: KeyboardEvent) => void;
     onClickedOutside: (e: any) => void;
     clickFormContentEmpty: () => void;
     drop: (event: CdkDragDrop<any[]>) => void;

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

@@ -0,0 +1,34 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { SdFormGenericCheckbox } from '../../../../../../models';
+import * as i0 from "@angular/core";
+/**
+ * Ô checkbox của form-render.
+ *
+ * why: form-builder từ trước đã tạo được field `type: 'checkbox'` nhưng form-render KHÔNG có nhánh
+ * nào cho nó — field dựng trong builder chạy ra form trống, không hiện gì. Component này lấp chỗ đó
+ * theo đúng khuôn của các control còn lại (textfield/radio…): nhận cùng bộ input, tự áp defaultValue,
+ * và nghe `setVariables` để giá trị đặt từ biểu thức cũng phản ánh lên UI.
+ */
+export declare class CheckboxComponent implements OnInit, OnDestroy {
+    #private;
+    private ref;
+    readonly setVariables: import("@angular/core").InputSignal<Subject<{
+        key: string;
+        value: any;
+    }>>;
+    readonly form: import("@angular/core").InputSignal<FormGroup<{}>>;
+    entity: Record<string, any>;
+    set _entity(val: Record<string, any>);
+    component?: SdFormGenericCheckbox;
+    set _component(val: SdFormGenericCheckbox);
+    disabled: boolean;
+    set _disabled(val: boolean | '' | undefined | null);
+    viewed: boolean;
+    set _viewed(val: boolean | '' | undefined | null);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "lib-checkbox", never, { "setVariables": { "alias": "setVariables"; "required": true; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "_entity": { "alias": "entity"; "required": true; }; "_component": { "alias": "component"; "required": true; }; "_disabled": { "alias": "disabled"; "required": false; }; "_viewed": { "alias": "viewed"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/form-generic/src/components/form-render/components/item/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './number/number.component';
 export * from './datetime/datetime.component';
 export * from './select/select.component';
 export * from './radio/radio.component';
+export * from './checkbox/checkbox.component';
 export * from './upload/upload.component';
 export * from './table/table.component';
 export * from './html/html.component';

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

@@ -31,7 +31,7 @@ export declare class TableComponent implements AfterViewInit, OnDestroy, OnInit
     readonly modelChange: import("@angular/core").OutputEmitterRef<any[]>;
     tableOption?: SdTableOption;
     row: any;
-    columnValues: Record<string, SdFormGenericSelectionItem[] | SdSearch>;
+    columnValues: Record<string, SdFormGenericSelectionItem[] | SdSearch<SdFormGenericSelectionItem>>;
     formRenderColumn: Record<string, SdFormGenericTableColumn>;
     fileKeys: string[];
     imageKeys: string[];
@@ -40,6 +40,11 @@ export declare class TableComponent implements AfterViewInit, OnDestroy, OnInit
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Tiêu đề của side-drawer phải nói đúng tác vụ đang làm — trước đây nó cứng là "Chi tiết" cho cả
+     * thêm mới lẫn sửa, còn dòng "Tạo mới/cập nhật" thì rơi vào thân drawer vì gắn nhầm slot.
+     */
+    get detailTitle(): string;
     onDetail: (row?: any) => void;
     onCancel: () => void;
     onAccept: (addable?: boolean) => void;

package/components/form-generic/src/components/sd-feel-expression/sd-feel-expression.component.d.ts

@@ -11,7 +11,7 @@ export declare class SdFeelExpression implements OnInit {
     modal?: SdModal;
     form: FormGroup<{}>;
     attributeOperators: Record<"string" | "number" | "boolean" | "datetime" | "values", {
-        value: import("@sdcorejs/angular/components/form-generic").Operator;
+        value: import("@sdcorejs/angular/components/form-generic").SdFormGenericOperator;
         symbol?: string;
         display: string;
     }[]>;

package/components/form-generic/src/configurations/form.configuration.d.ts

@@ -1,7 +1,7 @@
 import { SdSearch } from '@sdcorejs/angular/forms/models';
 import { SdFormGenericArgs, SdFormGenericDefinitionHtml, SdFormGenericDefinitionSelection, SdFormGenericDefinitionTable, SdFormGenericSelectionItem, SdFormGenericTemplate } from '../models';
 import { SdFormGenericValidationConfiguration } from '../models/form-generic-validation.model';
-export interface IWorkflowConfigurationForm<TSelectionArgs = any> {
+export interface IWorkflowConfigurationForm<TSelectionArgs = unknown> {
     templates: SdFormGenericTemplate[];
     selections: SdFormGenericDefinitionSelection<any, TSelectionArgs>[] | (() => SdFormGenericDefinitionSelection<any, TSelectionArgs>[]) | (() => Promise<SdFormGenericDefinitionSelection[]>);
     getValues?: (key: string, selectionArgs?: TSelectionArgs) => Promise<SdFormGenericSelectionItem[]>;

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

@@ -17,9 +17,9 @@ export interface SdFormGenericLayout {
     columns: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     mobileColumns?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 }
-export declare const GenerateId: () => string;
-export declare const GenerateKey: () => string;
-export declare const SdFormatComponent: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
+export declare const sdGenerateId: () => string;
+export declare const sdGenerateKey: () => string;
+export declare const sdFormatComponent: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
 export interface SdFormGenericVariable {
     id: string;
     key: string;
@@ -171,7 +171,7 @@ export interface FormRenderComponentTableColumnValues {
     query?: Record<string, any>;
 }
 export type SdFormGenericTableColumn<T = any> = TableColumnString<T> | TableColumnNumber<T> | TableColumnBool<T> | TableColumnDate<T> | TableColumnDatetime<T> | TableColumnRadio<T> | TableColumnValues<T> | TableColumnImage<T> | TableColumnFile<T>;
-export declare const TableColumnTypes: {
+export declare const SD_TABLE_COLUMN_TYPES: {
     value: string;
     display: string;
 }[];
@@ -301,17 +301,17 @@ export interface FormBuilderComponent {
     group: FormBuilderComponentGroup;
     name: string;
 }
-export declare const FormBuilderComponents: FormBuilderComponent[];
+export declare const SD_FORM_BUILDER_COMPONENTS: FormBuilderComponent[];
 /** Lookup: component type → Material icon + label, used by attribute panel header. */
-export declare const COMPONENT_ICONS: Record<string, {
+export declare const SD_COMPONENT_ICONS: Record<string, {
     symbol: string;
     label: string;
 }>;
-export declare const GetComponentAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => {
+export declare const sdGetComponentAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => {
     value: string;
     display: string;
 }[];
-export declare const GetVariableAttributes: (variables: SdFormGenericVariable[]) => {
+export declare const sdGetVariableAttributes: (variables: SdFormGenericVariable[]) => {
     value: string;
     display: string;
 }[];

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

@@ -1,6 +1,6 @@
 import { SdSearch } from '@sdcorejs/angular/forms/models';
 import { SdFormGenericArgs } from './form-render/form-render-args.model';
-export interface SdFormGenericSelectionItem<T = any> {
+export interface SdFormGenericSelectionItem<T = unknown> {
     value: string;
     display: string;
     disabled?: boolean;
@@ -11,8 +11,8 @@ export interface SdFormGenericSelectionStaticItem {
     value: string;
     label: string;
 }
-export type SdFormGenericDefinitionSelection<T = any, TArgs = any> = SelectionValues<T> | SelectionLazyValues<T> | SelectionValuesKey<TArgs> | SelectionLazyValuesKey<TArgs>;
-interface SelectionVariables<T = any> {
+export type SdFormGenericDefinitionSelection<T = unknown, TArgs = unknown> = SelectionValues<T> | SelectionLazyValues<T> | SelectionValuesKey<TArgs> | SelectionLazyValuesKey<TArgs>;
+interface SelectionVariables<T = unknown> {
     items?: {
         value: Extract<keyof T, string>;
         display: string;
@@ -40,10 +40,10 @@ interface SelectionLazyValuesKey<TArgs> extends SelecttionBase {
     lazyValuesKey: string;
     args?: TArgs;
 }
-interface SelectionValues<T = any> extends SelecttionBase {
+interface SelectionValues<T = unknown> extends SelecttionBase {
     values: (args: SdFormGenericArgs) => Promise<SdFormGenericSelectionItem<T>[]>;
 }
-interface SelectionLazyValues<T = any> extends SelecttionBase {
+interface SelectionLazyValues<T = unknown> extends SelecttionBase {
     lazyValues: (searchArgs: Parameters<SdSearch>[0], args: SdFormGenericArgs) => Promise<SdFormGenericSelectionItem<T>[]>;
 }
 export {};

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

@@ -14,9 +14,9 @@ export interface SdFormGenericExpressionCondition {
     value: any;
     dayInfo: DayInfo;
 }
-export type Operator = 'EQUAL' | 'NOT_EQUAL' | 'GREATER_THAN' | 'LESS_THAN' | 'GREATER_OR_EQUAL' | 'LESS_OR_EQUAL' | 'NULL' | 'NOT_NULL';
-export declare const Operators: {
-    value: Operator;
+export type SdFormGenericOperator = 'EQUAL' | 'NOT_EQUAL' | 'GREATER_THAN' | 'LESS_THAN' | 'GREATER_OR_EQUAL' | 'LESS_OR_EQUAL' | 'NULL' | 'NOT_NULL';
+export declare const SdFormGenericOperators: {
+    value: SdFormGenericOperator;
     symbol?: string;
     display: string;
 }[];
@@ -43,16 +43,16 @@ export interface DayInfo {
     related?: 'LASTDAY' | 'NEXTDAY' | 'LASTWEEK' | 'NEXTWEEK' | 'LASTMONTH' | 'NEXTMONTH';
     relatedValue?: number;
 }
-export declare const DayInfoTypes: {
+export declare const SD_DAY_INFO_TYPES: {
     value: string;
     display: string;
 }[];
-export declare const DayInfoPreviouses: {
+export declare const SD_DAY_INFO_PREVIOUSES: {
     value: string;
     display: string;
     format: (n: number) => string;
 }[];
-export declare const GetDatetimeValue: (value: string) => string | undefined;
+export declare const sdGetDatetimeValue: (value: string) => string | undefined;
 interface AttributeValues {
     value: string;
     display: string;
@@ -62,13 +62,13 @@ interface AttributeValues {
         display: string;
     }[];
 }
-export declare const AttributeOperators: Record<Attribute['type'], {
-    value: Operator;
+export declare const SD_ATTRIBUTE_OPERATORS: Record<Attribute['type'], {
+    value: SdFormGenericOperator;
     symbol?: string;
     display: string;
 }[]>;
-export declare const GetAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => Attribute[];
-export declare const TemplateToCondition: (template: string | undefined | null, entity: Record<string, any>) => string | undefined;
-export declare const EvaluateExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition, entity: Record<string, any>) => boolean | undefined;
-export declare const ExpressionToJavascriptExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition) => string | undefined;
+export declare const sdGetAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => Attribute[];
+export declare const sdTemplateToCondition: (template: string | undefined | null, entity: Record<string, any>) => string | undefined;
+export declare const sdEvaluateExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition, entity: Record<string, any>) => boolean | undefined;
+export declare const sdExpressionToJavascriptExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition) => string | undefined;
 export {};

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

@@ -6,3 +6,4 @@ export type * from './form-generic-definition-selection.model';
 export type * from './form-generic-definition-table.model';
 export type * from './form-generic-definition-html.model';
 export * from './form-generic-expression.model';
+export * from './form-generic-validation.model';

package/components/form-generic/src/services/form-generic.service.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 export declare class FormGenericService {
     #private;
     private readonly configuration;
-    get selections(): (() => Promise<SdFormGenericDefinitionSelection[]>) | SdFormGenericDefinitionSelection<any, any>[] | (() => SdFormGenericDefinitionSelection<any, any>[]);
+    get selections(): (() => Promise<SdFormGenericDefinitionSelection[]>) | SdFormGenericDefinitionSelection<any, unknown>[] | (() => SdFormGenericDefinitionSelection<any, unknown>[]);
     get tables(): import("@sdcorejs/angular/components/form-generic").SdFormGenericDefinitionTable<any>[];
     getSelection: (valuesKey: string | undefined | null) => Promise<SdFormGenericDefinitionSelection | undefined>;
     selection: {
@@ -12,7 +12,7 @@ export declare class FormGenericService {
         getDefinition: (valuesKey: string | undefined | null) => Promise<SdFormGenericDefinitionSelection | undefined>;
         items: (valuesKey: string | undefined | null, args: SdFormGenericArgs) => Promise<SdFormGenericSelectionItem[] | SdSearch<SdFormGenericSelectionItem>>;
         variables: {
-            detail: (valuesKey: string, values: string | number | string[] | number[], args: SdFormGenericArgs) => Promise<any>;
+            detail: (valuesKey: string, values: string | number | string[] | number[], args: SdFormGenericArgs) => Promise<unknown>;
         };
     };
     html: {

package/components/import-excel/src/import-excel.component.d.ts

@@ -36,6 +36,7 @@ export declare class SdImportExcel implements OnInit, OnDestroy {
     accept: () => void;
     setValidation: (validations: SdImportExcelValidation[]) => void;
     view: (showing?: "ALL" | "SUCCESS" | "WARNING" | "ERROR") => void;
+    onDownloadTemplateKeydown: (event: KeyboardEvent) => void;
     downloadTemplate: () => Promise<void>;
     export: () => Promise<void>;
     onClosed: () => void;

package/components/index.d.ts

@@ -11,12 +11,12 @@ export * from '@sdcorejs/angular/components/query-bar';
 export * from '@sdcorejs/angular/components/upload-file';
 export * from '@sdcorejs/angular/components/section';
 export * from '@sdcorejs/angular/components/inform';
+export * from '@sdcorejs/angular/components/form-generic';
 export * from '@sdcorejs/angular/components/anchor';
 export * from '@sdcorejs/angular/components/query-builder';
 export * from '@sdcorejs/angular/components/org-chart';
 export * from '@sdcorejs/angular/components/tree';
 export * from '@sdcorejs/angular/components/import-excel';
-export * from '@sdcorejs/angular/components/document-builder';
 export * from '@sdcorejs/angular/components/mini-editor';
 export * from '@sdcorejs/angular/components/view';
 export * from '@sdcorejs/angular/components/code-editor';
@@ -29,3 +29,8 @@ export * from '@sdcorejs/angular/components/breadcrumb';
 export * from '@sdcorejs/angular/components/data-state';
 export * from '@sdcorejs/angular/components/job-progress';
 export * from '@sdcorejs/angular/components/audit-diff';
+export * from '@sdcorejs/angular/components/ckeditor-styles';
+export * from '@sdcorejs/angular/components/history';
+export * from '@sdcorejs/angular/components/operator';
+export * from '@sdcorejs/angular/components/stepper';
+export * from '@sdcorejs/angular/components/tab';

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

@@ -14,7 +14,7 @@ export interface SdMiniEditorMentionConfig {
         attributes?: Record<string, string>;
     };
 }
-export type SdMiniEditorMentionItem<T = any> = MentionFeedObjectItem & {
+export type SdMiniEditorMentionItem<T = unknown> = MentionFeedObjectItem & {
     data?: T;
 };
 export interface SdMiniEditorOption {

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

@@ -1,8 +1,8 @@
-import { ElementRef, TemplateRef } from '@angular/core';
+import { ElementRef, OnDestroy, TemplateRef } from '@angular/core';
 import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export type SdModalBeforeClose = () => boolean | Promise<boolean>;
-export declare class SdModal {
+export declare class SdModal implements OnDestroy {
     #private;
     static index: import("@angular/core").WritableSignal<number>;
     templateRef: import("@angular/core").Signal<TemplateRef<any>>;
@@ -26,6 +26,7 @@ export declare class SdModal {
     isOpened: import("@angular/core").WritableSignal<boolean>;
     alreadyOpened: import("@angular/core").WritableSignal<boolean>;
     constructor();
+    ngOnDestroy(): void;
     open: () => void;
     close: () => void;
     requestClose: () => Promise<boolean>;

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

@@ -1,11 +1,93 @@
 import { CdkPortal } from '@angular/cdk/portal';
 import * as i0 from "@angular/core";
+/**
+ * `<sd-modal-resizable>` — right-docked, non-modal panel that can be minimized, expanded or pushed
+ * fullscreen. Several panels stack side by side along the right edge of the viewport, so the user
+ * can keep multiple records open at once while still working with the page behind them.
+ *
+ * Use it for side-by-side comparison / inspector workflows. Use `<sd-modal>` when the task is
+ * blocking, and `<sd-side-drawer>` when a single overlay with a backdrop is enough.
+ *
+ * NOTE ON DOCS: this component deliberately has **no** sibling `sd-modal-resizable.md`. Every `*.md`
+ * under the library is swept into `published-docs/<version>/index.json` by `scripts/collect-docs.mjs`,
+ * and `scripts/generate-showcase-example-sources.test.mjs` asserts that list is 1:1 with the
+ * `publishedDocId` set in the showcase documentation registry. A published doc with no showcase page
+ * therefore turns that release guard red. Keep the reference here until the component ships a
+ * showcase demo + registry entry; only then add the `.md`.
+ *
+ * ```ts
+ * import { SdModalResizable } from '@sdcorejs/angular/components/modal-resizable';
+ * ```
+ *
+ * ```html
+ * <sd-button title="Open detail" type="fill" color="primary" (click)="panel.open()"></sd-button>
+ *
+ * <sd-modal-resizable #panel width="520px">
+ *   <span sdTitle>Đơn hàng #1024</span>
+ *
+ *   <div sdBody class="panel-body">
+ *     <sd-section icon="receipt" title="Thông tin chung">
+ *       <sd-section-item label="Khách hàng">Nguyen Van An</sd-section-item>
+ *     </sd-section>
+ *   </div>
+ *
+ *   <sd-button sdFooterRight type="text" title="Đóng" (click)="panel.close()"></sd-button>
+ * </sd-modal-resizable>
+ * ```
+ *
+ * ### Slots
+ * | Selector          | Where it renders          |
+ * | ----------------- | ------------------------- |
+ * | `[sdTitle]`       | Header title area.        |
+ * | `[sdBody]`        | Scrollable content area.  |
+ * | `[sdFooterLeft]`  | Footer left action group. |
+ * | `[sdFooterRight]` | Footer right action group.|
+ *
+ * Header, body and footer only render while the panel is open.
+ *
+ * ### Panel stacking
+ * The panel is portalled onto `document.body` (via `CdkPortal` + `DomPortalOutlet`), so laying panels
+ * out is a concern shared by all live instances rather than by a single view. Arrangement is scoped
+ * through the root-provided `SdModalResizableRegistry`: each instance registers its panel id on
+ * construction and unregisters it on destroy. `open`, `close`, `minimize`, `maximize` and
+ * `toggleMaximum` re-run the arrangement and rewrite inline `width` / `right` **only on registered,
+ * still-mounted panels**, in registration order. Consequences worth knowing:
+ * - Markup of your own that happens to carry the `.modal-resizable` class is **not** touched.
+ *   (Earlier builds ran `document.querySelectorAll('.modal-resizable')` and rewrote every match.)
+ * - A destroyed panel immediately stops taking up a slot for the instances that outlive it.
+ * - Panels marked `c-closed`, and expanded panels with no captured `data-width`, are skipped.
+ *
+ * ### Lifecycle / teardown
+ * `open()`, `close()` and the arrangement pass each schedule a short `setTimeout` (100ms / 100ms /
+ * 200ms) that mutates DOM. All of them are tracked and cleared in `DestroyRef.onDestroy`, together
+ * with unregistering from the registry and destroying the portal view. Destroying the component
+ * mid-animation cannot run layout work against a detached panel.
+ *
+ * ### Anti-patterns
+ * - Rendering it inside a scroll container and expecting it to be clipped — it lives on `<body>`.
+ * - Reusing the `.modal-resizable` class on your own elements to "join" the stack; register a real
+ *   component instead.
+ * - Writing inline `width` / `right` on a panel yourself — the next arrangement pass overwrites both.
+ *
+ * ### Tests
+ * `src/modal-resizable.component.spec.ts` — portal attach, open/close/minimize/maximize math,
+ * loading, editing, timer teardown, registry scoping. Run:
+ * `npx ng test sdcorejs-angular --watch=false --browsers=ChromeHeadless --include='projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.spec.ts'`
+ *
+ * ### Related
+ * `<sd-modal>` (blocking dialog / bottom-sheet), `<sd-side-drawer>` (single right-side overlay with
+ * a body scroll lock), `SdLoadingService` (powers `startLoading()` / `stopLoading()`).
+ */
 export declare class SdModalResizable {
     #private;
+    /** Generated DOM id of the panel element (`I<uuid>`). */
     readonly id: string;
     readonly portal: import("@angular/core").Signal<CdkPortal>;
+    /** Marks the panel as editable. Bare attribute = `true`. Default `false`. */
     readonly editable: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
+    /** CSS width used while the panel is expanded (not a minimum). Default `'480px'`. */
     readonly width: import("@angular/core").InputSignal<string>;
+    /** Emitted by `toggleEditable()` with the new editing state. */
     readonly editingChanged: import("@angular/core").OutputEmitterRef<boolean>;
     readonly isEditing: import("@angular/core").WritableSignal<boolean>;
     readonly isOpened: import("@angular/core").WritableSignal<boolean>;
@@ -14,15 +96,25 @@ export declare class SdModalResizable {
     readonly isMinimum: import("@angular/core").WritableSignal<boolean>;
     readonly isMaximum: import("@angular/core").WritableSignal<boolean>;
     constructor();
+    /** Opens the panel, captures its rendered width, and expands it. */
     open: () => void;
+    /** Collapses the panel to zero width and stops loading. */
     close: () => void;
+    /** Shrinks the panel to the 300px minimum strip. */
     minimize: () => void;
+    /** Restores the panel to its expanded width. */
     maximize: () => void;
+    /** Toggles fullscreen (`calc(100% - 16px)`). */
     toggleMaximum: () => void;
+    /** Drives the scoped loading overlay through `SdLoadingService`. */
     startLoading: () => void;
+    /** Stops the scoped loading overlay. */
     stopLoading: () => void;
+    /** Flips `isEditing` and emits `editingChanged`. */
     toggleEditable(): void;
+    /** Hover state hook bound in the template. */
     onFocus: () => void;
+    /** Hover state hook bound in the template. */
     onBlur: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdModalResizable, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdModalResizable, "sd-modal-resizable", never, { "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "editingChanged": "editingChanged"; }, never, ["[sdTitle]", "[sdBody]", "[sdFooterLeft]", "[sdFooterRight]"], true, never>;

package/components/modal-resizable/src/modal-resizable.registry.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+/**
+ * Sổ đăng ký các panel `<sd-modal-resizable>` đang sống.
+ *
+ * why: mỗi panel được portal ra thẳng `document.body` nên việc xếp chỗ (width/right) là bài toán
+ * chung của cả stack. Trước đây `#arrangePanels` quét `document.querySelectorAll('.modal-resizable')`
+ * — query đó bắt MỌI phần tử mang class này trong tài liệu, kể cả markup của component khác hoặc
+ * của app dùng trùng tên class, rồi ghi đè inline style lên chúng. Registry giới hạn phạm vi ghi
+ * đúng vào các instance do library tạo ra và còn sống.
+ */
+export declare class SdModalResizableRegistry {
+    #private;
+    register(id: string): void;
+    unregister(id: string): void;
+    /**
+     * Phần tử panel của các instance đã đăng ký và đang có mặt trong DOM.
+     * Instance đã destroy hoặc chưa attach portal sẽ bị bỏ qua.
+     */
+    panels(): HTMLElement[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalResizableRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdModalResizableRegistry>;
+}

package/components/org-chart/src/org-chart.component.d.ts

@@ -16,9 +16,15 @@ export declare class SdOrgChart {
     readonly resolvedItemTemplate: import("@angular/core").Signal<TemplateRef<SdOrgChartItemContext<SdOrgChartItem>> | undefined>;
     readonly trackByItem: (_index: number, item: SdOrgChartItem) => string | number;
     hasChildren: (item: SdOrgChartItem) => boolean;
+    /** why: trả về hằng số dùng chung thay vì `[]` mới, để leaf không cấp phát mỗi lần CD gọi tới. */
     childrenOf: (item: SdOrgChartItem) => SdOrgChartItem[];
     isExpanded: (item: SdOrgChartItem) => boolean;
     toggle: (item: SdOrgChartItem, event?: Event) => void;
+    /**
+     * Template context của một node. Ref ổn định giữa các lần CD nhờ `#contextByItem`.
+     * Item không nằm trong `resolvedItems()` (gọi thủ công từ bên ngoài) thì dựng mới — trường hợp
+     * này không nằm trên đường render nên không gây churn.
+     */
     createContext: (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem | null) => SdOrgChartItemContext;
     nodeAutoId: (item: SdOrgChartItem, part: "node" | "image" | "title" | "description" | "toggle") => string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdOrgChart, never>;

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

@@ -7,6 +7,7 @@ export declare class SdPreviewImage implements OnDestroy {
     static readonly MAX_ZOOM = 4;
     static readonly ZOOM_STEP = 0.1;
     static readonly SWIPE_THRESHOLD = 40;
+    readonly stageId: string;
     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>;