@sd-angular/core 19.0.0-beta.98 → 19.0.3

package/components/form-generic/src/components/form-builder/form-builder.component.d.ts

@@ -39,6 +39,9 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     clonedVariables: SdFormGenericVariable[];
     readonly selectedComponent: import("@angular/core").WritableSignal<SdFormGenericComponent | SdFormGenericGroup | undefined>;
     readonly isPreview: import("@angular/core").WritableSignal<boolean>;
+    readonly editingGroupId: import("@angular/core").WritableSignal<string | undefined>;
+    /** Group đang được Detail (tìm ở TOP-LEVEL theo id), undefined = đang ở canvas chính. */
+    readonly editingGroup: import("@angular/core").Signal<SdFormGenericGroup | undefined>;
     /** Signal toàn cục: TRUE khi BẤT KỲ cdkDrag nào đang active (palette, canvas, group, resize).
      *  Trigger class `.fb-shell--dragging` để ẩn hover/actions/resize toàn diện, không phụ thuộc :has(). */
     readonly isAnyDragging: import("@angular/core").WritableSignal<boolean>;
@@ -70,15 +73,17 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     };
     /** Segmented Design/Preview toggle (replaces play_circle/stop_circle). */
     setMode: (preview: boolean) => void;
-    /** Nested drop handler — when dragging a palette item or canvas item INTO a group body. */
-    dropInGroup: (event: CdkDragDrop<any[]>, group: SdFormGenericGroup) => void;
-    /** Quick-add break sau row chỉ định.
-     *  Tính component index cuối cùng của row đó trong this.components, splice break vào sau.
-     *  Không qua palette — chỉ là utility action bám theo row trên canvas.
+    /** Mở canvas thiết kế riêng cho 1 group (chỉ children của nó). Snapshot để Cancel revert. */
+    enterGroupEdit: (group: SdFormGenericGroup) => void;
+    /** OK: giữ thay đổi children, quay về canvas chính. */
+    confirmGroupEdit: () => void;
+    /** Cancel: revert children về snapshot lúc vào Detail, rồi quay về canvas chính. */
+    cancelGroupEdit: () => void;
+    /** Quick-add break sau row chỉ định (theo scope hiện tại — top-level hoặc group).
+     *  Tính component index cuối cùng của row đó trong scope, splice break vào sau.
      */
     insertBreakAfter: (row: DragDropRowItem) => void;
-    /** Remove a child component from a group's nested list. */
-    removeFromGroup: (group: SdFormGenericGroup, id: string) => void;
+    /** Xoá component theo scope hiện tại (top-level hoặc children của group đang Detail). */
     removeComponent: (id: string) => void;
     selectComponent: (item?: SdFormGenericComponent | SdFormGenericGroup) => void;
     onClickedOutside: (e: any) => void;
