@sdcorejs/angular 19.0.0-rc.1

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

@@ -0,0 +1,67 @@
+import { Operator } from '@sdcorejs/utils/models';
+import { BuildingChip } from '../../query-bar.model';
+import * as i0 from "@angular/core";
+type Density = 'compact' | 'comfortable';
+/**
+ * Visual block for the in-progress build chip (inline mode token builder).
+ *
+ * why: tách khỏi `<sd-query-bar>` để parent chỉ giữ state (`building()` signal +
+ * step transitions) — tất cả render logic của 2 step (operator picker / value
+ * picker) cộng với 7 nhánh field type sống tại đây.
+ *
+ * The chip has two visually distinct branches:
+ *  - **Seamless** (`string` / `number`) — the entire pill IS an `<sd-query-inline-value-chip>`
+ *    (its own border, autofocused input). The host's `.c-token-building` shell is skipped.
+ *  - **Token** (`values` / `lazy-values` / `date` / `datetime` / `boolean` / other) —
+ *    `.c-token.c-token-building` dashed pill with field label + operator (menu in
+ *    operator step, disabled badge in value step) + the per-type picker + × cancel.
+ */
+export declare class SdQueryBuildChip {
+    /** Current build state — drives every visual branch. */
+    readonly building: import("@angular/core").InputSignal<BuildingChip<any>>;
+    /** Density preset — forwarded to the seamless chip + sizes the .c-token row. */
+    readonly density: import("@angular/core").InputSignal<Density>;
+    /** Operator set offered in the operator-step menu (parent's `allowedOperatorsFor(field)`). */
+    readonly allowedOperators: import("@angular/core").InputSignal<Operator[]>;
+    /** Whether the active operator is a multi-select (`IN`/`NOT_IN`) — drives sd-select [multiple]. */
+    readonly multiple: import("@angular/core").InputSignal<boolean>;
+    /** Show the operator label on the seamless chip's pill (forwarded to inline-value-chip). */
+    readonly showOperator: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Prefix for `data-autoid` on the inner picker / seamless input.
+     * why: parent originally hard-coded `'qb-build-value'` everywhere; default preserves that
+     * for backward compatibility with existing e2e selectors.
+     */
+    readonly autoId: import("@angular/core").InputSignal<string>;
+    /** Operator chosen from the operator-step menu — parent advances to value step. */
+    readonly pickOperator: import("@angular/core").OutputEmitterRef<Operator>;
+    /**
+     * Value committed from a non-seamless picker (sd-select / sd-date / sd-date-range /
+     * sd-datetime) or a boolean toggle. Parent pushes the completed chip and clears building.
+     */
+    readonly commitValue: import("@angular/core").OutputEmitterRef<unknown>;
+    /** × button — abandon the build (parent clears `building` signal). */
+    readonly cancel: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Commit from the seamless (string / number) branch. Parent decides empty → cancel
+     * vs push complete (see `onBuildSeamlessCommit`); this just forwards the raw value.
+     */
+    readonly seamlessCommit: import("@angular/core").OutputEmitterRef<unknown>;
+    /** Fallback editor (boolean ng-template / other) — staged draft on every change. */
+    readonly draftChange: import("@angular/core").OutputEmitterRef<unknown>;
+    /** Fallback editor — Enter / click commits the staged draft. */
+    readonly draftCommit: import("@angular/core").OutputEmitterRef<void>;
+    /** Operator-step menu — auto-opened by parent right after `building` enters operator step. */
+    private readonly opMenu;
+    /** Value-step picker (the active bare control) — auto-opened by parent at value step. */
+    private readonly picker;
+    /** Open the operator menu — parent calls after rendering the operator step. */
+    openOperator(): void;
+    /** Open the value-step picker's native panel — parent calls after rendering the value step. */
+    openPicker(): void;
+    /** True when the seamless branch (string/number value step) should be rendered. */
+    readonly isSeamless: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryBuildChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryBuildChip, "sd-query-build-chip", never, { "building": { "alias": "building"; "required": true; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "allowedOperators": { "alias": "allowedOperators"; "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; }; }, { "pickOperator": "pickOperator"; "commitValue": "commitValue"; "cancel": "cancel"; "seamlessCommit": "seamlessCommit"; "draftChange": "draftChange"; "draftCommit": "draftCommit"; }, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,73 @@
+import { MatMenu } from '@angular/material/menu';
+import { Filter, Operator } from '@sdcorejs/utils/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/components/field-picker/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/components/inline-chip/inline-chip.component.d.ts

@@ -0,0 +1,87 @@
+import { Filter, Operator } from '@sdcorejs/utils/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}.
+     * why: nếu cả from + to đều có giá trị → coi như range đã chọn xong → exit edit
+     * ngay tại commit (đồng bộ với model.set của parent), không chờ focusout. Tránh
+     * race "focusout firing trước sdChange" làm viewed text render với model cũ.
+     */
+    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/components/inline-value-chip/inline-value-chip.component.d.ts

@@ -0,0 +1,71 @@
+import { Operator } from '@sdcorejs/utils/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/components/popover-chip/popover-chip.component.d.ts

@@ -0,0 +1,35 @@
+import { MatMenu } from '@angular/material/menu';
+import { Filter, Operator } from '@sdcorejs/utils/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/components/saved-filters-menu/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/query-bar/src/query-bar.component.d.ts

@@ -0,0 +1,137 @@
+import { Filter, Operator } from '@sdcorejs/utils/models';
+import { SdQueryChipPopover } from './components/chip-popover/chip-popover.component';
+import { SdQueryPopoverChip } from './components/popover-chip/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 {};