@sd-angular/core 19.0.0-beta.100 → 19.0.0-beta.102

package/components/query-bar/src/chip-popover.component.d.ts

@@ -0,0 +1,73 @@
+import { MatMenu } from '@angular/material/menu';
+import { Filter, Operator } from '@sd-angular/core/utilities/models';
+import { SdQueryField, sdQueryFieldIcon } from './query-bar.model';
+import * as i0 from "@angular/core";
+/**
+ * Popover-mode chip editor — the entire `<mat-menu>` that opens when a popover-mode
+ * chip is clicked. Owns ALL operator+value staging signals and async option loading.
+ *
+ * why: tách khỏi `<sd-query-bar>` để parent chỉ giữ `editingIndex` (chip nào đang
+ * mở) + nhận `(commit)` khi popover đóng. Mỗi lần parent gọi `seed(filter, field)`
+ * trước khi mở chip popover, child reset staging signals + kích option loading.
+ *
+ * Public surface (template ref `#cp`):
+ *   - `cp.menu()` — the `<mat-menu>` to feed `[menu]` of `<sd-query-popover-chip>`
+ *   - `cp.seed(filter, field)` — parent reseeds staging before opening
+ *   - `(commit)` output — emitted on mat-menu close with staged Filter
+ *   - `(swapField)` output — emitted when the nested field switcher picks a new field
+ */
+export declare class SdQueryChipPopover {
+    #private;
+    /** Resolved field of the currently editing chip — parent passes from `fieldByKey()`. */
+    readonly field: import("@angular/core").InputSignal<SdQueryField | undefined>;
+    /** The chip's current Filter — used by `seed()` for initial staging values. */
+    readonly filter: import("@angular/core").InputSignal<Filter | undefined>;
+    /** Optional chip index — embedded in the composed autoIds. */
+    readonly chipIndex: import("@angular/core").InputSignal<number | null>;
+    /** Prefix for `data-autoId` on inner controls. */
+    readonly autoIdBase: import("@angular/core").InputSignal<string>;
+    /** MatMenu for the field switcher — parent passes its `<sd-query-field-picker>` menu. */
+    readonly switchPickerMenu: import("@angular/core").InputSignal<MatMenu | undefined>;
+    /** Emitted when mat-menu closes — parent splices `next` into filters[idx]. */
+    readonly commit: import("@angular/core").OutputEmitterRef<Filter>;
+    /** Emitted when nested field-switcher picks a new field — parent calls changeFilterField. */
+    readonly swapField: import("@angular/core").OutputEmitterRef<SdQueryField>;
+    /** Staged operator. */
+    readonly editingOperator: import("@angular/core").WritableSignal<Operator>;
+    /** Staged value (shape depends on field type + operator). */
+    readonly editingValue: import("@angular/core").WritableSignal<unknown>;
+    /** Resolved option list for values / lazy-values. */
+    readonly editingOptions: import("@angular/core").WritableSignal<any[]>;
+    /** Loading flag for async option fetch. */
+    readonly editingOptionsLoading: import("@angular/core").WritableSignal<boolean>;
+    readonly allowedOperators: import("@angular/core").Signal<Operator[]>;
+    readonly showOperatorSelector: import("@angular/core").Signal<boolean>;
+    /** Whether the staged operator is multi-select (IN/NOT_IN). */
+    multiple(op?: Operator): boolean;
+    /** Whether the staged operator carries no data (NULL/NOT_NULL). */
+    isNoDataOperator(op: Operator | string): boolean;
+    /** Compose an autoId for an inner control (`<base>-chip<idx>-<role>`). */
+    chipAutoId(role: string): string;
+    readonly iconFor: typeof sdQueryFieldIcon;
+    readonly menu: import("@angular/core").Signal<MatMenu | undefined>;
+    /** Reseed staging from a new filter/field pair — call before opening the menu. */
+    seed(filter: Filter | undefined, field: SdQueryField | undefined): void;
+    /** Called on operator change in the popover header — reshapes value when family changes. */
+    onEditingOperatorChange(next: Operator): void;
+    /** Single-value input change. */
+    onEditingValueInput(value: unknown): void;
+    /** BETWEEN range — mutate only `.from`. */
+    onEditingRangeFrom(value: string | number | null): void;
+    /** BETWEEN range — mutate only `.to`. */
+    onEditingRangeTo(value: string | number | null): void;
+    /** Toggle a value in the staged multi-select array. */
+    toggleEditingMultiValue(value: unknown): void;
+    isEditingMultiSelected(value: unknown): boolean;
+    /**
+     * mat-menu's (closed) handler — compose the next Filter from staging signals and
+     * emit (commit). Parent splices into its filters[] and nulls editingIndex.
+     */
+    onMenuClosed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryChipPopover, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryChipPopover, "sd-query-chip-popover", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "chipIndex": { "alias": "chipIndex"; "required": false; "isSignal": true; }; "autoIdBase": { "alias": "autoIdBase"; "required": false; "isSignal": true; }; "switchPickerMenu": { "alias": "switchPickerMenu"; "required": false; "isSignal": true; }; }, { "commit": "commit"; "swapField": "swapField"; }, never, never, true, never>;
+}

