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

package/components/query-bar/src/inline-chip.component.d.ts

@@ -67,7 +67,12 @@ export declare class SdQueryInlineChip {
     onFocusOutForTest(ev: FocusEvent): void;
     /** Single-value commit (sd-date, sd-datetime, single sd-select). */
     emitSingleCommit(v: unknown): void;
-    /** BETWEEN commit — sd-date-range emits {from, to}. */
+    /**
+     * BETWEEN commit — sd-date-range emits {from, to}.
+     * why: nếu cả from + to đều có giá trị → coi như range đã chọn xong → exit edit
+     * ngay tại commit (đồng bộ với model.set của parent), không chờ focusout. Tránh
+     * race "focusout firing trước sdChange" làm viewed text render với model cũ.
+     */
     emitRangeCommit(ev: {
         from: unknown;
         to: unknown;

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

@@ -10,7 +10,6 @@ import { MatMenuModule, MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { I18nService } from '@sd-angular/core/i18n';
-import { SdButton } from '@sd-angular/core/components/button';
 import { SdOperator } from '@sd-angular/core/components/operator';
 import { SdDate } from '@sd-angular/core/forms/date';
 import { SdDateRange } from '@sd-angular/core/forms/date-range';
@@ -19,6 +18,7 @@ import { SdInput } from '@sd-angular/core/forms/input';
 import { SdInputNumber } from '@sd-angular/core/forms/input-number';
 import { SdSelect } from '@sd-angular/core/forms/select';
 import { isObservable } from 'rxjs';
+import { SdButton } from '@sd-angular/core/components/button';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -487,14 +487,13 @@ 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: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: boolean c\u0169ng d\u00F9ng nguy\u00EAn giao di\u1EC7n 2 n\u00FAt toggle \u1EDF build chip (gi\u1ED1ng popover);\r\n             click commit tr\u1EF1c ti\u1EBFp gi\u00E1 tr\u1ECB, kh\u00F4ng qua draft. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-true'\"\r\n            [type]=\"_b.value === true ? 'fill' : 'outline'\"\r\n            color=\"success\"\r\n            [title]=\"$any(_b.field).trueLabel || 'C\u00F3'\"\r\n            (click)=\"commitValue.emit(true)\"></sd-button>\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-false'\"\r\n            [type]=\"_b.value === false ? 'fill' : 'outline'\"\r\n            color=\"warning\"\r\n            [title]=\"$any(_b.field).falseLabel || 'Kh\u00F4ng'\"\r\n            (click)=\"commitValue.emit(false)\"></sd-button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_b.value === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_b.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_b.value === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_b.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, decorators: [{
             type: Component,
             args: [{ selector: 'sd-query-build-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         MatIconModule,
-                        SdButton,
                         SdOperator,
                         SdDate,
                         SdDateRange,
@@ -503,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdInputNumber,
                         SdSelect,
                         SdQueryInlineValueChip,
-                    ], template: "<!--\r\n  In-progress chip (inline-mode token build flow).\r\n  Seamless string/number branch keeps its own pill; everything else renders inside\r\n  the dashed .c-token.c-token-building shell.\r\n-->\r\n@let _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: boolean c\u0169ng d\u00F9ng nguy\u00EAn giao di\u1EC7n 2 n\u00FAt toggle \u1EDF build chip (gi\u1ED1ng popover);\r\n             click commit tr\u1EF1c ti\u1EBFp gi\u00E1 tr\u1ECB, kh\u00F4ng qua draft. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-true'\"\r\n            [type]=\"_b.value === true ? 'fill' : 'outline'\"\r\n            color=\"success\"\r\n            [title]=\"$any(_b.field).trueLabel || 'C\u00F3'\"\r\n            (click)=\"commitValue.emit(true)\"></sd-button>\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-false'\"\r\n            [type]=\"_b.value === false ? 'fill' : 'outline'\"\r\n            color=\"warning\"\r\n            [title]=\"$any(_b.field).falseLabel || 'Kh\u00F4ng'\"\r\n            (click)=\"commitValue.emit(false)\"></sd-button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-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 _b = building();\r\n\r\n@if (isSeamless()) {\r\n  <sd-query-inline-value-chip\r\n    [field]=\"_b.field\"\r\n    [operator]=\"$any(_b.operator)\"\r\n    [value]=\"_b.value ?? null\"\r\n    [density]=\"density()\"\r\n    [showOperator]=\"showOperator()\"\r\n    [autoId]=\"autoId()\"\r\n    [autofocus]=\"true\"\r\n    (valueChange)=\"seamlessCommit.emit($event)\"\r\n    (remove)=\"cancel.emit()\" />\r\n} @else {\r\n  <div class=\"c-token c-token-building\">\r\n    <span class=\"c-token-field\">{{ _b.field.label }}</span>\r\n\r\n    @if (_b.step === 'operator') {\r\n      <sd-operator\r\n        #buildOperator\r\n        class=\"c-token-op\"\r\n        [operators]=\"allowedOperators()\"\r\n        [model]=\"_b.operator\"\r\n        (modelChange)=\"pickOperator.emit($any($event))\" />\r\n    } @else {\r\n      <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\r\n           \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\r\n      <sd-operator\r\n        class=\"c-token-op\"\r\n        [operators]=\"[$any(_b.operator)]\"\r\n        [model]=\"$any(_b.operator)\"\r\n        [disabled]=\"true\" />\r\n\r\n      @if (_b.field.type === 'values' || _b.field.type === 'lazy-values') {\r\n        @let _bopt = $any(_b.field).option;\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-select #bPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n            [autoId]=\"autoId()\"\r\n            [items]=\"_b.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\r\n            [valueField]=\"_bopt.valueField\"\r\n            [displayField]=\"_bopt.displayField\"\r\n            [multiple]=\"multiple()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"commitValue.emit($event)\">\r\n            <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\r\n            <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n              @if ((selectedItems?.length ?? 0) > 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n              } @else if ((selectedItems?.length ?? 0) === 1) {\r\n                <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\r\n              }\r\n            </ng-template>\r\n          </sd-select>\r\n        </span>\r\n      } @else if (_b.field.type === 'date') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-date #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'datetime') {\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          @if (_b.operator === 'BETWEEN') {\r\n            <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\r\n            <sd-date-range #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\r\n          } @else {\r\n            <sd-datetime #bPicker bare size=\"sm\"\r\n              [autoId]=\"autoId()\"\r\n              [model]=\"$any(_b.value)\"\r\n              (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\r\n          }\r\n        </span>\r\n      } @else if (_b.field.type === 'boolean') {\r\n        <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\r\n             Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\r\n             .c-bool-true / .c-bool-false. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_b.value === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"commitValue.emit(true)\">\r\n            {{ $any(_b.field).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_b.value === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"commitValue.emit(false)\">\r\n            {{ $any(_b.field).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\r\n        <span class=\"c-token-value c-token-value-edit\">\r\n          <sd-input size=\"sm\"\r\n            [autoId]=\"autoId()\"\r\n            [model]=\"$any(_b.value)\"\r\n            (sdChange)=\"draftChange.emit($event)\"\r\n            (keyupEnter)=\"draftCommit.emit()\"></sd-input>\r\n        </span>\r\n      }\r\n    }\r\n\r\n    <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -892,6 +891,11 @@ class SdQueryInlineChip {
         if (this.#editing()) {
             this.#editing.set(false);
             this.#cdr.markForCheck();
+            // why: sd-date-range / sd-datetime đôi khi emit sdChange NGAY SAU focusout —
+            // viewed flip xảy ra trước khi model mới về tới [model] input → viewed text
+            // format dùng giá trị cũ. Schedule thêm 1 CD pass để re-render với model mới
+            // (user-visible bug: "click ra lần đầu chưa update, click vào rồi ra lần 2 mới đúng").
+            queueMicrotask(() => this.#cdr.markForCheck());
         }
     }
     /** Test-only shim — direct call avoids dispatching real FocusEvent in JSDOM. */
@@ -906,9 +910,18 @@ class SdQueryInlineChip {
         this.commit.emit(v);
         this.#editing.set(false);
     }
-    /** BETWEEN commit — sd-date-range emits {from, to}. */
+    /**
+     * BETWEEN commit — sd-date-range emits {from, to}.
+     * why: nếu cả from + to đều có giá trị → coi như range đã chọn xong → exit edit
+     * ngay tại commit (đồng bộ với model.set của parent), không chờ focusout. Tránh
+     * race "focusout firing trước sdChange" làm viewed text render với model cũ.
+     */
     emitRangeCommit(ev) {
         this.commitRange.emit(ev ?? null);
+        if (ev && ev.from != null && ev.to != null) {
+            this.#editing.set(false);
+            this.#cdr.markForCheck();
+        }
     }
     /** Multi-select live emit — does NOT exit edit (focusout handles exit). */
     emitLive(v) {
@@ -920,20 +933,19 @@ 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" }, viewQueries: [{ propertyName: "chipPicker", first: true, predicate: ["chipPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: boolean edit d\u00F9ng 2 n\u00FAt toggle (gi\u1ED1ng popover). Click commit\r\n             tr\u1EF1c ti\u1EBFp gi\u00E1 tr\u1ECB (true/false) qua emitBoolean \u2192 exit edit. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-true'\"\r\n            [type]=\"_data === true ? 'fill' : 'outline'\"\r\n            color=\"success\"\r\n            [title]=\"$any(_f).trueLabel || 'C\u00F3'\"\r\n            (click)=\"emitBoolean(true)\"></sd-button>\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-false'\"\r\n            [type]=\"_data === false ? 'fill' : 'outline'\"\r\n            color=\"warning\"\r\n            [title]=\"$any(_f).falseLabel || 'Kh\u00F4ng'\"\r\n            (click)=\"emitBoolean(false)\"></sd-button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_data\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_data\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_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-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}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryInlineChip, isStandalone: true, selector: "sd-query-inline-chip", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, isNoData: { classPropertyName: "isNoData", publicName: "isNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", commitRange: "commitRange", liveChange: "liveChange", remove: "remove" }, viewQueries: [{ propertyName: "chipPicker", first: true, predicate: ["chipPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_f).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_f).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryInlineChip, decorators: [{
             type: Component,
             args: [{ selector: 'sd-query-inline-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         MatIconModule,
-                        SdButton,
                         SdOperator,
                         SdDate,
                         SdDateRange,
                         SdDatetime,
                         SdSelect,
-                    ], template: "<!--\r\n  Completed inline chip \u2014 non-string/number/seamless branches.\r\n  Edit lifecycle is self-managed: click enters edit + auto-opens picker,\r\n  focusout outside the wrapper exits edit, picker emits commit single OR\r\n  liveChange (multi) OR commitRange (BETWEEN).\r\n-->\r\n@let _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: boolean edit d\u00F9ng 2 n\u00FAt toggle (gi\u1ED1ng popover). Click commit\r\n             tr\u1EF1c ti\u1EBFp gi\u00E1 tr\u1ECB (true/false) qua emitBoolean \u2192 exit edit. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-true'\"\r\n            [type]=\"_data === true ? 'fill' : 'outline'\"\r\n            color=\"success\"\r\n            [title]=\"$any(_f).trueLabel || 'C\u00F3'\"\r\n            (click)=\"emitBoolean(true)\"></sd-button>\r\n          <sd-button\r\n            [autoId]=\"autoId() + '-false'\"\r\n            [type]=\"_data === false ? 'fill' : 'outline'\"\r\n            color=\"warning\"\r\n            [title]=\"$any(_f).falseLabel || 'Kh\u00F4ng'\"\r\n            (click)=\"emitBoolean(false)\"></sd-button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_data\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_data\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"_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-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}.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 _f = field();\r\n@let _op = operator();\r\n@let _data = data();\r\n@let _multi = multiple();\r\n@let _editing = editing();\r\n@let _isNoData = isNoData();\r\n\r\n<div class=\"c-token\" [class.c-token-editing]=\"_editing\">\r\n  <mat-icon class=\"c-token-icon\" fontSet=\"material-icons-outlined\">{{ iconName() }}</mat-icon>\r\n  <span class=\"c-token-field\">{{ _f.label }}</span>\r\n\r\n  @if (!_isNoData && showOperator()) {\r\n    <sd-operator class=\"c-token-op\" [operators]=\"[_op]\" [model]=\"_op\" [disabled]=\"true\" />\r\n  } @else if (!_isNoData) {\r\n    <span class=\"c-token-sep\">:</span>\r\n  }\r\n\r\n  @if (!_isNoData) {\r\n    @if (_f.type === 'boolean') {\r\n      @if (_editing) {\r\n        <!-- why: native button thay sd-button \u2014 mat-button MDC baseline 36px bu\u1ED9c\r\n             ph\u1EA3i hack height/padding overrides; chip 28/32px nh\u1ECF h\u01A1n nhi\u1EC1u. T\u1EF1 v\u1EBD\r\n             pill nh\u1ECF v\u1EDBi CSS scoped trong chip, kh\u00F4ng qua MDC, g\u1ECDn + chu\u1EA9n baseline. -->\r\n        <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-true\"\r\n            [class.c-bool-active]=\"_data === true\"\r\n            [attr.data-autoId]=\"autoId() + '-true'\"\r\n            (click)=\"emitBoolean(true)\">\r\n            {{ $any(_f).trueLabel || 'C\u00F3' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-bool-btn c-bool-false\"\r\n            [class.c-bool-active]=\"_data === false\"\r\n            [attr.data-autoId]=\"autoId() + '-false'\"\r\n            (click)=\"emitBoolean(false)\">\r\n            {{ $any(_f).falseLabel || 'Kh\u00F4ng' }}\r\n          </button>\r\n        </span>\r\n      } @else {\r\n        <button type=\"button\" class=\"c-token-value\" (click)=\"enterEdit()\">{{ valueText() }}</button>\r\n      }\r\n    } @else if ((_f.type === 'date' || _f.type === 'datetime') && _op === 'BETWEEN') {\r\n      <!-- why: d\u00F9ng sd-date-range th\u1ED1ng nh\u1EA5t cho c\u1EA3 date + datetime BETWEEN (datetime downgrade v\u1EC1 date). -->\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date-range #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitRangeCommit($any($event))\"></sd-date-range>\r\n      </span>\r\n    } @else if (_f.type === 'values' || _f.type === 'lazy-values') {\r\n      @let _opt = $any(_f).option;\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-select #chipPicker bare size=\"sm\" minWidthPanel=\"300px\"\r\n          [autoId]=\"autoId()\"\r\n          [items]=\"_f.type === 'lazy-values' ? $any(_opt).search : $any(_opt.items)\"\r\n          [valueField]=\"_opt.valueField\"\r\n          [displayField]=\"_opt.displayField\"\r\n          [multiple]=\"_multi\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"_multi ? emitLive($event) : emitSingleCommit($event)\">\r\n          <!-- why: viewed mode m\u1EB7c \u0111\u1ECBnh d\u00F9ng comma-joined cho multi \u2014 qu\u00E1 d\u00E0i cho chip.\r\n               Override b\u1EB1ng template \"head +N\" gi\u1ED1ng popover chipValueText. -->\r\n          <ng-template #sdValue let-selectedItems=\"selectedItems\">\r\n            @if ((selectedItems?.length ?? 0) > 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span> +{{ selectedItems.length - 1 }}\r\n            } @else if ((selectedItems?.length ?? 0) === 1) {\r\n              <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_opt.displayField] }}</span>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      </span>\r\n    } @else if (_f.type === 'date') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-date #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-date>\r\n      </span>\r\n    } @else if (_f.type === 'datetime') {\r\n      <span\r\n        class=\"c-token-value c-token-value-edit\"\r\n        (click)=\"enterEdit()\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        <sd-datetime #chipPicker bare size=\"sm\"\r\n          [autoId]=\"autoId()\"\r\n          [viewed]=\"!_editing\"\r\n          [model]=\"$any(_data)\"\r\n          (sdChange)=\"emitSingleCommit($any($event))\"></sd-datetime>\r\n      </span>\r\n    } @else {\r\n      <!-- Fallback (unforeseen type) \u2014 read-only display via valueText. -->\r\n      <span class=\"c-token-value\">{{ valueText() }}</span>\r\n    }\r\n  }\r\n\r\n  <button type=\"button\" class=\"c-token-remove\" aria-label=\"Remove filter\" (click)=\"remove.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:inherit}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-sep{color:#7a7a7a}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary);cursor:pointer}.c-token-value:hover{text-decoration:underline}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */