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

package/fesm2022/sd-angular-core-components-operator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-operator.mjs","sources":["../../../projects/sd-angular/components/operator/src/operator.component.ts","../../../projects/sd-angular/components/operator/src/operator.component.html","../../../projects/sd-angular/components/operator/sd-angular-core-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\r\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { OPERATORS } from '@sdcorejs/utils/constants';\r\nimport { Operator } from '@sdcorejs/utils/models';\r\nimport { I18nService } from '@sd-angular/core/i18n';\r\n\r\ninterface OperatorItem {\r\n  value: Operator;\r\n  icon: SafeHtml;\r\n  display: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'sd-operator',\r\n  templateUrl: './operator.component.html',\r\n  styleUrls: ['./operator.component.scss'],\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [MatMenuModule, MatTooltipModule],\r\n})\r\nexport class SdOperator {\r\n  // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\r\n  static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\r\n\r\n  readonly #i18n = inject(I18nService);\r\n  readonly #sanitizer = inject(DomSanitizer);\r\n\r\n  /** Operator hiện tại — binding hai chiều [(model)]. */\r\n  model = model<Operator | undefined>();\r\n\r\n  /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */\r\n  operators = input<Operator[]>([]);\r\n\r\n  /** Vô hiệu hóa trigger (không mở được menu). */\r\n  disabled = input(false, { transform: booleanAttribute });\r\n\r\n  /** data-autoId cho e2e selector. */\r\n  autoId = input<string>();\r\n\r\n  /** Allowed operators map sang { value, icon, display } theo thứ tự input. */\r\n  readonly items = computed<OperatorItem[]>(() => {\r\n    const out: OperatorItem[] = [];\r\n    for (const value of this.operators()) {\r\n      const r = this.#resolve(value);\r\n      if (!r) continue;\r\n      out.push({ value, icon: this.#svg(r.icon), display: r.display });\r\n    }\r\n    return out;\r\n  });\r\n\r\n  /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */\r\n  readonly currentIcon = computed<SafeHtml>(() => {\r\n    return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\r\n  });\r\n\r\n  /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */\r\n  readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\r\n\r\n  // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\r\n  #resolve(value: Operator | undefined): { icon: string; display: string } | undefined {\r\n    if (value == null) return undefined;\r\n    const entry = OPERATORS.find((o) => o.value === value);\r\n    return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\r\n  }\r\n\r\n  // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\r\n  // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\r\n  #svg(inner: string): SafeHtml {\r\n    return this.#sanitizer.bypassSecurityTrustHtml(\r\n      `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\r\n    );\r\n  }\r\n\r\n  private readonly trigger = viewChild(MatMenuTrigger);\r\n\r\n  /** Open the operator menu programmatically (used by the query-bar build flow). */\r\n  open(): void {\r\n    this.trigger()?.openMenu();\r\n  }\r\n\r\n  /** Chọn operator từ menu. */\r\n  select(value: Operator): void {\r\n    this.model.set(value);\r\n  }\r\n}\r\n","@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAsBa,UAAU,CAAA;;AAErB,IAAA,OAAgB,aAAa,GAAG,4CAA4C;AAEnE,IAAA,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC;;IAG1C,KAAK,GAAG,KAAK,EAAwB;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAa,EAAE,CAAC;;IAGjC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;IAGxD,MAAM,GAAG,KAAK,EAAU;;AAGf,IAAA,KAAK,GAAG,QAAQ,CAAiB,MAAK;QAC7C,MAAM,GAAG,GAAmB,EAAE;QAC9B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,CAAC;gBAAE;YACR,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAClE;AACA,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,CAAC;;AAGO,IAAA,WAAW,GAAG,QAAQ,CAAW,MAAK;QAC7C,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,UAAU,CAAC,aAAa,CAAC;AACjF,IAAA,CAAC,CAAC;;IAGO,YAAY,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,IAAI,EAAE,CAAC;;AAG1F,IAAA,QAAQ,CAAC,KAA2B,EAAA;QAClC,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,SAAS;AACnC,QAAA,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;AACtD,QAAA,OAAO,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,SAAS;IACvF;;;AAIA,IAAA,IAAI,CAAC,KAAa,EAAA;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAC5C,CAAA,kJAAA,EAAqJ,KAAK,CAAA,MAAA,CAAQ,CACnK;IACH;AAEiB,IAAA,OAAO,GAAG,SAAS,CAAC,cAAc,CAAC;;IAGpD,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE;IAC5B;;AAGA,IAAA,MAAM,CAAC,KAAe,EAAA;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;wGA/DW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,upBAqDgB,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3ErD,g3BA2BA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,aAAa,6vBAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE9B,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,aAAa,EAAA,UAAA,EAGX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,g3BAAA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA;;;AEpB5C;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-components-operator.mjs","sources":["../../../projects/sd-angular/components/operator/src/operator.component.ts","../../../projects/sd-angular/components/operator/src/operator.component.html","../../../projects/sd-angular/components/operator/sd-angular-core-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\r\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { OPERATORS } from '@sdcorejs/utils/constants';\r\nimport { Operator } from '@sdcorejs/utils/models';\r\nimport { I18nService } from '@sd-angular/core/i18n';\r\n\r\ninterface OperatorItem {\r\n  value: Operator;\r\n  icon: SafeHtml;\r\n  display: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'sd-operator',\r\n  templateUrl: './operator.component.html',\r\n  styleUrls: ['./operator.component.scss'],\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [MatMenuModule, MatTooltipModule],\r\n})\r\nexport class SdOperator {\r\n  // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\r\n  static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\r\n\r\n  readonly #i18n = inject(I18nService);\r\n  readonly #sanitizer = inject(DomSanitizer);\r\n\r\n  /** Operator hiện tại — binding hai chiều [(model)]. */\r\n  model = model<Operator | undefined>();\r\n\r\n  /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */\r\n  operators = input<Operator[]>([]);\r\n\r\n  /** Vô hiệu hóa trigger (không mở được menu). */\r\n  disabled = input(false, { transform: booleanAttribute });\r\n\r\n  /** data-autoId cho e2e selector. */\r\n  autoId = input<string>();\r\n\r\n  /** Allowed operators map sang { value, icon, display } theo thứ tự input. */\r\n  readonly items = computed<OperatorItem[]>(() => {\r\n    const out: OperatorItem[] = [];\r\n    for (const value of this.operators()) {\r\n      const r = this.#resolve(value);\r\n      if (!r) continue;\r\n      out.push({ value, icon: this.#svg(r.icon), display: r.display });\r\n    }\r\n    return out;\r\n  });\r\n\r\n  /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */\r\n  readonly currentIcon = computed<SafeHtml>(() => {\r\n    return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\r\n  });\r\n\r\n  /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */\r\n  readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\r\n\r\n  // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\r\n  #resolve(value: Operator | undefined): { icon: string; display: string } | undefined {\r\n    if (value == null) return undefined;\r\n    const entry = OPERATORS.find((o) => o.value === value);\r\n    return entry ? { icon: entry.icon, display: entry.display } : undefined;\r\n  }\r\n\r\n  // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\r\n  // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\r\n  #svg(inner: string): SafeHtml {\r\n    return this.#sanitizer.bypassSecurityTrustHtml(\r\n      `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\r\n    );\r\n  }\r\n\r\n  private readonly trigger = viewChild(MatMenuTrigger);\r\n\r\n  /** Open the operator menu programmatically (used by the query-bar build flow). */\r\n  open(): void {\r\n    this.trigger()?.openMenu();\r\n  }\r\n\r\n  /** Chọn operator từ menu. */\r\n  select(value: Operator): void {\r\n    this.model.set(value);\r\n  }\r\n}\r\n","@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAsBa,UAAU,CAAA;;AAErB,IAAA,OAAgB,aAAa,GAAG,4CAA4C;AAEnE,IAAA,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC;;IAG1C,KAAK,GAAG,KAAK,EAAwB;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAa,EAAE,CAAC;;IAGjC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;IAGxD,MAAM,GAAG,KAAK,EAAU;;AAGf,IAAA,KAAK,GAAG,QAAQ,CAAiB,MAAK;QAC7C,MAAM,GAAG,GAAmB,EAAE;QAC9B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,CAAC;gBAAE;YACR,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAClE;AACA,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,CAAC;;AAGO,IAAA,WAAW,GAAG,QAAQ,CAAW,MAAK;QAC7C,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,UAAU,CAAC,aAAa,CAAC;AACjF,IAAA,CAAC,CAAC;;IAGO,YAAY,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,IAAI,EAAE,CAAC;;AAG1F,IAAA,QAAQ,CAAC,KAA2B,EAAA;QAClC,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,SAAS;AACnC,QAAA,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;QACtD,OAAO,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,SAAS;IACzE;;;AAIA,IAAA,IAAI,CAAC,KAAa,EAAA;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAC5C,CAAA,kJAAA,EAAqJ,KAAK,CAAA,MAAA,CAAQ,CACnK;IACH;AAEiB,IAAA,OAAO,GAAG,SAAS,CAAC,cAAc,CAAC;;IAGpD,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE;IAC5B;;AAGA,IAAA,MAAM,CAAC,KAAe,EAAA;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;wGA/DW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,upBAqDgB,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3ErD,g3BA2BA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,aAAa,6vBAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE9B,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,aAAa,EAAA,UAAA,EAGX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,g3BAAA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA;;;AEpB5C;;AAEG;;;;"}

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

@@ -106,23 +106,23 @@ class SdQuerySavedFiltersMenu {
         this.#persist(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuerySavedFiltersMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQuerySavedFiltersMenu, isStandalone: true, selector: "sd-query-saved-filters-menu", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{display:flex;align-items:center;min-height:36px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{flex:0 0 auto;font-size:18px;width:18px;height:18px;margin-right:8px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;align-self:center;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#7a7a7a;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQuerySavedFiltersMenu, isStandalone: true, selector: "sd-query-saved-filters-menu", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n  <!-- why: footer save action s\u1ED1ng trong mat-menu \u0111\u1EC3 dropdown gom 1 v\u00F9ng (list +\r\n       save) \u2014 user m\u1EDF dropdown th\u1EA5y ngay c\u1EA3 2 h\u00E0nh \u0111\u1ED9ng, kh\u00F4ng ph\u1EA3i t\u00ECm n\u00FAt l\u01B0u\r\n       \u1EDF ch\u1ED7 kh\u00E1c tr\u00EAn toolbar. -->\r\n  <hr class=\"c-sf-divider\" aria-hidden=\"true\" />\r\n  <button type=\"button\" mat-menu-item class=\"c-sf-save\" [disabled]=\"!key()\" (click)=\"promptSave()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    <span>L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{min-height:40px;padding-left:16px;padding-right:4px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.4}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{display:inline-flex;align-items:center;justify-content:center;font-size:18px!important;width:18px!important;height:18px!important;line-height:1}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#7a7a7a;cursor:pointer;padding:0}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{margin:0!important;padding:0;font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;text-align:center;overflow:hidden}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-divider{border:0;border-top:1px solid #e2e4e7;margin:4px 0}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-save mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuerySavedFiltersMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-saved-filters-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule], template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{display:flex;align-items:center;min-height:36px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{flex:0 0 auto;font-size:18px;width:18px;height:18px;margin-right:8px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;align-self:center;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#7a7a7a;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}\n"] }]
+            args: [{ selector: 'sd-query-saved-filters-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatIconModule, MatTooltipModule], template: "<button\r\n  type=\"button\"\r\n  class=\"c-saved-filters\"\r\n  [disabled]=\"!key()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"key() ? 'B\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' : 'C\u1EA7n [savedFiltersKey] \u0111\u1EC3 b\u1EADt'\">\r\n  <mat-icon fontSet=\"material-icons-outlined\">bookmark_border</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-saved-filters-menu\" xPosition=\"before\" yPosition=\"below\">\r\n  @for (f of savedFilters(); track f.id) {\r\n    <button type=\"button\" mat-menu-item class=\"c-sf-row\" (click)=\"pick(f)\">\r\n      <mat-icon class=\"c-sf-lead\" fontSet=\"material-icons-outlined\">filter_alt</mat-icon>\r\n      <span class=\"c-sf-name\">{{ f.name }}</span>\r\n      <span\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"c-sf-del\"\r\n        aria-label=\"Xo\u00E1 b\u1ED9 l\u1ECDc\"\r\n        (click)=\"remove(f.id, $event)\"\r\n        (keydown.enter)=\"remove(f.id, $event)\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\r\n      </span>\r\n    </button>\r\n  } @empty {\r\n    <div class=\"c-sf-empty\">Ch\u01B0a c\u00F3 b\u1ED9 l\u1ECDc n\u00E0o.</div>\r\n  }\r\n  <!-- why: footer save action s\u1ED1ng trong mat-menu \u0111\u1EC3 dropdown gom 1 v\u00F9ng (list +\r\n       save) \u2014 user m\u1EDF dropdown th\u1EA5y ngay c\u1EA3 2 h\u00E0nh \u0111\u1ED9ng, kh\u00F4ng ph\u1EA3i t\u00ECm n\u00FAt l\u01B0u\r\n       \u1EDF ch\u1ED7 kh\u00E1c tr\u00EAn toolbar. -->\r\n  <hr class=\"c-sf-divider\" aria-hidden=\"true\" />\r\n  <button type=\"button\" mat-menu-item class=\"c-sf-save\" [disabled]=\"!key()\" (click)=\"promptSave()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    <span>L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex}.c-saved-filters{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}.c-saved-filters mat-icon{font-size:18px;width:18px;height:18px}.c-saved-filters:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-saved-filters[disabled]{opacity:.5;cursor:not-allowed}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu{min-width:220px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row{min-height:40px;padding-left:16px;padding-right:4px}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .mat-mdc-menu-item.c-sf-row .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.4}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-lead{display:inline-flex;align-items:center;justify-content:center;font-size:18px!important;width:18px!important;height:18px!important;line-height:1}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#7a7a7a;cursor:pointer;padding:0}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del mat-icon{margin:0!important;padding:0;font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;text-align:center;overflow:hidden}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-del:hover{background:#0000000f;color:#d23535}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-empty{padding:12px 16px;font-size:13px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-divider{border:0;border-top:1px solid #e2e4e7;margin:4px 0}::ng-deep .mat-mdc-menu-panel.c-saved-filters-menu .c-sf-save mat-icon{margin-right:8px}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Right-pinned toolbar for `sd-query-bar`: AND/OR connector toggle, saved-filters
- * dropdown, clear-all, a save-filter shortcut, and the deferred Search trigger.
- * Owns no business logic — just routes user intent back via outputs
- * (`(logic)` model, `(clear)`, `(search)`, `(applyFilter)`).
+ * Right-pinned toolbar for `sd-query-bar`: AND/OR connector toggle, clear-all,
+ * saved-filters dropdown (with footer "Lưu bộ lọc hiện tại"), and the deferred
+ * Search trigger. Owns no business logic — just routes user intent back via
+ * outputs (`(logic)` model, `(clear)`, `(search)`, `(applyFilter)`).
  *
- * The "save filter" button forwards to `SdQuerySavedFiltersMenu.promptSave()` so
- * the user can save the current query without first opening the saved-filters
- * dropdown — keeps the save action adjacent to the Search trigger.
+ * The "save current query" action lives INSIDE the saved-filters mat-menu
+ * footer (one zone for both apply + save). The dropdown trigger sits
+ * immediately before Search so the user sees one filter-cluster on the right.
  */
 class SdQueryActionsBar {
     // AND/OR toggle —
@@ -140,24 +140,17 @@ class SdQueryActionsBar {
     // Search trigger —
     canSearch = input(false);
     search = output();
-    // why: viewChild để có thể gọi promptSave() từ nút "Lưu bộ lọc" đặt cạnh Search.
-    // Nút lưu nằm ngoài <mat-menu> nên không thể dùng (click) wiring nội bộ.
-    savedFiltersMenu = viewChild(SdQuerySavedFiltersMenu);
     setLogic(value) {
         if (this.logic() === value)
             return;
         this.logic.set(value);
     }
-    /** Trigger save-current-query via the saved-filters child (no-op when menu absent / no key). */
-    promptSave() {
-        this.savedFiltersMenu()?.promptSave();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryActionsBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryActionsBar, isStandalone: true, selector: "sd-query-actions-bar", inputs: { showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", 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 }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, canSearch: { classPropertyName: "canSearch", publicName: "canSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logic: "logicChange", applyFilter: "applyFilter", clear: "clear", search: "search" }, viewQueries: [{ propertyName: "savedFiltersMenu", first: true, predicate: SdQuerySavedFiltersMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: n\u00FAt \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" \u0111\u1EB7t s\u00E1t Search \u2014 user l\u01B0u xong r\u1ED3i t\u00ECm\r\n       lu\u00F4n trong c\u00F9ng v\u00F9ng ph\u1EA3i. Ch\u1EC9 hi\u1EC7n khi showSavedFilters=true V\u00C0 c\u00F3\r\n       savedFiltersKey (kh\u00F4ng c\u00F3 key th\u00EC promptSave l\u00E0 no-op). -->\r\n  @if (showSavedFilters() && savedFiltersKey()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-save-filter\"\r\n      matTooltip=\"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\"\r\n      (click)=\"promptSave()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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: SdQuerySavedFiltersMenu, selector: "sd-query-saved-filters-menu", inputs: ["key", "query"], outputs: ["apply"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryActionsBar, isStandalone: true, selector: "sd-query-actions-bar", inputs: { showLogicToggle: { classPropertyName: "showLogicToggle", publicName: "showLogicToggle", isSignal: true, isRequired: false, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", 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 }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, canSearch: { classPropertyName: "canSearch", publicName: "canSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logic: "logicChange", applyFilter: "applyFilter", clear: "clear", search: "search" }, ngImport: i0, template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: saved-filters dropdown \u0111\u1EB7t s\u00E1t ngay tr\u01B0\u1EDBc Search \u2014 gom to\u00E0n b\u1ED9\r\n       h\u00E0nh \u0111\u1ED9ng v\u1EC1 b\u1ED9 l\u1ECDc (apply view c\u0169 / l\u01B0u view hi\u1EC7n t\u1EA1i) c\u1EA1nh n\u00FAt submit,\r\n       user th\u1EA5y 1 c\u1EE5m. Footer \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" s\u1ED1ng trong mat-menu c\u1EE7a\r\n       saved-filters-menu, kh\u00F4ng t\u00E1ch ra n\u00FAt ri\u00EAng n\u1EEFa. -->\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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: SdQuerySavedFiltersMenu, selector: "sd-query-saved-filters-menu", inputs: ["key", "query"], outputs: ["apply"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryActionsBar, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-query-actions-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatTooltipModule, SdQuerySavedFiltersMenu], template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: n\u00FAt \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" \u0111\u1EB7t s\u00E1t Search \u2014 user l\u01B0u xong r\u1ED3i t\u00ECm\r\n       lu\u00F4n trong c\u00F9ng v\u00F9ng ph\u1EA3i. Ch\u1EC9 hi\u1EC7n khi showSavedFilters=true V\u00C0 c\u00F3\r\n       savedFiltersKey (kh\u00F4ng c\u00F3 key th\u00EC promptSave l\u00E0 no-op). -->\r\n  @if (showSavedFilters() && savedFiltersKey()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-save-filter\"\r\n      matTooltip=\"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\"\r\n      (click)=\"promptSave()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">bookmark_add</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"] }]
+            args: [{ selector: 'sd-query-actions-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatTooltipModule, SdQuerySavedFiltersMenu], template: "<!-- Vertical separator between the wrapping filter area (left) and the pinned toolbar. -->\r\n<span class=\"c-bar-divider\" aria-hidden=\"true\"></span>\r\n\r\n<div class=\"c-query-bar__actions\">\r\n  <!-- AND / OR toggle -->\r\n  @if (showLogicToggle() && filtersCount() >= 2) {\r\n    <div class=\"c-logic-toggle\" role=\"group\" aria-label=\"Logic operator\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'AND'\"\r\n        (click)=\"setLogic('AND')\">\r\n        AND\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"c-logic-segment\"\r\n        [class.c-logic-active]=\"logic() === 'OR'\"\r\n        (click)=\"setLogic('OR')\">\r\n        OR\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showClearAll() && filtersCount() > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"c-clear-all\"\r\n      [matTooltip]=\"'X\u00F3a t\u1EA5t c\u1EA3 (' + filtersCount() + ')'\"\r\n      (click)=\"clear.emit()\">\r\n      <mat-icon fontSet=\"material-icons-outlined\">delete_sweep</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <!-- why: saved-filters dropdown \u0111\u1EB7t s\u00E1t ngay tr\u01B0\u1EDBc Search \u2014 gom to\u00E0n b\u1ED9\r\n       h\u00E0nh \u0111\u1ED9ng v\u1EC1 b\u1ED9 l\u1ECDc (apply view c\u0169 / l\u01B0u view hi\u1EC7n t\u1EA1i) c\u1EA1nh n\u00FAt submit,\r\n       user th\u1EA5y 1 c\u1EE5m. Footer \"L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i\" s\u1ED1ng trong mat-menu c\u1EE7a\r\n       saved-filters-menu, kh\u00F4ng t\u00E1ch ra n\u00FAt ri\u00EAng n\u1EEFa. -->\r\n  @if (showSavedFilters()) {\r\n    <sd-query-saved-filters-menu\r\n      [key]=\"savedFiltersKey()\"\r\n      [query]=\"query()\"\r\n      (apply)=\"applyFilter.emit($event)\" />\r\n  }\r\n\r\n  <!-- why: far-right \"submit at the end of the toolbar\" position; sole query trigger. -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"c-search-trigger\"\r\n    [disabled]=\"!canSearch()\"\r\n    matTooltip=\"T\u00ECm ki\u1EBFm\"\r\n    (click)=\"search.emit()\">\r\n    <mat-icon fontSet=\"material-icons-outlined\">search</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:contents}.c-bar-divider{flex:0 0 auto;align-self:stretch;width:1px;min-height:28px;background:#e2e4e7}.c-query-bar__actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}.c-logic-toggle{display:inline-flex;align-items:center;padding:2px;background:#f5f6f7;border:1px solid #e2e4e7;border-radius:6px}:host-context(.c-density-compact) .c-logic-toggle{height:28px}:host-context(.c-density-comfortable) .c-logic-toggle{height:32px}.c-logic-toggle .c-logic-segment{height:100%;padding:0 10px;border:none;background:transparent;font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.4px;color:#5f6368;cursor:pointer;border-radius:4px}.c-logic-toggle .c-logic-segment.c-logic-active{background:#fff;color:var(--sd-primary);box-shadow:0 1px 2px #00000014}.c-clear-all,.c-search-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d6d8db;border-radius:6px;background:#fff;color:#5f6368;cursor:pointer;padding:0}:host-context(.c-density-compact) .c-clear-all,:host-context(.c-density-compact) .c-search-trigger{width:28px;height:28px}:host-context(.c-density-comfortable) .c-clear-all,:host-context(.c-density-comfortable) .c-search-trigger{width:32px;height:32px}.c-clear-all mat-icon,.c-search-trigger mat-icon{font-size:18px;width:18px;height:18px}.c-clear-all:hover:not([disabled]),.c-search-trigger:hover:not([disabled]){border-color:var(--sd-primary);color:var(--sd-primary)}.c-clear-all[disabled],.c-search-trigger[disabled]{opacity:.5;cursor:not-allowed}.c-clear-all:hover{border-color:#dc2626;color:#dc2626}\n"] }]
         }] });
 
 // ---------------------------------------------------------------------------
@@ -400,11 +393,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: "<!--\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].\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 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\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=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.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=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.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 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 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 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }], 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].\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 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\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=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.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=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.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__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }], 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: [CommonModule, FormsModule, MatIconModule, SdOperator], 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].\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 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\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=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.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=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.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 4px 0 12px}.c-seamless--comfortable .c-seamless__label{padding:0 6px 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 4px}.c-seamless--comfortable .c-seamless__input{padding:0 6px}.c-seamless__dash{color:#7a7a7a}.c-seamless__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.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: [CommonModule, FormsModule, MatIconModule, SdOperator], 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].\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 transparent, borderless; hidden for NULL / NOT_NULL -->\r\n  @if (!isNoData()) {\r\n    <span class=\"c-seamless__input\">\r\n      @if (isBetween()) {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-from' : null\"\r\n          [ngModel]=\"draftFrom()\"\r\n          (ngModelChange)=\"draftFrom.set($event)\"\r\n          [size]=\"sizeFor(draftFrom(), phFrom())\"\r\n          [placeholder]=\"phFrom()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n        <span class=\"c-seamless__dash\" aria-hidden=\"true\">\u2014</span>\r\n        <input\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ? autoId() + '-to' : null\"\r\n          [ngModel]=\"draftTo()\"\r\n          (ngModelChange)=\"draftTo.set($event)\"\r\n          [size]=\"sizeFor(draftTo(), phTo())\"\r\n          [placeholder]=\"phTo()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitRange()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\r\n      } @else {\r\n        <input\r\n          #firstInput\r\n          type=\"text\"\r\n          class=\"c-seamless__field-input\"\r\n          [attr.data-autoid]=\"autoId() ?? null\"\r\n          [ngModel]=\"draft()\"\r\n          (ngModelChange)=\"draft.set($event)\"\r\n          [size]=\"sizeFor(draft(), ph())\"\r\n          [placeholder]=\"ph()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"commitSingle()\"\r\n          (keydown.enter)=\"$any($event.target).blur()\"\r\n          (keydown.escape)=\"revertAndBlur($any($event.target))\" />\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=pending] .c-seamless__field-input{color:#212121}.c-seamless[data-state=pending] .c-seamless__field-input::placeholder{color:#7a7a7a;font-style:italic}.c-seamless[data-state=active]{border-color:var(--sd-primary-light);background:var(--sd-primary-light)}.c-seamless[data-state=active] .c-seamless__field-input{color:var(--sd-primary)}.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=focus] .c-seamless__field-input{color:#212121}.c-seamless[data-state=error]{border-color:#d23535;background:#fff5f5;color:#d23535;box-shadow:0 0 0 3px #d235351f}.c-seamless[data-state=error] .c-seamless__field-input{color:#d23535}.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__field-input{appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:500;padding:0;min-width:24px;max-width:200px}.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 */
@@ -487,7 +480,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: "<!--\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 });
+    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", "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", "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,
@@ -726,7 +719,7 @@ class SdQueryChipPopover {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryChipPopover, isStandalone: true, selector: "sd-query-chip-popover", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, chipIndex: { classPropertyName: "chipIndex", publicName: "chipIndex", isSignal: true, isRequired: false, transformFunction: null }, autoIdBase: { classPropertyName: "autoIdBase", publicName: "autoIdBase", isSignal: true, isRequired: false, transformFunction: null }, switchPickerMenu: { classPropertyName: "switchPickerMenu", publicName: "switchPickerMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", swapField: "swapField" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Chip popover \u2014 operator + value editor for the popover-mode chip.\r\n  Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\r\n  Body branches on operator + field.type \u2014 8 paths preserved exactly.\r\n-->\r\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\r\n  <ng-template matMenuContent>\r\n    @let _field = field();\r\n    @let _op = editingOperator();\r\n    @let _val = editingValue();\r\n    @let _options = editingOptions();\r\n    @let _loading = editingOptionsLoading();\r\n    @let _switchMenu = switchPickerMenu();\r\n\r\n    @if (_field) {\r\n      <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n        <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\r\n             the field-picker MatMenu via [switchPickerMenu]. -->\r\n        @if (_switchMenu) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"_switchMenu\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _field.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n        } @else {\r\n          <span class=\"c-pop-header-field\">{{ _field.label }}</span>\r\n        }\r\n        <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\r\n        <sd-operator\r\n          class=\"c-pop-header-operator\"\r\n          [autoId]=\"chipAutoId('operator')\"\r\n          [operators]=\"allowedOperators()\"\r\n          [model]=\"_op\"\r\n          [disabled]=\"!showOperatorSelector()\"\r\n          (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n      </div>\r\n\r\n      <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n        @if (!isNoDataOperator(_op)) {\r\n          @if (_op === 'BETWEEN') {\r\n            @if (_field.type === 'date') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-date>\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-date>\r\n              </div>\r\n            } @else if (_field.type === 'datetime') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-datetime>\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-datetime>\r\n              </div>\r\n            } @else {\r\n              <div class=\"c-pop-between\">\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-input-number>\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-input-number>\r\n              </div>\r\n            }\r\n          } @else if (_field.type === 'boolean') {\r\n            <div class=\"c-pop-boolean c-bool-toggle\">\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-true')\"\r\n                [type]=\"_val === true ? 'fill' : 'outline'\"\r\n                color=\"success\"\r\n                [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\r\n                (click)=\"onEditingValueInput(true)\">\r\n              </sd-button>\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-false')\"\r\n                [type]=\"_val === false ? 'fill' : 'outline'\"\r\n                color=\"warning\"\r\n                [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\r\n                (click)=\"onEditingValueInput(false)\">\r\n              </sd-button>\r\n            </div>\r\n          } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n            @let _opt = $any(_field).option;\r\n            <sd-select size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [items]=\"_options\"\r\n              [valueField]=\"_opt.valueField\"\r\n              [displayField]=\"_opt.displayField\"\r\n              [multiple]=\"multiple()\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-select>\r\n            @if (_loading) {\r\n              <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n            }\r\n          } @else if (_field.type === 'date') {\r\n            <sd-date size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-date>\r\n          } @else if (_field.type === 'datetime') {\r\n            <sd-datetime size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-datetime>\r\n          } @else if (_field.type === 'number') {\r\n            <sd-input-number size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input-number>\r\n          } @else {\r\n            <sd-input size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [":host{display:contents}::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-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-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: 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: 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: 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: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryChipPopover, isStandalone: true, selector: "sd-query-chip-popover", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, chipIndex: { classPropertyName: "chipIndex", publicName: "chipIndex", isSignal: true, isRequired: false, transformFunction: null }, autoIdBase: { classPropertyName: "autoIdBase", publicName: "autoIdBase", isSignal: true, isRequired: false, transformFunction: null }, switchPickerMenu: { classPropertyName: "switchPickerMenu", publicName: "switchPickerMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", swapField: "swapField" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Chip popover \u2014 operator + value editor for the popover-mode chip.\r\n  Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\r\n  Body branches on operator + field.type \u2014 8 paths preserved exactly.\r\n-->\r\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\r\n  <ng-template matMenuContent>\r\n    @let _field = field();\r\n    @let _op = editingOperator();\r\n    @let _val = editingValue();\r\n    @let _options = editingOptions();\r\n    @let _loading = editingOptionsLoading();\r\n    @let _switchMenu = switchPickerMenu();\r\n\r\n    @if (_field) {\r\n      <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\r\n        <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\r\n        <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\r\n             the field-picker MatMenu via [switchPickerMenu]. -->\r\n        @if (_switchMenu) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"c-pop-header-field\"\r\n            [matMenuTriggerFor]=\"_switchMenu\"\r\n            matTooltip=\"\u0110\u1ED5i field\">\r\n            <span>{{ _field.label }}</span>\r\n            <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\r\n          </button>\r\n        } @else {\r\n          <span class=\"c-pop-header-field\">{{ _field.label }}</span>\r\n        }\r\n        <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\r\n        <sd-operator\r\n          class=\"c-pop-header-operator\"\r\n          [autoId]=\"chipAutoId('operator')\"\r\n          [operators]=\"allowedOperators()\"\r\n          [model]=\"_op\"\r\n          [disabled]=\"!showOperatorSelector()\"\r\n          (modelChange)=\"onEditingOperatorChange($any($event))\" />\r\n      </div>\r\n\r\n      <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\r\n        @if (!isNoDataOperator(_op)) {\r\n          @if (_op === 'BETWEEN') {\r\n            @if (_field.type === 'date') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-date>\r\n                <sd-date size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-date>\r\n              </div>\r\n            } @else if (_field.type === 'datetime') {\r\n              <div class=\"c-pop-between\">\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-datetime>\r\n                <sd-datetime size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-datetime>\r\n              </div>\r\n            } @else {\r\n              <div class=\"c-pop-between\">\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-from')\"\r\n                  placeholder=\"T\u1EEB\"\r\n                  [model]=\"$any(_val)?.from\"\r\n                  (sdChange)=\"onEditingRangeFrom($event)\">\r\n                </sd-input-number>\r\n                <sd-input-number size=\"sm\" hideInlineError\r\n                  [autoId]=\"chipAutoId('value-to')\"\r\n                  placeholder=\"\u0110\u1EBFn\"\r\n                  [model]=\"$any(_val)?.to\"\r\n                  (sdChange)=\"onEditingRangeTo($event)\">\r\n                </sd-input-number>\r\n              </div>\r\n            }\r\n          } @else if (_field.type === 'boolean') {\r\n            <div class=\"c-pop-boolean c-bool-toggle\">\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-true')\"\r\n                [type]=\"_val === true ? 'fill' : 'outline'\"\r\n                color=\"success\"\r\n                [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\r\n                (click)=\"onEditingValueInput(true)\">\r\n              </sd-button>\r\n              <sd-button\r\n                [autoId]=\"chipAutoId('value-false')\"\r\n                [type]=\"_val === false ? 'fill' : 'outline'\"\r\n                color=\"warning\"\r\n                [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\r\n                (click)=\"onEditingValueInput(false)\">\r\n              </sd-button>\r\n            </div>\r\n          } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\r\n            @let _opt = $any(_field).option;\r\n            <sd-select size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [items]=\"_options\"\r\n              [valueField]=\"_opt.valueField\"\r\n              [displayField]=\"_opt.displayField\"\r\n              [multiple]=\"multiple()\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-select>\r\n            @if (_loading) {\r\n              <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\r\n            }\r\n          } @else if (_field.type === 'date') {\r\n            <sd-date size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-date>\r\n          } @else if (_field.type === 'datetime') {\r\n            <sd-datetime size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-datetime>\r\n          } @else if (_field.type === 'number') {\r\n            <sd-input-number size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input-number>\r\n          } @else {\r\n            <sd-input size=\"sm\" hideInlineError\r\n              [autoId]=\"chipAutoId('value')\"\r\n              placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\r\n              [model]=\"$any(_val)\"\r\n              (sdChange)=\"onEditingValueInput($event)\">\r\n            </sd-input>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [":host{display:contents}::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-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-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: 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: 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: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, decorators: [{
             type: Component,