@sdcorejs/angular 20.1.6 → 20.2.0

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

@@ -5,7 +5,7 @@ import { MatMenu } from '@angular/material/menu';
 import { SdSearch } from '@sdcorejs/angular/forms/models';
 
 type SdQueryFieldType = 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'values' | 'lazy-values';
-interface SdQueryFieldBase<T = any> {
+interface SdQueryFieldBase<T = unknown> {
     /** Dot-notation field path (matches `Filter.field`). */
     key: NestedKeyOf<T>;
     /** Human-readable label shown on chip + field picker. */
@@ -30,10 +30,10 @@ interface SdQueryFieldBase<T = any> {
     /** Field is offered in picker but not interactive (read-only badge in chip). */
     disabled?: boolean;
 }
-interface SdQueryFieldString<T = any> extends SdQueryFieldBase<T> {
+interface SdQueryFieldString<T = unknown> extends SdQueryFieldBase<T> {
     type: 'string';
 }
-interface SdQueryFieldNumber<T = any> extends SdQueryFieldBase<T> {
+interface SdQueryFieldNumber<T = unknown> extends SdQueryFieldBase<T> {
     type: 'number';
     /** Bounds for the input control inside the chip popover. */
     min?: number;
@@ -41,13 +41,13 @@ interface SdQueryFieldNumber<T = any> extends SdQueryFieldBase<T> {
     /** Step for the number input. */
     step?: number;
 }
-interface SdQueryFieldBoolean<T = any> extends SdQueryFieldBase<T> {
+interface SdQueryFieldBoolean<T = unknown> extends SdQueryFieldBase<T> {
     type: 'boolean';
     /** Labels rendered for the true/false buttons. Default: "Có" / "Không". */
     trueLabel?: string;
     falseLabel?: string;
 }
-interface SdQueryFieldDate<T = any> extends SdQueryFieldBase<T> {
+interface SdQueryFieldDate<T = unknown> extends SdQueryFieldBase<T> {
     type: 'date' | 'datetime';
     /** Restrict the picker calendar to this range. */
     min?: Date | string;
@@ -57,7 +57,7 @@ interface SdQueryFieldDate<T = any> extends SdQueryFieldBase<T> {
  * Statically-known options (sync array, signal, or one-shot promise).
  * Mirrors `SdTableColumnValues.option`.
  */
-interface SdQueryFieldValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+interface SdQueryFieldValues<T = unknown, K = Record<string, any>> extends SdQueryFieldBase<T> {
     type: 'values';
     option: {
         items: K[] | Signal<K[]> | (() => Promise<K[]>);
@@ -71,7 +71,7 @@ interface SdQueryFieldValues<T = any, K = Record<string, any>> extends SdQueryFi
  * `{ type: 'SEARCH', searchText }` for live queries and `{ type: 'VALUE', value }` for
  * resolving chip-display labels of already-selected IDs.
  */
-interface SdQueryFieldLazyValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+interface SdQueryFieldLazyValues<T = unknown, K = Record<string, any>> extends SdQueryFieldBase<T> {
     type: 'lazy-values';
     option: {
         search: SdSearch<K>;
@@ -79,16 +79,16 @@ interface SdQueryFieldLazyValues<T = any, K = Record<string, any>> extends SdQue
         displayField: NestedKeyOf<K>;
     };
 }
-type SdQueryField<T = any> = SdQueryFieldString<T> | SdQueryFieldNumber<T> | SdQueryFieldBoolean<T> | SdQueryFieldDate<T> | SdQueryFieldValues<T> | SdQueryFieldLazyValues<T>;
+type SdQueryField<T = unknown> = SdQueryFieldString<T> | SdQueryFieldNumber<T> | SdQueryFieldBoolean<T> | SdQueryFieldDate<T> | SdQueryFieldValues<T> | SdQueryFieldLazyValues<T>;
 type SdQueryLogic = 'AND' | 'OR';
-interface SdQuery<T = any> {
+interface SdQuery<T = unknown> {
     filters: Filter<T>[];
     /** Global connector between filters. Defaults to `'AND'`. */
     logic?: SdQueryLogic;
     /** Free-text search box (only present when `showSearch=true`). */
     search?: string;
 }
-interface SdQueryBarOption<T = any> {
+interface SdQueryBarOption<T = unknown> {
     /** Prefix for auto-generated `data-autoid` on inner controls. */
     autoId?: string;
     /** Available fields the user can filter by. */
@@ -111,7 +111,7 @@ interface SdQueryBarOption<T = any> {
     onApply?: (query: SdQuery<T>) => void;
 }
 /** Persisted bookmark of a query (filters + logic + search) — managed by `[savedFiltersKey]`. */
-interface SdSavedFilter<T = any> {
+interface SdSavedFilter<T = unknown> {
     id: string;
     name: string;
     query: SdQuery<T>;
@@ -123,7 +123,7 @@ interface SdSavedFilter<T = any> {
  *   - 'operator' — operator menu open, waiting for the user to pick a condition
  *   - 'value'    — operator locked, value picker / seamless input is the focus
  */
-interface BuildingChip<T = any> {
+interface BuildingChip<T = unknown> {
     field: SdQueryField<T>;
     operator?: Operator;
     step: 'operator' | 'value';
@@ -151,6 +151,9 @@ declare function sdQueryDefaultOperator(field: SdQueryField): Operator;
  * - `operators === true` → full set for the type
  * - `operators` is an array → that array (deduped against the type set is the caller's job)
  * - otherwise (simple mode) → just the single default operator (no real choice)
+ *
+ * The returned array is referentially stable for a given `field` object, so it is safe to call
+ * straight from a template binding.
  */
 declare function sdQueryAllowedOperators(field: SdQueryField): Operator[];
 /**
@@ -175,6 +178,14 @@ declare function sdQueryShowOperatorSelector(field: SdQueryField): boolean;
  */
 declare class SdQueryChipPopover {
     #private;
+    readonly swapFieldTooltip: _angular_core.Signal<string>;
+    readonly fromPlaceholder: _angular_core.Signal<string>;
+    readonly toPlaceholder: _angular_core.Signal<string>;
+    readonly booleanTrueLabel: _angular_core.Signal<string>;
+    readonly booleanFalseLabel: _angular_core.Signal<string>;
+    readonly selectValuePlaceholder: _angular_core.Signal<string>;
+    readonly enterValuePlaceholder: _angular_core.Signal<string>;
+    readonly loadingValuesLabel: _angular_core.Signal<string>;
     /** Resolved field of the currently editing chip — parent passes from `fieldByKey()`. */
     readonly field: _angular_core.InputSignal<SdQueryField | undefined>;
     /** The chip's current Filter — used by `seed()` for initial staging values. */
@@ -271,7 +282,7 @@ declare class SdQueryBar {
     /** 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>;
+    readonly option: _angular_core.InputSignal<SdQueryBarOption<unknown> | 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. */
@@ -312,7 +323,7 @@ declare class SdQueryBar {
      * Snapshot of the current query — fed into `<sd-query-saved-filters-menu [query]>` so
      * saving a filter captures live filters/logic/search.
      */
-    readonly currentQuery: _angular_core.Signal<SdQuery<any>>;
+    readonly currentQuery: _angular_core.Signal<SdQuery<unknown>>;
     /** Receive an applied filter from the saved-filters menu — re-install bar state + trigger apply. */
     onApplyFilter(saved: SdSavedFilter): void;
     /** Show AND/OR segmented toggle (renders only when there are ≥2 filters). */
@@ -322,9 +333,15 @@ declare class SdQueryBar {
     /** Render the operator label on the chip face (default: hidden — operator only visible in popover). */
     readonly showOperatorOnChip: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Composite payload — emitted whenever filters / logic / search change. */
-    readonly queryChange: _angular_core.OutputEmitterRef<SdQuery<any>>;
+    readonly queryChange: _angular_core.OutputEmitterRef<SdQuery<unknown>>;
     /** Fires when the user presses "Áp dụng" inside a chip popover — host should reload data. */
-    readonly apply: _angular_core.OutputEmitterRef<SdQuery<any>>;
+    readonly apply: _angular_core.OutputEmitterRef<SdQuery<unknown>>;
+    /** Placeholder của ô tìm kiếm tự do bên trái. */
+    readonly searchPlaceholder: _angular_core.Signal<string>;
+    /** Tooltip nút "+" khi consumer chưa khai `fields`. */
+    readonly noFieldsLabel: _angular_core.Signal<string>;
+    /** Tooltip nút "+" ở trạng thái bình thường. */
+    readonly addFilterLabel: _angular_core.Signal<string>;
     /** Map of `field.key` → `SdQueryField` for fast lookup from filters[]. */
     readonly resolvedAutoId: _angular_core.Signal<string | undefined>;
     readonly resolvedFields: _angular_core.Signal<SdQueryField[]>;
@@ -354,13 +371,34 @@ declare class SdQueryBar {
      * popover-mode chips read `multiple()` from the child popover directly.
      */
     multiple(op: Operator): boolean;
+    /**
+     * Stable track key of a filter row. Assigned lazily on first read.
+     *
+     * ⚠️ Hai ràng buộc với `filters`, đều là hợp đồng của consumer:
+     *
+     * 1. KHÔNG được chứa cùng một object `Filter` ở hai vị trí. Khoá theo identity nên hai vị trí sẽ
+     *    cho hai track key trùng nhau và Angular ném NG0955. Đã thử khử trùng bằng hậu tố `$index`
+     *    và HỎNG: Angular đánh giá biểu thức `track` trên CẢ collection cũ khi diff, nên một filter
+     *    vừa bị xoá cho `indexOf === -1`, key đổi, và MỌI chip bị huỷ rồi dựng lại. Để Angular báo
+     *    NG0955 là đúng — thông điệp của nó đã chỉ rõ vấn đề.
+     * 2. Object phải ỔN ĐỊNH giữa các lần change detection. Sinh lại object mới mỗi pass
+     *    (vd `[option]="{ filters: buildFilters() }"`) sẽ khiến mọi chip nhận id mới mỗi pass và bị
+     *    huỷ + dựng lại — tệ hơn cả `track $index` cũ.
+     */
+    rowId(filter: Filter): string;
     readonly iconFor: typeof sdQueryFieldIcon;
     /** Chip is "active" when it has a non-empty value OR a no-data operator (NULL/NOT_NULL). */
     isFilterActive(filter: Filter): boolean;
     /** Rendered value text on a chip. */
     chipValueText(filter: Filter): string;
     isNoDataOperator(op: Operator | string): boolean;
-    readonly building: _angular_core.Signal<BuildingChip<any> | null>;
+    readonly building: _angular_core.Signal<BuildingChip<unknown> | null>;
+    /**
+     * Allowed operators of `field` — safe to call from a template binding: `sdQueryAllowedOperators`
+     * memo hoá theo object field nên ref trả về ổn định giữa các chu kỳ CD.
+     * why: `<sd-query-build-chip [allowedOperators]>` là OnPush; ref mới mỗi CD sẽ dirty child liên
+     * tục (bug class cấp-phát-mỗi-CD).
+     */
     allowedOperatorsFor(field: SdQueryField): Operator[];
     inlineAutoId(index: number, role: string): string;
     /** Entry point from the field picker — start building a chip for `field`. */

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

@@ -1,4 +1,3 @@
-import * as _sdcorejs_angular_components_query_builder from '@sdcorejs/angular/components/query-builder';
 import * as _angular_core from '@angular/core';
 import { Operator, DateRelative, Filter } from '@sdcorejs/utils/models';
 
@@ -22,17 +21,17 @@ 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'`. */
+    /** Material icon shown before the label in the field picker; falls back to `SD_QB_TYPE_ICON[type]` then `'tune'`. */
     icon?: string;
-    /** Override the allowed operator set (otherwise `QB_OPERATORS_BY_TYPE[type]`). */
+    /** Override the allowed operator set (otherwise `SD_QB_OPERATORS_BY_TYPE[type]`). */
     operators?: Operator[];
-    /** Override the starting operator (otherwise `QB_DEFAULT_OPERATOR_BY_TYPE[type]`). */
+    /** Override the starting operator (otherwise `SD_QB_DEFAULT_OPERATOR_BY_TYPE[type]`). */
     defaultOperator?: Operator;
     /** Options for `type: 'values'` — the select list + display-label lookup. */
     values?: SdQueryBuilderFieldOption[];
-    /** Label for the `true` branch of a boolean field (default `'Có'`). */
+    /** Label for the `true` branch of a boolean field (defaults to i18n `core.component.query-builder.boolean.true`). */
     trueLabel?: string;
-    /** Label for the `false` branch of a boolean field (default `'Không'`). */
+    /** Label for the `false` branch of a boolean field (defaults to i18n `core.component.query-builder.boolean.false`). */
     falseLabel?: string;
     /** Lower bound for number / date value editors. */
     min?: number | string;
@@ -47,7 +46,7 @@ interface SdQueryBuilderOption {
     autoId?: string;
     fields: SdQueryBuilderField[];
     mode?: 'edit' | 'view';
-    comparisonMode?: QbComparisonMode;
+    comparisonMode?: SdQbComparisonMode;
     disabled?: boolean;
     value?: Filter | null;
     filters?: Filter[];
@@ -56,22 +55,22 @@ interface SdQueryBuilderOption {
     onFiltersChange?: (filters: Filter[]) => void;
     onRootLogicChange?: (logic: 'AND' | 'OR') => void;
 }
-type QbNode = QbGroup | QbRule;
+type SdQbNode = SdQbGroup | SdQbRule;
 /** Component-level capability for right-hand operands. */
-type QbComparisonMode = 'value-only' | 'value-or-field';
+type SdQbComparisonMode = 'value-only' | 'value-or-field';
 /** Per-rule right-hand operand source. */
-type QbValueSource = 'literal' | 'field';
+type SdQbValueSource = 'literal' | 'field';
 /** A logical group of nodes joined by AND / OR. Maps to `FilterAndOr`. */
-interface QbGroup {
+interface SdQbGroup {
     id: string;
     kind: 'group';
     logic: 'AND' | 'OR';
-    children: QbNode[];
+    children: SdQbNode[];
     /** UI-only: whether this group's "+" dropdown is open. */
     open?: boolean;
 }
 /** A single `field operator value` condition. Maps to a leaf `Filter`. */
-interface QbRule {
+interface SdQbRule {
     id: string;
     kind: 'rule';
     field?: string;
@@ -79,94 +78,101 @@ interface QbRule {
     /** 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;
+    valueSource?: SdQbValueSource;
     /** 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;
-type QbTokenKind = 'field' | 'op' | 'value' | 'logic' | 'paren' | 'plain';
+/** Type guard — narrows a `SdQbNode` to a `SdQbGroup`. */
+declare function sdIsQbGroup(node: SdQbNode): node is SdQbGroup;
+type SdQbTokenKind = 'field' | 'op' | 'value' | 'logic' | 'paren' | 'plain';
 /** One piece of the rendered raw query string, tagged for highlight styling. */
-interface QbToken {
+interface SdQbToken {
     text: string;
-    kind: QbTokenKind;
+    kind: SdQbTokenKind;
 }
 /** Allowed operators per field type — used when `field.operators` is not set. */
-declare const QB_OPERATORS_BY_TYPE: Record<SdQueryBuilderFieldType, Operator[]>;
+declare const SD_QB_OPERATORS_BY_TYPE: Record<SdQueryBuilderFieldType, Operator[]>;
 /** Default operator when a rule is first created for a field. */
-declare const QB_DEFAULT_OPERATOR_BY_TYPE: Record<SdQueryBuilderFieldType, Operator>;
+declare const SD_QB_DEFAULT_OPERATOR_BY_TYPE: Record<SdQueryBuilderFieldType, Operator>;
 /** Operators with no value payload — the value editor is hidden for these. */
-declare const QB_NO_DATA_OPERATORS: Operator[];
+declare const SD_QB_NO_DATA_OPERATORS: Operator[];
 /** Operators whose value is an array — the value editor offers multi-select. */
-declare const QB_MULTI_OPERATORS: Operator[];
+declare const SD_QB_MULTI_OPERATORS: Operator[];
 /** Operators allowed for `field` — explicit override wins, else the per-type set. */
-declare function qbAllowedOperators(field: SdQueryBuilderField | undefined): Operator[];
+declare function sdQbAllowedOperators(field: SdQueryBuilderField | undefined): Operator[];
 /** Starting operator for a new rule on `field` — falls back to the per-type default. */
-declare function qbDefaultOperator(field: SdQueryBuilderField | undefined): Operator | undefined;
+declare function sdQbDefaultOperator(field: SdQueryBuilderField | undefined): Operator | undefined;
 /** True when `op` is NULL / NOT_NULL (no value editor). */
-declare function qbIsNoDataOperator(op: Operator | undefined): boolean;
+declare function sdQbIsNoDataOperator(op: Operator | undefined): boolean;
 /** True when `op` is IN / NOT_IN (array value). */
-declare function qbIsMultiOperator(op: Operator | undefined): boolean;
+declare function sdQbIsMultiOperator(op: Operator | undefined): boolean;
 /** True when the operator accepts one right-hand operand, including a field reference. */
-declare function qbSupportsFieldCompareOperator(op: Operator | undefined): boolean;
+declare function sdQbSupportsFieldCompareOperator(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>;
+declare const SD_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).
+ * Priority: `field.icon` → `SD_QB_TYPE_ICON[field.type]` → `'tune'` (default, like query-bar).
  */
-declare function qbFieldIcon(field: SdQueryBuilderField | undefined): string;
+declare function sdQbFieldIcon(field: SdQueryBuilderField | undefined): string;
 /** Next stable node id with the given prefix. */
-declare function qbId(prefix?: string): string;
+declare function sdQbId(prefix?: string): string;
 /** Build a fresh rule node (optionally pre-filled). */
-declare function qbNewRule(field?: string, operator?: Operator, value?: any, valueSource?: QbValueSource, compareField?: string): QbRule;
+declare function sdQbNewRule(field?: string, operator?: Operator, value?: any, valueSource?: SdQbValueSource, compareField?: string): SdQbRule;
 /** Build a fresh group node. */
-declare function qbNewGroup(logic?: 'AND' | 'OR', children?: QbNode[]): QbGroup;
+declare function sdQbNewGroup(logic?: 'AND' | 'OR', children?: SdQbNode[]): SdQbGroup;
 /** 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";
+declare const SD_QB_TODAY = "TODAY";
 /** The `'TODAY'` sentinel type (matches the utils `date-today` data literal). */
-type QbToday = typeof QB_TODAY;
+type SdQbToday = typeof SD_QB_TODAY;
 /** Date value editor mode for a date/datetime rule (derived from the rule value). */
-type QbDateMode = 'absolute' | 'now' | 'relative';
+type SdQbDateMode = 'absolute' | 'now' | 'relative';
 /** Type guard — narrows a rule value to a utils `DateRelative` (offset spec). */
-declare const qbIsRelativeDate: (v: any) => v is DateRelative;
+declare const sdQbIsRelativeDate: (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;
+declare function sdQbIsToday(v: any): v is SdQbToday;
 /** Starting relative value when a rule first switches to "relative" mode. */
-declare function qbDefaultRelative(): DateRelative;
+declare function sdQbDefaultRelative(): DateRelative;
 /** One date-mode option — carries a Material icon shown in the dropdown + selected trigger. */
-interface QbDateModeOption {
-    value: QbDateMode;
-    display: string;
+interface SdQbDateModeOption {
+    value: SdQbDateMode;
+    /** i18n key of the label — resolved at read time, NOT at module-eval time. */
+    labelKey: 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: QbDateModeOption[];
+declare const SD_QB_DATE_MODES: SdQbDateModeOption[];
 /** One value-source option for field-to-field comparison UI. */
-interface QbValueSourceOption {
-    value: QbValueSource;
-    display: string;
+interface SdQbValueSourceOption {
+    value: SdQbValueSource;
+    /** i18n key of the label — resolved at read time, NOT at module-eval time. */
+    labelKey: 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: QbValueSourceOption[];
-/** Stable combined direction×unit option list (token `'unit:direction'`). */
-declare const QB_RELATIVE_UNIT_OPTIONS: {
+declare const SD_QB_VALUE_SOURCE_OPTIONS: SdQbValueSourceOption[];
+/** One combined direction×unit option (token `'unit:direction'`). */
+interface SdQbRelativeUnitOption {
     value: string;
-    display: string;
-}[];
+    /** i18n key of the label — resolved at read time, NOT at module-eval time. */
+    labelKey: string;
+}
+/** Stable combined direction×unit option list (token `'unit:direction'`). */
+declare const SD_QB_RELATIVE_UNIT_OPTIONS: SdQbRelativeUnitOption[];
+/** i18n key of the combined `unit`×`direction` phrase for a relative-date offset. */
+declare function qbRelativeLabelKey(unit: SdQbRelativeUnit, direction: SdQbRelativeDirection): string;
 /** Shared empty option array — stable ref for fallbacks (avoids per-call allocation). */
-declare const QB_EMPTY_OPTIONS: SdQueryBuilderFieldOption[];
+declare const SD_QB_EMPTY_OPTIONS: SdQueryBuilderFieldOption[];
 
 /**
  * Visual filter / rule builder. Compose nested AND / OR groups of
@@ -184,7 +190,7 @@ declare class SdQueryBuilder {
     /** `'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>;
+    readonly comparisonMode: _angular_core.InputSignal<SdQbComparisonMode>;
     /** Disable all editing controls. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Prefix for `data-autoid` on inner controls (E2E selectors). */
@@ -195,42 +201,64 @@ declare class SdQueryBuilder {
     readonly filters: _angular_core.ModelSignal<Filter[]>;
     /** Root group's logical connector. `[(rootLogic)]`. */
     readonly rootLogic: _angular_core.ModelSignal<"AND" | "OR">;
-    readonly tree: _angular_core.Signal<QbGroup>;
+    readonly tree: _angular_core.Signal<SdQbGroup>;
     /** `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 resolvedComparisonMode: _angular_core.Signal<SdQbComparisonMode>;
     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: _sdcorejs_angular_components_query_builder.QbDateModeOption[];
+    readonly dateModes: _angular_core.Signal<{
+        display: string;
+        value: SdQbDateMode;
+        labelKey: string;
+        icon: string;
+    }[]>;
     /** Stable option list for the literal-vs-field operand select. */
-    readonly valueSourceOptions: _sdcorejs_angular_components_query_builder.QbValueSourceOption[];
+    readonly valueSourceOptions: _angular_core.Signal<{
+        display: string;
+        value: SdQbValueSource;
+        labelKey: string;
+        icon: string;
+    }[]>;
     /** Stable combined unit×direction option list for the relative select. */
-    readonly relativeUnitOptions: {
-        value: string;
+    readonly relativeUnitOptions: _angular_core.Signal<{
         display: string;
-    }[];
-    /** View-mode token stream — recomputed from the emitted value. */
-    readonly tokens: _angular_core.Signal<QbToken[]>;
+        value: string;
+        labelKey: string;
+    }[]>;
+    readonly selectFieldLabel: _angular_core.Signal<string>;
+    readonly valueLabel: _angular_core.Signal<string>;
+    readonly fromLabel: _angular_core.Signal<string>;
+    readonly toLabel: _angular_core.Signal<string>;
+    readonly addLabel: _angular_core.Signal<string>;
+    readonly addNodeLabel: _angular_core.Signal<string>;
+    readonly conditionLabel: _angular_core.Signal<string>;
+    readonly groupLabel: _angular_core.Signal<string>;
+    readonly removeGroupLabel: _angular_core.Signal<string>;
+    readonly removeConditionLabel: _angular_core.Signal<string>;
+    readonly emptyLabel: _angular_core.Signal<string>;
+    /** View-mode token stream — recomputed from the emitted value (and from the active language). */
+    readonly tokens: _angular_core.Signal<SdQbToken[]>;
     readonly isView: _angular_core.Signal<boolean>;
     /** Expose the type-guard to the template. */
-    readonly isGroup: typeof isQbGroup;
+    readonly isGroup: typeof sdIsQbGroup;
     /** Resolve the leading icon for a field (own `icon` → per-type → `'tune'`) — used by the field picker. */
-    readonly fieldIcon: typeof qbFieldIcon;
+    readonly fieldIcon: typeof sdQbFieldIcon;
     constructor();
     /** Switch a group's AND/OR connector and re-emit. No-op when disabled or unchanged. */
-    setGroupLogic(group: QbGroup, logic: 'AND' | 'OR'): void;
+    setGroupLogic(group: SdQbGroup, logic: 'AND' | 'OR'): void;
     /** Open this group's "+" menu (closing any other open one). UI-only — does not emit. */
-    toggleDropdown(group: QbGroup, event: Event): void;
+    toggleDropdown(group: SdQbGroup, event: Event): void;
     closeAllDropdowns(): void;
     /** Append a blank rule to `group`. */
-    addRule(group: QbGroup): void;
+    addRule(group: SdQbGroup): void;
     /** Append a nested sub-group (seeded with one blank rule) to `group`. */
-    addGroup(group: QbGroup): void;
+    addGroup(group: SdQbGroup): void;
     /** Remove the child at `index` from `parent` (a rule or a whole sub-group). */
-    removeNode(parent: QbGroup, index: number): void;
+    removeNode(parent: SdQbGroup, index: number): void;
     /**
      * Point `rule` at a new field. Resets operator to the field's default and the value
      * to that operator's empty shape — the old operator/value rarely fit the new type.
@@ -239,52 +267,73 @@ declare class SdQueryBuilder {
      * @param key - the chosen field key (from the field picker). Swap-only: a null / undefined
      *   key is a no-op — the field can be changed but never cleared (issue #2).
      */
-    setField(rule: QbRule, key: any): void;
+    setField(rule: SdQbRule, key: any): void;
     /** Change `rule`'s operator and reshape its value to fit the new operator (array / range / none). */
-    setOperator(rule: QbRule, op: Operator | undefined): void;
+    setOperator(rule: SdQbRule, op: Operator | undefined): void;
     /** Set a single-value rule's value (coercing numeric fields to `number`). */
-    setScalar(rule: QbRule, raw: any): void;
+    setScalar(rule: SdQbRule, raw: any): void;
     /** Set the lower bound of a BETWEEN rule's `{ from, to }` value. */
-    setBetweenFrom(rule: QbRule, raw: any): void;
+    setBetweenFrom(rule: SdQbRule, 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: unknown): void;
-    setCompareField(rule: QbRule, key: any): void;
+    setBetweenTo(rule: SdQbRule, raw: any): void;
+    setValueSource(rule: SdQbRule, source: unknown): void;
+    setCompareField(rule: SdQbRule, key: any): void;
     /** The field metadata for a rule's current `field` key (or undefined if unset). */
-    fieldOf(rule: QbRule): SdQueryBuilderField | undefined;
+    fieldOf(rule: SdQbRule): SdQueryBuilderField | undefined;
     /** Operators allowed for a rule, derived from its field's type / override. */
-    allowedOperators(rule: QbRule): Operator[];
+    allowedOperators(rule: SdQbRule): 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;
+    showOperatorSelector(rule: SdQbRule): boolean;
+    compareFields(rule: SdQbRule): SdQueryBuilderField[];
+    canCompareWithField(rule: SdQbRule): boolean;
+    showValueSourceSelector(rule: SdQbRule): boolean;
+    valueSourceOf(rule: SdQbRule): SdQbValueSource;
+    isFieldSource(rule: SdQbRule): 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. */
     isMulti(op: Operator | undefined): boolean;
     /** `[true/false]` option list for a boolean field's value select (stable reference). */
     booleanItems(field: SdQueryBuilderField): SdQueryBuilderFieldOption[];
+    /**
+     * Option list cho field `type:'values'`.
+     *
+     * why: template cũ bind thẳng `[items]="fieldOf(rule)!.values || []"`. `values` là OPTIONAL trên
+     * `SdQueryBuilderField`, nên với field khai thiếu `values`, nhánh `|| []` cấp phát một mảng MỚI
+     * mỗi lần change detection chạy — đúng nguyên nhân OOM đã ghi ở `#booleanOptionsByKey`:
+     * `sd-select` có `toObservable(items)` → `markForCheck()` → CD mới → mảng mới → lặp vô hạn.
+     *
+     * why: KHÔNG memo hoá qua `computed<Map>` snapshot. `field.values` vốn ĐÃ là mảng của consumer
+     * nên tự nó ổn định; snapshot vào Map chỉ thêm một tầng cache không bao giờ invalidate khi
+     * consumer nạp option bất đồng bộ bằng cách gán tại chỗ (`fields[0].values = loaded`) — reference
+     * `fields` không đổi nên `computed` giữ nguyên list cũ vĩnh viễn. Chỉ nhánh RỖNG cần hằng số
+     * dùng chung để tránh literal mới mỗi CD.
+     */
+    valueItems(field: SdQueryBuilderField): SdQueryBuilderFieldOption[];
     /** Current date-value mode of a rule, derived from its value (no separate state). */
-    dateMode(rule: QbRule): QbDateMode;
+    dateMode(rule: SdQbRule): SdQbDateMode;
     /** Switch a date/datetime rule's value mode, reseeding the value for the new mode. */
-    setDateMode(rule: QbRule, mode: unknown): void;
+    setDateMode(rule: SdQbRule, mode: unknown): void;
     /** Read the offset amount of a relative rule (default 1). */
-    relativeAmount(rule: QbRule): number;
+    relativeAmount(rule: SdQbRule): number;
     /** Set the offset amount (clamped to an integer >= 1). */
-    setRelativeAmount(rule: QbRule, raw: any): void;
+    setRelativeAmount(rule: SdQbRule, raw: any): void;
     /** Read the `'unit:direction'` token of a relative rule (default `'day:previous'`). */
-    relativeUnitDirValue(rule: QbRule): string;
+    relativeUnitDirValue(rule: SdQbRule): string;
     /** Set the offset unit + direction from a `'unit:direction'` token. */
-    setRelativeUnitDir(rule: QbRule, token: unknown): void;
+    setRelativeUnitDir(rule: SdQbRule, token: unknown): void;
     /** 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, { "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>;
 }
 
+/**
+ * Hàm dịch một key i18n, do component truyền xuống.
+ * why: `filterToTokens` là hàm thuần cấp module nên không inject `I18nService` được; nhận translator
+ * qua tham số vẫn giữ được tính thuần mà bỏ được chuỗi tiếng Việt hardcode trong chuỗi view.
+ */
+type SdQbTranslate = (key: string, params?: Record<string, string | number>) => string;
 /**
  * Map the internal builder tree to the public `Filter` (the root is always a
  * `FilterAndOr`). Rules missing field / operator / value — and empty nested
@@ -293,28 +342,31 @@ declare class SdQueryBuilder {
  * @param group - the editable tree's root group.
  * @returns the canonical nested `Filter`, or `null` when no complete rule survives.
  */
-declare function treeToFilter(group: QbGroup): Filter | null;
+declare function treeToFilter(group: SdQbGroup): Filter | null;
 /**
  * Inverse of {@link treeToFilter} — rebuild the editable tree from a `Filter` so a
  * consumer can seed `[value]`. A non-group (bare) filter is wrapped in an AND root;
  * `null` yields an empty AND root.
  *
  * @param filter - a `Filter` (group or leaf), or `null` / `undefined` for an empty tree.
- * @returns a fresh root `QbGroup` mirroring the filter's structure.
+ * @returns a fresh root `SdQbGroup` mirroring the filter's structure.
  */
-declare function filterToTree(filter: Filter | null | undefined): QbGroup;
+declare function filterToTree(filter: Filter | null | undefined): SdQbGroup;
 /**
  * Render a `Filter` to a SQL-ish token stream for view mode. Field tokens use the
  * matching field's `label`; operators map to SQL syntax (`= != like between is null …`);
  * `and` / `or` are lowercase; nested multi-child groups are wrapped in parentheses.
  * Returns a token stream (not a string) so the template can wrap each piece in a
- * highlight `<span>` keyed by `QbToken.kind`.
+ * highlight `<span>` keyed by `SdQbToken.kind`.
  *
  * @param filter - the `Filter` to render, or `null` / `undefined`.
  * @param fields - field metadata, used to resolve each field key to its display label + value formatting.
+ * @param translate - i18n lookup for language-dependent value tokens (today / relative offsets /
+ *   boolean labels). Optional so the serializer stays callable outside an Angular injection context;
+ *   omitting it renders the raw i18n keys.
  * @returns the ordered tokens, or `[]` when `filter` is empty.
  */
-declare function filterToTokens(filter: Filter | null | undefined, fields: SdQueryBuilderField[]): QbToken[];
+declare function filterToTokens(filter: Filter | null | undefined, fields: SdQueryBuilderField[], translate?: SdQbTranslate): SdQbToken[];
 
-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 };
+export { SD_QB_DATE_MODES, SD_QB_DEFAULT_OPERATOR_BY_TYPE, SD_QB_EMPTY_OPTIONS, SD_QB_MULTI_OPERATORS, SD_QB_NO_DATA_OPERATORS, SD_QB_OPERATORS_BY_TYPE, SD_QB_RELATIVE_UNIT_OPTIONS, SD_QB_TODAY, SD_QB_TYPE_ICON, SD_QB_VALUE_SOURCE_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, qbRelativeLabelKey, sdIsQbGroup, sdQbAllowedOperators, sdQbDefaultOperator, sdQbDefaultRelative, sdQbFieldIcon, sdQbId, sdQbIsMultiOperator, sdQbIsNoDataOperator, sdQbIsRelativeDate, sdQbIsToday, sdQbNewGroup, sdQbNewRule, sdQbSupportsFieldCompareOperator, treeToFilter };
+export type { SdQbComparisonMode, SdQbDateMode, SdQbDateModeOption, SdQbGroup, SdQbNode, SdQbRelativeDirection, SdQbRelativeUnit, SdQbRelativeUnitOption, SdQbRule, SdQbToday, SdQbToken, SdQbTokenKind, SdQbTranslate, SdQbValueSource, SdQbValueSourceOption, SdQueryBuilderField, SdQueryBuilderFieldOption, SdQueryBuilderFieldType, SdQueryBuilderOption };

package/components/section/index.d.ts

@@ -10,8 +10,11 @@ declare class SdSection {
     collapsed: _angular_core.ModelSignal<boolean>;
     collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     hideHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Id của vùng body, để header `aria-controls` trỏ tới khi section collapsible. */
+    readonly bodyId: string;
     constructor();
     toggleCollapse: () => void;
+    onHeaderKeydown: (event: KeyboardEvent) => 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; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooterLeft]", "[sdFooterRight]"], true, never>;
 }