@sdcorejs/angular 20.1.6 → 20.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/index.d.ts

@@ -30,13 +30,15 @@ declare class SdAnchor implements OnDestroy {
     ellipsis: _angular_core.InputSignalWithTransform<boolean, unknown>;
     overScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     hideNav: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    hideNavOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
     color: _angular_core.InputSignal<Color>;
+    readonly navHidden: _angular_core.Signal<boolean>;
     activeSectionId: _angular_core.WritableSignal<string>;
     constructor();
     scrollSectionByClick(idSectionTarget: string): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAnchor, never>;
-    static ɵcmp: _angular_core.ɵɵ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: _angular_core.ɵɵ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>;
 }
 
 export { SdAnchor, SdAnchorItem };

package/components/badge/index.d.ts

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

package/components/ckeditor-styles/index.d.ts

@@ -7,7 +7,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/index.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken, OnDestroy, OnInit, AfterViewInit, QueryList } from '@an
 import { SdSearch, SdCustomValidator } from '@sdcorejs/angular/forms/models';
 import { SdTableColumn, SdTableOption, SdTable } from '@sdcorejs/angular/components/table';
 import { SdUploadFile } from '@sdcorejs/angular/components/upload-file';
-import { Operator as Operator$1, ValidationPatternType, Color } from '@sdcorejs/utils/models';
+import { Operator, ValidationPatternType, Color } from '@sdcorejs/utils/models';
 import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
 import { CdkDropList, CdkDragMove, CdkDragDrop, CdkDragEnter, CdkDragSortEvent, CdkDrag } from '@angular/cdk/drag-drop';
 import { FormGroup } from '@angular/forms';
@@ -17,7 +17,7 @@ type SdFormRenderEntity = Record<string, any> & {
     sdRaw?: Record<string, any>;
 };
 
