@sdcorejs/angular 20.0.4 → 20.0.5

package/assets/{scss/README.md → STYLE-GUIDE.md}

@@ -46,6 +46,7 @@
 
 ```
 projects/sdcorejs-angular/assets/
+├── STYLE-GUIDE.md                     # Tài liệu này (assets + SCSS reference cho người + AI agent)
 ├── fonts/
 │   ├── fonts.scss                     # @font-face khai báo cho Roboto + Material Icons + Material Symbols
 │   ├── material-icons/                # 2 file .woff2 (icons-v145 + outlined-v110)
@@ -321,6 +322,8 @@ p-{n}   pt-{n}   pr-{n}   pb-{n}   pl-{n}   px-{n}   py-{n}
 
 Ví dụ: `m-0`, `mt-8`, `px-16`, `py-24`, `mb-4`.
 
+**Spacing scale rule:** với spacing dùng cho layout element, chỉ dùng giá trị là **bội số của 4px**: `m-4`, `m-8`, `m-12`, `m-16`, `p-4`, `p-8`, `px-16`, `py-24`, `gap-8`, `gap-16`... Tránh sinh các class lẻ như `m-3`, `p-5`, `gap-7` trừ khi đang xử lý pixel-perfect exception đã được review rõ ràng.
+
 **Auto margin:** `m-auto`, `mt-auto`, `mr-auto`, `mb-auto`, `ml-auto`, `mx-auto`, `my-auto`.
 
 ### 7.2 Gap (px-based, 0–200)

package/components/index.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/components/org-chart/index.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+interface SdOrgChartItem {
+    id: string | number;
+    image?: string | null;
+    title: string;
+    description?: string | null;
+    color?: string | null;
+    expanded?: boolean;
+    children?: SdOrgChartItem[];
+}
+interface SdOrgChartItemContext<T extends SdOrgChartItem = SdOrgChartItem> {
+    $implicit: T;
+    item: T;
+    depth: number;
+    parent: T | null;
+    expanded: boolean;
+    hasChildren: boolean;
+    isLeaf: boolean;
+    toggle: () => void;
+}
+type SdOrgChartItemTemplate<T extends SdOrgChartItem = SdOrgChartItem> = TemplateRef<SdOrgChartItemContext<T>>;
+interface SdOrgChartToggleEvent<T extends SdOrgChartItem = SdOrgChartItem> {
+    item: T;
+    expanded: boolean;
+}
+interface SdOrgChartOption<T extends SdOrgChartItem = SdOrgChartItem> {
+    autoId?: string | null;
+    items: T[];
+    itemTemplate?: TemplateRef<SdOrgChartItemContext<T>> | null;
+    collapsible?: boolean;
+    onToggle?: (event: SdOrgChartToggleEvent<T>) => void;
+}
+
+declare class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {
+    static ngTemplateContextGuard<T extends SdOrgChartItem>(_dir: SdOrgChartItemDefDirective<T>, _ctx: unknown): _ctx is SdOrgChartItemContext<T>;
+    readonly templateRef: TemplateRef<SdOrgChartItemContext<T>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdOrgChartItemDefDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdOrgChartItemDefDirective<any>, "[sdOrgChartItemDef]", never, {}, {}, never, never, true, never>;
+}
+
+declare class SdOrgChart {
+    #private;
+    readonly autoIdInput: _angular_core.InputSignal<string | null | undefined>;
+    readonly option: _angular_core.InputSignal<SdOrgChartOption<SdOrgChartItem> | undefined>;
+    readonly autoId: _angular_core.Signal<string | undefined>;
+    readonly items: _angular_core.InputSignal<SdOrgChartItem[] | undefined>;
+    readonly itemTemplate: _angular_core.InputSignal<TemplateRef<SdOrgChartItemContext<SdOrgChartItem>> | null | undefined>;
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly itemDef: _angular_core.Signal<SdOrgChartItemDefDirective<any> | undefined>;
+    readonly resolvedItems: _angular_core.Signal<SdOrgChartItem[]>;
+    readonly resolvedCollapsible: _angular_core.Signal<boolean>;
+    readonly resolvedItemTemplate: _angular_core.Signal<TemplateRef<SdOrgChartItemContext<SdOrgChartItem>> | undefined>;
+    readonly trackByItem: (_index: number, item: SdOrgChartItem) => string | number;
+    hasChildren: (item: SdOrgChartItem) => boolean;
+    childrenOf: (item: SdOrgChartItem) => SdOrgChartItem[];
+    isExpanded: (item: SdOrgChartItem) => boolean;
+    toggle: (item: SdOrgChartItem, event?: Event) => void;
+    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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdOrgChart, "sd-org-chart", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; }, {}, ["itemDef"], never, true, never>;
+}
+
+export { SdOrgChart, SdOrgChartItemDefDirective };
+export type { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartItemTemplate, SdOrgChartOption, SdOrgChartToggleEvent };

package/components/query-bar/index.d.ts

@@ -88,6 +88,28 @@ interface SdQuery<T = any> {
     /** Free-text search box (only present when `showSearch=true`). */
     search?: string;
 }
+interface SdQueryBarOption<T = any> {
+    /** Prefix for auto-generated `data-autoid` on inner controls. */
+    autoId?: string;
+    /** Available fields the user can filter by. */
+    fields: SdQueryField<T>[];
+    /** Initial active filter chips. */
+    filters?: Filter<T>[];
+    /** Initial global connector between filters. */
+    logic?: SdQueryLogic;
+    /** Initial free-text search string. */
+    search?: string;
+    mode?: 'popover' | 'inline';
+    density?: 'compact' | 'comfortable';
+    showSearch?: boolean;
+    showSavedFilters?: boolean;
+    savedFiltersKey?: string;
+    showLogicToggle?: boolean;
+    showClearAll?: boolean;
+    showOperatorOnChip?: boolean;
+    onQueryChange?: (query: SdQuery<T>) => void;
+    onApply?: (query: SdQuery<T>) => void;
+}
 /** Persisted bookmark of a query (filters + logic + search) — managed by `[savedFiltersKey]`. */
 interface SdSavedFilter<T = any> {
     id: string;
@@ -248,6 +270,8 @@ declare class SdQueryBar {
     private readonly buildChip;
     /** The extracted chip popover — owns operator+value staging + commit-on-close. */
     readonly chipPopover: _angular_core.Signal<SdQueryChipPopover | undefined>;
+    /** Main option object. Prefer this API for new usage; individual inputs stay as a migration bridge. */
+    readonly option: _angular_core.InputSignal<SdQueryBarOption<any> | undefined>;
     /** Prefix for auto-generated `data-autoid` on inner controls (chips, operator/value editors, buttons). */
     readonly autoIdInput: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     /** Available fields the user can filter by. Required for the field picker. */
@@ -302,6 +326,17 @@ declare class SdQueryBar {
     /** Fires when the user presses "Áp dụng" inside a chip popover — host should reload data. */
     readonly apply: _angular_core.OutputEmitterRef<SdQuery<any>>;
     /** Map of `field.key` → `SdQueryField` for fast lookup from filters[]. */
+    readonly resolvedAutoId: _angular_core.Signal<string | undefined>;
+    readonly resolvedFields: _angular_core.Signal<SdQueryField[]>;
+    readonly resolvedMode: _angular_core.Signal<"popover" | "inline">;
+    readonly resolvedDensity: _angular_core.Signal<Density>;
+    readonly resolvedShowSearch: _angular_core.Signal<boolean>;
+    readonly resolvedShowSavedFilters: _angular_core.Signal<boolean>;
+    readonly resolvedSavedFiltersKey: _angular_core.Signal<string | undefined>;
+    readonly resolvedShowLogicToggle: _angular_core.Signal<boolean>;
+    readonly resolvedShowClearAll: _angular_core.Signal<boolean>;
+    readonly resolvedShowOperatorOnChip: _angular_core.Signal<boolean>;
+    constructor();
     readonly fieldByKey: _angular_core.Signal<Record<string, SdQueryField>>;
     /** Field keys already chained on a chip — the picker greys these out. */
     readonly usedFieldKeys: _angular_core.Signal<Set<string>>;
@@ -368,8 +403,8 @@ declare class SdQueryBar {
     /** Receive `(commit)` from the child popover — splice into filters, null the index. */
     onChipPopoverCommit(next: Filter): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdQueryBar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdQueryBar, "sd-query-bar", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "logic": { "alias": "logic"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "showSavedFilters": { "alias": "showSavedFilters"; "required": false; "isSignal": true; }; "savedFiltersKey": { "alias": "savedFiltersKey"; "required": false; "isSignal": true; }; "showLogicToggle": { "alias": "showLogicToggle"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "showOperatorOnChip": { "alias": "showOperatorOnChip"; "required": false; "isSignal": true; }; }, { "filters": "filtersChange"; "logic": "logicChange"; "search": "searchChange"; "queryChange": "queryChange"; "apply": "apply"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdQueryBar, "sd-query-bar", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "logic": { "alias": "logic"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "showSavedFilters": { "alias": "showSavedFilters"; "required": false; "isSignal": true; }; "savedFiltersKey": { "alias": "savedFiltersKey"; "required": false; "isSignal": true; }; "showLogicToggle": { "alias": "showLogicToggle"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "showOperatorOnChip": { "alias": "showOperatorOnChip"; "required": false; "isSignal": true; }; }, { "filters": "filtersChange"; "logic": "logicChange"; "search": "searchChange"; "queryChange": "queryChange"; "apply": "apply"; }, never, never, true, never>;
 }
 
 export { SD_QUERY_DEFAULT_OPERATOR_BY_TYPE, SD_QUERY_MULTI_OPERATORS, SD_QUERY_NO_DATA_OPERATORS, SD_QUERY_OPERATORS_BY_TYPE, SD_QUERY_TYPE_ICON, SdQueryBar, sdQueryAllowedOperators, sdQueryDefaultOperator, sdQueryFieldIcon, sdQueryShowOperatorSelector };
-export type { BuildingChip, SdQuery, SdQueryField, SdQueryFieldBoolean, SdQueryFieldDate, SdQueryFieldLazyValues, SdQueryFieldNumber, SdQueryFieldString, SdQueryFieldType, SdQueryFieldValues, SdQueryLogic, SdSavedFilter };
+export type { BuildingChip, SdQuery, SdQueryBarOption, SdQueryField, SdQueryFieldBoolean, SdQueryFieldDate, SdQueryFieldLazyValues, SdQueryFieldNumber, SdQueryFieldString, SdQueryFieldType, SdQueryFieldValues, SdQueryLogic, SdSavedFilter };

package/components/query-builder/index.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/components/section/index.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/components/splitter/index.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/components/table/index.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;