@mesgflow/ui-kit 0.6.0 → 0.7.0

package/fesm2022/mesgflow-ui-kit-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-switch.mjs","sources":["../../../projects/ui-kit/switch/switch.ts","../../../projects/ui-kit/switch/switch.html","../../../projects/ui-kit/switch/mesgflow-ui-kit-switch.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { ValueAccessorBase, type MfSize } from '@mesgflow/ui-kit/core';\r\n\r\n/** Track/thumb/offset/kayma ölçüleri — `(track_h - thumb_h) / 2 = offset`, `translate = track_w - thumb_w - 2×offset` formülüyle üretildi (bkz. `md`'nin önceki sabit değerleriyle birebir örtüştüğü doğrulaması). */\r\nconst SIZE_CLASSES: Record<\r\n  MfSize,\r\n  { track: string; thumb: string; offset: string; translate: string }\r\n> = {\r\n  sm: {\r\n    track: 'h-5 w-9',\r\n    thumb: 'h-4 w-4',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4',\r\n  },\r\n  md: {\r\n    track: 'h-6 w-11',\r\n    thumb: 'h-5 w-5',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-5 rtl:peer-checked:-translate-x-5',\r\n  },\r\n  lg: {\r\n    track: 'h-7 w-13',\r\n    thumb: 'h-6 w-6',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-6 rtl:peer-checked:-translate-x-6',\r\n  },\r\n};\r\n\r\n/**\r\n * `<mf-switch [(checked)]=\"row.active\" (checkedChange)=\"onToggle(row)\" />`\r\n *\r\n * Native `[(ngModel)]` DEĞİL, Angular'ın `model()` iki-yönlü bağlama sinyali\r\n * kullanılıyor (`[(checked)]`) — ControlValueAccessor yazmadan aynı ergonomiyi\r\n * veriyor. Görünür track+thumb, gizli (sr-only) bir native checkbox'ın\r\n * `:checked` durumuna komşu `<span>` üzerinden `peer-checked:` ile tepki\r\n * veriyor — gerçek form kontrolü hâlâ native checkbox (klavye/focus/a11y\r\n * ücretsiz), görsel tamamen bizim.\r\n */\r\n@Component({\r\n  selector: 'mf-switch',\r\n  exportAs: 'mfSwitch',\r\n  host: { class: 'inline-flex' },\r\n  templateUrl: './switch.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }],\r\n})\r\nexport class Switch extends ValueAccessorBase<boolean> implements ControlValueAccessor {\r\n  readonly checked = model(false);\r\n  readonly disabled = input(false);\r\n  readonly size = input<MfSize>('md');\r\n  readonly label = input<string>('');\r\n  /** `label` boşken (görünür metin yok) native checkbox'a erişilebilir ad sağlamak için — `label` doluysa YOK SAYILIR (çift anons olmasın diye). */\r\n  readonly ariaLabel = input<string>('');\r\n\r\n  protected readonly sizeClasses = computed(() => SIZE_CLASSES[this.size()]);\r\n\r\n  writeValue(value: boolean): void {\r\n    this.checked.set(value);\r\n  }\r\n\r\n  protected onToggle(event: Event): void {\r\n    const checked = (event.target as HTMLInputElement).checked;\r\n    this.checked.set(checked);\r\n    this.onChange(checked);\r\n    this.onTouched();\r\n  }\r\n}\r\n","<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;AACA,MAAM,YAAY,GAGd;AACF,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;CACF;AAED;;;;;;;;;AASG;AAQG,MAAO,MAAO,SAAQ,iBAA0B,CAAA;IAC3C,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IACtB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IACvB,IAAI,GAAG,KAAK,CAAS,IAAI;6EAAC;IAC1B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAEzB,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC;AAEnB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;oFAAC;AAE1E,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;IACzB;AAEU,IAAA,QAAQ,CAAC,KAAY,EAAA;AAC7B,QAAA,MAAM,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;AAC1D,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE;IAClB;uGAnBW,MAAM,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAN,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAFN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5CjG,uxCAiCA,EAAA,CAAA;;2FDaa,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,QAAA,EACX,UAAU,EAAA,IAAA,EACd,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,SAAA,EAEnB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,MAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,uxCAAA,EAAA;;;AE5CjG;;AAEG;;"}
+{"version":3,"file":"mesgflow-ui-kit-switch.mjs","sources":["../../../projects/ui-kit/switch/switch.ts","../../../projects/ui-kit/switch/switch.html","../../../projects/ui-kit/switch/mesgflow-ui-kit-switch.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { ValueAccessorBase, type MfSize } from '@mesgflow/ui-kit/core';\r\n\r\n/** Track/thumb/offset/kayma ölçüleri — `(track_h - thumb_h) / 2 = offset`, `translate = track_w - thumb_w - 2×offset` formülüyle üretildi (bkz. `md`'nin önceki sabit değerleriyle birebir örtüştüğü doğrulaması). */\r\nconst SIZE_CLASSES: Record<\r\n  MfSize,\r\n  { track: string; thumb: string; offset: string; translate: string }\r\n> = {\r\n  sm: {\r\n    track: 'h-5 w-9',\r\n    thumb: 'h-4 w-4',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4',\r\n  },\r\n  md: {\r\n    track: 'h-6 w-11',\r\n    thumb: 'h-5 w-5',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-5 rtl:peer-checked:-translate-x-5',\r\n  },\r\n  lg: {\r\n    track: 'h-7 w-13',\r\n    thumb: 'h-6 w-6',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-6 rtl:peer-checked:-translate-x-6',\r\n  },\r\n};\r\n\r\n/**\r\n * `<mf-switch [(checked)]=\"row.active\" (checkedChange)=\"onToggle(row)\" />`\r\n *\r\n * Native `[(ngModel)]` DEĞİL, Angular'ın `model()` iki-yönlü bağlama sinyali\r\n * kullanılıyor (`[(checked)]`) — ControlValueAccessor yazmadan aynı ergonomiyi\r\n * veriyor. Görünür track+thumb, gizli (sr-only) bir native checkbox'ın\r\n * `:checked` durumuna komşu `<span>` üzerinden `peer-checked:` ile tepki\r\n * veriyor — gerçek form kontrolü hâlâ native checkbox (klavye/focus/a11y\r\n * ücretsiz), görsel tamamen bizim.\r\n */\r\n@Component({\r\n  selector: 'mf-switch',\r\n  exportAs: 'mfSwitch',\r\n  host: { class: 'inline-flex' },\r\n  templateUrl: './switch.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }],\r\n})\r\nexport class Switch extends ValueAccessorBase<boolean> implements ControlValueAccessor {\r\n  readonly checked = model(false);\r\n  readonly disabled = input(false);\r\n  readonly size = input<MfSize>('md');\r\n  readonly label = input<string>('');\r\n  /** `label` boşken (görünür metin yok) native checkbox'a erişilebilir ad sağlamak için — `label` doluysa YOK SAYILIR (çift anons olmasın diye). */\r\n  readonly ariaLabel = input<string>('');\r\n\r\n  protected readonly sizeClasses = computed(() => SIZE_CLASSES[this.size()]);\r\n\r\n  writeValue(value: boolean): void {\r\n    this.checked.set(value);\r\n  }\r\n\r\n  protected onToggle(event: Event): void {\r\n    const checked = (event.target as HTMLInputElement).checked;\r\n    this.checked.set(checked);\r\n    this.onChange(checked);\r\n    this.onTouched();\r\n  }\r\n}\r\n","<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;AACA,MAAM,YAAY,GAGd;AACF,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,SAAS,EAAE,4DAA4D;AACxE,KAAA;CACF;AAED;;;;;;;;;AASG;AAQG,MAAO,MAAO,SAAQ,iBAA0B,CAAA;IAC3C,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IACtB,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;IACvB,IAAI,GAAG,KAAK,CAAS,IAAI;6EAAC;IAC1B,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAEzB,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC;AAEnB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;oFAAC;AAE1E,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;IACzB;AAEU,IAAA,QAAQ,CAAC,KAAY,EAAA;AAC7B,QAAA,MAAM,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;AAC1D,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE;IAClB;uGAnBW,MAAM,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAN,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAFN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5CjG,8+CAkCA,EAAA,CAAA;;2FDYa,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,QAAA,EACX,UAAU,EAAA,IAAA,EACd,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,SAAA,EAEnB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,MAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,8+CAAA,EAAA;;;AE5CjG;;AAEG;;"}

package/fesm2022/mesgflow-ui-kit-table.mjs

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { input, output, inject, ElementRef, Directive, computed, Component, signal, viewChild, effect, untracked, afterRenderEffect, model, booleanAttribute, DestroyRef, afterNextRender } from '@angular/core';
 import { Button } from '@mesgflow/ui-kit/button';
 import { Checkbox } from '@mesgflow/ui-kit/checkbox';
-import { MF_TABLE_LABELS, cn, mergeLabels, isRtl } from '@mesgflow/ui-kit/core';
+import { MF_TABLE_LABELS, cn, focusRecipe, mergeLabels, isRtl } from '@mesgflow/ui-kit/core';
 import { EmptyState } from '@mesgflow/ui-kit/empty-state';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { SearchInput } from '@mesgflow/ui-kit/search-input';
@@ -304,11 +304,11 @@ class TableColumnsMenu {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableColumnsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableColumnsMenu, isStandalone: true, selector: "mf-table-columns-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenChange: "hiddenChange", closed: "closed" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableColumnsMenu, isStandalone: true, selector: "mf-table-columns-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenChange: "hiddenChange", closed: "closed" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableColumnsMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-table-columns-menu', imports: [Checkbox, Popover], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
+            args: [{ selector: 'mf-table-columns-menu', imports: [Checkbox, Popover], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hiddenChange: [{ type: i0.Output, args: ["hiddenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const OPERATOR_KEY = {
@@ -765,11 +765,11 @@ class TableFilterMenu {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableFilterMenu, isStandalone: true, selector: "mf-table-filter-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", remove: "remove", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "fieldSearchEl", first: true, predicate: ["fieldSearchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableFilterMenu, isStandalone: true, selector: "mf-table-filter-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", remove: "remove", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "fieldSearchEl", first: true, predicate: ["fieldSearchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-table-filter-menu', imports: [Button, Icon, Checkbox, Input, Popover, Select, Calendar], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\r\n" }]
+            args: [{ selector: 'mf-table-filter-menu', imports: [Button, Icon, Checkbox, Input, Popover, Select, Calendar], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], remove: [{ type: i0.Output, args: ["remove"] }], closed: [{ type: i0.Output, args: ["closed"] }], fieldSearchEl: [{ type: i0.ViewChild, args: ['fieldSearchEl', { isSignal: true }] }] } });
 
 /**
@@ -966,7 +966,8 @@ function buildPageList(current, total) {
  */
 const CELL_BASE = 'relative flex h-9 w-9 sm:h-8 sm:min-w-8 shrink-0 appearance-none items-center justify-center rounded-md border-0 bg-transparent px-2 ' +
     'text-sm font-medium tabular-nums transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    focusRecipe +
+    ' ' +
     'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100';
 /**
  * Table'ın footer'ı — sol "X–Y / toplam Z" özet + sayfa-boyutu `Select`i,
@@ -1043,7 +1044,7 @@ class TablePagination {
     cellClasses(active) {
         return cn(CELL_BASE, active
             ? 'bg-surface-alt text-fg font-semibold'
-            : 'text-fg-muted hover:bg-surface-alt hover:text-fg', 
+            : 'text-fg-muted hover:bg-state-hover hover:text-fg', 
         // Ray: aktif sayfanın alt kenarında 2px dolu marka rengi — dolu yeşil
         // BLOK değil (bu sistemin "buradasın" motifi, bkz. sınıf yorumu).
         // `inset-x-2` (8px), hücrenin `rounded-md` (8px) köşe yarıçapını tam
@@ -1588,7 +1589,7 @@ class Table {
         const selected = this.isChecked(row);
         return cn('group/row border-b border-b-hairline border-s-2 transition-colors duration-fast ease-emphasis', selected
             ? 'border-s-accent-fill bg-primary-tint'
-            : 'border-s-transparent hover:bg-surface-alt', this.showStaleOverlay() && 'opacity-60');
+            : 'border-s-transparent hover:bg-state-hover', this.showStaleOverlay() && 'opacity-60');
     }
     /**
      * Sabit (sticky) aksiyon hücresi için — `rowClasses()`'ın aksine `bg-primary-tint`
@@ -1656,6 +1657,11 @@ class Table {
     sortDirectionFor(field) {
         return this.sortState().find((s) => s.field === field)?.direction ?? null;
     }
+    /** WAI-ARIA `aria-sort` — ekran okuyucu sütunun sıralama yönünü duyurur (yalnızca sıralanabilir sütunlarda). */
+    ariaSortFor(field) {
+        const dir = this.sortDirectionFor(field);
+        return dir === 0 ? 'ascending' : dir === 1 ? 'descending' : 'none';
+    }
     /** 1 tabanlı sıra konumu — yalnızca 2+ alan aktifken gösterilir (tekil sıralamada numara gürültü olurdu). */
     sortOrderFor(field) {
         if (this.sortState().length < 2)
@@ -1754,7 +1760,7 @@ class Table {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Table, isStandalone: true, selector: "mf-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, clientSide: { classPropertyName: "clientSide", publicName: "clientSide", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualHeight: { classPropertyName: "virtualHeight", publicName: "virtualHeight", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mfTable"], ngImport: i0, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-surface-alt`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Table, isStandalone: true, selector: "mf-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, clientSide: { classPropertyName: "clientSide", publicName: "clientSide", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualHeight: { classPropertyName: "virtualHeight", publicName: "virtualHeight", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mfTable"], ngImport: i0, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "inputId", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Table, decorators: [{
             type: Component,
@@ -1772,7 +1778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         TableResizeHandle,
                         SearchInput,
                         Tooltip,
-                    ], host: { class: 'block' }, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-surface-alt`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], host: { class: 'block' }, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }, { type: i0.Output, args: ["densityChange"] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], clientSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSide", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: false }] }, { type: i0.Output, args: ["columnWidthsChange"] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualHeight", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], rowExpandedChange: [{ type: i0.Output, args: ["rowExpandedChange"] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
 
 /**