@sd-angular/core 19.0.10 → 19.0.11

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

@@ -382,11 +382,11 @@ class SdQueryInlineValueChip {
         return { ok: true, value: t };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineValueChip, isStandalone: true, selector: "sd-query-inline-value-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", remove: "remove" }, viewQueries: [{ propertyName: "firstInput", first: true, predicate: ["firstInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state]. The value\n  field is the shared <sd-inline-text> primitive (chrome=\"seamless\") so width hugs\n  content; the chip keeps the envelope + parse/commit logic.\n-->\n@let _state = state();\n@let _autoId = autoId();\n@let _isNoData = isNoData();\n@let _density = density();\n@let _operator = operator();\n\n<span\n  class=\"c-seamless\"\n  [attr.data-state]=\"_state\"\n  [class.c-seamless--compact]=\"_density === 'compact'\"\n  [class.c-seamless--comfortable]=\"_density === 'comfortable'\"\n  (click)=\"focusFromShell($event)\">\n\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\n  <span class=\"c-seamless__label\">\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\n    @if (showOperator() && !_isNoData) {\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\n    } @else if (!_isNoData) {\n      <span class=\"c-seamless__sep\">:</span>\n    }\n  </span>\n\n  <!-- Input segment \u2014 seamless borderless primitive; hidden for NULL / NOT_NULL -->\n  @if (!_isNoData) {\n    <span class=\"c-seamless__input\">\n      @if (isBetween()) {\n        <sd-inline-text\n          #firstInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [autofocus]=\"autofocus()\"\n          [state]=\"_state\"\n          [value]=\"draftFrom()\"\n          (valueChange)=\"draftFrom.set($event)\"\n          [placeholder]=\"phFrom()\"\n          [autoId]=\"_autoId ? _autoId + '-from' : undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitRange()\"\n          (keyupEnter)=\"firstInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\n        <sd-inline-text\n          #secondInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [state]=\"_state\"\n          [value]=\"draftTo()\"\n          (valueChange)=\"draftTo.set($event)\"\n          [placeholder]=\"phTo()\"\n          [autoId]=\"_autoId ? _autoId + '-to' : undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitRange()\"\n          (keyupEnter)=\"secondInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(secondInput)\" />\n      } @else {\n        <sd-inline-text\n          #firstInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [autofocus]=\"autofocus()\"\n          [state]=\"_state\"\n          [value]=\"draft()\"\n          (valueChange)=\"draft.set($event)\"\n          [placeholder]=\"ph()\"\n          [autoId]=\"_autoId ?? undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitSingle()\"\n          (keyupEnter)=\"firstInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\n      }\n    </span>\n  }\n\n  <!-- \u00D7 segment -->\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n  </button>\n</span>\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 0 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 0 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 8px 0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 10px 0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdInlineText, selector: "sd-inline-text", inputs: ["value", "control", "placeholder", "disabled", "clearable", "state", "chrome", "autoId", "autofocus", "minSize"], outputs: ["valueChange", "cleared", "keyupEnter", "keydownEscape", "sdFocus", "sdBlur", "sdKeydown", "sdPaste", "sdCompositionStart", "sdCompositionEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineValueChip, isStandalone: true, selector: "sd-query-inline-value-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", remove: "remove" }, viewQueries: [{ propertyName: "firstInput", first: true, predicate: ["firstInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state]. The value\r\n  field is the shared <sd-inline-text> primitive (chrome=\"seamless\") so width hugs\r\n  content; the chip keeps the envelope + parse/commit logic.\r\n-->\r\n@let _state = state();\r\n@let _autoId = autoId();\r\n@let _isNoData = isNoData();\r\n@let _density = density();\r\n@let _operator = operator();\r\n\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"_state\"\r\n  [class.c-seamless--compact]=\"_density === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"_density === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !_isNoData) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\r\n    } @else if (!_isNoData) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 seamless borderless primitive; hidden for NULL / NOT_NULL -->\r\n  @if (!_isNoData) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <sd-inline-text\r\n          #firstInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [autofocus]=\"autofocus()\"\r\n          [state]=\"_state\"\r\n          [value]=\"draftFrom()\"\r\n          (valueChange)=\"draftFrom.set($event)\"\r\n          [placeholder]=\"phFrom()\"\r\n          [autoId]=\"_autoId ? _autoId + '-from' : undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitRange()\"\r\n          (keyupEnter)=\"firstInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <sd-inline-text\r\n          #secondInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [state]=\"_state\"\r\n          [value]=\"draftTo()\"\r\n          (valueChange)=\"draftTo.set($event)\"\r\n          [placeholder]=\"phTo()\"\r\n          [autoId]=\"_autoId ? _autoId + '-to' : undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitRange()\"\r\n          (keyupEnter)=\"secondInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(secondInput)\" />\r\n      } @else {\r\n        <sd-inline-text\r\n          #firstInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [autofocus]=\"autofocus()\"\r\n          [state]=\"_state\"\r\n          [value]=\"draft()\"\r\n          (valueChange)=\"draft.set($event)\"\r\n          [placeholder]=\"ph()\"\r\n          [autoId]=\"_autoId ?? undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitSingle()\"\r\n          (keyupEnter)=\"firstInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 0 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 0 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 8px 0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 10px 0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdInlineText, selector: "sd-inline-text", inputs: ["value", "control", "placeholder", "disabled", "clearable", "state", "chrome", "autoId", "autofocus", "minSize"], outputs: ["valueChange", "cleared", "keyupEnter", "keydownEscape", "sdFocus", "sdBlur", "sdKeydown", "sdPaste", "sdCompositionStart", "sdCompositionEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineValueChip, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-inline-value-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, SdOperator, SdInlineText], template: "<!--\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state]. The value\n  field is the shared <sd-inline-text> primitive (chrome=\"seamless\") so width hugs\n  content; the chip keeps the envelope + parse/commit logic.\n-->\n@let _state = state();\n@let _autoId = autoId();\n@let _isNoData = isNoData();\n@let _density = density();\n@let _operator = operator();\n\n<span\n  class=\"c-seamless\"\n  [attr.data-state]=\"_state\"\n  [class.c-seamless--compact]=\"_density === 'compact'\"\n  [class.c-seamless--comfortable]=\"_density === 'comfortable'\"\n  (click)=\"focusFromShell($event)\">\n\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\n  <span class=\"c-seamless__label\">\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\n    @if (showOperator() && !_isNoData) {\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\n    } @else if (!_isNoData) {\n      <span class=\"c-seamless__sep\">:</span>\n    }\n  </span>\n\n  <!-- Input segment \u2014 seamless borderless primitive; hidden for NULL / NOT_NULL -->\n  @if (!_isNoData) {\n    <span class=\"c-seamless__input\">\n      @if (isBetween()) {\n        <sd-inline-text\n          #firstInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [autofocus]=\"autofocus()\"\n          [state]=\"_state\"\n          [value]=\"draftFrom()\"\n          (valueChange)=\"draftFrom.set($event)\"\n          [placeholder]=\"phFrom()\"\n          [autoId]=\"_autoId ? _autoId + '-from' : undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitRange()\"\n          (keyupEnter)=\"firstInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\n        <sd-inline-text\n          #secondInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [state]=\"_state\"\n          [value]=\"draftTo()\"\n          (valueChange)=\"draftTo.set($event)\"\n          [placeholder]=\"phTo()\"\n          [autoId]=\"_autoId ? _autoId + '-to' : undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitRange()\"\n          (keyupEnter)=\"secondInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(secondInput)\" />\n      } @else {\n        <sd-inline-text\n          #firstInput\n          chrome=\"seamless\"\n          [clearable]=\"false\"\n          [autofocus]=\"autofocus()\"\n          [state]=\"_state\"\n          [value]=\"draft()\"\n          (valueChange)=\"draft.set($event)\"\n          [placeholder]=\"ph()\"\n          [autoId]=\"_autoId ?? undefined\"\n          (sdFocus)=\"onFocus()\"\n          (sdBlur)=\"commitSingle()\"\n          (keyupEnter)=\"firstInput.blur()\"\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\n      }\n    </span>\n  }\n\n  <!-- \u00D7 segment -->\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n  </button>\n</span>\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 0 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 0 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 8px 0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 10px 0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"] }]
+            args: [{ selector: 'sd-query-inline-value-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, SdOperator, SdInlineText], template: "<!--\r\n  Seamless string/number chip \u2014 the pill IS the input. One border, three flush\r\n  segments: label \u00B7 input(s) \u00B7 \u00D7. State styling driven by [data-state]. The value\r\n  field is the shared <sd-inline-text> primitive (chrome=\"seamless\") so width hugs\r\n  content; the chip keeps the envelope + parse/commit logic.\r\n-->\r\n@let _state = state();\r\n@let _autoId = autoId();\r\n@let _isNoData = isNoData();\r\n@let _density = density();\r\n@let _operator = operator();\r\n\r\n<span\r\n  class=\"c-seamless\"\r\n  [attr.data-state]=\"_state\"\r\n  [class.c-seamless--compact]=\"_density === 'compact'\"\r\n  [class.c-seamless--comfortable]=\"_density === 'comfortable'\"\r\n  (click)=\"focusFromShell($event)\">\r\n\r\n  <!-- Label segment: icon + field name (+ optional operator pill) -->\r\n  <span class=\"c-seamless__label\">\r\n    <mat-icon class=\"c-seamless__icon\" fontSet=\"material-icons-outlined\">{{ icon() }}</mat-icon>\r\n    <span class=\"c-seamless__field\">{{ field().label }}</span>\r\n    @if (showOperator() && !_isNoData) {\r\n      <sd-operator class=\"c-seamless__op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\r\n    } @else if (!_isNoData) {\r\n      <span class=\"c-seamless__sep\">:</span>\r\n    }\r\n  </span>\r\n\r\n  <!-- Input segment \u2014 seamless borderless primitive; hidden for NULL / NOT_NULL -->\r\n  @if (!_isNoData) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <sd-inline-text\r\n          #firstInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [autofocus]=\"autofocus()\"\r\n          [state]=\"_state\"\r\n          [value]=\"draftFrom()\"\r\n          (valueChange)=\"draftFrom.set($event)\"\r\n          [placeholder]=\"phFrom()\"\r\n          [autoId]=\"_autoId ? _autoId + '-from' : undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitRange()\"\r\n          (keyupEnter)=\"firstInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <sd-inline-text\r\n          #secondInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [state]=\"_state\"\r\n          [value]=\"draftTo()\"\r\n          (valueChange)=\"draftTo.set($event)\"\r\n          [placeholder]=\"phTo()\"\r\n          [autoId]=\"_autoId ? _autoId + '-to' : undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitRange()\"\r\n          (keyupEnter)=\"secondInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(secondInput)\" />\r\n      } @else {\r\n        <sd-inline-text\r\n          #firstInput\r\n          chrome=\"seamless\"\r\n          [clearable]=\"false\"\r\n          [autofocus]=\"autofocus()\"\r\n          [state]=\"_state\"\r\n          [value]=\"draft()\"\r\n          (valueChange)=\"draft.set($event)\"\r\n          [placeholder]=\"ph()\"\r\n          [autoId]=\"_autoId ?? undefined\"\r\n          (sdFocus)=\"onFocus()\"\r\n          (sdBlur)=\"commitSingle()\"\r\n          (keyupEnter)=\"firstInput.blur()\"\r\n          (keydownEscape)=\"revertAndBlur(firstInput)\" />\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <!-- \u00D7 segment -->\r\n  <button type=\"button\" class=\"c-seamless__x\" aria-label=\"Remove filter\" (click)=\"onRemove($event)\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</span>\r\n", styles: [":host{display:inline-flex}.c-seamless{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;font-family:inherit;font-size:13px;line-height:1;cursor:text;border:1px solid #d6d8db;background:#fff;color:#5f6368;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,color .12s ease}.c-seamless--compact{height:28px}.c-seamless--comfortable{height:32px}.c-seamless:hover:not([data-state=focus]):not([data-state=error]){border-color:var(--sd-primary)}.c-seamless[data-state=pending]{border-style:dashed;border-color:#d6d8db;background:#fff;color:#5f6368}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=focus]{border-color:var(--sd-primary);background:#fff;box-shadow:0 0 0 3px var(--sd-primary-light)}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless__label{display:inline-flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap;cursor:text;color:inherit}.c-seamless--compact .c-seamless__label{padding:0 0 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 0 0 14px}.c-seamless__icon{font-size:14px;width:14px;height:14px;color:inherit}.c-seamless__field{color:inherit}.c-seamless__op{display:inline-flex;align-items:center;color:inherit}.c-seamless__sep{color:#7a7a7a}.c-seamless__input{display:inline-flex;align-items:center;gap:4px}.c-seamless--compact .c-seamless__input{padding:0 8px 0 4px}.c-seamless--comfortable .c-seamless__input{padding:0 10px 0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__x{display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(0,0,0,.04);background:transparent;cursor:pointer;color:inherit}.c-seamless--compact .c-seamless__x{width:26px}.c-seamless--comfortable .c-seamless__x{width:28px}.c-seamless__x mat-icon{font-size:14px;width:14px;height:14px}.c-seamless__x:hover{background:#0000000d}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -469,7 +469,7 @@ class SdQueryBuildChip {
         return t === 'string' || t === 'number';
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  In-progress chip (inline-mode token build flow).\n  Seamless string/number branch keeps its own pill; everything else renders inside\n  the dashed .c-token.c-token-building shell.\n-->\n@let _building = building();\n@let _autoId = autoId();\n\n@if (isSeamless()) {\n  <sd-query-inline-value-chip\n    [field]=\"_building.field\"\n    [operator]=\"$any(_building.operator)\"\n    [value]=\"_building.value ?? null\"\n    [density]=\"density()\"\n    [showOperator]=\"showOperator()\"\n    [autoId]=\"_autoId\"\n    [autofocus]=\"true\"\n    (valueChange)=\"seamlessCommit.emit($event)\"\n    (remove)=\"cancel.emit()\" />\n} @else {\n  <div class=\"c-token c-token-building\">\n    <span class=\"c-token-field\">{{ _building.field.label }}</span>\n\n    @if (_building.step === 'operator') {\n      <sd-operator\n        #buildOperator\n        class=\"c-token-op\"\n        [operators]=\"allowedOperators()\"\n        [model]=\"_building.operator\"\n        (modelChange)=\"pickOperator.emit($any($event))\" />\n    } @else {\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\n      <sd-operator\n        class=\"c-token-op\"\n        [operators]=\"[$any(_building.operator)]\"\n        [model]=\"$any(_building.operator)\"\n        [disabled]=\"true\" />\n\n      @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\n        @let _bopt = $any(_building.field).option;\n        <span class=\"c-token-value c-token-value-edit\">\n          <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\n            [autoId]=\"_autoId\"\n            [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\n            [valueField]=\"_bopt.valueField\"\n            [displayField]=\"_bopt.displayField\"\n            [multiple]=\"multiple()\"\n            [model]=\"$any(_building.value)\"\n            (sdChange)=\"commitValue.emit($event)\">\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\n              @if ((selectedItems?.length ?? 0) > 1) {\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n              } @else if ((selectedItems?.length ?? 0) === 1) {\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\n              }\n            </ng-template>\n          </sd-select>\n        </span>\n      } @else if (_building.field.type === 'date') {\n        <span class=\"c-token-value c-token-value-edit\">\n          @if (_building.operator === 'BETWEEN') {\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n          } @else {\n            <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\n          }\n        </span>\n      } @else if (_building.field.type === 'datetime') {\n        <span class=\"c-token-value c-token-value-edit\">\n          @if (_building.operator === 'BETWEEN') {\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n          } @else {\n            <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\n          }\n        </span>\n      } @else if (_building.field.type === 'boolean') {\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\n             .c-bool-true / .c-bool-false. -->\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-true\"\n            [class.c-bool-active]=\"_building.value === true\"\n            [attr.data-autoId]=\"_autoId + '-true'\"\n            (click)=\"commitValue.emit(true)\">\n            {{ $any(_building.field).trueLabel || 'C\u00F3' }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-false\"\n            [class.c-bool-active]=\"_building.value === false\"\n            [attr.data-autoId]=\"_autoId + '-false'\"\n            (click)=\"commitValue.emit(false)\">\n            {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\n          </button>\n        </span>\n      } @else {\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\n        <span class=\"c-token-value c-token-value-edit\">\n          <sd-input size=\"sm\"\n            [autoId]=\"_autoId\"\n            [model]=\"$any(_building.value)\"\n            (sdChange)=\"draftChange.emit($event)\"\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\n        </span>\n      }\n    }\n\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _building = building();\r\n@let _autoId = autoId();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_building.field\"\r\n    [operator]=\"$any(_building.operator)\"\r\n    [value]=\"_building.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"_autoId\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _building.field.label }}</span>\r\n\r\n    @if (_building.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_building.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_building.operator)]\"\r\n        [model]=\"$any(_building.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_building.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\r\n            [autoId]=\"_autoId\"\r\n            [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_building.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_building.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_building.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_building.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_building.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_building.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_building.value === true\"\r\n            [attr.data-autoId]=\"_autoId + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_building.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_building.value === false\"\r\n            [attr.data-autoId]=\"_autoId + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"_autoId\"\r\n            [model]=\"$any(_building.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, decorators: [{
             type: Component,
@@ -484,7 +484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdInputNumber,
                         SdSelect,
                         SdQueryInlineValueChip,
-                    ], template: "<!--\n  In-progress chip (inline-mode token build flow).\n  Seamless string/number branch keeps its own pill; everything else renders inside\n  the dashed .c-token.c-token-building shell.\n-->\n@let _building = building();\n@let _autoId = autoId();\n\n@if (isSeamless()) {\n  <sd-query-inline-value-chip\n    [field]=\"_building.field\"\n    [operator]=\"$any(_building.operator)\"\n    [value]=\"_building.value ?? null\"\n    [density]=\"density()\"\n    [showOperator]=\"showOperator()\"\n    [autoId]=\"_autoId\"\n    [autofocus]=\"true\"\n    (valueChange)=\"seamlessCommit.emit($event)\"\n    (remove)=\"cancel.emit()\" />\n} @else {\n  <div class=\"c-token c-token-building\">\n    <span class=\"c-token-field\">{{ _building.field.label }}</span>\n\n    @if (_building.step === 'operator') {\n      <sd-operator\n        #buildOperator\n        class=\"c-token-op\"\n        [operators]=\"allowedOperators()\"\n        [model]=\"_building.operator\"\n        (modelChange)=\"pickOperator.emit($any($event))\" />\n    } @else {\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\n      <sd-operator\n        class=\"c-token-op\"\n        [operators]=\"[$any(_building.operator)]\"\n        [model]=\"$any(_building.operator)\"\n        [disabled]=\"true\" />\n\n      @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\n        @let _bopt = $any(_building.field).option;\n        <span class=\"c-token-value c-token-value-edit\">\n          <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\n            [autoId]=\"_autoId\"\n            [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\n            [valueField]=\"_bopt.valueField\"\n            [displayField]=\"_bopt.displayField\"\n            [multiple]=\"multiple()\"\n            [model]=\"$any(_building.value)\"\n            (sdChange)=\"commitValue.emit($event)\">\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\n              @if ((selectedItems?.length ?? 0) > 1) {\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n              } @else if ((selectedItems?.length ?? 0) === 1) {\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\n              }\n            </ng-template>\n          </sd-select>\n        </span>\n      } @else if (_building.field.type === 'date') {\n        <span class=\"c-token-value c-token-value-edit\">\n          @if (_building.operator === 'BETWEEN') {\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n          } @else {\n            <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\n          }\n        </span>\n      } @else if (_building.field.type === 'datetime') {\n        <span class=\"c-token-value c-token-value-edit\">\n          @if (_building.operator === 'BETWEEN') {\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n          } @else {\n            <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n              [autoId]=\"_autoId\"\n              [model]=\"$any(_building.value)\"\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\n          }\n        </span>\n      } @else if (_building.field.type === 'boolean') {\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\n             .c-bool-true / .c-bool-false. -->\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-true\"\n            [class.c-bool-active]=\"_building.value === true\"\n            [attr.data-autoId]=\"_autoId + '-true'\"\n            (click)=\"commitValue.emit(true)\">\n            {{ $any(_building.field).trueLabel || 'C\u00F3' }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-false\"\n            [class.c-bool-active]=\"_building.value === false\"\n            [attr.data-autoId]=\"_autoId + '-false'\"\n            (click)=\"commitValue.emit(false)\">\n            {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\n          </button>\n        </span>\n      } @else {\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\n        <span class=\"c-token-value c-token-value-edit\">\n          <sd-input size=\"sm\"\n            [autoId]=\"_autoId\"\n            [model]=\"$any(_building.value)\"\n            (sdChange)=\"draftChange.emit($event)\"\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\n        </span>\n      }\n    }\n\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
+                    ], template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _building = building();\r\n@let _autoId = autoId();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_building.field\"\r\n    [operator]=\"$any(_building.operator)\"\r\n    [value]=\"_building.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"_autoId\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _building.field.label }}</span>\r\n\r\n    @if (_building.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_building.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_building.operator)]\"\r\n        [model]=\"$any(_building.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_building.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\r\n            [autoId]=\"_autoId\"\r\n            [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_building.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_building.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_building.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_building.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_building.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\r\n              [autoId]=\"_autoId\"\r\n              [model]=\"$any(_building.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_building.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_building.value === true\"\r\n            [attr.data-autoId]=\"_autoId + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_building.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_building.value === false\"\r\n            [attr.data-autoId]=\"_autoId + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"_autoId\"\r\n            [model]=\"$any(_building.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -880,7 +880,7 @@ class SdQueryInlineChip {
         this.#editing.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineChip, isStandalone: true, selector: "sd-query-inline-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, isNoData: { classPropertyName: "isNoData", publicName: "isNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", commitRange: "commitRange", liveChange: "liveChange", remove: "remove" }, ngImport: i0, template: "<!--\n  Completed inline chip \u2014 non-string/number/seamless branches.\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\n  focusout outside the wrapper exits edit, picker emits commit single OR\n  liveChange (multi) OR commitRange (BETWEEN).\n-->\n@let _field = field();\n@let _operator = operator();\n@let _data = data();\n@let _multiple = multiple();\n@let _editing = editing();\n@let _isNoData = isNoData();\n@let _autoId = autoId();\n\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\n  <span class=\"c-token-field\">{{ _field.label }}</span>\n\n  @if (!_isNoData && showOperator()) {\n    <sd-operator class=\"c-token-op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\n  } @else if (!_isNoData) {\n    <span class=\"c-token-sep\">:</span>\n  }\n\n  @if (!_isNoData) {\n    @if (_field.type === 'boolean') {\n      @if (_editing) {\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-true\"\n            [class.c-bool-active]=\"_data === true\"\n            [attr.data-autoId]=\"_autoId + '-true'\"\n            (click)=\"emitBoolean(true)\">\n            {{ $any(_field).trueLabel || 'C\u00F3' }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-false\"\n            [class.c-bool-active]=\"_data === false\"\n            [attr.data-autoId]=\"_autoId + '-false'\"\n            (click)=\"emitBoolean(false)\">\n            {{ $any(_field).falseLabel || 'Kh\u00F4ng' }}\n          </button>\n        </span>\n      } @else {\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\n      }\n    } @else if ((_field.type === 'date' || _field.type === 'datetime') && _operator === 'BETWEEN') {\n      <!-- why: sd-date-range [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout (datetime downgrade v\u1EC1 date).\n           Chip kh\u00F4ng wiring lifecycle n\u1EEFa; [clearable]=false v\u00EC chip c\u00F3 \u00D7 ri\u00EAng. -->\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-date-range size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\n      </span>\n    } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\n      @let _opt = $any(_field).option;\n      <!-- why: sd-select [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout\u2192tho\u00E1t + bare editor.\n           Chip kh\u00F4ng wiring lifecycle cho nh\u00E1nh n\u00E0y n\u1EEFa (b\u1ECF enterEdit/onFocusOut/bare). -->\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-select #chipPicker size=\"sm\" minWidthPanel=\"300px\"\n          [autoId]=\"_autoId\"\n          [items]=\"_field.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\n          [valueField]=\"_opt.valueField\"\n          [displayField]=\"_opt.displayField\"\n          [multiple]=\"_multiple\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"_multiple ? emitLive($event) : emitSingleCommit($event)\">\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\n            @if ((selectedItems?.length ?? 0) > 1) {\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n            } @else if ((selectedItems?.length ?? 0) === 1) {\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\n            }\n          </ng-template>\n        </sd-select>\n      </span>\n    } @else if (_field.type === 'date') {\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-date size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\n      </span>\n    } @else if (_field.type === 'datetime') {\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-datetime size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\n      </span>\n    } @else {\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\n      <span class=\"c-token-value\">{{ valueText() }}</span>\n    }\n  }\n\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineChip, isStandalone: true, selector: "sd-query-inline-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, isNoData: { classPropertyName: "isNoData", publicName: "isNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", commitRange: "commitRange", liveChange: "liveChange", remove: "remove" }, ngImport: i0, template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _field = field();\r\n@let _operator = operator();\r\n@let _data = data();\r\n@let _multiple = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n@let _autoId = autoId();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _field.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_field.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"_autoId + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"_autoId + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_field.type === 'date' || _field.type === 'datetime') && _operator === 'BETWEEN') {\r\n      <!-- why: sd-date-range [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout (datetime downgrade v\u1EC1 date).\r\n           Chip kh\u00F4ng wiring lifecycle n\u1EEFa; [clearable]=false v\u00EC chip c\u00F3 \u00D7 ri\u00EAng. -->\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-date-range size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n      @let _opt = $any(_field).option;\r\n      <!-- why: sd-select [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout\u2192tho\u00E1t + bare editor.\r\n           Chip kh\u00F4ng wiring lifecycle cho nh\u00E1nh n\u00E0y n\u1EEFa (b\u1ECF enterEdit/onFocusOut/bare). -->\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-select #chipPicker size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"_autoId\"\r\n          [items]=\"_field.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multiple\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multiple ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_field.type === 'date') {\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-date size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_field.type === 'datetime') {\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-datetime size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineChip, decorators: [{
             type: Component,
