@sdcorejs/angular 19.0.4 → 19.0.6

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

@@ -1,11 +1,16 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, model, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { SdDate } from '@sdcorejs/angular/forms/date';
 import { SdDatetime } from '@sdcorejs/angular/forms/datetime';
 import { SdInput } from '@sdcorejs/angular/forms/input';
+import { SdInputNumber } from '@sdcorejs/angular/forms/input-number';
 import { SdSelect } from '@sdcorejs/angular/forms/select';
+import { SdItemDefDefDirective } from '@sdcorejs/angular/forms/directives';
 import { SdOperator } from '@sdcorejs/angular/components/operator';
+import { FilterUtilities } from '@sdcorejs/utils/fns';
 
 /** Type guard — narrows a `QbNode` to a `QbGroup`. */
 function isQbGroup(node) {
@@ -64,6 +69,32 @@ function qbIsNoDataOperator(op) {
 function qbIsMultiOperator(op) {
     return !!op && QB_MULTI_OPERATORS.includes(op);
 }
+/** True when the operator accepts one right-hand operand, including a field reference. */
+function qbSupportsFieldCompareOperator(op) {
+    return !!op && !qbIsNoDataOperator(op) && !qbIsMultiOperator(op) && op !== 'BETWEEN';
+}
+/**
+ * Icon fallback per field type when `SdQueryBuilderField.icon` is not set.
+ * Mirrors query-bar's `SD_QUERY_TYPE_ICON` so the two components read consistently,
+ * but kept local so query-builder has no dependency on the query-bar package.
+ */
+const QB_TYPE_ICON = {
+    string: 'text_fields',
+    number: 'tag',
+    boolean: 'toggle_on',
+    date: 'event',
+    datetime: 'schedule',
+    values: 'list',
+};
+/**
+ * Icon shown before a field in the field picker / selected trigger.
+ * Priority: `field.icon` → `QB_TYPE_ICON[field.type]` → `'tune'` (default, like query-bar).
+ */
+function qbFieldIcon(field) {
+    if (!field)
+        return 'tune';
+    return field.icon ?? QB_TYPE_ICON[field.type] ?? 'tune';
+}
 // ---------------------------------------------------------------------------
 // Node factories — monotonic counter for stable, render-safe ids (no Math.random
 // / Date.now so SSR + tests stay deterministic).
@@ -74,26 +105,35 @@ 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 };
+function qbNewRule(field, operator, value, valueSource, compareField) {
+    return { id: qbId('r'), kind: 'rule', field, operator, value, valueSource, compareField };
 }
 /** 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');
+/** Sentinel held as a rule value (and emitted as `data`) for the "today" date mode. */
+const QB_TODAY = 'TODAY';
+/** Type guard — narrows a rule value to a utils `DateRelative` (offset spec). */
+const qbIsRelativeDate = FilterUtilities.isDateRelative;
+/** Type guard — narrows a rule value to the `'TODAY'` sentinel ("now"/today mode). */
+function qbIsToday(v) {
+    return v === QB_TODAY;
 }
 /** Starting relative value when a rule first switches to "relative" mode. */
 function qbDefaultRelative() {
-    return { rel: 'offset', unit: 'day', amount: 1, direction: 'previous' };
+    return { amount: 1, direction: 'previous', unit: 'day' };
 }
 /** 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' },
+    { value: 'absolute', display: 'Ngày cụ thể', icon: 'event' },
+    { value: 'now', display: 'Hôm nay', icon: 'today' },
+    { value: 'relative', display: 'Tương đối', icon: 'history' },
+];
+/** Stable option list for choosing between a literal value and another field. */
+const QB_VALUE_SOURCE_OPTIONS = [
+    { value: 'literal', display: 'Nhập giá trị', icon: 'edit_note' },
+    { value: 'field', display: 'Chọn trường', icon: 'view_column' },
 ];
 /** Stable combined direction×unit option list (token `'unit:direction'`). */
 const QB_RELATIVE_UNIT_OPTIONS = [
@@ -134,6 +174,11 @@ function ruleToFilter(rule) {
     if (QB_NO_DATA_OPERATORS.includes(operator)) {
         return { field: rule.field, operator };
     }
+    if (rule.valueSource === 'field') {
+        if (!qbSupportsFieldCompareOperator(operator) || isEmptyValue(rule.compareField))
+            return null;
+        return { field: rule.field, operator, dataType: 'field', data: rule.compareField };
+    }
     if (operator === 'BETWEEN') {
         const v = rule.value;
         if (!v || typeof v !== 'object')
@@ -148,20 +193,25 @@ function ruleToFilter(rule) {
             return null;
         return { field: rule.field, operator, data: arr };
     }
+    if (qbIsToday(rule.value)) {
+        return { field: rule.field, operator, dataType: 'date-today', data: QB_TODAY };
+    }
     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
+        // emit only 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 },
+                dataType: 'date-relative',
+                data: { amount: v.amount, direction: v.direction, unit: v.unit },
             };
         }
         return null;
     }
+    // A non-relative plain object is an incomplete/stray shape (e.g. a partial offset) — drop it.
+    if (rule.value !== null && typeof rule.value === 'object' && !Array.isArray(rule.value))
+        return null;
     if (isEmptyValue(rule.value))
         return null;
     return { field: rule.field, operator, data: rule.value };
@@ -194,8 +244,35 @@ function ruleFromFilter(filter) {
     if (QB_NO_DATA_OPERATORS.includes(operator)) {
         return qbNewRule(filter.field, operator);
     }
+    if (filter.dataType === 'field') {
+        return qbNewRule(filter.field, operator, undefined, 'field', filter.data);
+    }
+    // Relative dates: read the utils `dataType` discriminator back into the internal value.
+    if (filter.dataType === 'date-today') {
+        return qbNewRule(filter.field, operator, QB_TODAY);
+    }
+    if (filter.dataType === 'date-relative') {
+        return qbNewRule(filter.field, operator, filter.data);
+    }
+    // Back-compat: legacy `{ rel: 'now' | 'offset' }` payloads (pre-dataType migration)
+    // still seed the editor correctly.
+    const legacy = readLegacyRelative(filter.data);
+    if (legacy !== undefined) {
+        return qbNewRule(filter.field, operator, legacy);
+    }
     return qbNewRule(filter.field, operator, filter.data);
 }
+/** Map a pre-migration `{ rel }` payload to the new internal value, or `undefined` if not legacy. */
+function readLegacyRelative(data) {
+    if (!data || typeof data !== 'object')
+        return undefined;
+    if (data.rel === 'now')
+        return QB_TODAY;
+    if (data.rel === 'offset' && data.unit && data.direction && typeof data.amount === 'number') {
+        return { amount: data.amount, direction: data.direction, unit: data.unit };
+    }
+    return undefined;
+}
 function nodeFromFilter(filter) {
     return isAndOr$1(filter) ? groupFromFilter(filter) : ruleFromFilter(filter);
 }
@@ -223,17 +300,17 @@ function filterToTree(filter) {
 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. */
+const REL_UNIT_VI = { hour: 'giờ', day: 'ngày', week: 'tuần', month: 'tháng' };
+/** Render a relative-date offset 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 unit = REL_UNIT_VI[v.unit] ?? REL_UNIT_VI.day;
     const dir = v.direction === 'next' ? 'tới' : 'trước';
-    return `${v.amount ?? 1} ${unit} ${dir}`;
+    return `${v.amount} ${unit} ${dir}`;
 }
 /** Format one scalar value for the view string — quoted/labelled per field type. */
 function formatScalar(field, raw) {
+    if (qbIsToday(raw))
+        return 'hôm nay';
     if (qbIsRelativeDate(raw))
         return formatRelative(raw);
     if (raw === null || raw === undefined)
@@ -259,6 +336,11 @@ function likePattern(operator, raw) {
         return `'${esc}%'`;
     return `'%${esc}'`; // END_WITH / NOT_END_WITH
 }
+function operatorToken(operator) {
+    if (LIKE_OPERATORS.includes(operator))
+        return operator.startsWith('NOT_') ? 'not like' : 'like';
+    return SYMBOL[operator] ?? operator;
+}
 function ruleTokens(filter, fields) {
     const field = fields.find(f => f.key === filter.field);
     const out = [{ kind: 'field', text: field?.label ?? String(filter.field) }];
@@ -286,15 +368,23 @@ function ruleTokens(filter, fields) {
         out.push({ kind: 'value', text: `(${arr.map((v) => formatScalar(field, v)).join(', ')})` });
         return out;
     }
+    if (filter.dataType === 'field') {
+        const compareField = fields.find(f => f.key === filter.data);
+        sp();
+        out.push({ kind: 'op', text: operatorToken(operator) });
+        sp();
+        out.push({ kind: 'field', text: compareField?.label ?? String(filter.data) });
+        return out;
+    }
     if (LIKE_OPERATORS.includes(operator)) {
         sp();
-        out.push({ kind: 'op', text: operator.startsWith('NOT_') ? 'not like' : 'like' });
+        out.push({ kind: 'op', text: operatorToken(operator) });
         sp();
         out.push({ kind: 'value', text: likePattern(operator, String(filter.data ?? '')) });
         return out;
     }
     sp();
-    out.push({ kind: 'op', text: SYMBOL[operator] ?? operator });
+    out.push({ kind: 'op', text: operatorToken(operator) });
     sp();
     out.push({ kind: 'value', text: formatScalar(field, filter.data) });
     return out;
@@ -340,6 +430,7 @@ function filterToTokens(filter, fields) {
 function isAndOr(filter) {
     return !!filter && (filter.operator === 'AND' || filter.operator === 'OR') && Array.isArray(filter.data);
 }
+const QB_EMPTY_FIELDS = [];
 /**
  * Visual filter / rule builder. Compose nested AND / OR groups of
  * `field operator value` conditions; emits the canonical `Filter` (root is a
@@ -351,10 +442,14 @@ class SdQueryBuilder {
     // -------------------------------------------------------------------------
     // Inputs
     // -------------------------------------------------------------------------
+    /** Main option object. Prefer this API for new usage; individual inputs stay as a migration bridge. */
+    option = input(undefined);
     /** 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');
+    /** `value-only` = literal operands only · `value-or-field` = each rule may compare against another field. */
+    comparisonMode = input('value-only');
     /** Disable all editing controls. */
     disabled = input(false, { transform: booleanAttribute });
     /** Prefix for `data-autoid` on inner controls (E2E selectors). */
@@ -379,9 +474,14 @@ class SdQueryBuilder {
     // Derived state
     // -------------------------------------------------------------------------
     /** `field.key` → field, for fast lookup from a rule. */
+    resolvedFields = computed(() => this.option()?.fields ?? this.fields());
+    resolvedMode = computed(() => this.option()?.mode ?? this.mode());
+    resolvedComparisonMode = computed(() => this.option()?.comparisonMode ?? this.comparisonMode());
+    resolvedDisabled = computed(() => this.option()?.disabled ?? this.disabled());
+    resolvedAutoId = computed(() => this.option()?.autoId ?? this.autoId());
     fieldByKey = computed(() => {
         const map = {};
-        for (const f of this.fields())
+        for (const f of this.resolvedFields())
             map[f.key] = f;
         return map;
     });
@@ -390,7 +490,7 @@ class SdQueryBuilder {
      *  → `markForCheck()` loops → OOM). Recomputes only when `fields()` changes. */
     #booleanOptionsByKey = computed(() => {
         const map = new Map();
-        for (const f of this.fields()) {
+        for (const f of this.resolvedFields()) {
             if (f.type === 'boolean') {
                 map.set(f.key, [
                     { value: true, display: f.trueLabel ?? 'Có' },
@@ -402,31 +502,58 @@ class SdQueryBuilder {
     });
     /** Stable option list for the date-mode select. */
     dateModes = QB_DATE_MODES;
+    /** Stable option list for the literal-vs-field operand select. */
+    valueSourceOptions = QB_VALUE_SOURCE_OPTIONS;
     /** Stable combined unit×direction option list for the relative select. */
     relativeUnitOptions = QB_RELATIVE_UNIT_OPTIONS;
+    #compareFieldsByKey = computed(() => {
+        const fields = this.resolvedFields();
+        const map = new Map();
+        for (const left of fields) {
+            if (left.allowFieldCompare === false) {
+                map.set(left.key, QB_EMPTY_FIELDS);
+                continue;
+            }
+            map.set(left.key, fields.filter(right => {
+                if (right.key === left.key)
+                    return false;
+                if (right.allowFieldCompare === false)
+                    return false;
+                if (right.type !== left.type)
+                    return false;
+                if ((left.compareGroup ?? right.compareGroup) !== undefined && left.compareGroup !== right.compareGroup)
+                    return false;
+                return true;
+            }));
+        }
+        return map;
+    });
     /** View-mode token stream — recomputed from the emitted value. */
-    tokens = computed(() => filterToTokens(this.value(), this.fields()));
-    isView = computed(() => this.mode() === 'view');
+    tokens = computed(() => filterToTokens(this.option()?.value ?? this.value(), this.resolvedFields()));
+    isView = computed(() => this.resolvedMode() === 'view');
     /** Expose the type-guard to the template. */
     isGroup = isQbGroup;
+    /** Resolve the leading icon for a field (own `icon` → per-type → `'tune'`) — used by the field picker. */
+    fieldIcon = qbFieldIcon;
     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);
+            const option = this.option();
+            const v = option?.value ?? this.value();
+            const fl = option?.filters ?? this.filters();
+            const incoming = this.#coalesce(v, fl, option?.rootLogic);
             if (this.#filterEq(incoming, this.#lastEmitted))
                 return;
             this.#tree.set(filterToTree(incoming));
             this.#commit();
         });
     }
-    #coalesce(v, fl) {
+    #coalesce(v, fl, logic) {
         if (v)
             return v;
         if (fl && fl.length)
-            return { operator: untracked(() => this.rootLogic()), data: fl };
+            return { operator: logic ?? untracked(() => this.rootLogic()), data: fl };
         return null;
     }
     #filterEq(a, b) {
@@ -444,10 +571,14 @@ class SdQueryBuilder {
         const filter = treeToFilter(this.#tree());
         this.#lastEmitted = filter;
         this.value.set(filter);
-        this.filters.set(isAndOr(filter) ? filter.data : filter ? [filter] : []);
+        const filters = isAndOr(filter) ? filter.data : filter ? [filter] : [];
+        this.filters.set(filters);
         const logic = this.#tree().logic;
         if (this.rootLogic() !== logic)
             this.rootLogic.set(logic);
+        this.option()?.onValueChange?.(filter);
+        this.option()?.onFiltersChange?.(filters);
+        this.option()?.onRootLogicChange?.(logic);
     }
     /** Mutate-in-place + re-render + emit. */
     #apply() {
@@ -459,14 +590,14 @@ class SdQueryBuilder {
     // -------------------------------------------------------------------------
     /** 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)
+        if (this.resolvedDisabled() || 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())
+        if (this.resolvedDisabled())
             return;
         event.stopPropagation();
         const willOpen = !group.open;
@@ -493,7 +624,7 @@ class SdQueryBuilder {
     }
     /** Append a blank rule to `group`. */
     addRule(group) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
         group.children.push(qbNewRule());
         group.open = false;
@@ -501,7 +632,7 @@ class SdQueryBuilder {
     }
     /** Append a nested sub-group (seeded with one blank rule) to `group`. */
     addGroup(group) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
         group.children.push(qbNewGroup('AND', [qbNewRule()]));
         group.open = false;
@@ -509,7 +640,7 @@ class SdQueryBuilder {
     }
     /** Remove the child at `index` from `parent` (a rule or a whole sub-group). */
     removeNode(parent, index) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
         parent.children.splice(index, 1);
         this.#apply();
@@ -526,7 +657,7 @@ class SdQueryBuilder {
      *   key is a no-op — the field can be changed but never cleared (issue #2).
      */
     setField(rule, key) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
         if (key == null)
             return; // swap-only: never clear the field (issue #2)
@@ -535,37 +666,74 @@ class SdQueryBuilder {
         const op = qbDefaultOperator(field);
         rule.operator = op;
         rule.value = this.#defaultValueFor(op);
+        this.#useLiteralSource(rule);
         this.#apply();
     }
     /** Change `rule`'s operator and reshape its value to fit the new operator (array / range / none). */
     setOperator(rule, op) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
         rule.operator = op;
-        rule.value = this.#reshapeValue(op, rule.value);
+        if (rule.valueSource === 'field' && this.canCompareWithField(rule)) {
+            rule.value = null;
+            if (!this.#isCompareFieldAllowed(rule, rule.compareField))
+                rule.compareField = undefined;
+        }
+        else {
+            rule.value = this.#reshapeValue(op, rule.value);
+            this.#useLiteralSource(rule);
+        }
         this.#apply();
     }
     /** Set a single-value rule's value (coercing numeric fields to `number`). */
     setScalar(rule, raw) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         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())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         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())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         rule.value = { ...(rule.value ?? {}), to: this.#coerce(rule, raw) };
         this.#apply();
     }
+    setValueSource(rule, source) {
+        if (this.resolvedDisabled())
+            return;
+        if (source === 'field' && this.resolvedComparisonMode() === 'value-or-field' && this.canCompareWithField(rule)) {
+            rule.valueSource = 'field';
+            rule.value = null;
+            if (!this.#isCompareFieldAllowed(rule, rule.compareField))
+                rule.compareField = undefined;
+        }
+        else {
+            this.#useLiteralSource(rule);
+            rule.value = this.#defaultValueFor(rule.operator);
+        }
+        this.#apply();
+    }
+    setCompareField(rule, key) {
+        if (this.resolvedDisabled())
+            return;
+        if (!this.#isCompareFieldAllowed(rule, key))
+            return;
+        rule.valueSource = 'field';
+        rule.compareField = key;
+        rule.value = null;
+        this.#apply();
+    }
     /** Coerce numeric fields to `number` so the emitted Filter carries a real number. */
     #coerce(rule, raw) {
         const field = this.fieldByKey()[rule.field];
@@ -588,16 +756,23 @@ class SdQueryBuilder {
         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
+            // a relative spec / 'TODAY' 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))
+        // single value — keep a relative spec or the 'TODAY' sentinel; else drop array/range remnants
+        if (qbIsToday(current) || qbIsRelativeDate(current))
             return current;
         return Array.isArray(current) || (current && typeof current === 'object') ? null : current;
     }
+    #useLiteralSource(rule) {
+        rule.valueSource = 'literal';
+        rule.compareField = undefined;
+    }
+    #isCompareFieldAllowed(rule, key) {
+        return !!key && this.compareFields(rule).some(f => f.key === key);
+    }
     // -------------------------------------------------------------------------
     // Template helpers
     // -------------------------------------------------------------------------
@@ -613,6 +788,24 @@ class SdQueryBuilder {
     showOperatorSelector(rule) {
         return this.allowedOperators(rule).length > 1;
     }
+    compareFields(rule) {
+        const field = this.fieldOf(rule);
+        if (!field)
+            return QB_EMPTY_FIELDS;
+        return this.#compareFieldsByKey().get(field.key) ?? QB_EMPTY_FIELDS;
+    }
+    canCompareWithField(rule) {
+        return qbSupportsFieldCompareOperator(rule.operator) && this.compareFields(rule).length > 0;
+    }
+    showValueSourceSelector(rule) {
+        return this.canCompareWithField(rule) && (this.resolvedComparisonMode() === 'value-or-field' || rule.valueSource === 'field');
+    }
+    valueSourceOf(rule) {
+        return rule.valueSource === 'field' && this.canCompareWithField(rule) ? 'field' : 'literal';
+    }
+    isFieldSource(rule) {
+        return this.valueSourceOf(rule) === 'field';
+    }
     /** True for NULL / NOT_NULL — the template then renders no value editor. */
     isNoData(op) {
         return qbIsNoDataOperator(op);
@@ -628,16 +821,19 @@ class SdQueryBuilder {
     /** Current date-value mode of a rule, derived from its value (no separate state). */
     dateMode(rule) {
         const v = rule.value;
+        if (qbIsToday(v))
+            return 'now';
         if (qbIsRelativeDate(v))
-            return v.rel === 'now' ? 'now' : 'relative';
+            return 'relative';
         return 'absolute';
     }
     /** Switch a date/datetime rule's value mode, reseeding the value for the new mode. */
     setDateMode(rule, mode) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         if (mode === 'now')
-            rule.value = { rel: 'now' };
+            rule.value = QB_TODAY;
         else if (mode === 'relative')
             rule.value = qbDefaultRelative();
         else
@@ -647,49 +843,51 @@ class SdQueryBuilder {
     /** 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;
+        return qbIsRelativeDate(v) ? v.amount ?? 1 : 1;
     }
     /** Set the offset amount (clamped to an integer >= 1). */
     setRelativeAmount(rule, raw) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         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' };
+        rule.value = { amount, direction: cur.direction, unit: cur.unit };
         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'}`;
+        if (qbIsRelativeDate(v))
+            return `${v.unit}:${v.direction}`;
         return 'day:previous';
     }
     /** Set the offset unit + direction from a `'unit:direction'` token. */
     setRelativeUnitDir(rule, token) {
-        if (this.disabled())
+        if (this.resolvedDisabled())
             return;
+        this.#useLiteralSource(rule);
         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 };
+        rule.value = { amount: cur.amount, direction, unit };
         this.#apply();
     }
     /** Build a `data-autoid` for an inner control under this builder's `autoId` prefix. */
     autoIdFor(suffix) {
-        return `${this.autoId() ?? 'qb'}-${suffix}`;
+        return `${this.resolvedAutoId() ?? '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: "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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, comparisonMode: { classPropertyName: "comparisonMode", publicName: "comparisonMode", 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]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (click)=\"setGroupLogic(group, 'AND')\">AND</button>\n        <button type=\"button\" [class.active]=\"group.logic === 'OR'\" [disabled]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (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]=\"resolvedFields()\"\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]=\"resolvedDisabled()\"\n      [clearable]=\"false\"\n      hideInlineError\n      [autoId]=\"autoIdFor('field-' + index)\"\n    >\n      <!-- Option trong dropdown: icon th\u1EC3 hi\u1EC7n type + label. -->\n      <ng-template sdItemDef let-item=\"item\">\n        <span class=\"qb-opt\">\n          <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n          <span class=\"qb-opt-label\">{{ item.label }}</span>\n        </span>\n      </ng-template>\n      <!-- Gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn \u1EDF trigger: icon m\u1EB7c \u0111\u1ECBnh theo type khi field ch\u01B0a c\u00F3 icon ri\u00EAng. -->\n      <ng-template #sdSelected let-item=\"item\">\n        <span class=\"qb-opt\">\n          <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n          <span class=\"qb-opt-label\">{{ item?.label }}</span>\n        </span>\n      </ng-template>\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]=\"resolvedDisabled()\"\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 (showValueSourceSelector(rule)) {\n          <sd-select\n            class=\"qb-value-source\"\n            [items]=\"valueSourceOptions\"\n            valueField=\"value\"\n            displayField=\"display\"\n            size=\"sm\"\n            [model]=\"valueSourceOf(rule)\"\n            (modelChange)=\"setValueSource(rule, $event)\"\n            [disabled]=\"resolvedDisabled()\"\n            [clearable]=\"false\"\n            hideInlineError\n            [autoId]=\"autoIdFor('valuesource-' + index)\"\n          >\n            <ng-template sdItemDef let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item.display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item?.display }}</span>\n              </span>\n            </ng-template>\n          </sd-select>\n          <div class=\"qb-divider\"></div>\n        }\n\n        @if (isFieldSource(rule)) {\n          <sd-select\n            class=\"qb-val qb-compare-field\"\n            [items]=\"compareFields(rule)\"\n            valueField=\"key\"\n            displayField=\"label\"\n            placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng\"\n            size=\"sm\"\n            [model]=\"rule.compareField\"\n            (modelChange)=\"setCompareField(rule, $event)\"\n            [disabled]=\"resolvedDisabled()\"\n            [clearable]=\"false\"\n            hideInlineError\n            [autoId]=\"autoIdFor('compare-field-' + index)\"\n          >\n            <ng-template sdItemDef let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item.label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item?.label }}</span>\n              </span>\n            </ng-template>\n          </sd-select>\n        } @else if (rule.operator === 'BETWEEN') {\n          <div class=\"qb-between\">\n            @switch (fieldOf(rule)?.type) {\n              @case ('number') {\n                <sd-input-number class=\"qb-val\" placeholder=\"T\u1EEB\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-input-number>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-input-number class=\"qb-val\" placeholder=\"\u0110\u1EBFn\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-input-number>\n              }\n              @case ('date') {\n                <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-date>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('number') {\n              <sd-input-number class=\"qb-val\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input-number>\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]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\">\n                <ng-template sdItemDef let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item.display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item?.display }}</span>\n                  </span>\n                </ng-template>\n              </sd-select>\n              @switch (_dateMode) {\n                @case ('absolute') {\n                  <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-date>\n                }\n                @case ('relative') {\n                  <sd-input-number class=\"qb-rel-amount\" type=\"positive\" [precision]=\"0\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input-number>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\">\n                <ng-template sdItemDef let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item.display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item?.display }}</span>\n                  </span>\n                </ng-template>\n              </sd-select>\n              @switch (_dtMode) {\n                @case ('absolute') {\n                  <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-datetime>\n                }\n                @case ('relative') {\n                  <sd-input-number class=\"qb-rel-amount\" type=\"positive\" [precision]=\"0\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input-number>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" (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:0;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:170px}.qb-val{min-width:140px}.qb-value-source{min-width:132px}.qb-compare-field{min-width:170px}.qb-date-val{min-width:0;width:132px;flex:0 0 auto}::ng-deep .qb-opt{display:flex;align-items:center;gap:6px;min-width:0}::ng-deep .qb-opt .qb-opt-icon.mat-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin:0;font-size:18px;width:18px;height:18px;line-height:1;color:#667085}::ng-deep .qb-opt .qb-opt-label{min-width:0}.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:160px}.qb-rel-amount{width:72px}.qb-rel-unit{min-width:110px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.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: 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: 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", "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"] }, { kind: "directive", type: SdItemDefDefDirective, selector: "[sdItemDef]" }], 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, 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"] }]
+            args: [{ selector: 'sd-query-builder', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MatIconModule, SdOperator, SdSelect, SdInput, SdInputNumber, SdDate, SdDatetime, SdItemDefDefDirective], 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]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (click)=\"setGroupLogic(group, 'AND')\">AND</button>\n        <button type=\"button\" [class.active]=\"group.logic === 'OR'\" [disabled]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (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]=\"resolvedDisabled()\" (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]=\"resolvedFields()\"\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]=\"resolvedDisabled()\"\n      [clearable]=\"false\"\n      hideInlineError\n      [autoId]=\"autoIdFor('field-' + index)\"\n    >\n      <!-- Option trong dropdown: icon th\u1EC3 hi\u1EC7n type + label. -->\n      <ng-template sdItemDef let-item=\"item\">\n        <span class=\"qb-opt\">\n          <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n          <span class=\"qb-opt-label\">{{ item.label }}</span>\n        </span>\n      </ng-template>\n      <!-- Gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn \u1EDF trigger: icon m\u1EB7c \u0111\u1ECBnh theo type khi field ch\u01B0a c\u00F3 icon ri\u00EAng. -->\n      <ng-template #sdSelected let-item=\"item\">\n        <span class=\"qb-opt\">\n          <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n          <span class=\"qb-opt-label\">{{ item?.label }}</span>\n        </span>\n      </ng-template>\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]=\"resolvedDisabled()\"\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 (showValueSourceSelector(rule)) {\n          <sd-select\n            class=\"qb-value-source\"\n            [items]=\"valueSourceOptions\"\n            valueField=\"value\"\n            displayField=\"display\"\n            size=\"sm\"\n            [model]=\"valueSourceOf(rule)\"\n            (modelChange)=\"setValueSource(rule, $event)\"\n            [disabled]=\"resolvedDisabled()\"\n            [clearable]=\"false\"\n            hideInlineError\n            [autoId]=\"autoIdFor('valuesource-' + index)\"\n          >\n            <ng-template sdItemDef let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item.display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item?.display }}</span>\n              </span>\n            </ng-template>\n          </sd-select>\n          <div class=\"qb-divider\"></div>\n        }\n\n        @if (isFieldSource(rule)) {\n          <sd-select\n            class=\"qb-val qb-compare-field\"\n            [items]=\"compareFields(rule)\"\n            valueField=\"key\"\n            displayField=\"label\"\n            placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng\"\n            size=\"sm\"\n            [model]=\"rule.compareField\"\n            (modelChange)=\"setCompareField(rule, $event)\"\n            [disabled]=\"resolvedDisabled()\"\n            [clearable]=\"false\"\n            hideInlineError\n            [autoId]=\"autoIdFor('compare-field-' + index)\"\n          >\n            <ng-template sdItemDef let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item.label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ fieldIcon(item) }}</mat-icon>\n                <span class=\"qb-opt-label\">{{ item?.label }}</span>\n              </span>\n            </ng-template>\n          </sd-select>\n        } @else if (rule.operator === 'BETWEEN') {\n          <div class=\"qb-between\">\n            @switch (fieldOf(rule)?.type) {\n              @case ('number') {\n                <sd-input-number class=\"qb-val\" placeholder=\"T\u1EEB\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-input-number>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-input-number class=\"qb-val\" placeholder=\"\u0110\u1EBFn\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('to-' + index)\"></sd-input-number>\n              }\n              @case ('date') {\n                <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value?.from\" (modelChange)=\"setBetweenFrom(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('from-' + index)\"></sd-date>\n                <span class=\"qb-dash\">\u2014</span>\n                <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value?.to\" (modelChange)=\"setBetweenTo(rule, $event)\" [disabled]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" 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]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input>\n            }\n            @case ('number') {\n              <sd-input-number class=\"qb-val\" placeholder=\"Gi\u00E1 tr\u1ECB\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [min]=\"fieldOf(rule)?.min\" [max]=\"fieldOf(rule)?.max\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-input-number>\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]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\">\n                <ng-template sdItemDef let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item.display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item?.display }}</span>\n                  </span>\n                </ng-template>\n              </sd-select>\n              @switch (_dateMode) {\n                @case ('absolute') {\n                  <sd-date class=\"qb-val qb-date-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-date>\n                }\n                @case ('relative') {\n                  <sd-input-number class=\"qb-rel-amount\" type=\"positive\" [precision]=\"0\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input-number>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [clearable]=\"false\" hideInlineError [autoId]=\"autoIdFor('datemode-' + index)\">\n                <ng-template sdItemDef let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item.display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <mat-icon class=\"qb-opt-icon\" fontSet=\"material-icons-outlined\">{{ item?.icon }}</mat-icon>\n                    <span class=\"qb-opt-label\">{{ item?.display }}</span>\n                  </span>\n                </ng-template>\n              </sd-select>\n              @switch (_dtMode) {\n                @case ('absolute') {\n                  <sd-datetime class=\"qb-val\" size=\"sm\" [model]=\"rule.value\" (modelChange)=\"setScalar(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('val-' + index)\"></sd-datetime>\n                }\n                @case ('relative') {\n                  <sd-input-number class=\"qb-rel-amount\" type=\"positive\" [precision]=\"0\" size=\"sm\" [model]=\"relativeAmount(rule)\" (modelChange)=\"setRelativeAmount(rule, $event)\" [disabled]=\"resolvedDisabled()\" hideInlineError [autoId]=\"autoIdFor('rel-amount-' + index)\"></sd-input-number>\n                  <sd-select class=\"qb-rel-unit\" [items]=\"relativeUnitOptions\" valueField=\"value\" displayField=\"display\" size=\"sm\" [model]=\"relativeUnitDirValue(rule)\" (modelChange)=\"setRelativeUnitDir(rule, $event)\" [disabled]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" [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]=\"resolvedDisabled()\" (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:0;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:170px}.qb-val{min-width:140px}.qb-value-source{min-width:132px}.qb-compare-field{min-width:170px}.qb-date-val{min-width:0;width:132px;flex:0 0 auto}::ng-deep .qb-opt{display:flex;align-items:center;gap:6px;min-width:0}::ng-deep .qb-opt .qb-opt-icon.mat-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin:0;font-size:18px;width:18px;height:18px;line-height:1;color:#667085}::ng-deep .qb-opt .qb-opt-label{min-width:0}.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:160px}.qb-rel-amount{width:72px}.qb-rel-unit{min-width:110px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, QB_TODAY, QB_TYPE_ICON, QB_VALUE_SOURCE_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, isQbGroup, qbAllowedOperators, qbDefaultOperator, qbDefaultRelative, qbFieldIcon, qbId, qbIsMultiOperator, qbIsNoDataOperator, qbIsRelativeDate, qbIsToday, qbNewGroup, qbNewRule, qbSupportsFieldCompareOperator, treeToFilter };
 //# sourceMappingURL=sdcorejs-angular-components-query-builder.mjs.map