@mk-kit/ui 0.43.0 → 0.45.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, input, ElementRef, Injector, PLATFORM_ID, DestroyRef, signal, effect, afterNextRender, booleanAttribute, numberAttribute, model, output, computed, viewChild, contentChild, contentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, ElementRef, Injector, PLATFORM_ID, DestroyRef, signal, effect, afterNextRender, afterRenderEffect, untracked, booleanAttribute, numberAttribute, model, output, computed, viewChild, contentChild, contentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { MkLiveAnnouncer, MK_I18N, mkUniqueId, mkQueryCompact } from '@mk-kit/ui/core';
 import { MkCheckbox } from '@mk-kit/ui/checkbox';
@@ -171,6 +171,53 @@ function mkExportCsv(rows, columns, options = {}) {
 
 /** Hard floor (px) for column resize when a column sets no `minWidth`. */
 const MIN_COL_WIDTH = 60;
+/**
+ * Row height (px) assumed by `virtual` until the first row is measured: the
+ * comfortable density row — `--mk-space-3` padding twice around a
+ * `--mk-font-size-sm` line, plus the 1px row border.
+ */
+const DEFAULT_ROW_HEIGHT = 44;
+/** Rows rendered before the viewport has been measured (SSR, first paint). */
+const UNMEASURED_VIEWPORT_ROWS = 20;
+const ISO_DAY = /^\d{4}-\d{2}-\d{2}/;
+/** Local calendar day (`YYYY-MM-DD`) of a Date, ISO string or timestamp. */
+function dayKey(value) {
+    if (value == null || value === '')
+        return null;
+    if (typeof value === 'string' && ISO_DAY.test(value))
+        return value.slice(0, 10);
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+/** Whether a filter value is a `{ min, max }` range rather than a single bound. */
+function isFilterRange(v) {
+    return (typeof v === 'object' && v !== null && !(v instanceof Date) && ('min' in v || 'max' in v));
+}
+/** `null`, `''` and empty ranges all mean "no filter on this column". */
+function isEmptyFilter(v) {
+    if (v == null || v === '')
+        return true;
+    if (isFilterRange(v))
+        return isEmptyFilter(v.min) && isEmptyFilter(v.max);
+    return false;
+}
+/** Drop the empty entries of a filter map (`null` when nothing is left). */
+function mkCompactFilters(filters) {
+    if (!filters)
+        return null;
+    const out = {};
+    let any = false;
+    for (const key of Object.keys(filters)) {
+        if (isEmptyFilter(filters[key]))
+            continue;
+        out[key] = filters[key];
+        any = true;
+    }
+    return any ? out : null;
+}
 /** Upper bound advertised on resize separators (`aria-valuemax`). */
 const MAX_COL_WIDTH = 2000;
 /**
@@ -178,6 +225,8 @@ const MAX_COL_WIDTH = 2000;
  * Supply `columns` and `data`; opt into sortable columns, sticky header,
  * zebra striping, hover and density. Sorting is fully keyboard operable
  * (Enter/Space on a header) and announces changes via {@link MkLiveAnnouncer}.
+ * `virtual` windows the rows of very large tables; `filterable` adds a
+ * per-column filter row (`[(filters)]`).
  *
  * ```html
  * <mk-table
@@ -217,13 +266,45 @@ class MkTable {
     stacked = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Keep the sticky group-header offset in sync with the rendered thead
-        // height (it shifts with density, sticky mode and grouping itself).
+        // Keep the sticky offsets (filter row under the header row, group headers
+        // under the thead) in sync with the rendered heights — they shift with
+        // density, sticky mode, the filter row and grouping itself.
         effect(() => {
             this.stickyHeader();
             this.density();
             this.groupBy();
-            afterNextRender({ read: () => this.applyGroupTop() }, { injector: this.injector });
+            this.filterable();
+            this.virtual();
+            afterNextRender({ read: () => this.applyStickyOffsets() }, { injector: this.injector });
+        });
+        // Virtual mode: after every render that could change what is on screen,
+        // read back the real row / detail heights and the viewport, so the
+        // spacers and the window stay honest for whatever density is in force.
+        afterRenderEffect({
+            read: () => {
+                if (!this.isVirtual())
+                    return;
+                this.windowRange();
+                this.density();
+                this.expandedKeys();
+                const el = this.scroller()?.nativeElement;
+                if (el)
+                    untracked(() => this.measureViewport(el));
+            },
+        });
+        // Announce how many rows a change of filters left (the visible count).
+        let firstFilters = true;
+        effect(() => {
+            this.filters();
+            if (firstFilters) {
+                firstFilters = false;
+                return;
+            }
+            untracked(() => {
+                if (!this.clientFilter())
+                    return;
+                this.announcer.announce(this.i18n.resultsCount(this.allRows().length));
+            });
         });
         // Watch the host's width against `stackAt`. ResizeObserver rather than
         // matchMedia because the trigger is the element's width, not the window's.
@@ -240,17 +321,43 @@ class MkTable {
                     this.stacked.set(limit > 0 && entry.contentRect.width < limit);
                 });
                 observer.observe(el);
-                this.destroyRef.onDestroy(() => observer.disconnect());
+                // The scroller's height is the virtual viewport; the table grows or
+                // shrinks when a density change re-sizes its rows.
+                const scroller = this.scroller()?.nativeElement;
+                const viewport = new ResizeObserver(() => {
+                    if (scroller && this.isVirtual())
+                        this.measureViewport(scroller);
+                });
+                if (scroller) {
+                    viewport.observe(scroller);
+                    const table = scroller.querySelector('table');
+                    if (table)
+                        viewport.observe(table);
+                }
+                this.destroyRef.onDestroy(() => {
+                    observer.disconnect();
+                    viewport.disconnect();
+                });
             },
         }, { injector: this.injector });
     }
-    /** Measures the thead and exposes it as the group rows' sticky offset. */
-    applyGroupTop() {
+    /**
+     * Measures the header row and the thead and exposes them as the sticky
+     * offsets of the filter row and of the group rows.
+     */
+    applyStickyOffsets() {
+        const host = this.host.nativeElement;
+        const sticky = this.stickyHeader() || this.isVirtual();
+        if (this.filterable()) {
+            const headRow = host.querySelector('thead > tr');
+            const h = sticky && headRow ? headRow.getBoundingClientRect().height : 0;
+            host.style.setProperty('--_filter-top', `${Math.round(h)}px`);
+        }
         if (this.groupBy() == null)
             return;
-        const thead = this.host.nativeElement.querySelector('thead');
-        const h = this.stickyHeader() && thead ? thead.getBoundingClientRect().height : 0;
-        this.host.nativeElement.style.setProperty('--_group-top', `${Math.round(h)}px`);
+        const thead = host.querySelector('thead');
+        const h = sticky && thead ? thead.getBoundingClientRect().height : 0;
+        host.style.setProperty('--_group-top', `${Math.round(h)}px`);
     }
     /** Column definitions (order = display order). */
     columns = input.required(/* @ts-ignore */
@@ -334,6 +441,55 @@ class MkTable {
     /** Formats a group header label; defaults to `String(value)`. */
     groupLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []));
+    // --- Virtualisation inputs -------------------------------------------------
+    /**
+     * Render only the rows in view (plus {@link overscan}) — for tables of
+     * thousands of rows. The `<table>` scrolls inside its own box sized by
+     * {@link height} / {@link maxHeight} (`max-height: 60vh` when neither is
+     * set) with the header pinned; spacer rows keep the scrollbar honest.
+     *
+     * Works with sorting, selection (select-all still covers every row), tree
+     * rows, grouping (group headers are rows too), expandable detail rows (their
+     * height is measured once rendered; an unmeasured detail counts as one row)
+     * and the header filter row. Falls back to the full render while stacked
+     * into cards. Export and select-all always see every row, not the window.
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Height (px) of one row in virtual mode. Leave unset to have it measured
+     * from the first rendered row — which follows `density` and
+     * `data-mk-density` automatically — starting from 44 (comfortable).
+     */
+    rowHeight = input(null, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (v) => (v == null || v === '' ? null : numberAttribute(v)) });
+    /** Rows rendered beyond each edge of the viewport in virtual mode. */
+    overscan = input(6, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Fixed height of the scroll box (CSS length, or px as a number). */
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Maximum height of the scroll box (CSS length, or px as a number). */
+    maxHeight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    // --- Filter row inputs -----------------------------------------------------
+    /**
+     * Render a second header row with a filter control per column — a text
+     * box, a select, a number or a date field as the column's
+     * {@link MkTableColumn.filter} says. Values live in {@link filters}.
+     */
+    filterable = input(false, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The active filters, keyed by column key (`[(filters)]`; `filtersChange`
+     * emits the whole map on every edit). Text filters hold the typed string,
+     * select filters the chosen option value, number / date filters the lower
+     * bound or a `{ min, max }` range. Set programmatically to pre-filter.
+     */
+    filters = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /**
+     * Filter rows in the browser (default). Turn off when the server applies
+     * the filters — `MkTableDataSource.setFilters($event)` on `filtersChange` —
+     * so the page it returns is shown as-is.
+     */
+    clientFilter = input(true, { ...(ngDevMode ? { debugName: "clientFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Emitted when the sort column/direction changes. */
     sortChange = output();
     /** Emitted when a row is clicked (enable via `clickableRows`). */
@@ -728,8 +884,226 @@ class MkTable {
      * large-table sorts several-fold faster with the same default-locale order.
      */
     /** Data sorted by the active column, or the input order when unsorted. */
-    sortedData = computed(() => this.sortRows(this.data()), /* @ts-ignore */
+    sortedData = computed(() => this.sortRows(this.filteredData()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    // --- Filtering ---------------------------------------------------------------
+    /** The filter control a column renders, or `null` for none. */
+    filterKind(col) {
+        if (col.filter === false)
+            return null;
+        return col.filter ?? 'text';
+    }
+    /** One predicate per active filter, or `null` when nothing is filtered. */
+    rowPredicate = computed(() => {
+        if (!this.clientFilter())
+            return null;
+        const filters = this.filters();
+        const tests = [];
+        for (const col of this.columns()) {
+            const value = filters[col.key];
+            if (col.filter === false || isEmptyFilter(value))
+                continue;
+            tests.push(this.columnTest(col, value));
+        }
+        if (!tests.length)
+            return null;
+        return (row) => tests.every((test) => test(row));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowPredicate" }] : /* istanbul ignore next */ []));
+    /** Build the predicate for one column's filter value. */
+    columnTest(col, value) {
+        const raw = (row) => row[col.key];
+        switch (col.filter) {
+            case 'select': {
+                const wanted = String(value);
+                return (row) => String(raw(row) ?? '') === wanted;
+            }
+            case 'number': {
+                const [lo, hi] = isFilterRange(value) ? [value.min, value.max] : [value, null];
+                const min = isEmptyFilter(lo) ? null : Number(lo);
+                const max = isEmptyFilter(hi) ? null : Number(hi);
+                return (row) => {
+                    const v = raw(row);
+                    const n = typeof v === 'number' ? v : Number(v);
+                    if (v == null || v === '' || Number.isNaN(n))
+                        return false;
+                    return (min == null || n >= min) && (max == null || n <= max);
+                };
+            }
+            case 'date': {
+                const [lo, hi] = isFilterRange(value) ? [value.min, value.max] : [value, null];
+                const min = dayKey(lo);
+                const max = dayKey(hi);
+                return (row) => {
+                    const day = dayKey(raw(row));
+                    if (!day)
+                        return false;
+                    return (!min || day >= min) && (!max || day <= max);
+                };
+            }
+            default: {
+                const needle = String(value).trim().toLowerCase();
+                if (!needle)
+                    return () => true;
+                return (row) => this.cellText(row, col).toLowerCase().includes(needle);
+            }
+        }
+    }
+    /**
+     * Tree mode: which rows survive the filters — a row is kept when it matches
+     * or any descendant does, so a matching child keeps its parents.
+     */
+    treeKeep = computed(() => {
+        const keep = this.rowPredicate();
+        const map = new Map();
+        if (!keep || !this.childrenKey())
+            return map;
+        const walk = (row) => {
+            let any = keep(row);
+            for (const child of this.childrenOf(row))
+                if (walk(child))
+                    any = true;
+            map.set(row, any);
+            return any;
+        };
+        for (const row of this.data())
+            walk(row);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeKeep" }] : /* istanbul ignore next */ []));
+    /** The input rows with the active filters applied (input order). */
+    filteredData = computed(() => {
+        const keep = this.rowPredicate();
+        const data = this.data();
+        if (!keep)
+            return data;
+        if (!this.childrenKey())
+            return data.filter(keep);
+        const kept = this.treeKeep();
+        return data.filter((row) => kept.get(row) === true);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    /** The child rows of `row` that survive the filters (tree mode). */
+    visibleChildrenOf(row) {
+        const children = this.childrenOf(row);
+        if (!children.length || !this.rowPredicate())
+            return children;
+        const kept = this.treeKeep();
+        return children.filter((child) => kept.get(child) === true);
+    }
+    /** Options of every `select` filter, keyed by column (derived when unset). */
+    selectOptions = computed(() => {
+        const map = new Map();
+        for (const col of this.columns()) {
+            if (col.filter !== 'select')
+                continue;
+            if (col.filterOptions) {
+                map.set(col.key, col.filterOptions.map((o) => typeof o === 'object' ? o : { value: o, label: String(o) }));
+                continue;
+            }
+            const seen = new Map();
+            const walk = (rows) => {
+                for (const row of rows) {
+                    const v = row[col.key];
+                    if (v != null && v !== '')
+                        seen.set(String(v), v);
+                    walk(this.childrenOf(row));
+                }
+            };
+            walk(this.data());
+            map.set(col.key, [...seen.entries()]
+                .sort(([a], [b]) => sortCollator().compare(a, b))
+                .map(([label, value]) => ({ value, label })));
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
+    /** The options a column's select filter offers. */
+    filterOptionsFor(col) {
+        return this.selectOptions().get(col.key) ?? [];
+    }
+    /** Whether `option` is the column's current select-filter value. */
+    isFilterOption(col, option) {
+        const v = this.filters()[col.key];
+        return !isEmptyFilter(v) && String(v) === String(option.value);
+    }
+    /** Whether a column has an active filter. */
+    hasFilter(key) {
+        return !isEmptyFilter(this.filters()[key]);
+    }
+    /** The text a column's filter box shows (a range shows its lower bound). */
+    filterText(key) {
+        const v = this.filters()[key];
+        if (isEmptyFilter(v))
+            return '';
+        const shown = isFilterRange(v) ? v.min : v;
+        if (shown instanceof Date)
+            return dayKey(shown) ?? '';
+        return shown == null ? '' : String(shown);
+    }
+    /** Accessible name of a column's filter control. */
+    filterLabel(col) {
+        return this.i18n.filterColumn(col.header || col.key);
+    }
+    /** Placeholder of a column's filter control. */
+    filterPlaceholder(col) {
+        if (col.filterPlaceholder != null)
+            return col.filterPlaceholder;
+        return this.filterKind(col) === 'text' ? this.i18n.filter : this.i18n.filterMin;
+    }
+    /**
+     * Set one column's filter (`null` / `''` clears it). Updates
+     * {@link filters} and emits `filtersChange`; a no-op when unchanged.
+     */
+    setFilter(key, value) {
+        const current = this.filters();
+        const empty = isEmptyFilter(value);
+        if (empty ? !(key in current) : Object.is(current[key], value))
+            return;
+        const next = { ...current };
+        if (empty)
+            delete next[key];
+        else
+            next[key] = value;
+        this.filters.set(next);
+    }
+    /** Clear one column's filter. */
+    clearFilter(key) {
+        this.setFilter(key, null);
+    }
+    /** Clear every filter. */
+    clearFilters() {
+        if (Object.keys(this.filters()).length)
+            this.filters.set({});
+    }
+    /** Text / number / date filter box input. */
+    onFilterInput(col, event) {
+        const text = event.target.value;
+        if (col.filter === 'number') {
+            const n = text === '' ? NaN : Number(text);
+            this.setFilter(col.key, Number.isNaN(n) ? null : n);
+        }
+        else {
+            this.setFilter(col.key, text);
+        }
+    }
+    /** Select filter change: map the option string back to its original value. */
+    onFilterSelect(col, event) {
+        const chosen = event.target.value;
+        const option = this.filterOptionsFor(col).find((o) => String(o.value) === chosen);
+        this.setFilter(col.key, chosen === '' || !option ? null : option.value);
+    }
+    /** Escape in a filter box clears that filter (and stays in the box). */
+    onFilterKeydown(col, event) {
+        if (event.key !== 'Escape' || !this.hasFilter(col.key))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.clearFilter(col.key);
+    }
+    /** Header rows above the body (for `aria-rowindex`). */
+    headerRows = computed(() => 1 + (this.filterable() && !this.stacked() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []));
     /** Sort one sibling group by the active column (input order when unsorted). */
     sortRows(rows) {
         const key = this.sortKey();
@@ -850,10 +1224,10 @@ class MkTable {
         const walk = (rows) => {
             for (const row of this.sortRows(rows)) {
                 out.push(row);
-                walk(this.childrenOf(row));
+                walk(this.visibleChildrenOf(row));
             }
         };
-        walk(this.data());
+        walk(this.filteredData());
         return out;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allRows" }] : /* istanbul ignore next */ []));
@@ -957,7 +1331,7 @@ class MkTable {
         const tree = !!this.childrenKey();
         const expandedKeys = this.treeExpanded();
         for (const row of rows) {
-            const children = tree ? this.childrenOf(row) : [];
+            const children = tree ? this.visibleChildrenOf(row) : [];
             const hasChildren = children.length > 0;
             const expanded = hasChildren && expandedKeys.has(this.rowKey(row));
             items.push({ kind: 'row', row, depth, hasChildren, expanded });
@@ -973,6 +1347,236 @@ class MkTable {
         const value = row[key];
         return Array.isArray(value) ? value : [];
     }
+    // --- Row virtualisation -------------------------------------------------------
+    // Own windowing rather than `mk-virtual-scroll` from `@mk-kit/ui/data`: the
+    // rows must stay real `<tr>`s inside the one `<table>` (column widths,
+    // sticky header, selection, a11y), the window has to know about group and
+    // detail rows, and importing the data entry point would drag ~680 KiB of
+    // unrelated components into every table consumer's dependency graph.
+    /** The scroll box around the table. */
+    scroller = viewChild('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    /** Virtual mode in force (cards always render in full). */
+    isVirtual = computed(() => this.virtual() && !this.stacked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVirtual" }] : /* istanbul ignore next */ []));
+    /** Current scroll offset of the scroll box (virtual mode). */
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    /** Measured height of the scroll box (0 until measured / on the server). */
+    viewportHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Measured height of the thead — the sticky header hides that much of the top. */
+    headHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headHeight" }] : /* istanbul ignore next */ []));
+    /** Row height read back from the first rendered row. */
+    measuredRowHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowHeight" }] : /* istanbul ignore next */ []));
+    /** Measured heights of expanded detail rows, by row key. */
+    detailHeights = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailHeights" }] : /* istanbul ignore next */ []));
+    /** The row height virtual mode lays rows out with. */
+    effectiveRowHeight = computed(() => this.rowHeight() ?? this.measuredRowHeight() ?? DEFAULT_ROW_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveRowHeight" }] : /* istanbul ignore next */ []));
+    cssLength(v) {
+        if (v == null || v === '')
+            return null;
+        return typeof v === 'number' ? `${v}px` : v;
+    }
+    /** `height` of the scroll box. */
+    scrollHeight = computed(() => this.cssLength(this.height()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    /** `max-height` of the scroll box (60vh in virtual mode with no size given). */
+    scrollMaxHeight = computed(() => {
+        const max = this.cssLength(this.maxHeight());
+        if (max)
+            return max;
+        return this.isVirtual() && this.height() == null ? '60vh' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollMaxHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Top offset of every display item, or `null` while every item is exactly
+     * one row tall (the common case — then offsets are plain multiplication).
+     * Only expanded detail rows make heights vary.
+     */
+    itemOffsets = computed(() => {
+        if (!this.isVirtual() || !this.expandable() || !this.rowDetail())
+            return null;
+        const expanded = this.expandedKeys();
+        if (!expanded.size)
+            return null;
+        const items = this.displayItems();
+        const rh = this.effectiveRowHeight();
+        const details = this.detailHeights();
+        const offsets = new Float64Array(items.length + 1);
+        let y = 0;
+        for (let i = 0; i < items.length; i++) {
+            offsets[i] = y;
+            y += rh;
+            const item = items[i];
+            if (item.kind === 'row') {
+                const key = this.rowKey(item.row);
+                if (expanded.has(key))
+                    y += details.get(key) ?? rh;
+            }
+        }
+        offsets[items.length] = y;
+        return offsets;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemOffsets" }] : /* istanbul ignore next */ []));
+    /** Full height of the body, spacers included. */
+    totalHeight = computed(() => {
+        const offsets = this.itemOffsets();
+        if (offsets)
+            return offsets[offsets.length - 1];
+        return this.displayItems().length * this.effectiveRowHeight();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    /** Top offset (px) of display item `index`. */
+    offsetOf(index) {
+        const offsets = this.itemOffsets();
+        return offsets
+            ? offsets[Math.min(index, offsets.length - 1)]
+            : index * this.effectiveRowHeight();
+    }
+    /** Index of the display item covering the body offset `y`. */
+    indexAt(y) {
+        const count = this.displayItems().length;
+        if (count === 0)
+            return 0;
+        const offsets = this.itemOffsets();
+        if (!offsets) {
+            return Math.min(count - 1, Math.max(0, Math.floor(y / this.effectiveRowHeight())));
+        }
+        let lo = 0;
+        let hi = count - 1;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if (offsets[mid] <= y)
+                lo = mid;
+            else
+                hi = mid - 1;
+        }
+        return lo;
+    }
+    /** The `[start, end)` slice of display items currently rendered. */
+    windowRange = computed(() => {
+        const count = this.displayItems().length;
+        if (!this.isVirtual())
+            return { start: 0, end: count };
+        const over = Math.max(0, this.overscan());
+        const vh = this.viewportHeight();
+        const top = Math.max(0, this.scrollTop() - this.headHeight());
+        const first = this.indexAt(top);
+        const last = vh > 0 ? this.indexAt(top + vh) : first + UNMEASURED_VIEWPORT_ROWS;
+        return {
+            start: Math.max(0, first - over),
+            end: Math.min(count, last + 1 + over),
+        };
+    }, { ...(ngDevMode ? { debugName: "windowRange" } : /* istanbul ignore next */ {}), equal: (a, b) => a.start === b.start && a.end === b.end });
+    /** Display index of the first rendered item. */
+    windowStart = computed(() => this.windowRange().start, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowStart" }] : /* istanbul ignore next */ []));
+    /** The items the tbody renders: the window in virtual mode, else all. */
+    renderedItems = computed(() => {
+        const items = this.displayItems();
+        if (!this.isVirtual())
+            return items;
+        const { start, end } = this.windowRange();
+        return items.slice(start, end);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedItems" }] : /* istanbul ignore next */ []));
+    /** Height (px) of the spacer above the window. */
+    topSpace = computed(() => this.isVirtual() ? this.offsetOf(this.windowRange().start) : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topSpace" }] : /* istanbul ignore next */ []));
+    /** Height (px) of the spacer below the window. */
+    bottomSpace = computed(() => this.isVirtual()
+        ? Math.max(0, this.totalHeight() - this.offsetOf(this.windowRange().end))
+        : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomSpace" }] : /* istanbul ignore next */ []));
+    /** Scroll box scrolled: move the window. */
+    onScroll(event) {
+        if (!this.isVirtual())
+            return;
+        this.scrollTop.set(event.target.scrollTop);
+    }
+    /**
+     * Read the viewport, thead, first-row and detail-row heights back from the
+     * DOM. Heights are accepted only when they move by more than a pixel:
+     * collapsed table borders make the same row measure 44 or 44.5 depending
+     * on where it sits, and letting that flip the row height would shift a
+     * 10,000-row body by thousands of pixels on every window change. A density
+     * change (44 → 36 or 52) still gets through.
+     */
+    measureViewport(el) {
+        const settled = (next, current) => current != null && Math.abs(next - current) <= 1;
+        const vh = el.clientHeight;
+        if (vh > 0 && vh !== this.viewportHeight())
+            this.viewportHeight.set(vh);
+        const thead = el.querySelector('thead');
+        const hh = thead ? thead.getBoundingClientRect().height : 0;
+        if (!settled(hh, this.headHeight()))
+            this.headHeight.set(hh);
+        if (this.rowHeight() == null) {
+            const row = el.querySelector('tr.mk-table__row:not(.mk-table__row--empty)');
+            const rh = row ? row.getBoundingClientRect().height : 0;
+            if (rh > 0 && !settled(rh, this.measuredRowHeight()))
+                this.measuredRowHeight.set(rh);
+        }
+        if (!this.expandable())
+            return;
+        const items = this.displayItems();
+        let next = null;
+        for (const detail of el.querySelectorAll('tr.mk-table__detail-row')) {
+            const index = Number(detail.dataset['index']);
+            const item = items[index];
+            if (!item || item.kind !== 'row')
+                continue;
+            const h = detail.getBoundingClientRect().height;
+            if (!(h > 0))
+                continue;
+            const key = this.rowKey(item.row);
+            if (settled(h, this.detailHeights().get(key) ?? null))
+                continue;
+            next ??= new Map(this.detailHeights());
+            next.set(key, h);
+        }
+        if (next)
+            this.detailHeights.set(next);
+    }
+    /**
+     * Scroll a row into view. A number is the row's **display index** — its
+     * position among the rendered rows, group headers included, after sorting,
+     * filtering and tree expansion; anything else is a row key (the `trackKey`
+     * value, or the row object when there is none). Pass `'key'` to look a
+     * numeric key up. Returns `false` when the row is not currently displayed
+     * (filtered out, under a collapsed parent or group).
+     *
+     * In virtual mode the row lands at the top of the viewport, just under the
+     * header; otherwise it is scrolled to the nearest edge.
+     */
+    scrollToRow(target, by = typeof target === 'number' ? 'index' : 'key') {
+        const items = this.displayItems();
+        const index = by === 'index'
+            ? target
+            : items.findIndex((it) => it.kind === 'row' && this.rowKey(it.row) === target);
+        if (!Number.isInteger(index) || index < 0 || index >= items.length)
+            return false;
+        const el = this.scroller()?.nativeElement;
+        if (!el)
+            return false;
+        if (this.isVirtual()) {
+            const vh = this.viewportHeight();
+            const max = vh > 0 ? Math.max(0, this.totalHeight() + this.headHeight() - vh) : Infinity;
+            const top = Math.min(this.offsetOf(index), max);
+            el.scrollTop = top;
+            this.scrollTop.set(top);
+        }
+        else {
+            const row = el.querySelector(`tbody > tr[data-index="${index}"]`);
+            row?.scrollIntoView?.({ block: 'nearest' });
+        }
+        return true;
+    }
     // --- Tree rows ------------------------------------------------------------
     /** Keys of parent rows whose children are shown. */
     treeExpanded = signal(new Set(), /* @ts-ignore */
@@ -1011,7 +1615,8 @@ class MkTable {
     /**
      * The rows and columns an export writes — exactly what {@link exportCsv}
      * serialises, for other formats (XLSX, PDF, the clipboard, …): rows in
-     * display order with the current sort applied and tree children
+     * display order with the current sort and header {@link filters} applied
+     * (every matching row, never just the virtual window) and tree children
      * (`childrenKey`) flattened under their parent whether or not they are
      * expanded, optionally only the selected ones; columns in the table's
      * current order, restricted to `options.columns` when given, each carrying
@@ -1038,8 +1643,8 @@ class MkTable {
     }
     /**
      * The table's rows as CSV: current column order, column formatters applied,
-     * sorted the way they are shown, tree children flattened under their parent
-     * whether or not they are expanded. Downloads the file (default name
+     * sorted and filtered the way they are shown, tree children flattened under
+     * their parent whether or not they are expanded. Downloads the file (default name
      * `table.csv`) and returns the text. Built on {@link getExportRows}.
      */
     exportCsv(options = {}) {
@@ -1140,13 +1745,15 @@ class MkTable {
         this.expandedChange.emit(this.data().filter((r) => next.has(this.rowKey(r))));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTable, isStandalone: true, selector: "mk-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stackAt: { classPropertyName: "stackAt", publicName: "stackAt", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, trackKey: { classPropertyName: "trackKey", publicName: "trackKey", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange", expandedChange: "expandedChange", columnResize: "columnResize", columnReorder: "columnReorder", cellEdit: "cellEdit", groupToggle: "groupToggle", treeToggle: "treeToggle" }, host: { properties: { "class.mk-table--sticky": "stickyHeader()", "class.mk-table--zebra": "zebra()", "class.mk-table--hover": "hover()", "class.mk-table--compact": "density() === 'compact'", "class.mk-table--clickable": "clickableRows()", "class.mk-table--selectable": "selectable()", "class.mk-table--expandable": "expandable()", "class.mk-table--grouped": "groupBy() !== null", "class.mk-table--stacked": "stacked()" }, classAttribute: "mk-table" }, queries: [{ propertyName: "rowDetail", first: true, predicate: MkTableRowDetail, descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: MkTableCell, isSignal: true }], viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-table__scroll\">\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @for (item of displayItems(); track trackItem(item); let i = $index) {\n        @if (item.kind === 'group') {\n          <tr class=\"mk-table__group-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(i)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr class=\"mk-table__detail-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(i)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow-x:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow-x:visible;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;border-radius:0}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"], dependencies: [{ kind: "component", type: MkCheckbox, selector: "mk-checkbox", inputs: ["checked", "indeterminate", "disabled", "invalid", "required", "size", "tone", "aria-label"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTable, isStandalone: true, selector: "mk-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stackAt: { classPropertyName: "stackAt", publicName: "stackAt", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, trackKey: { classPropertyName: "trackKey", publicName: "trackKey", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clientFilter: { classPropertyName: "clientFilter", publicName: "clientFilter", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", filters: "filtersChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange", expandedChange: "expandedChange", columnResize: "columnResize", columnReorder: "columnReorder", cellEdit: "cellEdit", groupToggle: "groupToggle", treeToggle: "treeToggle" }, host: { properties: { "class.mk-table--sticky": "stickyHeader() || isVirtual()", "class.mk-table--virtual": "isVirtual()", "class.mk-table--filterable": "filterable() && !stacked()", "class.mk-table--zebra": "zebra()", "class.mk-table--hover": "hover()", "class.mk-table--compact": "density() === 'compact'", "class.mk-table--clickable": "clickableRows()", "class.mk-table--selectable": "selectable()", "class.mk-table--expandable": "expandable()", "class.mk-table--grouped": "groupBy() !== null", "class.mk-table--stacked": "stacked()" }, classAttribute: "mk-table" }, queries: [{ propertyName: "rowDetail", first: true, predicate: MkTableRowDetail, descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: MkTableCell, isSignal: true }], viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #scroller\n  class=\"mk-table__scroll\"\n  [style.height]=\"scrollHeight()\"\n  [style.max-height]=\"scrollMaxHeight()\"\n  [attr.data-row-height]=\"isVirtual() ? effectiveRowHeight() : null\"\n  (scroll)=\"onScroll($event)\"\n>\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n    [attr.aria-rowcount]=\"isVirtual() ? displayItems().length + headerRows() : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (filterable() && !stacked()) {\n        <!-- Filter row: native controls styled with tokens, so the table entry\n             point stays free of the forms / datetime entries. -->\n        <tr class=\"mk-table__filter-row\">\n          @if (expandable()) {\n            <td class=\"mk-table__filter-cell mk-table__th--expand\"></td>\n          }\n          @if (selectable()) {\n            <td class=\"mk-table__filter-cell mk-table__th--select\"></td>\n          }\n          @for (col of orderedColumns(); track col.key) {\n            @let kind = filterKind(col);\n            <td\n              class=\"mk-table__filter-cell\"\n              [class.mk-table__th--pinned]=\"col.pinned\"\n              [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n              [style.width]=\"colStyleWidth(col)\"\n              [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n              [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            >\n              @if (kind === 'select') {\n                <select\n                  class=\"mk-table__filter-control mk-table__filter-select\"\n                  [class.mk-table__filter-control--active]=\"hasFilter(col.key)\"\n                  [attr.data-filter-key]=\"col.key\"\n                  [attr.aria-label]=\"filterLabel(col)\"\n                  (change)=\"onFilterSelect(col, $event)\"\n                >\n                  <option value=\"\" [selected]=\"!hasFilter(col.key)\">\n                    {{ col.filterPlaceholder ?? i18n.filterAny }}\n                  </option>\n                  @for (option of filterOptionsFor(col); track $index) {\n                    <option [value]=\"option.value\" [selected]=\"isFilterOption(col, option)\">\n                      {{ option.label }}\n                    </option>\n                  }\n                </select>\n              } @else if (kind) {\n                <span class=\"mk-table__filter\" [class.mk-table__filter--active]=\"hasFilter(col.key)\">\n                  <input\n                    class=\"mk-table__filter-control mk-table__filter-input\"\n                    [type]=\"kind === 'text' ? 'search' : kind\"\n                    [attr.inputmode]=\"kind === 'number' ? 'decimal' : null\"\n                    [attr.data-filter-key]=\"col.key\"\n                    [attr.aria-label]=\"filterLabel(col)\"\n                    [attr.placeholder]=\"filterPlaceholder(col)\"\n                    [value]=\"filterText(col.key)\"\n                    (input)=\"onFilterInput(col, $event)\"\n                    (keydown)=\"onFilterKeydown(col, $event)\"\n                  />\n                  @if (hasFilter(col.key)) {\n                    <button\n                      type=\"button\"\n                      class=\"mk-table__filter-clear\"\n                      [attr.aria-label]=\"i18n.clearFilter(col.header || col.key)\"\n                      (click)=\"clearFilter(col.key)\"\n                    >\n                      <span aria-hidden=\"true\">\u00D7</span>\n                    </button>\n                  }\n                </span>\n              }\n            </td>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @if (isVirtual() && topSpace() > 0) {\n        <tr class=\"mk-table__spacer\" aria-hidden=\"true\">\n          <td [attr.colspan]=\"totalColumns()\" [style.height.px]=\"topSpace()\"></td>\n        </tr>\n      }\n      @for (item of renderedItems(); track trackItem(item); let i = $index) {\n        @let idx = windowStart() + i;\n        @if (item.kind === 'group') {\n          <tr\n            class=\"mk-table__group-row\"\n            [attr.role]=\"stacked() ? 'row' : null\"\n            [attr.data-index]=\"idx\"\n            [attr.aria-rowindex]=\"isVirtual() ? idx + headerRows() + 1 : null\"\n          >\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [class.mk-table__row--even]=\"isVirtual() && idx % 2 === 1\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.data-index]=\"idx\"\n          [attr.aria-rowindex]=\"isVirtual() ? idx + headerRows() + 1 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(idx)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr\n            class=\"mk-table__detail-row\"\n            [attr.role]=\"stacked() ? 'row' : null\"\n            [attr.data-index]=\"idx\"\n          >\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(idx)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n      @if (isVirtual() && bottomSpace() > 0) {\n        <tr class=\"mk-table__spacer\" aria-hidden=\"true\">\n          <td [attr.colspan]=\"totalColumns()\" [style.height.px]=\"bottomSpace()\"></td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra:not(.mk-table--virtual)) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--even .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected.mk-table__row--even .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra:not(.mk-table--virtual)) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned,:host(.mk-table--zebra) .mk-table__body .mk-table__row--even .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__filter-cell{position:relative;padding:var(--mk-space-1) var(--mk-space-2);background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__filter-cell{position:sticky;top:var(--_filter-top, 0px);z-index:var(--mk-z-sticky)}:host(.mk-table--sticky) .mk-table__filter-cell.mk-table__th--pinned{z-index:calc(var(--mk-z-sticky) + 1)}.mk-table__filter{position:relative;display:flex;align-items:center;width:100%}.mk-table__filter-control{width:100%;min-width:4rem;height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-normal);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);outline:none;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-table__filter-control::placeholder{color:var(--mk-text-subtle)}.mk-table__filter-control:hover{border-color:var(--mk-border-strong)}.mk-table__filter-control:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:0px;border-color:var(--mk-primary)}.mk-table__filter-control--active,.mk-table__filter--active .mk-table__filter-control{border-color:var(--mk-primary)}.mk-table__filter--active .mk-table__filter-input{padding-inline-end:calc(var(--mk-space-2) + 1.5rem)}.mk-table__filter-input::-webkit-search-cancel-button,.mk-table__filter-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.mk-table__filter-select{cursor:pointer}.mk-table__filter-clear{position:absolute;inset-inline-end:var(--mk-space-1);top:50%;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;transform:translateY(-50%);font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:0;border-radius:var(--mk-radius-sm);cursor:pointer}@media(pointer:coarse){.mk-table__filter-clear:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__filter-clear:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-table__filter-clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:0px}.mk-table__spacer>td{padding:0;border:0}:host(.mk-table--virtual) .mk-table__row .mk-table__td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow:visible;max-height:none;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__spacer{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;max-height:none;height:auto;border-radius:0}.mk-table__filter-row{display:none}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td,.mk-table__filter-cell{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"], dependencies: [{ kind: "component", type: MkCheckbox, selector: "mk-checkbox", inputs: ["checked", "indeterminate", "disabled", "invalid", "required", "size", "tone", "aria-label"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTable, decorators: [{
             type: Component,
             args: [{ selector: 'mk-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkCheckbox, NgTemplateOutlet], host: {
                         class: 'mk-table',
-                        '[class.mk-table--sticky]': 'stickyHeader()',
+                        '[class.mk-table--sticky]': 'stickyHeader() || isVirtual()',
+                        '[class.mk-table--virtual]': 'isVirtual()',
+                        '[class.mk-table--filterable]': 'filterable() && !stacked()',
                         '[class.mk-table--zebra]': 'zebra()',
                         '[class.mk-table--hover]': 'hover()',
                         '[class.mk-table--compact]': "density() === 'compact'",
@@ -1155,8 +1762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-table--expandable]': 'expandable()',
                         '[class.mk-table--grouped]': 'groupBy() !== null',
                         '[class.mk-table--stacked]': 'stacked()',
-                    }, template: "<div class=\"mk-table__scroll\">\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @for (item of displayItems(); track trackItem(item); let i = $index) {\n        @if (item.kind === 'group') {\n          <tr class=\"mk-table__group-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(i)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr class=\"mk-table__detail-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(i)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow-x:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow-x:visible;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;border-radius:0}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stackAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackAt", required: false }] }], clickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableRows", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], trackKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKey", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], groupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], editInput: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], rowDetail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkTableRowDetail), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkTableCell), { isSignal: true }] }] } });
+                    }, template: "<div\n  #scroller\n  class=\"mk-table__scroll\"\n  [style.height]=\"scrollHeight()\"\n  [style.max-height]=\"scrollMaxHeight()\"\n  [attr.data-row-height]=\"isVirtual() ? effectiveRowHeight() : null\"\n  (scroll)=\"onScroll($event)\"\n>\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n    [attr.aria-rowcount]=\"isVirtual() ? displayItems().length + headerRows() : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (filterable() && !stacked()) {\n        <!-- Filter row: native controls styled with tokens, so the table entry\n             point stays free of the forms / datetime entries. -->\n        <tr class=\"mk-table__filter-row\">\n          @if (expandable()) {\n            <td class=\"mk-table__filter-cell mk-table__th--expand\"></td>\n          }\n          @if (selectable()) {\n            <td class=\"mk-table__filter-cell mk-table__th--select\"></td>\n          }\n          @for (col of orderedColumns(); track col.key) {\n            @let kind = filterKind(col);\n            <td\n              class=\"mk-table__filter-cell\"\n              [class.mk-table__th--pinned]=\"col.pinned\"\n              [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n              [style.width]=\"colStyleWidth(col)\"\n              [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n              [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            >\n              @if (kind === 'select') {\n                <select\n                  class=\"mk-table__filter-control mk-table__filter-select\"\n                  [class.mk-table__filter-control--active]=\"hasFilter(col.key)\"\n                  [attr.data-filter-key]=\"col.key\"\n                  [attr.aria-label]=\"filterLabel(col)\"\n                  (change)=\"onFilterSelect(col, $event)\"\n                >\n                  <option value=\"\" [selected]=\"!hasFilter(col.key)\">\n                    {{ col.filterPlaceholder ?? i18n.filterAny }}\n                  </option>\n                  @for (option of filterOptionsFor(col); track $index) {\n                    <option [value]=\"option.value\" [selected]=\"isFilterOption(col, option)\">\n                      {{ option.label }}\n                    </option>\n                  }\n                </select>\n              } @else if (kind) {\n                <span class=\"mk-table__filter\" [class.mk-table__filter--active]=\"hasFilter(col.key)\">\n                  <input\n                    class=\"mk-table__filter-control mk-table__filter-input\"\n                    [type]=\"kind === 'text' ? 'search' : kind\"\n                    [attr.inputmode]=\"kind === 'number' ? 'decimal' : null\"\n                    [attr.data-filter-key]=\"col.key\"\n                    [attr.aria-label]=\"filterLabel(col)\"\n                    [attr.placeholder]=\"filterPlaceholder(col)\"\n                    [value]=\"filterText(col.key)\"\n                    (input)=\"onFilterInput(col, $event)\"\n                    (keydown)=\"onFilterKeydown(col, $event)\"\n                  />\n                  @if (hasFilter(col.key)) {\n                    <button\n                      type=\"button\"\n                      class=\"mk-table__filter-clear\"\n                      [attr.aria-label]=\"i18n.clearFilter(col.header || col.key)\"\n                      (click)=\"clearFilter(col.key)\"\n                    >\n                      <span aria-hidden=\"true\">\u00D7</span>\n                    </button>\n                  }\n                </span>\n              }\n            </td>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @if (isVirtual() && topSpace() > 0) {\n        <tr class=\"mk-table__spacer\" aria-hidden=\"true\">\n          <td [attr.colspan]=\"totalColumns()\" [style.height.px]=\"topSpace()\"></td>\n        </tr>\n      }\n      @for (item of renderedItems(); track trackItem(item); let i = $index) {\n        @let idx = windowStart() + i;\n        @if (item.kind === 'group') {\n          <tr\n            class=\"mk-table__group-row\"\n            [attr.role]=\"stacked() ? 'row' : null\"\n            [attr.data-index]=\"idx\"\n            [attr.aria-rowindex]=\"isVirtual() ? idx + headerRows() + 1 : null\"\n          >\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [class.mk-table__row--even]=\"isVirtual() && idx % 2 === 1\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.data-index]=\"idx\"\n          [attr.aria-rowindex]=\"isVirtual() ? idx + headerRows() + 1 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(idx)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i: idx, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr\n            class=\"mk-table__detail-row\"\n            [attr.role]=\"stacked() ? 'row' : null\"\n            [attr.data-index]=\"idx\"\n          >\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(idx)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n      @if (isVirtual() && bottomSpace() > 0) {\n        <tr class=\"mk-table__spacer\" aria-hidden=\"true\">\n          <td [attr.colspan]=\"totalColumns()\" [style.height.px]=\"bottomSpace()\"></td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra:not(.mk-table--virtual)) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--even .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected.mk-table__row--even .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra:not(.mk-table--virtual)) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned,:host(.mk-table--zebra) .mk-table__body .mk-table__row--even .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__filter-cell{position:relative;padding:var(--mk-space-1) var(--mk-space-2);background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__filter-cell{position:sticky;top:var(--_filter-top, 0px);z-index:var(--mk-z-sticky)}:host(.mk-table--sticky) .mk-table__filter-cell.mk-table__th--pinned{z-index:calc(var(--mk-z-sticky) + 1)}.mk-table__filter{position:relative;display:flex;align-items:center;width:100%}.mk-table__filter-control{width:100%;min-width:4rem;height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-normal);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);outline:none;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-table__filter-control::placeholder{color:var(--mk-text-subtle)}.mk-table__filter-control:hover{border-color:var(--mk-border-strong)}.mk-table__filter-control:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:0px;border-color:var(--mk-primary)}.mk-table__filter-control--active,.mk-table__filter--active .mk-table__filter-control{border-color:var(--mk-primary)}.mk-table__filter--active .mk-table__filter-input{padding-inline-end:calc(var(--mk-space-2) + 1.5rem)}.mk-table__filter-input::-webkit-search-cancel-button,.mk-table__filter-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.mk-table__filter-select{cursor:pointer}.mk-table__filter-clear{position:absolute;inset-inline-end:var(--mk-space-1);top:50%;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;transform:translateY(-50%);font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:0;border-radius:var(--mk-radius-sm);cursor:pointer}@media(pointer:coarse){.mk-table__filter-clear:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__filter-clear:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-table__filter-clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:0px}.mk-table__spacer>td{padding:0;border:0}:host(.mk-table--virtual) .mk-table__row .mk-table__td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow:visible;max-height:none;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__spacer{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;max-height:none;height:auto;border-radius:0}.mk-table__filter-row{display:none}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td,.mk-table__filter-cell{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stackAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackAt", required: false }] }], clickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableRows", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], trackKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKey", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], groupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], clientFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientFilter", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], editInput: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], rowDetail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkTableRowDetail), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkTableCell), { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
 
 /**
  * Sort coordinator — apply `mkSort` to a table (or any container) to track
@@ -1326,6 +1933,14 @@ function sameSort(a, b) {
         return false;
     return a.active === b.active && a.direction === b.direction;
 }
+/** JSON with object keys sorted, so `{ a, b }` and `{ b, a }` compare equal. */
+function canonicalJson(value) {
+    return JSON.stringify(value, (_key, v) => v && typeof v === 'object' && !Array.isArray(v)
+        ? Object.fromEntries(Object.keys(v)
+            .sort()
+            .map((k) => [k, v[k]]))
+        : v);
+}
 /** Duck-typed Observable check, so rxjs is a type-only dependency here. */
 function isSubscribable(value) {
     return typeof value.subscribe === 'function';
@@ -1430,6 +2045,8 @@ class MkTableDataSource {
     ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
     _query = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_query" }] : /* istanbul ignore next */ []));
+    _filters = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filters" }] : /* istanbul ignore next */ []));
     /** Rows of the current page (`[]` until the first load lands). */
     rows = this._rows.asReadonly();
     /** Total row count across all pages (feed to `mk-pagination`'s `total`). */
@@ -1448,6 +2065,8 @@ class MkTableDataSource {
     filter = this._filter.asReadonly();
     /** Current structured query, or `null`. */
     query = this._query.asReadonly();
+    /** Current per-column filters, or `null`. */
+    filters = this._filters.asReadonly();
     /** True when a settled load reported no rows at all. */
     empty = computed(() => !this._loading() && this._total() === 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
@@ -1539,6 +2158,22 @@ class MkTableDataSource {
         this._page.set(1);
         this.load();
     }
+    /**
+     * Set (or clear with `null` / `{}`) the per-column filters from `mk-table`'s
+     * header filter row — bind `(filtersChange)="ds.setFilters($event)"` and
+     * turn the table's `clientFilter` off. Empty entries are dropped before the
+     * request; nothing left is sent as `null`. Resets to page 1 and loads at
+     * once (the table already debounces nothing, so debounce the fetcher if
+     * your API needs it). A no-op when unchanged.
+     */
+    setFilters(filters) {
+        const next = mkCompactFilters(filters);
+        if (canonicalJson(next) === canonicalJson(this._filters()))
+            return;
+        this._filters.set(next);
+        this._page.set(1);
+        this.load();
+    }
     /**
      * Re-run the current request immediately (e.g. after a mutation). Flushes a
      * pending debounced filter, since the request reads the live filter value.
@@ -1586,6 +2221,7 @@ class MkTableDataSource {
             sort: this._sort(),
             filter: this._filter(),
             query: this._query(),
+            filters: this._filters(),
         };
         let result;
         try {
@@ -1673,5 +2309,5 @@ class MkTableDataSource {
  * Generated bundle index. Do not edit.
  */
 
-export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkDownloadText, mkExportCsv, mkToCsv };
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkCompactFilters, mkDownloadText, mkExportCsv, mkToCsv };
 //# sourceMappingURL=mk-kit-ui-table.mjs.map