-interface SdFormGenericSelectionItem<T = any> {
+interface SdFormGenericSelectionItem<T = unknown> {
     value: string;
     display: string;
     disabled?: boolean;
@@ -28,8 +28,8 @@ interface SdFormGenericSelectionStaticItem {
     value: string;
     label: string;
 }
-type SdFormGenericDefinitionSelection<T = any, TArgs = any> = SelectionValues<T> | SelectionLazyValues<T> | SelectionValuesKey<TArgs> | SelectionLazyValuesKey<TArgs>;
-interface SelectionVariables<T = any> {
+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;
@@ -57,10 +57,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>[]>;
 }
 
@@ -74,13 +74,13 @@ interface SdFormGenericExpressionCondition {
     key: string;
     type: 'condition';
     field?: string;
-    operator: Operator$1;
+    operator: Operator;
     value: any;
     dayInfo: DayInfo;
 }
-type Operator = 'EQUAL' | 'NOT_EQUAL' | 'GREATER_THAN' | 'LESS_THAN' | 'GREATER_OR_EQUAL' | 'LESS_OR_EQUAL' | 'NULL' | 'NOT_NULL';
-declare const Operators: {
-    value: Operator;
+type SdFormGenericOperator = 'EQUAL' | 'NOT_EQUAL' | 'GREATER_THAN' | 'LESS_THAN' | 'GREATER_OR_EQUAL' | 'LESS_OR_EQUAL' | 'NULL' | 'NOT_NULL';
+declare const SdFormGenericOperators: {
+    value: SdFormGenericOperator;
     symbol?: string;
     display: string;
 }[];
@@ -107,16 +107,16 @@ interface DayInfo {
     related?: 'LASTDAY' | 'NEXTDAY' | 'LASTWEEK' | 'NEXTWEEK' | 'LASTMONTH' | 'NEXTMONTH';
     relatedValue?: number;
 }
-declare const DayInfoTypes: {
+declare const SD_DAY_INFO_TYPES: {
     value: string;
     display: string;
 }[];
-declare const DayInfoPreviouses: {
+declare const SD_DAY_INFO_PREVIOUSES: {
     value: string;
     display: string;
     format: (n: number) => string;
 }[];
-declare const GetDatetimeValue: (value: string) => string | undefined;
+declare const sdGetDatetimeValue: (value: string) => string | undefined;
 interface AttributeValues {
     value: string;
     display: string;
@@ -126,20 +126,24 @@ interface AttributeValues {
         display: string;
     }[];
 }
-declare const AttributeOperators: Record<Attribute['type'], {
-    value: Operator;
+declare const SD_ATTRIBUTE_OPERATORS: Record<Attribute['type'], {
+    value: SdFormGenericOperator;
     symbol?: string;
     display: string;
 }[]>;
-declare const GetAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => Attribute[];
-declare const TemplateToCondition: (template: string | undefined | null, entity: Record<string, any>) => string | undefined;
-declare const EvaluateExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition, entity: Record<string, any>) => boolean | undefined;
-declare const ExpressionToJavascriptExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition) => string | undefined;
+declare const sdGetAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => Attribute[];
+declare const sdTemplateToCondition: (template: string | undefined | null, entity: Record<string, any>) => string | undefined;
+declare const sdEvaluateExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition, entity: Record<string, any>) => boolean | undefined;
+declare const sdExpressionToJavascriptExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition) => string | undefined;
 
 type SdFormGenericValidation = ValidationExpression | ValidationFunction;
 interface ValidationBase {
     alert: 'warning' | 'error';
 }
+declare const ValidationAlerts: {
+    value: string;
+    display: string;
+}[];
 interface ValidationExpression extends ValidationBase {
     type: 'expression';
     expression: SdFormGenericExpression;
@@ -179,9 +183,9 @@ 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;
 }
-declare const GenerateId: () => string;
-declare const GenerateKey: () => string;
-declare const SdFormatComponent: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
+declare const sdGenerateId: () => string;
+declare const sdGenerateKey: () => string;
+declare const sdFormatComponent: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
 interface SdFormGenericVariable {
     id: string;
     key: string;
@@ -333,7 +337,7 @@ interface FormRenderComponentTableColumnValues {
     query?: Record<string, any>;
 }
 type SdFormGenericTableColumn<T = any> = TableColumnString<T> | TableColumnNumber<T> | TableColumnBool<T> | TableColumnDate<T> | TableColumnDatetime<T> | TableColumnRadio<T> | TableColumnValues<T> | TableColumnImage<T> | TableColumnFile<T>;
-declare const TableColumnTypes: {
+declare const SD_TABLE_COLUMN_TYPES: {
     value: string;
     display: string;
 }[];
@@ -463,17 +467,17 @@ interface FormBuilderComponent {
     group: FormBuilderComponentGroup;
     name: string;
 }
-declare const FormBuilderComponents: FormBuilderComponent[];
+declare const SD_FORM_BUILDER_COMPONENTS: FormBuilderComponent[];
 /** Lookup: component type → Material icon + label, used by attribute panel header. */
-declare const COMPONENT_ICONS: Record<string, {
+declare const SD_COMPONENT_ICONS: Record<string, {
     symbol: string;
     label: string;
 }>;
-declare const GetComponentAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => {
+declare const sdGetComponentAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => {
     value: string;
     display: string;
 }[];
-declare const GetVariableAttributes: (variables: SdFormGenericVariable[]) => {
+declare const sdGetVariableAttributes: (variables: SdFormGenericVariable[]) => {
     value: string;
     display: string;
 }[];
@@ -525,7 +529,7 @@ interface SdFormGenericDefinitionHtmlQuery {
     }[];
 }
 
-interface IWorkflowConfigurationForm<TSelectionArgs = any> {
+interface IWorkflowConfigurationForm<TSelectionArgs = unknown> {
     templates: SdFormGenericTemplate[];
     selections: SdFormGenericDefinitionSelection<any, TSelectionArgs>[] | (() => SdFormGenericDefinitionSelection<any, TSelectionArgs>[]) | (() => Promise<SdFormGenericDefinitionSelection[]>);
     getValues?: (key: string, selectionArgs?: TSelectionArgs) => Promise<SdFormGenericSelectionItem[]>;
@@ -595,7 +599,7 @@ declare class TableComponent implements AfterViewInit, OnDestroy, OnInit {
     readonly modelChange: _angular_core.OutputEmitterRef<any[]>;
     tableOption?: SdTableOption;
     row: any;
-    columnValues: Record<string, SdFormGenericSelectionItem[] | SdSearch$1>;
+    columnValues: Record<string, SdFormGenericSelectionItem[] | SdSearch$1<SdFormGenericSelectionItem>>;
     formRenderColumn: Record<string, SdFormGenericTableColumn>;
     fileKeys: string[];
     imageKeys: string[];
@@ -604,6 +608,11 @@ 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;
@@ -797,7 +806,7 @@ 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;
@@ -805,6 +814,7 @@ 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;
@@ -817,6 +827,7 @@ 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;
@@ -867,7 +878,7 @@ declare class SdFeelExpression implements OnInit {
     modal?: SdModal;
     form: FormGroup<{}>;
     attributeOperators: Record<"string" | "number" | "boolean" | "datetime" | "values", {
-        value: _sdcorejs_angular_components_form_generic.Operator;
+        value: _sdcorejs_angular_components_form_generic.SdFormGenericOperator;
         symbol?: string;
         display: string;
     }[]>;
@@ -905,5 +916,5 @@ declare class SdFormRenderService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdFormRenderService>;
 }
 
-export { AttributeOperators, COMPONENT_ICONS, DayInfoPreviouses, DayInfoTypes, EvaluateExpression, ExpressionToJavascriptExpression, FormBuilderComponents, GenerateId, GenerateKey, GetAttributes, GetComponentAttributes, GetDatetimeValue, GetVariableAttributes, Operators, SD_FORM_GENERIC_CONFIGURATION, SdFeelExpression, SdFormBuilder, SdFormRender, SdFormRenderService, SdFormatComponent, TableColumnTypes, TemplateToCondition };
-export type { Attribute, DayInfo, FormBuilderComponent, FormBuilderComponentGroup, FormRenderComponentTableColumnValues, ISdFormGenericConfiguration, IWorkflowConfigurationForm, Operator, SdFormGeneric, SdFormGenericArgs, SdFormGenericBreak, SdFormGenericCheckbox, SdFormGenericChecklist, SdFormGenericChipCalendar, SdFormGenericChipString, SdFormGenericComponent, SdFormGenericComponentBase, SdFormGenericDatetime, SdFormGenericDefinitionHtml, SdFormGenericDefinitionSelection, SdFormGenericDefinitionTable, SdFormGenericExpression, SdFormGenericExpressionCondition, SdFormGenericGroup, SdFormGenericHtml, SdFormGenericLayout, SdFormGenericNumber, SdFormGenericRadio, SdFormGenericSelect, SdFormGenericSelectionItem, SdFormGenericSelectionStaticItem, SdFormGenericTable, SdFormGenericTableColumn, SdFormGenericTemplate, SdFormGenericTextarea, SdFormGenericTextfield, SdFormGenericUpload, SdFormGenericValues, SdFormGenericVariable, SdFormRenderConfiguration, SdFormRenderEntity };
+export { SD_ATTRIBUTE_OPERATORS, SD_COMPONENT_ICONS, SD_DAY_INFO_PREVIOUSES, SD_DAY_INFO_TYPES, SD_FORM_BUILDER_COMPONENTS, SD_FORM_GENERIC_CONFIGURATION, SD_TABLE_COLUMN_TYPES, SdFeelExpression, SdFormBuilder, SdFormGenericOperators, SdFormRender, SdFormRenderService, ValidationAlerts, sdEvaluateExpression, sdExpressionToJavascriptExpression, sdFormatComponent, sdGenerateId, sdGenerateKey, sdGetAttributes, sdGetComponentAttributes, sdGetDatetimeValue, sdGetVariableAttributes, sdTemplateToCondition };
+export type { Attribute, DayInfo, FormBuilderComponent, FormBuilderComponentGroup, FormRenderComponentTableColumnValues, ISdFormGenericConfiguration, IWorkflowConfigurationForm, SdFormGeneric, SdFormGenericArgs, SdFormGenericBreak, SdFormGenericCheckbox, SdFormGenericChecklist, SdFormGenericChipCalendar, SdFormGenericChipString, SdFormGenericComponent, SdFormGenericComponentBase, SdFormGenericDatetime, SdFormGenericDefinitionHtml, SdFormGenericDefinitionSelection, SdFormGenericDefinitionTable, SdFormGenericExpression, SdFormGenericExpressionCondition, SdFormGenericGroup, SdFormGenericHtml, SdFormGenericLayout, SdFormGenericNumber, SdFormGenericOperator, SdFormGenericRadio, SdFormGenericSelect, SdFormGenericSelectionItem, SdFormGenericSelectionStaticItem, SdFormGenericTable, SdFormGenericTableColumn, SdFormGenericTemplate, SdFormGenericTextarea, SdFormGenericTextfield, SdFormGenericUpload, SdFormGenericValidation, SdFormGenericValidationConfiguration, SdFormGenericValidationFunction, SdFormGenericValues, SdFormGenericVariable, SdFormRenderConfiguration, SdFormRenderEntity };

package/components/import-excel/index.d.ts

@@ -139,6 +139,7 @@ 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/index.d.ts

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

package/components/modal/index.d.ts

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

package/components/modal-resizable/index.d.ts

@@ -1,12 +1,94 @@
 import * as _angular_core from '@angular/core';
 import { CdkPortal } from '@angular/cdk/portal';
 
+/**
+ * `<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()`).
+ */
 declare class SdModalResizable {
     #private;
+    /** Generated DOM id of the panel element (`I<uuid>`). */
     readonly id: string;
     readonly portal: _angular_core.Signal<CdkPortal>;
+    /** Marks the panel as editable. Bare attribute = `true`. Default `false`. */
     readonly editable: _angular_core.InputSignalWithTransform<boolean, boolean | "">;
+    /** CSS width used while the panel is expanded (not a minimum). Default `'480px'`. */
     readonly width: _angular_core.InputSignal<string>;
+    /** Emitted by `toggleEditable()` with the new editing state. */
     readonly editingChanged: _angular_core.OutputEmitterRef<boolean>;
     readonly isEditing: _angular_core.WritableSignal<boolean>;
     readonly isOpened: _angular_core.WritableSignal<boolean>;
@@ -15,15 +97,25 @@ declare class SdModalResizable {
     readonly isMinimum: _angular_core.WritableSignal<boolean>;
     readonly isMaximum: _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: _angular_core.ɵɵFactoryDeclaration<SdModalResizable, never>;
     static ɵcmp: _angular_core.ɵɵ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/org-chart/index.d.ts

@@ -54,9 +54,15 @@ declare class SdOrgChart {
     readonly resolvedItemTemplate: _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: _angular_core.ɵɵFactoryDeclaration<SdOrgChart, never>;

package/components/preview/index.d.ts

@@ -61,6 +61,7 @@ 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: _angular_core.InputSignal<string | null | undefined>;
     readonly autoId: _angular_core.Signal<string | undefined>;
     readonly autoIdPrev: _angular_core.Signal<string | undefined>;