@sdcorejs/angular 19.1.5 → 19.2.0

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

@@ -1,6 +1,7 @@
 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 { inject, input, booleanAttribute, model, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { I18nService } from '@sdcorejs/angular/i18n';
 import { SdDate } from '@sdcorejs/angular/forms/date';
 import { SdDatetime } from '@sdcorejs/angular/forms/datetime';
 import { SdInput } from '@sdcorejs/angular/forms/input';
@@ -11,8 +12,8 @@ import { SdOperator } from '@sdcorejs/angular/components/operator';
 import { FilterUtilities } from '@sdcorejs/utils/fns';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
-/** Type guard — narrows a `QbNode` to a `QbGroup`. */
-function isQbGroup(node) {
+/** Type guard — narrows a `SdQbNode` to a `SdQbGroup`. */
+function sdIsQbGroup(node) {
     return node.kind === 'group';
 }
 // ---------------------------------------------------------------------------
@@ -21,7 +22,7 @@ function isQbGroup(node) {
 // local so query-builder has no dependency on the query-bar package.
 // ---------------------------------------------------------------------------
 /** Allowed operators per field type — used when `field.operators` is not set. */
-const QB_OPERATORS_BY_TYPE = {
+const SD_QB_OPERATORS_BY_TYPE = {
     string: ['CONTAIN', 'NOT_CONTAIN', 'EQUAL', 'NOT_EQUAL', 'START_WITH', 'END_WITH', 'NULL', 'NOT_NULL'],
     number: ['EQUAL', 'NOT_EQUAL', 'GREATER_THAN', 'GREATER_OR_EQUAL', 'LESS_THAN', 'LESS_OR_EQUAL', 'BETWEEN', 'NULL', 'NOT_NULL'],
     boolean: ['EQUAL', 'NOT_EQUAL'],
@@ -30,7 +31,7 @@ const QB_OPERATORS_BY_TYPE = {
     values: ['IN', 'NOT_IN', 'EQUAL', 'NOT_EQUAL', 'NULL', 'NOT_NULL'],
 };
 /** Default operator when a rule is first created for a field. */
-const QB_DEFAULT_OPERATOR_BY_TYPE = {
+const SD_QB_DEFAULT_OPERATOR_BY_TYPE = {
     string: 'CONTAIN',
     number: 'EQUAL',
     boolean: 'EQUAL',
@@ -39,45 +40,45 @@ const QB_DEFAULT_OPERATOR_BY_TYPE = {
     values: 'IN',
 };
 /** Operators with no value payload — the value editor is hidden for these. */
-const QB_NO_DATA_OPERATORS = ['NULL', 'NOT_NULL'];
+const SD_QB_NO_DATA_OPERATORS = ['NULL', 'NOT_NULL'];
 /** Operators whose value is an array — the value editor offers multi-select. */
-const QB_MULTI_OPERATORS = ['IN', 'NOT_IN'];
+const SD_QB_MULTI_OPERATORS = ['IN', 'NOT_IN'];
 /** Operators allowed for `field` — explicit override wins, else the per-type set. */
-function qbAllowedOperators(field) {
+function sdQbAllowedOperators(field) {
     if (!field)
         return [];
     if (field.operators?.length)
         return field.operators;
-    return QB_OPERATORS_BY_TYPE[field.type] ?? [];
+    return SD_QB_OPERATORS_BY_TYPE[field.type] ?? [];
 }
 /** Starting operator for a new rule on `field` — falls back to the per-type default. */
-function qbDefaultOperator(field) {
+function sdQbDefaultOperator(field) {
     if (!field)
         return undefined;
-    const allowed = qbAllowedOperators(field);
+    const allowed = sdQbAllowedOperators(field);
     if (field.defaultOperator && allowed.includes(field.defaultOperator))
         return field.defaultOperator;
-    const byType = QB_DEFAULT_OPERATOR_BY_TYPE[field.type];
+    const byType = SD_QB_DEFAULT_OPERATOR_BY_TYPE[field.type];
     return allowed.includes(byType) ? byType : allowed[0];
 }
 /** True when `op` is NULL / NOT_NULL (no value editor). */
-function qbIsNoDataOperator(op) {
-    return !!op && QB_NO_DATA_OPERATORS.includes(op);
+function sdQbIsNoDataOperator(op) {
+    return !!op && SD_QB_NO_DATA_OPERATORS.includes(op);
 }
 /** True when `op` is IN / NOT_IN (array value). */
-function qbIsMultiOperator(op) {
-    return !!op && QB_MULTI_OPERATORS.includes(op);
+function sdQbIsMultiOperator(op) {
+    return !!op && SD_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';
+function sdQbSupportsFieldCompareOperator(op) {
+    return !!op && !sdQbIsNoDataOperator(op) && !sdQbIsMultiOperator(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 = {
+const SD_QB_TYPE_ICON = {
     string: 'text_fields',
     number: 'tag',
     boolean: 'toggle_on',
@@ -87,12 +88,12 @@ const QB_TYPE_ICON = {
 };
 /**
  * Icon shown before a field in the field picker / selected trigger.
- * Priority: `field.icon` → `QB_TYPE_ICON[field.type]` → `'tune'` (default, like query-bar).
+ * Priority: `field.icon` → `SD_QB_TYPE_ICON[field.type]` → `'tune'` (default, like query-bar).
  */
-function qbFieldIcon(field) {
+function sdQbFieldIcon(field) {
     if (!field)
         return 'tune';
-    return field.icon ?? QB_TYPE_ICON[field.type] ?? 'tune';
+    return field.icon ?? SD_QB_TYPE_ICON[field.type] ?? 'tune';
 }
 // ---------------------------------------------------------------------------
 // Node factories — monotonic counter for stable, render-safe ids (no Math.random
@@ -100,52 +101,58 @@ function qbFieldIcon(field) {
 // ---------------------------------------------------------------------------
 let qbSeq = 0;
 /** Next stable node id with the given prefix. */
-function qbId(prefix = 'qb') {
+function sdQbId(prefix = 'qb') {
     return `${prefix}-${++qbSeq}`;
 }
 /** Build a fresh rule node (optionally pre-filled). */
-function qbNewRule(field, operator, value, valueSource, compareField) {
-    return { id: qbId('r'), kind: 'rule', field, operator, value, valueSource, compareField };
+function sdQbNewRule(field, operator, value, valueSource, compareField) {
+    return { id: sdQbId('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 };
+function sdQbNewGroup(logic = 'AND', children = []) {
+    return { id: sdQbId('g'), kind: 'group', logic, children };
 }
 /** Sentinel held as a rule value (and emitted as `data`) for the "today" date mode. */
-const QB_TODAY = 'TODAY';
+const SD_QB_TODAY = 'TODAY';
 /** Type guard — narrows a rule value to a utils `DateRelative` (offset spec). */
-const qbIsRelativeDate = FilterUtilities.isDateRelative;
+const sdQbIsRelativeDate = FilterUtilities.isDateRelative;
 /** Type guard — narrows a rule value to the `'TODAY'` sentinel ("now"/today mode). */
-function qbIsToday(v) {
-    return v === QB_TODAY;
+function sdQbIsToday(v) {
+    return v === SD_QB_TODAY;
 }
 /** Starting relative value when a rule first switches to "relative" mode. */
-function qbDefaultRelative() {
+function sdQbDefaultRelative() {
     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ể', icon: 'event' },
-    { value: 'now', display: 'Hôm nay', icon: 'today' },
-    { value: 'relative', display: 'Tương đối', icon: 'history' },
+const SD_QB_DATE_MODES = [
+    { value: 'absolute', labelKey: 'core.component.query-builder.date-mode.absolute', icon: 'event' },
+    { value: 'now', labelKey: 'core.component.query-builder.date-mode.now', icon: 'today' },
+    { value: 'relative', labelKey: 'core.component.query-builder.date-mode.relative', 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' },
+const SD_QB_VALUE_SOURCE_OPTIONS = [
+    { value: 'literal', labelKey: 'core.component.query-builder.value-source.literal', icon: 'edit_note' },
+    { value: 'field', labelKey: 'core.component.query-builder.value-source.field', icon: 'view_column' },
 ];
 /** Stable combined direction×unit option list (token `'unit:direction'`). */
-const QB_RELATIVE_UNIT_OPTIONS = [
-    { value: 'day:previous', display: 'ngày trước' },
-    { value: 'day:next', display: 'ngày tới' },
-    { value: 'week:previous', display: 'tuần trước' },
-    { value: 'week:next', display: 'tuần tới' },
-    { value: 'month:previous', display: 'tháng trước' },
-    { value: 'month:next', display: 'tháng tới' },
+const SD_QB_RELATIVE_UNIT_OPTIONS = [
+    { value: 'day:previous', labelKey: 'core.component.query-builder.relative.day-previous' },
+    { value: 'day:next', labelKey: 'core.component.query-builder.relative.day-next' },
+    { value: 'week:previous', labelKey: 'core.component.query-builder.relative.week-previous' },
+    { value: 'week:next', labelKey: 'core.component.query-builder.relative.week-next' },
+    { value: 'month:previous', labelKey: 'core.component.query-builder.relative.month-previous' },
+    { value: 'month:next', labelKey: 'core.component.query-builder.relative.month-next' },
 ];
+/** i18n key of the combined `unit`×`direction` phrase for a relative-date offset. */
+function qbRelativeLabelKey(unit, direction) {
+    return `core.component.query-builder.relative.${unit}-${direction}`;
+}
 /** Shared empty option array — stable ref for fallbacks (avoids per-call allocation). */
-const QB_EMPTY_OPTIONS = [];
+const SD_QB_EMPTY_OPTIONS = [];
 
+/** Fallback khi caller không truyền translator: trả về chính key để thiếu i18n lộ ra, không im lặng. */
+const IDENTITY_TRANSLATE = key => key;
 // SQL symbol for each single-value comparison operator.
 const SYMBOL = {
     EQUAL: '=',
@@ -170,11 +177,11 @@ function ruleToFilter(rule) {
     if (!rule.field || !rule.operator)
         return null;
     const operator = rule.operator;
-    if (QB_NO_DATA_OPERATORS.includes(operator)) {
+    if (SD_QB_NO_DATA_OPERATORS.includes(operator)) {
         return { field: rule.field, operator };
     }
     if (rule.valueSource === 'field') {
-        if (!qbSupportsFieldCompareOperator(operator) || isEmptyValue(rule.compareField))
+        if (!sdQbSupportsFieldCompareOperator(operator) || isEmptyValue(rule.compareField))
             return null;
         return { field: rule.field, operator, dataType: 'field', data: rule.compareField };
     }
@@ -186,16 +193,16 @@ function ruleToFilter(rule) {
             return null;
         return { field: rule.field, operator: 'BETWEEN', data: { from: v.from, to: v.to } };
     }
-    if (QB_MULTI_OPERATORS.includes(operator)) {
+    if (SD_QB_MULTI_OPERATORS.includes(operator)) {
         const arr = Array.isArray(rule.value) ? rule.value : isEmptyValue(rule.value) ? [] : [rule.value];
         if (!arr.length)
             return null;
         return { field: rule.field, operator, data: arr };
     }
-    if (qbIsToday(rule.value)) {
-        return { field: rule.field, operator, dataType: 'date-today', data: QB_TODAY };
+    if (sdQbIsToday(rule.value)) {
+        return { field: rule.field, operator, dataType: 'date-today', data: SD_QB_TODAY };
     }
-    if (qbIsRelativeDate(rule.value)) {
+    if (sdQbIsRelativeDate(rule.value)) {
         const v = rule.value;
         // emit only when fully specified, else drop the incomplete rule
         if (v.unit && v.direction && typeof v.amount === 'number' && v.amount >= 1) {
@@ -216,7 +223,7 @@ function ruleToFilter(rule) {
     return { field: rule.field, operator, data: rule.value };
 }
 function nodeToFilter(node) {
-    if (isQbGroup(node)) {
+    if (sdIsQbGroup(node)) {
         const data = node.children.map(nodeToFilter).filter((f) => f != null);
         if (!data.length)
             return null;
@@ -240,33 +247,33 @@ function treeToFilter(group) {
 // ---------------------------------------------------------------------------
 function ruleFromFilter(filter) {
     const operator = filter.operator;
-    if (QB_NO_DATA_OPERATORS.includes(operator)) {
-        return qbNewRule(filter.field, operator);
+    if (SD_QB_NO_DATA_OPERATORS.includes(operator)) {
+        return sdQbNewRule(filter.field, operator);
     }
     if (filter.dataType === 'field') {
-        return qbNewRule(filter.field, operator, undefined, 'field', filter.data);
+        return sdQbNewRule(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);
+        return sdQbNewRule(filter.field, operator, SD_QB_TODAY);
     }
     if (filter.dataType === 'date-relative') {
-        return qbNewRule(filter.field, operator, filter.data);
+        return sdQbNewRule(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 sdQbNewRule(filter.field, operator, legacy);
     }
-    return qbNewRule(filter.field, operator, filter.data);
+    return sdQbNewRule(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;
+        return SD_QB_TODAY;
     if (data.rel === 'offset' && data.unit && data.direction && typeof data.amount === 'number') {
         return { amount: data.amount, direction: data.direction, unit: data.unit };
     }
@@ -276,7 +283,7 @@ function nodeFromFilter(filter) {
     return isAndOr$1(filter) ? groupFromFilter(filter) : ruleFromFilter(filter);
 }
 function groupFromFilter(filter) {
-    return qbNewGroup(filter.operator, filter.data.map(nodeFromFilter));
+    return sdQbNewGroup(filter.operator, filter.data.map(nodeFromFilter));
 }
 /**
  * Inverse of {@link treeToFilter} — rebuild the editable tree from a `Filter` so a
@@ -284,14 +291,14 @@ function groupFromFilter(filter) {
  * `null` yields an empty AND root.
  *
  * @param filter - a `Filter` (group or leaf), or `null` / `undefined` for an empty tree.
- * @returns a fresh root `QbGroup` mirroring the filter's structure.
+ * @returns a fresh root `SdQbGroup` mirroring the filter's structure.
  */
 function filterToTree(filter) {
     if (!filter)
-        return qbNewGroup('AND', []);
+        return sdQbNewGroup('AND', []);
     if (isAndOr$1(filter))
         return groupFromFilter(filter);
-    return qbNewGroup('AND', [ruleFromFilter(filter)]);
+    return sdQbNewGroup('AND', [ruleFromFilter(filter)]);
 }
 // ---------------------------------------------------------------------------
 // Public Filter → SQL-ish highlight tokens (view mode)
@@ -299,23 +306,27 @@ function filterToTree(filter) {
 function escapeStr(s) {
     return s.replace(/'/g, "''");
 }
-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) {
-    const unit = REL_UNIT_VI[v.unit] ?? REL_UNIT_VI.day;
-    const dir = v.direction === 'next' ? 'tới' : 'trước';
-    return `${v.amount} ${unit} ${dir}`;
+/** Render a relative-date offset as a readable phrase in the active language. */
+function formatRelative(v, t) {
+    // why: mỗi ngôn ngữ ghép `amount` với cụm đơn vị+hướng theo trật tự khác nhau ('3 ngày trước' /
+    // '3 days ago' / '3日前'), nên để catalog quyết định trật tự thay vì nối chuỗi cứng ở đây.
+    return t('core.component.query-builder.relative.format', {
+        amount: v.amount,
+        phrase: t(qbRelativeLabelKey(v.unit, v.direction)),
+    });
 }
 /** 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);
+function formatScalar(field, raw, t) {
+    if (sdQbIsToday(raw))
+        return t('core.component.query-builder.date-mode.now');
+    if (sdQbIsRelativeDate(raw))
+        return formatRelative(raw, t);
     if (raw === null || raw === undefined)
         return '';
     if (field?.type === 'boolean') {
-        return raw ? (field.trueLabel ?? 'Có') : (field.falseLabel ?? 'Không');
+        return raw
+            ? (field.trueLabel ?? t('core.component.query-builder.boolean.true'))
+            : (field.falseLabel ?? t('core.component.query-builder.boolean.false'));
     }
     if (field?.type === 'values') {
         const opt = field.values?.find(o => o.value === raw);
@@ -340,12 +351,12 @@ function operatorToken(operator) {
         return operator.startsWith('NOT_') ? 'not like' : 'like';
     return SYMBOL[operator] ?? operator;
 }
-function ruleTokens(filter, fields) {
+function ruleTokens(filter, fields, t) {
     const field = fields.find(f => f.key === filter.field);
     const out = [{ kind: 'field', text: field?.label ?? String(filter.field) }];
     const sp = () => out.push({ kind: 'plain', text: ' ' });
     const operator = filter.operator;
-    if (QB_NO_DATA_OPERATORS.includes(operator)) {
+    if (SD_QB_NO_DATA_OPERATORS.includes(operator)) {
         sp();
         out.push({ kind: 'op', text: operator === 'NULL' ? 'is null' : 'is not null' });
         return out;
@@ -354,17 +365,17 @@ function ruleTokens(filter, fields) {
         sp();
         out.push({ kind: 'op', text: 'between' });
         sp();
-        out.push({ kind: 'value', text: formatScalar(field, filter.data?.from) });
+        out.push({ kind: 'value', text: formatScalar(field, filter.data?.from, t) });
         out.push({ kind: 'plain', text: ' and ' });
-        out.push({ kind: 'value', text: formatScalar(field, filter.data?.to) });
+        out.push({ kind: 'value', text: formatScalar(field, filter.data?.to, t) });
         return out;
     }
-    if (QB_MULTI_OPERATORS.includes(operator)) {
+    if (SD_QB_MULTI_OPERATORS.includes(operator)) {
         sp();
         out.push({ kind: 'op', text: operator === 'IN' ? 'in' : 'not in' });
         sp();
         const arr = Array.isArray(filter.data) ? filter.data : [];
-        out.push({ kind: 'value', text: `(${arr.map((v) => formatScalar(field, v)).join(', ')})` });
+        out.push({ kind: 'value', text: `(${arr.map((v) => formatScalar(field, v, t)).join(', ')})` });
         return out;
     }
     if (filter.dataType === 'field') {
@@ -385,16 +396,16 @@ function ruleTokens(filter, fields) {
     sp();
     out.push({ kind: 'op', text: operatorToken(operator) });
     sp();
-    out.push({ kind: 'value', text: formatScalar(field, filter.data) });
+    out.push({ kind: 'value', text: formatScalar(field, filter.data, t) });
     return out;
 }
-function tokensFor(filter, fields) {
+function tokensFor(filter, fields, t) {
     if (isAndOr$1(filter)) {
         const out = [];
         filter.data.forEach((child, i) => {
             if (i > 0)
                 out.push({ kind: 'logic', text: ` ${filter.operator.toLowerCase()} ` });
-            const childTokens = tokensFor(child, fields);
+            const childTokens = tokensFor(child, fields, t);
             // Wrap a nested multi-child group in parentheses; a single-child group needs none.
             if (isAndOr$1(child) && child.data.length > 1) {
                 out.push({ kind: 'paren', text: '(' }, ...childTokens, { kind: 'paren', text: ')' });
@@ -405,23 +416,26 @@ function tokensFor(filter, fields) {
         });
         return out;
     }
-    return ruleTokens(filter, fields);
+    return ruleTokens(filter, fields, t);
 }
 /**
  * Render a `Filter` to a SQL-ish token stream for view mode. Field tokens use the
  * matching field's `label`; operators map to SQL syntax (`= != like between is null …`);
  * `and` / `or` are lowercase; nested multi-child groups are wrapped in parentheses.
  * Returns a token stream (not a string) so the template can wrap each piece in a
- * highlight `<span>` keyed by `QbToken.kind`.
+ * highlight `<span>` keyed by `SdQbToken.kind`.
  *
  * @param filter - the `Filter` to render, or `null` / `undefined`.
  * @param fields - field metadata, used to resolve each field key to its display label + value formatting.
+ * @param translate - i18n lookup for language-dependent value tokens (today / relative offsets /
+ *   boolean labels). Optional so the serializer stays callable outside an Angular injection context;
+ *   omitting it renders the raw i18n keys.
  * @returns the ordered tokens, or `[]` when `filter` is empty.
  */
-function filterToTokens(filter, fields) {
+function filterToTokens(filter, fields, translate = IDENTITY_TRANSLATE) {
     if (!filter)
         return [];
-    return tokensFor(filter, fields);
+    return tokensFor(filter, fields, translate);
 }
 
 /** A logical `Filter` (AND / OR group) carries a `data[]` array. */
@@ -437,6 +451,7 @@ const QB_EMPTY_FIELDS = [];
  * string with highlighted operators + values.
  */
 class SdQueryBuilder {
+    #i18n = inject(I18nService);
     // -------------------------------------------------------------------------
     // Inputs
     // -------------------------------------------------------------------------
@@ -464,7 +479,7 @@ class SdQueryBuilder {
     // -------------------------------------------------------------------------
     // Internal source of truth — the editable tree (carries UI state).
     // -------------------------------------------------------------------------
-    #tree = signal(qbNewGroup('AND'));
+    #tree = signal(sdQbNewGroup('AND'));
     tree = this.#tree.asReadonly();
     /** Last filter WE emitted — used to recognise (and ignore) our own echo in the inbound effect. */
     #lastEmitted = undefined;
@@ -491,19 +506,40 @@ class SdQueryBuilder {
         for (const f of this.resolvedFields()) {
             if (f.type === 'boolean') {
                 map.set(f.key, [
-                    { value: true, display: f.trueLabel ?? 'Có' },
-                    { value: false, display: f.falseLabel ?? 'Không' },
+                    { value: true, display: f.trueLabel ?? this.#i18n.t('core.component.query-builder.boolean.true') },
+                    { value: false, display: f.falseLabel ?? this.#i18n.t('core.component.query-builder.boolean.false') },
                 ]);
             }
         }
         return map;
     });
+    // -------------------------------------------------------------------------
+    // Option lists — dịch lúc ĐỌC, không phải lúc module được đánh giá.
+    //
+    // why: bảng hằng số trong `query-builder.model.ts` chỉ giữ `labelKey`; `computed` ở đây mới sinh
+    // ra `display`. Nhờ vậy đổi ngôn ngữ là nhãn đổi theo (computed phụ thuộc signal `messages()` bên
+    // trong `I18nService.t`), mà tham chiếu mảng vẫn ỔN ĐỊNH giữa các chu kỳ change detection vì
+    // computed chỉ tính lại khi ngôn ngữ đổi — bắt buộc, nếu không `sd-select` sẽ rơi lại vào vòng lặp
+    // `toObservable(items)` → `markForCheck()` → CD mới → mảng mới (xem `#booleanOptionsByKey`).
+    // -------------------------------------------------------------------------
     /** Stable option list for the date-mode select. */
-    dateModes = QB_DATE_MODES;
+    dateModes = computed(() => SD_QB_DATE_MODES.map(o => ({ ...o, display: this.#i18n.t(o.labelKey) })));
     /** Stable option list for the literal-vs-field operand select. */
-    valueSourceOptions = QB_VALUE_SOURCE_OPTIONS;
+    valueSourceOptions = computed(() => SD_QB_VALUE_SOURCE_OPTIONS.map(o => ({ ...o, display: this.#i18n.t(o.labelKey) })));
     /** Stable combined unit×direction option list for the relative select. */
-    relativeUnitOptions = QB_RELATIVE_UNIT_OPTIONS;
+    relativeUnitOptions = computed(() => SD_QB_RELATIVE_UNIT_OPTIONS.map(o => ({ ...o, display: this.#i18n.t(o.labelKey) })));
+    // Nhãn i18n tĩnh của template (placeholder / title / aria-label / trạng thái rỗng).
+    selectFieldLabel = computed(() => this.#i18n.t('core.component.query-builder.select-field'));
+    valueLabel = computed(() => this.#i18n.t('core.component.query-builder.value'));
+    fromLabel = computed(() => this.#i18n.t('core.component.query-builder.from'));
+    toLabel = computed(() => this.#i18n.t('core.component.query-builder.to'));
+    addLabel = computed(() => this.#i18n.t('core.component.query-builder.add'));
+    addNodeLabel = computed(() => this.#i18n.t('core.component.query-builder.add-node'));
+    conditionLabel = computed(() => this.#i18n.t('core.component.query-builder.condition'));
+    groupLabel = computed(() => this.#i18n.t('core.component.query-builder.group'));
+    removeGroupLabel = computed(() => this.#i18n.t('core.component.query-builder.remove-group'));
+    removeConditionLabel = computed(() => this.#i18n.t('core.component.query-builder.remove-condition'));
+    emptyLabel = computed(() => this.#i18n.t('core.component.query-builder.empty'));
     #compareFieldsByKey = computed(() => {
         const fields = this.resolvedFields();
         const map = new Map();
@@ -526,13 +562,20 @@ class SdQueryBuilder {
         }
         return map;
     });
-    /** View-mode token stream — recomputed from the emitted value. */
-    tokens = computed(() => filterToTokens(this.option()?.value ?? this.value(), this.resolvedFields()));
+    /**
+     * Translator handed to the serializer.
+     * why: `filterToTokens` là hàm thuần cấp module, không inject được. Truyền hàm dịch vào để chuỗi
+     * view-mode ("hôm nay", "3 ngày trước", "Có"/"Không") không còn hardcode tiếng Việt. Trường ổn
+     * định (không tạo mới mỗi lần gọi) để `computed` bên dưới không phụ thuộc tham chiếu mới.
+     */
+    #translate = (key, params) => this.#i18n.t(key, params);
+    /** View-mode token stream — recomputed from the emitted value (and from the active language). */
+    tokens = computed(() => filterToTokens(this.option()?.value ?? this.value(), this.resolvedFields(), this.#translate));
     isView = computed(() => this.resolvedMode() === 'view');
     /** Expose the type-guard to the template. */
-    isGroup = isQbGroup;
+    isGroup = sdIsQbGroup;
     /** Resolve the leading icon for a field (own `icon` → per-type → `'tune'`) — used by the field picker. */
-    fieldIcon = qbFieldIcon;
+    fieldIcon = sdQbFieldIcon;
     constructor() {
         // Inbound seeding: an EXTERNAL write to value / filters rebuilds the tree.
         // Our own emits are recognised via #lastEmitted and skipped (no echo loop).
@@ -610,12 +653,12 @@ class SdQueryBuilder {
         this.#bumpTree();
     }
     #hasOpenDropdown(node) {
-        if (!isQbGroup(node))
+        if (!sdIsQbGroup(node))
             return false;
         return node.open === true || node.children.some(c => this.#hasOpenDropdown(c));
     }
     #closeAllDropdowns(node) {
-        if (isQbGroup(node)) {
+        if (sdIsQbGroup(node)) {
             node.open = false;
             node.children.forEach(c => this.#closeAllDropdowns(c));
         }
@@ -624,7 +667,7 @@ class SdQueryBuilder {
     addRule(group) {
         if (this.resolvedDisabled())
             return;
-        group.children.push(qbNewRule());
+        group.children.push(sdQbNewRule());
         group.open = false;
         this.#apply();
     }
@@ -632,7 +675,7 @@ class SdQueryBuilder {
     addGroup(group) {
         if (this.resolvedDisabled())
             return;
-        group.children.push(qbNewGroup('AND', [qbNewRule()]));
+        group.children.push(sdQbNewGroup('AND', [sdQbNewRule()]));
         group.open = false;
         this.#apply();
     }
@@ -661,7 +704,7 @@ class SdQueryBuilder {
             return; // swap-only: never clear the field (issue #2)
         rule.field = key;
         const field = this.fieldByKey()[rule.field];
-        const op = qbDefaultOperator(field);
+        const op = sdQbDefaultOperator(field);
         rule.operator = op;
         rule.value = this.#defaultValueFor(op);
         this.#useLiteralSource(rule);
@@ -742,25 +785,25 @@ class SdQueryBuilder {
         return raw;
     }
     #defaultValueFor(op) {
-        if (qbIsMultiOperator(op))
+        if (sdQbIsMultiOperator(op))
             return [];
         if (op === 'BETWEEN')
             return { from: null, to: null };
         return null;
     }
     #reshapeValue(op, current) {
-        if (qbIsNoDataOperator(op))
+        if (sdQbIsNoDataOperator(op))
             return null;
-        if (qbIsMultiOperator(op))
+        if (sdQbIsMultiOperator(op))
             return Array.isArray(current) ? current : current == null ? [] : [current];
         if (op === 'BETWEEN') {
             // 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)
+            return current && typeof current === 'object' && !Array.isArray(current) && !sdQbIsRelativeDate(current)
                 ? current
                 : { from: null, to: null };
         }
         // single value — keep a relative spec or the 'TODAY' sentinel; else drop array/range remnants
-        if (qbIsToday(current) || qbIsRelativeDate(current))
+        if (sdQbIsToday(current) || sdQbIsRelativeDate(current))
             return current;
         return Array.isArray(current) || (current && typeof current === 'object') ? null : current;
     }
@@ -780,7 +823,7 @@ class SdQueryBuilder {
     }
     /** Operators allowed for a rule, derived from its field's type / override. */
     allowedOperators(rule) {
-        return qbAllowedOperators(this.fieldOf(rule));
+        return sdQbAllowedOperators(this.fieldOf(rule));
     }
     /** Whether to render the operator picker — hidden when only one operator is allowed. */
     showOperatorSelector(rule) {
@@ -793,7 +836,7 @@ class SdQueryBuilder {
         return this.#compareFieldsByKey().get(field.key) ?? QB_EMPTY_FIELDS;
     }
     canCompareWithField(rule) {
-        return qbSupportsFieldCompareOperator(rule.operator) && this.compareFields(rule).length > 0;
+        return sdQbSupportsFieldCompareOperator(rule.operator) && this.compareFields(rule).length > 0;
     }
     showValueSourceSelector(rule) {
         return this.canCompareWithField(rule) && (this.resolvedComparisonMode() === 'value-or-field' || rule.valueSource === 'field');
@@ -806,22 +849,39 @@ class SdQueryBuilder {
     }
     /** True for NULL / NOT_NULL — the template then renders no value editor. */
     isNoData(op) {
-        return qbIsNoDataOperator(op);
+        return sdQbIsNoDataOperator(op);
     }
     /** True for IN / NOT_IN — the template then renders a multi-select value editor. */
     isMulti(op) {
-        return qbIsMultiOperator(op);
+        return sdQbIsMultiOperator(op);
     }
     /** `[true/false]` option list for a boolean field's value select (stable reference). */
     booleanItems(field) {
-        return this.#booleanOptionsByKey().get(field.key) ?? QB_EMPTY_OPTIONS;
+        return this.#booleanOptionsByKey().get(field.key) ?? SD_QB_EMPTY_OPTIONS;
+    }
+    /**
+     * Option list cho field `type:'values'`.
+     *
+     * why: template cũ bind thẳng `[items]="fieldOf(rule)!.values || []"`. `values` là OPTIONAL trên
+     * `SdQueryBuilderField`, nên với field khai thiếu `values`, nhánh `|| []` cấp phát một mảng MỚI
+     * mỗi lần change detection chạy — đúng nguyên nhân OOM đã ghi ở `#booleanOptionsByKey`:
+     * `sd-select` có `toObservable(items)` → `markForCheck()` → CD mới → mảng mới → lặp vô hạn.
+     *
+     * why: KHÔNG memo hoá qua `computed<Map>` snapshot. `field.values` vốn ĐÃ là mảng của consumer
+     * nên tự nó ổn định; snapshot vào Map chỉ thêm một tầng cache không bao giờ invalidate khi
+     * consumer nạp option bất đồng bộ bằng cách gán tại chỗ (`fields[0].values = loaded`) — reference
+     * `fields` không đổi nên `computed` giữ nguyên list cũ vĩnh viễn. Chỉ nhánh RỖNG cần hằng số
+     * dùng chung để tránh literal mới mỗi CD.
+     */
+    valueItems(field) {
+        return field.values?.length ? field.values : SD_QB_EMPTY_OPTIONS;
     }
     /** Current date-value mode of a rule, derived from its value (no separate state). */
     dateMode(rule) {
         const v = rule.value;
-        if (qbIsToday(v))
+        if (sdQbIsToday(v))
             return 'now';
-        if (qbIsRelativeDate(v))
+        if (sdQbIsRelativeDate(v))
             return 'relative';
         return 'absolute';
     }
@@ -831,9 +891,9 @@ class SdQueryBuilder {
             return;
         this.#useLiteralSource(rule);
         if (mode === 'now')
-            rule.value = QB_TODAY;
+            rule.value = SD_QB_TODAY;
         else if (mode === 'relative')
-            rule.value = qbDefaultRelative();
+            rule.value = sdQbDefaultRelative();
         else
             rule.value = null; // absolute — pick a concrete date
         this.#apply();
@@ -841,7 +901,7 @@ class SdQueryBuilder {
     /** Read the offset amount of a relative rule (default 1). */
     relativeAmount(rule) {
         const v = rule.value;
-        return qbIsRelativeDate(v) ? (v.amount ?? 1) : 1;
+        return sdQbIsRelativeDate(v) ? (v.amount ?? 1) : 1;
     }
     /** Set the offset amount (clamped to an integer >= 1). */
     setRelativeAmount(rule, raw) {
@@ -850,14 +910,14 @@ class SdQueryBuilder {
         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();
+        const cur = sdQbIsRelativeDate(rule.value) ? rule.value : sdQbDefaultRelative();
         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))
+        if (sdQbIsRelativeDate(v))
             return `${v.unit}:${v.direction}`;
         return 'day:previous';
     }
@@ -868,7 +928,7 @@ class SdQueryBuilder {
         this.#useLiteralSource(rule);
         const normalizedToken = typeof token === 'string' ? token : 'day:previous';
         const [unit, direction] = normalizedToken.split(':');
-        const cur = qbIsRelativeDate(rule.value) ? rule.value : qbDefaultRelative();
+        const cur = sdQbIsRelativeDate(rule.value) ? rule.value : sdQbDefaultRelative();
         rule.value = { amount: cur.amount, direction, unit };
         this.#apply();
     }
@@ -877,16 +937,16 @@ class SdQueryBuilder {
         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: { 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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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, #005cbb);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, #005cbb);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #d7e3ff);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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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-iconsd-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, #005cbb);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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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", "mask", "hideInlineError", "blurOnEnter", "clearable", "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", "clearable", "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 });
+    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  <!-- why: \"click ra v\u00F9ng tr\u1ED1ng \u0111\u1EC3 \u0111\u00F3ng dropdown\" l\u00E0 h\u00E0nh vi CH\u1EC8 c\u00F3 \u1EDF chu\u1ED9t \u2014 ng\u01B0\u1EDDi d\u00F9ng b\u00E0n ph\u00EDm\n       kh\u00F4ng c\u00F3 c\u00E1ch n\u00E0o \u0111\u00F3ng. Th\u00EAm Escape l\u00E0m t\u01B0\u01A1ng \u0111\u01B0\u01A1ng. role=\"group\": container l\u00E0 m\u1ED9t nh\u00F3m\n       control n\u00EAn KH\u00D4NG nh\u1EADn tabindex, tab \u0111i th\u1EB3ng v\u00E0o c\u00E1c n\u00FAt/select b\u00EAn trong. -->\n  <div\n    class=\"qb-container\"\n    role=\"group\"\n    [class.is-disabled]=\"resolvedDisabled()\"\n    (click)=\"closeAllDropdowns()\"\n    (keydown.escape)=\"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  @let _removeGroupLabel = removeGroupLabel();\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]=\"addLabel()\" [attr.aria-label]=\"addNodeLabel()\" [disabled]=\"resolvedDisabled()\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        @if (group.open) {\n          <!-- why: dropdown l\u00E0 NH\u00D3M hai n\u00FAt (role=\"group\"), kh\u00F4ng ph\u1EA3i n\u00FAt \u2014 kh\u00F4ng nh\u1EADn tabindex,\n               tab \u0111i th\u1EB3ng v\u00E0o hai n\u00FAt. stopPropagation cho c\u1EA3 click l\u1EABn Enter \u0111\u1EC3 thao t\u00E1c b\u00EAn\n               trong dropdown kh\u00F4ng k\u00EDch ho\u1EA1t handler \"\u0111\u00F3ng t\u1EA5t c\u1EA3\" c\u1EE7a container. -->\n          <div class=\"qb-dropdown\" role=\"group\" (click)=\"$event.stopPropagation()\" (keydown.enter)=\"$event.stopPropagation()\">\n            <button type=\"button\" (click)=\"addRule(group)\">+ {{ conditionLabel() }}</button>\n            <button type=\"button\" (click)=\"addGroup(group)\">+ {{ groupLabel() }}</button>\n          </div>\n        }\n        @if (!isRoot) {\n          <button type=\"button\" class=\"qb-btn qb-btn-remove\" [title]=\"_removeGroupLabel\" [attr.aria-label]=\"_removeGroupLabel\" [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\">{{ emptyLabel() }}</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  @let _selectFieldLabel = selectFieldLabel();\n  @let _valueLabel = valueLabel();\n  @let _removeConditionLabel = removeConditionLabel();\n  @let _dateModes = dateModes();\n  @let _relativeUnitOptions = relativeUnitOptions();\n  <div class=\"qb-rule\">\n    <sd-select\n      class=\"qb-field\"\n      [items]=\"resolvedFields()\"\n      valueField=\"key\"\n      displayField=\"label\"\n      [placeholder]=\"_selectFieldLabel\"\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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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]=\"_selectFieldLabel\"\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                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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]=\"fromLabel()\" 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]=\"toLabel()\" 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]=\"_valueLabel\" 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]=\"_valueLabel\" 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]=\"_valueLabel\" 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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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]=\"valueItems(fieldOf(rule)!)\" valueField=\"value\" displayField=\"display\" [multiple]=\"isMulti(rule.operator)\" [placeholder]=\"_valueLabel\" 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]=\"_removeConditionLabel\" [attr.aria-label]=\"_removeConditionLabel\" [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, #005cbb);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, #005cbb);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #d7e3ff);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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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-iconsd-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, #005cbb);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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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", "showSelectAll", "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", "mask", "hideInlineError", "blurOnEnter", "clearable", "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", "clearable", "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", "transform", "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", "transform", "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: [SdIcon, NgTemplateOutlet, 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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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, #005cbb);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, #005cbb);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #d7e3ff);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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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-iconsd-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, #005cbb);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"] }]
+            args: [{ selector: 'sd-query-builder', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdIcon, NgTemplateOutlet, 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  <!-- why: \"click ra v\u00F9ng tr\u1ED1ng \u0111\u1EC3 \u0111\u00F3ng dropdown\" l\u00E0 h\u00E0nh vi CH\u1EC8 c\u00F3 \u1EDF chu\u1ED9t \u2014 ng\u01B0\u1EDDi d\u00F9ng b\u00E0n ph\u00EDm\n       kh\u00F4ng c\u00F3 c\u00E1ch n\u00E0o \u0111\u00F3ng. Th\u00EAm Escape l\u00E0m t\u01B0\u01A1ng \u0111\u01B0\u01A1ng. role=\"group\": container l\u00E0 m\u1ED9t nh\u00F3m\n       control n\u00EAn KH\u00D4NG nh\u1EADn tabindex, tab \u0111i th\u1EB3ng v\u00E0o c\u00E1c n\u00FAt/select b\u00EAn trong. -->\n  <div\n    class=\"qb-container\"\n    role=\"group\"\n    [class.is-disabled]=\"resolvedDisabled()\"\n    (click)=\"closeAllDropdowns()\"\n    (keydown.escape)=\"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  @let _removeGroupLabel = removeGroupLabel();\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]=\"addLabel()\" [attr.aria-label]=\"addNodeLabel()\" [disabled]=\"resolvedDisabled()\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        @if (group.open) {\n          <!-- why: dropdown l\u00E0 NH\u00D3M hai n\u00FAt (role=\"group\"), kh\u00F4ng ph\u1EA3i n\u00FAt \u2014 kh\u00F4ng nh\u1EADn tabindex,\n               tab \u0111i th\u1EB3ng v\u00E0o hai n\u00FAt. stopPropagation cho c\u1EA3 click l\u1EABn Enter \u0111\u1EC3 thao t\u00E1c b\u00EAn\n               trong dropdown kh\u00F4ng k\u00EDch ho\u1EA1t handler \"\u0111\u00F3ng t\u1EA5t c\u1EA3\" c\u1EE7a container. -->\n          <div class=\"qb-dropdown\" role=\"group\" (click)=\"$event.stopPropagation()\" (keydown.enter)=\"$event.stopPropagation()\">\n            <button type=\"button\" (click)=\"addRule(group)\">+ {{ conditionLabel() }}</button>\n            <button type=\"button\" (click)=\"addGroup(group)\">+ {{ groupLabel() }}</button>\n          </div>\n        }\n        @if (!isRoot) {\n          <button type=\"button\" class=\"qb-btn qb-btn-remove\" [title]=\"_removeGroupLabel\" [attr.aria-label]=\"_removeGroupLabel\" [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\">{{ emptyLabel() }}</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  @let _selectFieldLabel = selectFieldLabel();\n  @let _valueLabel = valueLabel();\n  @let _removeConditionLabel = removeConditionLabel();\n  @let _dateModes = dateModes();\n  @let _relativeUnitOptions = relativeUnitOptions();\n  <div class=\"qb-rule\">\n    <sd-select\n      class=\"qb-field\"\n      [items]=\"resolvedFields()\"\n      valueField=\"key\"\n      displayField=\"label\"\n      [placeholder]=\"_selectFieldLabel\"\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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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          <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n          <span class=\"qb-opt-label\">{{ $any(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                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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]=\"_selectFieldLabel\"\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                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(item).label }}</span>\n              </span>\n            </ng-template>\n            <ng-template #sdSelected let-item=\"item\">\n              <span class=\"qb-opt\">\n                <sd-icon class=\"qb-opt-icon\" [name]=\"fieldIcon($any(item))\"></sd-icon>\n                <span class=\"qb-opt-label\">{{ $any(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]=\"fromLabel()\" 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]=\"toLabel()\" 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]=\"_valueLabel\" 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]=\"_valueLabel\" 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]=\"_valueLabel\" 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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item).icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(item).display }}</span>\n                  </span>\n                </ng-template>\n                <ng-template #sdSelected let-item=\"item\">\n                  <span class=\"qb-opt\">\n                    <sd-icon class=\"qb-opt-icon\" [name]=\"$any(item)?.icon\"></sd-icon>\n                    <span class=\"qb-opt-label\">{{ $any(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]=\"valueItems(fieldOf(rule)!)\" valueField=\"value\" displayField=\"display\" [multiple]=\"isMulti(rule.operator)\" [placeholder]=\"_valueLabel\" 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]=\"_removeConditionLabel\" [attr.aria-label]=\"_removeConditionLabel\" [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, #005cbb);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, #005cbb);color:#fff}.qb-logic-switch button:hover:not(.active):not([disabled]){background:var(--sd-primary-light, #d7e3ff);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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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, #d7e3ff);color:var(--sd-primary, #005cbb)}.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-iconsd-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, #005cbb);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, 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 };
+export { SD_QB_DATE_MODES, SD_QB_DEFAULT_OPERATOR_BY_TYPE, SD_QB_EMPTY_OPTIONS, SD_QB_MULTI_OPERATORS, SD_QB_NO_DATA_OPERATORS, SD_QB_OPERATORS_BY_TYPE, SD_QB_RELATIVE_UNIT_OPTIONS, SD_QB_TODAY, SD_QB_TYPE_ICON, SD_QB_VALUE_SOURCE_OPTIONS, SdQueryBuilder, filterToTokens, filterToTree, qbRelativeLabelKey, sdIsQbGroup, sdQbAllowedOperators, sdQbDefaultOperator, sdQbDefaultRelative, sdQbFieldIcon, sdQbId, sdQbIsMultiOperator, sdQbIsNoDataOperator, sdQbIsRelativeDate, sdQbIsToday, sdQbNewGroup, sdQbNewRule, sdQbSupportsFieldCompareOperator, treeToFilter };
 //# sourceMappingURL=sdcorejs-angular-components-query-builder.mjs.map