@@ -92,12 +97,6 @@ export declare class SdFormBuilder extends SdBaseSecureComponent {
     noReturnPredicate: () => boolean;
     changeSizeControl: (event: CdkDragMove<SdFormGenericComponent | SdFormGenericGroup>, item: SdFormGenericComponent | SdFormGenericGroup, items: (SdFormGenericComponent | SdFormGenericGroup)[], currentIndex: number) => Promise<void>;
     dragEndChangeSizeControl: (event: any) => void;
-    /** Resize a child item INSIDE a group.
-     *  Math: lấy bounding của chính item, tính (mouse.x - item.left) / colWidth = newCols.
-     *  Cách này đúng cho cả flex-wrap (item ở wrap row 2+) vì dùng item-relative,
-     *  không phải sum-of-all-preceding-cols (sai khi item wrap xuống row mới).
-     */
-    changeSizeChildInGroup: (event: CdkDragMove<SdFormGenericComponent>, child: SdFormGenericComponent, group: SdFormGenericGroup) => void;
     onChangeViewed: (component: SdFormGenericComponent) => void;
     onChangeHidden: (component: SdFormGenericComponent | SdFormGenericGroup) => void;
     onDuplicate: (component: SdFormGenericComponent | SdFormGenericGroup) => void;

package/components/form-generic/src/models/form-generic-component.model.d.ts

@@ -1,7 +1,6 @@
 import { SdTableColumn, SdTableOption } from '@sd-angular/core/components/table';
 import { SdUploadFile } from '@sd-angular/core/components/upload-file';
-import { SdColor } from '@sd-angular/core/utilities';
-import { SdPatternType } from '@sd-angular/core/utilities/models';
+import { Color, ValidationPatternType } from '@sdcorejs/utils/models';
 import { SdFormGenericSelectionStaticItem } from './form-generic-definition-selection.model';
 import { SdFormGenericExpression } from './form-generic-expression.model';
 import { SdFormGeneric } from './form-generic.model';
@@ -58,7 +57,7 @@ export interface SdFormGenericTextfield extends SdFormGenericComponentBase {
     validate?: {
         maxlength?: number;
         minlength?: number;
-        pattern?: SdPatternType | string;
+        pattern?: ValidationPatternType | string;
         patternErrorMessage?: string;
     } & SdFormGenericComponentBase['validate'];
 }
@@ -68,7 +67,7 @@ export interface SdFormGenericChipString extends SdFormGenericComponentBase {
     validate?: {
         maxlength?: number;
         minlength?: number;
-        pattern?: SdPatternType | string;
+        pattern?: ValidationPatternType | string;
         patternErrorMessage?: string;
         maxOfItems?: number;
     } & SdFormGenericComponentBase['validate'];
@@ -79,7 +78,7 @@ export interface SdFormGenericChipCalendar extends SdFormGenericComponentBase {
     validate?: {
         maxlength?: number;
         minlength?: number;
-        pattern?: SdPatternType | string;
+        pattern?: ValidationPatternType | string;
         patternErrorMessage?: string;
         maxOfItems?: number;
     } & SdFormGenericComponentBase['validate'];
@@ -150,7 +149,7 @@ export interface SdFormGenericGroup {
     components: SdFormGenericComponent[];
     properties: {
         icon: string;
-        color: SdColor;
+        color: Color;
         hidden?: boolean;
         hiddenWhenExpression?: SdFormGenericExpression;
         visibleWhenExpression?: SdFormGenericExpression;

package/components/form-generic/src/models/form-generic-expression.model.d.ts

@@ -1,4 +1,4 @@
-import { SdOperator } from '@sd-angular/core/utilities/models';
+import { Operator as SdOperator } from '@sdcorejs/utils/models';
 import { SdFormGenericComponent, SdFormGenericGroup } from './form-generic-component.model';
 export interface SdFormGenericExpression {
     key: string;

package/components/history/models/history.model.d.ts

@@ -1,9 +1,9 @@
-import { SdColor } from '@sd-angular/core/utilities';
+import { Color } from '@sdcorejs/utils/models';
 export interface SdHistoryItemType {
     title: string;
     status?: {
         title?: string;
-        color?: SdColor;
+        color?: Color;
         icon?: string;
     };
     date?: string;

package/components/index.d.ts

@@ -3,9 +3,11 @@ export * from '@sd-angular/core/components/button';
 export * from '@sd-angular/core/components/badge';
 export * from '@sd-angular/core/components/tab-router';
 export * from '@sd-angular/core/components/side-drawer';
+export * from '@sd-angular/core/components/modal-resizable';
 export * from '@sd-angular/core/components/modal';
 export * from '@sd-angular/core/components/table';
 export * from '@sd-angular/core/components/quick-action';
+export * from '@sd-angular/core/components/query-bar';
 export * from '@sd-angular/core/components/upload-file';
 export * from '@sd-angular/core/components/section';
 export * from '@sd-angular/core/components/anchor';

package/components/inform/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/inform.component';
+export * from './src/inform-action.directive';

package/components/inform/src/inform-action.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+/**
+ * Marker cho vùng action custom chiếu vào <sd-inform>.
+ * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.
+ */
+export declare class SdInformActionDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdInformActionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdInformActionDirective, "[sdInformAction]", never, {}, {}, never, never, true, never>;
+}

package/components/inform/src/inform.component.d.ts

@@ -0,0 +1,59 @@
+import { ElementRef } from '@angular/core';
+import { Color } from '@sdcorejs/utils/models';
+import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
+import { SdInformActionDirective } from './inform-action.directive';
+import * as i0 from "@angular/core";
+export declare class SdInform {
+    #private;
+    color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
+    primary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    secondary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    info: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    success: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    warning: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    error: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    title: import("@angular/core").InputSignal<string | undefined>;
+    description: import("@angular/core").InputSignal<string | undefined>;
+    icon: import("@angular/core").InputSignal<string | undefined>;
+    hideIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    closable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    actionLabel: import("@angular/core").InputSignal<string | undefined>;
+    lineClamp: import("@angular/core").InputSignal<number | undefined>;
+    autoId: import("@angular/core").InputSignal<string | undefined>;
+    sdClosed: import("@angular/core").OutputEmitterRef<Event>;
+    sdAction: import("@angular/core").OutputEmitterRef<Event>;
+    readonly dismissed: import("@angular/core").WritableSignal<boolean>;
+    readonly expanded: import("@angular/core").WritableSignal<boolean>;
+    readonly overflowing: import("@angular/core").WritableSignal<boolean>;
+    protected readonly bodyRef: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly actionSlot: import("@angular/core").Signal<SdInformActionDirective | undefined>;
+    effectiveColor: import("@angular/core").Signal<Color>;
+    colorClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    effectiveIcon: import("@angular/core").Signal<string | null>;
+    fontSetClasses: import("@angular/core").Signal<{
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    hasActionSlot: import("@angular/core").Signal<boolean>;
+    clampLines: import("@angular/core").Signal<number | null>;
+    showToggle: import("@angular/core").Signal<boolean>;
+    liveRole: import("@angular/core").Signal<"alert" | "status">;
+    constructor();
+    /** Đo tràn dòng của body; chỉ có ý nghĩa khi đang clamp. */
+    measureOverflow(): void;
+    toggleExpanded(): void;
+    onClose(event: Event): void;
+    onAction(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdInform, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdInform, "sd-inform", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "warning": { "alias": "warning"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "hideIcon": { "alias": "hideIcon"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "lineClamp": { "alias": "lineClamp"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; "sdAction": "sdAction"; }, ["actionSlot"], ["[sdInformAction]"], true, never>;
+}

package/components/modal/src/modal.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, TemplateRef } from '@angular/core';
+import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdModal {
     #private;
@@ -8,8 +9,9 @@ export declare class SdModal {
     readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     readonly autoId: import("@angular/core").Signal<string | undefined>;
     readonly closeButtonAutoId: import("@angular/core").Signal<string | undefined>;
+    readonly dataOpened: import("@angular/core").Signal<"true" | "false">;
     title: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
-    color: import("@angular/core").InputSignalWithTransform<import("@sdcorejs/utils/models").Color, import("@sdcorejs/utils/models").Color | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
     width: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     height: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     view: import("@angular/core").InputSignalWithTransform<"dialog" | "bottom-sheet" | undefined, "dialog" | "bottom-sheet" | null | undefined>;

package/components/modal-resizable/index.d.ts

@@ -0,0 +1 @@
+export * from './src/modal-resizable.component';

package/components/modal-resizable/src/modal-resizable.component.d.ts

@@ -0,0 +1,29 @@
+import { CdkPortal } from '@angular/cdk/portal';
+import * as i0 from "@angular/core";
+export declare class SdModalResizable {
+    #private;
+    readonly id: string;
+    readonly portal: import("@angular/core").Signal<CdkPortal>;
+    readonly editable: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
+    readonly width: import("@angular/core").InputSignal<string>;
+    readonly editingChanged: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly isEditing: import("@angular/core").WritableSignal<boolean>;
+    readonly isOpened: import("@angular/core").WritableSignal<boolean>;
+    readonly isHover: import("@angular/core").WritableSignal<boolean>;
+    readonly isLoading: import("@angular/core").WritableSignal<boolean>;
+    readonly isMinimum: import("@angular/core").WritableSignal<boolean>;
+    readonly isMaximum: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    open: () => void;
+    close: () => void;
+    minimize: () => void;
+    maximize: () => void;
+    toggleMaximum: () => void;
+    startLoading: () => void;
+    stopLoading: () => void;
+    toggleEditable(): void;
+    onFocus: () => void;
+    onBlur: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalResizable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdModalResizable, "sd-modal-resizable", never, { "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "editingChanged": "editingChanged"; }, never, ["[sdTitle]", "[sdBody]", "[sdFooter]"], true, never>;
+}

package/components/operator/index.d.ts

@@ -0,0 +1 @@
+export * from './src/operator.component';

package/components/operator/src/operator.component.d.ts

@@ -0,0 +1,34 @@
+import { SafeHtml } from '@angular/platform-browser';
+import { Operator } from '@sdcorejs/utils/models';
+import * as i0 from "@angular/core";
+interface OperatorItem {
+    value: Operator;
+    icon: SafeHtml;
+    display: string;
+}
+export declare class SdOperator {
+    #private;
+    static readonly FALLBACK_ICON = "<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>";
+    /** Operator hiện tại — binding hai chiều [(model)]. */
+    model: import("@angular/core").ModelSignal<Operator | undefined>;
+    /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */
+    operators: import("@angular/core").InputSignal<Operator[]>;
+    /** Vô hiệu hóa trigger (không mở được menu). */
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** data-autoId cho e2e selector. */
+    autoId: import("@angular/core").InputSignal<string | undefined>;
+    /** Allowed operators map sang { value, icon, display } theo thứ tự input. */
+    readonly items: import("@angular/core").Signal<OperatorItem[]>;
+    /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */
+    readonly currentIcon: import("@angular/core").Signal<SafeHtml>;
+    /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */
+    readonly currentLabel: import("@angular/core").Signal<string>;
+    private readonly trigger;
+    /** Open the operator menu programmatically (used by the query-bar build flow). */
+    open(): void;
+    /** Chọn operator từ menu. */
+    select(value: Operator): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdOperator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdOperator, "sd-operator", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "operators": { "alias": "operators"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; }, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export * from './src/query-bar.component';
+export * from './src/query-bar.model';

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

@@ -0,0 +1,28 @@
+import { SdQuery, SdQueryLogic, SdSavedFilter } from '../../query-bar.model';
+import * as i0 from "@angular/core";
+/**
+ * Right-pinned toolbar for `sd-query-bar`: AND/OR connector toggle, clear-all,
+ * saved-filters dropdown (with footer "Lưu bộ lọc hiện tại"), and the deferred
+ * Search trigger. Owns no business logic — just routes user intent back via
+ * outputs (`(logic)` model, `(clear)`, `(search)`, `(applyFilter)`).
+ *
+ * The "save current query" action lives INSIDE the saved-filters mat-menu
+ * footer (one zone for both apply + save). The dropdown trigger sits
+ * immediately before Search so the user sees one filter-cluster on the right.
+ */
+export declare class SdQueryActionsBar {
+    readonly showLogicToggle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly logic: import("@angular/core").ModelSignal<SdQueryLogic>;
+    readonly filtersCount: import("@angular/core").InputSignal<number>;
+    readonly showSavedFilters: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly savedFiltersKey: import("@angular/core").InputSignal<string | undefined>;
+    readonly query: import("@angular/core").InputSignal<SdQuery<any>>;
+    readonly applyFilter: import("@angular/core").OutputEmitterRef<SdSavedFilter<any>>;
+    readonly showClearAll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly clear: import("@angular/core").OutputEmitterRef<void>;
+    readonly canSearch: import("@angular/core").InputSignal<boolean>;
+    readonly search: import("@angular/core").OutputEmitterRef<void>;
+    setLogic(value: SdQueryLogic): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryActionsBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryActionsBar, "sd-query-actions-bar", never, { "showLogicToggle": { "alias": "showLogicToggle"; "required": false; "isSignal": true; }; "logic": { "alias": "logic"; "required": false; "isSignal": true; }; "filtersCount": { "alias": "filtersCount"; "required": false; "isSignal": true; }; "showSavedFilters": { "alias": "showSavedFilters"; "required": false; "isSignal": true; }; "savedFiltersKey": { "alias": "savedFiltersKey"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "canSearch": { "alias": "canSearch"; "required": false; "isSignal": true; }; }, { "logic": "logicChange"; "applyFilter": "applyFilter"; "clear": "clear"; "search": "search"; }, never, never, true, never>;
+}

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,76 @@
+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).
+ *
+ * why: `values` / `lazy-values` đã chuyển sang `<sd-select [viewed]="'inline'">` — sd-select
+ * tự quản click→edit + focusout→thoát + bare editor, nên các nhánh đó KHÔNG dùng
+ * `enterEdit` / `onFocusOut` / `#editing` nữa. Các nhánh còn lại (boolean / date / datetime /
+ * BETWEEN) vẫn dùng lifecycle thủ công cho tới khi control tương ứng có inline mode (rollout).
+ */
+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>;
+    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 (BOOLEAN branch — shows the toggle buttons; exits on toggle commit). */
+    enterEdit(): void;
+    /**
+     * Single-value commit (sd-date, sd-datetime, single sd-select).
+     * why: date/datetime/values render via `viewed='inline'` (self-managed) — the chip only
+     * forwards the value; it no longer toggles `#editing` (that's boolean-only now).
+     */
+    emitSingleCommit(v: unknown): void;
+    /** BETWEEN commit — sd-date-range (viewed='inline') emits `{from, to}`; chip just forwards it. */
+    emitRangeCommit(ev: {
+        from: unknown;
+        to: unknown;
+    } | null): void;
+    /** Multi-select live emit (sd-select inline). */
+    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 {};