@sdcorejs/angular 19.0.1 → 19.0.4

package/fesm2022/sdcorejs-angular-components-query-builder.mjs

@@ -1,83 +1,695 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { input, booleanAttribute, model, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SdDate } from '@sdcorejs/angular/forms/date';
+import { SdDatetime } from '@sdcorejs/angular/forms/datetime';
+import { SdInput } from '@sdcorejs/angular/forms/input';
+import { SdSelect } from '@sdcorejs/angular/forms/select';
+import { SdOperator } from '@sdcorejs/angular/components/operator';
 
+/** Type guard — narrows a `QbNode` to a `QbGroup`. */
+function isQbGroup(node) {
+    return node.kind === 'group';
+}
+// ---------------------------------------------------------------------------
+// Operator vocabulary per field type. Mirrors query-bar's
+// SD_QUERY_OPERATORS_BY_TYPE so the two components stay consistent, but is kept
+// local so query-builder has no dependency on the query-bar package.
+// ---------------------------------------------------------------------------
+/** Allowed operators per field type — used when `field.operators` is not set. */
+const QB_OPERATORS_BY_TYPE = {
+    string: ['CONTAIN', 'NOT_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', 'NULL', 'NOT_NULL'],
+    boolean: ['EQUAL', 'NOT_EQUAL'],
+    date: ['EQUAL', 'NOT_EQUAL', 'GREATER_THAN', 'LESS_THAN', 'BETWEEN', 'NULL', 'NOT_NULL'],
+    datetime: ['EQUAL', 'NOT_EQUAL', 'GREATER_THAN', 'LESS_THAN', 'BETWEEN', 'NULL', 'NOT_NULL'],
+    values: ['IN', 'NOT_IN', 'EQUAL', 'NOT_EQUAL', 'NULL', 'NOT_NULL'],
+};
+/** Default operator when a rule is first created for a field. */
+const QB_DEFAULT_OPERATOR_BY_TYPE = {
+    string: 'CONTAIN',
+    number: 'EQUAL',
+    boolean: 'EQUAL',
+    date: 'BETWEEN',
+    datetime: 'BETWEEN',
+    values: 'IN',
+};
+/** Operators with no value payload — the value editor is hidden for these. */
+const QB_NO_DATA_OPERATORS = ['NULL', 'NOT_NULL'];
+/** Operators whose value is an array — the value editor offers multi-select. */
+const QB_MULTI_OPERATORS = ['IN', 'NOT_IN'];
+/** Operators allowed for `field` — explicit override wins, else the per-type set. */
+function qbAllowedOperators(field) {
+    if (!field)
+        return [];
+    if (field.operators?.length)
+        return field.operators;
+    return QB_OPERATORS_BY_TYPE[field.type] ?? [];
+}
+/** Starting operator for a new rule on `field` — falls back to the per-type default. */
+function qbDefaultOperator(field) {
+    if (!field)
+        return undefined;
+    const allowed = qbAllowedOperators(field);
+    if (field.defaultOperator && allowed.includes(field.defaultOperator))
+        return field.defaultOperator;
+    const byType = QB_DEFAULT_OPERATOR_BY_TYPE[field.type];
+    return allowed.includes(byType) ? byType : allowed[0];
+}
+/** True when `op` is NULL / NOT_NULL (no value editor). */
+function qbIsNoDataOperator(op) {
+    return !!op && QB_NO_DATA_OPERATORS.includes(op);
+}
+/** True when `op` is IN / NOT_IN (array value). */
+function qbIsMultiOperator(op) {
+    return !!op && QB_MULTI_OPERATORS.includes(op);
+}
+// ---------------------------------------------------------------------------
+// Node factories — monotonic counter for stable, render-safe ids (no Math.random
+// / Date.now so SSR + tests stay deterministic).
+// ---------------------------------------------------------------------------
+let qbSeq = 0;
+/** Next stable node id with the given prefix. */
+function qbId(prefix = 'qb') {
+    return `${prefix}-${++qbSeq}`;
+}
+/** Build a fresh rule node (optionally pre-filled). */
+function qbNewRule(field, operator, value) {
+    return { id: qbId('r'), kind: 'rule', field, operator, value };
+}
+/** Build a fresh group node. */
+function qbNewGroup(logic = 'AND', children = []) {
+    return { id: qbId('g'), kind: 'group', logic, children };
+}
+/** Type guard — narrows an arbitrary value to a relative-date spec. */
+function qbIsRelativeDate(v) {
+    return !!v && typeof v === 'object' && (v.rel === 'now' || v.rel === 'offset');
+}
+/** Starting relative value when a rule first switches to "relative" mode. */
+function qbDefaultRelative() {
+    return { rel: 'offset', unit: 'day', amount: 1, direction: 'previous' };
+}
+/** Stable option list for the date-mode select (module ref — never reallocated). */
+const QB_DATE_MODES = [
+    { value: 'absolute', display: 'Ngày cụ thể' },
+    { value: 'now', display: 'Hôm nay' },
+    { value: 'relative', display: 'Tương đối' },
+];
+/** Stable combined direction×unit option list (token `'unit:direction'`). */
+const QB_RELATIVE_UNIT_OPTIONS = [
+    { value: 'day:previous', display: 'ngày trước' },
+    { value: 'day:next', display: 'ngày tới' },
+    { value: 'week:previous', display: 'tuần trước' },
+    { value: 'week:next', display: 'tuần tới' },
+    { value: 'month:previous', display: 'tháng trước' },
+    { value: 'month:next', display: 'tháng tới' },
+];
+/** Shared empty option array — stable ref for fallbacks (avoids per-call allocation). */
+const QB_EMPTY_OPTIONS = [];
+
+// SQL symbol for each single-value comparison operator.
+const SYMBOL = {
+    EQUAL: '=',
+    NOT_EQUAL: '!=',
+    GREATER_THAN: '>',
+    LESS_THAN: '<',
+    GREATER_OR_EQUAL: '>=',
+    LESS_OR_EQUAL: '<=',
+};
+const LIKE_OPERATORS = ['CONTAIN', 'NOT_CONTAIN', 'START_WITH', 'NOT_START_WITH', 'END_WITH', 'NOT_END_WITH'];
+/** A `Filter` is a logical group when its operator is AND / OR and it carries a `data[]`. */
+function isAndOr$1(filter) {
+    return !!filter && (filter.operator === 'AND' || filter.operator === 'OR') && Array.isArray(filter.data);
+}
+function isEmptyValue(v) {
+    return v === null || v === undefined || v === '';
+}
+// ---------------------------------------------------------------------------
+// Internal tree → public Filter
+// ---------------------------------------------------------------------------
+function ruleToFilter(rule) {
+    if (!rule.field || !rule.operator)
+        return null;
+    const operator = rule.operator;
+    if (QB_NO_DATA_OPERATORS.includes(operator)) {
+        return { field: rule.field, operator };
+    }
+    if (operator === 'BETWEEN') {
+        const v = rule.value;
+        if (!v || typeof v !== 'object')
+            return null;
+        if (isEmptyValue(v.from) || isEmptyValue(v.to))
+            return null;
+        return { field: rule.field, operator: 'BETWEEN', data: { from: v.from, to: v.to } };
+    }
+    if (QB_MULTI_OPERATORS.includes(operator)) {
+        const arr = Array.isArray(rule.value) ? rule.value : isEmptyValue(rule.value) ? [] : [rule.value];
+        if (!arr.length)
+            return null;
+        return { field: rule.field, operator, data: arr };
+    }
+    if (qbIsRelativeDate(rule.value)) {
+        const v = rule.value;
+        if (v.rel === 'now')
+            return { field: rule.field, operator, data: { rel: 'now' } };
+        // offset — only emit when fully specified, else drop the incomplete rule
+        if (v.unit && v.direction && typeof v.amount === 'number' && v.amount >= 1) {
+            return {
+                field: rule.field,
+                operator,
+                data: { rel: 'offset', unit: v.unit, amount: v.amount, direction: v.direction },
+            };
+        }
+        return null;
+    }
+    if (isEmptyValue(rule.value))
+        return null;
+    return { field: rule.field, operator, data: rule.value };
+}
+function nodeToFilter(node) {
+    if (isQbGroup(node)) {
+        const data = node.children.map(nodeToFilter).filter((f) => f != null);
+        if (!data.length)
+            return null;
+        return { operator: node.logic, data };
+    }
+    return ruleToFilter(node);
+}
+/**
+ * Map the internal builder tree to the public `Filter` (the root is always a
+ * `FilterAndOr`). Rules missing field / operator / value — and empty nested
+ * groups — are dropped so the result is always a valid `Filter`.
+ *
+ * @param group - the editable tree's root group.
+ * @returns the canonical nested `Filter`, or `null` when no complete rule survives.
+ */
+function treeToFilter(group) {
+    return nodeToFilter(group);
+}
+// ---------------------------------------------------------------------------
+// Public Filter → internal tree (for seeding [value])
+// ---------------------------------------------------------------------------
+function ruleFromFilter(filter) {
+    const operator = filter.operator;
+    if (QB_NO_DATA_OPERATORS.includes(operator)) {
+        return qbNewRule(filter.field, operator);
+    }
+    return qbNewRule(filter.field, operator, filter.data);
+}
+function nodeFromFilter(filter) {
+    return isAndOr$1(filter) ? groupFromFilter(filter) : ruleFromFilter(filter);
+}
+function groupFromFilter(filter) {
+    return qbNewGroup(filter.operator, filter.data.map(nodeFromFilter));
+}
+/**
+ * Inverse of {@link treeToFilter} — rebuild the editable tree from a `Filter` so a
+ * consumer can seed `[value]`. A non-group (bare) filter is wrapped in an AND root;
+ * `null` yields an empty AND root.
+ *
+ * @param filter - a `Filter` (group or leaf), or `null` / `undefined` for an empty tree.
+ * @returns a fresh root `QbGroup` mirroring the filter's structure.
+ */
+function filterToTree(filter) {
+    if (!filter)
+        return qbNewGroup('AND', []);
+    if (isAndOr$1(filter))
+        return groupFromFilter(filter);
+    return qbNewGroup('AND', [ruleFromFilter(filter)]);
+}
+// ---------------------------------------------------------------------------
+// Public Filter → SQL-ish highlight tokens (view mode)
+// ---------------------------------------------------------------------------
+function escapeStr(s) {
+    return s.replace(/'/g, "''");
+}
+const REL_UNIT_VI = { day: 'ngày', week: 'tuần', month: 'tháng' };
+/** Render a relative-date spec as readable Vietnamese for the view string. */
+function formatRelative(v) {
+    if (v.rel === 'now')
+        return 'hôm nay';
+    const unit = REL_UNIT_VI[v.unit ?? 'day'];
+    const dir = v.direction === 'next' ? 'tới' : 'trước';
+    return `${v.amount ?? 1} ${unit} ${dir}`;
+}
+/** Format one scalar value for the view string — quoted/labelled per field type. */
+function formatScalar(field, raw) {
+    if (qbIsRelativeDate(raw))
+        return formatRelative(raw);
+    if (raw === null || raw === undefined)
+        return '';
+    if (field?.type === 'boolean') {
+        return raw ? field.trueLabel ?? 'Có' : field.falseLabel ?? 'Không';
+    }
+    if (field?.type === 'values') {
+        const opt = field.values?.find(o => o.value === raw);
+        return `'${escapeStr(opt ? opt.display : String(raw))}'`;
+    }
+    if (field?.type === 'number' || typeof raw === 'number' || typeof raw === 'boolean') {
+        return String(raw);
+    }
+    // string / date / datetime / unknown → quoted
+    return `'${escapeStr(String(raw))}'`;
+}
+function likePattern(operator, raw) {
+    const esc = escapeStr(raw);
+    if (operator === 'CONTAIN' || operator === 'NOT_CONTAIN')
+        return `'%${esc}%'`;
+    if (operator === 'START_WITH' || operator === 'NOT_START_WITH')
+        return `'${esc}%'`;
+    return `'%${esc}'`; // END_WITH / NOT_END_WITH
+}
+function ruleTokens(filter, fields) {
+    const field = fields.find(f => f.key === filter.field);
+    const out = [{ kind: 'field', text: field?.label ?? String(filter.field) }];
+    const sp = () => out.push({ kind: 'plain', text: ' ' });
+    const operator = filter.operator;
+    if (QB_NO_DATA_OPERATORS.includes(operator)) {
+        sp();
+        out.push({ kind: 'op', text: operator === 'NULL' ? 'is null' : 'is not null' });
+        return out;
+    }
+    if (operator === 'BETWEEN') {
+        sp();
+        out.push({ kind: 'op', text: 'between' });
+        sp();
+        out.push({ kind: 'value', text: formatScalar(field, filter.data?.from) });
+        out.push({ kind: 'plain', text: ' and ' });
+        out.push({ kind: 'value', text: formatScalar(field, filter.data?.to) });
+        return out;
+    }
+    if (QB_MULTI_OPERATORS.includes(operator)) {
+        sp();
+        out.push({ kind: 'op', text: operator === 'IN' ? 'in' : 'not in' });
+        sp();
+        const arr = Array.isArray(filter.data) ? filter.data : [];
+        out.push({ kind: 'value', text: `(${arr.map((v) => formatScalar(field, v)).join(', ')})` });
+        return out;
+    }
+    if (LIKE_OPERATORS.includes(operator)) {
+        sp();
+        out.push({ kind: 'op', text: operator.startsWith('NOT_') ? 'not like' : 'like' });
+        sp();
+        out.push({ kind: 'value', text: likePattern(operator, String(filter.data ?? '')) });
+        return out;
+    }
+    sp();
+    out.push({ kind: 'op', text: SYMBOL[operator] ?? operator });
+    sp();
+    out.push({ kind: 'value', text: formatScalar(field, filter.data) });
+    return out;
+}
+function tokensFor(filter, fields) {
+    if (isAndOr$1(filter)) {
+        const out = [];
+        filter.data.forEach((child, i) => {
+            if (i > 0)
+                out.push({ kind: 'logic', text: ` ${filter.operator.toLowerCase()} ` });
+            const childTokens = tokensFor(child, fields);
+            // Wrap a nested multi-child group in parentheses; a single-child group needs none.
+            if (isAndOr$1(child) && child.data.length > 1) {
+                out.push({ kind: 'paren', text: '(' }, ...childTokens, { kind: 'paren', text: ')' });
+            }
+            else {
+                out.push(...childTokens);
+            }
+        });
+        return out;
+    }
+    return ruleTokens(filter, fields);
+}
+/**
+ * Render a `Filter` to a SQL-ish token stream for view mode. Field tokens use the
+ * matching field's `label`; operators map to SQL syntax (`= != like between is null …`);
+ * `and` / `or` are lowercase; nested multi-child groups are wrapped in parentheses.
+ * Returns a token stream (not a string) so the template can wrap each piece in a
+ * highlight `<span>` keyed by `QbToken.kind`.
+ *
+ * @param filter - the `Filter` to render, or `null` / `undefined`.
+ * @param fields - field metadata, used to resolve each field key to its display label + value formatting.
+ * @returns the ordered tokens, or `[]` when `filter` is empty.
+ */
+function filterToTokens(filter, fields) {
+    if (!filter)
+        return [];
+    return tokensFor(filter, fields);
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** A logical `Filter` (AND / OR group) carries a `data[]` array. */
+function isAndOr(filter) {
+    return !!filter && (filter.operator === 'AND' || filter.operator === 'OR') && Array.isArray(filter.data);
+}
+/**
+ * Visual filter / rule builder. Compose nested AND / OR groups of
+ * `field operator value` conditions; emits the canonical `Filter` (root is a
+ * `FilterAndOr` tree) via `[(value)]`, plus a flat `[(filters)]` mirror of the
+ * root group's direct children. `mode="view"` renders a read-only SQL-ish raw
+ * string with highlighted operators + values.
+ */
 class SdQueryBuilder {
-    group = {
-        condition: 'AND',
-        rules: [
-            { field: 'Employee ID', operator: 'Equal', value: '1' },
-            { field: 'Title', operator: 'Equal', value: 'Sales Manager' },
-            {
-                condition: 'OR',
-                rules: [
-                    { field: 'Select Field', operator: '', value: '' }
-                ]
+    // -------------------------------------------------------------------------
+    // Inputs
+    // -------------------------------------------------------------------------
+    /** Filterable fields — each declares a `type` that drives the operator set + value editor. */
+    fields = input([]);
+    /** `'edit'` (default) = interactive tree · `'view'` = read-only raw-query string. */
+    mode = input('edit');
+    /** Disable all editing controls. */
+    disabled = input(false, { transform: booleanAttribute });
+    /** Prefix for `data-autoid` on inner controls (E2E selectors). */
+    autoId = input();
+    // -------------------------------------------------------------------------
+    // Two-way models (output contract)
+    // -------------------------------------------------------------------------
+    /** Canonical output — the root `FilterAndOr` tree, or `null` when empty. `[(value)]`. */
+    value = model(null);
+    /** Convenience mirror — the root group's direct children. `[(filters)]`. */
+    filters = model([]);
+    /** Root group's logical connector. `[(rootLogic)]`. */
+    rootLogic = model('AND');
+    // -------------------------------------------------------------------------
+    // Internal source of truth — the editable tree (carries UI state).
+    // -------------------------------------------------------------------------
+    #tree = signal(qbNewGroup('AND'));
+    tree = this.#tree.asReadonly();
+    /** Last filter WE emitted — used to recognise (and ignore) our own echo in the inbound effect. */
+    #lastEmitted = undefined;
+    // -------------------------------------------------------------------------
+    // Derived state
+    // -------------------------------------------------------------------------
+    /** `field.key` → field, for fast lookup from a rule. */
+    fieldByKey = computed(() => {
+        const map = {};
+        for (const f of this.fields())
+            map[f.key] = f;
+        return map;
+    });
+    /** Boolean fields → their stable `[true,false]` option list. Memoized so the template
+     *  binding hands `sd-select` the SAME array ref each CD (else its `toObservable(items)`
+     *  → `markForCheck()` loops → OOM). Recomputes only when `fields()` changes. */
+    #booleanOptionsByKey = computed(() => {
+        const map = new Map();
+        for (const f of this.fields()) {
+            if (f.type === 'boolean') {
+                map.set(f.key, [
+                    { value: true, display: f.trueLabel ?? 'Có' },
+                    { value: false, display: f.falseLabel ?? 'Không' },
+                ]);
             }
-        ]
-    };
-    groupChange = new EventEmitter();
-    isGroup(item) {
-        return item.rules !== undefined;
+        }
+        return map;
+    });
+    /** Stable option list for the date-mode select. */
+    dateModes = QB_DATE_MODES;
+    /** Stable combined unit×direction option list for the relative select. */
+    relativeUnitOptions = QB_RELATIVE_UNIT_OPTIONS;
+    /** View-mode token stream — recomputed from the emitted value. */
+    tokens = computed(() => filterToTokens(this.value(), this.fields()));
+    isView = computed(() => this.mode() === 'view');
+    /** Expose the type-guard to the template. */
+    isGroup = isQbGroup;
+    constructor() {
+        // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
+        // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
+        effect(() => {
+            const v = this.value();
+            const fl = this.filters();
+            const incoming = this.#coalesce(v, fl);
+            if (this.#filterEq(incoming, this.#lastEmitted))
+                return;
+            this.#tree.set(filterToTree(incoming));
+            this.#commit();
+        });
     }
-    toggleCondition(group, condition) {
-        group.condition = condition;
+    #coalesce(v, fl) {
+        if (v)
+            return v;
+        if (fl && fl.length)
+            return { operator: untracked(() => this.rootLogic()), data: fl };
+        return null;
     }
-    // --- LOGIC DROPDOWN & Z-INDEX ---
+    #filterEq(a, b) {
+        return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+    }
+    // -------------------------------------------------------------------------
+    // Tree mutation → emit
+    // -------------------------------------------------------------------------
+    /** New root ref so the template (which reads `tree()`) re-renders. */
+    #bumpTree() {
+        this.#tree.set({ ...this.#tree() });
+    }
+    /** Recompute the output `Filter` from the tree and push it to value / filters / rootLogic. */
+    #commit() {
+        const filter = treeToFilter(this.#tree());
+        this.#lastEmitted = filter;
+        this.value.set(filter);
+        this.filters.set(isAndOr(filter) ? filter.data : filter ? [filter] : []);
+        const logic = this.#tree().logic;
+        if (this.rootLogic() !== logic)
+            this.rootLogic.set(logic);
+    }
+    /** Mutate-in-place + re-render + emit. */
+    #apply() {
+        this.#bumpTree();
+        this.#commit();
+    }
+    // -------------------------------------------------------------------------
+    // Group / rule structural mutations
+    // -------------------------------------------------------------------------
+    /** Switch a group's AND/OR connector and re-emit. No-op when disabled or unchanged. */
+    setGroupLogic(group, logic) {
+        if (this.disabled() || group.logic === logic)
+            return;
+        group.logic = logic;
+        this.#apply();
+    }
+    /** Open this group's "+" menu (closing any other open one). UI-only — does not emit. */
     toggleDropdown(group, event) {
+        if (this.disabled())
+            return;
         event.stopPropagation();
-        // Đóng tất cả các dropdown khác để tránh chồng chéo
-        if (!group.isOpen) {
-            this.closeAllDropdowns(this.group);
-        }
-        group.isOpen = !group.isOpen;
+        const willOpen = !group.open;
+        this.#closeAllDropdowns(this.#tree());
+        group.open = willOpen;
+        this.#bumpTree(); // UI-only — no emit
     }
-    closeAll() {
-        this.closeAllDropdowns(this.group);
+    closeAllDropdowns() {
+        if (!this.#hasOpenDropdown(this.#tree()))
+            return; // avoid a re-render on every container click
+        this.#closeAllDropdowns(this.#tree());
+        this.#bumpTree();
     }
-    closeAllDropdowns(group) {
-        group.isOpen = false;
-        group.rules.forEach(rule => {
-            if (this.isGroup(rule))
-                this.closeAllDropdowns(rule);
-        });
+    #hasOpenDropdown(node) {
+        if (!isQbGroup(node))
+            return false;
+        return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
+    }
+    #closeAllDropdowns(node) {
+        if (isQbGroup(node)) {
+            node.open = false;
+            node.children.forEach(c => this.#closeAllDropdowns(c));
+        }
     }
-    // --------------------------------
+    /** Append a blank rule to `group`. */
     addRule(group) {
-        group.rules.push({ field: '', operator: 'Equal', value: '' });
-        group.isOpen = false;
+        if (this.disabled())
+            return;
+        group.children.push(qbNewRule());
+        group.open = false;
+        this.#apply();
     }
+    /** Append a nested sub-group (seeded with one blank rule) to `group`. */
     addGroup(group) {
-        group.rules.push({
-            condition: 'OR',
-            rules: [{ field: '', operator: '', value: '' }]
-        });
-        group.isOpen = false;
+        if (this.disabled())
+            return;
+        group.children.push(qbNewGroup('AND', [qbNewRule()]));
+        group.open = false;
+        this.#apply();
+    }
+    /** Remove the child at `index` from `parent` (a rule or a whole sub-group). */
+    removeNode(parent, index) {
+        if (this.disabled())
+            return;
+        parent.children.splice(index, 1);
+        this.#apply();
+    }
+    // -------------------------------------------------------------------------
+    // Rule field / operator / value mutations
+    // -------------------------------------------------------------------------
+    /**
+     * Point `rule` at a new field. Resets operator to the field's default and the value
+     * to that operator's empty shape — the old operator/value rarely fit the new type.
+     *
+     * @param rule - the rule being edited.
+     * @param key - the chosen field key (from the field picker). Swap-only: a null / undefined
+     *   key is a no-op — the field can be changed but never cleared (issue #2).
+     */
+    setField(rule, key) {
+        if (this.disabled())
+            return;
+        if (key == null)
+            return; // swap-only: never clear the field (issue #2)
+        rule.field = key;
+        const field = this.fieldByKey()[rule.field];
+        const op = qbDefaultOperator(field);
+        rule.operator = op;
+        rule.value = this.#defaultValueFor(op);
+        this.#apply();
+    }
+    /** Change `rule`'s operator and reshape its value to fit the new operator (array / range / none). */
+    setOperator(rule, op) {
+        if (this.disabled())
+            return;
+        rule.operator = op;
+        rule.value = this.#reshapeValue(op, rule.value);
+        this.#apply();
+    }
+    /** Set a single-value rule's value (coercing numeric fields to `number`). */
+    setScalar(rule, raw) {
+        if (this.disabled())
+            return;
+        rule.value = this.#coerce(rule, raw);
+        this.#apply();
+    }
+    /** Set the lower bound of a BETWEEN rule's `{ from, to }` value. */
+    setBetweenFrom(rule, raw) {
+        if (this.disabled())
+            return;
+        rule.value = { ...(rule.value ?? {}), from: this.#coerce(rule, raw) };
+        this.#apply();
+    }
+    /** Set the upper bound of a BETWEEN rule's `{ from, to }` value. */
+    setBetweenTo(rule, raw) {
+        if (this.disabled())
+            return;
+        rule.value = { ...(rule.value ?? {}), to: this.#coerce(rule, raw) };
+        this.#apply();
+    }
+    /** Coerce numeric fields to `number` so the emitted Filter carries a real number. */
+    #coerce(rule, raw) {
+        const field = this.fieldByKey()[rule.field];
+        if (field?.type === 'number' && raw !== null && raw !== undefined && raw !== '') {
+            const n = Number(raw);
+            return Number.isNaN(n) ? raw : n;
+        }
+        return raw;
+    }
+    #defaultValueFor(op) {
+        if (qbIsMultiOperator(op))
+            return [];
+        if (op === 'BETWEEN')
+            return { from: null, to: null };
+        return null;
+    }
+    #reshapeValue(op, current) {
+        if (qbIsNoDataOperator(op))
+            return null;
+        if (qbIsMultiOperator(op))
+            return Array.isArray(current) ? current : current == null ? [] : [current];
+        if (op === 'BETWEEN') {
+            // a relative spec can't be a BETWEEN endpoint — reset to a fresh range
+            return current && typeof current === 'object' && !Array.isArray(current) && !qbIsRelativeDate(current)
+                ? current
+                : { from: null, to: null };
+        }
+        // single value — keep a relative spec; otherwise drop array/range remnants
+        if (qbIsRelativeDate(current))
+            return current;
+        return Array.isArray(current) || (current && typeof current === 'object') ? null : current;
+    }
+    // -------------------------------------------------------------------------
+    // Template helpers
+    // -------------------------------------------------------------------------
+    /** The field metadata for a rule's current `field` key (or undefined if unset). */
+    fieldOf(rule) {
+        return rule.field ? this.fieldByKey()[rule.field] : undefined;
+    }
+    /** Operators allowed for a rule, derived from its field's type / override. */
+    allowedOperators(rule) {
+        return qbAllowedOperators(this.fieldOf(rule));
+    }
+    /** Whether to render the operator picker — hidden when only one operator is allowed. */
+    showOperatorSelector(rule) {
+        return this.allowedOperators(rule).length > 1;
+    }
+    /** True for NULL / NOT_NULL — the template then renders no value editor. */
+    isNoData(op) {
+        return qbIsNoDataOperator(op);
+    }
+    /** True for IN / NOT_IN — the template then renders a multi-select value editor. */
+    isMulti(op) {
+        return qbIsMultiOperator(op);
+    }
+    /** `[true/false]` option list for a boolean field's value select (stable reference). */
+    booleanItems(field) {
+        return this.#booleanOptionsByKey().get(field.key) ?? QB_EMPTY_OPTIONS;
+    }
+    /** Current date-value mode of a rule, derived from its value (no separate state). */
+    dateMode(rule) {
+        const v = rule.value;
+        if (qbIsRelativeDate(v))
+            return v.rel === 'now' ? 'now' : 'relative';
+        return 'absolute';
+    }
+    /** Switch a date/datetime rule's value mode, reseeding the value for the new mode. */
+    setDateMode(rule, mode) {
+        if (this.disabled())
+            return;
+        if (mode === 'now')
+            rule.value = { rel: 'now' };
+        else if (mode === 'relative')
+            rule.value = qbDefaultRelative();
+        else
+            rule.value = null; // absolute — pick a concrete date
+        this.#apply();
+    }
+    /** Read the offset amount of a relative rule (default 1). */
+    relativeAmount(rule) {
+        const v = rule.value;
+        return qbIsRelativeDate(v) && v.rel === 'offset' ? v.amount ?? 1 : 1;
+    }
+    /** Set the offset amount (clamped to an integer >= 1). */
+    setRelativeAmount(rule, raw) {
+        if (this.disabled())
+            return;
+        const n = Math.floor(Number(raw));
+        const amount = Number.isNaN(n) || n < 1 ? 1 : n;
+        const cur = qbIsRelativeDate(rule.value) ? rule.value : qbDefaultRelative();
+        rule.value = { rel: 'offset', unit: cur.unit ?? 'day', amount, direction: cur.direction ?? 'previous' };
+        this.#apply();
+    }
+    /** Read the `'unit:direction'` token of a relative rule (default `'day:previous'`). */
+    relativeUnitDirValue(rule) {
+        const v = rule.value;
+        if (qbIsRelativeDate(v) && v.rel === 'offset')
+            return `${v.unit ?? 'day'}:${v.direction ?? 'previous'}`;
+        return 'day:previous';
+    }
+    /** Set the offset unit + direction from a `'unit:direction'` token. */
+    setRelativeUnitDir(rule, token) {
+        if (this.disabled())
+            return;
+        const [unit, direction] = (token ?? 'day:previous').split(':');
+        const cur = qbIsRelativeDate(rule.value) ? rule.value : qbDefaultRelative();
+        rule.value = { rel: 'offset', unit, amount: cur.amount ?? 1, direction };
+        this.#apply();
     }
-    removeItem(parentGroup, index) {
-        parentGroup.rules.splice(index, 1);
+    /** Build a `data-autoid` for an inner control under this builder's `autoId` prefix. */
+    autoIdFor(suffix) {
+        return `${this.autoId() ?? 'qb'}-${suffix}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, host: { listeners: { "document:click": "closeAll()" } }, ngImport: i0, template: "<div class=\"qb-container\">\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\">\n    \n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n      <div class=\"qb-condition-switch\">\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'AND'\" \n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'OR'\" \n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        \n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\n        </div>\n\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      <div class=\"qb-list\">\n        <div *ngFor=\"let item of group.rules; let i = index\" \n             class=\"qb-treenode\"\n             [class.is-group]=\"isGroup(item)\"\n             [class.is-rule]=\"!isGroup(item)\">\n          \n          <ng-container *ngIf=\"!isGroup(item)\">\n            <div class=\"qb-rule-card\">\n              <div class=\"form-row\">\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n                <ng-container *ngIf=\"item.field\">\n                    <div class=\"divider\"></div>\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n                        <option value=\"Equal\">Equal</option>\n                        <option value=\"Not Equal\">Not Equal</option>\n                    </select>\n                    <div class=\"divider\"></div>\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n                </ng-container>\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"isGroup(item)\">\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, rootLogic: { classPropertyName: "rootLogic", publicName: "rootLogic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filters: "filtersChange", rootLogic: "rootLogicChange" }, ngImport: i0, template: "@if (isView()) {\n  <div class=\"qb-view\" [attr.data-autoid]=\"autoIdFor('view')\" aria-readonly=\"true\">\n    @if (tokens().length) {\n      @for (t of tokens(); track $index) {\n        <span class=\"qb-tok qb-tok-{{ t.kind }}\">{{ t.text }}</span>\n      }\n    } @else {\n      <span class=\"qb-view-empty\">\u2014</span>\n    }\n  </div>\n} @else {\n  <div class=\"qb-container\" [class.is-disabled]=\"disabled()\" (click)=\"closeAllDropdowns()\">\n    <ng-container [ngTemplateOutlet]=\"groupTpl\" [ngTemplateOutletContext]=\"{ $implicit: tree(), isRoot: true }\"></ng-container>\n  </div>\n}\n\n<!-- Recursive group node -->\n<ng-template #groupTpl let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\" [class.is-root]=\"isRoot\">\n    <div class=\"qb-header\" [class.is-open]=\"group.open\">\n      <div class=\"qb-logic-switch\">\n        <button type=\"button\" [class.active]=\"group.logic === 'AND'\" [disabled]=\"disabled()\" (click)=\"setGroupLogic(group, 'AND')\">AND</button>\n        <button type=\"button\" [class.active]=\"group.logic === 'OR'\" [disabled]=\"disabled()\" (click)=\"setGroupLogic(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"qb-btn qb-btn-add\" title=\"Th\u00EAm\" aria-label=\"Th\u00EAm \u0111i\u1EC1u ki\u1EC7n ho\u1EB7c nh\u00F3m\" [disabled]=\"disabled()\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        @if (group.open) {\n          <div class=\"qb-dropdown\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" (click)=\"addRule(group)\">+ \u0110i\u1EC1u ki\u1EC7n</button>\n            <button type=\"button\" (click)=\"addGroup(group)\">+ Nh\u00F3m</button>\n          </div>\n        }\n        @if (!isRoot) {\n          <button type=\"button\" class=\"qb-btn qb-btn-remove\" title=\"Xo\u00E1 nh\u00F3m\" aria-label=\"Xo\u00E1 nh\u00F3m\" [disabled]=\"disabled()\" (click)=\"removeNode(parent, index)\">\u2715</button>\n        }\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      @for (node of group.children; track node.id; let i = $index) {\n        <div class=\"qb-treenode\" [class.is-group]=\"isGroup(node)\" [class.is-rule]=\"!isGroup(node)\">\n          @if (isGroup(node)) {\n            <ng-container\n              [ngTemplateOutlet]=\"groupTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: node, isRoot: false, parent: group, index: i }\"\n            ></ng-container>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"ruleTpl\" [ngTemplateOutletContext]=\"{ $implicit: node, parent: group, index: i }\"></ng-container>\n          }\n        </div>\n      } @empty {\n        <div class=\"qb-empty\">Ch\u01B0a c\u00F3 \u0111i\u1EC1u ki\u1EC7n</div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Single rule node: field \u2192 operator \u2192 value -->\n<ng-template #ruleTpl let-rule let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-rule\">\n    <sd-select\n      class=\"qb-field\"\n      [items]=\"fields()\"\n      valueField=\"key\"\n      displayField=\"label\"\n      placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng\"\n      size=\"sm\"\n      [model]=\"rule.field\"\n      (modelChange)=\"setField(rule, $event)\"\n      [disabled]=\"disabled()\"\n      [clearable]=\"false\"\n      hideInlineError\n      [autoId]=\"autoIdFor('field-' + index)\"\n    ></sd-select>\n\n    @if (rule.field) {\n      <div class=\"qb-divider\"></div>\n\n      @if (showOperatorSelector(rule)) {\n        <sd-operator\n          class=\"qb-op\"\n          [operators]=\"allowedOperators(rule)\"\n          [model]=\"rule.operator\"\n          (modelChange)=\"setOperator(rule, $event)\"\n          [disabled]=\"disabled()\"\n          [autoId]=\"autoIdFor('op-' + index)\"\n        ></sd-operator>\n      }\n\n      @if (rule.operator && !isNoData(rule.operator)) {\n        <div class=\"qb-divider\"></div>\n\n        @if (rule.operator === 'BETWEEN') {\n          <div class=\"qb-between\">\n            @switch (fieldOf(rule)?.type) {\n              @case ('number') {\n                <sd-input class=\"qb-val\" type=\"number\" placeholder=\"T\u1EEB\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-input>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-input class=\"qb-val\" type=\"number\" placeholder=\"\u0110\u1EBFn\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-input>\n              }\n              @case ('date') {\n                <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-date>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-date>\n              }\n              @case ('datetime') {\n                <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-datetime>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-datetime>\n              }\n            }\n          </div>\n        } @else {\n          @switch (fieldOf(rule)?.type) {\n            @case ('string') {\n              <sd-input class=\"qb-val\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('number') {\n              <sd-input class=\"qb-val\" type=\"number\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('boolean') {\n              <sd-select class=\"qb-val\" [items]=\"booleanItems(fieldOf(rule)!)\" valueField=\"value\" displayField=\"display\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-select>\n            }\n            @case ('date') {\n              @let _dateMode = dateMode(rule);\n              <sd-select class=\"qb-date-mode\" [items]=\"dateModes\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"_dateMode\" (modelChange)=\"setDateMode(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\"></sd-select>\n              @switch (_dateMode) {\n                @case ('absolute') {\n                  <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-date>\n                }\n                @case ('relative') {\n                  <sd-input class=\"qb-rel-amount\" type=\"number\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('rel-unit-' + index)\"></sd-select>\n                }\n              }\n            }\n            @case ('datetime') {\n              @let _dtMode = dateMode(rule);\n              <sd-select class=\"qb-date-mode\" [items]=\"dateModes\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"_dtMode\" (modelChange)=\"setDateMode(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\"></sd-select>\n              @switch (_dtMode) {\n                @case ('absolute') {\n                  <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-datetime>\n                }\n                @case ('relative') {\n                  <sd-input class=\"qb-rel-amount\" type=\"number\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('rel-unit-' + index)\"></sd-select>\n                }\n              }\n            }\n            @case ('values') {\n              <sd-select class=\"qb-val\" [items]=\"fieldOf(rule)!.values || []\" valueField=\"value\" displayField=\"display\" [multiple]=\"isMulti(rule.operator)\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-select>\n            }\n          }\n        }\n      }\n    }\n\n    <button type=\"button\" class=\"qb-btn qb-btn-remove-rule\" title=\"Xo\u00E1 \u0111i\u1EC1u ki\u1EC7n\" aria-label=\"Xo\u00E1 \u0111i\u1EC1u ki\u1EC7n\" [disabled]=\"disabled()\" (click)=\"removeNode(parent, index)\">\u2715</button>\n  </div>\n</ng-template>\n", styles: [":host{display:block;font-size:14px;color:var(--sd-text, #333)}.qb-view{display:block;width:100%;min-height:38px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;background:var(--sd-disabled-bg, #f6f7f9);color:var(--sd-text, #333);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;line-height:1.7;cursor:default;-webkit-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-word}.qb-view-empty{color:#98a2b3}.qb-tok{white-space:pre}.qb-tok.qb-tok-field{color:var(--sd-text, #1d2939);font-weight:600}.qb-tok.qb-tok-op{color:var(--sd-primary, #2a66f4);font-weight:600}.qb-tok.qb-tok-value{color:var(--sd-success, #1a7f37)}.qb-tok.qb-tok-logic{color:#98a2b3;font-weight:700;text-transform:uppercase}.qb-tok.qb-tok-paren{color:#667085}.qb-container{padding:16px;background:#fff;border:1px solid #e0e0e0;border-radius:6px}.qb-container.is-disabled{opacity:.7;pointer-events:none}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-logic-switch{display:inline-flex;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;height:30px}.qb-logic-switch button{border:none;background:transparent;padding:0 14px;font-weight:600;font-size:12px;cursor:pointer;color:#667085;height:100%}.qb-logic-switch button.active{background:var(--sd-primary, #2a66f4);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary-dark, #1c4ad9)}.qb-logic-switch button[disabled]{cursor:default}.qb-actions{position:relative;display:flex;align-items:center;gap:4px}.qb-btn{background:transparent;border:none;cursor:pointer;font-size:16px;color:#667085;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}.qb-btn:hover:not([disabled]){background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary, #2a66f4)}.qb-btn[disabled]{cursor:default;color:#cbd2dc}.qb-btn-remove:hover:not([disabled]),.qb-btn-remove-rule:hover:not([disabled]){background:#fee4e2;color:#d92d20}.qb-btn-remove-rule{margin-left:auto}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #1018281f;border-radius:6px;min-width:150px;z-index:100;overflow:hidden}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;cursor:pointer;font-size:13px;color:#344054}.qb-dropdown button:hover{background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary, #2a66f4)}.qb-body{padding-left:24px}.qb-treenode{position:relative;padding-left:22px;margin-bottom:12px}.qb-treenode:last-child{margin-bottom:0}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:50%;border-left:1px dashed #d0d5dd}.qb-treenode:after{content:\"\";position:absolute;left:0;top:50%;width:18px;border-top:1px dashed #d0d5dd}.qb-treenode:last-child:before{bottom:auto;height:calc(50% + 12px)}.qb-empty{color:#98a2b3;font-style:italic;font-size:13px;padding:4px 0}.qb-rule{display:flex;align-items:center;gap:8px;background:#fafbfc;border:1px solid #e0e0e0;border-radius:6px;padding:6px 10px}.qb-rule:hover{border-color:#c2c8d0}.qb-field{min-width:150px}.qb-val{min-width:140px}.qb-between{display:flex;align-items:center;gap:6px}.qb-dash{color:#98a2b3}.qb-divider{width:1px;align-self:stretch;background:#e0e0e0}.qb-treenode.is-group>.qb-group{border:1px solid #e0e0e0;border-left:2px solid var(--sd-primary, #2a66f4);border-radius:6px;padding:12px;background:#fff}.qb-date-mode{min-width:120px}.qb-rel-amount{width:72px}.qb-rel-unit{min-width:110px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "clearable", "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", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "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", "clearable", "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: SdQueryBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-builder', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"qb-container\">\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\">\n    \n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n      <div class=\"qb-condition-switch\">\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'AND'\" \n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'OR'\" \n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        \n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\n        </div>\n\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      <div class=\"qb-list\">\n        <div *ngFor=\"let item of group.rules; let i = index\" \n             class=\"qb-treenode\"\n             [class.is-group]=\"isGroup(item)\"\n             [class.is-rule]=\"!isGroup(item)\">\n          \n          <ng-container *ngIf=\"!isGroup(item)\">\n            <div class=\"qb-rule-card\">\n              <div class=\"form-row\">\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n                <ng-container *ngIf=\"item.field\">\n                    <div class=\"divider\"></div>\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n                        <option value=\"Equal\">Equal</option>\n                        <option value=\"Not Equal\">Not Equal</option>\n                    </select>\n                    <div class=\"divider\"></div>\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n                </ng-container>\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"isGroup(item)\">\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"] }]
-        }], propDecorators: { group: [{
-                type: Input
-            }], groupChange: [{
-                type: Output
-            }], closeAll: [{
-                type: HostListener,
-                args: ['document:click']
-            }] } });
+            args: [{ selector: 'sd-query-builder', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SdOperator, SdSelect, SdInput, SdDate, SdDatetime], template: "@if (isView()) {\n  <div class=\"qb-view\" [attr.data-autoid]=\"autoIdFor('view')\" aria-readonly=\"true\">\n    @if (tokens().length) {\n      @for (t of tokens(); track $index) {\n        <span class=\"qb-tok qb-tok-{{ t.kind }}\">{{ t.text }}</span>\n      }\n    } @else {\n      <span class=\"qb-view-empty\">\u2014</span>\n    }\n  </div>\n} @else {\n  <div class=\"qb-container\" [class.is-disabled]=\"disabled()\" (click)=\"closeAllDropdowns()\">\n    <ng-container [ngTemplateOutlet]=\"groupTpl\" [ngTemplateOutletContext]=\"{ $implicit: tree(), isRoot: true }\"></ng-container>\n  </div>\n}\n\n<!-- Recursive group node -->\n<ng-template #groupTpl let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\" [class.is-root]=\"isRoot\">\n    <div class=\"qb-header\" [class.is-open]=\"group.open\">\n      <div class=\"qb-logic-switch\">\n        <button type=\"button\" [class.active]=\"group.logic === 'AND'\" [disabled]=\"disabled()\" (click)=\"setGroupLogic(group, 'AND')\">AND</button>\n        <button type=\"button\" [class.active]=\"group.logic === 'OR'\" [disabled]=\"disabled()\" (click)=\"setGroupLogic(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"qb-btn qb-btn-add\" title=\"Th\u00EAm\" aria-label=\"Th\u00EAm \u0111i\u1EC1u ki\u1EC7n ho\u1EB7c nh\u00F3m\" [disabled]=\"disabled()\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        @if (group.open) {\n          <div class=\"qb-dropdown\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" (click)=\"addRule(group)\">+ \u0110i\u1EC1u ki\u1EC7n</button>\n            <button type=\"button\" (click)=\"addGroup(group)\">+ Nh\u00F3m</button>\n          </div>\n        }\n        @if (!isRoot) {\n          <button type=\"button\" class=\"qb-btn qb-btn-remove\" title=\"Xo\u00E1 nh\u00F3m\" aria-label=\"Xo\u00E1 nh\u00F3m\" [disabled]=\"disabled()\" (click)=\"removeNode(parent, index)\">\u2715</button>\n        }\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      @for (node of group.children; track node.id; let i = $index) {\n        <div class=\"qb-treenode\" [class.is-group]=\"isGroup(node)\" [class.is-rule]=\"!isGroup(node)\">\n          @if (isGroup(node)) {\n            <ng-container\n              [ngTemplateOutlet]=\"groupTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: node, isRoot: false, parent: group, index: i }\"\n            ></ng-container>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"ruleTpl\" [ngTemplateOutletContext]=\"{ $implicit: node, parent: group, index: i }\"></ng-container>\n          }\n        </div>\n      } @empty {\n        <div class=\"qb-empty\">Ch\u01B0a c\u00F3 \u0111i\u1EC1u ki\u1EC7n</div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Single rule node: field \u2192 operator \u2192 value -->\n<ng-template #ruleTpl let-rule let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-rule\">\n    <sd-select\n      class=\"qb-field\"\n      [items]=\"fields()\"\n      valueField=\"key\"\n      displayField=\"label\"\n      placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng\"\n      size=\"sm\"\n      [model]=\"rule.field\"\n      (modelChange)=\"setField(rule, $event)\"\n      [disabled]=\"disabled()\"\n      [clearable]=\"false\"\n      hideInlineError\n      [autoId]=\"autoIdFor('field-' + index)\"\n    ></sd-select>\n\n    @if (rule.field) {\n      <div class=\"qb-divider\"></div>\n\n      @if (showOperatorSelector(rule)) {\n        <sd-operator\n          class=\"qb-op\"\n          [operators]=\"allowedOperators(rule)\"\n          [model]=\"rule.operator\"\n          (modelChange)=\"setOperator(rule, $event)\"\n          [disabled]=\"disabled()\"\n          [autoId]=\"autoIdFor('op-' + index)\"\n        ></sd-operator>\n      }\n\n      @if (rule.operator && !isNoData(rule.operator)) {\n        <div class=\"qb-divider\"></div>\n\n        @if (rule.operator === 'BETWEEN') {\n          <div class=\"qb-between\">\n            @switch (fieldOf(rule)?.type) {\n              @case ('number') {\n                <sd-input class=\"qb-val\" type=\"number\" placeholder=\"T\u1EEB\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-input>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-input class=\"qb-val\" type=\"number\" placeholder=\"\u0110\u1EBFn\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-input>\n              }\n              @case ('date') {\n                <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-date>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-date>\n              }\n              @case ('datetime') {\n                <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-datetime>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-datetime>\n              }\n            }\n          </div>\n        } @else {\n          @switch (fieldOf(rule)?.type) {\n            @case ('string') {\n              <sd-input class=\"qb-val\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('number') {\n              <sd-input class=\"qb-val\" type=\"number\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('boolean') {\n              <sd-select class=\"qb-val\" [items]=\"booleanItems(fieldOf(rule)!)\" valueField=\"value\" displayField=\"display\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-select>\n            }\n            @case ('date') {\n              @let _dateMode = dateMode(rule);\n              <sd-select class=\"qb-date-mode\" [items]=\"dateModes\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"_dateMode\" (modelChange)=\"setDateMode(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\"></sd-select>\n              @switch (_dateMode) {\n                @case ('absolute') {\n                  <sd-date class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-date>\n                }\n                @case ('relative') {\n                  <sd-input class=\"qb-rel-amount\" type=\"number\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('rel-unit-' + index)\"></sd-select>\n                }\n              }\n            }\n            @case ('datetime') {\n              @let _dtMode = dateMode(rule);\n              <sd-select class=\"qb-date-mode\" [items]=\"dateModes\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"_dtMode\" (modelChange)=\"setDateMode(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\"></sd-select>\n              @switch (_dtMode) {\n                @case ('absolute') {\n                  <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-datetime>\n                }\n                @case ('relative') {\n                  <sd-input class=\"qb-rel-amount\" type=\"number\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"disabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('rel-unit-' + index)\"></sd-select>\n                }\n              }\n            }\n            @case ('values') {\n              <sd-select class=\"qb-val\" [items]=\"fieldOf(rule)!.values || []\" valueField=\"value\" displayField=\"display\" [multiple]=\"isMulti(rule.operator)\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"disabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-select>\n            }\n          }\n        }\n      }\n    }\n\n    <button type=\"button\" class=\"qb-btn qb-btn-remove-rule\" title=\"Xo\u00E1 \u0111i\u1EC1u ki\u1EC7n\" aria-label=\"Xo\u00E1 \u0111i\u1EC1u ki\u1EC7n\" [disabled]=\"disabled()\" (click)=\"removeNode(parent, index)\">\u2715</button>\n  </div>\n</ng-template>\n", styles: [":host{display:block;font-size:14px;color:var(--sd-text, #333)}.qb-view{display:block;width:100%;min-height:38px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;background:var(--sd-disabled-bg, #f6f7f9);color:var(--sd-text, #333);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;line-height:1.7;cursor:default;-webkit-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-word}.qb-view-empty{color:#98a2b3}.qb-tok{white-space:pre}.qb-tok.qb-tok-field{color:var(--sd-text, #1d2939);font-weight:600}.qb-tok.qb-tok-op{color:var(--sd-primary, #2a66f4);font-weight:600}.qb-tok.qb-tok-value{color:var(--sd-success, #1a7f37)}.qb-tok.qb-tok-logic{color:#98a2b3;font-weight:700;text-transform:uppercase}.qb-tok.qb-tok-paren{color:#667085}.qb-container{padding:16px;background:#fff;border:1px solid #e0e0e0;border-radius:6px}.qb-container.is-disabled{opacity:.7;pointer-events:none}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-logic-switch{display:inline-flex;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;height:30px}.qb-logic-switch button{border:none;background:transparent;padding:0 14px;font-weight:600;font-size:12px;cursor:pointer;color:#667085;height:100%}.qb-logic-switch button.active{background:var(--sd-primary, #2a66f4);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary-dark, #1c4ad9)}.qb-logic-switch button[disabled]{cursor:default}.qb-actions{position:relative;display:flex;align-items:center;gap:4px}.qb-btn{background:transparent;border:none;cursor:pointer;font-size:16px;color:#667085;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}.qb-btn:hover:not([disabled]){background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary, #2a66f4)}.qb-btn[disabled]{cursor:default;color:#cbd2dc}.qb-btn-remove:hover:not([disabled]),.qb-btn-remove-rule:hover:not([disabled]){background:#fee4e2;color:#d92d20}.qb-btn-remove-rule{margin-left:auto}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #1018281f;border-radius:6px;min-width:150px;z-index:100;overflow:hidden}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;cursor:pointer;font-size:13px;color:#344054}.qb-dropdown button:hover{background:var(--sd-primary-light, #eaf1ff);color:var(--sd-primary, #2a66f4)}.qb-body{padding-left:24px}.qb-treenode{position:relative;padding-left:22px;margin-bottom:12px}.qb-treenode:last-child{margin-bottom:0}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:50%;border-left:1px dashed #d0d5dd}.qb-treenode:after{content:\"\";position:absolute;left:0;top:50%;width:18px;border-top:1px dashed #d0d5dd}.qb-treenode:last-child:before{bottom:auto;height:calc(50% + 12px)}.qb-empty{color:#98a2b3;font-style:italic;font-size:13px;padding:4px 0}.qb-rule{display:flex;align-items:center;gap:8px;background:#fafbfc;border:1px solid #e0e0e0;border-radius:6px;padding:6px 10px}.qb-rule:hover{border-color:#c2c8d0}.qb-field{min-width:150px}.qb-val{min-width:140px}.qb-between{display:flex;align-items:center;gap:6px}.qb-dash{color:#98a2b3}.qb-divider{width:1px;align-self:stretch;background:#e0e0e0}.qb-treenode.is-group>.qb-group{border:1px solid #e0e0e0;border-left:2px solid var(--sd-primary, #2a66f4);border-radius:6px;padding:12px;background:#fff}.qb-date-mode{min-width:120px}.qb-rel-amount{width:72px}.qb-rel-unit{min-width:110px}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SdQueryBuilder };
+export { QB_DATE_MODES, QB_DEFAULT_OPERATOR_BY_TYPE, QB_EMPTY_OPTIONS, QB_MULTI_OPERATORS, QB_NO_DATA_OPERATORS, QB_OPERATORS_BY_TYPE, QB_RELATIVE_UNIT_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, isQbGroup, qbAllowedOperators, qbDefaultOperator, qbDefaultRelative, qbId, qbIsMultiOperator, qbIsNoDataOperator, qbIsRelativeDate, qbNewGroup, qbNewRule, treeToFilter };
 //# sourceMappingURL=sdcorejs-angular-components-query-builder.mjs.map