@mesgflow/ui-kit 0.10.0 → 0.11.1

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

@@ -1227,18 +1227,24 @@ class Table {
     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 */
+    /*
+     * Sorgu durumu — beşi de `model()`: verilmezse tablo durumunu kendisi tutar
+     * (eski davranış); `[(page)]`/`[(sort)]`/`[(search)]`/`[(filters)]`/
+     * `[(filterLogic)]` ile bağlanırsa dıştan (ör. URL query param'larından)
+     * yazılabilir ve arayüz (footer sayfası, sıralama okları, filtre chip'leri,
+     * arama kutusu) senkron olur. Dıştan yazma `queryChange` YAYMAZ (döngü
+     * olmasın — dışarıdaki zaten yeni durumu biliyor, yüklemeyi kendisi başlatır);
+     * kullanıcı etkileşimi modelleri günceller VE `queryChange`'i bir kez yayar.
+     */
+    page = model({ pageNumber: 1, pageSize: DEFAULT_PAGE_SIZE }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    sort = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    search = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    filters = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    filterLogic = model(FilterLogic.And, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterLogic" }] : /* istanbul ignore next */ []));
     selectedRows = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
@@ -1299,9 +1305,9 @@ class Table {
     ...(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 */
+    activeFilterCount = computed(() => this.filters().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : /* istanbul ignore next */ []));
-    isFiltered = computed(() => !!this.searchTerm().trim() || this.appliedFilters().length > 0, /* @ts-ignore */
+    isFiltered = computed(() => !!this.search().trim() || this.filters().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 */ []));
@@ -1316,10 +1322,10 @@ class Table {
         const filtered = this.isFiltered()
             ? rows.filter((row) => matchesFilterGroup(row, this.buildFilter()))
             : [...rows];
-        const sorted = sortRows(filtered, this.sortState());
+        const sorted = sortRows(filtered, this.sort());
         if (this.virtual())
             return { items: sorted, total: filtered.length };
-        const { pageNumber, pageSize } = this.pageState();
+        const { pageNumber, pageSize } = this.page();
         const start = (pageNumber - 1) * pageSize;
         return { items: sorted.slice(start, start + pageSize), total: filtered.length };
     }, /* @ts-ignore */
@@ -1345,7 +1351,7 @@ class Table {
     ...(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 */
+    skeletonIndexes = computed(() => Array.from({ length: Math.min(this.page().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 */
@@ -1614,8 +1620,8 @@ class Table {
     }
     /** `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.search.set(value);
+        this.page.update((p) => ({ ...p, pageNumber: 1 }));
         this.emitQuery();
     }
     /**
@@ -1628,34 +1634,34 @@ class Table {
     onSortClick(column, event) {
         if (!column.sortable)
             return;
-        const current = this.sortState();
+        const current = this.sort();
         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);
+                this.sort.set(next);
             }
             else {
-                this.sortState.set([{ field: column.field, direction: SortDirection.Ascending }]);
+                this.sort.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 }]);
+            this.sort.set([...current, { field: column.field, direction: SortDirection.Ascending }]);
         }
         else {
             const entry = current[index];
-            this.sortState.set(entry.direction === SortDirection.Ascending
+            this.sort.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;
+        return this.sort().find((s) => s.field === field)?.direction ?? null;
     }
     /** WAI-ARIA `aria-sort` — ekran okuyucu sütunun sıralama yönünü duyurur (yalnızca sıralanabilir sütunlarda). */
     ariaSortFor(field) {
@@ -1664,33 +1670,33 @@ class Table {
     }
     /** 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)
+        if (this.sort().length < 2)
             return null;
-        const index = this.sortState().findIndex((s) => s.field === field);
+        const index = this.sort().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.filters.set(filters);
+        this.page.update((p) => ({ ...p, pageNumber: 1 }));
         this.emitQuery();
     }
     onFilterLogicChange(logic) {
         this.filterLogic.set(logic);
-        if (this.appliedFilters().length > 1)
+        if (this.filters().length > 1)
             this.emitQuery();
     }
     clearAllFilters() {
-        this.searchTerm.set('');
-        this.appliedFilters.set([]);
-        this.pageState.update((p) => ({ ...p, pageNumber: 1 }));
+        this.search.set('');
+        this.filters.set([]);
+        this.page.update((p) => ({ ...p, pageNumber: 1 }));
         this.emitQuery();
     }
     onPageChange(page) {
-        this.pageState.update((p) => ({ ...p, pageNumber: page }));
+        this.page.update((p) => ({ ...p, pageNumber: page }));
         this.emitQuery();
     }
     onPageSizeChange(size) {
-        this.pageState.set({ pageNumber: 1, pageSize: size });
+        this.page.set({ pageNumber: 1, pageSize: size });
         this.emitQuery();
     }
     toggleDensity() {
@@ -1728,9 +1734,9 @@ class Table {
         this.selectionChange.emit([]);
     }
     buildFilter() {
-        const term = this.searchTerm().trim();
+        const term = this.search().trim();
         const searchGroup = term ? this.searchGroupFor(term) : undefined;
-        const chipGroup = buildFilterGroup(this.appliedFilters(), this.filterLogic());
+        const chipGroup = buildFilterGroup(this.filters(), this.filterLogic());
         if (searchGroup && chipGroup)
             return { logic: FilterLogic.And, groups: [searchGroup, chipGroup] };
         return searchGroup ?? chipGroup;
@@ -1754,13 +1760,13 @@ class Table {
         if (this.clientSide())
             return;
         this.queryChange.emit(canonicalPagedRequest({
-            page: this.pageState(),
-            sort: this.sortState(),
+            page: this.page(),
+            sort: this.sort(),
             filter: this.buildFilter(),
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Table, isStandalone: true, selector: "mf-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, clientSide: { classPropertyName: "clientSide", publicName: "clientSide", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualHeight: { classPropertyName: "virtualHeight", publicName: "virtualHeight", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mfTable"], ngImport: i0, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "inputId", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterLogic: { classPropertyName: "filterLogic", publicName: "filterLogic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange", page: "pageChange", sort: "sortChange", search: "searchChange", filters: "filtersChange", filterLogic: "filterLogicChange" }, 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]=\"search()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"filters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"page().pageNumber\"\r\n        [pageSize]=\"page().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "inputId", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Table, decorators: [{
             type: Component,
@@ -1778,8 +1784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         TableResizeHandle,
                         SearchInput,
                         Tooltip,
-                    ], host: { class: 'block' }, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }, { type: i0.Output, args: ["densityChange"] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], clientSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSide", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: false }] }, { type: i0.Output, args: ["columnWidthsChange"] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualHeight", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], rowExpandedChange: [{ type: i0.Output, args: ["rowExpandedChange"] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
+                    ], 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]=\"search()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"filters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"page().pageNumber\"\r\n        [pageSize]=\"page().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 }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterLogic: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLogic", required: false }] }, { type: i0.Output, args: ["filterLogicChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.