package/components/query-bar/src/field-picker.component.d.ts

@@ -0,0 +1,37 @@
+import { MatMenu } from '@angular/material/menu';
+import { SdQueryField, sdQueryFieldIcon } from './query-bar.model';
+import * as i0 from "@angular/core";
+/**
+ * Field picker mat-menu for `sd-query-bar`.
+ *
+ * Shared between two flows in the bar:
+ * - "Add filter" — pass `[usedKeys]` (a Set of field keys already on the bar) so
+ *   those entries render disabled with a check.
+ * - "Đổi field" inside the chip popover — pass `[currentKey]` to disable the
+ *   currently-bound field.
+ *
+ * Parent triggers via `[matMenuTriggerFor]="picker.menu()"` and receives the
+ * chosen field through `(pick)`.
+ */
+export declare class SdQueryFieldPicker {
+    /** Field list shown in the menu (caller-supplied; rendered in input order). */
+    readonly fields: import("@angular/core").InputSignal<SdQueryField[]>;
+    /** Single key disabled with a trailing check — used in the chip-popover "Đổi field" flow. */
+    readonly currentKey: import("@angular/core").InputSignal<string | undefined>;
+    /** Set of keys already in use — used in the "Add filter" flow to grey out duplicates. */
+    readonly usedKeys: import("@angular/core").InputSignal<Set<string>>;
+    /** Emits when the user picks an enabled field. */
+    readonly pick: import("@angular/core").OutputEmitterRef<SdQueryField>;
+    /** MatMenu instance — parent binds `[matMenuTriggerFor]="picker.menu()"`. */
+    readonly menu: import("@angular/core").Signal<MatMenu>;
+    readonly iconFor: typeof sdQueryFieldIcon;
+    /** Per-field disabled state — current key OR used key OR field's own disabled flag. */
+    readonly disabledMap: import("@angular/core").Signal<Set<string>>;
+    isDisabled(field: SdQueryField): boolean;
+    /** "Current" check icon — only when the field matches `currentKey`. */
+    isCurrent(field: SdQueryField): boolean;
+    /** "Used" check icon — when the field is in `usedKeys` (not the same as current). */
+    isUsed(field: SdQueryField): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryFieldPicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryFieldPicker, "sd-query-field-picker", never, { "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "currentKey": { "alias": "currentKey"; "required": false; "isSignal": true; }; "usedKeys": { "alias": "usedKeys"; "required": false; "isSignal": true; }; }, { "pick": "pick"; }, never, never, true, never>;
+}

package/components/query-bar/src/inline-chip.component.d.ts

@@ -0,0 +1,82 @@
+import { Filter, Operator } from '@sd-angular/core/utilities/models';
+import { SdQueryField } from './query-bar.model';
+import * as i0 from "@angular/core";
+type Density = 'compact' | 'comfortable';
+/**
+ * Completed inline chip (non-string/number — those use `<sd-query-inline-value-chip>`).
+ *
+ * why: tách edit lifecycle ra khỏi parent `<sd-query-bar>` — child tự quản lý
+ * `isEditing` signal, auto-open picker, focusout exit. Parent chỉ pass field/filter
+ * và nhận commit/remove outputs.
+ *
+ * Covers types: boolean, date, datetime, values, lazy-values, plus a fallback else
+ * branch. BETWEEN (date / datetime) uses a single `<sd-date-range>` (datetime
+ * downgrades to date precision).
+ */
+export declare class SdQueryInlineChip {
+    #private;
+    /** Resolved field — parent passes it (no lookup needed inside). */
+    readonly field: import("@angular/core").InputSignal<SdQueryField>;
+    /** The chip's Filter — used for `data` + `operator`. */
+    readonly filter: import("@angular/core").InputSignal<Filter>;
+    /** Density preset — sizes the `.c-token` row. */
+    readonly density: import("@angular/core").InputSignal<Density>;
+    /** Whether the active operator is a multi-select (IN/NOT_IN). */
+    readonly multiple: import("@angular/core").InputSignal<boolean>;
+    /** Show `<sd-operator>` (disabled badge) on the chip; otherwise show `':'` separator. */
+    readonly showOperator: import("@angular/core").InputSignal<boolean>;
+    /** autoId prefix for inner controls (parent passes `inlineAutoId(i, 'value')`). */
+    readonly autoId: import("@angular/core").InputSignal<string>;
+    /** Pre-computed display text — parent owns `chipValueText(filter)` so we don't recompute. */
+    readonly valueText: import("@angular/core").InputSignal<string>;
+    /** No-data operator (NULL/NOT_NULL) — hide entire value slot when true. */
+    readonly isNoData: import("@angular/core").InputSignal<boolean>;
+    /** Single-value commit — parent runs `updateFilter(i, { data })`. */
+    readonly commit: import("@angular/core").OutputEmitterRef<unknown>;
+    /** BETWEEN commit (date/datetime) — parent runs `setFilterRange(i, ev)`. */
+    readonly commitRange: import("@angular/core").OutputEmitterRef<{
+        from: unknown;
+        to: unknown;
+    } | null>;
+    /** Live edit during multi-select — parent runs `editValueFn(i)(v)`. */
+    readonly liveChange: import("@angular/core").OutputEmitterRef<unknown>;
+    /** × removal. */
+    readonly remove: import("@angular/core").OutputEmitterRef<void>;
+    readonly editing: import("@angular/core").Signal<boolean>;
+    /** Active picker reference — auto-opened right after entering edit. */
+    private readonly chipPicker;
+    readonly iconName: import("@angular/core").Signal<string>;
+    /** Operator code — convenience accessor for template. */
+    readonly operator: import("@angular/core").Signal<Operator>;
+    /** Data payload — convenience accessor for template. */
+    readonly data: import("@angular/core").Signal<unknown>;
+    /** Enter edit mode + auto-open the picker on next render. */
+    enterEdit(): void;
+    /**
+     * Exit edit only when focus actually leaves the wrapper subtree.
+     * why: focusout fires for every internal blur — only exit when relatedTarget
+     * is OUTSIDE the wrapper AND không thuộc cdk-overlay (mat-select panel, mat-calendar,
+     * datetime overlay đều render trong document.body). Tick option trong panel multi-
+     * select sẽ chuyển focus sang `<mat-option>` (nằm trong cdk-overlay-container) →
+     * nếu exit ngay sẽ flip viewed → kill panel sớm. Chỉ exit khi panel đã close
+     * (relatedTarget không nằm trong overlay). markForCheck vì overlay focusout
+     * không kéo theo CD cho OnPush parent.
+     */
+    onFocusOut(ev: FocusEvent): void;
+    /** Test-only shim — direct call avoids dispatching real FocusEvent in JSDOM. */
+    onFocusOutForTest(ev: FocusEvent): void;
+    /** Single-value commit (sd-date, sd-datetime, single sd-select). */
+    emitSingleCommit(v: unknown): void;
+    /** BETWEEN commit — sd-date-range emits {from, to}. */
+    emitRangeCommit(ev: {
+        from: unknown;
+        to: unknown;
+    } | null): void;
+    /** Multi-select live emit — does NOT exit edit (focusout handles exit). */
+    emitLive(v: unknown): void;
+    /** Boolean toggle commit — exits edit. */
+    emitBoolean(v: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryInlineChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryInlineChip, "sd-query-inline-chip", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "filter": { "alias": "filter"; "required": true; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showOperator": { "alias": "showOperator"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "isNoData": { "alias": "isNoData"; "required": false; "isSignal": true; }; }, { "commit": "commit"; "commitRange": "commitRange"; "liveChange": "liveChange"; "remove": "remove"; }, never, never, true, never>;
+}
+export {};

package/components/query-bar/src/inline-value-chip.component.d.ts

@@ -0,0 +1,71 @@
+import { Operator } from '@sd-angular/core/utilities/models';
+import { SdQueryField } from './query-bar.model';
+import * as i0 from "@angular/core";
+type ChipState = 'pending' | 'active' | 'focus' | 'error';
+/**
+ * Seamless inline value chip for `string` / `number` fields (inline mode only).
+ *
+ * why: the pill itself IS the input — one border, no nested rectangle control. The
+ * label + value + remove live in three flush segments inside a single pill envelope.
+ * Mirrors refs/design_handoff_sd_query_bar "Seamless string/number chip" handoff.
+ *
+ * Commit model matches inline mode: edits write back via `(valueChange)` immediately
+ * (host folds into `filters` without emitting); the bar's Search button stays the only
+ * query trigger. Enter commits + blurs, Esc reverts + blurs, blur commits.
+ */
+export declare class SdQueryInlineValueChip {
+    #private;
+    /** Field this chip filters by — must be kind `string` or `number`. */
+    readonly field: import("@angular/core").InputSignal<SdQueryField>;
+    /** Active operator (drives BETWEEN dual-input + no-data hiding). */
+    readonly operator: import("@angular/core").InputSignal<Operator>;
+    /** Current value: scalar for most operators, `{ from, to }` for BETWEEN. */
+    readonly value: import("@angular/core").InputSignal<unknown>;
+    readonly density: import("@angular/core").InputSignal<"compact" | "comfortable">;
+    /** Show the operator label as a small pill inside the label segment. */
+    readonly showOperator: import("@angular/core").InputSignal<boolean>;
+    /** Prefix for the inner input's `data-autoid`. */
+    readonly autoId: import("@angular/core").InputSignal<string | undefined>;
+    /** Focus the first input on creation — used for the in-progress build chip. */
+    readonly autofocus: import("@angular/core").InputSignal<boolean>;
+    /** Emitted on commit (Enter / blur) with the parsed next value. */
+    readonly valueChange: import("@angular/core").OutputEmitterRef<unknown>;
+    /** Emitted when the user clicks the × segment. */
+    readonly remove: import("@angular/core").OutputEmitterRef<void>;
+    private readonly firstInput;
+    readonly focused: import("@angular/core").WritableSignal<boolean>;
+    readonly hasError: import("@angular/core").WritableSignal<boolean>;
+    /** Editable drafts — single value, plus from/to for BETWEEN. Seeded from `value`. */
+    readonly draft: import("@angular/core").WritableSignal<string>;
+    readonly draftFrom: import("@angular/core").WritableSignal<string>;
+    readonly draftTo: import("@angular/core").WritableSignal<string>;
+    readonly isNumber: import("@angular/core").Signal<boolean>;
+    readonly isBetween: import("@angular/core").Signal<boolean>;
+    readonly isNoData: import("@angular/core").Signal<boolean>;
+    readonly icon: import("@angular/core").Signal<string>;
+    readonly ph: import("@angular/core").Signal<"giá trị" | "nhập…">;
+    readonly phFrom: import("@angular/core").Signal<"Từ" | "từ…">;
+    readonly phTo: import("@angular/core").Signal<"Đến" | "đến…">;
+    readonly hasValue: import("@angular/core").Signal<boolean>;
+    readonly state: import("@angular/core").Signal<ChipState>;
+    constructor();
+    /**
+     * Width in chars — hugs the current value; falls back to the placeholder width only when
+     * empty. why: using placeholder.length unconditionally left a long trailing gap before the
+     * × for short values (e.g. a 1-digit number under the 'giá trị' placeholder).
+     */
+    sizeFor(text: string, placeholder: string): number;
+    /** Click anywhere in the pill (except × or an input) focuses the first input. */
+    focusFromShell(ev: Event): void;
+    onFocus(): void;
+    /** Commit a single-value field (string / number, non-BETWEEN). */
+    commitSingle(): void;
+    /** Commit a BETWEEN range — both ends parsed, emitted as `{ from, to }`. */
+    commitRange(): void;
+    /** Esc — revert drafts to the committed value and blur without emitting. */
+    revertAndBlur(input: HTMLInputElement): void;
+    onRemove(ev: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryInlineValueChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryInlineValueChip, "sd-query-inline-value-chip", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "operator": { "alias": "operator"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "showOperator": { "alias": "showOperator"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "remove": "remove"; }, never, never, true, never>;
+}
+export {};

package/components/query-bar/src/popover-chip.component.d.ts

@@ -0,0 +1,35 @@
+import { MatMenu } from '@angular/material/menu';
+import { Filter, Operator } from '@sd-angular/core/utilities/models';
+import { SdQueryField, sdQueryFieldIcon } from './query-bar.model';
+import * as i0 from "@angular/core";
+/**
+ * Compact popover-mode chip face. Click → opens the parent-supplied [menu] (mat-menu
+ * containing the chip editor). Inert div[role=button] so the nested <sd-operator>
+ * doesn't end up as a button-in-button (invalid HTML).
+ */
+export declare class SdQueryPopoverChip {
+    /** Resolved field (from the bar's `fieldByKey()` map). `undefined` → render raw key. */
+    readonly field: import("@angular/core").InputSignal<SdQueryField | undefined>;
+    /** The chip's filter — used to read `field` / `operator` / `data` for display text. */
+    readonly filter: import("@angular/core").InputSignal<Filter>;
+    /** "Active" = chip has a real value or is no-data op. Drives layout + colour. */
+    readonly active: import("@angular/core").InputSignal<boolean>;
+    /** Operator visible on the chip face (else hidden, ":" separator). */
+    readonly showOperator: import("@angular/core").InputSignal<boolean>;
+    /** Rendered value text for the value slot. */
+    readonly valueText: import("@angular/core").InputSignal<string>;
+    /** Chip popover mat-menu instance supplied by the parent. */
+    readonly menu: import("@angular/core").InputSignal<MatMenu>;
+    /** Fired when the chip popover opens (parent seeds its editing state). */
+    readonly open: import("@angular/core").OutputEmitterRef<void>;
+    /** Fired when the user clicks the × removal icon. */
+    readonly remove: import("@angular/core").OutputEmitterRef<void>;
+    readonly iconFor: typeof sdQueryFieldIcon;
+    filterField(): string;
+    filterOperator(): Operator;
+    private readonly trigger;
+    openMenu(): void;
+    closeMenu(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryPopoverChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryPopoverChip, "sd-query-popover-chip", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": true; "isSignal": true; }; "showOperator": { "alias": "showOperator"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": true; "isSignal": true; }; }, { "open": "open"; "remove": "remove"; }, never, never, true, never>;
+}

package/components/query-bar/src/query-bar.component.d.ts

@@ -0,0 +1,137 @@
+import { Filter, Operator } from '@sd-angular/core/utilities/models';
+import { SdQueryChipPopover } from './chip-popover.component';
+import { SdQueryPopoverChip } from './popover-chip.component';
+import { BuildingChip, SdQuery, SdQueryField, SdQueryLogic, SdSavedFilter, sdQueryFieldIcon } from './query-bar.model';
+import * as i0 from "@angular/core";
+type Density = 'compact' | 'comfortable';
+export declare class SdQueryBar {
+    #private;
+    /** All popover-mode chips in order — used to auto-open after addFilter / close before removeFilter. */
+    readonly popoverChips: import("@angular/core").Signal<readonly SdQueryPopoverChip[]>;
+    /** The extracted in-progress chip — owns operator menu + value picker view refs. */
+    private readonly buildChip;
+    /** The extracted chip popover — owns operator+value staging + commit-on-close. */
+    readonly chipPopover: import("@angular/core").Signal<SdQueryChipPopover | undefined>;
+    /** Prefix for auto-generated `data-autoid` on inner controls (chips, operator/value editors, buttons). */
+    readonly autoIdInput: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    /** Available fields the user can filter by. Required for the field picker. */
+    readonly fields: import("@angular/core").InputSignalWithTransform<SdQueryField[], SdQueryField[] | null | undefined>;
+    /**
+     * Active filter chips. Two-way bindable via `[(filters)]`.
+     * Use this when you only need a flat `Filter[]` (no global logic / search box).
+     */
+    readonly filters: import("@angular/core").ModelSignal<Filter[]>;
+    /**
+     * Global connector between filters. Two-way bindable via `[(logic)]`.
+     * Only meaningful when `showLogicToggle=true` and there are ≥2 filters.
+     */
+    readonly logic: import("@angular/core").ModelSignal<SdQueryLogic>;
+    /** Free-text search string. Two-way bindable via `[(search)]`. Only shown when `showSearch=true`. */
+    readonly search: import("@angular/core").ModelSignal<string>;
+    /**
+     * Editing mode:
+     * - `'popover'` (default) → compact chips; click a chip to edit operator + value in a
+     *   mat-menu popover, commit with "Áp dụng".
+     * - `'inline'` → GitLab-style. Each filter's operator + value controls render directly
+     *   on the bar (no popup, no per-filter apply). Edits update `filters` live; the user
+     *   presses the search button (or Enter) once to fire `(apply)`.
+     */
+    readonly mode: import("@angular/core").InputSignalWithTransform<"popover" | "inline", "popover" | "inline" | null | undefined>;
+    /** Density preset — chip / control height. */
+    readonly density: import("@angular/core").InputSignalWithTransform<Density, Density | null | undefined>;
+    /** Show free-text search input on the left. */
+    readonly showSearch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show saved-filters dropdown on the right. Requires `[savedFiltersKey]` to actually persist. */
+    readonly showSavedFilters: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Namespace key for persisting saved filters to `localStorage`. When set, the saved-filters
+     * dropdown loads/saves under `sd-query-bar:savedFilters:<key>`. Leave undefined to disable.
+     */
+    readonly savedFiltersKey: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Snapshot of the current query — fed into `<sd-query-saved-filters-menu [query]>` so
+     * saving a filter captures live filters/logic/search.
+     */
+    readonly currentQuery: import("@angular/core").Signal<SdQuery<any>>;
+    /** 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). */
+    readonly showLogicToggle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show "Clear all" button when at least one filter is active. */
+    readonly showClearAll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Render the operator label on the chip face (default: hidden — operator only visible in popover). */
+    readonly showOperatorOnChip: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Composite payload — emitted whenever filters / logic / search change. */
+    readonly queryChange: import("@angular/core").OutputEmitterRef<SdQuery<any>>;
+    /** Fires when the user presses "Áp dụng" inside a chip popover — host should reload data. */
+    readonly apply: import("@angular/core").OutputEmitterRef<SdQuery<any>>;
+    /** Map of `field.key` → `SdQueryField` for fast lookup from filters[]. */
+    readonly fieldByKey: import("@angular/core").Signal<Record<string, SdQueryField>>;
+    /** Field keys already chained on a chip — the picker greys these out. */
+    readonly usedFieldKeys: import("@angular/core").Signal<Set<string>>;
+    /** Render the global AND/OR connector text between chips when `logic === 'OR'`. */
+    readonly showOrConnector: import("@angular/core").Signal<boolean>;
+    /** Search button is actionable only when there is something to apply. */
+    readonly canSearch: import("@angular/core").Signal<boolean>;
+    /** Index of the chip whose popover is open. Reset to null after commit / close. */
+    readonly editingIndex: import("@angular/core").WritableSignal<number | null>;
+    /** Resolved field of the chip whose popover is currently open (or null). */
+    readonly editingField: import("@angular/core").Signal<SdQueryField | null>;
+    /**
+     * Multi-select is derived from the operator (IN / NOT_IN) — not a field flag.
+     * Only called by inline-mode + build-mode templates with a known operator;
+     * popover-mode chips read `multiple()` from the child popover directly.
+     */
+    multiple(op: Operator): boolean;
+    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: import("@angular/core").Signal<BuildingChip<any> | null>;
+    allowedOperatorsFor(field: SdQueryField): Operator[];
+    inlineAutoId(index: number, role: string): string;
+    /** Entry point from the field picker — start building a chip for `field`. */
+    beginBuild(field: SdQueryField): void;
+    /** Operator chosen during build — finish (no-data) or advance to the value step. */
+    pickBuildOperator(op: Operator): void;
+    /** Value committed during build — push the completed chip, clear building. No emit. */
+    commitBuildValue(value: unknown): void;
+    /**
+     * Commit from the seamless build chip (string / number). An empty value (blur with no
+     * input) cancels the build instead of pushing a blank chip.
+     */
+    onBuildSeamlessCommit(value: unknown): void;
+    /** Abandon the in-progress chip. */
+    cancelBuild(): void;
+    /**
+     * Commit both ends of a BETWEEN range at once — called from `<sd-query-inline-chip>`'s
+     * `(commitRange)` output when the user picks a date range.
+     * why: sd-date-range emits {from,to} via (sdChange) — single call thay cho cặp
+     * setFilterRangeFrom / setFilterRangeTo cũ (đã bỏ).
+     */
+    setFilterRange(i: number, ev: {
+        from: unknown;
+        to: unknown;
+    } | null): void;
+    addFilter(field: SdQueryField): void;
+    /** Swap the field of an existing chip — reset operator + value to the new field's defaults. */
+    changeFilterField(index: number, field: SdQueryField): void;
+    updateFilter(index: number, patch: Partial<Filter>): void;
+    removeFilter(index: number): void;
+    clearAll(): void;
+    setLogic(value: SdQueryLogic): void;
+    setSearch(value: string): void;
+    triggerApply(): void;
+    /**
+     * Called when a popover-mode chip is clicked — set editingIndex and seed the
+     * child popover's staging signals from the chip's Filter.
+     */
+    openChipPopover(index: number): void;
+    /** Receive `(commit)` from the child popover — splice into filters, null the index. */
+    onChipPopoverCommit(next: Filter): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryBar, never>;
+    static ɵcmp: i0.ɵɵ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>;
+}
+export {};

package/components/query-bar/src/query-bar.model.d.ts

@@ -0,0 +1,136 @@
+import { Signal } from '@angular/core';
+import { SdSearch } from '@sd-angular/core/forms/models';
+import { Filter, NestedKeyOf, Operator } from '@sd-angular/core/utilities/models';
+export type SdQueryFieldType = 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'values' | 'lazy-values';
+interface SdQueryFieldBase<T = any> {
+    /** Dot-notation field path (matches `Filter.field`). */
+    key: NestedKeyOf<T>;
+    /** Human-readable label shown on chip + field picker. */
+    label: string;
+    /** Material icon name; falls back to `SD_QUERY_TYPE_ICON[type]` then `'tune'`. */
+    icon?: string;
+    /**
+     * Controls the operator selector in the chip popover:
+     * - omitted / `false` → **simple mode**: no operator dropdown; the chip always uses
+     *   `defaultOperator` (or the per-type default). Use this for screens that don't need
+     *   operator choice.
+     * - `true` → show the full operator set for the field's `type`
+     *   (`SD_QUERY_OPERATORS_BY_TYPE[type]`).
+     * - `Operator[]` → show exactly these operators.
+     */
+    operators?: boolean | Operator[];
+    /**
+     * Operator the chip starts with. Falls back to `SD_QUERY_DEFAULT_OPERATOR_BY_TYPE[type]`:
+     * string→CONTAIN, number→EQUAL, values/lazy-values→IN, boolean→EQUAL, date/datetime→BETWEEN.
+     */
+    defaultOperator?: Operator;
+    /** Field is offered in picker but not interactive (read-only badge in chip). */
+    disabled?: boolean;
+}
+export interface SdQueryFieldString<T = any> extends SdQueryFieldBase<T> {
+    type: 'string';
+}
+export interface SdQueryFieldNumber<T = any> extends SdQueryFieldBase<T> {
+    type: 'number';
+    /** Bounds for the input control inside the chip popover. */
+    min?: number;
+    max?: number;
+    /** Step for the number input. */
+    step?: number;
+}
+export interface SdQueryFieldBoolean<T = any> extends SdQueryFieldBase<T> {
+    type: 'boolean';
+    /** Labels rendered for the true/false buttons. Default: "Có" / "Không". */
+    trueLabel?: string;
+    falseLabel?: string;
+}
+export interface SdQueryFieldDate<T = any> extends SdQueryFieldBase<T> {
+    type: 'date' | 'datetime';
+    /** Restrict the picker calendar to this range. */
+    min?: Date | string;
+    max?: Date | string;
+}
+/**
+ * Statically-known options (sync array, signal, or one-shot promise).
+ * Mirrors `SdTableColumnValues.option`.
+ */
+export interface SdQueryFieldValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+    type: 'values';
+    option: {
+        items: K[] | Signal<K[]> | (() => Promise<K[]>);
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+    };
+}
+/**
+ * Server-backed options — searchable, paginated. Mirrors `SdTableColumnLazyValues.option`.
+ * `search` is the unified `SdSearch<K>` callback used by `sd-select`: it handles
+ * `{ type: 'SEARCH', searchText }` for live queries and `{ type: 'VALUE', value }` for
+ * resolving chip-display labels of already-selected IDs.
+ */
+export interface SdQueryFieldLazyValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+    type: 'lazy-values';
+    option: {
+        search: SdSearch<K>;
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+    };
+}
+export type SdQueryField<T = any> = SdQueryFieldString<T> | SdQueryFieldNumber<T> | SdQueryFieldBoolean<T> | SdQueryFieldDate<T> | SdQueryFieldValues<T> | SdQueryFieldLazyValues<T>;
+export type SdQueryLogic = 'AND' | 'OR';
+export interface SdQuery<T = any> {
+    filters: Filter<T>[];
+    /** Global connector between filters. Defaults to `'AND'`. */
+    logic?: SdQueryLogic;
+    /** Free-text search box (only present when `showSearch=true`). */
+    search?: string;
+}
+/** Persisted bookmark of a query (filters + logic + search) — managed by `[savedFiltersKey]`. */
+export interface SdSavedFilter<T = any> {
+    id: string;
+    name: string;
+    query: SdQuery<T>;
+}
+/**
+ * Transient state of the in-progress chip during inline-mode token build (field →
+ * operator → value). Lives at the parent (`SdQueryBar.building()`) and is rendered
+ * by `<sd-query-build-chip>`. Step transitions:
+ *   - 'operator' — operator menu open, waiting for the user to pick a condition
+ *   - 'value'    — operator locked, value picker / seamless input is the focus
+ */
+export interface BuildingChip<T = any> {
+    field: SdQueryField<T>;
+    operator?: Operator;
+    step: 'operator' | 'value';
+    value?: unknown;
+}
+/** Full operator set per field type — used when `operators: true`. */
+export declare const SD_QUERY_OPERATORS_BY_TYPE: Record<SdQueryFieldType, Operator[]>;
+/** Default operator when a chip is created and `field.defaultOperator` is not set. */
+export declare const SD_QUERY_DEFAULT_OPERATOR_BY_TYPE: Record<SdQueryFieldType, Operator>;
+/** Icon fallback per field type when `SdQueryField.icon` is not set. */
+export declare const SD_QUERY_TYPE_ICON: Record<SdQueryFieldType, string>;
+/**
+ * Resolves the icon shown on chips and in the field picker.
+ * Priority: `field.icon` → `SD_QUERY_TYPE_ICON[field.type]` → `'tune'`.
+ */
+export declare function sdQueryFieldIcon(field: SdQueryField): string;
+/** Operators that carry no data — value section is hidden in chip popover. */
+export declare const SD_QUERY_NO_DATA_OPERATORS: Operator[];
+/** Operators that carry an array payload — UI offers multi-select. */
+export declare const SD_QUERY_MULTI_OPERATORS: Operator[];
+/** Picks the initial operator when a new chip is created for `field`. */
+export declare function sdQueryDefaultOperator(field: SdQueryField): Operator;
+/**
+ * Operators offered in the chip popover for `field`:
+ * - `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)
+ */
+export declare function sdQueryAllowedOperators(field: SdQueryField): Operator[];
+/**
+ * Whether the operator selector should be visible. Simple mode (operators omitted/false,
+ * or an array with a single entry) hides the dropdown — the chip uses one fixed operator.
+ */
+export declare function sdQueryShowOperatorSelector(field: SdQueryField): boolean;
+export {};

package/components/query-bar/src/saved-filters-menu.component.d.ts

@@ -0,0 +1,39 @@
+import { SdQuery, SdSavedFilter } from './query-bar.model';
+import * as i0 from "@angular/core";
+/**
+ * Saved-filters dropdown for `sd-query-bar`.
+ *
+ * Self-contained: persists the list to `localStorage` under
+ * `sd-query-bar:savedFilters:<key>` whenever the host passes a `[key]`. Without a
+ * key the dropdown still renders (host can still preview the menu) but the
+ * trigger stays disabled.
+ *
+ * The host owns the live `[query]`: each save snapshots it into a new entry,
+ * each apply emits the chosen filter back via `(apply)` for the host to install
+ * into its own `filters` / `logic` / `search` model.
+ *
+ * The save action (`promptSave`) is public so the parent toolbar can place its
+ * own "Lưu bộ lọc" button anywhere — typically next to the Search trigger.
+ */
+export declare class SdQuerySavedFiltersMenu {
+    #private;
+    /** Namespace key used to scope localStorage. `undefined` → menu disabled. */
+    readonly key: import("@angular/core").InputSignal<string | undefined>;
+    /** Current query the host wants to snapshot when the user clicks "Save current". */
+    readonly query: import("@angular/core").InputSignal<SdQuery<any>>;
+    /** Fired when the user picks a saved filter from the list. */
+    readonly apply: import("@angular/core").OutputEmitterRef<SdSavedFilter<any>>;
+    readonly savedFilters: import("@angular/core").WritableSignal<SdSavedFilter<any>[]>;
+    /**
+     * Prompt for a name and append a snapshot of the current query as a new
+     * saved filter. Public so the parent toolbar can wire its external "save"
+     * button to this method without re-implementing persistence.
+     */
+    promptSave(): void;
+    /** Apply a saved filter — host re-installs filters/logic/search via `(apply)`. */
+    pick(filter: SdSavedFilter): void;
+    /** Delete a saved filter by id. Stops propagation so the parent button doesn't fire `pick`. */
+    remove(id: string, ev?: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQuerySavedFiltersMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQuerySavedFiltersMenu, "sd-query-saved-filters-menu", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "apply": "apply"; }, never, never, true, never>;
+}

package/components/table/src/components/column-title/column-title.component.d.ts

@@ -3,7 +3,7 @@ import { SdTableColumn } from '../../models/table-column.model';
 import * as i0 from "@angular/core";
 export declare class ColumnTitleComponent {
     column: import("@angular/core").InputSignal<SdTableColumn>;
-    titleDef: import("@angular/core").InputSignal<SdTableTitleDefDirective | undefined>;
+    titleDef: import("@angular/core").InputSignal<SdTableTitleDefDirective<any> | undefined>;
     templateRef: import("@angular/core").Signal<import("@angular/core").TemplateRef<any> | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnTitleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnTitleComponent, "column-title", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "titleDef": { "alias": "titleDef"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;