@sd-angular/core 19.0.0-beta.101 → 19.0.0-beta.103

package/fesm2022/sd-angular-core-components-query-bar.mjs

@@ -1,30 +1,170 @@
-import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, computed, effect, afterNextRender, ChangeDetectionStrategy, Component, inject, Injector, ElementRef, viewChildren, model, booleanAttribute, isSignal } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { input, output, signal, computed, effect, ChangeDetectionStrategy, Component, booleanAttribute, model, viewChild, afterNextRender, isSignal, inject, Injector, ChangeDetectorRef, viewChildren } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i5 from '@angular/material/tooltip';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule, MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { isObservable, firstValueFrom } from 'rxjs';
-import { SdButton } from '@sd-angular/core/components/button';
+import { I18nService } from '@sd-angular/core/i18n';
 import { SdOperator } from '@sd-angular/core/components/operator';
 import { SdDate } from '@sd-angular/core/forms/date';
+import { SdDateRange } from '@sd-angular/core/forms/date-range';
 import { SdDatetime } from '@sd-angular/core/forms/datetime';
 import { SdInput } from '@sd-angular/core/forms/input';
 import { SdInputNumber } from '@sd-angular/core/forms/input-number';
 import { SdSelect } from '@sd-angular/core/forms/select';
-import { I18nService } from '@sd-angular/core/i18n';
+import { isObservable } from 'rxjs';
+import { SdButton } from '@sd-angular/core/components/button';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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.
+ */
+class SdQuerySavedFiltersMenu {
+    /** Namespace key used to scope localStorage. `undefined` → menu disabled. */
+    key = input(undefined);
+    /** Current query the host wants to snapshot when the user clicks "Save current". */
+    query = input({ filters: [], logic: 'AND' });
+    /** Fired when the user picks a saved filter from the list. */
+    apply = output();
+    savedFilters = signal([]);
+    #storageKey = computed(() => {
+        const k = this.key();
+        return k ? `sd-query-bar:savedFilters:${k}` : undefined;
+    });
+    // why: reload whenever the namespace key changes (e.g. host switches user/context).
+    #loadFilters = effect(() => {
+        const storage = this.#storageKey();
+        if (!storage) {
+            this.savedFilters.set([]);
+            return;
+        }
+        try {
+            const raw = localStorage.getItem(storage);
+            this.savedFilters.set(raw ? JSON.parse(raw) : []);
+        }
+        catch {
+            this.savedFilters.set([]);
+        }
+    });
+    #persist(filters) {
+        const storage = this.#storageKey();
+        if (!storage)
+            return;
+        try {
+            localStorage.setItem(storage, JSON.stringify(filters));
+        }
+        catch {
+            /* quota / disabled storage — silent */
+        }
+    }
+    /**
+     * 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() {
+        if (!this.#storageKey())
+            return;
+        const name = window.prompt('Tên bộ lọc:');
+        if (!name?.trim())
+            return;
+        const filter = {
+            id: (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : String(Date.now()),
+            name: name.trim(),
+            query: this.query(),
+        };
+        const next = [...this.savedFilters(), filter];
+        this.savedFilters.set(next);
+        this.#persist(next);
+    }
+    /** Apply a saved filter — host re-installs filters/logic/search via `(apply)`. */
+    pick(filter) {
+        this.apply.emit(filter);
+    }
+    /** Delete a saved filter by id. Stops propagation so the parent button doesn't fire `pick`. */
+    remove(id, ev) {
+        ev?.stopPropagation();
+        const next = this.savedFilters().filter(f => f.id !== id);
+        this.savedFilters.set(next);
+        this.#persist(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuerySavedFiltersMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQuerySavedFiltersMenu, isStandalone: true, selector: "sd-query-saved-filters-menu", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{display:flex;align-items:center;min-height:36px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{flex:0 0 auto;font-size:18px;width:18px;height:18px;margin-right:8px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;align-self:center;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#7a7a7a;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuerySavedFiltersMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-saved-filters-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule], template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{display:flex;align-items:center;min-height:36px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{flex:0 0 auto;font-size:18px;width:18px;height:18px;margin-right:8px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;align-self:center;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#7a7a7a;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Right-pinned toolbar for `sd-query-bar`: AND/OR connector toggle, saved-filters
+ * dropdown, clear-all, a save-filter shortcut, and the deferred Search trigger.
+ * Owns no business logic — just routes user intent back via outputs
+ * (`(logic)` model, `(clear)`, `(search)`, `(applyFilter)`).
+ *
+ * The "save filter" button forwards to `SdQuerySavedFiltersMenu.promptSave()` so
+ * the user can save the current query without first opening the saved-filters
+ * dropdown — keeps the save action adjacent to the Search trigger.
+ */
+class SdQueryActionsBar {
+    // AND/OR toggle —
+    showLogicToggle = input(false, { transform: booleanAttribute });
+    logic = model('AND');
+    filtersCount = input(0);
+    // Saved filters —
+    showSavedFilters = input(false, { transform: booleanAttribute });
+    savedFiltersKey = input(undefined);
+    query = input({ filters: [], logic: 'AND' });
+    applyFilter = output();
+    // Clear-all —
+    showClearAll = input(true, { transform: booleanAttribute });
+    clear = output();
+    // Search trigger —
+    canSearch = input(false);
+    search = output();
+    // why: viewChild để có thể gọi promptSave() từ nút "Lưu bộ lọc" đặt cạnh Search.
+    // Nút lưu nằm ngoài <mat-menu> nên không thể dùng (click) wiring nội bộ.
+    savedFiltersMenu = viewChild(SdQuerySavedFiltersMenu);
+    setLogic(value) {
+        if (this.logic() === value)
+            return;
+        this.logic.set(value);
+    }
+    /** Trigger save-current-query via the saved-filters child (no-op when menu absent / no key). */
+    promptSave() {
+        this.savedFiltersMenu()?.promptSave();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryActionsBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryActionsBar, isStandalone: true, selector: "sd-query-actions-bar", inputs: { showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showSavedFilters: { classPropertyName: "showSavedFilters", publicName: "showSavedFilters", isSignal: true, isRequired: false, transformFunction: null }, savedFiltersKey: { classPropertyName: "savedFiltersKey", publicName: "savedFiltersKey", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, canSearch: { classPropertyName: "canSearch", publicName: "canSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logic: "logicChange", applyFilter: "applyFilter", clear: "clear", search: "search" }, viewQueries: [{ propertyName: "savedFiltersMenu", first: true, predicate: SdQuerySavedFiltersMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: n\u00FAt \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" \u0111\u1EB7t s\u00E1t Search \u2014 user l\u01B0u xong r\u1ED3i t\u00ECm\r\n       lu\u00F4n trong c\u00F9ng v\u00F9ng ph\u1EA3i. Ch\u1EC9 hi\u1EC7n khi showSavedFilters=true V\u00C0 c\u00F3\r\n       savedFiltersKey (kh\u00F4ng c\u00F3 key th\u00EC promptSave l\u00E0 no-op). -->\r\n  @if (showSavedFilters() && savedFiltersKey()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-save-filter\"\r\n      matTooltip=\"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\"\r\n      (click)=\"promptSave()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdQuerySavedFiltersMenu, selector: "sd-query-saved-filters-menu", inputs: ["key", "query"], outputs: ["apply"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryActionsBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-actions-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatTooltipModule, SdQuerySavedFiltersMenu], template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: n\u00FAt \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" \u0111\u1EB7t s\u00E1t Search \u2014 user l\u01B0u xong r\u1ED3i t\u00ECm\r\n       lu\u00F4n trong c\u00F9ng v\u00F9ng ph\u1EA3i. Ch\u1EC9 hi\u1EC7n khi showSavedFilters=true V\u00C0 c\u00F3\r\n       savedFiltersKey (kh\u00F4ng c\u00F3 key th\u00EC promptSave l\u00E0 no-op). -->\r\n  @if (showSavedFilters() && savedFiltersKey()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-save-filter\"\r\n      matTooltip=\"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\"\r\n      (click)=\"promptSave()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"] }]
+        }] });
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-/** Full operator set per field kind — used when `operators: true`. */
-const SD_QUERY_OPERATORS_BY_KIND = {
+/** Full operator set per field type — used when `operators: true`. */
+const SD_QUERY_OPERATORS_BY_TYPE = {
     string: ['CONTAIN', 'EQUAL', 'NOT_EQUAL', 'START_WITH', 'END_WITH', 'NULL', 'NOT_NULL'],
     number: ['EQUAL', 'NOT_EQUAL', 'GREATER_THAN', 'GREATER_OR_EQUAL', 'LESS_THAN', 'LESS_OR_EQUAL', 'BETWEEN'],
     boolean: ['EQUAL'],
@@ -34,7 +174,7 @@ const SD_QUERY_OPERATORS_BY_KIND = {
     'lazy-values': ['IN', 'NOT_IN', 'NULL', 'NOT_NULL'],
 };
 /** Default operator when a chip is created and `field.defaultOperator` is not set. */
-const SD_QUERY_DEFAULT_OPERATOR_BY_KIND = {
+const SD_QUERY_DEFAULT_OPERATOR_BY_TYPE = {
     string: 'CONTAIN',
     number: 'EQUAL',
     boolean: 'EQUAL',
@@ -43,28 +183,8 @@ const SD_QUERY_DEFAULT_OPERATOR_BY_KIND = {
     values: 'IN',
     'lazy-values': 'IN',
 };
-/** Vietnamese operator labels. Replace via i18n in the consuming template if needed. */
-const SD_QUERY_OPERATOR_LABEL = {
-    EQUAL: 'là',
-    NOT_EQUAL: 'không là',
-    CONTAIN: 'chứa',
-    NOT_CONTAIN: 'không chứa',
-    START_WITH: 'bắt đầu bằng',
-    NOT_START_WITH: 'không bắt đầu bằng',
-    END_WITH: 'kết thúc bằng',
-    NOT_END_WITH: 'không kết thúc bằng',
-    IN: 'thuộc',
-    NOT_IN: 'không thuộc',
-    GREATER_THAN: '>',
-    LESS_THAN: '<',
-    GREATER_OR_EQUAL: '≥',
-    LESS_OR_EQUAL: '≤',
-    BETWEEN: 'trong khoảng',
-    NULL: 'trống',
-    NOT_NULL: 'có giá trị',
-};
-/** Icon fallback per field kind when `SdQueryField.icon` is not set. */
-const SD_QUERY_KIND_ICON = {
+/** Icon fallback per field type when `SdQueryField.icon` is not set. */
+const SD_QUERY_TYPE_ICON = {
     string: 'text_fields',
     number: 'tag',
     boolean: 'toggle_on',
@@ -75,10 +195,10 @@ const SD_QUERY_KIND_ICON = {
 };
 /**
  * Resolves the icon shown on chips and in the field picker.
- * Priority: `field.icon` → `SD_QUERY_KIND_ICON[field.kind]` → `'tune'`.
+ * Priority: `field.icon` → `SD_QUERY_TYPE_ICON[field.type]` → `'tune'`.
  */
 function sdQueryFieldIcon(field) {
-    return field.icon ?? SD_QUERY_KIND_ICON[field.kind] ?? 'tune';
+    return field.icon ?? SD_QUERY_TYPE_ICON[field.type] ?? 'tune';
 }
 /** Operators that carry no data — value section is hidden in chip popover. */
 const SD_QUERY_NO_DATA_OPERATORS = ['NULL', 'NOT_NULL'];
@@ -88,17 +208,17 @@ const SD_QUERY_MULTI_OPERATORS = ['IN', 'NOT_IN'];
 function sdQueryDefaultOperator(field) {
     if (field.defaultOperator)
         return field.defaultOperator;
-    return SD_QUERY_DEFAULT_OPERATOR_BY_KIND[field.kind];
+    return SD_QUERY_DEFAULT_OPERATOR_BY_TYPE[field.type];
 }
 /**
  * Operators offered in the chip popover for `field`:
- * - `operators === true` → full set for the kind
- * - `operators` is an array → that array (deduped against the kind set is the caller's job)
+ * - `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)
  */
 function sdQueryAllowedOperators(field) {
     if (field.operators === true)
-        return SD_QUERY_OPERATORS_BY_KIND[field.kind];
+        return SD_QUERY_OPERATORS_BY_TYPE[field.type];
     if (Array.isArray(field.operators) && field.operators.length > 0)
         return field.operators;
     return [sdQueryDefaultOperator(field)];
@@ -148,7 +268,7 @@ class SdQueryInlineValueChip {
     draft = signal('');
     draftFrom = signal('');
     draftTo = signal('');
-    isNumber = computed(() => this.field().kind === 'number');
+    isNumber = computed(() => this.field().type === 'number');
     isBetween = computed(() => this.operator() === 'BETWEEN');
     isNoData = computed(() => SD_QUERY_NO_DATA_OPERATORS.includes(this.operator()));
     icon = computed(() => sdQueryFieldIcon(this.field()));
@@ -231,61 +351,642 @@ class SdQueryInlineValueChip {
             this.hasError.set(true);
             return;
         }
-        this.hasError.set(false);
-        this.valueChange.emit({ from: from.value, to: to.value });
+        this.hasError.set(false);
+        this.valueChange.emit({ from: from.value, to: to.value });
+    }
+    /** Esc — revert drafts to the committed value and blur without emitting. */
+    revertAndBlur(input) {
+        const v = this.value();
+        if (this.isBetween()) {
+            const r = (v ?? {});
+            this.draftFrom.set(this.#format(r.from));
+            this.draftTo.set(this.#format(r.to));
+        }
+        else {
+            this.draft.set(this.#format(v));
+        }
+        this.hasError.set(false);
+        this.focused.set(false);
+        input.blur();
+    }
+    onRemove(ev) {
+        ev.stopPropagation();
+        this.remove.emit();
+    }
+    /** Format a stored value for display — number → vi-VN grouped digits. */
+    #format(v) {
+        if (v == null || v === '')
+            return '';
+        if (this.isNumber()) {
+            const n = typeof v === 'number' ? v : Number(String(v).replace(/\./g, ''));
+            return Number.isFinite(n) ? n.toLocaleString('vi-VN') : String(v);
+        }
+        return String(v);
+    }
+    /** Parse a draft back to a stored value. Number kind rejects non-numeric input. */
+    #parse(s) {
+        const t = (s ?? '').trim();
+        if (t === '')
+            return { ok: true, value: this.isNumber() ? null : '' };
+        if (this.isNumber()) {
+            // vi-VN groups thousands with '.', so strip dots + spaces, then require a plain
+            // (optionally negative) integer — anything else (letters, stray symbols) is an error.
+            const cleaned = t.replace(/[.\s]/g, '');
+            if (!/^-?\d+$/.test(cleaned))
+                return { ok: false, value: t };
+            const n = Number(cleaned);
+            return Number.isFinite(n) ? { ok: true, value: n } : { ok: false, value: t };
+        }
+        return { ok: true, value: t };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineValueChip, isStandalone: true, selector: "sd-query-inline-value-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", remove: "remove" }, viewQueries: [{ propertyName: "firstInput", first: true, predicate: ["firstInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state].\r\n-->\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"state()\"\r\n  [class.c-seamless--compact]=\"density() === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"density() === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !isNoData()) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[operator()]\" [model]=\"operator()\" [disabled]=\"true\" />\r\n    } @else if (!isNoData()) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-inline-value-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, MatIconModule, SdOperator], template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state].\r\n-->\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"state()\"\r\n  [class.c-seamless--compact]=\"density() === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"density() === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !isNoData()) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[operator()]\" [model]=\"operator()\" [disabled]=\"true\" />\r\n    } @else if (!isNoData()) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"] }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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.
+ */
+class SdQueryBuildChip {
+    /** Current build state — drives every visual branch. */
+    building = input.required();
+    /** Density preset — forwarded to the seamless chip + sizes the .c-token row. */
+    density = input('compact');
+    /** Operator set offered in the operator-step menu (parent's `allowedOperatorsFor(field)`). */
+    allowedOperators = input([]);
+    /** Whether the active operator is a multi-select (`IN`/`NOT_IN`) — drives sd-select [multiple]. */
+    multiple = input(false);
+    /** Show the operator label on the seamless chip's pill (forwarded to inline-value-chip). */
+    showOperator = input(false);
+    /**
+     * 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.
+     */
+    autoId = input('qb-build-value');
+    // ---------------------------------------------------------------------------
+    // Outputs
+    // ---------------------------------------------------------------------------
+    /** Operator chosen from the operator-step menu — parent advances to value step. */
+    pickOperator = output();
+    /**
+     * 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.
+     */
+    commitValue = output();
+    /** × button — abandon the build (parent clears `building` signal). */
+    cancel = output();
+    /**
+     * Commit from the seamless (string / number) branch. Parent decides empty → cancel
+     * vs push complete (see `onBuildSeamlessCommit`); this just forwards the raw value.
+     */
+    seamlessCommit = output();
+    /** Fallback editor (boolean ng-template / other) — staged draft on every change. */
+    draftChange = output();
+    /** Fallback editor — Enter / click commits the staged draft. */
+    draftCommit = output();
+    // ---------------------------------------------------------------------------
+    // Internal refs — used by parent via public open*() methods
+    // ---------------------------------------------------------------------------
+    /** Operator-step menu — auto-opened by parent right after `building` enters operator step. */
+    opMenu = viewChild('buildOperator');
+    /** Value-step picker (the active bare control) — auto-opened by parent at value step. */
+    picker = viewChild('bPicker');
+    /** Open the operator menu — parent calls after rendering the operator step. */
+    openOperator() {
+        this.opMenu()?.open();
+    }
+    /** Open the value-step picker's native panel — parent calls after rendering the value step. */
+    openPicker() {
+        this.picker()?.open?.();
+    }
+    // ---------------------------------------------------------------------------
+    // Template helpers
+    // ---------------------------------------------------------------------------
+    /** True when the seamless branch (string/number value step) should be rendered. */
+    isSeamless = computed(() => {
+        const b = this.building();
+        if (b.step !== 'value')
+            return false;
+        const t = b.field.type;
+        return t === 'string' || t === 'number';
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_b.value === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_b.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_b.value === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_b.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-build-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        SdOperator,
+                        SdDate,
+                        SdDateRange,
+                        SdDatetime,
+                        SdInput,
+                        SdInputNumber,
+                        SdSelect,
+                        SdQueryInlineValueChip,
+                    ], template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_b.value === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_b.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_b.value === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_b.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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
+ */
+class SdQueryChipPopover {
+    // ---------------------------------------------------------------------------
+    // Inputs
+    // ---------------------------------------------------------------------------
+    /** Resolved field of the currently editing chip — parent passes from `fieldByKey()`. */
+    field = input(undefined);
+    /** The chip's current Filter — used by `seed()` for initial staging values. */
+    filter = input(undefined);
+    /** Optional chip index — embedded in the composed autoIds. */
+    chipIndex = input(null);
+    /** Prefix for `data-autoId` on inner controls. */
+    autoIdBase = input('qb');
+    /** MatMenu for the field switcher — parent passes its `<sd-query-field-picker>` menu. */
+    switchPickerMenu = input(undefined);
+    // ---------------------------------------------------------------------------
+    // Outputs
+    // ---------------------------------------------------------------------------
+    /** Emitted when mat-menu closes — parent splices `next` into filters[idx]. */
+    commit = output();
+    /** Emitted when nested field-switcher picks a new field — parent calls changeFilterField. */
+    swapField = output();
+    // ---------------------------------------------------------------------------
+    // Staging signals — uncommitted edits, committed on menu close.
+    // ---------------------------------------------------------------------------
+    /** Staged operator. */
+    editingOperator = signal('EQUAL');
+    /** Staged value (shape depends on field type + operator). */
+    editingValue = signal(null);
+    /** Resolved option list for values / lazy-values. */
+    editingOptions = signal([]);
+    /** Loading flag for async option fetch. */
+    editingOptionsLoading = signal(false);
+    // ---------------------------------------------------------------------------
+    // Derived state
+    // ---------------------------------------------------------------------------
+    allowedOperators = computed(() => {
+        const f = this.field();
+        return f ? sdQueryAllowedOperators(f) : [];
+    });
+    showOperatorSelector = computed(() => {
+        const f = this.field();
+        return f ? sdQueryShowOperatorSelector(f) : false;
+    });
+    /** Whether the staged operator is multi-select (IN/NOT_IN). */
+    multiple(op) {
+        return SD_QUERY_MULTI_OPERATORS.includes(op ?? this.editingOperator());
+    }
+    /** Whether the staged operator carries no data (NULL/NOT_NULL). */
+    isNoDataOperator(op) {
+        return SD_QUERY_NO_DATA_OPERATORS.includes(op);
+    }
+    /** Compose an autoId for an inner control (`<base>-chip<idx>-<role>`). */
+    chipAutoId(role) {
+        const base = this.autoIdBase() ?? 'qb';
+        const idx = this.chipIndex();
+        return `${base}-chip${idx ?? 'x'}-${role}`;
+    }
+    iconFor = sdQueryFieldIcon;
+    // ---------------------------------------------------------------------------
+    // mat-menu instance — parent reads via `cp.menu()`
+    // ---------------------------------------------------------------------------
+    menu = viewChild('menu');
+    // ---------------------------------------------------------------------------
+    // Seed — parent calls before opening the popover so staging signals are
+    // primed from the current filter + the option list is loaded.
+    // ---------------------------------------------------------------------------
+    /** Reseed staging from a new filter/field pair — call before opening the menu. */
+    seed(filter, field) {
+        if (!filter || !field) {
+            this.editingOperator.set('EQUAL');
+            this.editingValue.set(null);
+            this.editingOptions.set([]);
+            this.editingOptionsLoading.set(false);
+            return;
+        }
+        this.editingOperator.set(filter.operator);
+        this.editingValue.set(filter.data ?? null);
+        if (field.type === 'values') {
+            this.#loadValuesOptions(field);
+        }
+        else if (field.type === 'lazy-values') {
+            this.#loadLazyOptions(field);
+        }
+        else {
+            this.editingOptions.set([]);
+            this.editingOptionsLoading.set(false);
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Operator + value mutators
+    // ---------------------------------------------------------------------------
+    /** Called on operator change in the popover header — reshapes value when family changes. */
+    onEditingOperatorChange(next) {
+        const prev = this.editingOperator();
+        this.editingOperator.set(next);
+        if (SD_QUERY_NO_DATA_OPERATORS.includes(next)) {
+            this.editingValue.set(null);
+            return;
+        }
+        if (next === 'BETWEEN') {
+            const v = this.editingValue();
+            if (v && typeof v === 'object' && 'from' in v)
+                return;
+            this.editingValue.set({ from: null, to: null });
+            return;
+        }
+        const goingToMulti = SD_QUERY_MULTI_OPERATORS.includes(next);
+        const wasMulti = SD_QUERY_MULTI_OPERATORS.includes(prev);
+        if (goingToMulti && !wasMulti) {
+            const v = this.editingValue();
+            this.editingValue.set(v == null ? [] : [v]);
+        }
+        else if (!goingToMulti && wasMulti) {
+            const v = this.editingValue();
+            this.editingValue.set(Array.isArray(v) && v.length > 0 ? v[0] : null);
+        }
+    }
+    /** Single-value input change. */
+    onEditingValueInput(value) {
+        this.editingValue.set(value);
+    }
+    /** BETWEEN range — mutate only `.from`. */
+    onEditingRangeFrom(value) {
+        const v = this.editingValue() ?? {};
+        this.editingValue.set({ ...v, from: value });
+    }
+    /** BETWEEN range — mutate only `.to`. */
+    onEditingRangeTo(value) {
+        const v = this.editingValue() ?? {};
+        this.editingValue.set({ ...v, to: value });
+    }
+    /** Toggle a value in the staged multi-select array. */
+    toggleEditingMultiValue(value) {
+        const arr = Array.isArray(this.editingValue()) ? [...this.editingValue()] : [];
+        const idx = arr.indexOf(value);
+        if (idx >= 0)
+            arr.splice(idx, 1);
+        else
+            arr.push(value);
+        this.editingValue.set(arr);
+    }
+    isEditingMultiSelected(value) {
+        const v = this.editingValue();
+        return Array.isArray(v) && v.includes(value);
+    }
+    // ---------------------------------------------------------------------------
+    // Menu lifecycle — close = commit
+    // ---------------------------------------------------------------------------
+    /**
+     * mat-menu's (closed) handler — compose the next Filter from staging signals and
+     * emit (commit). Parent splices into its filters[] and nulls editingIndex.
+     */
+    onMenuClosed() {
+        const f = this.filter();
+        if (!f)
+            return;
+        const next = {
+            field: f.field,
+            operator: this.editingOperator(),
+            data: this.editingValue(),
+        };
+        this.commit.emit(next);
+    }
+    // ---------------------------------------------------------------------------
+    // Async option loaders — same logic as the parent's private methods.
+    // ---------------------------------------------------------------------------
+    #loadValuesOptions(field) {
+        const opt = field.option;
+        const items = opt?.items;
+        if (Array.isArray(items)) {
+            this.editingOptions.set(items);
+            this.editingOptionsLoading.set(false);
+            return;
+        }
+        if (isSignal(items)) {
+            this.editingOptions.set(items());
+            this.editingOptionsLoading.set(false);
+            return;
+        }
+        if (typeof items === 'function') {
+            this.editingOptionsLoading.set(true);
+            Promise.resolve(items())
+                .then((arr) => this.editingOptions.set(arr ?? []))
+                .finally(() => this.editingOptionsLoading.set(false));
+        }
+    }
+    #loadLazyOptions(field, search = '') {
+        const opt = field.option;
+        if (!opt?.search)
+            return;
+        this.editingOptionsLoading.set(true);
+        const result = opt.search({ type: 'SEARCH', searchText: search });
+        if (isObservable(result)) {
+            result.subscribe({
+                next: (arr) => this.editingOptions.set(arr ?? []),
+                complete: () => this.editingOptionsLoading.set(false),
+                error: () => this.editingOptionsLoading.set(false),
+            });
+        }
+        else {
+            Promise.resolve(result)
+                .then((arr) => this.editingOptions.set(arr ?? []))
+                .finally(() => this.editingOptionsLoading.set(false));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryChipPopover, isStandalone: true, selector: "sd-query-chip-popover", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, chipIndex: { classPropertyName: "chipIndex", publicName: "chipIndex", isSignal: true, isRequired: false, transformFunction: null }, autoIdBase: { classPropertyName: "autoIdBase", publicName: "autoIdBase", isSignal: true, isRequired: false, transformFunction: null }, switchPickerMenu: { classPropertyName: "switchPickerMenu", publicName: "switchPickerMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", swapField: "swapField" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Chip popover \u2014 operator + value editor for the popover-mode chip.\r\n  Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\r\n  Body branches on operator + field.type \u2014 8 paths preserved exactly.\r\n-->\r\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\r\n  <ng-template matMenuContent>\r\n    @let _field = field();\r\n    @let _op = editingOperator();\r\n    @let _val = editingValue();\r\n    @let _options = editingOptions();\r\n    @let _loading = editingOptionsLoading();\r\n    @let _switchMenu = switchPickerMenu();\r\n\r\n    @if (_field) {\r\n      <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n        <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\r\n             the field-picker MatMenu via [switchPickerMenu]. -->\r\n        @if (_switchMenu) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"_switchMenu\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _field.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n        } @else {\r\n          <span class=\"c-pop-header-field\">{{ _field.label }}</span>\r\n        }\r\n        <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\r\n        <sd-operator\r\n          class=\"c-pop-header-operator\"\r\n          [autoId]=\"chipAutoId('operator')\"\r\n          [operators]=\"allowedOperators()\"\r\n          [model]=\"_op\"\r\n          [disabled]=\"!showOperatorSelector()\"\r\n          (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n      </div>\r\n\r\n      <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n        @if (!isNoDataOperator(_op)) {\r\n          @if (_op === 'BETWEEN') {\r\n            @if (_field.type === 'date') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-date>\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-date>\r\n              </div>\r\n            } @else if (_field.type === 'datetime') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-datetime>\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-datetime>\r\n              </div>\r\n            } @else {\r\n              <div class=\"c-pop-between\">\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-input-number>\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-input-number>\r\n              </div>\r\n            }\r\n          } @else if (_field.type === 'boolean') {\r\n            <div class=\"c-pop-boolean c-bool-toggle\">\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-true')\"\r\n                [type]=\"_val === true ? 'fill' : 'outline'\"\r\n                color=\"success\"\r\n                [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\r\n                (click)=\"onEditingValueInput(true)\">\r\n              </sd-button>\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-false')\"\r\n                [type]=\"_val === false ? 'fill' : 'outline'\"\r\n                color=\"warning\"\r\n                [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\r\n                (click)=\"onEditingValueInput(false)\">\r\n              </sd-button>\r\n            </div>\r\n          } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n            @let _opt = $any(_field).option;\r\n            <sd-select size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [items]=\"_options\"\r\n              [valueField]=\"_opt.valueField\"\r\n              [displayField]=\"_opt.displayField\"\r\n              [multiple]=\"multiple()\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-select>\r\n            @if (_loading) {\r\n              <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n            }\r\n          } @else if (_field.type === 'date') {\r\n            <sd-date size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-date>\r\n          } @else if (_field.type === 'datetime') {\r\n            <sd-datetime size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-datetime>\r\n          } @else if (_field.type === 'number') {\r\n            <sd-input-number size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input-number>\r\n          } @else {\r\n            <sd-input size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [":host{display:contents}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-chip-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatTooltipModule,
+                        SdButton,
+                        SdOperator,
+                        SdSelect,
+                        SdInput,
+                        SdInputNumber,
+                        SdDate,
+                        SdDatetime,
+                    ], template: "<!--\r\n  Chip popover \u2014 operator + value editor for the popover-mode chip.\r\n  Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\r\n  Body branches on operator + field.type \u2014 8 paths preserved exactly.\r\n-->\r\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\r\n  <ng-template matMenuContent>\r\n    @let _field = field();\r\n    @let _op = editingOperator();\r\n    @let _val = editingValue();\r\n    @let _options = editingOptions();\r\n    @let _loading = editingOptionsLoading();\r\n    @let _switchMenu = switchPickerMenu();\r\n\r\n    @if (_field) {\r\n      <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n        <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\r\n             the field-picker MatMenu via [switchPickerMenu]. -->\r\n        @if (_switchMenu) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"_switchMenu\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _field.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n        } @else {\r\n          <span class=\"c-pop-header-field\">{{ _field.label }}</span>\r\n        }\r\n        <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\r\n        <sd-operator\r\n          class=\"c-pop-header-operator\"\r\n          [autoId]=\"chipAutoId('operator')\"\r\n          [operators]=\"allowedOperators()\"\r\n          [model]=\"_op\"\r\n          [disabled]=\"!showOperatorSelector()\"\r\n          (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n      </div>\r\n\r\n      <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n        @if (!isNoDataOperator(_op)) {\r\n          @if (_op === 'BETWEEN') {\r\n            @if (_field.type === 'date') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-date>\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-date>\r\n              </div>\r\n            } @else if (_field.type === 'datetime') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-datetime>\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-datetime>\r\n              </div>\r\n            } @else {\r\n              <div class=\"c-pop-between\">\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-input-number>\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-input-number>\r\n              </div>\r\n            }\r\n          } @else if (_field.type === 'boolean') {\r\n            <div class=\"c-pop-boolean c-bool-toggle\">\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-true')\"\r\n                [type]=\"_val === true ? 'fill' : 'outline'\"\r\n                color=\"success\"\r\n                [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\r\n                (click)=\"onEditingValueInput(true)\">\r\n              </sd-button>\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-false')\"\r\n                [type]=\"_val === false ? 'fill' : 'outline'\"\r\n                color=\"warning\"\r\n                [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\r\n                (click)=\"onEditingValueInput(false)\">\r\n              </sd-button>\r\n            </div>\r\n          } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n            @let _opt = $any(_field).option;\r\n            <sd-select size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [items]=\"_options\"\r\n              [valueField]=\"_opt.valueField\"\r\n              [displayField]=\"_opt.displayField\"\r\n              [multiple]=\"multiple()\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-select>\r\n            @if (_loading) {\r\n              <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n            }\r\n          } @else if (_field.type === 'date') {\r\n            <sd-date size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-date>\r\n          } @else if (_field.type === 'datetime') {\r\n            <sd-datetime size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-datetime>\r\n          } @else if (_field.type === 'number') {\r\n            <sd-input-number size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input-number>\r\n          } @else {\r\n            <sd-input size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [":host{display:contents}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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)`.
+ */
+class SdQueryFieldPicker {
+    /** Field list shown in the menu (caller-supplied; rendered in input order). */
+    fields = input([]);
+    /** Single key disabled with a trailing check — used in the chip-popover "Đổi field" flow. */
+    currentKey = input(undefined);
+    /** Set of keys already in use — used in the "Add filter" flow to grey out duplicates. */
+    usedKeys = input(new Set());
+    /** Emits when the user picks an enabled field. */
+    pick = output();
+    /** MatMenu instance — parent binds `[matMenuTriggerFor]="picker.menu()"`. */
+    menu = viewChild.required(MatMenu);
+    iconFor = sdQueryFieldIcon;
+    /** Per-field disabled state — current key OR used key OR field's own disabled flag. */
+    disabledMap = computed(() => {
+        const set = new Set(this.usedKeys());
+        const cur = this.currentKey();
+        if (cur)
+            set.add(cur);
+        return set;
+    });
+    isDisabled(field) {
+        return field.disabled === true || this.disabledMap().has(field.key);
+    }
+    /** "Current" check icon — only when the field matches `currentKey`. */
+    isCurrent(field) {
+        return field.key === this.currentKey();
+    }
+    /** "Used" check icon — when the field is in `usedKeys` (not the same as current). */
+    isUsed(field) {
+        return this.usedKeys().has(field.key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryFieldPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryFieldPicker, isStandalone: true, selector: "sd-query-field-picker", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, currentKey: { classPropertyName: "currentKey", publicName: "currentKey", isSignal: true, isRequired: false, transformFunction: null }, usedKeys: { classPropertyName: "usedKeys", publicName: "usedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pick: "pick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #m=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n  @for (field of fields(); track $index) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      [disabled]=\"isDisabled(field)\"\r\n      (click)=\"pick.emit(field)\">\r\n      <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n        {{ iconFor(field) }}\r\n      </mat-icon>\r\n      <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n      <span class=\"c-field-item-type\">{{ field.type }}</span>\r\n      @if (isCurrent(field) || isUsed(field)) {\r\n        <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n      }\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-field-empty\">Ch\u01B0a c\u00F3 field n\u00E0o \u0111\u01B0\u1EE3c c\u1EA5u h\u00ECnh.</div>\r\n  }\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel.c-field-picker-menu{min-width:200px;max-width:260px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item{min-height:36px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1;min-width:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-icon{font-size:16px;width:16px;height:16px;margin-right:8px;color:#5f6368;flex-shrink:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-label{flex:1 1 auto;min-width:0;font-size:13px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-type{flex-shrink:0;margin-left:auto;padding-left:12px;font-family:Roboto Mono,monospace;font-size:11px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-check{flex-shrink:0;font-size:14px;width:14px;height:14px;margin-left:6px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryFieldPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-field-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule], template: "<mat-menu #m=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n  @for (field of fields(); track $index) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      [disabled]=\"isDisabled(field)\"\r\n      (click)=\"pick.emit(field)\">\r\n      <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n        {{ iconFor(field) }}\r\n      </mat-icon>\r\n      <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n      <span class=\"c-field-item-type\">{{ field.type }}</span>\r\n      @if (isCurrent(field) || isUsed(field)) {\r\n        <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n      }\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-field-empty\">Ch\u01B0a c\u00F3 field n\u00E0o \u0111\u01B0\u1EE3c c\u1EA5u h\u00ECnh.</div>\r\n  }\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel.c-field-picker-menu{min-width:200px;max-width:260px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item{min-height:36px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1;min-width:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-icon{font-size:16px;width:16px;height:16px;margin-right:8px;color:#5f6368;flex-shrink:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-label{flex:1 1 auto;min-width:0;font-size:13px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-type{flex-shrink:0;margin-left:auto;padding-left:12px;font-family:Roboto Mono,monospace;font-size:11px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-check{flex-shrink:0;font-size:14px;width:14px;height:14px;margin-left:6px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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).
+ */
+class SdQueryInlineChip {
+    #injector = inject(Injector);
+    #cdr = inject(ChangeDetectorRef);
+    // ---------------------------------------------------------------------------
+    // Inputs
+    // ---------------------------------------------------------------------------
+    /** Resolved field — parent passes it (no lookup needed inside). */
+    field = input.required();
+    /** The chip's Filter — used for `data` + `operator`. */
+    filter = input.required();
+    /** Density preset — sizes the `.c-token` row. */
+    density = input('compact');
+    /** Whether the active operator is a multi-select (IN/NOT_IN). */
+    multiple = input(false);
+    /** Show `<sd-operator>` (disabled badge) on the chip; otherwise show `':'` separator. */
+    showOperator = input(false);
+    /** autoId prefix for inner controls (parent passes `inlineAutoId(i, 'value')`). */
+    autoId = input('');
+    /** Pre-computed display text — parent owns `chipValueText(filter)` so we don't recompute. */
+    valueText = input('');
+    /** No-data operator (NULL/NOT_NULL) — hide entire value slot when true. */
+    isNoData = input(false);
+    // ---------------------------------------------------------------------------
+    // Outputs
+    // ---------------------------------------------------------------------------
+    /** Single-value commit — parent runs `updateFilter(i, { data })`. */
+    commit = output();
+    /** BETWEEN commit (date/datetime) — parent runs `setFilterRange(i, ev)`. */
+    commitRange = output();
+    /** Live edit during multi-select — parent runs `editValueFn(i)(v)`. */
+    liveChange = output();
+    /** × removal. */
+    remove = output();
+    // ---------------------------------------------------------------------------
+    // Internal state
+    // ---------------------------------------------------------------------------
+    /** Edit toggle — viewed (false) ↔ editable (true). */
+    #editing = signal(false);
+    editing = this.#editing.asReadonly();
+    /** Active picker reference — auto-opened right after entering edit. */
+    chipPicker = viewChild('chipPicker');
+    // ---------------------------------------------------------------------------
+    // Template helpers
+    // ---------------------------------------------------------------------------
+    iconName = computed(() => sdQueryFieldIcon(this.field()));
+    /** Operator code — convenience accessor for template. */
+    operator = computed(() => this.filter().operator);
+    /** Data payload — convenience accessor for template. */
+    data = computed(() => this.filter().data);
+    // ---------------------------------------------------------------------------
+    // Edit lifecycle
+    // ---------------------------------------------------------------------------
+    /** Enter edit mode + auto-open the picker on next render. */
+    enterEdit() {
+        if (this.#editing())
+            return;
+        this.#editing.set(true);
+        afterNextRender(() => this.chipPicker()?.open?.(), { injector: this.#injector });
+    }
+    /**
+     * 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) {
+        const wrapper = ev.currentTarget;
+        const next = ev.relatedTarget;
+        if (!wrapper)
+            return;
+        if (next && wrapper.contains(next))
+            return;
+        if (next instanceof Element && next.closest('.cdk-overlay-container'))
+            return;
+        if (this.#editing()) {
+            this.#editing.set(false);
+            this.#cdr.markForCheck();
+            // why: sd-date-range / sd-datetime đôi khi emit sdChange NGAY SAU focusout —
+            // viewed flip xảy ra trước khi model mới về tới [model] input → viewed text
+            // format dùng giá trị cũ. Schedule thêm 1 CD pass để re-render với model mới
+            // (user-visible bug: "click ra lần đầu chưa update, click vào rồi ra lần 2 mới đúng").
+            queueMicrotask(() => this.#cdr.markForCheck());
+        }
     }
-    /** Esc — revert drafts to the committed value and blur without emitting. */
-    revertAndBlur(input) {
-        const v = this.value();
-        if (this.isBetween()) {
-            const r = (v ?? {});
-            this.draftFrom.set(this.#format(r.from));
-            this.draftTo.set(this.#format(r.to));
-        }
-        else {
-            this.draft.set(this.#format(v));
-        }
-        this.hasError.set(false);
-        this.focused.set(false);
-        input.blur();
+    /** Test-only shim — direct call avoids dispatching real FocusEvent in JSDOM. */
+    onFocusOutForTest(ev) {
+        this.onFocusOut(ev);
     }
-    onRemove(ev) {
-        ev.stopPropagation();
-        this.remove.emit();
+    // ---------------------------------------------------------------------------
+    // Commit handlers — single emit per category
+    // ---------------------------------------------------------------------------
+    /** Single-value commit (sd-date, sd-datetime, single sd-select). */
+    emitSingleCommit(v) {
+        this.commit.emit(v);
+        this.#editing.set(false);
     }
-    /** Format a stored value for display — number → vi-VN grouped digits. */
-    #format(v) {
-        if (v == null || v === '')
-            return '';
-        if (this.isNumber()) {
-            const n = typeof v === 'number' ? v : Number(String(v).replace(/\./g, ''));
-            return Number.isFinite(n) ? n.toLocaleString('vi-VN') : String(v);
+    /**
+     * 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) {
+        this.commitRange.emit(ev ?? null);
+        if (ev && ev.from != null && ev.to != null) {
+            this.#editing.set(false);
+            this.#cdr.markForCheck();
         }
-        return String(v);
     }
-    /** Parse a draft back to a stored value. Number kind rejects non-numeric input. */
-    #parse(s) {
-        const t = (s ?? '').trim();
-        if (t === '')
-            return { ok: true, value: this.isNumber() ? null : '' };
-        if (this.isNumber()) {
-            // vi-VN groups thousands with '.', so strip dots + spaces, then require a plain
-            // (optionally negative) integer — anything else (letters, stray symbols) is an error.
-            const cleaned = t.replace(/[.\s]/g, '');
-            if (!/^-?\d+$/.test(cleaned))
-                return { ok: false, value: t };
-            const n = Number(cleaned);
-            return Number.isFinite(n) ? { ok: true, value: n } : { ok: false, value: t };
-        }
-        return { ok: true, value: t };
+    /** Multi-select live emit — does NOT exit edit (focusout handles exit). */
+    emitLive(v) {
+        this.liveChange.emit(v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineValueChip, isStandalone: true, selector: "sd-query-inline-value-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", remove: "remove" }, viewQueries: [{ propertyName: "firstInput", first: true, predicate: ["firstInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state].\r\n-->\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"state()\"\r\n  [class.c-seamless--compact]=\"density() === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"density() === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !isNoData()) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[operator()]\" [model]=\"operator()\" [disabled]=\"true\" />\r\n    } @else if (!isNoData()) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /** Boolean toggle commit — exits edit. */
+    emitBoolean(v) {
+        this.commit.emit(v);
+        this.#editing.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineChip, isStandalone: true, selector: "sd-query-inline-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, isNoData: { classPropertyName: "isNoData", publicName: "isNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", commitRange: "commitRange", liveChange: "liveChange", remove: "remove" }, viewQueries: [{ propertyName: "chipPicker", first: true, predicate: ["chipPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_f).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_f).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineChip, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-inline-value-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, MatIconModule, SdOperator], template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state].\r\n-->\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"state()\"\r\n  [class.c-seamless--compact]=\"density() === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"density() === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !isNoData()) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[operator()]\" [model]=\"operator()\" [disabled]=\"true\" />\r\n    } @else if (!isNoData()) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'sd-query-inline-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        SdOperator,
+                        SdDate,
+                        SdDateRange,
+                        SdDatetime,
+                        SdSelect,
+                    ], template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_f).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_f).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * 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).
+ */
+class SdQueryPopoverChip {
+    /** Resolved field (from the bar's `fieldByKey()` map). `undefined` → render raw key. */
+    field = input(undefined);
+    /** The chip's filter — used to read `field` / `operator` / `data` for display text. */
+    filter = input.required();
+    /** "Active" = chip has a real value or is no-data op. Drives layout + colour. */
+    active = input.required();
+    /** Operator visible on the chip face (else hidden, ":" separator). */
+    showOperator = input(false);
+    /** Rendered value text for the value slot. */
+    valueText = input('');
+    /** Chip popover mat-menu instance supplied by the parent. */
+    menu = input.required();
+    /** Fired when the chip popover opens (parent seeds its editing state). */
+    open = output();
+    /** Fired when the user clicks the × removal icon. */
+    remove = output();
+    iconFor = sdQueryFieldIcon;
+    filterField() { return this.filter().field; }
+    filterOperator() { return this.filter().operator; }
+    // why: parent's add/swap flow auto-opens the chip popover after render, and removeFilter
+    // closes the open one — expose open/close so the parent doesn't need a ViewChild on the
+    // internal MatMenuTrigger directive.
+    trigger = viewChild('chipTrigger', { read: MatMenuTrigger });
+    openMenu() { this.trigger()?.openMenu(); }
+    closeMenu() { this.trigger()?.closeMenu(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryPopoverChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryPopoverChip, isStandalone: true, selector: "sd-query-popover-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open", remove: "remove" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["chipTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\r\n<div\r\n  #chipTrigger=\"matMenuTrigger\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  class=\"c-chip\"\r\n  [class.c-chip-active]=\"active()\"\r\n  [class.c-chip-inactive]=\"!active()\"\r\n  [attr.data-field]=\"filterField()\"\r\n  [matTooltip]=\"field()?.label || filterField()\"\r\n  [matMenuTriggerFor]=\"menu()\"\r\n  (menuOpened)=\"open.emit()\"\r\n  (keydown.enter)=\"chipTrigger.openMenu()\"\r\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n    {{ field() ? iconFor(field()!) : 'tune' }}\r\n  </mat-icon>\r\n  <span class=\"c-chip-label\">{{ field()?.label || filterField() }}</span>\r\n\r\n  @if (showOperator() && active()) {\r\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[filterOperator()]\" [model]=\"filterOperator()\" [disabled]=\"true\" />\r\n  } @else if (active()) {\r\n    <span class=\"c-chip-sep\">:</span>\r\n  }\r\n\r\n  @if (active()) {\r\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\r\n  }\r\n\r\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n  @if (active()) {\r\n    <span\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      class=\"c-chip-remove\"\r\n      aria-label=\"Remove filter\"\r\n      (click)=\"$event.stopPropagation(); remove.emit()\"\r\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryPopoverChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-query-popover-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule, SdOperator], template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\r\n<div\r\n  #chipTrigger=\"matMenuTrigger\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  class=\"c-chip\"\r\n  [class.c-chip-active]=\"active()\"\r\n  [class.c-chip-inactive]=\"!active()\"\r\n  [attr.data-field]=\"filterField()\"\r\n  [matTooltip]=\"field()?.label || filterField()\"\r\n  [matMenuTriggerFor]=\"menu()\"\r\n  (menuOpened)=\"open.emit()\"\r\n  (keydown.enter)=\"chipTrigger.openMenu()\"\r\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n    {{ field() ? iconFor(field()!) : 'tune' }}\r\n  </mat-icon>\r\n  <span class=\"c-chip-label\">{{ field()?.label || filterField() }}</span>\r\n\r\n  @if (showOperator() && active()) {\r\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[filterOperator()]\" [model]=\"filterOperator()\" [disabled]=\"true\" />\r\n  } @else if (active()) {\r\n    <span class=\"c-chip-sep\">:</span>\r\n  }\r\n\r\n  @if (active()) {\r\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\r\n  }\r\n\r\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n  @if (active()) {\r\n    <span\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      class=\"c-chip-remove\"\r\n      aria-label=\"Remove filter\"\r\n      (click)=\"$event.stopPropagation(); remove.emit()\"\r\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"] }]
+        }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /** Shared empty array — stable reference so template bindings don't churn change detection. */
@@ -293,32 +994,24 @@ const EMPTY_ARRAY = [];
 class SdQueryBar {
     #i18n = inject(I18nService);
     #injector = inject(Injector);
-    #host = inject(ElementRef);
-    /** Focus the inline text/number value control once the build chip is in the value step. */
-    #focusBuildValue() {
-        afterNextRender(() => {
-            const el = this.#host.nativeElement.querySelector('.c-token-building input, .c-token-building textarea');
-            el?.focus();
-        }, { injector: this.#injector });
-    }
-    /** All chip menu triggers (one per chip button). Used to auto-open the popover after addFilter. */
-    chipTriggers = viewChildren('chipTrigger');
-    /** The build chip's operator dropdown — auto-opened when entering the operator step. */
-    buildOperator = viewChild('buildOperator');
-    /** The build chip's value picker (bare sd-select / sd-date / sd-datetime) — auto-opened at the value step. */
-    buildPicker = viewChild('bPicker');
+    /** All popover-mode chips in order — used to auto-open after addFilter / close before removeFilter. */
+    popoverChips = viewChildren(SdQueryPopoverChip);
+    /** The extracted in-progress chip — owns operator menu + value picker view refs. */
+    buildChip = viewChild(SdQueryBuildChip);
+    /** The extracted chip popover — owns operator+value staging + commit-on-close. */
+    chipPopover = viewChild(SdQueryChipPopover);
     /**
      * Land the user in the value editor after the build chip reaches the value step:
-     * popover-kind controls auto-open their native picker; text/number just take focus.
+     * popover-kind controls auto-open their native picker via the child; string/number
+     * branches use the seamless chip whose `[autofocus]` handles focus internally.
      */
     #enterValueStep(field) {
-        const k = field.kind;
+        const k = field.type;
         if (k === 'values' || k === 'lazy-values' || k === 'date' || k === 'datetime') {
-            afterNextRender(() => this.buildPicker()?.open(), { injector: this.#injector });
-        }
-        else {
-            this.#focusBuildValue();
+            afterNextRender(() => this.buildChip()?.openPicker(), { injector: this.#injector });
         }
+        // why: string/number branch — <sd-query-inline-value-chip [autofocus]> tự focus,
+        // không cần parent gọi thêm.
     }
     // ---------------------------------------------------------------------------
     // Inputs — all accept null|undefined at boundary, transform to canonical shape
@@ -361,8 +1054,26 @@ class SdQueryBar {
     });
     /** Show free-text search input on the left. */
     showSearch = input(false, { transform: booleanAttribute });
-    /** Show saved-views dropdown on the right. */
-    showSavedViews = input(false, { transform: booleanAttribute });
+    /** Show saved-filters dropdown on the right. Requires `[savedFiltersKey]` to actually persist. */
+    showSavedFilters = input(false, { transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    savedFiltersKey = input(undefined);
+    /**
+     * Snapshot of the current query — fed into `<sd-query-saved-filters-menu [query]>` so
+     * saving a filter captures live filters/logic/search.
+     */
+    currentQuery = computed(() => this.#buildQuery());
+    /** Receive an applied filter from the saved-filters menu — re-install bar state + trigger apply. */
+    onApplyFilter(saved) {
+        this.filters.set(saved.query.filters ?? []);
+        this.logic.set(saved.query.logic ?? 'AND');
+        if (saved.query.search !== undefined)
+            this.search.set(saved.query.search);
+        this.triggerApply();
+    }
     /** Show AND/OR segmented toggle (renders only when there are ≥2 filters). */
     showLogicToggle = input(false, { transform: booleanAttribute });
     /** Show "Clear all" button when at least one filter is active. */
@@ -400,19 +1111,12 @@ class SdQueryBar {
     /** Search button is actionable only when there is something to apply. */
     canSearch = computed(() => this.filters().length > 0 || this.search().trim().length > 0);
     // ---------------------------------------------------------------------------
-    // Chip popover state — staging area (operator + value) for the open chip,
-    // committed on "Áp dụng", discarded on close-without-apply.
+    // Chip popover state — only `editingIndex` lives on the parent; the
+    // `<sd-query-chip-popover>` child owns ALL staging (operator + value + options).
     // ---------------------------------------------------------------------------
-    /** Index of the chip whose popover is open. Reset to null after Apply / close. */
+    /** Index of the chip whose popover is open. Reset to null after commit / close. */
     editingIndex = signal(null);
-    /** Staged operator (uncommitted). */
-    editingOperator = signal('EQUAL');
-    /** Staged value (uncommitted) — type varies by kind. */
-    editingValue = signal(null);
-    /** Resolved option list for the currently editing values / lazy-values field. */
-    editingOptions = signal([]);
-    /** Loading state for async option fetch. */
-    editingOptionsLoading = signal(false);
+    /** Resolved field of the chip whose popover is currently open (or null). */
     editingField = computed(() => {
         const idx = this.editingIndex();
         if (idx === null)
@@ -422,22 +1126,13 @@ class SdQueryBar {
             return null;
         return this.fieldByKey()[f.field] ?? null;
     });
-    editingAllowedOperators = computed(() => {
-        const field = this.editingField();
-        return field ? sdQueryAllowedOperators(field) : [];
-    });
-    /** Show the operator dropdown only when the field exposes >1 operator (else simple mode). */
-    editingShowOperatorSelector = computed(() => {
-        const field = this.editingField();
-        return field ? sdQueryShowOperatorSelector(field) : false;
-    });
-    /** Multi-select is derived from the operator (IN / NOT_IN), not a field flag. */
-    editingIsMulti = computed(() => SD_QUERY_MULTI_OPERATORS.includes(this.editingOperator()));
-    /** Compose a deterministic autoId for an inner control inside a chip's editor. */
-    chipAutoId(role) {
-        const idx = this.editingIndex();
-        const base = this.autoIdInput() ?? 'qb';
-        return `${base}-chip${idx ?? 'x'}-${role}`;
+    /**
+     * 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) {
+        return SD_QUERY_MULTI_OPERATORS.includes(op);
     }
     // ---------------------------------------------------------------------------
     // Template helpers
@@ -475,51 +1170,12 @@ class SdQueryBar {
     isNoDataOperator(op) {
         return SD_QUERY_NO_DATA_OPERATORS.includes(op);
     }
-    isMultiOperator(op) {
-        return SD_QUERY_MULTI_OPERATORS.includes(op);
-    }
-    /**
-     * Stable `SdSearch` per lazy-values field key so `sd-select` owns search + chip-display
-     * lookups. why: memoized via a computed map so `[items]="lazyItemsFor(field)"` returns the
-     * SAME reference each change-detection pass — a fresh function each time would make
-     * sd-select wipe its option cache and refetch on every CD. Recomputes only when `fields` changes.
-     * SEARCH -> field.option.search; VALUE -> field.option.views.
-     */
-    #lazySearchByKey = computed(() => {
-        const map = {};
-        for (const f of this.fields()) {
-            if (f.kind !== 'lazy-values')
-                continue;
-            const opt = f.option;
-            map[f.key] = async (req) => {
-                if (req.type === 'VALUE') {
-                    const values = Array.isArray(req.value) ? req.value : req.value == null ? [] : [req.value];
-                    return opt?.views ? await opt.views(values) : [];
-                }
-                const result = opt?.search?.({ search: req.searchText ?? '' });
-                if (!result)
-                    return [];
-                return isObservable(result) ? await firstValueFrom(result) : await result;
-            };
-        }
-        return map;
-    });
-    lazyItemsFor(field) {
-        return this.#lazySearchByKey()[field.key];
-    }
     // ---------------------------------------------------------------------------
     // Inline mode — per-field helpers + live mutators (no popover / no Apply gate)
     // ---------------------------------------------------------------------------
     /** The single in-progress inline chip (not yet in `filters`). */
     #building = signal(null);
     building = this.#building.asReadonly();
-    /** Index of the completed chip whose value is being inline-edited (inline mode). */
-    #editingValueIndex = signal(null);
-    editingValueIndex = this.#editingValueIndex.asReadonly();
-    /** True when chip `i` is in inline value-edit mode. */
-    isEditingValue(i) {
-        return this.#editingValueIndex() === i;
-    }
     allowedOperatorsFor(field) {
         return sdQueryAllowedOperators(field);
     }
@@ -547,16 +1203,20 @@ class SdQueryBar {
     }
     /** Entry point from the field picker — start building a chip for `field`. */
     beginBuild(field) {
-        this.#editingValueIndex.set(null);
         const allowed = sdQueryAllowedOperators(field);
-        if (allowed.length > 1) {
+        const def = sdQueryDefaultOperator(field);
+        // why: date/datetime mặc định là BETWEEN — skip operator step để user vào value
+        // step ngay (95% case dùng BETWEEN cho date/datetime; cắt 1 click cho luồng phổ
+        // biến nhất). Field type khác giữ flow chọn operator để user thấy đầy đủ lựa chọn.
+        const skipOperatorStep = (field.type === 'date' || field.type === 'datetime') && allowed.includes(def);
+        if (allowed.length > 1 && !skipOperatorStep) {
             this.#building.set({ field, step: 'operator' });
             // why: auto-open the operator menu so the user can pick the condition without a
             // second click — the viewChild only resolves after the building chip renders.
-            afterNextRender(() => this.buildOperator()?.open(), { injector: this.#injector });
+            afterNextRender(() => this.buildChip()?.openOperator(), { injector: this.#injector });
             return;
         }
-        const operator = allowed[0] ?? sdQueryDefaultOperator(field);
+        const operator = skipOperatorStep ? def : (allowed[0] ?? def);
         if (SD_QUERY_NO_DATA_OPERATORS.includes(operator)) {
             this.#pushComplete(field, operator, null);
             this.#building.set(null);
@@ -606,113 +1266,14 @@ class SdQueryBar {
     cancelBuild() {
         this.#building.set(null);
     }
-    /** Latest value typed/selected during inline value edit (chip already in `filters`). */
-    #editDraft = signal(null);
-    /** Live-commit an inline edit for a completed chip (bare control path). */
-    editValueFn(i) {
-        return (v) => this.updateFilter(i, { data: v });
-    }
-    /** Single-value commit from a completed chip in edit mode — write data + exit edit. */
-    onChipSingleCommit(i, v) {
-        this.updateFilter(i, { data: v });
-        this.#editingValueIndex.set(null);
-    }
-    /**
-     * Multi-value chips exit edit when focus actually leaves the wrapper subtree.
-     * why: focusout fires on every internal blur (option click, search input, …) — only
-     * exit when the new focus target is NOT a descendant of the chip's value wrapper.
-     */
-    onChipValueFocusOut(i, ev) {
-        const wrapper = ev.currentTarget;
-        const next = ev.relatedTarget;
-        // why: nếu event không có wrapper (ví dụ event được tạo thủ công, chưa dispatch),
-        // không thể xác định focus có thoát khỏi subtree hay không → giữ nguyên edit mode.
-        if (!wrapper)
-            return;
-        if (next && wrapper.contains(next))
-            return;
-        if (this.#editingValueIndex() === i)
-            this.#editingValueIndex.set(null);
-    }
-    /**
-     * Cập nhật đầu `from` của BETWEEN cho 1 chip đã commit (inline edit).
-     * why: dual picker BETWEEN trên chip hoàn tất cần ghi từng đầu vào filter mà không reset đầu kia.
-     */
-    setFilterRangeFrom(i, v) {
-        const cur = this.filters()[i];
-        if (!cur)
-            return;
-        const curData = (cur.data && typeof cur.data === 'object') ? cur.data : {};
-        this.updateFilter(i, { data: { ...curData, from: v } });
-    }
-    /**
-     * Cập nhật đầu `to` của BETWEEN cho 1 chip đã commit (inline edit).
-     */
-    setFilterRangeTo(i, v) {
-        const cur = this.filters()[i];
-        if (!cur)
-            return;
-        const curData = (cur.data && typeof cur.data === 'object') ? cur.data : {};
-        this.updateFilter(i, { data: { ...curData, to: v } });
-    }
-    noop = () => undefined;
-    setEditDraftFn() {
-        return (v) => this.#editDraft.set(v);
-    }
-    commitEditDraftFn(i) {
-        return () => this.commitEditValue(i, this.#editDraft());
-    }
-    setBuildDraftFn() {
-        return (v) => {
-            const b = this.#building();
-            if (b)
-                this.#building.set({ ...b, value: v });
-        };
-    }
-    /** Update the `from` end of the build chip's BETWEEN range without committing. */
-    setBuildRangeFrom(v) {
-        const b = this.#building();
-        if (!b)
-            return;
-        const cur = (b.value && typeof b.value === 'object') ? b.value : {};
-        this.#building.set({ ...b, value: { ...cur, from: v } });
-    }
     /**
-     * Update the `to` end of the build chip's BETWEEN range. Once both ends are set, commit
-     * the chip so the user does not need an extra blur / apply press.
+     * 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ỏ).
      */
-    setBuildRangeTo(v) {
-        const b = this.#building();
-        if (!b)
-            return;
-        const cur = (b.value && typeof b.value === 'object') ? b.value : {};
-        const next = { ...cur, to: v };
-        this.#building.set({ ...b, value: next });
-        if (next.from != null && next.to != null)
-            this.commitBuildValue(next);
-    }
-    commitBuildDraftFn() {
-        return () => {
-            const b = this.#building();
-            if (b)
-                this.commitBuildValue(b.value);
-        };
-    }
-    /** Start inline value edit on a completed chip (operator + field stay locked). */
-    beginEditValue(i) {
-        if (i < 0 || i >= this.filters().length)
-            return;
-        this.#building.set(null);
-        const filter = this.filters()[i];
-        // why: seed the draft with the current value so Enter can finalize the existing text
-        // if the user presses Enter without retyping.
-        this.#editDraft.set(filter.data ?? null);
-        this.#editingValueIndex.set(i);
-    }
-    /** Commit an inline value edit — change only `data`, no emit. */
-    commitEditValue(i, value) {
-        this.updateFilter(i, { data: value });
-        this.#editingValueIndex.set(i === this.#editingValueIndex() ? null : this.#editingValueIndex());
+    setFilterRange(i, ev) {
+        this.updateFilter(i, { data: ev ?? { from: null, to: null } });
     }
     // ---------------------------------------------------------------------------
     // Mutations
@@ -725,12 +1286,7 @@ class SdQueryBar {
         this.filters.set([...this.filters(), next]);
         // why: user added a field — open its edit popover immediately so they can pick
         // operator + value in one continuous flow (no second click required).
-        afterNextRender(() => {
-            const triggers = this.chipTriggers();
-            const trigger = triggers[newIndex];
-            if (trigger)
-                trigger.openMenu();
-        }, { injector: this.#injector });
+        afterNextRender(() => this.popoverChips()[newIndex]?.openMenu(), { injector: this.#injector });
     }
     /** Swap the field of an existing chip — reset operator + value to the new field's defaults. */
     changeFilterField(index, field) {
@@ -744,11 +1300,7 @@ class SdQueryBar {
         // why: clicking an item in the nested fieldSwitchPicker closes both the picker AND
         // the parent chipPopover. Re-open the chip's popover on the next render so user can
         // continue picking operator + value without a second manual click.
-        afterNextRender(() => {
-            const trigger = this.chipTriggers()[index];
-            if (trigger)
-                trigger.openMenu();
-        }, { injector: this.#injector });
+        afterNextRender(() => this.popoverChips()[index]?.openMenu(), { injector: this.#injector });
     }
     updateFilter(index, patch) {
         const list = [...this.filters()];
@@ -763,11 +1315,9 @@ class SdQueryBar {
             return;
         // close the open popover (if it's this chip's) before the chip + its trigger vanish
         if (this.editingIndex() === index) {
-            this.chipTriggers()[index]?.closeMenu();
+            this.popoverChips()[index]?.closeMenu();
             this.editingIndex.set(null);
         }
-        if (this.#editingValueIndex() === index)
-            this.#editingValueIndex.set(null);
         list.splice(index, 1);
         this.filters.set(list);
     }
@@ -795,97 +1345,25 @@ class SdQueryBar {
         this.apply.emit(q);
     }
     // ---------------------------------------------------------------------------
-    // Chip popover — stage edits, commit on close
+    // Chip popover — delegate staging to `<sd-query-chip-popover>` child.
     // ---------------------------------------------------------------------------
-    /** Called when a chip is clicked — copy current operator + value into the staging signals. */
+    /**
+     * 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) {
         const filter = this.filters()[index];
         if (!filter || !('field' in filter))
             return;
         this.editingIndex.set(index);
-        this.editingOperator.set(filter.operator);
-        this.editingValue.set(filter.data ?? null);
         const field = this.fieldByKey()[filter.field];
-        if (field?.kind === 'values') {
-            this.#loadValuesOptions(field);
-        }
-        else if (field?.kind === 'lazy-values') {
-            this.#loadLazyOptions(field);
-        }
-        else {
-            this.editingOptions.set([]);
-            this.editingOptionsLoading.set(false);
-        }
-    }
-    /** Called on operator <select> change in the popover. */
-    onEditingOperatorChange(next) {
-        const prev = this.editingOperator();
-        this.editingOperator.set(next);
-        // Reset / reshape staged value when operator family changes
-        if (SD_QUERY_NO_DATA_OPERATORS.includes(next)) {
-            this.editingValue.set(null);
-            return;
-        }
-        if (next === 'BETWEEN') {
-            // Convert single → range
-            const v = this.editingValue();
-            if (v && typeof v === 'object' && 'from' in v)
-                return;
-            this.editingValue.set({ from: null, to: null });
-            return;
-        }
-        const goingToMulti = SD_QUERY_MULTI_OPERATORS.includes(next);
-        const wasMulti = SD_QUERY_MULTI_OPERATORS.includes(prev);
-        if (goingToMulti && !wasMulti) {
-            const v = this.editingValue();
-            this.editingValue.set(v == null ? [] : [v]);
-        }
-        else if (!goingToMulti && wasMulti) {
-            const v = this.editingValue();
-            this.editingValue.set(Array.isArray(v) && v.length > 0 ? v[0] : null);
-        }
-    }
-    /** Two-way bind for primitive value control. */
-    onEditingValueInput(value) {
-        this.editingValue.set(value);
-    }
-    /** BETWEEN range mutators. */
-    onEditingRangeFrom(value) {
-        const v = this.editingValue() ?? {};
-        this.editingValue.set({ ...v, from: value });
-    }
-    onEditingRangeTo(value) {
-        const v = this.editingValue() ?? {};
-        this.editingValue.set({ ...v, to: value });
+        this.chipPopover()?.seed(filter, field);
     }
-    /** Toggle a value inside the staged multi-select array. */
-    toggleEditingMultiValue(value) {
-        const arr = Array.isArray(this.editingValue()) ? [...this.editingValue()] : [];
-        const idx = arr.indexOf(value);
-        if (idx >= 0)
-            arr.splice(idx, 1);
-        else
-            arr.push(value);
-        this.editingValue.set(arr);
-    }
-    isEditingMultiSelected(value) {
-        const v = this.editingValue();
-        return Array.isArray(v) && v.includes(value);
-    }
-    /**
-     * Commit the staged operator + value into the chip when the popover closes.
-     * why: nút Áp dụng đã bị bỏ — đóng popover (out-focus) tự động áp dụng phần
-     * chỉnh sửa đang staging. Không emit: nút Search toàn cục vẫn là trigger query duy nhất.
-     */
-    commitChipEditOnClose() {
+    /** Receive `(commit)` from the child popover — splice into filters, null the index. */
+    onChipPopoverCommit(next) {
         const idx = this.editingIndex();
         if (idx === null)
             return;
-        const next = {
-            field: this.filters()[idx].field,
-            operator: this.editingOperator(),
-            data: this.editingValue(),
-        };
         const list = [...this.filters()];
         list[idx] = next;
         this.filters.set(list);
@@ -906,18 +1384,19 @@ class SdQueryBar {
         const field = this.fieldByKey()[fieldKey];
         if (!field)
             return String(raw);
-        if (field.kind === 'boolean') {
+        if (field.type === 'boolean') {
             const trueLabel = field.trueLabel ?? 'Có';
             const falseLabel = field.falseLabel ?? 'Không';
             return raw ? trueLabel : falseLabel;
         }
-        if (field.kind === 'values' || field.kind === 'lazy-values') {
+        if (field.type === 'values' || field.type === 'lazy-values') {
             const opt = field.option;
-            const items = this.#resolveSyncItems(opt?.items) ?? this.editingOptions();
+            const cachedOptions = this.chipPopover()?.editingOptions() ?? [];
+            const items = this.#resolveSyncItems(opt?.items) ?? cachedOptions;
             const match = items.find((i) => i?.[opt.valueField] === raw);
             if (match)
                 return String(match[opt.displayField]);
-            const cached = this.editingOptions().find((i) => i?.[opt.valueField] === raw);
+            const cached = cachedOptions.find((i) => i?.[opt.valueField] === raw);
             return cached ? String(cached[opt.displayField]) : String(raw);
         }
         return String(raw);
@@ -929,47 +1408,8 @@ class SdQueryBar {
             return items();
         return null;
     }
-    #loadValuesOptions(field) {
-        const opt = field.option;
-        const items = opt?.items;
-        if (Array.isArray(items)) {
-            this.editingOptions.set(items);
-            this.editingOptionsLoading.set(false);
-            return;
-        }
-        if (isSignal(items)) {
-            this.editingOptions.set(items());
-            this.editingOptionsLoading.set(false);
-            return;
-        }
-        if (typeof items === 'function') {
-            this.editingOptionsLoading.set(true);
-            Promise.resolve(items())
-                .then((arr) => this.editingOptions.set(arr ?? []))
-                .finally(() => this.editingOptionsLoading.set(false));
-        }
-    }
-    #loadLazyOptions(field, search = '') {
-        const opt = field.option;
-        if (!opt?.search)
-            return;
-        this.editingOptionsLoading.set(true);
-        const result = opt.search({ search });
-        if (isObservable(result)) {
-            result.subscribe({
-                next: (arr) => this.editingOptions.set(arr ?? []),
-                complete: () => this.editingOptionsLoading.set(false),
-                error: () => this.editingOptionsLoading.set(false),
-            });
-        }
-        else {
-            Promise.resolve(result)
-                .then((arr) => this.editingOptions.set(arr ?? []))
-                .finally(() => this.editingOptionsLoading.set(false));
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBar, isStandalone: true, selector: "sd-query-bar", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSavedViews: { classPropertyName: "showSavedViews", publicName: "showSavedViews", isSignal: true, isRequired: false, transformFunction: null }, showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, showOperatorOnChip: { classPropertyName: "showOperatorOnChip", publicName: "showOperatorOnChip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", logic: "logicChange", search: "searchChange", queryChange: "queryChange", apply: "apply" }, viewQueries: [{ propertyName: "chipTriggers", predicate: ["chipTrigger"], descendants: true, isSignal: true }, { propertyName: "buildOperator", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "buildPicker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _fields = fields();\r\n@let _logic = logic();\r\n@let _density = density();\r\n@let _showOr = showOrConnector();\r\n@let _used = usedFieldKeys();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_density === 'compact'\"\r\n  [class.c-density-comfortable]=\"_density === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (showSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Field switcher (used by chipPopover header) \u2014 declared first so chipPopover's\r\n       nested ng-template can resolve the template ref. -->\r\n  <mat-menu #fieldSwitchPicker=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n    <ng-template matMenuContent let-currentIndex=\"currentIndex\">\r\n      @let _currentFilter = filters()[currentIndex];\r\n      @let _currentKey = $any(_currentFilter)?.field;\r\n      @for (field of _fields; track $index) {\r\n        @let _isCurrent = field.key === _currentKey;\r\n        <button\r\n          type=\"button\"\r\n          mat-menu-item\r\n          [disabled]=\"_isCurrent || field.disabled\"\r\n          (click)=\"changeFilterField(currentIndex, field)\">\r\n          <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n            {{ iconFor(field) }}\r\n          </mat-icon>\r\n          <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n          <span class=\"c-field-item-kind\">{{ field.kind }}</span>\r\n          @if (_isCurrent) {\r\n            <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n\r\n  <!-- Chip popover \u2014 declared BEFORE chips so @for can resolve the forward template ref -->\r\n  <mat-menu #chipPopover=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\">\r\n    <ng-template matMenuContent let-index=\"index\">\r\n      @let _editField = editingField();\r\n      @let _editOp = editingOperator();\r\n      @let _editVal = editingValue();\r\n      @let _options = editingOptions();\r\n      @let _loading = editingOptionsLoading();\r\n\r\n      @if (_editField) {\r\n        <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_editField) }}</mat-icon>\r\n          <!-- Click field name \u2192 open nested picker to swap field on this chip. -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"fieldSwitchPicker\"\r\n            [matMenuTriggerData]=\"{ currentIndex: index }\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _editField.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n          <!-- why: operator moved into the header (right-aligned) to compact the popover.\r\n               Always shown \u2014 when the field has \u22641 operator it renders disabled so the\r\n               user still sees which operator the filter uses. -->\r\n          <sd-operator\r\n            class=\"c-pop-header-operator\"\r\n            [autoId]=\"chipAutoId('operator')\"\r\n            [operators]=\"editingAllowedOperators()\"\r\n            [model]=\"_editOp\"\r\n            [disabled]=\"!editingShowOperatorSelector()\"\r\n            (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n        </div>\r\n\r\n        <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n          <!-- Value \u2014 per-kind sd-* control, skipped for NULL / NOT_NULL. Placeholder\r\n               makes the field self-explanatory now that section labels are gone. -->\r\n          @if (!isNoDataOperator(_editOp)) {\r\n            @if (_editOp === 'BETWEEN') {\r\n                @if (_editField.kind === 'date') {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-date size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-date>\r\n                    <sd-date size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-date>\r\n                  </div>\r\n                } @else if (_editField.kind === 'datetime') {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-datetime size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-datetime>\r\n                    <sd-datetime size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-datetime>\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-input-number size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-input-number>\r\n                    <sd-input-number size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-input-number>\r\n                  </div>\r\n                }\r\n              } @else if (_editField.kind === 'boolean') {\r\n                <div class=\"c-pop-boolean\">\r\n                  <sd-button\r\n                    [autoId]=\"chipAutoId('value-true')\"\r\n                    [type]=\"_editVal === true ? 'fill' : 'outline'\"\r\n                    color=\"primary\"\r\n                    [title]=\"$any(_editField).trueLabel || 'C\u00F3'\"\r\n                    (click)=\"onEditingValueInput(true)\">\r\n                  </sd-button>\r\n                  <sd-button\r\n                    [autoId]=\"chipAutoId('value-false')\"\r\n                    [type]=\"_editVal === false ? 'fill' : 'outline'\"\r\n                    color=\"primary\"\r\n                    [title]=\"$any(_editField).falseLabel || 'Kh\u00F4ng'\"\r\n                    (click)=\"onEditingValueInput(false)\">\r\n                  </sd-button>\r\n                </div>\r\n              } @else if (_editField.kind === 'values' || _editField.kind === 'lazy-values') {\r\n                @let _opt = $any(_editField).option;\r\n                <sd-select size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [items]=\"_options\"\r\n                  [valueField]=\"_opt.valueField\"\r\n                  [displayField]=\"_opt.displayField\"\r\n                  [multiple]=\"editingIsMulti()\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-select>\r\n                @if (_loading) {\r\n                  <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n                }\r\n              } @else if (_editField.kind === 'date') {\r\n                <sd-date size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-date>\r\n              } @else if (_editField.kind === 'datetime') {\r\n                <sd-datetime size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-datetime>\r\n              } @else if (_editField.kind === 'number') {\r\n                <sd-input-number size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-input-number>\r\n              } @else {\r\n                <sd-input size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-input>\r\n              }\r\n          }\r\n        </div>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n\r\n  @if (mode() === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Reusable value editor. ctx: field, data, isMulti, change (stash fn), enter (finalize fn), autoId\r\n         why: text/number commit on Enter, so the typed value is stashed via `change` then finalized\r\n         by `enter`; selection-style controls (select/date/boolean) stash + finalize in one action. -->\r\n    <ng-template #valueEditor let-field=\"field\" let-data=\"data\" let-isMulti=\"isMulti\" let-change=\"change\" let-enter=\"enter\" let-autoId=\"autoId\">\r\n      @if (field.kind === 'boolean') {\r\n        <sd-button [autoId]=\"autoId + '-true'\" [type]=\"data === true ? 'fill' : 'outline'\" color=\"primary\" [title]=\"$any(field).trueLabel || 'C\u00F3'\" (click)=\"change(true); enter()\"></sd-button>\r\n        <sd-button [autoId]=\"autoId + '-false'\" [type]=\"data === false ? 'fill' : 'outline'\" color=\"primary\" [title]=\"$any(field).falseLabel || 'Kh\u00F4ng'\" (click)=\"change(false); enter()\"></sd-button>\r\n      } @else if (field.kind === 'values') {\r\n        @let _opt = $any(field).option;\r\n        <sd-select bare size=\"sm\" minWidthPanel=\"220px\" [autoId]=\"autoId\" [items]=\"$any(_opt.items)\" [valueField]=\"_opt.valueField\" [displayField]=\"_opt.displayField\" [multiple]=\"isMulti\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-select>\r\n      } @else if (field.kind === 'lazy-values') {\r\n        @let _lopt = $any(field).option;\r\n        <sd-select bare size=\"sm\" minWidthPanel=\"220px\" [autoId]=\"autoId\" [items]=\"lazyItemsFor(field)\" [valueField]=\"_lopt.valueField\" [displayField]=\"_lopt.displayField\" [multiple]=\"isMulti\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-select>\r\n      } @else if (field.kind === 'date') {\r\n        <sd-date bare size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-date>\r\n      } @else if (field.kind === 'datetime') {\r\n        <sd-datetime bare size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-datetime>\r\n      } @else if (field.kind === 'number') {\r\n        <sd-input-number size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event)\" (keyupEnter)=\"enter()\"></sd-input-number>\r\n      } @else {\r\n        <sd-input size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event)\" (keyupEnter)=\"enter()\"></sd-input>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.kind === 'string' || _field.kind === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_density\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <div class=\"c-token\" [class.c-token-editing]=\"isEditingValue(i)\">\r\n            <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n            <span class=\"c-token-field\">{{ _field.label }}</span>\r\n            @if (!isNoDataOperator(_op) && showOperatorOnChip()) {\r\n              <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n            } @else if (!isNoDataOperator(_op)) {\r\n              <span class=\"c-token-sep\">:</span>\r\n            }\r\n            @if (!isNoDataOperator(_op)) {\r\n              @if (_field.kind === 'boolean') {\r\n                @if (isEditingValue(i)) {\r\n                  <span class=\"c-token-value c-token-value-edit\">\r\n                    <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _field, data: _data, isMulti: isMultiOperator(_op), change: setEditDraftFn(), enter: commitEditDraftFn(i), autoId: inlineAutoId(i, 'value') }\"></ng-container>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"c-token-value\" (click)=\"beginEditValue(i)\">{{ chipValueText(filter) }}</button>\r\n                }\r\n              } @else if ((_field.kind === 'date' || _field.kind === 'datetime') && _op === 'BETWEEN') {\r\n                <!-- why: chip BETWEEN date/datetime \u0111\u00E3 commit -> render 2 picker inline cho ph\u00E9p s\u1EEDa t\u1EEBng \u0111\u1EA7u -->\r\n                <span class=\"c-token-value c-token-value-edit\">\r\n                  @if (_field.kind === 'date') {\r\n                    <sd-date bare size=\"sm\" placeholder=\"T\u1EEB\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-from')\"\r\n                      [model]=\"$any(_data)?.from\"\r\n                      (sdChange)=\"setFilterRangeFrom(i, $any($event))\"></sd-date>\r\n                    <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                    <sd-date bare size=\"sm\" placeholder=\"\u0110\u1EBFn\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-to')\"\r\n                      [model]=\"$any(_data)?.to\"\r\n                      (sdChange)=\"setFilterRangeTo(i, $any($event))\"></sd-date>\r\n                  } @else {\r\n                    <sd-datetime bare size=\"sm\" placeholder=\"T\u1EEB\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-from')\"\r\n                      [model]=\"$any(_data)?.from\"\r\n                      (sdChange)=\"setFilterRangeFrom(i, $any($event))\"></sd-datetime>\r\n                    <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                    <sd-datetime bare size=\"sm\" placeholder=\"\u0110\u1EBFn\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-to')\"\r\n                      [model]=\"$any(_data)?.to\"\r\n                      (sdChange)=\"setFilterRangeTo(i, $any($event))\"></sd-datetime>\r\n                  }\r\n                </span>\r\n              } @else if (_field.kind === 'values' || _field.kind === 'lazy-values') {\r\n                @let _opt = $any(_field).option;\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-select bare size=\"sm\" minWidthPanel=\"220px\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [items]=\"_field.kind === 'lazy-values' ? lazyItemsFor(_field) : $any(_opt.items)\"\r\n                    [valueField]=\"_opt.valueField\"\r\n                    [displayField]=\"_opt.displayField\"\r\n                    [multiple]=\"isMultiOperator(_op)\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"isMultiOperator(_op) ? editValueFn(i)($event) : onChipSingleCommit(i, $event)\"></sd-select>\r\n                </span>\r\n              } @else if (_field.kind === 'date') {\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-date bare size=\"sm\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"onChipSingleCommit(i, $any($event))\"></sd-date>\r\n                </span>\r\n              } @else if (_field.kind === 'datetime') {\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-datetime bare size=\"sm\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"onChipSingleCommit(i, $any($event))\"></sd-datetime>\r\n                </span>\r\n              } @else {\r\n                <!-- Fallback (number / other) \u2014 keep the shared editor outlet path. -->\r\n                <span class=\"c-token-value c-token-value-edit\">\r\n                  <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _field, data: _data, isMulti: isMultiOperator(_op), change: editValueFn(i), enter: noop, autoId: inlineAutoId(i, 'value') }\"></ng-container>\r\n                </span>\r\n              }\r\n            }\r\n            <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"removeFilter(i)\">\r\n              <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) -->\r\n    @if (building(); as _b) {\r\n      @if (_b.step === 'value' && (_b.field.kind === 'string' || _b.field.kind === 'number')) {\r\n        <!-- Seamless build chip \u2014 type straight in, no rectangle. Enter/blur commits. -->\r\n        <sd-query-inline-value-chip\r\n          [field]=\"_b.field\"\r\n          [operator]=\"$any(_b.operator)\"\r\n          [value]=\"_b.value ?? null\"\r\n          [density]=\"_density\"\r\n          [showOperator]=\"showOperatorOnChip()\"\r\n          [autoId]=\"'qb-build-value'\"\r\n          [autofocus]=\"true\"\r\n          (valueChange)=\"onBuildSeamlessCommit($event)\"\r\n          (remove)=\"cancelBuild()\" />\r\n      } @else {\r\n      <div class=\"c-token c-token-building\">\r\n        <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n        @if (_b.step === 'operator') {\r\n          <sd-operator #buildOperator class=\"c-token-op\" [operators]=\"allowedOperatorsFor(_b.field)\" [model]=\"_b.operator\" (modelChange)=\"pickBuildOperator($any($event))\" />\r\n        } @else {\r\n          <sd-operator class=\"c-token-op\" [operators]=\"[$any(_b.operator)]\" [model]=\"$any(_b.operator)\" [disabled]=\"true\" />\r\n          <!-- why: build value step renders the bare picker with a #bPicker ref so the\r\n               build flow can auto-open its native panel; sd-select needs minWidthPanel so the\r\n               narrow bare trigger still opens a readable panel. boolean keeps the editor outlet. -->\r\n          @if (_b.field.kind === 'values' || _b.field.kind === 'lazy-values') {\r\n            @let _bopt = $any(_b.field).option;\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"220px\" autoId=\"qb-build-value\"\r\n                [items]=\"_b.field.kind === 'lazy-values' ? lazyItemsFor(_b.field) : $any(_bopt.items)\"\r\n                [valueField]=\"_bopt.valueField\" [displayField]=\"_bopt.displayField\"\r\n                [multiple]=\"isMultiOperator($any(_b.operator))\" [model]=\"$any(_b.value)\"\r\n                (sdChange)=\"commitBuildValue($event)\"></sd-select>\r\n            </span>\r\n          } @else if (_b.field.kind === 'date') {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <!-- why: BETWEEN c\u1EA7n 2 picker (T\u1EEB / \u0110\u1EBFn); #bPicker \u0111\u1EB7t tr\u00EAn picker T\u1EEB \u0111\u1EC3 auto-open gi\u1EEF h\u00E0nh vi c\u0169 -->\r\n              @if (_b.operator === 'BETWEEN') {\r\n                <sd-date #bPicker bare size=\"sm\" autoId=\"qb-build-value-from\" placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_b.value)?.from\" (sdChange)=\"setBuildRangeFrom($event)\"></sd-date>\r\n                <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                <sd-date bare size=\"sm\" autoId=\"qb-build-value-to\" placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_b.value)?.to\" (sdChange)=\"setBuildRangeTo($event)\"></sd-date>\r\n              } @else {\r\n                <sd-date #bPicker bare size=\"sm\" autoId=\"qb-build-value\" [model]=\"$any(_b.value)\" (sdChange)=\"commitBuildValue($event)\"></sd-date>\r\n              }\r\n            </span>\r\n          } @else if (_b.field.kind === 'datetime') {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <!-- why: BETWEEN c\u1EA7n 2 picker (T\u1EEB / \u0110\u1EBFn); #bPicker \u0111\u1EB7t tr\u00EAn picker T\u1EEB \u0111\u1EC3 auto-open gi\u1EEF h\u00E0nh vi c\u0169 -->\r\n              @if (_b.operator === 'BETWEEN') {\r\n                <sd-datetime #bPicker bare size=\"sm\" autoId=\"qb-build-value-from\" placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_b.value)?.from\" (sdChange)=\"setBuildRangeFrom($event)\"></sd-datetime>\r\n                <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                <sd-datetime bare size=\"sm\" autoId=\"qb-build-value-to\" placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_b.value)?.to\" (sdChange)=\"setBuildRangeTo($event)\"></sd-datetime>\r\n              } @else {\r\n                <sd-datetime #bPicker bare size=\"sm\" autoId=\"qb-build-value\" [model]=\"$any(_b.value)\" (sdChange)=\"commitBuildValue($event)\"></sd-datetime>\r\n              }\r\n            </span>\r\n          } @else {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _b.field, data: _b.value ?? null, isMulti: isMultiOperator($any(_b.operator)), change: setBuildDraftFn(), enter: commitBuildDraftFn(), autoId: 'qb-build-value' }\"></ng-container>\r\n            </span>\r\n          }\r\n        }\r\n        <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancelBuild()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      }\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"fieldPicker\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: div[role=button] (not <button>) so the operator can render as a nested\r\n           <sd-operator> \u2014 matching inline chips. A button cannot legally contain a button. -->\r\n      <div\r\n        #chipTrigger=\"matMenuTrigger\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-chip\"\r\n        [class.c-chip-active]=\"_active\"\r\n        [class.c-chip-inactive]=\"!_active\"\r\n        [attr.data-field]=\"$any(filter).field\"\r\n        [matTooltip]=\"_field?.label || $any(filter).field\"\r\n        [matMenuTriggerFor]=\"chipPopover\"\r\n        [matMenuTriggerData]=\"{ index: i }\"\r\n        (menuOpened)=\"openChipPopover(i)\"\r\n        (menuClosed)=\"commitChipEditOnClose()\"\r\n        (keydown.enter)=\"chipTrigger.openMenu()\"\r\n        (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n        <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n          {{ _field ? iconFor(_field) : 'tune' }}\r\n        </mat-icon>\r\n        <span class=\"c-chip-label\">{{ _field?.label || $any(filter).field }}</span>\r\n\r\n        @if (showOperatorOnChip() && _active) {\r\n          <sd-operator class=\"c-chip-operator\" [operators]=\"[$any(filter.operator)]\" [model]=\"$any(filter.operator)\" [disabled]=\"true\" />\r\n        } @else if (_active) {\r\n          <span class=\"c-chip-sep\">:</span>\r\n        }\r\n\r\n        @if (_active) {\r\n          <span class=\"c-chip-value\">{{ chipValueText(filter) }}</span>\r\n        }\r\n\r\n        <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n        @if (_active) {\r\n          <span\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            class=\"c-chip-remove\"\r\n            aria-label=\"Remove filter\"\r\n            (click)=\"$event.stopPropagation(); removeFilter(i)\"\r\n            (keydown.enter)=\"$event.stopPropagation(); removeFilter(i)\">\r\n            <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"fieldPicker\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use -->\r\n  <mat-menu #fieldPicker=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n    @for (field of _fields; track $index) {\r\n      @let _isUsed = _used.has($any(field.key));\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        [disabled]=\"_isUsed || field.disabled\"\r\n        (click)=\"mode() === 'inline' ? beginBuild(field) : addFilter(field)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n          {{ iconFor(field) }}\r\n        </mat-icon>\r\n        <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n        <span class=\"c-field-item-kind\">{{ field.kind }}</span>\r\n        @if (_isUsed) {\r\n          <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n        }\r\n      </button>\r\n    } @empty {\r\n      <div class=\"c-field-empty\">Ch\u01B0a c\u00F3 field n\u00E0o \u0111\u01B0\u1EE3c c\u1EA5u h\u00ECnh.</div>\r\n    }\r\n  </mat-menu>\r\n\r\n  <!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n  <span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n  <!-- Action toolbar \u2014 pinned top-right; never drifts with the filter rows. -->\r\n    <div class=\"c-query-bar__actions\">\r\n      <!-- AND / OR toggle -->\r\n      @if (showLogicToggle() && _filters.length >= 2) {\r\n        <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-logic-segment\"\r\n            [class.c-logic-active]=\"_logic === 'AND'\"\r\n            (click)=\"setLogic('AND')\">\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-logic-segment\"\r\n            [class.c-logic-active]=\"_logic === 'OR'\"\r\n            (click)=\"setLogic('OR')\">\r\n            OR\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Saved views (placeholder \u2014 wire in next iteration) -->\r\n      @if (showSavedViews()) {\r\n        <button type=\"button\" class=\"c-saved-views\" disabled matTooltip=\"Saved views\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      <!-- Clear all \u2014 compact icon + tooltip -->\r\n      @if (showClearAll() && _filters.length > 0) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-clear-all\"\r\n          [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + _filters.length + ')'\"\r\n          (click)=\"clearAll()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      <!-- Search \u2014 the single deferred trigger for both modes. why: far-right placement\r\n           mirrors the conventional \"submit at the end of the toolbar\" reading order. -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-search-trigger\"\r\n        [disabled]=\"!canSearch()\"\r\n        matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n        (click)=\"triggerApply()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.c-density-compact .c-chip{height:28px}.c-density-comfortable .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger,.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg,.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:160px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-building{border-style:dashed}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}.c-density-compact .c-logic-toggle{height:28px}.c-density-comfortable .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-saved-views,.c-clear-all{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-density-compact .c-saved-views,.c-density-compact .c-clear-all{width:28px;height:28px}.c-density-comfortable .c-saved-views,.c-density-comfortable .c-clear-all{width:32px;height:32px}.c-saved-views mat-icon,.c-clear-all mat-icon{font-size:18px;width:18px;height:18px}.c-saved-views:hover:not([disabled]),.c-clear-all:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-views[disabled],.c-clear-all[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-density-compact .c-search-trigger{width:28px;height:28px}.c-density-comfortable .c-search-trigger{width:32px;height:32px}.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu{min-width:200px;max-width:260px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item{min-height:36px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1;min-width:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-icon{font-size:16px;width:16px;height:16px;margin-right:8px;color:#5f6368;flex-shrink:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-label{flex:1 1 auto;min-width:0;font-size:13px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-kind{flex-shrink:0;margin-left:auto;padding-left:12px;font-family:Roboto Mono,monospace;font-size:11px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-check{flex-shrink:0;font-size:14px;width:14px;height:14px;margin-left:6px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBar, isStandalone: true, selector: "sd-query-bar", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSavedFilters: { classPropertyName: "showSavedFilters", publicName: "showSavedFilters", isSignal: true, isRequired: false, transformFunction: null }, savedFiltersKey: { classPropertyName: "savedFiltersKey", publicName: "savedFiltersKey", isSignal: true, isRequired: false, transformFunction: null }, showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, showOperatorOnChip: { classPropertyName: "showOperatorOnChip", publicName: "showOperatorOnChip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", logic: "logicChange", search: "searchChange", queryChange: "queryChange", apply: "apply" }, viewQueries: [{ propertyName: "popoverChips", predicate: SdQueryPopoverChip, descendants: true, isSignal: true }, { propertyName: "buildChip", first: true, predicate: SdQueryBuildChip, descendants: true, isSignal: true }, { propertyName: "chipPopover", first: true, predicate: SdQueryChipPopover, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _fields = fields();\r\n@let _density = density();\r\n@let _showOr = showOrConnector();\r\n@let _used = usedFieldKeys();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_density === 'compact'\"\r\n  [class.c-density-comfortable]=\"_density === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (showSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Field switcher (used by chipPopover header) \u2014 declared first so chipPopover's\r\n       nested ng-template can resolve the template ref. -->\r\n  <!-- Field switcher used by chipPopover header \u2014 current field key comes from editingIndex. -->\r\n  <sd-query-field-picker\r\n    #switchPicker\r\n    [fields]=\"_fields\"\r\n    [currentKey]=\"editingIndex() !== null ? $any(filters()[editingIndex()!])?.field : undefined\"\r\n    (pick)=\"editingIndex() !== null && changeFilterField(editingIndex()!, $event)\" />\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"editingIndex() !== null ? $any(filters()[editingIndex()!]) : undefined\"\r\n    [chipIndex]=\"editingIndex()\"\r\n    [autoIdBase]=\"autoIdInput() ?? 'qb'\"\r\n    [switchPickerMenu]=\"switchPicker.menu()!\"\r\n    (commit)=\"onChipPopoverCommit($event)\"\r\n    (swapField)=\"editingIndex() !== null && changeFilterField(editingIndex()!, $event)\" />\r\n\r\n  @if (mode() === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_density\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_density\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_density\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"showOperatorOnChip()\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"showOperatorOnChip()\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_fields\"\r\n    [usedKeys]=\"_used\"\r\n    (pick)=\"mode() === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"showLogicToggle()\"\r\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"showSavedFilters()\"\r\n    [savedFiltersKey]=\"savedFiltersKey()\"\r\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"showClearAll()\"\r\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdQueryActionsBar, selector: "sd-query-actions-bar", inputs: ["showLogicToggle", "logic", "filtersCount", "showSavedFilters", "savedFiltersKey", "query", "showClearAll", "canSearch"], outputs: ["logicChange", "applyFilter", "clear", "search"] }, { kind: "component", type: SdQueryBuildChip, selector: "sd-query-build-chip", inputs: ["building", "density", "allowedOperators", "multiple", "showOperator", "autoId"], outputs: ["pickOperator", "commitValue", "cancel", "seamlessCommit", "draftChange", "draftCommit"] }, { kind: "component", type: SdQueryChipPopover, selector: "sd-query-chip-popover", inputs: ["field", "filter", "chipIndex", "autoIdBase", "switchPickerMenu"], outputs: ["commit", "swapField"] }, { kind: "component", type: SdQueryFieldPicker, selector: "sd-query-field-picker", inputs: ["fields", "currentKey", "usedKeys"], outputs: ["pick"] }, { kind: "component", type: SdQueryInlineChip, selector: "sd-query-inline-chip", inputs: ["field", "filter", "density", "multiple", "showOperator", "autoId", "valueText", "isNoData"], outputs: ["commit", "commitRange", "liveChange", "remove"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }, { kind: "component", type: SdQueryPopoverChip, selector: "sd-query-popover-chip", inputs: ["field", "filter", "active", "showOperator", "valueText", "menu"], outputs: ["open", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBar, decorators: [{
             type: Component,
@@ -979,20 +1419,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatIconModule,
                         MatMenuModule,
                         MatTooltipModule,
-                        SdButton,
-                        SdOperator,
-                        SdSelect,
-                        SdInput,
-                        SdInputNumber,
-                        SdDate,
-                        SdDatetime,
+                        SdQueryActionsBar,
+                        SdQueryBuildChip,
+                        SdQueryChipPopover,
+                        SdQueryFieldPicker,
+                        SdQueryInlineChip,
                         SdQueryInlineValueChip,
-                    ], template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _fields = fields();\r\n@let _logic = logic();\r\n@let _density = density();\r\n@let _showOr = showOrConnector();\r\n@let _used = usedFieldKeys();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_density === 'compact'\"\r\n  [class.c-density-comfortable]=\"_density === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (showSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Field switcher (used by chipPopover header) \u2014 declared first so chipPopover's\r\n       nested ng-template can resolve the template ref. -->\r\n  <mat-menu #fieldSwitchPicker=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n    <ng-template matMenuContent let-currentIndex=\"currentIndex\">\r\n      @let _currentFilter = filters()[currentIndex];\r\n      @let _currentKey = $any(_currentFilter)?.field;\r\n      @for (field of _fields; track $index) {\r\n        @let _isCurrent = field.key === _currentKey;\r\n        <button\r\n          type=\"button\"\r\n          mat-menu-item\r\n          [disabled]=\"_isCurrent || field.disabled\"\r\n          (click)=\"changeFilterField(currentIndex, field)\">\r\n          <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n            {{ iconFor(field) }}\r\n          </mat-icon>\r\n          <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n          <span class=\"c-field-item-kind\">{{ field.kind }}</span>\r\n          @if (_isCurrent) {\r\n            <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n\r\n  <!-- Chip popover \u2014 declared BEFORE chips so @for can resolve the forward template ref -->\r\n  <mat-menu #chipPopover=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\">\r\n    <ng-template matMenuContent let-index=\"index\">\r\n      @let _editField = editingField();\r\n      @let _editOp = editingOperator();\r\n      @let _editVal = editingValue();\r\n      @let _options = editingOptions();\r\n      @let _loading = editingOptionsLoading();\r\n\r\n      @if (_editField) {\r\n        <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_editField) }}</mat-icon>\r\n          <!-- Click field name \u2192 open nested picker to swap field on this chip. -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"fieldSwitchPicker\"\r\n            [matMenuTriggerData]=\"{ currentIndex: index }\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _editField.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n          <!-- why: operator moved into the header (right-aligned) to compact the popover.\r\n               Always shown \u2014 when the field has \u22641 operator it renders disabled so the\r\n               user still sees which operator the filter uses. -->\r\n          <sd-operator\r\n            class=\"c-pop-header-operator\"\r\n            [autoId]=\"chipAutoId('operator')\"\r\n            [operators]=\"editingAllowedOperators()\"\r\n            [model]=\"_editOp\"\r\n            [disabled]=\"!editingShowOperatorSelector()\"\r\n            (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n        </div>\r\n\r\n        <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n          <!-- Value \u2014 per-kind sd-* control, skipped for NULL / NOT_NULL. Placeholder\r\n               makes the field self-explanatory now that section labels are gone. -->\r\n          @if (!isNoDataOperator(_editOp)) {\r\n            @if (_editOp === 'BETWEEN') {\r\n                @if (_editField.kind === 'date') {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-date size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-date>\r\n                    <sd-date size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-date>\r\n                  </div>\r\n                } @else if (_editField.kind === 'datetime') {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-datetime size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-datetime>\r\n                    <sd-datetime size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-datetime>\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"c-pop-between\">\r\n                    <sd-input-number size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-from')\"\r\n                      placeholder=\"T\u1EEB\"\r\n                      [model]=\"$any(_editVal)?.from\"\r\n                      (sdChange)=\"onEditingRangeFrom($event)\">\r\n                    </sd-input-number>\r\n                    <sd-input-number size=\"sm\"\r\n                      [autoId]=\"chipAutoId('value-to')\"\r\n                      placeholder=\"\u0110\u1EBFn\"\r\n                      [model]=\"$any(_editVal)?.to\"\r\n                      (sdChange)=\"onEditingRangeTo($event)\">\r\n                    </sd-input-number>\r\n                  </div>\r\n                }\r\n              } @else if (_editField.kind === 'boolean') {\r\n                <div class=\"c-pop-boolean\">\r\n                  <sd-button\r\n                    [autoId]=\"chipAutoId('value-true')\"\r\n                    [type]=\"_editVal === true ? 'fill' : 'outline'\"\r\n                    color=\"primary\"\r\n                    [title]=\"$any(_editField).trueLabel || 'C\u00F3'\"\r\n                    (click)=\"onEditingValueInput(true)\">\r\n                  </sd-button>\r\n                  <sd-button\r\n                    [autoId]=\"chipAutoId('value-false')\"\r\n                    [type]=\"_editVal === false ? 'fill' : 'outline'\"\r\n                    color=\"primary\"\r\n                    [title]=\"$any(_editField).falseLabel || 'Kh\u00F4ng'\"\r\n                    (click)=\"onEditingValueInput(false)\">\r\n                  </sd-button>\r\n                </div>\r\n              } @else if (_editField.kind === 'values' || _editField.kind === 'lazy-values') {\r\n                @let _opt = $any(_editField).option;\r\n                <sd-select size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [items]=\"_options\"\r\n                  [valueField]=\"_opt.valueField\"\r\n                  [displayField]=\"_opt.displayField\"\r\n                  [multiple]=\"editingIsMulti()\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-select>\r\n                @if (_loading) {\r\n                  <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n                }\r\n              } @else if (_editField.kind === 'date') {\r\n                <sd-date size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-date>\r\n              } @else if (_editField.kind === 'datetime') {\r\n                <sd-datetime size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-datetime>\r\n              } @else if (_editField.kind === 'number') {\r\n                <sd-input-number size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-input-number>\r\n              } @else {\r\n                <sd-input size=\"sm\"\r\n                  [autoId]=\"chipAutoId('value')\"\r\n                  placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n                  [model]=\"$any(_editVal)\"\r\n                  (sdChange)=\"onEditingValueInput($event)\">\r\n                </sd-input>\r\n              }\r\n          }\r\n        </div>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n\r\n  @if (mode() === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Reusable value editor. ctx: field, data, isMulti, change (stash fn), enter (finalize fn), autoId\r\n         why: text/number commit on Enter, so the typed value is stashed via `change` then finalized\r\n         by `enter`; selection-style controls (select/date/boolean) stash + finalize in one action. -->\r\n    <ng-template #valueEditor let-field=\"field\" let-data=\"data\" let-isMulti=\"isMulti\" let-change=\"change\" let-enter=\"enter\" let-autoId=\"autoId\">\r\n      @if (field.kind === 'boolean') {\r\n        <sd-button [autoId]=\"autoId + '-true'\" [type]=\"data === true ? 'fill' : 'outline'\" color=\"primary\" [title]=\"$any(field).trueLabel || 'C\u00F3'\" (click)=\"change(true); enter()\"></sd-button>\r\n        <sd-button [autoId]=\"autoId + '-false'\" [type]=\"data === false ? 'fill' : 'outline'\" color=\"primary\" [title]=\"$any(field).falseLabel || 'Kh\u00F4ng'\" (click)=\"change(false); enter()\"></sd-button>\r\n      } @else if (field.kind === 'values') {\r\n        @let _opt = $any(field).option;\r\n        <sd-select bare size=\"sm\" minWidthPanel=\"220px\" [autoId]=\"autoId\" [items]=\"$any(_opt.items)\" [valueField]=\"_opt.valueField\" [displayField]=\"_opt.displayField\" [multiple]=\"isMulti\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-select>\r\n      } @else if (field.kind === 'lazy-values') {\r\n        @let _lopt = $any(field).option;\r\n        <sd-select bare size=\"sm\" minWidthPanel=\"220px\" [autoId]=\"autoId\" [items]=\"lazyItemsFor(field)\" [valueField]=\"_lopt.valueField\" [displayField]=\"_lopt.displayField\" [multiple]=\"isMulti\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-select>\r\n      } @else if (field.kind === 'date') {\r\n        <sd-date bare size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-date>\r\n      } @else if (field.kind === 'datetime') {\r\n        <sd-datetime bare size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event); enter()\"></sd-datetime>\r\n      } @else if (field.kind === 'number') {\r\n        <sd-input-number size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event)\" (keyupEnter)=\"enter()\"></sd-input-number>\r\n      } @else {\r\n        <sd-input size=\"sm\" [autoId]=\"autoId\" [model]=\"data\" (sdChange)=\"change($event)\" (keyupEnter)=\"enter()\"></sd-input>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.kind === 'string' || _field.kind === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_density\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <div class=\"c-token\" [class.c-token-editing]=\"isEditingValue(i)\">\r\n            <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n            <span class=\"c-token-field\">{{ _field.label }}</span>\r\n            @if (!isNoDataOperator(_op) && showOperatorOnChip()) {\r\n              <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n            } @else if (!isNoDataOperator(_op)) {\r\n              <span class=\"c-token-sep\">:</span>\r\n            }\r\n            @if (!isNoDataOperator(_op)) {\r\n              @if (_field.kind === 'boolean') {\r\n                @if (isEditingValue(i)) {\r\n                  <span class=\"c-token-value c-token-value-edit\">\r\n                    <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _field, data: _data, isMulti: isMultiOperator(_op), change: setEditDraftFn(), enter: commitEditDraftFn(i), autoId: inlineAutoId(i, 'value') }\"></ng-container>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"c-token-value\" (click)=\"beginEditValue(i)\">{{ chipValueText(filter) }}</button>\r\n                }\r\n              } @else if ((_field.kind === 'date' || _field.kind === 'datetime') && _op === 'BETWEEN') {\r\n                <!-- why: chip BETWEEN date/datetime \u0111\u00E3 commit -> render 2 picker inline cho ph\u00E9p s\u1EEDa t\u1EEBng \u0111\u1EA7u -->\r\n                <span class=\"c-token-value c-token-value-edit\">\r\n                  @if (_field.kind === 'date') {\r\n                    <sd-date bare size=\"sm\" placeholder=\"T\u1EEB\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-from')\"\r\n                      [model]=\"$any(_data)?.from\"\r\n                      (sdChange)=\"setFilterRangeFrom(i, $any($event))\"></sd-date>\r\n                    <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                    <sd-date bare size=\"sm\" placeholder=\"\u0110\u1EBFn\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-to')\"\r\n                      [model]=\"$any(_data)?.to\"\r\n                      (sdChange)=\"setFilterRangeTo(i, $any($event))\"></sd-date>\r\n                  } @else {\r\n                    <sd-datetime bare size=\"sm\" placeholder=\"T\u1EEB\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-from')\"\r\n                      [model]=\"$any(_data)?.from\"\r\n                      (sdChange)=\"setFilterRangeFrom(i, $any($event))\"></sd-datetime>\r\n                    <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                    <sd-datetime bare size=\"sm\" placeholder=\"\u0110\u1EBFn\"\r\n                      [autoId]=\"inlineAutoId(i, 'value-to')\"\r\n                      [model]=\"$any(_data)?.to\"\r\n                      (sdChange)=\"setFilterRangeTo(i, $any($event))\"></sd-datetime>\r\n                  }\r\n                </span>\r\n              } @else if (_field.kind === 'values' || _field.kind === 'lazy-values') {\r\n                @let _opt = $any(_field).option;\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-select bare size=\"sm\" minWidthPanel=\"220px\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [items]=\"_field.kind === 'lazy-values' ? lazyItemsFor(_field) : $any(_opt.items)\"\r\n                    [valueField]=\"_opt.valueField\"\r\n                    [displayField]=\"_opt.displayField\"\r\n                    [multiple]=\"isMultiOperator(_op)\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"isMultiOperator(_op) ? editValueFn(i)($event) : onChipSingleCommit(i, $event)\"></sd-select>\r\n                </span>\r\n              } @else if (_field.kind === 'date') {\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-date bare size=\"sm\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"onChipSingleCommit(i, $any($event))\"></sd-date>\r\n                </span>\r\n              } @else if (_field.kind === 'datetime') {\r\n                <span\r\n                  class=\"c-token-value c-token-value-edit\"\r\n                  (click)=\"beginEditValue(i)\"\r\n                  (focusout)=\"onChipValueFocusOut(i, $event)\">\r\n                  <sd-datetime bare size=\"sm\"\r\n                    [autoId]=\"inlineAutoId(i, 'value')\"\r\n                    [viewed]=\"!isEditingValue(i)\"\r\n                    [model]=\"_data\"\r\n                    (sdChange)=\"onChipSingleCommit(i, $any($event))\"></sd-datetime>\r\n                </span>\r\n              } @else {\r\n                <!-- Fallback (number / other) \u2014 keep the shared editor outlet path. -->\r\n                <span class=\"c-token-value c-token-value-edit\">\r\n                  <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _field, data: _data, isMulti: isMultiOperator(_op), change: editValueFn(i), enter: noop, autoId: inlineAutoId(i, 'value') }\"></ng-container>\r\n                </span>\r\n              }\r\n            }\r\n            <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"removeFilter(i)\">\r\n              <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) -->\r\n    @if (building(); as _b) {\r\n      @if (_b.step === 'value' && (_b.field.kind === 'string' || _b.field.kind === 'number')) {\r\n        <!-- Seamless build chip \u2014 type straight in, no rectangle. Enter/blur commits. -->\r\n        <sd-query-inline-value-chip\r\n          [field]=\"_b.field\"\r\n          [operator]=\"$any(_b.operator)\"\r\n          [value]=\"_b.value ?? null\"\r\n          [density]=\"_density\"\r\n          [showOperator]=\"showOperatorOnChip()\"\r\n          [autoId]=\"'qb-build-value'\"\r\n          [autofocus]=\"true\"\r\n          (valueChange)=\"onBuildSeamlessCommit($event)\"\r\n          (remove)=\"cancelBuild()\" />\r\n      } @else {\r\n      <div class=\"c-token c-token-building\">\r\n        <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n        @if (_b.step === 'operator') {\r\n          <sd-operator #buildOperator class=\"c-token-op\" [operators]=\"allowedOperatorsFor(_b.field)\" [model]=\"_b.operator\" (modelChange)=\"pickBuildOperator($any($event))\" />\r\n        } @else {\r\n          <sd-operator class=\"c-token-op\" [operators]=\"[$any(_b.operator)]\" [model]=\"$any(_b.operator)\" [disabled]=\"true\" />\r\n          <!-- why: build value step renders the bare picker with a #bPicker ref so the\r\n               build flow can auto-open its native panel; sd-select needs minWidthPanel so the\r\n               narrow bare trigger still opens a readable panel. boolean keeps the editor outlet. -->\r\n          @if (_b.field.kind === 'values' || _b.field.kind === 'lazy-values') {\r\n            @let _bopt = $any(_b.field).option;\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"220px\" autoId=\"qb-build-value\"\r\n                [items]=\"_b.field.kind === 'lazy-values' ? lazyItemsFor(_b.field) : $any(_bopt.items)\"\r\n                [valueField]=\"_bopt.valueField\" [displayField]=\"_bopt.displayField\"\r\n                [multiple]=\"isMultiOperator($any(_b.operator))\" [model]=\"$any(_b.value)\"\r\n                (sdChange)=\"commitBuildValue($event)\"></sd-select>\r\n            </span>\r\n          } @else if (_b.field.kind === 'date') {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <!-- why: BETWEEN c\u1EA7n 2 picker (T\u1EEB / \u0110\u1EBFn); #bPicker \u0111\u1EB7t tr\u00EAn picker T\u1EEB \u0111\u1EC3 auto-open gi\u1EEF h\u00E0nh vi c\u0169 -->\r\n              @if (_b.operator === 'BETWEEN') {\r\n                <sd-date #bPicker bare size=\"sm\" autoId=\"qb-build-value-from\" placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_b.value)?.from\" (sdChange)=\"setBuildRangeFrom($event)\"></sd-date>\r\n                <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                <sd-date bare size=\"sm\" autoId=\"qb-build-value-to\" placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_b.value)?.to\" (sdChange)=\"setBuildRangeTo($event)\"></sd-date>\r\n              } @else {\r\n                <sd-date #bPicker bare size=\"sm\" autoId=\"qb-build-value\" [model]=\"$any(_b.value)\" (sdChange)=\"commitBuildValue($event)\"></sd-date>\r\n              }\r\n            </span>\r\n          } @else if (_b.field.kind === 'datetime') {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <!-- why: BETWEEN c\u1EA7n 2 picker (T\u1EEB / \u0110\u1EBFn); #bPicker \u0111\u1EB7t tr\u00EAn picker T\u1EEB \u0111\u1EC3 auto-open gi\u1EEF h\u00E0nh vi c\u0169 -->\r\n              @if (_b.operator === 'BETWEEN') {\r\n                <sd-datetime #bPicker bare size=\"sm\" autoId=\"qb-build-value-from\" placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_b.value)?.from\" (sdChange)=\"setBuildRangeFrom($event)\"></sd-datetime>\r\n                <span class=\"c-token-dash\" aria-hidden=\"true\">\u2014</span>\r\n                <sd-datetime bare size=\"sm\" autoId=\"qb-build-value-to\" placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_b.value)?.to\" (sdChange)=\"setBuildRangeTo($event)\"></sd-datetime>\r\n              } @else {\r\n                <sd-datetime #bPicker bare size=\"sm\" autoId=\"qb-build-value\" [model]=\"$any(_b.value)\" (sdChange)=\"commitBuildValue($event)\"></sd-datetime>\r\n              }\r\n            </span>\r\n          } @else {\r\n            <span class=\"c-token-value c-token-value-edit\">\r\n              <ng-container *ngTemplateOutlet=\"valueEditor; context: { field: _b.field, data: _b.value ?? null, isMulti: isMultiOperator($any(_b.operator)), change: setBuildDraftFn(), enter: commitBuildDraftFn(), autoId: 'qb-build-value' }\"></ng-container>\r\n            </span>\r\n          }\r\n        }\r\n        <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancelBuild()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      }\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"fieldPicker\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: div[role=button] (not <button>) so the operator can render as a nested\r\n           <sd-operator> \u2014 matching inline chips. A button cannot legally contain a button. -->\r\n      <div\r\n        #chipTrigger=\"matMenuTrigger\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-chip\"\r\n        [class.c-chip-active]=\"_active\"\r\n        [class.c-chip-inactive]=\"!_active\"\r\n        [attr.data-field]=\"$any(filter).field\"\r\n        [matTooltip]=\"_field?.label || $any(filter).field\"\r\n        [matMenuTriggerFor]=\"chipPopover\"\r\n        [matMenuTriggerData]=\"{ index: i }\"\r\n        (menuOpened)=\"openChipPopover(i)\"\r\n        (menuClosed)=\"commitChipEditOnClose()\"\r\n        (keydown.enter)=\"chipTrigger.openMenu()\"\r\n        (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n        <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n          {{ _field ? iconFor(_field) : 'tune' }}\r\n        </mat-icon>\r\n        <span class=\"c-chip-label\">{{ _field?.label || $any(filter).field }}</span>\r\n\r\n        @if (showOperatorOnChip() && _active) {\r\n          <sd-operator class=\"c-chip-operator\" [operators]=\"[$any(filter.operator)]\" [model]=\"$any(filter.operator)\" [disabled]=\"true\" />\r\n        } @else if (_active) {\r\n          <span class=\"c-chip-sep\">:</span>\r\n        }\r\n\r\n        @if (_active) {\r\n          <span class=\"c-chip-value\">{{ chipValueText(filter) }}</span>\r\n        }\r\n\r\n        <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n        @if (_active) {\r\n          <span\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            class=\"c-chip-remove\"\r\n            aria-label=\"Remove filter\"\r\n            (click)=\"$event.stopPropagation(); removeFilter(i)\"\r\n            (keydown.enter)=\"$event.stopPropagation(); removeFilter(i)\">\r\n            <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"fieldPicker\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use -->\r\n  <mat-menu #fieldPicker=\"matMenu\" xPosition=\"after\" yPosition=\"below\" class=\"c-field-picker-menu\">\r\n    @for (field of _fields; track $index) {\r\n      @let _isUsed = _used.has($any(field.key));\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        [disabled]=\"_isUsed || field.disabled\"\r\n        (click)=\"mode() === 'inline' ? beginBuild(field) : addFilter(field)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-field-item-icon\">\r\n          {{ iconFor(field) }}\r\n        </mat-icon>\r\n        <span class=\"c-field-item-label\">{{ field.label }}</span>\r\n        <span class=\"c-field-item-kind\">{{ field.kind }}</span>\r\n        @if (_isUsed) {\r\n          <mat-icon class=\"c-field-item-check\" fontSet=\"material-icons-outlined\">check</mat-icon>\r\n        }\r\n      </button>\r\n    } @empty {\r\n      <div class=\"c-field-empty\">Ch\u01B0a c\u00F3 field n\u00E0o \u0111\u01B0\u1EE3c c\u1EA5u h\u00ECnh.</div>\r\n    }\r\n  </mat-menu>\r\n\r\n  <!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n  <span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n  <!-- Action toolbar \u2014 pinned top-right; never drifts with the filter rows. -->\r\n    <div class=\"c-query-bar__actions\">\r\n      <!-- AND / OR toggle -->\r\n      @if (showLogicToggle() && _filters.length >= 2) {\r\n        <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-logic-segment\"\r\n            [class.c-logic-active]=\"_logic === 'AND'\"\r\n            (click)=\"setLogic('AND')\">\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-logic-segment\"\r\n            [class.c-logic-active]=\"_logic === 'OR'\"\r\n            (click)=\"setLogic('OR')\">\r\n            OR\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Saved views (placeholder \u2014 wire in next iteration) -->\r\n      @if (showSavedViews()) {\r\n        <button type=\"button\" class=\"c-saved-views\" disabled matTooltip=\"Saved views\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      <!-- Clear all \u2014 compact icon + tooltip -->\r\n      @if (showClearAll() && _filters.length > 0) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-clear-all\"\r\n          [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + _filters.length + ')'\"\r\n          (click)=\"clearAll()\">\r\n          <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      <!-- Search \u2014 the single deferred trigger for both modes. why: far-right placement\r\n           mirrors the conventional \"submit at the end of the toolbar\" reading order. -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-search-trigger\"\r\n        [disabled]=\"!canSearch()\"\r\n        matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n        (click)=\"triggerApply()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.c-density-compact .c-chip{height:28px}.c-density-comfortable .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger,.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg,.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:160px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-building{border-style:dashed}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}.c-density-compact .c-logic-toggle{height:28px}.c-density-comfortable .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-saved-views,.c-clear-all{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-density-compact .c-saved-views,.c-density-compact .c-clear-all{width:28px;height:28px}.c-density-comfortable .c-saved-views,.c-density-comfortable .c-clear-all{width:32px;height:32px}.c-saved-views mat-icon,.c-clear-all mat-icon{font-size:18px;width:18px;height:18px}.c-saved-views:hover:not([disabled]),.c-clear-all:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-views[disabled],.c-clear-all[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-density-compact .c-search-trigger{width:28px;height:28px}.c-density-comfortable .c-search-trigger{width:32px;height:32px}.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu{min-width:200px;max-width:260px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item{min-height:36px}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1;min-width:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-icon{font-size:16px;width:16px;height:16px;margin-right:8px;color:#5f6368;flex-shrink:0}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-label{flex:1 1 auto;min-width:0;font-size:13px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-kind{flex-shrink:0;margin-left:auto;padding-left:12px;font-family:Roboto Mono,monospace;font-size:11px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-item-check{flex-shrink:0;font-size:14px;width:14px;height:14px;margin-left:6px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .c-field-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"] }]
+                        SdQueryPopoverChip,
+                    ], template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _fields = fields();\r\n@let _density = density();\r\n@let _showOr = showOrConnector();\r\n@let _used = usedFieldKeys();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_density === 'compact'\"\r\n  [class.c-density-comfortable]=\"_density === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (showSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Field switcher (used by chipPopover header) \u2014 declared first so chipPopover's\r\n       nested ng-template can resolve the template ref. -->\r\n  <!-- Field switcher used by chipPopover header \u2014 current field key comes from editingIndex. -->\r\n  <sd-query-field-picker\r\n    #switchPicker\r\n    [fields]=\"_fields\"\r\n    [currentKey]=\"editingIndex() !== null ? $any(filters()[editingIndex()!])?.field : undefined\"\r\n    (pick)=\"editingIndex() !== null && changeFilterField(editingIndex()!, $event)\" />\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"editingIndex() !== null ? $any(filters()[editingIndex()!]) : undefined\"\r\n    [chipIndex]=\"editingIndex()\"\r\n    [autoIdBase]=\"autoIdInput() ?? 'qb'\"\r\n    [switchPickerMenu]=\"switchPicker.menu()!\"\r\n    (commit)=\"onChipPopoverCommit($event)\"\r\n    (swapField)=\"editingIndex() !== null && changeFilterField(editingIndex()!, $event)\" />\r\n\r\n  @if (mode() === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_density\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_density\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"showOperatorOnChip()\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_density\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"showOperatorOnChip()\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOr && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"showOperatorOnChip()\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_fields.length === 0 || _used.size >= _fields.length\"\r\n      [matTooltip]=\"_fields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_fields\"\r\n    [usedKeys]=\"_used\"\r\n    (pick)=\"mode() === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"showLogicToggle()\"\r\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"showSavedFilters()\"\r\n    [savedFiltersKey]=\"savedFiltersKey()\"\r\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"showClearAll()\"\r\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SD_QUERY_DEFAULT_OPERATOR_BY_KIND, SD_QUERY_KIND_ICON, SD_QUERY_MULTI_OPERATORS, SD_QUERY_NO_DATA_OPERATORS, SD_QUERY_OPERATORS_BY_KIND, SD_QUERY_OPERATOR_LABEL, SdQueryBar, sdQueryAllowedOperators, sdQueryDefaultOperator, sdQueryFieldIcon, sdQueryShowOperatorSelector };
+export { SD_QUERY_DEFAULT_OPERATOR_BY_TYPE, SD_QUERY_MULTI_OPERATORS, SD_QUERY_NO_DATA_OPERATORS, SD_QUERY_OPERATORS_BY_TYPE, SD_QUERY_TYPE_ICON, SdQueryBar, sdQueryAllowedOperators, sdQueryDefaultOperator, sdQueryFieldIcon, sdQueryShowOperatorSelector };
 //# sourceMappingURL=sd-angular-core-components-query-bar.mjs.map