@@ -892,7 +892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdDateRange,
                         SdDatetime,
                         SdSelect,
-                    ], template: "<!--\n  Completed inline chip \u2014 non-string/number/seamless branches.\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\n  focusout outside the wrapper exits edit, picker emits commit single OR\n  liveChange (multi) OR commitRange (BETWEEN).\n-->\n@let _field = field();\n@let _operator = operator();\n@let _data = data();\n@let _multiple = multiple();\n@let _editing = editing();\n@let _isNoData = isNoData();\n@let _autoId = autoId();\n\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\n  <span class=\"c-token-field\">{{ _field.label }}</span>\n\n  @if (!_isNoData && showOperator()) {\n    <sd-operator class=\"c-token-op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\n  } @else if (!_isNoData) {\n    <span class=\"c-token-sep\">:</span>\n  }\n\n  @if (!_isNoData) {\n    @if (_field.type === 'boolean') {\n      @if (_editing) {\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-true\"\n            [class.c-bool-active]=\"_data === true\"\n            [attr.data-autoId]=\"_autoId + '-true'\"\n            (click)=\"emitBoolean(true)\">\n            {{ $any(_field).trueLabel || 'C\u00F3' }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"c-bool-btn c-bool-false\"\n            [class.c-bool-active]=\"_data === false\"\n            [attr.data-autoId]=\"_autoId + '-false'\"\n            (click)=\"emitBoolean(false)\">\n            {{ $any(_field).falseLabel || 'Kh\u00F4ng' }}\n          </button>\n        </span>\n      } @else {\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\n      }\n    } @else if ((_field.type === 'date' || _field.type === 'datetime') && _operator === 'BETWEEN') {\n      <!-- why: sd-date-range [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout (datetime downgrade v\u1EC1 date).\n           Chip kh\u00F4ng wiring lifecycle n\u1EEFa; [clearable]=false v\u00EC chip c\u00F3 \u00D7 ri\u00EAng. -->\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-date-range size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\n      </span>\n    } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\n      @let _opt = $any(_field).option;\n      <!-- why: sd-select [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout\u2192tho\u00E1t + bare editor.\n           Chip kh\u00F4ng wiring lifecycle cho nh\u00E1nh n\u00E0y n\u1EEFa (b\u1ECF enterEdit/onFocusOut/bare). -->\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-select #chipPicker size=\"sm\" minWidthPanel=\"300px\"\n          [autoId]=\"_autoId\"\n          [items]=\"_field.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\n          [valueField]=\"_opt.valueField\"\n          [displayField]=\"_opt.displayField\"\n          [multiple]=\"_multiple\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"_multiple ? emitLive($event) : emitSingleCommit($event)\">\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\n            @if ((selectedItems?.length ?? 0) > 1) {\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n            } @else if ((selectedItems?.length ?? 0) === 1) {\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\n            }\n          </ng-template>\n        </sd-select>\n      </span>\n    } @else if (_field.type === 'date') {\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-date size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\n      </span>\n    } @else if (_field.type === 'datetime') {\n      <span class=\"c-token-value c-token-value-edit\">\n        <sd-datetime size=\"sm\"\n          [autoId]=\"_autoId\"\n          [viewed]=\"'inline'\"\n          [clearable]=\"false\"\n          [model]=\"$any(_data)\"\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\n      </span>\n    } @else {\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\n      <span class=\"c-token-value\">{{ valueText() }}</span>\n    }\n  }\n\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
+                    ], template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _field = field();\r\n@let _operator = operator();\r\n@let _data = data();\r\n@let _multiple = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n@let _autoId = autoId();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _field.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_operator]\" [model]=\"_operator\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_field.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"_autoId + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"_autoId + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_field.type === 'date' || _field.type === 'datetime') && _operator === 'BETWEEN') {\r\n      <!-- why: sd-date-range [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout (datetime downgrade v\u1EC1 date).\r\n           Chip kh\u00F4ng wiring lifecycle n\u1EEFa; [clearable]=false v\u00EC chip c\u00F3 \u00D7 ri\u00EAng. -->\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-date-range size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n      @let _opt = $any(_field).option;\r\n      <!-- why: sd-select [viewed]=\"'inline'\" t\u1EF1 qu\u1EA3n click\u2192edit + focusout\u2192tho\u00E1t + bare editor.\r\n           Chip kh\u00F4ng wiring lifecycle cho nh\u00E1nh n\u00E0y n\u1EEFa (b\u1ECF enterEdit/onFocusOut/bare). -->\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-select #chipPicker size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"_autoId\"\r\n          [items]=\"_field.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multiple\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multiple ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_field.type === 'date') {\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-date size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_field.type === 'datetime') {\r\n      <span class=\"c-token-value c-token-value-edit\">\r\n        <sd-datetime size=\"sm\"\r\n          [autoId]=\"_autoId\"\r\n          [viewed]=\"'inline'\"\r\n          [clearable]=\"false\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -928,11 +928,11 @@ class SdQueryPopoverChip {
     openMenu() { this.trigger()?.openMenu(); }
     closeMenu() { this.trigger()?.closeMenu(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryPopoverChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryPopoverChip, isStandalone: true, selector: "sd-query-popover-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open", remove: "remove" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["chipTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\n@let _active = active();\n@let _field = field();\n@let _filterField = filterField();\n@let _filterOperator = filterOperator();\n\n<div\n  #chipTrigger=\"matMenuTrigger\"\n  role=\"button\"\n  tabindex=\"0\"\n  class=\"c-chip\"\n  [class.c-chip-active]=\"_active\"\n  [class.c-chip-inactive]=\"!_active\"\n  [attr.data-field]=\"_filterField\"\n  [matTooltip]=\"_field?.label || _filterField\"\n  [matMenuTriggerFor]=\"menu()\"\n  (menuOpened)=\"open.emit()\"\n  (keydown.enter)=\"chipTrigger.openMenu()\"\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\n    {{ _field ? iconFor(_field) : 'tune' }}\n  </mat-icon>\n  <span class=\"c-chip-label\">{{ _field?.label || _filterField }}</span>\n\n  @if (showOperator() && _active) {\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[_filterOperator]\" [model]=\"_filterOperator\" [disabled]=\"true\" />\n  } @else if (_active) {\n    <span class=\"c-chip-sep\">:</span>\n  }\n\n  @if (_active) {\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\n  }\n\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\n\n  @if (_active) {\n    <span\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"c-chip-remove\"\n      aria-label=\"Remove filter\"\n      (click)=\"$event.stopPropagation(); remove.emit()\"\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n    </span>\n  }\n</div>\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryPopoverChip, isStandalone: true, selector: "sd-query-popover-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open", remove: "remove" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["chipTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\r\n@let _active = active();\r\n@let _field = field();\r\n@let _filterField = filterField();\r\n@let _filterOperator = filterOperator();\r\n\r\n<div\r\n  #chipTrigger=\"matMenuTrigger\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  class=\"c-chip\"\r\n  [class.c-chip-active]=\"_active\"\r\n  [class.c-chip-inactive]=\"!_active\"\r\n  [attr.data-field]=\"_filterField\"\r\n  [matTooltip]=\"_field?.label || _filterField\"\r\n  [matMenuTriggerFor]=\"menu()\"\r\n  (menuOpened)=\"open.emit()\"\r\n  (keydown.enter)=\"chipTrigger.openMenu()\"\r\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n    {{ _field ? iconFor(_field) : 'tune' }}\r\n  </mat-icon>\r\n  <span class=\"c-chip-label\">{{ _field?.label || _filterField }}</span>\r\n\r\n  @if (showOperator() && _active) {\r\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[_filterOperator]\" [model]=\"_filterOperator\" [disabled]=\"true\" />\r\n  } @else if (_active) {\r\n    <span class=\"c-chip-sep\">:</span>\r\n  }\r\n\r\n  @if (_active) {\r\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\r\n  }\r\n\r\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n  @if (_active) {\r\n    <span\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      class=\"c-chip-remove\"\r\n      aria-label=\"Remove filter\"\r\n      (click)=\"$event.stopPropagation(); remove.emit()\"\r\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryPopoverChip, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-popover-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule, SdOperator], template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\n@let _active = active();\n@let _field = field();\n@let _filterField = filterField();\n@let _filterOperator = filterOperator();\n\n<div\n  #chipTrigger=\"matMenuTrigger\"\n  role=\"button\"\n  tabindex=\"0\"\n  class=\"c-chip\"\n  [class.c-chip-active]=\"_active\"\n  [class.c-chip-inactive]=\"!_active\"\n  [attr.data-field]=\"_filterField\"\n  [matTooltip]=\"_field?.label || _filterField\"\n  [matMenuTriggerFor]=\"menu()\"\n  (menuOpened)=\"open.emit()\"\n  (keydown.enter)=\"chipTrigger.openMenu()\"\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\n    {{ _field ? iconFor(_field) : 'tune' }}\n  </mat-icon>\n  <span class=\"c-chip-label\">{{ _field?.label || _filterField }}</span>\n\n  @if (showOperator() && _active) {\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[_filterOperator]\" [model]=\"_filterOperator\" [disabled]=\"true\" />\n  } @else if (_active) {\n    <span class=\"c-chip-sep\">:</span>\n  }\n\n  @if (_active) {\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\n  }\n\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\n\n  @if (_active) {\n    <span\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"c-chip-remove\"\n      aria-label=\"Remove filter\"\n      (click)=\"$event.stopPropagation(); remove.emit()\"\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n    </span>\n  }\n</div>\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"] }]
+            args: [{ selector: 'sd-query-popover-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule, SdOperator], template: "<!-- why: div[role=button] (not <button>) so the nested <sd-operator> isn't button-in-button (invalid HTML). -->\r\n@let _active = active();\r\n@let _field = field();\r\n@let _filterField = filterField();\r\n@let _filterOperator = filterOperator();\r\n\r\n<div\r\n  #chipTrigger=\"matMenuTrigger\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  class=\"c-chip\"\r\n  [class.c-chip-active]=\"_active\"\r\n  [class.c-chip-inactive]=\"!_active\"\r\n  [attr.data-field]=\"_filterField\"\r\n  [matTooltip]=\"_field?.label || _filterField\"\r\n  [matMenuTriggerFor]=\"menu()\"\r\n  (menuOpened)=\"open.emit()\"\r\n  (keydown.enter)=\"chipTrigger.openMenu()\"\r\n  (keydown.space)=\"$event.preventDefault(); chipTrigger.openMenu()\">\r\n  <mat-icon class=\"c-chip-icon\" fontSet=\"material-icons-outlined\">\r\n    {{ _field ? iconFor(_field) : 'tune' }}\r\n  </mat-icon>\r\n  <span class=\"c-chip-label\">{{ _field?.label || _filterField }}</span>\r\n\r\n  @if (showOperator() && _active) {\r\n    <sd-operator class=\"c-chip-operator\" [operators]=\"[_filterOperator]\" [model]=\"_filterOperator\" [disabled]=\"true\" />\r\n  } @else if (_active) {\r\n    <span class=\"c-chip-sep\">:</span>\r\n  }\r\n\r\n  @if (_active) {\r\n    <span class=\"c-chip-value\">{{ valueText() }}</span>\r\n  }\r\n\r\n  <mat-icon class=\"c-chip-chevron\" fontSet=\"material-icons-outlined\">arrow_drop_down</mat-icon>\r\n\r\n  @if (_active) {\r\n    <span\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      class=\"c-chip-remove\"\r\n      aria-label=\"Remove filter\"\r\n      (click)=\"$event.stopPropagation(); remove.emit()\"\r\n      (keydown.enter)=\"$event.stopPropagation(); remove.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.c-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #d6d8db;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#5f6368;transition:background-color .12s ease,border-color .12s ease,color .12s ease}:host-context(.c-density-compact) .c-chip{height:28px}:host-context(.c-density-comfortable) .c-chip{height:32px}.c-chip:hover{border-color:var(--sd-primary)}.c-chip.c-chip-active{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-chip.c-chip-active .c-chip-value{color:var(--sd-primary)}.c-chip.c-chip-inactive{padding-right:10px}.c-chip .c-chip-icon{font-size:16px;width:16px;height:16px}.c-chip .c-chip-label{font-weight:500;white-space:nowrap}.c-chip .c-chip-operator{display:inline-flex;align-items:center;color:inherit}.c-chip .c-chip-sep{color:#7a7a7a}.c-chip .c-chip-value{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-chip .c-chip-chevron{font-size:18px;width:18px;height:18px;color:currentColor}.c-chip .c-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#7a7a7a}.c-chip .c-chip-remove mat-icon{font-size:14px;width:14px;height:14px}.c-chip .c-chip-remove:hover{background:#0000000f}.c-chip-operator ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-chip-operator ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1385,7 +1385,7 @@ class SdQueryBar {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBar, isStandalone: true, selector: "sd-query-bar", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSavedFilters: { classPropertyName: "showSavedFilters", publicName: "showSavedFilters", isSignal: true, isRequired: false, transformFunction: null }, savedFiltersKey: { classPropertyName: "savedFiltersKey", publicName: "savedFiltersKey", isSignal: true, isRequired: false, transformFunction: null }, showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, showOperatorOnChip: { classPropertyName: "showOperatorOnChip", publicName: "showOperatorOnChip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", logic: "logicChange", search: "searchChange", queryChange: "queryChange", apply: "apply" }, viewQueries: [{ propertyName: "popoverChips", predicate: SdQueryPopoverChip, descendants: true, isSignal: true }, { propertyName: "buildChip", first: true, predicate: SdQueryBuildChip, descendants: true, isSignal: true }, { propertyName: "chipPopover", first: true, predicate: SdQueryChipPopover, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\n@let _resolvedFields = resolvedFields();\n@let _resolvedDensity = resolvedDensity();\n@let _showOrConnector = showOrConnector();\n@let _usedFieldKeys = usedFieldKeys();\n@let _editingIndex = editingIndex();\n@let _resolvedMode = resolvedMode();\n@let _resolvedShowOperatorOnChip = resolvedShowOperatorOnChip();\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_resolvedDensity === 'compact'\"\r\n  [class.c-density-comfortable]=\"_resolvedDensity === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (resolvedShowSearch()) {\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`.\r\n       why: m\u1EDF popover \u0111\u1EC3 EDIT ch\u1EC9 cho ch\u1EC9nh operator + value \u2014 KH\u00D4NG \u0111\u1ED5i field.\r\n       B\u1ECF [switchPickerMenu] \u2192 header render nh\u00E3n field t\u0129nh (read-only). Mu\u1ED1n \u0111\u1ED5i\r\n       field th\u00EC xo\u00E1 chip r\u1ED3i th\u00EAm l\u1EA1i. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"_editingIndex !== null ? $any(_filters[_editingIndex!]) : undefined\"\r\n    [chipIndex]=\"_editingIndex\"\r\n    [autoIdBase]=\"resolvedAutoId() ?? 'qb'\"\n    (commit)=\"onChipPopoverCommit($event)\" />\r\n\r\n  @if (_resolvedMode === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_resolvedDensity\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_resolvedDensity\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_resolvedDensity\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_resolvedFields\"\r\n    [usedKeys]=\"_usedFieldKeys\"\r\n    (pick)=\"_resolvedMode === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"resolvedShowLogicToggle()\"\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"resolvedShowSavedFilters()\"\n    [savedFiltersKey]=\"resolvedSavedFiltersKey()\"\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"resolvedShowClearAll()\"\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdQueryActionsBar, selector: "sd-query-actions-bar", inputs: ["showLogicToggle", "logic", "filtersCount", "showSavedFilters", "savedFiltersKey", "query", "showClearAll", "canSearch"], outputs: ["logicChange", "applyFilter", "clear", "search"] }, { kind: "component", type: SdQueryBuildChip, selector: "sd-query-build-chip", inputs: ["building", "density", "allowedOperators", "multiple", "showOperator", "autoId"], outputs: ["pickOperator", "commitValue", "cancel", "seamlessCommit", "draftChange", "draftCommit"] }, { kind: "component", type: SdQueryChipPopover, selector: "sd-query-chip-popover", inputs: ["field", "filter", "chipIndex", "autoIdBase", "switchPickerMenu"], outputs: ["commit", "swapField"] }, { kind: "component", type: SdQueryFieldPicker, selector: "sd-query-field-picker", inputs: ["fields", "currentKey", "usedKeys"], outputs: ["pick"] }, { kind: "component", type: SdQueryInlineChip, selector: "sd-query-inline-chip", inputs: ["field", "filter", "density", "multiple", "showOperator", "autoId", "valueText", "isNoData"], outputs: ["commit", "commitRange", "liveChange", "remove"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }, { kind: "component", type: SdQueryPopoverChip, selector: "sd-query-popover-chip", inputs: ["field", "filter", "active", "showOperator", "valueText", "menu"], outputs: ["open", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBar, isStandalone: true, selector: "sd-query-bar", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSavedFilters: { classPropertyName: "showSavedFilters", publicName: "showSavedFilters", isSignal: true, isRequired: false, transformFunction: null }, savedFiltersKey: { classPropertyName: "savedFiltersKey", publicName: "savedFiltersKey", isSignal: true, isRequired: false, transformFunction: null }, showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, showOperatorOnChip: { classPropertyName: "showOperatorOnChip", publicName: "showOperatorOnChip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", logic: "logicChange", search: "searchChange", queryChange: "queryChange", apply: "apply" }, viewQueries: [{ propertyName: "popoverChips", predicate: SdQueryPopoverChip, descendants: true, isSignal: true }, { propertyName: "buildChip", first: true, predicate: SdQueryBuildChip, descendants: true, isSignal: true }, { propertyName: "chipPopover", first: true, predicate: SdQueryChipPopover, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _resolvedFields = resolvedFields();\r\n@let _resolvedDensity = resolvedDensity();\r\n@let _showOrConnector = showOrConnector();\r\n@let _usedFieldKeys = usedFieldKeys();\r\n@let _editingIndex = editingIndex();\r\n@let _resolvedMode = resolvedMode();\r\n@let _resolvedShowOperatorOnChip = resolvedShowOperatorOnChip();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_resolvedDensity === 'compact'\"\r\n  [class.c-density-comfortable]=\"_resolvedDensity === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (resolvedShowSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`.\r\n       why: m\u1EDF popover \u0111\u1EC3 EDIT ch\u1EC9 cho ch\u1EC9nh operator + value \u2014 KH\u00D4NG \u0111\u1ED5i field.\r\n       B\u1ECF [switchPickerMenu] \u2192 header render nh\u00E3n field t\u0129nh (read-only). Mu\u1ED1n \u0111\u1ED5i\r\n       field th\u00EC xo\u00E1 chip r\u1ED3i th\u00EAm l\u1EA1i. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"_editingIndex !== null ? $any(_filters[_editingIndex!]) : undefined\"\r\n    [chipIndex]=\"_editingIndex\"\r\n    [autoIdBase]=\"resolvedAutoId() ?? 'qb'\"\r\n    (commit)=\"onChipPopoverCommit($event)\" />\r\n\r\n  @if (_resolvedMode === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_resolvedDensity\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_resolvedDensity\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_resolvedDensity\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_resolvedFields\"\r\n    [usedKeys]=\"_usedFieldKeys\"\r\n    (pick)=\"_resolvedMode === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"resolvedShowLogicToggle()\"\r\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"resolvedShowSavedFilters()\"\r\n    [savedFiltersKey]=\"resolvedSavedFiltersKey()\"\r\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"resolvedShowClearAll()\"\r\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdQueryActionsBar, selector: "sd-query-actions-bar", inputs: ["showLogicToggle", "logic", "filtersCount", "showSavedFilters", "savedFiltersKey", "query", "showClearAll", "canSearch"], outputs: ["logicChange", "applyFilter", "clear", "search"] }, { kind: "component", type: SdQueryBuildChip, selector: "sd-query-build-chip", inputs: ["building", "density", "allowedOperators", "multiple", "showOperator", "autoId"], outputs: ["pickOperator", "commitValue", "cancel", "seamlessCommit", "draftChange", "draftCommit"] }, { kind: "component", type: SdQueryChipPopover, selector: "sd-query-chip-popover", inputs: ["field", "filter", "chipIndex", "autoIdBase", "switchPickerMenu"], outputs: ["commit", "swapField"] }, { kind: "component", type: SdQueryFieldPicker, selector: "sd-query-field-picker", inputs: ["fields", "currentKey", "usedKeys"], outputs: ["pick"] }, { kind: "component", type: SdQueryInlineChip, selector: "sd-query-inline-chip", inputs: ["field", "filter", "density", "multiple", "showOperator", "autoId", "valueText", "isNoData"], outputs: ["commit", "commitRange", "liveChange", "remove"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }, { kind: "component", type: SdQueryPopoverChip, selector: "sd-query-popover-chip", inputs: ["field", "filter", "active", "showOperator", "valueText", "menu"], outputs: ["open", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBar, decorators: [{
             type: Component,
@@ -1402,7 +1402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdQueryInlineChip,
                         SdQueryInlineValueChip,
                         SdQueryPopoverChip,
-                    ], template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\n@let _resolvedFields = resolvedFields();\n@let _resolvedDensity = resolvedDensity();\n@let _showOrConnector = showOrConnector();\n@let _usedFieldKeys = usedFieldKeys();\n@let _editingIndex = editingIndex();\n@let _resolvedMode = resolvedMode();\n@let _resolvedShowOperatorOnChip = resolvedShowOperatorOnChip();\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_resolvedDensity === 'compact'\"\r\n  [class.c-density-comfortable]=\"_resolvedDensity === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (resolvedShowSearch()) {\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`.\r\n       why: m\u1EDF popover \u0111\u1EC3 EDIT ch\u1EC9 cho ch\u1EC9nh operator + value \u2014 KH\u00D4NG \u0111\u1ED5i field.\r\n       B\u1ECF [switchPickerMenu] \u2192 header render nh\u00E3n field t\u0129nh (read-only). Mu\u1ED1n \u0111\u1ED5i\r\n       field th\u00EC xo\u00E1 chip r\u1ED3i th\u00EAm l\u1EA1i. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"_editingIndex !== null ? $any(_filters[_editingIndex!]) : undefined\"\r\n    [chipIndex]=\"_editingIndex\"\r\n    [autoIdBase]=\"resolvedAutoId() ?? 'qb'\"\n    (commit)=\"onChipPopoverCommit($event)\" />\r\n\r\n  @if (_resolvedMode === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_resolvedDensity\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_resolvedDensity\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_resolvedDensity\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_resolvedFields\"\r\n    [usedKeys]=\"_usedFieldKeys\"\r\n    (pick)=\"_resolvedMode === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"resolvedShowLogicToggle()\"\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"resolvedShowSavedFilters()\"\n    [savedFiltersKey]=\"resolvedSavedFiltersKey()\"\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"resolvedShowClearAll()\"\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"] }]
+                    ], template: "<!--\r\n  sd-query-bar \u2014 unified filter chip row (Jira/Linear/Notion style).\r\n  Visual spec: refs/design_handoff_sd_query_bar/README.md\r\n  TODO(next-iter): replace inline placeholders for field-picker + chip-popover\r\n  with extracted sub-components driven by CDK overlay.\r\n-->\r\n@let _filters = filters();\r\n@let _resolvedFields = resolvedFields();\r\n@let _resolvedDensity = resolvedDensity();\r\n@let _showOrConnector = showOrConnector();\r\n@let _usedFieldKeys = usedFieldKeys();\r\n@let _editingIndex = editingIndex();\r\n@let _resolvedMode = resolvedMode();\r\n@let _resolvedShowOperatorOnChip = resolvedShowOperatorOnChip();\r\n\r\n<div\r\n  class=\"c-query-bar\"\r\n  [class.c-density-compact]=\"_resolvedDensity === 'compact'\"\r\n  [class.c-density-comfortable]=\"_resolvedDensity === 'comfortable'\">\r\n\r\n  <!-- Main region \u2014 search + filters + add-filter. Wraps internally; the right\r\n       action toolbar stays anchored and does NOT flow with this. -->\r\n  <div class=\"c-query-bar__main\">\r\n\r\n  <!-- Free-text search (left, optional) -->\r\n  @if (resolvedShowSearch()) {\r\n    <div class=\"c-search\">\r\n      <mat-icon class=\"c-search-icon\" fontSet=\"material-icons-outlined\">search</mat-icon>\r\n      <input\r\n        class=\"c-search-input\"\r\n        type=\"text\"\r\n        [ngModel]=\"search()\"\r\n        (ngModelChange)=\"setSearch($event)\"\r\n        (keydown.enter)=\"triggerApply()\"\r\n        placeholder=\"T\u00ECm ki\u1EBFm...\" />\r\n    </div>\r\n    <span class=\"c-divider\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  <!-- Chip popover \u2014 extracted into <sd-query-chip-popover>. Declared BEFORE chips\r\n       so the popover-mode @for chips can bind their [menu] to `chipPopover.menu()`.\r\n       why: m\u1EDF popover \u0111\u1EC3 EDIT ch\u1EC9 cho ch\u1EC9nh operator + value \u2014 KH\u00D4NG \u0111\u1ED5i field.\r\n       B\u1ECF [switchPickerMenu] \u2192 header render nh\u00E3n field t\u0129nh (read-only). Mu\u1ED1n \u0111\u1ED5i\r\n       field th\u00EC xo\u00E1 chip r\u1ED3i th\u00EAm l\u1EA1i. -->\r\n  <sd-query-chip-popover\r\n    #chipPopover\r\n    [field]=\"editingField() ?? undefined\"\r\n    [filter]=\"_editingIndex !== null ? $any(_filters[_editingIndex!]) : undefined\"\r\n    [chipIndex]=\"_editingIndex\"\r\n    [autoIdBase]=\"resolvedAutoId() ?? 'qb'\"\r\n    (commit)=\"onChipPopoverCommit($event)\" />\r\n\r\n  @if (_resolvedMode === 'inline') {\r\n    <!-- ===== INLINE MODE (GitLab-style token builder) ===== -->\r\n\r\n    <!-- Completed chips -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @if (_field) {\r\n        @let _op = $any(filter.operator);\r\n        @let _data = $any(filter).data;\r\n        @if (_field.type === 'string' || _field.type === 'number') {\r\n          <!-- Seamless chip \u2014 the pill is the input (string / number). -->\r\n          <sd-query-inline-value-chip\r\n            [field]=\"_field\"\r\n            [operator]=\"_op\"\r\n            [value]=\"_data\"\r\n            [density]=\"_resolvedDensity\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            (valueChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        } @else {\r\n          <sd-query-inline-chip\r\n            [field]=\"_field\"\r\n            [filter]=\"filter\"\r\n            [density]=\"_resolvedDensity\"\r\n            [multiple]=\"multiple(_op)\"\r\n            [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n            [autoId]=\"inlineAutoId(i, 'value')\"\r\n            [valueText]=\"chipValueText(filter)\"\r\n            [isNoData]=\"isNoDataOperator(_op)\"\r\n            (commit)=\"updateFilter(i, { data: $event })\"\r\n            (commitRange)=\"setFilterRange(i, $event)\"\r\n            (liveChange)=\"updateFilter(i, { data: $event })\"\r\n            (remove)=\"removeFilter(i)\" />\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Building chip (in-progress) \u2014 extracted into <sd-query-build-chip>. -->\r\n    @if (building(); as _b) {\r\n      <sd-query-build-chip\r\n        [building]=\"_b\"\r\n        [density]=\"_resolvedDensity\"\r\n        [allowedOperators]=\"allowedOperatorsFor(_b.field)\"\r\n        [multiple]=\"multiple($any(_b.operator))\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        (pickOperator)=\"pickBuildOperator($any($event))\"\r\n        (commitValue)=\"commitBuildValue($event)\"\r\n        (cancel)=\"cancelBuild()\"\r\n        (seamlessCommit)=\"onBuildSeamlessCommit($event)\" />\r\n    }\r\n\r\n    <!-- Add filter -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  } @else {\r\n    <!-- ===== POPOVER MODE (default) \u2014 compact chips edited via mat-menu ===== -->\r\n    @for (filter of _filters; track $index; let i = $index) {\r\n      @if (_showOrConnector && i > 0) {\r\n        <span class=\"c-or-connector\" aria-hidden=\"true\">OR</span>\r\n      }\r\n      @let _field = fieldByKey()[$any(filter).field];\r\n      @let _active = isFilterActive(filter);\r\n      <!-- why: menu close commit is handled by chipPopover's (commit) \u2192\r\n           onChipPopoverCommit; popover-chip only signals open + remove here. -->\r\n      <sd-query-popover-chip\r\n        [field]=\"_field\"\r\n        [filter]=\"filter\"\r\n        [active]=\"_active\"\r\n        [showOperator]=\"_resolvedShowOperatorOnChip\"\r\n        [valueText]=\"chipValueText(filter)\"\r\n        [menu]=\"chipPopover.menu()!\"\r\n        (open)=\"openChipPopover(i)\"\r\n        (remove)=\"removeFilter(i)\" />\r\n    }\r\n\r\n    <!-- Add filter trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-add-filter\"\r\n      [matMenuTriggerFor]=\"addPicker.menu()\"\r\n      [disabled]=\"_resolvedFields.length === 0 || _usedFieldKeys.size >= _resolvedFields.length\"\r\n      [matTooltip]=\"_resolvedFields.length === 0 ? 'Ch\u01B0a c\u1EA5u h\u00ECnh fields' : 'Th\u00EAm filter'\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  </div><!-- /.c-query-bar__main -->\r\n\r\n  <!-- Field picker \u2014 list available fields, fade ones already in use. -->\r\n  <sd-query-field-picker\r\n    #addPicker\r\n    [fields]=\"_resolvedFields\"\r\n    [usedKeys]=\"_usedFieldKeys\"\r\n    (pick)=\"_resolvedMode === 'inline' ? beginBuild($event) : addFilter($event)\" />\r\n\r\n  <sd-query-actions-bar\r\n    [showLogicToggle]=\"resolvedShowLogicToggle()\"\r\n    [(logic)]=\"logic\"\r\n    [filtersCount]=\"_filters.length\"\r\n    [showSavedFilters]=\"resolvedShowSavedFilters()\"\r\n    [savedFiltersKey]=\"resolvedSavedFiltersKey()\"\r\n    [query]=\"currentQuery()\"\r\n    (applyFilter)=\"onApplyFilter($event)\"\r\n    [showClearAll]=\"resolvedShowClearAll()\"\r\n    [canSearch]=\"canSearch()\"\r\n    (clear)=\"clearAll()\"\r\n    (search)=\"triggerApply()\" />\r\n</div>\r\n", styles: [":host{display:block;font-family:Roboto,system-ui,sans-serif}.c-query-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:8px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 1px 2px #0f172a0a}.c-query-bar.c-density-compact{padding:8px}.c-query-bar.c-density-comfortable{padding:10px}.c-query-bar__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.c-search{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff}.c-density-compact .c-search{height:28px}.c-density-comfortable .c-search{height:32px}.c-search .c-search-icon{font-size:16px;width:16px;height:16px;color:#7a7a7a}.c-search .c-search-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:#212121}.c-search .c-search-input::placeholder{color:#7a7a7a}.c-search .c-search-kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 4px;border:1px solid #e2e4e7;border-radius:3px;color:#7a7a7a}.c-divider{width:1px;height:16px;background:#e2e4e7;margin:0 2px}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}.c-density-compact .c-token{height:28px}.c-density-comfortable .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-sep{color:#7a7a7a}.c-token-dash{color:#7a7a7a;padding:0 4px;line-height:1}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}.c-density-compact .c-token-remove{width:26px}.c-density-comfortable .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}.c-add-filter{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:1px dashed #d6d8db;background:transparent;cursor:pointer;color:#5f6368;transition:border-color .12s ease,color .12s ease,background-color .12s ease}.c-density-compact .c-add-filter{width:28px;height:28px}.c-density-comfortable .c-add-filter{width:32px;height:32px}.c-add-filter mat-icon{font-size:18px;width:18px;height:18px}.c-add-filter:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-add-filter[disabled]{opacity:.5;cursor:not-allowed}.c-or-connector{font-family:Roboto Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.6px;color:#7a7a7a;padding:0 2px}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input{width:100%;height:32px;padding:0 10px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font-family:inherit;font-size:13px;color:#212121;outline:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-input:focus{border-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button.c-pop-boolean-active{background:var(--sd-primary-light);border-color:var(--sd-primary);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values{max-height:220px;overflow-y:auto;margin:0;padding:0;list-style:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li:hover{background:#f5f6f7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li.c-pop-value-selected{background:var(--sd-primary-light);color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=checkbox],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values li input[type=radio]{accent-color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-empty{padding:10px 8px;font-size:12px;color:#7a7a7a}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-toggle ::ng-deep .mdc-button,.c-bool-toggle ::ng-deep button[mat-button],.c-bool-toggle ::ng-deep button[mat-stroked-button],.c-bool-toggle ::ng-deep button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n", ".c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow,.c-query-bar ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}.c-query-bar ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#d6d8db!important;transition:border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__leading{border-radius:6px 0 0 6px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mdc-notched-outline__trailing{border-radius:0 6px 6px 0!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field:hover:not(.mat-focused):not(.mat-form-field-disabled) .mdc-notched-outline__trailing{border-color:#b9bdc3!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--sd-primary)!important;border-width:1px!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon{color:#5f6368}::ng-deep .mat-mdc-menu-panel.c-chip-popover .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow,::ng-deep .mat-mdc-menu-panel.c-field-picker-menu .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--sd-primary)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**