@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,1783 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+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 { EmptyState } from '@mesgflow/ui-kit/empty-state';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { SearchInput } from '@mesgflow/ui-kit/search-input';
+import { Skeleton } from '@mesgflow/ui-kit/skeleton';
+import { Tooltip } from '@mesgflow/ui-kit/tooltip';
+import { Popover } from '@mesgflow/ui-kit/popover';
+import { Chip } from '@mesgflow/ui-kit/chip';
+import { Select } from '@mesgflow/ui-kit/select';
+import { startOfDay, startOfMonth } from 'date-fns';
+import { Input } from '@mesgflow/ui-kit/input';
+import { dateRangeForPreset, Calendar } from '@mesgflow/ui-kit/date-picker';
+
+var SortDirection;
+(function (SortDirection) {
+    SortDirection[SortDirection["Ascending"] = 0] = "Ascending";
+    SortDirection[SortDirection["Descending"] = 1] = "Descending";
+})(SortDirection || (SortDirection = {}));
+var FilterOperator;
+(function (FilterOperator) {
+    FilterOperator[FilterOperator["Equal"] = 0] = "Equal";
+    FilterOperator[FilterOperator["NotEqual"] = 1] = "NotEqual";
+    FilterOperator[FilterOperator["GreaterThan"] = 2] = "GreaterThan";
+    FilterOperator[FilterOperator["GreaterOrEqual"] = 3] = "GreaterOrEqual";
+    FilterOperator[FilterOperator["LessThan"] = 4] = "LessThan";
+    FilterOperator[FilterOperator["LessOrEqual"] = 5] = "LessOrEqual";
+    FilterOperator[FilterOperator["Contains"] = 6] = "Contains";
+    FilterOperator[FilterOperator["StartsWith"] = 7] = "StartsWith";
+    FilterOperator[FilterOperator["EndsWith"] = 8] = "EndsWith";
+    FilterOperator[FilterOperator["In"] = 9] = "In";
+    FilterOperator[FilterOperator["IsNull"] = 10] = "IsNull";
+    FilterOperator[FilterOperator["IsNotNull"] = 11] = "IsNotNull";
+})(FilterOperator || (FilterOperator = {}));
+var FilterLogic;
+(function (FilterLogic) {
+    FilterLogic[FilterLogic["And"] = 0] = "And";
+    FilterLogic[FilterLogic["Or"] = 1] = "Or";
+})(FilterLogic || (FilterLogic = {}));
+const DEFAULT_PAGE_SIZE = 20;
+const MAX_PAGE_SIZE = 100;
+/**
+ * `PagedRequest`'i backend'e giden JSON'un HER ZAMAN aynı şekilde serileştiği
+ * bir forma indirger. Neden önemli: birçok backend (ör. bu kütüphanenin
+ * geliştirildiği projedeki caching davranışı) sorgu cache anahtarını
+ * `JsonSerializer.Serialize(request)` ÜZERİNDEN kuruyor — yani anlamca özdeş
+ * ama söz dizimsel farklı iki payload (`sort: []` ile `sort` hiç yok; `filter`
+ * içi boş `conditions: []` ile `filter` hiç yok; property sırası) SUNUCUDA
+ * AYRI cache girdisi üretir ve invalidation'ın getirisini boşa çıkarır. Bu
+ * fonksiyon üç şeyi garanti eder: (1) boş `sort`/`filter` her zaman
+ * `undefined`, dizi değil, (2) `FilterGroup` içindeki boş `conditions`/`groups`
+ * de `undefined`'a iner (özyinelemeli), (3) tüm nesneler SABİT anahtar
+ * sırasıyla yeniden kurulur (JS'te string anahtarlı nesnelerde ekleme sırası
+ * korunur, `JSON.stringify` bunu birebir yansıtır).
+ */
+function canonicalPagedRequest(request) {
+    return {
+        page: { pageNumber: request.page.pageNumber, pageSize: request.page.pageSize },
+        filter: canonicalFilterGroup(request.filter),
+        sort: request.sort?.length
+            ? request.sort.map((s) => ({ field: s.field, direction: s.direction }))
+            : undefined,
+    };
+}
+function canonicalFilterGroup(group) {
+    if (!group)
+        return undefined;
+    const conditions = group.conditions?.length
+        ? group.conditions.map((c) => ({ field: c.field, operator: c.operator, value: c.value }))
+        : undefined;
+    const groups = group.groups?.map(canonicalFilterGroup).filter((g) => !!g);
+    if (!conditions && (!groups || groups.length === 0))
+        return undefined;
+    const result = { logic: group.logic };
+    if (conditions)
+        result.conditions = conditions;
+    if (groups?.length)
+        result.groups = groups;
+    return result;
+}
+
+/**
+ * `Table`'ın `[clientSide]="true"` modunun sorgu motoru — "backend'in
+ * `FilterGroup`/`SortDescriptor` modelini elimde tutuyorum, gerçek sunucu
+ * yerine bir diziye uyguluyorum" işini yapıyor; tüketicinin backend'iyle AYNI
+ * operatör sözleşmesini konuşacak şekilde tasarlandı — bu yüzden burada
+ * `'between'` gibi UI'a özel sentetik bir operatör YOK: `table-filter.model.ts`'teki
+ * `buildFilterGroup` çağrıldığı an tarih aralığını zaten gerçek
+ * `GreaterOrEqual`/`LessOrEqual` çiftine çevirmiş oluyor.
+ */
+function matchesCondition(row, condition) {
+    const value = row[condition.field];
+    const target = condition.value;
+    if (condition.operator === FilterOperator.IsNull)
+        return value === null || value === undefined || value === '';
+    if (condition.operator === FilterOperator.IsNotNull)
+        return !(value === null || value === undefined || value === '');
+    if (condition.operator === FilterOperator.In)
+        return Array.isArray(target) && target.includes(value);
+    // Backend string karşılaştırmalarını Postgres ILIKE (büyük/küçük harf
+    // duyarsız) ile yapıyor — istemci tarafı aynı davranışı
+    // `toLocaleLowerCase('tr')` ile taklit ediyor.
+    if (typeof value === 'string' || typeof target === 'string') {
+        const v = String(value ?? '').toLocaleLowerCase('tr');
+        const t = String(target ?? '').toLocaleLowerCase('tr');
+        switch (condition.operator) {
+            case FilterOperator.Equal:
+                return v === t;
+            case FilterOperator.NotEqual:
+                return v !== t;
+            case FilterOperator.Contains:
+                return v.includes(t);
+            case FilterOperator.StartsWith:
+                return v.startsWith(t);
+            case FilterOperator.EndsWith:
+                return v.endsWith(t);
+            default:
+                break;
+        }
+    }
+    switch (condition.operator) {
+        case FilterOperator.Equal:
+            return value === target;
+        case FilterOperator.NotEqual:
+            return value !== target;
+        case FilterOperator.GreaterThan:
+            return value > target;
+        case FilterOperator.GreaterOrEqual:
+            return value >= target;
+        case FilterOperator.LessThan:
+            return value < target;
+        case FilterOperator.LessOrEqual:
+            return value <= target;
+        default:
+            return true;
+    }
+}
+function matchesFilterGroup(row, group) {
+    if (!group)
+        return true;
+    const results = [
+        ...(group.conditions ?? []).map((c) => matchesCondition(row, c)),
+        ...(group.groups ?? []).map((g) => matchesFilterGroup(row, g)),
+    ];
+    if (results.length === 0)
+        return true;
+    return group.logic === FilterLogic.Or ? results.some(Boolean) : results.every(Boolean);
+}
+/** Backend `SortExpressionBuilder` gibi ilk alan `OrderBy`, gerisi `ThenBy` — çoklu sıralamayı basamak basamak uygular. */
+function sortRows(rows, sort) {
+    if (!sort?.length)
+        return [...rows];
+    return [...rows].sort((a, b) => {
+        for (const { field, direction } of sort) {
+            const av = a[field];
+            const bv = b[field];
+            if (av === bv)
+                continue;
+            const cmp = av > bv ? 1 : -1;
+            return direction === SortDirection.Descending ? -cmp : cmp;
+        }
+        return 0;
+    });
+}
+
+const KEY_STEP = 16;
+const KEY_STEP_LARGE = 64;
+/**
+ * `<span mfTableResizeHandle [label]="..." (widthChange)="..." />` — başlık hücresinin sağ kenarındaki
+ * sürükleme tutamacı. WAI-ARIA "window splitter" deseni: `role="separator"` + odaklanabilir +
+ * `aria-valuenow`; klavyede ←/→ 16px (Shift ile 64px), çift tık / Enter "içeriğe sığdır".
+ *
+ * Başlangıç genişliği HER hareketin başında ebeveyn `<th>`'nin GERÇEK ölçüsünden okunur —
+ * tutamaç tablonun genişlik durumunu bilmek zorunda değil. Pointer capture sayesinde imleç
+ * hücreden çıksa da sürükleme sürer. RTL'de yatay yön ters çevrilir.
+ */
+class TableResizeHandle {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    width = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    min = input(80, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** ARIA üst sınırı — separator varsayılanı 100 olduğundan px değerleri için açıkça verilir. */
+    max = input(2000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** İlk hareketten ÖNCE — tablo diğer kolonların genişliğini dondurur (bkz. `Table.freezeWidths`). */
+    resizeStart = output();
+    widthChange = output();
+    autofit = output();
+    host = inject(ElementRef);
+    drag = null;
+    cellWidth() {
+        return this.host.nativeElement.parentElement?.getBoundingClientRect().width ?? 0;
+    }
+    direction() {
+        return getComputedStyle(this.host.nativeElement).direction === 'rtl' ? -1 : 1;
+    }
+    onPointerDown(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        this.resizeStart.emit();
+        this.drag = { pointerId: event.pointerId, startX: event.clientX, startWidth: this.cellWidth() };
+        this.host.nativeElement.setPointerCapture?.(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (!this.drag || event.pointerId !== this.drag.pointerId)
+            return;
+        const delta = (event.clientX - this.drag.startX) * this.direction();
+        this.widthChange.emit(Math.max(this.min(), Math.round(this.drag.startWidth + delta)));
+    }
+    onPointerUp(event) {
+        if (!this.drag || event.pointerId !== this.drag.pointerId)
+            return;
+        this.host.nativeElement.releasePointerCapture?.(event.pointerId);
+        this.drag = null;
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.autofit.emit();
+            return;
+        }
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            return;
+        event.preventDefault();
+        const step = (event.shiftKey ? KEY_STEP_LARGE : KEY_STEP) * this.direction();
+        const delta = event.key === 'ArrowRight' ? step : -step;
+        this.resizeStart.emit();
+        const start = this.width() ?? this.cellWidth();
+        this.widthChange.emit(Math.max(this.min(), Math.round(start + delta)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TableResizeHandle, isStandalone: true, selector: "[mfTableResizeHandle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStart: "resizeStart", widthChange: "widthChange", autofit: "autofit" }, host: { attributes: { "role": "separator", "aria-orientation": "vertical", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "keydown": "onKeydown($event)", "dblclick": "autofit.emit()", "click": "$event.stopPropagation()" }, properties: { "attr.aria-label": "label()", "attr.aria-valuenow": "width() ?? null", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()" }, classAttribute: "absolute inset-y-0 end-0 z-[3] w-2 cursor-col-resize touch-none select-none outline-none before:absolute before:inset-y-1.5 before:end-0 before:w-0.5 before:rounded-full before:bg-transparent before:transition-colors before:duration-fast hover:before:bg-border-strong focus-visible:before:bg-focus-ring active:before:bg-accent-fill" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableResizeHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfTableResizeHandle]',
+                    host: {
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                        tabindex: '0',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-valuenow]': 'width() ?? null',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        class: 'absolute inset-y-0 end-0 z-[3] w-2 cursor-col-resize touch-none select-none outline-none before:absolute before:inset-y-1.5 before:end-0 before:w-0.5 before:rounded-full before:bg-transparent before:transition-colors before:duration-fast hover:before:bg-border-strong focus-visible:before:bg-focus-ring active:before:bg-accent-fill',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(dblclick)': 'autofit.emit()',
+                        '(click)': '$event.stopPropagation()',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], widthChange: [{ type: i0.Output, args: ["widthChange"] }], autofit: [{ type: i0.Output, args: ["autofit"] }] } });
+
+/**
+ * Toolbar'daki "Kolonlar" düğmesine bağlı basit bir görünürlük paneli.
+ * Sunucuya HİÇBİR ŞEY göndermez — `Table` `hiddenColumns` sinyalini kendi
+ * içinde tutar (bkz. table.ts), bu yalnızca o sinyali değiştiren bir UI.
+ * `primary` işaretli kolon listede hiç görünmez — kimlik kolonu kapatılamaz.
+ * Panel iskeleti `Popover`'a devredildi (bkz. plan Faz 1c).
+ */
+class TableColumnsMenu {
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    hidden = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    origin = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    open = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    tableLabels = inject(MF_TABLE_LABELS);
+    effectiveLabel = computed(() => this.label() ?? this.tableLabels().columns, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabel" }] : /* istanbul ignore next */ []));
+    hiddenChange = output();
+    closed = output();
+    toggleable = computed(() => this.columns().filter((c) => !c.primary && c.hideable !== false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleable" }] : /* istanbul ignore next */ []));
+    isHidden(field) {
+        return this.hidden().has(field);
+    }
+    toggle(field) {
+        const next = new Set(this.hidden());
+        if (next.has(field))
+            next.delete(field);
+        else
+            next.add(field);
+        this.hiddenChange.emit(next);
+    }
+    close() {
+        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"] }] });
+}
+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" }]
+        }], 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 = {
+    [FilterOperator.Equal]: 'equal',
+    [FilterOperator.NotEqual]: 'notEqual',
+    [FilterOperator.GreaterThan]: 'greaterThan',
+    [FilterOperator.GreaterOrEqual]: 'greaterOrEqual',
+    [FilterOperator.LessThan]: 'lessThan',
+    [FilterOperator.LessOrEqual]: 'lessOrEqual',
+    [FilterOperator.Contains]: 'contains',
+    [FilterOperator.StartsWith]: 'startsWith',
+    [FilterOperator.EndsWith]: 'endsWith',
+    [FilterOperator.In]: 'in',
+    [FilterOperator.IsNull]: 'isNull',
+    [FilterOperator.IsNotNull]: 'isNotNull',
+};
+function operatorLabel(labels, operator) {
+    if (operator === 'between')
+        return labels.operators.between;
+    const key = OPERATOR_KEY[operator];
+    return key ? labels.operators[key] : String(operator);
+}
+
+/** Tip başına filtre menüsünde sunulacak operatörler. `In` burada YOK — çoklu seçim ayrı bir jest (checkbox listesi), operatör dropdown'ında bir satır değil. */
+const OPERATORS_BY_TYPE = {
+    text: [
+        FilterOperator.Contains,
+        FilterOperator.Equal,
+        FilterOperator.NotEqual,
+        FilterOperator.StartsWith,
+        FilterOperator.EndsWith,
+        FilterOperator.IsNull,
+        FilterOperator.IsNotNull,
+    ],
+    select: [FilterOperator.Equal, FilterOperator.NotEqual],
+    boolean: [FilterOperator.Equal],
+    date: [
+        'between',
+        FilterOperator.GreaterOrEqual,
+        FilterOperator.LessOrEqual,
+        FilterOperator.Equal,
+    ],
+};
+function defaultOperatorFor(type) {
+    return OPERATORS_BY_TYPE[type][0];
+}
+/** `IsNull`/`IsNotNull` değer almaz — seçilir seçilmez uygulanır, değer kutusu gösterilmez. */
+function operatorNeedsValue(operator) {
+    return operator !== FilterOperator.IsNull && operator !== FilterOperator.IsNotNull;
+}
+/**
+ * Chip metninde operatör YAZILMAZ eğer o tip için varsayılan operatörse.
+ * "Rol: Yönetici" okunur; "Rol eşittir Yönetici" aynı bilgiyi taşıyıp
+ * üç kat yer kaplar. Varsayılandan sapma ise BİLGİ taşır ve gösterilir.
+ */
+function isDefaultOperator(operator, type) {
+    return operator === defaultOperatorFor(type);
+}
+/**
+ * `2026-09-01T00:00:00+03:00` — YEREL gün sınırı. `toISOString()` KULLANMA:
+ * UTC'ye kaydırır, "bugün" filtresi saat farkı kadar yanlış güne düşer.
+ * `export` — `dateToIso` (aşağıda) ve testler dışında artık DatePicker/
+ * Calendar'ın ürettiği `Date` nesnelerini backend'in ISO metnine çeviren TEK
+ * yer burası (bkz. `table-filter-menu.ts`).
+ */
+function localIso(date, endOfDay) {
+    const pad = (n, width = 2) => String(n).padStart(width, '0');
+    const time = endOfDay ? '23:59:59.999' : '00:00:00.000';
+    const offsetMinutes = -date.getTimezoneOffset();
+    const sign = offsetMinutes >= 0 ? '+' : '-';
+    const absolute = Math.abs(offsetMinutes);
+    const offset = `${sign}${pad(Math.floor(absolute / 60))}:${pad(absolute % 60)}`;
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${time}${offset}`;
+}
+/** `Calendar`'ın seçtiği bir günü backend'in beklediği ISO metnine çevirir — `localIso`'nun `Date`-girdili biçimi. */
+function dateToIso(date, endOfDay) {
+    return localIso(date, endOfDay);
+}
+/** ISO metnini (ya da `null`/tanımsız değeri) `Calendar`'ın çalıştığı `Date`'e çevirir — gün sınırına (`startOfDay`) normalize edilir, saat bileşeni Calendar'ı ilgilendirmiyor. */
+function isoToDate(value) {
+    if (typeof value !== 'string' || !value)
+        return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : startOfDay(date);
+}
+function toNode(filter) {
+    if (filter.operator === 'between') {
+        const [from, to] = filter.value ?? [null, null];
+        const conditions = [];
+        if (from)
+            conditions.push({
+                field: filter.field,
+                operator: FilterOperator.GreaterOrEqual,
+                value: from,
+            });
+        if (to)
+            conditions.push({ field: filter.field, operator: FilterOperator.LessOrEqual, value: to });
+        return { logic: FilterLogic.And, conditions };
+    }
+    if (!operatorNeedsValue(filter.operator)) {
+        return { field: filter.field, operator: filter.operator };
+    }
+    // Çoklu seçim: TEK değer kaldıysa `In` yerine `Equal` gönderiyoruz — backend
+    // ikisini de destekliyor ama `Equal` hem sorgu planı hem okunabilirlik için
+    // daha dürüst.
+    if (Array.isArray(filter.value)) {
+        return filter.value.length === 1
+            ? { field: filter.field, operator: FilterOperator.Equal, value: filter.value[0] }
+            : { field: filter.field, operator: FilterOperator.In, value: filter.value };
+    }
+    return { field: filter.field, operator: filter.operator, value: filter.value };
+}
+function isGroup(node) {
+    return 'logic' in node;
+}
+/**
+ * Chip listesini backend'in `FilterGroup` ağacına çevirir. Tarih aralığı
+ * chip'i kendi iç `And` grubunu getirdiği için ağaç derinliği en fazla
+ * 3 olur — tipik backend sınırları (`MaxDepth = 5`, `MaxNodesPerGroup = 25`)
+ * içinde rahat rahat kalıyoruz.
+ */
+function buildFilterGroup(filters, logic) {
+    if (filters.length === 0)
+        return undefined;
+    const nodes = filters.map(toNode);
+    const conditions = nodes.filter((node) => !isGroup(node));
+    const groups = nodes.filter(isGroup).filter((group) => (group.conditions?.length ?? 0) > 0);
+    if (conditions.length === 0 && groups.length === 0)
+        return undefined;
+    // Tek bir alt grup varsa gereksiz sarmalayıcı üretme — payload'ı kanonik
+    // tutuyoruz (backend cache anahtarı ham JSON string'i, bkz. query.model.ts).
+    if (conditions.length === 0 && groups.length === 1)
+        return groups[0];
+    const result = { logic };
+    if (conditions.length)
+        result.conditions = conditions;
+    if (groups.length)
+        result.groups = groups;
+    return result;
+}
+
+/**
+ * Bir filtre kosulunun duzenleyicisi — IKI modda calisir, TEK bilesen:
+ *
+ * - **Ekleme** (`initial` = `null`): iki adim. Once alan arama listesi, alan
+ *   secilince ayni overlay icinde deger adimina gecer.
+ * - **Duzenleme** (`initial` doldurulmus, bkz. `TableFilterBar` — her chip
+ *   kendi overlay'ini bu bilesenle acar): dogrudan deger adimiyla baslar,
+ *   alan sabit kalir (bir filtrenin ALANINI degistirmek olagan disi bir jest
+ *   — kullanici bunun yerine chip'i kaldirip yenisini ekler).
+ *
+ * Onay butonu YOK felsefesi tipe gore farkli uygulanir: `select`/`boolean`
+ * checkbox'i her tik ANINDA `apply` emit eder ve overlay ACIK kalir (coklu
+ * secim dogal akisi — kullanici birden cok kutuyu art arda isaretler).
+ * `text`/`date` bir "taahhut" ani gerektirir (Enter / preset tik / Uygula) —
+ * o anda hem `apply` HEM `closed` emit edilir.
+ */
+class TableFilterMenu {
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    origin = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    open = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Doluysa duzenleme modu (alan sabit, adim='value'); `null` ise ekleme modu (adim='field'). */
+    initial = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    tableLabels = inject(MF_TABLE_LABELS);
+    effectiveLabels = computed(() => this.labels() ?? this.tableLabels().filter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    /** Her zaman TAM bir `AppliedFilter` — ekleme modunda taze `id`, duzenlemede `initial.id` korunur. Ust bilesen (`TableFilterBar`) id'ye gore upsert yapar. */
+    apply = output();
+    /** Kaldirilan filtrenin id'si — checkbox listesi sifir secime inince (ekleme YA DA duzenleme modunda) emit edilir, ust bilesen o id'yi chip listesinden cikarir. */
+    remove = output();
+    closed = output();
+    step = signal('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    fieldQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldQuery" }] : /* istanbul ignore next */ []));
+    fieldHighlighted = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldHighlighted" }] : /* istanbul ignore next */ []));
+    selectedField = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedField" }] : /* istanbul ignore next */ []));
+    operator = signal(FilterOperator.Equal, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operator" }] : /* istanbul ignore next */ []));
+    /** `select`/`boolean` icin HER ZAMAN dizi (uzunluk 0/1/N) — tekil/coklu ayrimi yalnizca `toggleSelection`'da, emit aninda yapilir. */
+    selection = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    textValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    customDateOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customDateOpen" }] : /* istanbul ignore next */ []));
+    dateFrom = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFrom" }] : /* istanbul ignore next */ []));
+    dateTo = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTo" }] : /* istanbul ignore next */ []));
+    /** `'start'` bir sonraki takvim tıklaması `dateFrom`'u YENİDEN başlatır (yeni oturum); `'end'` ikinci ucu belirler. */
+    datePickStage = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datePickStage" }] : /* istanbul ignore next */ []));
+    /** Fare ikinci ucun üzerinde gezinirken önizleme — bkz. `calendar.ts` `hoverEnd`. */
+    dateHoverEnd = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateHoverEnd" }] : /* istanbul ignore next */ []));
+    calendarMonth = signal(startOfMonth(new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarMonth" }] : /* istanbul ignore next */ []));
+    /**
+     * Ekleme modunda `initial()` HER ZAMAN `null` kalir — bu yuzden ayni "ekleme
+     * oturumu" icinde art arda checkbox tiklamalari (bkz. `toggleSelection`)
+     * kendi baslarina birden fazla YENI filtre olustururdu, ayni chip'i
+     * GUNCELLEMEK yerine (gercek bulgu: "Yonetici" + "Editor" iki AYRI chip
+     * olarak beliriyordu). Bu sinyal, bu oturumda uretilen ilk id'yi hatirlayip
+     * sonraki her `emitApply`'de AYNI id'yi kullanmayi saglar — `reset()`
+     * (yeni oturum) ve `selectField()` (farkli bir alana gecis) sifirlar.
+     */
+    draftId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftId" }] : /* istanbul ignore next */ []));
+    fieldSearchEl = viewChild('fieldSearchEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldSearchEl" }] : /* istanbul ignore next */ []));
+    filterableColumns = computed(() => this.columns().filter((c) => !!c.filter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterableColumns" }] : /* istanbul ignore next */ []));
+    filteredColumns = computed(() => {
+        const q = this.fieldQuery().trim().toLocaleLowerCase('tr');
+        const all = this.filterableColumns();
+        if (!q)
+            return all;
+        return all.filter((c) => c.header.toLocaleLowerCase('tr').includes(q));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredColumns" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Overlay her acilista taze baslar — duzenleme modunda `initial`'dan,
+        // ekleme modunda bostan. `open()` bir kez true'ya donduginde okunur;
+        // sonraki her checkbox/metin degisikligi ARTIK kendi sinyallerinde yasar
+        // (bu effect'in tekrar tetiklenip taslagi sifirlamamasi icin `open()`
+        // DISINDA hicbir seye bagimli degil — `untracked` ile korunuyor).
+        effect(() => {
+            if (!this.open())
+                return;
+            untracked(() => this.reset());
+        });
+    }
+    reset() {
+        const init = this.initial();
+        this.fieldQuery.set('');
+        this.fieldHighlighted.set(0);
+        this.customDateOpen.set(false);
+        this.dateFrom.set(null);
+        this.dateTo.set(null);
+        this.datePickStage.set('start');
+        this.dateHoverEnd.set(null);
+        this.calendarMonth.set(startOfMonth(new Date()));
+        if (!init) {
+            this.step.set('field');
+            this.selectedField.set(null);
+            this.selection.set([]);
+            this.textValue.set('');
+            this.draftId.set(null);
+            queueMicrotask(() => this.fieldSearchEl()?.nativeElement.focus());
+            return;
+        }
+        this.step.set('value');
+        this.selectedField.set(init.field);
+        this.operator.set(init.operator);
+        const type = this.filterTypeFor(init.field);
+        if (type === 'select' || type === 'boolean') {
+            this.selection.set(Array.isArray(init.value)
+                ? init.value
+                : init.value === null || init.value === undefined
+                    ? []
+                    : [init.value]);
+        }
+        else if (type === 'date' && init.operator === 'between') {
+            const [from, to] = init.value ?? [null, null];
+            const fromDate = isoToDate(from);
+            const toDate = isoToDate(to);
+            this.dateFrom.set(fromDate);
+            this.dateTo.set(toDate);
+            this.datePickStage.set(fromDate && !toDate ? 'end' : 'start');
+            this.calendarMonth.set(startOfMonth(fromDate ?? new Date()));
+            this.customDateOpen.set(true);
+        }
+        else {
+            this.textValue.set(typeof init.value === 'string' ? init.value : '');
+        }
+    }
+    columnFor(field) {
+        return this.columns().find((c) => c.field === field);
+    }
+    filterTypeFor(field) {
+        return this.columnFor(field)?.filter?.type ?? 'text';
+    }
+    fieldHeader(field) {
+        return this.columnFor(field)?.header ?? field;
+    }
+    /** `cn()` (twMerge) — base `bg-transparent` ve vurgulu `bg-surface-alt` AYNI class dizesinde çakışırsa (düz string birleştirmede olduğu gibi) hangisinin kazanacağı Tailwind'in derleme sırasına kalır; twMerge çakışan `bg-*` çiftini güvenle çözer. */
+    fieldOptionClasses(index) {
+        return cn('flex w-full cursor-pointer appearance-none items-center justify-between gap-2 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', index === this.fieldHighlighted() && 'bg-surface-alt');
+    }
+    operatorOptions() {
+        const field = this.selectedField();
+        if (!field)
+            return [];
+        const column = this.columnFor(field);
+        const type = this.filterTypeFor(field);
+        const operators = column?.filter?.operators ?? OPERATORS_BY_TYPE[type];
+        return operators
+            .filter((op) => op !== 'between')
+            .map((op) => ({ label: operatorLabel(this.effectiveLabels(), op), value: op }));
+    }
+    selectOptions() {
+        const field = this.selectedField();
+        if (!field)
+            return [];
+        return (this.columnFor(field)?.filter?.options ?? []).map((o) => ({
+            label: o.label,
+            value: o.value,
+        }));
+    }
+    isSelected(value) {
+        return this.selection().includes(value);
+    }
+    /** Template'te magic-number karsilastirmasi (`operator() !== 10`) yerine — `IsNull`/`IsNotNull` deger kutusu gostermez. */
+    currentOperatorNeedsValue() {
+        return operatorNeedsValue(this.operator());
+    }
+    onFieldQueryKeydown(event) {
+        const items = this.filteredColumns();
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.fieldHighlighted.update((i) => Math.min(items.length - 1, i + 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.fieldHighlighted.update((i) => Math.max(0, i - 1));
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const item = items[this.fieldHighlighted()];
+            if (item)
+                this.selectField(item.field);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closed.emit();
+        }
+    }
+    selectField(field) {
+        this.selectedField.set(field);
+        const type = this.filterTypeFor(field);
+        this.operator.set(defaultOperatorFor(type));
+        this.selection.set([]);
+        this.textValue.set('');
+        // Farkli bir alana gecis = yeni bir filtre taslagi — onceki alanda
+        // uretilmis olabilecek id'yi TASIMA (bkz. draftId yorumu).
+        this.draftId.set(null);
+        this.step.set('value');
+    }
+    backToField() {
+        this.step.set('field');
+        this.fieldQuery.set('');
+        this.fieldHighlighted.set(0);
+        queueMicrotask(() => this.fieldSearchEl()?.nativeElement.focus());
+    }
+    /** `select`/`boolean` — her tik aninda uygular, overlay ACIK kalir (bkz. sinif yorumu). */
+    toggleSelection(value) {
+        const field = this.selectedField();
+        if (!field)
+            return;
+        const current = this.selection();
+        const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+        this.selection.set(next);
+        if (next.length === 0) {
+            const id = this.initial()?.id ?? this.draftId();
+            if (id)
+                this.remove.emit(id);
+            this.draftId.set(null);
+            return;
+        }
+        const operator = next.length === 1 ? FilterOperator.Equal : FilterOperator.In;
+        const value2 = next.length === 1 ? next[0] : next;
+        this.emitApply(field, operator, value2, false);
+    }
+    onOperatorChange(operator) {
+        if (operator === null)
+            return;
+        this.operator.set(operator);
+        if (!operatorNeedsValue(operator))
+            this.commitText();
+    }
+    onTextInput(raw) {
+        this.textValue.set(raw);
+    }
+    commitText() {
+        const field = this.selectedField();
+        if (!field)
+            return;
+        const operator = this.operator();
+        if (operatorNeedsValue(operator) && !this.textValue().trim())
+            return;
+        this.emitApply(field, operator, operatorNeedsValue(operator) ? this.textValue().trim() : undefined, true);
+    }
+    applyPreset(preset) {
+        const field = this.selectedField();
+        if (!field)
+            return;
+        const range = dateRangeForPreset(preset);
+        this.emitApply(field, 'between', [dateToIso(range.start, false), dateToIso(range.end, true)], true);
+    }
+    openCustomRange() {
+        this.customDateOpen.set(true);
+    }
+    /** İki tıklamalı aralık seçimi — emsal: `date-range-picker.ts` `onDayPick` (aynı mantık, burada tek gömülü takvim). */
+    onCalendarDayPick(day) {
+        if (this.datePickStage() === 'start' || (this.dateFrom() && this.dateTo())) {
+            this.dateFrom.set(day);
+            this.dateTo.set(null);
+            this.datePickStage.set('end');
+            this.dateHoverEnd.set(null);
+            return;
+        }
+        const start = this.dateFrom();
+        if (day < start) {
+            this.dateFrom.set(day);
+            this.dateTo.set(start);
+        }
+        else {
+            this.dateTo.set(day);
+        }
+        this.datePickStage.set('start');
+        this.dateHoverEnd.set(null);
+    }
+    onCalendarDayHover(day) {
+        this.dateHoverEnd.set(day);
+    }
+    commitCustomRange() {
+        const field = this.selectedField();
+        if (!field)
+            return;
+        const from = this.dateFrom();
+        const to = this.dateTo();
+        if (!from && !to)
+            return;
+        this.emitApply(field, 'between', [from ? dateToIso(from, false) : null, to ? dateToIso(to, true) : null], true);
+    }
+    emitApply(field, operator, value, closeAfter) {
+        const id = this.initial()?.id ?? this.draftId() ?? crypto.randomUUID();
+        if (!this.initial() && !this.draftId())
+            this.draftId.set(id);
+        this.apply.emit({ id, field, operator, value });
+        if (closeAfter)
+            this.closed.emit();
+    }
+    close() {
+        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"] }] });
+}
+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" }]
+        }], 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 }] }] } });
+
+/**
+ * Toolbar'ın ALTINDA kalıcı bir satır — uygulanmış filtreler artık ikonun
+ * köşesindeki bir sayı rozetinde değil, doğrudan burada, birer chip olarak
+ * görünür (bkz. plan — kullanıcının onayladığı Linear/Attio dili). Chip'e
+ * tıklamak değerini düzenler, `×` anında kaldırır. `TableFilterMenu` HEM
+ * "+ Filtre" tetikleyicisinde (ekleme, `initial=null`) HEM her chip'te
+ * (düzenleme, `initial=filter`) aynı bileşen — bkz. o dosyanın başındaki not.
+ */
+class TableFilterBar {
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    filters = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    logic = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logic" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    tableLabels = inject(MF_TABLE_LABELS);
+    effectiveLabels = computed(() => this.labels() ?? this.tableLabels().filter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    filtersChange = output();
+    logicChange = output();
+    addOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addOpen" }] : /* istanbul ignore next */ []));
+    editingId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
+    FilterLogic = FilterLogic;
+    filterableColumns = computed(() => this.columns().filter((c) => !!c.filter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterableColumns" }] : /* istanbul ignore next */ []));
+    logicOptions = computed(() => [
+        { label: this.effectiveLabels().and, value: FilterLogic.And },
+        { label: this.effectiveLabels().or, value: FilterLogic.Or },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logicOptions" }] : /* istanbul ignore next */ []));
+    columnFor(field) {
+        return this.columns().find((c) => c.field === field);
+    }
+    fieldHeader(field) {
+        return this.columnFor(field)?.header ?? field;
+    }
+    filterTypeFor(field) {
+        return this.columnFor(field)?.filter?.type ?? 'text';
+    }
+    /**
+     * Chip metni: "Alan: değer" — operatör SADECE o tip için varsayılan
+     * değilse eklenir ("Rol: Yönetici" okunur, "Rol eşittir Yönetici" aynı
+     * bilgiyi taşıyıp gürültü ekler). Çoklu seçimde 3'ten fazla değer
+     * "A, B +2" şeklinde kısaltılır — chip'in kendisi bir özet, tam liste
+     * düzenleyicide zaten görünür.
+     */
+    chipText(filter) {
+        const header = this.fieldHeader(filter.field);
+        const type = this.filterTypeFor(filter.field);
+        const value = this.displayValue(filter, type);
+        if (isDefaultOperator(filter.operator, type))
+            return `${header}: ${value}`;
+        return `${header} ${operatorLabel(this.effectiveLabels(), filter.operator)} ${value}`;
+    }
+    displayValue(filter, type) {
+        if (filter.operator === 'between') {
+            const [from, to] = filter.value ?? [
+                null,
+                null,
+            ];
+            const f = from ? from.slice(0, 10) : '…';
+            const t = to ? to.slice(0, 10) : '…';
+            return `${f} – ${t}`;
+        }
+        if (filter.value === null || filter.value === undefined)
+            return '';
+        const optionLabel = (raw) => {
+            if (type !== 'select' && type !== 'boolean')
+                return String(raw);
+            return (this.columnFor(filter.field)?.filter?.options?.find((o) => o.value === raw)?.label ??
+                String(raw));
+        };
+        if (Array.isArray(filter.value)) {
+            const labels = filter.value.map(optionLabel);
+            if (labels.length <= 2)
+                return labels.join(', ');
+            return `${labels.slice(0, 2).join(', ')} +${labels.length - 2}`;
+        }
+        return optionLabel(filter.value);
+    }
+    onMenuApply(applied) {
+        const current = this.filters();
+        const index = current.findIndex((f) => f.id === applied.id);
+        const next = index === -1 ? [...current, applied] : current.map((f, i) => (i === index ? applied : f));
+        this.filtersChange.emit(next);
+    }
+    removeFilter(id) {
+        this.filtersChange.emit(this.filters().filter((f) => f.id !== id));
+        if (this.editingId() === id)
+            this.editingId.set(null);
+    }
+    onLogicChange(logic) {
+        if (logic === null)
+            return;
+        this.logicChange.emit(logic);
+    }
+    clearAll() {
+        this.filtersChange.emit([]);
+        this.editingId.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableFilterBar, isStandalone: true, selector: "mf-table-filter-bar", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", logicChange: "logicChange" }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-1.5 border-b border-border bg-surface-sunken px-4 py-2\">\r\n  @if (filters().length > 1) {\r\n    <mf-select\r\n      [options]=\"logicOptions()\"\r\n      [value]=\"logic()\"\r\n      (valueChange)=\"onLogicChange($event)\"\r\n      size=\"sm\"\r\n      class=\"w-20\"\r\n    />\r\n  }\r\n\r\n  @for (filter of filters(); track filter.id) {\r\n    <mf-chip\r\n      [removable]=\"true\"\r\n      [removeLabel]=\"effectiveLabels().remove\"\r\n      (removed)=\"removeFilter(filter.id)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #chipOrigin=\"cdkOverlayOrigin\"\r\n        class=\"max-w-[16rem] cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-start transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        (click)=\"editingId.set(filter.id)\"\r\n      >\r\n        {{ chipText(filter) }}\r\n      </button>\r\n    </mf-chip>\r\n    <mf-table-filter-menu\r\n      [columns]=\"columns()\"\r\n      [origin]=\"chipOrigin\"\r\n      [open]=\"editingId() === filter.id\"\r\n      [initial]=\"filter\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (apply)=\"onMenuApply($event)\"\r\n      (remove)=\"removeFilter($event)\"\r\n      (closed)=\"editingId.set(null)\"\r\n    />\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #addOrigin=\"cdkOverlayOrigin\"\r\n    class=\"inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full border border-dashed border-border bg-transparent py-1 pe-2.5 ps-2 text-xs font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:border-border-strong hover:text-fg\"\r\n    (click)=\"addOpen.set(!addOpen())\"\r\n  >\r\n    <span mfIcon [size]=\"14\">add</span>\r\n    {{ effectiveLabels().addFilter }}\r\n  </button>\r\n  <mf-table-filter-menu\r\n    [columns]=\"columns()\"\r\n    [origin]=\"addOrigin\"\r\n    [open]=\"addOpen()\"\r\n    [labels]=\"effectiveLabels()\"\r\n    (apply)=\"onMenuApply($event)\"\r\n    (remove)=\"removeFilter($event)\"\r\n    (closed)=\"addOpen.set(false)\"\r\n  />\r\n\r\n  @if (filters().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ms-auto appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clearAll()\"\r\n    >\r\n      {{ effectiveLabels().clearAll }}\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Chip, selector: "mf-chip", inputs: ["tone", "size", "selected", "disabled", "removable", "removeLabel"], outputs: ["removed"], exportAs: ["mfChip"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { 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: TableFilterMenu, selector: "mf-table-filter-menu", inputs: ["columns", "origin", "open", "initial", "labels"], outputs: ["apply", "remove", "closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-table-filter-bar', host: { class: 'block' }, imports: [OverlayModule, Chip, Icon, Select, TableFilterMenu], template: "<div class=\"flex flex-wrap items-center gap-1.5 border-b border-border bg-surface-sunken px-4 py-2\">\r\n  @if (filters().length > 1) {\r\n    <mf-select\r\n      [options]=\"logicOptions()\"\r\n      [value]=\"logic()\"\r\n      (valueChange)=\"onLogicChange($event)\"\r\n      size=\"sm\"\r\n      class=\"w-20\"\r\n    />\r\n  }\r\n\r\n  @for (filter of filters(); track filter.id) {\r\n    <mf-chip\r\n      [removable]=\"true\"\r\n      [removeLabel]=\"effectiveLabels().remove\"\r\n      (removed)=\"removeFilter(filter.id)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #chipOrigin=\"cdkOverlayOrigin\"\r\n        class=\"max-w-[16rem] cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-start transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        (click)=\"editingId.set(filter.id)\"\r\n      >\r\n        {{ chipText(filter) }}\r\n      </button>\r\n    </mf-chip>\r\n    <mf-table-filter-menu\r\n      [columns]=\"columns()\"\r\n      [origin]=\"chipOrigin\"\r\n      [open]=\"editingId() === filter.id\"\r\n      [initial]=\"filter\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (apply)=\"onMenuApply($event)\"\r\n      (remove)=\"removeFilter($event)\"\r\n      (closed)=\"editingId.set(null)\"\r\n    />\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #addOrigin=\"cdkOverlayOrigin\"\r\n    class=\"inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full border border-dashed border-border bg-transparent py-1 pe-2.5 ps-2 text-xs font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:border-border-strong hover:text-fg\"\r\n    (click)=\"addOpen.set(!addOpen())\"\r\n  >\r\n    <span mfIcon [size]=\"14\">add</span>\r\n    {{ effectiveLabels().addFilter }}\r\n  </button>\r\n  <mf-table-filter-menu\r\n    [columns]=\"columns()\"\r\n    [origin]=\"addOrigin\"\r\n    [open]=\"addOpen()\"\r\n    [labels]=\"effectiveLabels()\"\r\n    (apply)=\"onMenuApply($event)\"\r\n    (remove)=\"removeFilter($event)\"\r\n    (closed)=\"addOpen.set(false)\"\r\n  />\r\n\r\n  @if (filters().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ms-auto appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clearAll()\"\r\n    >\r\n      {{ effectiveLabels().clearAll }}\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
+
+/**
+ * Sayfalamadaki tıklanabilir "…" için küçük bir sayfaya-git popover'ı —
+ * panel iskeleti `Popover`'a devredildi (bkz. plan Faz 1c) — kendi
+ * `[origin]`/`[open]` input'ları, `(apply)`/`(closed)` output'ları aynı
+ * kaldı, sadece CDK connected overlay/backdrop/ESC/animasyon artık
+ * `Popover`'ın işi. Onay YALNIZCA submit'te (Enter / Git) — her tuş
+ * vuruşunda backend'e istek atmaz (bkz. plan, rate limit notu).
+ */
+class TablePageJump {
+    origin = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    open = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    tableLabels = inject(MF_TABLE_LABELS);
+    effectiveLabels = computed(() => this.labels() ?? this.tableLabels().pagination, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    apply = output();
+    closed = output();
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueEl = viewChild('valueEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueEl" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Overlay her açılışta taze başlar — bkz. table-filter-menu.ts'teki aynı desen.
+        effect(() => {
+            if (!this.open())
+                return;
+            untracked(() => {
+                this.value.set('');
+                queueMicrotask(() => this.valueEl()?.nativeElement.focus());
+            });
+        });
+    }
+    onValueInput(raw) {
+        this.value.set(raw);
+    }
+    commit() {
+        const parsed = Number(this.value());
+        if (!Number.isInteger(parsed) || parsed < 1 || parsed > this.totalPages())
+            return;
+        this.apply.emit(parsed);
+    }
+    close() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePageJump, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TablePageJump, isStandalone: true, selector: "mf-table-page-jump", inputs: { origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom\"\r\n  padding=\"md\"\r\n  panelClass=\"w-44\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1.5 px-0.5 text-eyebrow text-fg-subtle\">{{ effectiveLabels().jumpToPage }}</p>\r\n  <div class=\"flex items-center gap-1.5\">\r\n    <input\r\n      mfInput\r\n      #valueEl\r\n      type=\"number\"\r\n      class=\"text-sm\"\r\n      min=\"1\"\r\n      [max]=\"totalPages()\"\r\n      [placeholder]=\"'1\u2013' + totalPages()\"\r\n      [value]=\"value()\"\r\n      (input)=\"onValueInput($any($event.target).value)\"\r\n      (keydown.enter)=\"commit()\"\r\n    />\r\n    <button mfButton tone=\"primary\" appearance=\"filled\" size=\"sm\" type=\"button\" (click)=\"commit()\">\r\n      {{ effectiveLabels().go }}\r\n    </button>\r\n  </div>\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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePageJump, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-table-page-jump', imports: [Button, Input, Popover], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom\"\r\n  padding=\"md\"\r\n  panelClass=\"w-44\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1.5 px-0.5 text-eyebrow text-fg-subtle\">{{ effectiveLabels().jumpToPage }}</p>\r\n  <div class=\"flex items-center gap-1.5\">\r\n    <input\r\n      mfInput\r\n      #valueEl\r\n      type=\"number\"\r\n      class=\"text-sm\"\r\n      min=\"1\"\r\n      [max]=\"totalPages()\"\r\n      [placeholder]=\"'1\u2013' + totalPages()\"\r\n      [value]=\"value()\"\r\n      (input)=\"onValueInput($any($event.target).value)\"\r\n      (keydown.enter)=\"commit()\"\r\n    />\r\n    <button mfButton tone=\"primary\" appearance=\"filled\" size=\"sm\" type=\"button\" (click)=\"commit()\">\r\n      {{ effectiveLabels().go }}\r\n    </button>\r\n  </div>\r\n</mf-popover>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], closed: [{ type: i0.Output, args: ["closed"] }], valueEl: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
+
+/** GitHub PR listesi tarzı akıllı elips: toplam ≤7 sayfa tümü gösterilir, aksi halde 1, 2, current±1, son-1, son sabit + boşluklar elipsli. */
+function buildPageList(current, total) {
+    if (total <= 7)
+        return Array.from({ length: total }, (_, i) => i + 1);
+    const keep = new Set([1, 2, total - 1, total, current - 1, current, current + 1]);
+    const sorted = [...keep].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+    const result = [];
+    let previous = 0;
+    for (const page of sorted) {
+        if (previous && page - previous > 1)
+            result.push('ellipsis');
+        result.push(page);
+        previous = page;
+    }
+    return result;
+}
+/**
+ * Her hücre AYNI dili konuşuyor: kendi `rounded-md` hit alanına sahip,
+ * tek bir `focus-visible` mekanizmalı, bağımsız bir buton (bkz.
+ * projects/ui-kit/README.md "Focus — tek mekanizma"). `h-9 w-9` mobilde dört okun
+ * da 36px dokunma hedefi olmasını sağlıyor; `sm:h-8 sm:min-w-8` masaüstünde
+ * yandaki `mf-select size="sm"` ile hizalanıyor (`select.variants.ts`).
+ */
+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 ' +
+    'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100';
+/**
+ * Table'ın footer'ı — sol "X–Y / toplam Z" özet + sayfa-boyutu `Select`i,
+ * sağda AYRIK/havadar bir gezinme grubu: ⏮ ‹ · numaralar · › ⏭. Eskiden
+ * tek kenarlıklı bir segment grubuydu (bkz. git geçmişi) — artık dış çerçeve
+ * yok, her hücre kendi bağımsız butonu. Aktif sayfa dolu yeşil blok DEĞİL,
+ * `surface-alt` yüzey + alt kenarda **ray** — bu tasarım sisteminin
+ * "buradasın" motifi (sidebar aktif öğe, aktif sekme, seçili tablo satırı ile
+ * aynı dil).
+ */
+class TablePagination {
+    page = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSize = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    total = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([10, 20, 50, 100], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    tableLabels = inject(MF_TABLE_LABELS);
+    effectiveLabels = computed(() => this.labels() ?? this.tableLabels().pagination, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    pageChange = output();
+    pageSizeChange = output();
+    totalPages = computed(() => Math.max(1, Math.ceil(this.total() / this.pageSize())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    rangeStart = computed(() => this.total() === 0 ? 0 : (this.page() - 1) * this.pageSize() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => Math.min(this.page() * this.pageSize(), this.total()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    pageItems = computed(() => buildPageList(this.page(), this.totalPages()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []));
+    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((size) => ({ label: String(size), value: size })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : /* istanbul ignore next */ []));
+    /** Aynı anda iki "…" olabilir (baştaki + sondaki) — açık olanın loop index'i, `null` = hiçbiri açık değil. */
+    jumpOpenIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "jumpOpenIndex" }] : /* istanbul ignore next */ []));
+    navEl = viewChild('nav', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navEl" }] : /* istanbul ignore next */ []));
+    /** Signal DEĞİL — sadece odağın şu an `<nav>` içinde olup olmadığını izleyen düz bir bayrak (bkz. constructor'daki geri-odaklama notu). */
+    focusWithinNav = false;
+    constructor() {
+        /*
+         * Ok tuşlarıyla ardışık gezinme: sayfa değişince o anki `[aria-current]`
+         * butonu DOM'dan kalkabiliyor (pencere current±1'e göre kayıyor), odak
+         * `<body>`'ye düşüyor ve bir sonraki ok tuşu artık `<nav>`'a ulaşmıyordu
+         * (gerçek bulgu). Odak `<nav>` içindeyken her sayfa değişiminden sonra
+         * yeni aktif sayfa butonuna (mobilde numaralar gizliyse `<nav>`'ın
+         * kendisine) geri veriliyor.
+         */
+        afterRenderEffect(() => {
+            this.page();
+            if (!this.focusWithinNav)
+                return;
+            const nav = this.navEl()?.nativeElement;
+            if (!nav || nav.contains(document.activeElement))
+                return;
+            const activeBtn = nav.querySelector('[aria-current="page"]');
+            (activeBtn ?? nav).focus();
+        });
+    }
+    goTo(page) {
+        if (page < 1 || page > this.totalPages() || page === this.page())
+            return;
+        this.pageChange.emit(page);
+    }
+    onPageSizeChange(size) {
+        if (size === null)
+            return;
+        this.pageSizeChange.emit(size);
+    }
+    cellClasses(active) {
+        return cn(CELL_BASE, active
+            ? 'bg-surface-alt text-fg font-semibold'
+            : 'text-fg-muted hover:bg-surface-alt 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
+        // kurtarıyor — ray düz kenarda kalıyor.
+        active &&
+            "after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full after:bg-accent-fill after:content-['']");
+    }
+    onNavKeydown(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.goTo(this.page() - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.goTo(this.page() + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.totalPages());
+                break;
+        }
+    }
+    onNavFocusIn() {
+        this.focusWithinNav = true;
+    }
+    onNavFocusOut() {
+        this.focusWithinNav = false;
+    }
+    toggleJump(index) {
+        this.jumpOpenIndex.update((current) => (current === index ? null : index));
+    }
+    onJumpApply(page) {
+        this.jumpOpenIndex.set(null);
+        this.goTo(page);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TablePagination, isStandalone: true, selector: "mf-table-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "navEl", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\">\r\n  <div class=\"flex items-center gap-2 text-sm text-fg-subtle\">\r\n    <span class=\"tabular-nums\"\r\n      >{{ rangeStart() }}\u2013{{ rangeEnd() }} / {{ total() }} {{ effectiveLabels().records }}</span\r\n    >\r\n    <span class=\"text-fg-subtle\">{{ effectiveLabels().perPage }}</span>\r\n    <mf-select\r\n      [options]=\"pageSizeSelectOptions()\"\r\n      [value]=\"pageSize()\"\r\n      (valueChange)=\"onPageSizeChange($event)\"\r\n      size=\"sm\"\r\n      [ariaLabel]=\"effectiveLabels().pageSizeAriaLabel\"\r\n      class=\"w-20\"\r\n    />\r\n  </div>\r\n\r\n  <nav\r\n    #nav\r\n    tabindex=\"-1\"\r\n    class=\"flex shrink-0 flex-nowrap items-center gap-1.5 outline-none\"\r\n    [attr.aria-label]=\"effectiveLabels().navAriaLabel\"\r\n    (keydown)=\"onNavKeydown($event)\"\r\n    (focusin)=\"onNavFocusIn()\"\r\n    (focusout)=\"onNavFocusOut()\"\r\n  >\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().first\"\r\n        (click)=\"goTo(1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().previous\"\r\n        (click)=\"goTo(page() - 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"hidden items-center gap-0.5 sm:flex\">\r\n      @for (item of pageItems(); track $index) {\r\n        @if (item === 'ellipsis') {\r\n          <button\r\n            type=\"button\"\r\n            cdkOverlayOrigin\r\n            #jumpOrigin=\"cdkOverlayOrigin\"\r\n            [class]=\"cellClasses(false)\"\r\n            [attr.aria-label]=\"effectiveLabels().jumpToPage\"\r\n            (click)=\"toggleJump($index)\"\r\n          >\r\n            \u2026\r\n          </button>\r\n          <mf-table-page-jump\r\n            [origin]=\"jumpOrigin\"\r\n            [open]=\"jumpOpenIndex() === $index\"\r\n            [totalPages]=\"totalPages()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (apply)=\"onJumpApply($event)\"\r\n            (closed)=\"jumpOpenIndex.set(null)\"\r\n          />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(item === page())\"\r\n            [attr.aria-current]=\"item === page() ? 'page' : null\"\r\n            (click)=\"goTo(item)\"\r\n          >\r\n            {{ item }}\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"flex h-9 shrink-0 items-center px-3 text-sm tabular-nums text-fg-muted sm:hidden\">\r\n      {{ effectiveLabels().page }} {{ page() }} / {{ totalPages() }}\r\n    </span>\r\n\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().next\"\r\n        (click)=\"goTo(page() + 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().last\"\r\n        (click)=\"goTo(totalPages())\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TablePageJump, selector: "mf-table-page-jump", inputs: ["origin", "open", "totalPages", "labels"], outputs: ["apply", "closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-table-pagination', host: { class: 'block' }, imports: [Select, Icon, OverlayModule, TablePageJump], template: "<div class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\">\r\n  <div class=\"flex items-center gap-2 text-sm text-fg-subtle\">\r\n    <span class=\"tabular-nums\"\r\n      >{{ rangeStart() }}\u2013{{ rangeEnd() }} / {{ total() }} {{ effectiveLabels().records }}</span\r\n    >\r\n    <span class=\"text-fg-subtle\">{{ effectiveLabels().perPage }}</span>\r\n    <mf-select\r\n      [options]=\"pageSizeSelectOptions()\"\r\n      [value]=\"pageSize()\"\r\n      (valueChange)=\"onPageSizeChange($event)\"\r\n      size=\"sm\"\r\n      [ariaLabel]=\"effectiveLabels().pageSizeAriaLabel\"\r\n      class=\"w-20\"\r\n    />\r\n  </div>\r\n\r\n  <nav\r\n    #nav\r\n    tabindex=\"-1\"\r\n    class=\"flex shrink-0 flex-nowrap items-center gap-1.5 outline-none\"\r\n    [attr.aria-label]=\"effectiveLabels().navAriaLabel\"\r\n    (keydown)=\"onNavKeydown($event)\"\r\n    (focusin)=\"onNavFocusIn()\"\r\n    (focusout)=\"onNavFocusOut()\"\r\n  >\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().first\"\r\n        (click)=\"goTo(1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().previous\"\r\n        (click)=\"goTo(page() - 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"hidden items-center gap-0.5 sm:flex\">\r\n      @for (item of pageItems(); track $index) {\r\n        @if (item === 'ellipsis') {\r\n          <button\r\n            type=\"button\"\r\n            cdkOverlayOrigin\r\n            #jumpOrigin=\"cdkOverlayOrigin\"\r\n            [class]=\"cellClasses(false)\"\r\n            [attr.aria-label]=\"effectiveLabels().jumpToPage\"\r\n            (click)=\"toggleJump($index)\"\r\n          >\r\n            \u2026\r\n          </button>\r\n          <mf-table-page-jump\r\n            [origin]=\"jumpOrigin\"\r\n            [open]=\"jumpOpenIndex() === $index\"\r\n            [totalPages]=\"totalPages()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (apply)=\"onJumpApply($event)\"\r\n            (closed)=\"jumpOpenIndex.set(null)\"\r\n          />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(item === page())\"\r\n            [attr.aria-current]=\"item === page() ? 'page' : null\"\r\n            (click)=\"goTo(item)\"\r\n          >\r\n            {{ item }}\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"flex h-9 shrink-0 items-center px-3 text-sm tabular-nums text-fg-muted sm:hidden\">\r\n      {{ effectiveLabels().page }} {{ page() }} / {{ totalPages() }}\r\n    </span>\r\n\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().next\"\r\n        (click)=\"goTo(page() + 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().last\"\r\n        (click)=\"goTo(totalPages())\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], navEl: [{ type: i0.ViewChild, args: ['nav', { isSignal: true }] }] } });
+
+/**
+ * Sabit satır yüksekliğiyle pencereleme — görünür aralık ± `overscan` satır. Saf fonksiyon;
+ * `Table`'ın `virtual` modu bunu `scrollTop`/görünüm yüksekliği sinyalleriyle çağırır.
+ * `<cdk-virtual-scroll-viewport>` yerine: tablo `<tr>`'leri bir viewport sarmalayıcısına
+ * girince yapışkan başlık, `border-collapse` ve `colspan`'lı boş durum satırı bozuluyordu;
+ * boşluk satırı (`<tr><td [style.height]>`) yaklaşımı tablo semantiğini aynen korur.
+ */
+function virtualWindow(total, scrollTop, viewportHeight, rowHeight, overscan = 8) {
+    if (total === 0 || rowHeight <= 0)
+        return { start: 0, end: 0, top: 0, bottom: 0 };
+    const first = Math.floor(Math.max(0, scrollTop) / rowHeight);
+    const visible = Math.ceil(Math.max(0, viewportHeight) / rowHeight);
+    const start = Math.min(total, Math.max(0, first - overscan));
+    const end = Math.min(total, first + visible + overscan);
+    return { start, end, top: start * rowHeight, bottom: (total - end) * rowHeight };
+}
+
+/** Seçim/genişletme kolonlarının sabit genişliği (`w-10`) ve aksiyon kolonu (`w-20`), px. */
+const LEADING_COL_PX = 40;
+const ACTIONS_COL_PX = 80;
+const FALLBACK_COL_PX = 160;
+/** Ölçülemeyen ortamda (SSR/jsdom) varsayılan satır yüksekliği — `bodyCellPad` ile uyumlu. */
+const FALLBACK_ROW_PX = { comfortable: 57, compact: 45 };
+let tableIdSeq = 0;
+function sameRecord(a, b) {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}
+/**
+ * Bu kitin premium data-table'ı.
+ *
+ * İKİ satırlık üst yapı:
+ * 1. **Toolbar** — başlık + kayıt sayacı · her zaman açık arama (bir veri
+ *    tablosunda arama gizlenmez, bu bir navbar deseni) · Kolonlar/Yoğunluk
+ *    ikon kümesi · `[tableActions]` slotu (sayfanın GERÇEK aksiyonu, tek dolu
+ *    buton — Kolonlar/Yoğunluk kasıtlı olarak hayalet kalır, göz doğru yere
+ *    gitsin diye). Seçim modunda DA aynı kalır — eskiden seçim toolbar'ın
+ *    TAMAMINI yok ediyordu (gerçek bug, kullanıcı arama/filtre bağlamını
+ *    kaybediyordu).
+ * 2. **Filtre/seçim şeridi** — filtrelenebilir kolon varsa HER ZAMAN görünür
+ *    (`TableFilterBar`, chip + "+ Filtre" komut menüsü — bkz. o dosya). Bir
+ *    satır seçilince bu şerit YERİNİ seçim aksiyonlarına bırakır (toolbar'ı
+ *    değil) — sağda "N filtre" rozeti filtre bağlamının kaybolmadığını
+ *    gösterir.
+ *
+ * `[clientSide]="true"` verildiğinde Table gelen TAM diziyi kendisi
+ * filtreler/sıralar/sayfalar (bkz. table-client-query.ts) ve `queryChange`
+ * emit ETMEZ — backend'i sayfalanmayan uçlar için (tüketici artık kendi
+ * `sortedRows`/`rows`/`total` boilerplate'ini yazmak zorunda kalmaz).
+ */
+class Table {
+    /** Template'te `[class]="cn(...)"` ile koşullu class birleştirmek için. */
+    cn = cn;
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Sunucu modunda SADECE geçerli sayfa; `[clientSide]="true"` modunda TAM dizi (bkz. sınıf yorumu). */
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    rowKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Sunucu modunda zorunlu (toplam kayıt). `clientSide` modunda YOK SAYILIR — toplam `data().length`'ten türetilir. */
+    total = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([10, 20, 50, 100], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    selectable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    searchable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    stickyHeader = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    /** `compact` yoğun listeler için satır başına dikey boşluğu daraltır. `model()` — toolbar'daki düğme TOGGLE eder, ama ekran isterse `[(density)]` ile de kontrol edebilir. */
+    density = model('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    rowActions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+    /** true ise Table gelen `data()`'yı TAM liste sayar, kendi içinde filtreler/sıralar/sayfalar; `queryChange` emit edilmez (bkz. sınıf yorumu). */
+    clientSide = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientSide" }] : /* istanbul ignore next */ []));
+    /**
+     * Başlık kenarlarında sürükleme tutamacı (klavye: ←/→, çift tık/Enter: içeriğe sığdır).
+     * İlk boyutlandırmada tüm görünür kolonların ölçülen genişliği dondurulur ve tablo
+     * `table-layout: fixed`e geçer — aksi halde otomatik düzen, sürüklenen kolonun
+     * kazandığını komşulardan geri alıp tutamacı imlecin altından kaçırıyordu.
+     */
+    resizableColumns = input(false, { ...(ngDevMode ? { debugName: "resizableColumns" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Kolon genişlikleri (px, `field` → genişlik). `[(columnWidths)]` ile kalıcılaştırılabilir. */
+    columnWidths = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    /**
+     * Verilirse her satırın başında bir aç/kapa düğmesi çıkar; açık satırın altında bu şablon
+     * tam genişlikte render edilir (context: `{ $implicit: row }`). `virtual` ile birlikte
+     * KULLANILMAZ — değişken yükseklikli satır sabit satır yüksekliği varsayımını bozar.
+     */
+    expandedRowTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "expandedRowTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Sayfalama yerine sanal kaydırma: TÜM satırlar tek listede, yalnızca görünen aralık
+     * (± 8 satır) DOM'da. Başlık yapışkan, `aria-rowcount`/`aria-rowindex` tam listeyi
+     * duyurur. Binlerce satırlık `clientSide` listeler için.
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `virtual` modunda kaydırma alanının yüksekliği (CSS uzunluğu). */
+    virtualHeight = input('32rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Table'ın TÜM chrome metinleri (arama placeholder'ı, boş/sonuç-yok
+     * durumları, satır aksiyonları, yoğunluk düğmesi, filtre çubuğu + sayfalama
+     * dahil — `filter`/`pagination` iç içe alt-alanlar) TEK bir grup input —
+     * eskiden 16 ayrı `input()` + `filterLabels`/`paginationLabels` idi (bkz.
+     * git geçmişi); `DeepPartial` olduğu için sadece değiştirmek istediğin
+     * alanı geçebilirsin, kalanı `MF_TABLE_LABELS`'tan (bkz.
+     * `provideMesgflowUi`) gelir.
+     */
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    tableLabelsToken = inject(MF_TABLE_LABELS);
+    effectiveLabels = computed(() => mergeLabels(this.tableLabelsToken(), this.labels()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    queryChange = output();
+    selectionChange = output();
+    edit = output();
+    delete = output();
+    rowDblClick = output();
+    /** Bir satır açıldı/kapandı — ayrıntıyı tembel yüklemek için. */
+    rowExpandedChange = output();
+    host = inject(ElementRef);
+    scroller = viewChild.required('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    idPrefix = `mf-table-${++tableIdSeq}`;
+    pageState = signal({
+        pageNumber: 1,
+        pageSize: DEFAULT_PAGE_SIZE,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    sortState = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    appliedFilters = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedFilters" }] : /* istanbul ignore next */ []));
+    filterLogic = signal(FilterLogic.And, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterLogic" }] : /* istanbul ignore next */ []));
+    selectedRows = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+    hiddenColumns = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    columnsMenuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsMenuOpen" }] : /* istanbul ignore next */ []));
+    FilterLogic = FilterLogic;
+    /** Sabitlenen kolonlar (`pinned: 'left'`) verildikleri sırayla öne alınır. */
+    visibleColumns = computed(() => {
+        const visible = this.columns().filter((c) => !this.hiddenColumns().has(c.field));
+        return [
+            ...visible.filter((c) => c.pinned === 'left'),
+            ...visible.filter((c) => c.pinned !== 'left'),
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    hasPinned = computed(() => this.visibleColumns().some((c) => c.pinned === 'left'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPinned" }] : /* istanbul ignore next */ []));
+    /** Sabit bölgenin sağ kenarı — ayırıcı gölge bu hücrede. Sabit kolon yoksa `null`. */
+    lastPinnedKey = computed(() => this.visibleColumns()
+        .filter((c) => c.pinned === 'left')
+        .at(-1)?.field ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastPinnedKey" }] : /* istanbul ignore next */ []));
+    /** Ölçülen satır-başı ofsetleri (px, `inset-inline-start`) — anahtar: `field`, `__expand`, `__select`. */
+    pinOffsets = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinOffsets" }] : /* istanbul ignore next */ []));
+    /** Başlık hücrelerinin ölçülen genişliği — tutamacın `aria-valuenow`u dondurulmadan önce buradan. */
+    measuredWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredWidths" }] : /* istanbul ignore next */ []));
+    expandable = computed(() => !!this.expandedRowTemplate() && !this.virtual(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    expandedKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    fixedLayout = computed(() => Object.keys(this.columnWidths()).length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fixedLayout" }] : /* istanbul ignore next */ []));
+    /** Sabit düzende tablonun toplam genişliği — kolonlar kapsayıcıdan genişse yatay kaydırma doğar. */
+    tableWidth = computed(() => {
+        if (!this.fixedLayout())
+            return null;
+        const widths = this.columnWidths();
+        const columns = this.visibleColumns().reduce((sum, col) => sum + (widths[col.field] ?? FALLBACK_COL_PX), 0);
+        const leading = (this.selectable() ? LEADING_COL_PX : 0) + (this.expandable() ? LEADING_COL_PX : 0);
+        return columns + leading + (this.hasRowActions() ? ACTIONS_COL_PX : 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableWidth" }] : /* istanbul ignore next */ []));
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    viewportHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Kaydırma alanının görünür genişliği — ayrıntı satırı içeriği yatay kaydırmada bu genişlikte sabit kalır. */
+    viewportWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    measuredRowHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowHeight" }] : /* istanbul ignore next */ []));
+    /** Tablo/kapsayıcı yeniden boyutlandığında sabit kolon ofsetleri yeniden ölçülür. */
+    layoutTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutTick" }] : /* istanbul ignore next */ []));
+    hasFilterableColumns = computed(() => this.columns().some((c) => c.filter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFilterableColumns" }] : /* istanbul ignore next */ []));
+    activeFilterCount = computed(() => this.appliedFilters().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : /* istanbul ignore next */ []));
+    isFiltered = computed(() => !!this.searchTerm().trim() || this.appliedFilters().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFiltered" }] : /* istanbul ignore next */ []));
+    hasRowActions = computed(() => !!(this.rowActions().edit || this.rowActions().delete), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRowActions" }] : /* istanbul ignore next */ []));
+    columnSpan = computed(() => this.visibleColumns().length +
+        (this.selectable() ? 1 : 0) +
+        (this.expandable() ? 1 : 0) +
+        (this.hasRowActions() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnSpan" }] : /* istanbul ignore next */ []));
+    /** `clientSide` modunda `data()` TAM listedir — burada filtrelenip/sıralanıp/sayfalanır (bkz. table-client-query.ts). Sunucu modunda kullanılmaz. */
+    clientResult = computed(() => {
+        const rows = this.data();
+        const filtered = this.isFiltered()
+            ? rows.filter((row) => matchesFilterGroup(row, this.buildFilter()))
+            : [...rows];
+        const sorted = sortRows(filtered, this.sortState());
+        if (this.virtual())
+            return { items: sorted, total: filtered.length };
+        const { pageNumber, pageSize } = this.pageState();
+        const start = (pageNumber - 1) * pageSize;
+        return { items: sorted.slice(start, start + pageSize), total: filtered.length };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientResult" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.clientSide() ? this.clientResult().items : this.data(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    rowsTotal = computed(() => this.clientSide() ? this.clientResult().total : this.total(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowsTotal" }] : /* istanbul ignore next */ []));
+    /** `virtual` modunda görünen aralık; değilse `null` (tüm `rows()` render edilir). */
+    virtualRange = computed(() => {
+        if (!this.virtual())
+            return null;
+        const rowHeight = this.measuredRowHeight() || FALLBACK_ROW_PX[this.density()];
+        return virtualWindow(this.rows().length, this.scrollTop(), this.viewportHeight() || 600, rowHeight);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualRange" }] : /* istanbul ignore next */ []));
+    displayRows = computed(() => {
+        const range = this.virtualRange();
+        return range ? this.rows().slice(range.start, range.end) : this.rows();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayRows" }] : /* istanbul ignore next */ []));
+    rowIndexOffset = computed(() => this.virtualRange()?.start ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndexOffset" }] : /* istanbul ignore next */ []));
+    isStickyHeader = computed(() => this.stickyHeader() || this.virtual(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStickyHeader" }] : /* istanbul ignore next */ []));
+    skeletonIndexes = computed(() => Array.from({ length: Math.min(this.pageState().pageSize, 8) }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonIndexes" }] : /* istanbul ignore next */ []));
+    /** `overflow-x-auto` HER ZAMAN gerekli (dar viewport'ta yatay kaydırma olmadan tablo taşıp sağdaki satır aksiyonlarını görünmez kılıyordu). `stickyHeader` ek olarak dikey kaydırma+sabit başlık ekliyor. */
+    scrollWrapperClasses = computed(() => cn('overflow-x-auto', this.virtual() && 'overflow-y-auto overscroll-contain', this.stickyHeader() && !this.virtual() && 'max-h-[28rem] overflow-y-auto'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollWrapperClasses" }] : /* istanbul ignore next */ []));
+    /*
+     * `compact` eskiden `py-2`/`py-2`ydi — `comfortable`'a (py-2.5/py-3) çok
+     * yakın durduğundan geçiş neredeyse fark edilmiyordu (gerçek kullanıcı
+     * bulgusu: "1px anca oynuyor, sık gibi durmuyor"). Fark artık satır
+     * başına ~16px'e çıkarıldı (60px → ~45px) — ikon/checkbox boyutları
+     * (18-20px) hâlâ rahat sığıyor, taşma/kırpılma YOK (bkz. dev sunucuda
+     * canlı ölçüm).
+     */
+    headerCellPad = computed(() => this.density() === 'compact' ? 'py-1.5' : 'py-2.5', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCellPad" }] : /* istanbul ignore next */ []));
+    bodyCellPad = computed(() => (this.density() === 'compact' ? 'py-1' : 'py-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyCellPad" }] : /* istanbul ignore next */ []));
+    allChecked = computed(() => {
+        const rows = this.rows();
+        return rows.length > 0 && rows.every((row) => this.selectedRows().has(row[this.rowKey()]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allChecked" }] : /* istanbul ignore next */ []));
+    indeterminate = computed(() => this.selectedRows().size > 0 && !this.allChecked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    selectedCount = computed(() => this.selectedRows().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    /** İlk yüklemede satır yoksa iskelet gösterilir. Sonraki her sorguda (arama/filtre/sayfa) satırlar YERİNDE kalır, sadece soluklaşır — eskiden HER sorguda tüm tablo iskelete dönüp "yanıp sönüyordu" (gerçek bulgu). */
+    showSkeleton = computed(() => this.loading() && this.rows().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSkeleton" }] : /* istanbul ignore next */ []));
+    showStaleOverlay = computed(() => this.loading() && this.rows().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStaleOverlay" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sayfa/sıralama/filtre değişince `rows()` yeni bir referans alır —
+        // önceki seçim artık görünürdeki satırlarla eşleşmeyebileceğinden temizlenir.
+        effect(() => {
+            this.rows();
+            untracked(() => {
+                this.selectedRows.set(new Map());
+                // Yeni sonuç kümesi (arama/filtre/sıralama) — sanal listede eski kaydırma konumu anlamsız.
+                if (this.virtual() && this.scrollTop() !== 0) {
+                    this.scroller().nativeElement.scrollTop = 0;
+                    this.scrollTop.set(0);
+                }
+            });
+        });
+        // Ölçüm: sabit kolon ofsetleri + sanal satır yüksekliği. Değer değişmedikçe yazılmaz
+        // (render → ölçüm → set → render döngüsü tek turda durulur).
+        afterRenderEffect({
+            read: () => {
+                this.visibleColumns();
+                this.columnWidths();
+                this.density();
+                this.layoutTick();
+                this.displayRows();
+                const root = this.host.nativeElement;
+                if (this.hasPinned()) {
+                    const next = {};
+                    const rtl = isRtl(root);
+                    root.querySelectorAll('thead th[data-pin]').forEach((th) => {
+                        // Satır başından uzaklık — RTL'de sağ kenardan (sabit kolonlar sağa yapışır).
+                        const table = th.offsetParent;
+                        next[th.dataset['pin']] = rtl
+                            ? (table?.offsetWidth ?? 0) - th.offsetLeft - th.offsetWidth
+                            : th.offsetLeft;
+                    });
+                    if (!sameRecord(next, untracked(this.pinOffsets)))
+                        this.pinOffsets.set(next);
+                }
+                if (this.resizableColumns()) {
+                    const widths = {};
+                    root.querySelectorAll('thead th[data-col]').forEach((th) => {
+                        widths[th.dataset['col']] = Math.round(th.getBoundingClientRect().width);
+                    });
+                    if (!sameRecord(widths, untracked(this.measuredWidths)))
+                        this.measuredWidths.set(widths);
+                }
+                if (this.virtual()) {
+                    const row = root.querySelector('tbody tr[data-row]');
+                    const height = row?.getBoundingClientRect().height ?? 0;
+                    if (height > 0 && Math.abs(height - untracked(this.measuredRowHeight)) > 0.5)
+                        this.measuredRowHeight.set(height);
+                }
+            },
+        });
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const scroller = this.scroller().nativeElement;
+            const observer = new ResizeObserver(() => {
+                this.viewportHeight.set(scroller.clientHeight);
+                this.viewportWidth.set(scroller.clientWidth);
+                this.layoutTick.update((tick) => tick + 1);
+            });
+            observer.observe(scroller);
+            const table = scroller.querySelector('table');
+            if (table)
+                observer.observe(table);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    onScroll(event) {
+        if (!this.virtual())
+            return;
+        this.scrollTop.set(event.target.scrollTop);
+    }
+    // ---- Kolon genişliği ----
+    widthStyle(col) {
+        const px = this.columnWidths()[col.field];
+        return px ? `${px}px` : (col.width ?? null);
+    }
+    /** Tutamacın `aria-valuenow`u: kaydedilmiş > ölçülen > alt sınır. */
+    currentWidth(col) {
+        return (this.columnWidths()[col.field] || this.measuredWidths()[col.field] || (col.minWidth ?? 80));
+    }
+    isResizable(col) {
+        return this.resizableColumns() && col.resizable !== false;
+    }
+    resizeAriaLabel(col) {
+        return `${this.effectiveLabels().resizeColumn}: ${col.header}`;
+    }
+    /** Henüz genişliği kaydedilmemiş görünür kolonları ölçülen genişlikte dondurur. */
+    freezeWidths() {
+        const current = { ...this.columnWidths() };
+        let changed = false;
+        this.host.nativeElement.querySelectorAll('thead th[data-col]').forEach((th) => {
+            const field = th.dataset['col'];
+            if (current[field] !== undefined)
+                return;
+            current[field] = Math.round(th.getBoundingClientRect().width) || FALLBACK_COL_PX;
+            changed = true;
+        });
+        if (changed)
+            this.columnWidths.set(current);
+    }
+    onColumnResize(col, width) {
+        this.columnWidths.update((widths) => ({ ...widths, [col.field]: width }));
+    }
+    /** İçeriğe sığdır: kolondaki en geniş hücre içeriği + yatay dolgu (`px-4` × 2). */
+    autofitColumn(col) {
+        this.freezeWidths();
+        let widest = 0;
+        this.host.nativeElement.querySelectorAll('[data-col]').forEach((cell) => {
+            if (cell.dataset['col'] !== col.field)
+                return;
+            const content = cell.firstElementChild;
+            widest = Math.max(widest, content?.getBoundingClientRect().width ?? 0);
+        });
+        if (widest > 0)
+            this.onColumnResize(col, Math.max(col.minWidth ?? 80, Math.ceil(widest + 32)));
+    }
+    // ---- Sabit kolonlar ----
+    /** Sabitlenecek bir hücre mi? Öndeki seçim/genişletme kolonları, sabit kolon varsa onlarla gider. */
+    isPinnedKey(key) {
+        if (!this.hasPinned())
+            return false;
+        if (key === '__select' || key === '__expand')
+            return true;
+        return this.visibleColumns().some((c) => c.field === key && c.pinned === 'left');
+    }
+    pinStart(key) {
+        return this.isPinnedKey(key) ? (this.pinOffsets()[key] ?? 0) : null;
+    }
+    /** Başlık hücresinin sabitleme sınıfları (`thead` zaten opak `bg-surface-sunken`). */
+    pinHeadClasses(key) {
+        if (!this.isPinnedKey(key))
+            return '';
+        return cn('sticky z-[2] bg-surface-sunken', this.edgeShadow(key));
+    }
+    /** Gövde hücresi: opak zemin şart — altından kayan hücreler sızmasın (bkz. `rowBg`). */
+    pinBodyClasses(key, row) {
+        if (!this.isPinnedKey(key))
+            return '';
+        return cn('sticky z-[1]', this.rowBg(row), this.edgeShadow(key));
+    }
+    /** `border-collapse` altında kenarlıklar yapışkan hücreyle gitmez — içe gölge gider. */
+    edgeShadow(key) {
+        return key === this.lastPinnedKey()
+            ? 'shadow-[inset_-1px_0_0_var(--mf-border)] rtl:shadow-[inset_1px_0_0_var(--mf-border)]'
+            : '';
+    }
+    // ---- Satır genişletme ----
+    isExpanded(row) {
+        return this.expandedKeys().has(row[this.rowKey()]);
+    }
+    toggleExpanded(row) {
+        const key = row[this.rowKey()];
+        const next = new Set(this.expandedKeys());
+        const expanded = !next.has(key);
+        if (expanded)
+            next.add(key);
+        else
+            next.delete(key);
+        this.expandedKeys.set(next);
+        this.rowExpandedChange.emit({ row, expanded });
+    }
+    expandedRowId(index) {
+        return `${this.idPrefix}-detail-${index}`;
+    }
+    expandAriaLabel(row) {
+        const labels = this.effectiveLabels();
+        return this.withRowIdentity(row, this.isExpanded(row) ? labels.collapseRow : labels.expandRow);
+    }
+    trackByRow = (_, row) => row[this.rowKey()];
+    /** `type: 'numeric'` açıkça `align` verilmemişse sağa yaslanır; diğer tüm kolonlar `col.align`'a düşer (varsayılan sol). */
+    resolvedAlign(col) {
+        return col.align ?? (col.type === 'numeric' ? 'right' : 'left');
+    }
+    alignClass(align) {
+        return align === 'center' ? 'text-center' : align === 'right' ? 'text-end' : 'text-start';
+    }
+    /** Kimlik kolonu (`primary`) `text-fg font-medium` — göz bir satırda tutunacak bir çapa buluyor; diğer her hücre `text-fg-muted` kalır (eskiden HER hücre aynı ağırlıktaydı). */
+    cellClasses(col) {
+        return cn(col.primary ? 'text-fg font-medium' : 'text-fg-muted', col.type === 'numeric' && 'tabular-nums', !col.cellTemplate && 'truncate');
+    }
+    /** `[title]` (kesilmiş metin için native tooltip) ve boş/`null` değerleri güvenle metne çevirir — Angular şablonları global `String()`'e erişemiyor. */
+    cellText(row, col) {
+        const value = row[col.field];
+        return value === null || value === undefined ? '' : String(value);
+    }
+    /** Satır checkbox'ının erişilebilir adı — kimlik kolonundan (`primary`, yoksa ilk kolon) türetilir, tüm satırların AYNI "Select row" metnini taşımasını önler. */
+    rowSelectAriaLabel(row) {
+        return this.withRowIdentity(row, this.effectiveLabels().selectRowAriaLabel);
+    }
+    /** "Etiket: kimlik" — kimlik kolonundan (`primary`, yoksa ilk kolon) türetilir. */
+    withRowIdentity(row, label) {
+        const col = this.columns().find((c) => c.primary) ?? this.columns()[0];
+        const value = col ? this.cellText(row, col) : '';
+        return value ? `${label}: ${value}` : label;
+    }
+    /**
+     * Bu tazelemenin imza motiflerinden "ray": seçili satırın sol kenarında
+     * 2px'lik dolu marka rengi çizgi. Kenarlık HER ZAMAN vardır (`border-s-2
+     * border-s-transparent`), sadece rengi değişir — eskiden kenarlık sadece
+     * SEÇİLİYKEN ekleniyordu, `border-collapse: collapse` altında bu 2px
+     * gerçek yer kaplıyor ve her tıklamada ilk hücrenin içeriği 2px kayıyordu
+     * (gerçek layout bug'ı, tarayıcıda `getBoundingClientRect` ile doğrulandı).
+     * `group/row`: sağdaki sabit aksiyon hücresinin hover rengini satırla
+     * senkron tutmak için (bkz. stickyActionClasses).
+     */
+    rowClasses(row) {
+        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');
+    }
+    /**
+     * Sabit (sticky) aksiyon hücresi için — `rowClasses()`'ın aksine `bg-primary-tint`
+     * DOĞRUDAN kullanılamaz: bu hücre yatay kaydırmada AYNI satırın diğer
+     * hücrelerinin ÜSTÜNÜ kapatıyor, saydam bir zemin altındaki kaydırılmış
+     * içeriği sızdırırdı (gerçek bir composite hatası). Bunun yerine OPAK
+     * `bg-surface` + üstüne tint rengiyle boyanmış bir `background-image`
+     * gradyanı — iki katman üst üste bindiğinde görsel sonuç `bg-primary-tint`
+     * ile BİREBİR aynı, ama alttan hiçbir şey sızmaz. `--mf-primary-tint`
+     * (`--color-primary-tint` DEĞİL) — arbitrary value içindeki `var()`
+     * referansları Tailwind'in "@theme inline" tarama/eleme sezgisine bağlı,
+     * `--mf-*` rol katmanı KENDİSİ her zaman `@layer base`'de KOŞULSUZ yazılır
+     * (bkz. `tabs.variants.ts`'teki aynı karar).
+     */
+    rowBg(row) {
+        return this.isChecked(row)
+            ? 'bg-surface bg-[linear-gradient(var(--mf-primary-tint),var(--mf-primary-tint))]'
+            : 'bg-surface group-hover/row:bg-surface-alt';
+    }
+    stickyActionClasses(row) {
+        return cn('sticky end-0 z-[1] border-s border-border text-end', this.bodyCellPad(), this.rowBg(row));
+    }
+    /** `SearchInput` kendi debounce'unu zaten uyguladı — burada gelen değer commit edilmiş (nihai). */
+    onSearchCommit(value) {
+        this.searchTerm.set(value);
+        this.pageState.update((p) => ({ ...p, pageNumber: 1 }));
+        this.emitQuery();
+    }
+    /**
+     * Düz tık: bu alanı TEK sıralama kriteri yapar (zaten TEK/birincil kriterse
+     * yön döngüsü asc→desc→yok). Shift+tık: İKİNCİL sıralama ekler/döndürür/
+     * kaldırır — backend en fazla 3 alan kabul ediyor (`SortExpressionBuilder.
+     * MaxSortFields`). Eskiden çoklu sıralama YOKTU (yeni Table'ın eski
+     * `shared/components/data-table`'a göre kaybettiği iki yetenekten biri).
+     */
+    onSortClick(column, event) {
+        if (!column.sortable)
+            return;
+        const current = this.sortState();
+        const index = current.findIndex((s) => s.field === column.field);
+        if (!event?.shiftKey) {
+            if (current.length === 1 && index === 0) {
+                const next = current[0].direction === SortDirection.Ascending
+                    ? [{ field: column.field, direction: SortDirection.Descending }]
+                    : [];
+                this.sortState.set(next);
+            }
+            else {
+                this.sortState.set([{ field: column.field, direction: SortDirection.Ascending }]);
+            }
+        }
+        else if (index === -1) {
+            if (current.length >= 3)
+                return;
+            this.sortState.set([...current, { field: column.field, direction: SortDirection.Ascending }]);
+        }
+        else {
+            const entry = current[index];
+            this.sortState.set(entry.direction === SortDirection.Ascending
+                ? current.map((s, i) => (i === index ? { ...s, direction: SortDirection.Descending } : s))
+                : current.filter((_, i) => i !== index));
+        }
+        this.emitQuery();
+    }
+    sortDirectionFor(field) {
+        return this.sortState().find((s) => s.field === field)?.direction ?? null;
+    }
+    /** 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)
+            return null;
+        const index = this.sortState().findIndex((s) => s.field === field);
+        return index === -1 ? null : index + 1;
+    }
+    onFiltersChange(filters) {
+        this.appliedFilters.set(filters);
+        this.pageState.update((p) => ({ ...p, pageNumber: 1 }));
+        this.emitQuery();
+    }
+    onFilterLogicChange(logic) {
+        this.filterLogic.set(logic);
+        if (this.appliedFilters().length > 1)
+            this.emitQuery();
+    }
+    clearAllFilters() {
+        this.searchTerm.set('');
+        this.appliedFilters.set([]);
+        this.pageState.update((p) => ({ ...p, pageNumber: 1 }));
+        this.emitQuery();
+    }
+    onPageChange(page) {
+        this.pageState.update((p) => ({ ...p, pageNumber: page }));
+        this.emitQuery();
+    }
+    onPageSizeChange(size) {
+        this.pageState.set({ pageNumber: 1, pageSize: size });
+        this.emitQuery();
+    }
+    toggleDensity() {
+        this.density.update((d) => (d === 'comfortable' ? 'compact' : 'comfortable'));
+    }
+    densityToggleTooltip() {
+        const labels = this.effectiveLabels();
+        return `${labels.density}: ${this.density() === 'comfortable' ? labels.densityCompact : labels.densityComfortable}`;
+    }
+    onHiddenColumnsChange(hidden) {
+        this.hiddenColumns.set(new Set(hidden));
+    }
+    isChecked(row) {
+        return this.selectedRows().has(row[this.rowKey()]);
+    }
+    onCheckAll(checked) {
+        const next = new Map();
+        if (checked)
+            for (const row of this.rows())
+                next.set(row[this.rowKey()], row);
+        this.selectedRows.set(next);
+        this.selectionChange.emit([...next.values()]);
+    }
+    onCheckRow(row, checked) {
+        const next = new Map(this.selectedRows());
+        if (checked)
+            next.set(row[this.rowKey()], row);
+        else
+            next.delete(row[this.rowKey()]);
+        this.selectedRows.set(next);
+        this.selectionChange.emit([...next.values()]);
+    }
+    clearSelection() {
+        this.selectedRows.set(new Map());
+        this.selectionChange.emit([]);
+    }
+    buildFilter() {
+        const term = this.searchTerm().trim();
+        const searchGroup = term ? this.searchGroupFor(term) : undefined;
+        const chipGroup = buildFilterGroup(this.appliedFilters(), this.filterLogic());
+        if (searchGroup && chipGroup)
+            return { logic: FilterLogic.And, groups: [searchGroup, chipGroup] };
+        return searchGroup ?? chipGroup;
+    }
+    searchGroupFor(term) {
+        const fields = this.columns()
+            .filter((c) => c.searchable)
+            .map((c) => c.field);
+        if (!fields.length)
+            return undefined;
+        return {
+            logic: FilterLogic.Or,
+            conditions: fields.map((field) => ({
+                field,
+                operator: FilterOperator.Contains,
+                value: term,
+            })),
+        };
+    }
+    emitQuery() {
+        if (this.clientSide())
+            return;
+        this.queryChange.emit(canonicalPagedRequest({
+            page: this.pageState(),
+            sort: this.sortState(),
+            filter: this.buildFilter(),
+        }));
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-table', exportAs: 'mfTable', imports: [
+                        Button,
+                        Icon,
+                        Checkbox,
+                        Skeleton,
+                        EmptyState,
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        TableFilterBar,
+                        TableColumnsMenu,
+                        TablePagination,
+                        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" }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_PAGE_SIZE, FilterLogic, FilterOperator, MAX_PAGE_SIZE, OPERATORS_BY_TYPE, SortDirection, Table, TableColumnsMenu, TableFilterBar, TableFilterMenu, TablePageJump, TablePagination, TableResizeHandle, buildFilterGroup, canonicalPagedRequest, dateToIso, defaultOperatorFor, isDefaultOperator, isoToDate, localIso, matchesFilterGroup, operatorLabel, operatorNeedsValue, sortRows, virtualWindow };
+//# sourceMappingURL=mesgflow-ui-kit-table.mjs.map