@sdcorejs/angular 21.0.4 → 21.0.5

package/types/sdcorejs-angular-components-query-builder.d.ts

@@ -1,5 +1,6 @@
+import * as _sdcorejs_angular_components_query_builder from '@sdcorejs/angular/components/query-builder';
 import * as _angular_core from '@angular/core';
-import { Operator, Filter } from '@sdcorejs/utils/models';
+import { Operator, DateRelative, Filter } from '@sdcorejs/utils/models';
 
 /** Field kinds the builder understands. Drives the operator set + value editor. */
 type SdQueryBuilderFieldType = 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'values';
@@ -21,6 +22,8 @@ interface SdQueryBuilderField {
     label: string;
     /** Field type — picks the default operator set + value editor control. */
     type: SdQueryBuilderFieldType;
+    /** Material icon shown before the label in the field picker; falls back to `QB_TYPE_ICON[type]` then `'tune'`. */
+    icon?: string;
     /** Override the allowed operator set (otherwise `QB_OPERATORS_BY_TYPE[type]`). */
     operators?: Operator[];
     /** Override the starting operator (otherwise `QB_DEFAULT_OPERATOR_BY_TYPE[type]`). */
@@ -35,8 +38,29 @@ interface SdQueryBuilderField {
     min?: number | string;
     /** Upper bound for number / date value editors. */
     max?: number | string;
+    /** Optional domain guard for field-to-field comparison candidates. */
+    compareGroup?: string;
+    /** Set false to hide this field from field-to-field comparison. */
+    allowFieldCompare?: boolean;
+}
+interface SdQueryBuilderOption {
+    autoId?: string;
+    fields: SdQueryBuilderField[];
+    mode?: 'edit' | 'view';
+    comparisonMode?: QbComparisonMode;
+    disabled?: boolean;
+    value?: Filter | null;
+    filters?: Filter[];
+    rootLogic?: 'AND' | 'OR';
+    onValueChange?: (value: Filter | null) => void;
+    onFiltersChange?: (filters: Filter[]) => void;
+    onRootLogicChange?: (logic: 'AND' | 'OR') => void;
 }
 type QbNode = QbGroup | QbRule;
+/** Component-level capability for right-hand operands. */
+type QbComparisonMode = 'value-only' | 'value-or-field';
+/** Per-rule right-hand operand source. */
+type QbValueSource = 'literal' | 'field';
 /** A logical group of nodes joined by AND / OR. Maps to `FilterAndOr`. */
 interface QbGroup {
     id: string;
@@ -54,6 +78,10 @@ interface QbRule {
     operator?: Operator;
     /** Single value, `{ from, to }` for BETWEEN, or an array for IN / NOT_IN. */
     value?: any;
+    /** Internal UI state: literal input or a same-type field reference. */
+    valueSource?: QbValueSource;
+    /** Right-hand field key when `valueSource` is `'field'`. */
+    compareField?: string;
 }
 /** Type guard — narrows a `QbNode` to a `QbGroup`. */
 declare function isQbGroup(node: QbNode): node is QbGroup;
@@ -79,38 +107,59 @@ declare function qbDefaultOperator(field: SdQueryBuilderField | undefined): Oper
 declare function qbIsNoDataOperator(op: Operator | undefined): boolean;
 /** True when `op` is IN / NOT_IN (array value). */
 declare function qbIsMultiOperator(op: Operator | undefined): boolean;
+/** True when the operator accepts one right-hand operand, including a field reference. */
+declare function qbSupportsFieldCompareOperator(op: Operator | undefined): boolean;
+/**
+ * Icon fallback per field type when `SdQueryBuilderField.icon` is not set.
+ * Mirrors query-bar's `SD_QUERY_TYPE_ICON` so the two components read consistently,
+ * but kept local so query-builder has no dependency on the query-bar package.
+ */
+declare const QB_TYPE_ICON: Record<SdQueryBuilderFieldType, string>;
+/**
+ * Icon shown before a field in the field picker / selected trigger.
+ * Priority: `field.icon` → `QB_TYPE_ICON[field.type]` → `'tune'` (default, like query-bar).
+ */
+declare function qbFieldIcon(field: SdQueryBuilderField | undefined): string;
 /** Next stable node id with the given prefix. */
 declare function qbId(prefix?: string): string;
 /** Build a fresh rule node (optionally pre-filled). */
-declare function qbNewRule(field?: string, operator?: Operator, value?: any): QbRule;
+declare function qbNewRule(field?: string, operator?: Operator, value?: any, valueSource?: QbValueSource, compareField?: string): QbRule;
 /** Build a fresh group node. */
 declare function qbNewGroup(logic?: 'AND' | 'OR', children?: QbNode[]): QbGroup;
-/** Offset unit for a relative date. */
-type SdQbRelativeUnit = 'day' | 'week' | 'month';
-/** Offset direction for a relative date. */
-type SdQbRelativeDirection = 'previous' | 'next';
-/** A relative (resolved-at-query-time) date value stored in `Filter.data`. */
-interface SdQbRelativeDate {
-    /** `'now'` = current moment / today · `'offset'` = now ± amount × unit. */
-    rel: 'now' | 'offset';
-    /** Offset unit — only for `rel: 'offset'`. */
-    unit?: SdQbRelativeUnit;
-    /** Offset magnitude (>= 1) — only for `rel: 'offset'`. */
-    amount?: number;
-    /** Offset direction — only for `rel: 'offset'`. */
-    direction?: SdQbRelativeDirection;
-}
+/** Offset unit for a relative date — re-exported from the utils `DateRelative` model. */
+type SdQbRelativeUnit = DateRelative['unit'];
+/** Offset direction for a relative date — re-exported from the utils `DateRelative` model. */
+type SdQbRelativeDirection = DateRelative['direction'];
+/** Sentinel held as a rule value (and emitted as `data`) for the "today" date mode. */
+declare const QB_TODAY = "TODAY";
+/** The `'TODAY'` sentinel type (matches the utils `date-today` data literal). */
+type QbToday = typeof QB_TODAY;
 /** Date value editor mode for a date/datetime rule (derived from the rule value). */
 type QbDateMode = 'absolute' | 'now' | 'relative';
-/** Type guard — narrows an arbitrary value to a relative-date spec. */
-declare function qbIsRelativeDate(v: any): v is SdQbRelativeDate;
+/** Type guard — narrows a rule value to a utils `DateRelative` (offset spec). */
+declare const qbIsRelativeDate: (v: any) => v is DateRelative;
+/** Type guard — narrows a rule value to the `'TODAY'` sentinel ("now"/today mode). */
+declare function qbIsToday(v: any): v is QbToday;
 /** Starting relative value when a rule first switches to "relative" mode. */
-declare function qbDefaultRelative(): SdQbRelativeDate;
-/** Stable option list for the date-mode select (module ref — never reallocated). */
-declare const QB_DATE_MODES: ReadonlyArray<{
+declare function qbDefaultRelative(): DateRelative;
+/** One date-mode option — carries a Material icon shown in the dropdown + selected trigger. */
+interface QbDateModeOption {
     value: QbDateMode;
     display: string;
-}>;
+    /** Material icon name (outlined set). */
+    icon: string;
+}
+/** Stable option list for the date-mode select (module ref — never reallocated). */
+declare const QB_DATE_MODES: ReadonlyArray<QbDateModeOption>;
+/** One value-source option for field-to-field comparison UI. */
+interface QbValueSourceOption {
+    value: QbValueSource;
+    display: string;
+    /** Material icon name (outlined set). */
+    icon: string;
+}
+/** Stable option list for choosing between a literal value and another field. */
+declare const QB_VALUE_SOURCE_OPTIONS: ReadonlyArray<QbValueSourceOption>;
 /** Stable combined direction×unit option list (token `'unit:direction'`). */
 declare const QB_RELATIVE_UNIT_OPTIONS: ReadonlyArray<{
     value: string;
@@ -128,10 +177,14 @@ declare const QB_EMPTY_OPTIONS: SdQueryBuilderFieldOption[];
  */
 declare class SdQueryBuilder {
     #private;
+    /** Main option object. Prefer this API for new usage; individual inputs stay as a migration bridge. */
+    readonly option: _angular_core.InputSignal<SdQueryBuilderOption | undefined>;
     /** Filterable fields — each declares a `type` that drives the operator set + value editor. */
     readonly fields: _angular_core.InputSignal<SdQueryBuilderField[]>;
     /** `'edit'` (default) = interactive tree · `'view'` = read-only raw-query string. */
     readonly mode: _angular_core.InputSignal<"edit" | "view">;
+    /** `value-only` = literal operands only · `value-or-field` = each rule may compare against another field. */
+    readonly comparisonMode: _angular_core.InputSignal<QbComparisonMode>;
     /** Disable all editing controls. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Prefix for `data-autoid` on inner controls (E2E selectors). */
@@ -144,12 +197,16 @@ declare class SdQueryBuilder {
     readonly rootLogic: _angular_core.ModelSignal<"AND" | "OR">;
     readonly tree: _angular_core.Signal<QbGroup>;
     /** `field.key` → field, for fast lookup from a rule. */
+    readonly resolvedFields: _angular_core.Signal<SdQueryBuilderField[]>;
+    readonly resolvedMode: _angular_core.Signal<"edit" | "view">;
+    readonly resolvedComparisonMode: _angular_core.Signal<QbComparisonMode>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    readonly resolvedAutoId: _angular_core.Signal<string | undefined>;
     readonly fieldByKey: _angular_core.Signal<Record<string, SdQueryBuilderField>>;
     /** Stable option list for the date-mode select. */
-    readonly dateModes: readonly {
-        value: QbDateMode;
-        display: string;
-    }[];
+    readonly dateModes: readonly _sdcorejs_angular_components_query_builder.QbDateModeOption[];
+    /** Stable option list for the literal-vs-field operand select. */
+    readonly valueSourceOptions: readonly _sdcorejs_angular_components_query_builder.QbValueSourceOption[];
     /** Stable combined unit×direction option list for the relative select. */
     readonly relativeUnitOptions: readonly {
         value: string;
@@ -160,6 +217,8 @@ declare class SdQueryBuilder {
     readonly isView: _angular_core.Signal<boolean>;
     /** Expose the type-guard to the template. */
     readonly isGroup: typeof isQbGroup;
+    /** Resolve the leading icon for a field (own `icon` → per-type → `'tune'`) — used by the field picker. */
+    readonly fieldIcon: typeof qbFieldIcon;
     constructor();
     /** Switch a group's AND/OR connector and re-emit. No-op when disabled or unchanged. */
     setGroupLogic(group: QbGroup, logic: 'AND' | 'OR'): void;
@@ -189,12 +248,19 @@ declare class SdQueryBuilder {
     setBetweenFrom(rule: QbRule, raw: any): void;
     /** Set the upper bound of a BETWEEN rule's `{ from, to }` value. */
     setBetweenTo(rule: QbRule, raw: any): void;
+    setValueSource(rule: QbRule, source: QbValueSource): void;
+    setCompareField(rule: QbRule, key: any): void;
     /** The field metadata for a rule's current `field` key (or undefined if unset). */
     fieldOf(rule: QbRule): SdQueryBuilderField | undefined;
     /** Operators allowed for a rule, derived from its field's type / override. */
     allowedOperators(rule: QbRule): Operator[];
     /** Whether to render the operator picker — hidden when only one operator is allowed. */
     showOperatorSelector(rule: QbRule): boolean;
+    compareFields(rule: QbRule): SdQueryBuilderField[];
+    canCompareWithField(rule: QbRule): boolean;
+    showValueSourceSelector(rule: QbRule): boolean;
+    valueSourceOf(rule: QbRule): QbValueSource;
+    isFieldSource(rule: QbRule): boolean;
     /** True for NULL / NOT_NULL — the template then renders no value editor. */
     isNoData(op: Operator | undefined): boolean;
     /** True for IN / NOT_IN — the template then renders a multi-select value editor. */
@@ -216,7 +282,7 @@ declare class SdQueryBuilder {
     /** Build a `data-autoid` for an inner control under this builder's `autoId` prefix. */
     autoIdFor(suffix: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdQueryBuilder, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdQueryBuilder, "sd-query-builder", never, { "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "rootLogic": { "alias": "rootLogic"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "filters": "filtersChange"; "rootLogic": "rootLogicChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdQueryBuilder, "sd-query-builder", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "comparisonMode": { "alias": "comparisonMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "rootLogic": { "alias": "rootLogic"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "filters": "filtersChange"; "rootLogic": "rootLogicChange"; }, never, never, true, never>;
 }
 
 /**
@@ -250,5 +316,5 @@ declare function filterToTree(filter: Filter | null | undefined): QbGroup;
  */
 declare function filterToTokens(filter: Filter | null | undefined, fields: SdQueryBuilderField[]): QbToken[];
 
-export { QB_DATE_MODES, QB_DEFAULT_OPERATOR_BY_TYPE, QB_EMPTY_OPTIONS, QB_MULTI_OPERATORS, QB_NO_DATA_OPERATORS, QB_OPERATORS_BY_TYPE, QB_RELATIVE_UNIT_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, isQbGroup, qbAllowedOperators, qbDefaultOperator, qbDefaultRelative, qbId, qbIsMultiOperator, qbIsNoDataOperator, qbIsRelativeDate, qbNewGroup, qbNewRule, treeToFilter };
-export type { QbDateMode, QbGroup, QbNode, QbRule, QbToken, QbTokenKind, SdQbRelativeDate, SdQbRelativeDirection, SdQbRelativeUnit, SdQueryBuilderField, SdQueryBuilderFieldOption, SdQueryBuilderFieldType };
+export { QB_DATE_MODES, QB_DEFAULT_OPERATOR_BY_TYPE, QB_EMPTY_OPTIONS, QB_MULTI_OPERATORS, QB_NO_DATA_OPERATORS, QB_OPERATORS_BY_TYPE, QB_RELATIVE_UNIT_OPTIONS, QB_TODAY, QB_TYPE_ICON, QB_VALUE_SOURCE_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, isQbGroup, qbAllowedOperators, qbDefaultOperator, qbDefaultRelative, qbFieldIcon, qbId, qbIsMultiOperator, qbIsNoDataOperator, qbIsRelativeDate, qbIsToday, qbNewGroup, qbNewRule, qbSupportsFieldCompareOperator, treeToFilter };
+export type { QbComparisonMode, QbDateMode, QbDateModeOption, QbGroup, QbNode, QbRule, QbToday, QbToken, QbTokenKind, QbValueSource, QbValueSourceOption, SdQbRelativeDirection, SdQbRelativeUnit, SdQueryBuilderField, SdQueryBuilderFieldOption, SdQueryBuilderFieldType, SdQueryBuilderOption };

package/types/sdcorejs-angular-components-section.d.ts

@@ -8,13 +8,16 @@ declare class SdSection {
     icon: _angular_core.InputSignal<string | null | undefined>;
     iconColor: _angular_core.InputSignal<Color>;
     collapsed: _angular_core.ModelSignal<boolean>;
+    collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** @deprecated Use `collapsible` instead. */
     collapsable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly isCollapsible: _angular_core.Signal<boolean>;
     hideHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
     noPaddingBody: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
     toggleCollapse: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSection, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
 }
 
 declare class SdSectionItem {

package/types/sdcorejs-angular-components-splitter.d.ts

@@ -13,6 +13,19 @@ interface SplitterLayoutState {
     v: 1;
     panels: SplitterPanelState[];
 }
+interface SdSplitterOption {
+    orientation?: SplitterOrientation;
+    disabled?: boolean;
+    storageKey?: string;
+    snapThreshold?: number;
+    keyboardStep?: number;
+    onResizeEnd?: (state: SplitterLayoutState) => void;
+    onCollapsedChange?: (event: {
+        panelId: string | number;
+        collapsed: boolean;
+    }) => void;
+    onLayoutChange?: (state: SplitterLayoutState) => void;
+}
 
 declare class SdSplitterPanelComponent {
     readonly elementRef: ElementRef<HTMLElement>;
@@ -30,11 +43,17 @@ declare class SdSplitterPanelComponent {
 
 declare class SdSplitterComponent {
     #private;
+    option: _angular_core.InputSignal<SdSplitterOption | undefined>;
     orientation: _angular_core.InputSignal<SplitterOrientation>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     storageKey: _angular_core.InputSignal<string | undefined>;
     snapThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
     keyboardStep: _angular_core.InputSignalWithTransform<number, unknown>;
+    resolvedOrientation: _angular_core.Signal<SplitterOrientation>;
+    resolvedDisabled: _angular_core.Signal<boolean>;
+    resolvedStorageKey: _angular_core.Signal<string | undefined>;
+    resolvedSnapThreshold: _angular_core.Signal<number>;
+    resolvedKeyboardStep: _angular_core.Signal<number>;
     readonly resizeEnd: _angular_core.OutputEmitterRef<SplitterLayoutState>;
     readonly collapsedChange: _angular_core.OutputEmitterRef<{
         panelId: string | number;
@@ -51,7 +70,7 @@ declare class SdSplitterComponent {
     toggle(target: number | string): void;
     resizePanel(target: number | string, size: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSplitterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSplitterComponent, "sd-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "snapThreshold": { "alias": "snapThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; "collapsedChange": "collapsedChange"; "layoutChange": "layoutChange"; }, ["panels"], ["sd-splitter-panel"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSplitterComponent, "sd-splitter", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "snapThreshold": { "alias": "snapThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; "collapsedChange": "collapsedChange"; "layoutChange": "layoutChange"; }, ["panels"], ["sd-splitter-panel"], true, never>;
 }
 
 export { SdSplitterComponent, SdSplitterPanelComponent };

package/types/sdcorejs-angular-components-table.d.ts

@@ -339,6 +339,8 @@ interface SdTableOptionFilter<T = any> {
     /** Chế độ thủ công: phải nhấn nút áp dụng mới gửi filter */
     manualFilter?: boolean;
     /** Có thể thu gọn bộ lọc hay không */
+    collapsible?: boolean;
+    /** @deprecated Use `collapsible` instead. */
     collapsable?: boolean;
     /** Ẩn toolbar (xóa bộ lọc, thiết lập) của external filter, khi có ít external filter user không cần chức năng này */
     hideExternalFilterToolbar?: boolean;

package/types/sdcorejs-angular-components-tree.d.ts

@@ -0,0 +1,253 @@
+import * as _angular_core from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
+import { SdButton } from '@sdcorejs/angular/components/button';
+import { SdUnwrapSignal, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { Color } from '@sdcorejs/utils/models';
+
+type SdTreeDataSource<TItem = any> = TItem[] | Signal<TItem[]> | (() => TItem[] | Promise<TItem[]>);
+type SdTreeLoadType = 'static' | 'lazy';
+type SdTreeOption<T = any> = SdTreeStaticOption<T> | SdTreeLazyOption<T>;
+type SdTreeItem<T = any> = SdTreeItemStatic<T> | SdTreeItemLazy<T>;
+type SdTreeItemByLoadType<T = any, TLoadType extends SdTreeLoadType = SdTreeLoadType> = TLoadType extends 'lazy' ? SdTreeItemLazy<T> : SdTreeItemStatic<T>;
+interface SdTreeItemBase<T = any> {
+    /** Stable node id used for expansion, selection, filtering ancestry, and auto-id generation. */
+    id: string;
+    /** Text shown by the default tree row. Custom templates can still read `item` / `treeItem`. */
+    label: string;
+    /**
+     * Optional node icon override.
+     * - Branch without `icon`: tree renders the default folder icon (`folder` / `folder_open`).
+     * - Leaf without `icon`: tree renders no icon.
+     * This replaces the old `leafIcon` split. One field is enough because each node decides its own icon.
+     */
+    icon?: string | null;
+    /** Consumer payload. Commands, selection callbacks, and `$implicit` template context receive this value. */
+    data: T;
+    /** Initial expansion state for this node. Component state wins after the user toggles. */
+    expanded?: boolean;
+}
+interface SdTreeItemStatic<T = any> extends SdTreeItemBase<T> {
+    /** Static-mode children. Lazy mode does not use this field. */
+    children?: SdTreeItemStatic<T>[];
+    /** `hasChildren` belongs to lazy mode only; static mode derives branches from `children`. */
+    hasChildren?: never;
+}
+interface SdTreeItemLazy<T = any> extends SdTreeItemBase<T> {
+    /** Lazy-mode hint. Set `false` for known leaf nodes that do not need `onExpandChildren`. */
+    hasChildren?: boolean;
+    /** `children` belongs to static mode only; lazy loaded children are cached inside the component. */
+    children?: never;
+}
+interface SdTreeBaseOption {
+    maxDepth?: number;
+    indentSize?: number;
+}
+interface SdTreeStaticOption<T = any> extends SdTreeBaseOption {
+    loadType: 'static';
+    /** Expand all (`true`), none (`false`), or root levels where `level < number`. */
+    defaultExpanded?: boolean | number;
+}
+interface SdTreeLazyOption<T = any> extends SdTreeBaseOption {
+    loadType: 'lazy';
+    /**
+     * Called once when a lazy node is first expanded. Return wrapped `SdTreeItemLazy<T>` children,
+     * not raw data, so each child has a stable id/label/icon contract.
+     */
+    onExpandChildren: (item: SdTreeItemLazy<T>) => Promise<SdTreeItemLazy<T>[]> | SdTreeItemLazy<T>[];
+}
+interface SdTreeCommand<T = any> {
+    key: string;
+    title: string | ((item: T) => string);
+    icon?: string | ((item: T) => string | undefined | null);
+    color?: Color;
+    fontSet?: MaterialIconFontSet;
+    disabled?: boolean | ((item: T) => boolean);
+    hidden?: boolean | ((item: T) => boolean);
+    click: (item: T) => void;
+}
+interface SdTreeSelectorOption<T = any> {
+    visible?: boolean;
+    actions?: SdTreeSelectionAction<T>[];
+    message?: string | ((selectedItems: T[]) => string);
+    disabled?: (item: T, selectedItems: T[]) => boolean;
+}
+interface SdTreeSelectionAction<T = any> {
+    icon?: string;
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    title?: SdUnwrapSignal<SdButton['title']>;
+    color?: SdUnwrapSignal<SdButton['color']>;
+    type?: SdUnwrapSignal<SdButton['type']>;
+    hidden?: boolean | ((selectedItems: T[]) => boolean);
+    click: (selectedItems: T[]) => void;
+}
+interface SdTreeComponentOptionBase<T = any, TItem extends SdTreeItem<T> = SdTreeItem<T>> {
+    autoId?: string | null;
+    /** Root nodes can be an array, a signal, a sync loader, or an async loader. Call `reload()` to rerun loader sources. */
+    items: SdTreeDataSource<TItem>;
+    selectedItems?: T[] | null;
+    selector?: SdTreeSelectorOption<T> | null;
+    commands?: SdTreeCommand<T>[] | null;
+    itemTemplate?: SdTreeItemTemplate<T> | null;
+    selectable?: boolean;
+    onSelectedItemsChange?: (items: T[]) => void;
+    onSelect?: (event: SdTreeSelectionEvent<T>) => void;
+    onExpand?: (event: SdTreeToggleEvent<T>) => void;
+    onCollapse?: (event: SdTreeToggleEvent<T>) => void;
+}
+interface SdTreeStaticComponentOption<T = any> extends SdTreeComponentOptionBase<T, SdTreeItemStatic<T>> {
+    /** Static tree is the default when `tree` is omitted. */
+    tree?: SdTreeStaticOption<T>;
+}
+interface SdTreeLazyComponentOption<T = any> extends SdTreeComponentOptionBase<T, SdTreeItemLazy<T>> {
+    tree: SdTreeLazyOption<T>;
+}
+type SdTreeComponentOption<T = any> = SdTreeStaticComponentOption<T> | SdTreeLazyComponentOption<T>;
+interface SdTreeNode<T = any> {
+    /** Wrapped tree item containing id/label/icon/data plus mode-specific tree metadata. */
+    treeItem: SdTreeItem<T>;
+    /** Raw consumer payload. Kept as a shortcut because most callbacks operate on data, not wrapper metadata. */
+    data: T;
+    id: string;
+    label: string;
+    level: number;
+    parent: SdTreeNode<T> | null;
+    children: SdTreeNode<T>[];
+    hasChildren: boolean;
+    isExpanded: boolean;
+    isLoading: boolean;
+}
+interface SdTreeItemContext<T = any> {
+    $implicit: T;
+    item: T;
+    treeItem: SdTreeItem<T>;
+    node: SdTreeNode<T>;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+    loading: boolean;
+    hasChildren: boolean;
+    isLeaf: boolean;
+    toggle: () => void;
+    select: () => void;
+}
+type SdTreeItemTemplate<T = any> = TemplateRef<SdTreeItemContext<T>>;
+interface SdTreeSelectionEvent<T = any> {
+    item: T;
+    selected: boolean;
+    selectedItems: T[];
+}
+interface SdTreeToggleEvent<T = any> {
+    item: T;
+    expanded: boolean;
+    node: SdTreeNode<T>;
+}
+
+declare class SdTreeItemDefDirective<T = any> {
+    static ngTemplateContextGuard<T>(_dir: SdTreeItemDefDirective<T>, ctx: unknown): ctx is SdTreeItemContext<T>;
+    readonly templateRef: TemplateRef<SdTreeItemContext<T>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdTreeItemDefDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdTreeItemDefDirective<any>, "[sdTreeItemDef]", never, {}, {}, never, never, true, never>;
+}
+
+type SdTreeAutoIdPart = 'row' | 'toggle' | 'checkbox' | 'icon' | 'label' | 'command';
+interface SdTreeNodeAutoIds {
+    row?: string;
+    toggle?: string;
+    checkbox?: string;
+    icon?: string;
+    label?: string;
+    command?: string;
+}
+interface SdTreeViewCommand<T = any> {
+    key: string;
+    command: SdTreeCommand<T>;
+    title: string;
+    icon: string;
+    color: SdTreeCommand<T>['color'];
+    fontSet: SdTreeCommand<T>['fontSet'];
+    disabled: boolean;
+    autoId?: string;
+    defaultColor: boolean;
+}
+interface SdTreeViewNode<T = any> extends SdTreeNode<T> {
+    icon?: string;
+    selected: boolean;
+    selectionDisabled: boolean;
+    toggleDisabled: boolean;
+    toggleLabel: string;
+    ariaExpanded: boolean | null;
+    autoIds: SdTreeNodeAutoIds;
+    commands: SdTreeViewCommand<T>[];
+    context: SdTreeItemContext<T>;
+}
+interface SdTreeSelectionActionView<T = any> {
+    action: SdTreeSelectionAction<T>;
+    autoId: string | null;
+}
+declare class SdTree<T = any> {
+    #private;
+    readonly autoIdInput: _angular_core.InputSignal<string | null | undefined>;
+    readonly option: _angular_core.InputSignal<SdTreeComponentOption<T> | undefined>;
+    /** Migration bridge. New usage should put the data source in `option.items`. */
+    readonly items: _angular_core.InputSignal<SdTreeDataSource<SdTreeItem<T>> | undefined>;
+    /** Migration bridge. New usage should put static/lazy config in `option.tree`. */
+    readonly tree: _angular_core.InputSignal<SdTreeOption<T> | undefined>;
+    readonly selectedItemsInput: _angular_core.InputSignal<T[] | null | undefined>;
+    readonly commands: _angular_core.InputSignal<SdTreeCommand<T>[] | null | undefined>;
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selector: _angular_core.InputSignal<SdTreeSelectorOption<T> | null | undefined>;
+    readonly itemTemplate: _angular_core.InputSignal<TemplateRef<SdTreeItemContext<T>> | null | undefined>;
+    readonly selectedItemsChange: _angular_core.OutputEmitterRef<T[]>;
+    readonly selectChange: _angular_core.OutputEmitterRef<SdTreeSelectionEvent<T>>;
+    readonly expandChange: _angular_core.OutputEmitterRef<SdTreeToggleEvent<T>>;
+    readonly collapseChange: _angular_core.OutputEmitterRef<SdTreeToggleEvent<T>>;
+    readonly itemDef: _angular_core.Signal<SdTreeItemDefDirective<any> | undefined>;
+    readonly resolvedItemsSource: _angular_core.Signal<SdTreeDataSource<SdTreeItem<T>>>;
+    readonly resolvedTree: _angular_core.Signal<SdTreeOption<T>>;
+    readonly resolvedSelector: _angular_core.Signal<SdTreeSelectorOption<T> | null | undefined>;
+    readonly resolvedCommands: _angular_core.Signal<SdTreeCommand<T>[]>;
+    readonly resolvedSelectable: _angular_core.Signal<boolean>;
+    readonly autoId: _angular_core.Signal<string | undefined>;
+    readonly resolvedItemTemplate: _angular_core.Signal<TemplateRef<SdTreeItemContext<T>> | undefined>;
+    readonly indentSize: _angular_core.Signal<number>;
+    readonly normalizedFilterText: _angular_core.Signal<string>;
+    readonly selectionVisible: _angular_core.Signal<boolean>;
+    readonly selectedIdSet: _angular_core.Signal<Set<string>>;
+    readonly rootNodes: _angular_core.Signal<SdTreeNode<T>[]>;
+    readonly visibleNodes: _angular_core.Signal<SdTreeNode<T>[]>;
+    readonly selectedItems: _angular_core.Signal<T[]>;
+    readonly selectedCount: _angular_core.Signal<number>;
+    readonly selectionMessage: _angular_core.Signal<string>;
+    readonly visibleSelectionActions: _angular_core.Signal<SdTreeSelectionAction<T>[]>;
+    readonly selectionActionViews: _angular_core.Signal<SdTreeSelectionActionView<T>[]>;
+    readonly clearSelectionAutoId: _angular_core.Signal<string | null>;
+    /**
+     * Template-facing row model. Expensive/variable values are resolved once per
+     * signal recomputation so the HTML does not call helper methods for every CD pass.
+     */
+    readonly visibleViewNodes: _angular_core.Signal<SdTreeViewNode<T>[]>;
+    readonly trackByNode: (_index: number, node: SdTreeNode<T>) => string;
+    constructor();
+    reload(): void;
+    filter(searchText: string | undefined | null): void;
+    isSelected(node: SdTreeNode<T>): boolean;
+    nodeIcon(node: SdTreeNode<T>): string | undefined;
+    visibleCommands(node: SdTreeNode<T>): SdTreeCommand<T>[];
+    isSelectionDisabled(node: SdTreeNode<T>): boolean;
+    commandTitle(command: SdTreeCommand<T>, item: T): string;
+    commandIcon(command: SdTreeCommand<T>, item: T): string;
+    isCommandDisabled(command: SdTreeCommand<T>, item: T): boolean;
+    toggle(node: SdTreeNode<T>, event?: Event): Promise<void>;
+    toggleSelection(node: SdTreeNode<T>, event?: Event): void;
+    clearSelection(): void;
+    onSelectionAction(action: SdTreeSelectionAction<T>): void;
+    createContext(node: SdTreeNode<T>): SdTreeItemContext<T>;
+    nodeAutoId(node: SdTreeNode<T>, part: SdTreeAutoIdPart): string | undefined;
+    commandAutoId(node: SdTreeNode<T>, command: SdTreeCommand<T>): string | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdTree<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdTree<any>, "sd-tree", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "selectedItemsInput": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "commands": { "alias": "commands"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selector": { "alias": "selector"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; }, { "selectedItemsChange": "selectedItemsChange"; "selectChange": "selectChange"; "expandChange": "expandChange"; "collapseChange": "collapseChange"; }, ["itemDef"], never, true, never>;
+}
+
+export { SdTree, SdTreeItemDefDirective };
+export type { SdTreeAutoIdPart, SdTreeBaseOption, SdTreeCommand, SdTreeComponentOption, SdTreeComponentOptionBase, SdTreeDataSource, SdTreeItem, SdTreeItemBase, SdTreeItemByLoadType, SdTreeItemContext, SdTreeItemLazy, SdTreeItemStatic, SdTreeItemTemplate, SdTreeLazyComponentOption, SdTreeLazyOption, SdTreeLoadType, SdTreeNode, SdTreeNodeAutoIds, SdTreeOption, SdTreeSelectionAction, SdTreeSelectionActionView, SdTreeSelectionEvent, SdTreeSelectorOption, SdTreeStaticComponentOption, SdTreeStaticOption, SdTreeToggleEvent, SdTreeViewCommand, SdTreeViewNode };

package/types/sdcorejs-angular-components.d.ts

@@ -12,6 +12,8 @@ export * from '@sdcorejs/angular/components/upload-file';
 export * from '@sdcorejs/angular/components/section';
 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';

package/types/sdcorejs-angular-forms-select.d.ts

@@ -15,6 +15,14 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
     selectRef: Signal<MatSelect | undefined>;
     sdLabelTemplate: Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: Signal<TemplateRef<any> | undefined>;
+    /**
+     * Custom render for the SELECTED value shown in the editable trigger (`<mat-select-trigger>`).
+     * Distinct from `#sdValue`/`sdViewDef` which only drive the read-only `viewed`/`inline` face.
+     * Context: `{ $implicit, item, items: selectedItems(), display, multiple }` — `item`/`$implicit`
+     * is the single selected item object (single mode) or the selected-item array (multiple mode).
+     * Falls back to the plain `display` text when not projected, so existing usages are unaffected.
+     */
+    sdSelectedTemplate: Signal<TemplateRef<any> | undefined>;
     itemDef: Signal<SdItemDefDefDirective<any> | undefined>;
     sdViewDef: Signal<SdViewDefDirective<any, any> | undefined>;
     /**
@@ -107,7 +115,7 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
     open: () => void;
     onOpenedChange: (isOpened: boolean) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; }, ["sdLabelTemplate", "sdValueTemplate", "sdSelectedTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
 }
 
 export { SdSelect };