@mk-kit/ui 0.34.0

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

@@ -0,0 +1,1378 @@
+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 { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { MkLiveAnnouncer, MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { MkCheckbox } from '@mk-kit/ui/checkbox';
+
+/**
+ * Marks an `<ng-template>` as the expandable detail content for {@link MkTable}
+ * rows. The template's implicit context is the row object, so consumers can
+ * destructure it with `let-row`:
+ *
+ * ```html
+ * <mk-table [columns]="cols" [data]="rows()" expandable>
+ *   <ng-template mkTableRowDetail let-row>
+ *     <dl>… {{ row.notes }} …</dl>
+ *   </ng-template>
+ * </mk-table>
+ * ```
+ */
+class MkTableRowDetail {
+    /** The projected detail template, rendered once per expanded row. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTableRowDetail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkTableRowDetail, isStandalone: true, selector: "[mkTableRowDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTableRowDetail, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkTableRowDetail]',
+                }]
+        }] });
+
+/**
+ * Marks an `<ng-template>` as the renderer for one column's cells, named by the
+ * column `key`. Without it a cell can only be text — `MkTableColumn.format`
+ * returns a string — so anything richer (a status tag, an avatar, a progress
+ * bar, an action button) meant abandoning `mk-table` for a hand-rolled
+ * `<table>`.
+ *
+ * The value is the template's implicit context and the row is available as
+ * `let-row`:
+ *
+ * ```html
+ * <mk-table [columns]="cols" [data]="rows()">
+ *   <ng-template mkTableCell="status" let-value let-row="row">
+ *     <mk-tag [tone]="toneFor(value)">{{ label(value) }}</mk-tag>
+ *   </ng-template>
+ * </mk-table>
+ * ```
+ *
+ * A column with both a template and a `format` uses the template; `format`
+ * still applies to sorting/export paths that need a string.
+ */
+class MkTableCell {
+    /** Column key whose cells this template renders. */
+    mkTableCell = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkTableCell" }] : /* istanbul ignore next */ []));
+    /** The projected template, rendered once per cell in that column. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkTableCell, isStandalone: true, selector: "[mkTableCell]", inputs: { mkTableCell: { classPropertyName: "mkTableCell", publicName: "mkTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkTableCell]',
+                }]
+        }], propDecorators: { mkTableCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkTableCell", required: true }] }] } });
+
+/** Hard floor (px) for column resize when a column sets no `minWidth`. */
+const MIN_COL_WIDTH = 60;
+/** Upper bound advertised on resize separators (`aria-valuemax`). */
+const MAX_COL_WIDTH = 2000;
+/**
+ * Table — a themed data table built on a native `<table>` for accessibility.
+ * 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}.
+ *
+ * ```html
+ * <mk-table
+ *   [columns]="columns"
+ *   [data]="rows()"
+ *   stickyHeader
+ *   zebra
+ *   (sortChange)="onSort($event)"
+ *   (rowClick)="open($event)" />
+ * ```
+ */
+class MkTable {
+    announcer = inject(MkLiveAnnouncer);
+    i18n = inject(MK_I18N);
+    document = inject(DOCUMENT);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    destroyRef = inject(DestroyRef);
+    /**
+     * True while the table is narrower than {@link stackAt} and rendering cards.
+     *
+     * Driven by the element's own width rather than the viewport's: the question
+     * "do these columns fit" is about the space the table HAS, not the size of
+     * the screen. A table in a sidebar or a dialog should stack while the window
+     * around it is enormous.
+     */
+    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).
+        effect(() => {
+            this.stickyHeader();
+            this.density();
+            this.groupBy();
+            afterNextRender({ read: () => this.applyGroupTop() }, { injector: this.injector });
+        });
+        // Watch the host's width against `stackAt`. ResizeObserver rather than
+        // matchMedia because the trigger is the element's width, not the window's.
+        // Skipped entirely on the server and wherever the API is missing, leaving
+        // `stacked` false — the grid is the safe fallback, since it renders the
+        // same data with nothing dropped.
+        afterNextRender({
+            read: () => {
+                if (!this.isBrowser || typeof ResizeObserver === 'undefined')
+                    return;
+                const el = this.host.nativeElement;
+                const observer = new ResizeObserver(([entry]) => {
+                    const limit = this.stackAt();
+                    this.stacked.set(limit > 0 && entry.contentRect.width < limit);
+                });
+                observer.observe(el);
+                this.destroyRef.onDestroy(() => observer.disconnect());
+            },
+        }, { injector: this.injector });
+    }
+    /** Measures the thead and exposes it as the group rows' sticky offset. */
+    applyGroupTop() {
+        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`);
+    }
+    /** Column definitions (order = display order). */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Row objects to render. */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Pin the header to the top of the scroll container. */
+    stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Alternate row background for readability. */
+    zebra = input(false, { ...(ngDevMode ? { debugName: "zebra" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Highlight rows on hover. */
+    hover = input(true, { ...(ngDevMode ? { debugName: "hover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Row density. */
+    density = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /**
+     * Width in px below which each row renders as a CARD instead of a table row.
+     * `0` (default) never stacks.
+     *
+     * Measured on the table's own container, not the viewport — a table in a
+     * narrow sidebar should stack on a desktop, and a table on a tablet in
+     * landscape should not. Per-column behaviour is set with
+     * {@link MkTableColumn.stack}.
+     *
+     * A grid cannot survive a phone: eight columns become eight unreadable
+     * slivers, and horizontal scrolling loses the row you were reading. Cards
+     * keep one record together and put its header beside each value.
+     */
+    stackAt = input(0, { ...(ngDevMode ? { debugName: "stackAt" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Style rows as clickable and emit `rowClick`. */
+    clickableRows = input(false, { ...(ngDevMode ? { debugName: "clickableRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Message shown when there are no rows. */
+    emptyMessage = input(this.i18n.noData, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Render a leading checkbox column for row selection. */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Two-way bound array of selected rows. Use `[(selected)]` to bind, or read
+     * `selectionChange`. Rows are compared by {@link trackKey} when set, else by
+     * referential identity.
+     */
+    selected = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Property name identifying a row for selection equality. When omitted rows
+     * are matched by reference.
+     */
+    trackKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trackKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional per-row CSS class: called with each row, the returned string is
+     * appended to the row's class list (falsy → none). For state the consumer
+     * owns — an "active in the side panel" highlight, an unread accent — that
+     * `selectable`'s own selected style doesn't cover.
+     */
+    rowClass = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    /** Resolved class for a row (empty string when no `rowClass` is set). */
+    rowClassFor(row) {
+        return this.rowClass()?.(row) ?? '';
+    }
+    /**
+     * Render a leading expander column. Each row can reveal a detail panel
+     * supplied via an `<ng-template mkTableRowDetail let-row>`.
+     */
+    expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow only one row expanded at a time (accordion). */
+    singleExpand = input(false, { ...(ngDevMode ? { debugName: "singleExpand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Enable drag-to-resize on columns marked `resizable` (data-grid pro). */
+    resizableColumns = input(false, { ...(ngDevMode ? { debugName: "resizableColumns" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Enable drag-to-reorder of column headers (data-grid pro). */
+    reorderableColumns = input(false, { ...(ngDevMode ? { debugName: "reorderableColumns" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Group rows by a column key or an accessor. Renders a collapsible group
+     * header row (sticky, with a row count) above each group. Sorting still
+     * applies within groups; groups follow their first row's sorted position.
+     */
+    groupBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /** Formats a group header label; defaults to `String(value)`. */
+    groupLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when the sort column/direction changes. */
+    sortChange = output();
+    /** Emitted when a row is clicked (enable via `clickableRows`). */
+    rowClick = output();
+    /** Emitted with the new selection whenever it changes (enable via `selectable`). */
+    selectionChange = output();
+    /** Emitted with the currently expanded rows whenever they change. */
+    expandedChange = output();
+    /** Emitted when a column is resized (px). */
+    columnResize = output();
+    /** Emitted with the new column key order after a reorder. */
+    columnReorder = output();
+    /** Emitted when an inline-editable cell is saved. */
+    cellEdit = output();
+    /** Emitted when a group header is expanded or collapsed. */
+    groupToggle = output();
+    /** User-set column widths (px), keyed by column key. */
+    colWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colWidths" }] : /* istanbul ignore next */ []));
+    /** User-set column order (keys); `null` = the input order. */
+    colOrder = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colOrder" }] : /* istanbul ignore next */ []));
+    /** The cell currently being inline-edited. */
+    editing = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    /** Columns in display order, honouring any user reordering. */
+    orderedColumns = computed(() => {
+        const cols = this.columns();
+        const order = this.colOrder();
+        if (!order)
+            return cols;
+        const byKey = new Map(cols.map((c) => [c.key, c]));
+        const ordered = order.map((k) => byKey.get(k)).filter((c) => !!c);
+        // Append any columns not present in the saved order (e.g. newly added).
+        const seen = new Set(order);
+        for (const c of cols)
+            if (!seen.has(c.key))
+                ordered.push(c);
+        return ordered;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
+    // ── Stacked (card) layout ────────────────────────────────────────────────
+    // Three slots, so a card reads as a record rather than as a form: a heading
+    // line, labelled fields, and actions along the bottom. Columns keep their
+    // configured order within each slot.
+    /** Columns forming the card's heading line. */
+    stackTitleColumns = computed(() => this.orderedColumns().filter((c) => c.stack === 'title'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackTitleColumns" }] : /* istanbul ignore next */ []));
+    /** Columns rendered as `label / value` rows in the card body. */
+    stackFieldColumns = computed(() => this.orderedColumns().filter((c) => !c.stack), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackFieldColumns" }] : /* istanbul ignore next */ []));
+    /** Columns pinned to the bottom of the card, unlabelled. */
+    stackFooterColumns = computed(() => this.orderedColumns().filter((c) => c.stack === 'footer'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackFooterColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a stacked cell should show its column header as a label.
+     *
+     * An empty header means the column never had a name to show — an actions or
+     * chevron column — and an empty label box would just be a gap the reader has
+     * to account for.
+     */
+    hasStackLabel(col) {
+        return !!col.header?.trim();
+    }
+    /** The rendered width for a column, if the user resized it. */
+    colStyleWidth(col) {
+        // A card has one column, so a per-column width — configured or dragged —
+        // would pin the value box to a grid width that no longer exists.
+        if (this.stacked())
+            return null;
+        const w = this.colWidths()[col.key];
+        if (w != null)
+            return `${w}px`;
+        return col.width ?? null;
+    }
+    /** Sticky offsets for every pinned column, computed once per layout change. */
+    pinnedOffsets = computed(() => {
+        const map = new Map();
+        const cols = this.orderedColumns();
+        const widths = this.colWidths();
+        // Account for the leading select / expander columns at the inline start.
+        let left = (this.selectable() ? 44 : 0) + (this.expandable() ? 44 : 0);
+        for (const c of cols) {
+            if (c.pinned !== 'left')
+                continue;
+            map.set(c.key, left);
+            left += widths[c.key] ?? this.numericWidth(c);
+        }
+        let right = 0;
+        for (let i = cols.length - 1; i >= 0; i--) {
+            const c = cols[i];
+            if (c.pinned !== 'right')
+                continue;
+            map.set(c.key, right);
+            right += widths[c.key] ?? this.numericWidth(c);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedOffsets" }] : /* istanbul ignore next */ []));
+    /** Sticky offset (px) for a pinned column. */
+    pinnedOffset(col) {
+        return this.pinnedOffsets().get(col.key) ?? 0;
+    }
+    /** Pinning freezes a column against horizontal scroll. Cards do not scroll
+     *  sideways, so both the class and its inline offset are suppressed. */
+    isPinned(col, side) {
+        return !this.stacked() && col.pinned === side;
+    }
+    numericWidth(col) {
+        const w = col.width ? parseInt(col.width, 10) : NaN;
+        return Number.isFinite(w) ? w : 150;
+    }
+    // --- Column resize --------------------------------------------------------
+    resizeKey = null;
+    resizeStartX = 0;
+    resizeStartW = 0;
+    resizeMin = MIN_COL_WIDTH;
+    /** +1 in LTR, -1 in RTL — dragging toward the inline-end always widens. */
+    resizeSign = 1;
+    /** Whether the table currently renders right-to-left (SSR-safe). */
+    isRtl() {
+        const view = this.document.defaultView;
+        if (!view)
+            return false;
+        return view.getComputedStyle(this.host.nativeElement).direction === 'rtl';
+    }
+    resizeRaf = null;
+    pendingResizeX = 0;
+    /** Begin a drag-resize from a header handle. */
+    startResize(event, col) {
+        if (!this.resizableColumns() || !col.resizable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const th = event.target.closest('th');
+        this.resizeKey = col.key;
+        this.resizeStartX = event.clientX;
+        this.resizeSign = this.isRtl() ? -1 : 1;
+        this.resizeStartW =
+            this.colWidths()[col.key] ?? th?.getBoundingClientRect().width ?? this.numericWidth(col);
+        this.resizeMin = col.minWidth ?? MIN_COL_WIDTH;
+        this.document.addEventListener('pointermove', this.onResizeMove);
+        this.document.addEventListener('pointerup', this.onResizeEnd);
+        this.document.addEventListener('pointercancel', this.onResizeEnd);
+    }
+    /** rAF-coalesced: at most one width write (and CD pass) per frame. */
+    onResizeMove = (event) => {
+        if (!this.resizeKey)
+            return;
+        this.pendingResizeX = event.clientX;
+        if (this.resizeRaf != null)
+            return;
+        this.resizeRaf = this.document.defaultView?.requestAnimationFrame(() => {
+            this.resizeRaf = null;
+            this.applyPendingResize();
+        }) ?? null;
+    };
+    applyPendingResize() {
+        if (!this.resizeKey)
+            return;
+        const width = Math.max(this.resizeMin, Math.round(this.resizeStartW +
+            this.resizeSign * (this.pendingResizeX - this.resizeStartX)));
+        this.colWidths.update((w) => ({ ...w, [this.resizeKey]: width }));
+    }
+    onResizeEnd = () => {
+        if (this.resizeRaf != null) {
+            // Flush (don't drop) the last pending move so a fast drag lands exactly.
+            this.document.defaultView?.cancelAnimationFrame(this.resizeRaf);
+            this.resizeRaf = null;
+            this.applyPendingResize();
+        }
+        if (this.resizeKey) {
+            const col = this.columns().find((c) => c.key === this.resizeKey);
+            const width = this.colWidths()[this.resizeKey] ?? Math.round(this.resizeStartW);
+            this.columnResize.emit({ key: this.resizeKey, width });
+            if (col)
+                this.announcer.announce(this.i18n.columnWidth(col.header, width));
+        }
+        this.resizeKey = null;
+        this.document.removeEventListener('pointermove', this.onResizeMove);
+        this.document.removeEventListener('pointerup', this.onResizeEnd);
+        this.document.removeEventListener('pointercancel', this.onResizeEnd);
+    };
+    /** Keyboard column resize on the focused separator (APG window splitter). */
+    onResizeKeydown(event, col) {
+        if (!this.resizableColumns() || !col.resizable)
+            return;
+        const step = event.shiftKey ? 1 : 10;
+        let delta = 0;
+        if (event.key === 'ArrowLeft')
+            delta = -step;
+        else if (event.key === 'ArrowRight')
+            delta = step;
+        else
+            return;
+        // Mirror in RTL so pressing toward the inline-end always grows the column.
+        if (this.isRtl())
+            delta = -delta;
+        event.preventDefault();
+        event.stopPropagation();
+        const min = col.minWidth ?? MIN_COL_WIDTH;
+        const th = event.target.closest('th');
+        const current = this.colWidths()[col.key] ??
+            th?.getBoundingClientRect().width ??
+            this.numericWidth(col);
+        const width = Math.max(min, Math.round(current + delta));
+        this.colWidths.update((w) => ({ ...w, [col.key]: width }));
+        this.columnResize.emit({ key: col.key, width });
+        this.announcer.announce(this.i18n.columnWidth(col.header, width));
+    }
+    /** The current width of a column, for the separator's aria-valuenow. */
+    resizeValueNow(col) {
+        return Math.round(this.colWidths()[col.key] ?? this.numericWidth(col));
+    }
+    /** The resize floor for a column, for the separator's aria-valuemin. */
+    resizeValueMin(col) {
+        return col.minWidth ?? MIN_COL_WIDTH;
+    }
+    /** Advertised resize ceiling (aria-valuemax) — a sane constant bound. */
+    resizeValueMax = MAX_COL_WIDTH;
+    ngOnDestroy() {
+        if (this.resizeRaf != null) {
+            this.document.defaultView?.cancelAnimationFrame(this.resizeRaf);
+            this.resizeRaf = null;
+        }
+        this.document.removeEventListener('pointermove', this.onResizeMove);
+        this.document.removeEventListener('pointerup', this.onResizeEnd);
+        this.document.removeEventListener('pointercancel', this.onResizeEnd);
+    }
+    // --- Column reorder (native drag) -----------------------------------------
+    dragKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragKey" }] : /* istanbul ignore next */ []));
+    onColDragStart(event, col) {
+        if (!this.reorderableColumns())
+            return;
+        this.dragKey.set(col.key);
+        event.dataTransfer?.setData('text/plain', col.key);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    onColDragOver(event) {
+        if (this.reorderableColumns() && this.dragKey())
+            event.preventDefault();
+    }
+    onColDrop(event, target) {
+        const from = this.dragKey();
+        this.dragKey.set(null);
+        if (!from || from === target.key)
+            return;
+        event.preventDefault();
+        const order = this.orderedColumns().map((c) => c.key);
+        const toIdx = order.indexOf(target.key);
+        this.moveColumn(from, toIdx);
+    }
+    onColDragEnd() {
+        this.dragKey.set(null);
+    }
+    /** Move a column to `toIdx` in the display order and announce it. */
+    moveColumn(key, toIdx) {
+        const order = this.orderedColumns().map((c) => c.key);
+        const fromIdx = order.indexOf(key);
+        if (fromIdx < 0 || toIdx < 0 || toIdx >= order.length || fromIdx === toIdx) {
+            return;
+        }
+        order.splice(toIdx, 0, order.splice(fromIdx, 1)[0]);
+        this.colOrder.set(order);
+        this.columnReorder.emit(order);
+        const col = this.columns().find((c) => c.key === key);
+        if (col) {
+            this.announcer.announce(this.i18n.columnMoved(col.header, toIdx + 1, order.length));
+        }
+    }
+    /** Keyboard column reorder: Alt+Arrow moves the focused header. */
+    onReorderKeydown(event, col) {
+        if (!this.reorderableColumns() || col.pinned || !event.altKey)
+            return;
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            return;
+        // Swallow the combo even when the move is a no-op (first column moved
+        // further left, last moved right) — otherwise Alt+Arrow falls through to
+        // the browser's history Back/Forward and navigates away from the grid.
+        event.preventDefault();
+        const order = this.orderedColumns().map((c) => c.key);
+        const idx = order.indexOf(col.key);
+        if (event.key === 'ArrowLeft' && idx > 0) {
+            this.moveColumn(col.key, idx - 1);
+        }
+        else if (event.key === 'ArrowRight' && idx < order.length - 1) {
+            this.moveColumn(col.key, idx + 1);
+        }
+    }
+    // --- Inline cell edit -----------------------------------------------------
+    isEditing(index, col) {
+        const e = this.editing();
+        return !!e && e.index === index && e.key === col.key;
+    }
+    /** The cell element being edited, so focus can be restored after. */
+    editingCell = null;
+    /** The inline-edit input, focused once it renders. */
+    editInput = viewChild('editInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editInput" }] : /* istanbul ignore next */ []));
+    startEdit(index, col, event) {
+        if (!col.editable)
+            return;
+        event?.stopPropagation();
+        this.editingCell =
+            event?.target?.closest('td') ??
+                null;
+        this.editing.set({ index, key: col.key });
+        // Explicit focus once the input exists — a dynamically inserted
+        // `autofocus` attribute is not honoured after initial page load.
+        afterNextRender(() => this.editInput()?.nativeElement.focus(), {
+            injector: this.injector,
+        });
+    }
+    /** Keyboard path into edit mode (Enter / F2 on a focused editable cell). */
+    onCellKeydown(event, index, col) {
+        if (!col.editable || this.isEditing(index, col))
+            return;
+        if (event.key === 'Enter' || event.key === 'F2') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.startEdit(index, col, event);
+        }
+    }
+    commitEdit(row, col, value, restoreFocus = false) {
+        this.editing.set(null);
+        this.cellEdit.emit({ row, key: col.key, value });
+        this.announcer.announce(this.i18n.cellSaved(value));
+        if (restoreFocus)
+            this.editingCell?.focus();
+        this.editingCell = null;
+    }
+    cancelEdit(restoreFocus = false) {
+        this.editing.set(null);
+        if (restoreFocus)
+            this.editingCell?.focus();
+        this.editingCell = null;
+    }
+    onEditKeydown(event, row, col) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitEdit(row, col, event.target.value, true);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelEdit(true);
+        }
+    }
+    /** The projected row-detail template (enable via `expandable`). */
+    rowDetail = contentChild(MkTableRowDetail, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowDetail" }] : /* istanbul ignore next */ []));
+    /** Per-column cell templates, projected as `<ng-template mkTableCell="key">`. */
+    cellTemplates = contentChildren(MkTableCell, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    cellTemplateByKey = computed(() => {
+        const map = new Map();
+        for (const t of this.cellTemplates())
+            map.set(t.mkTableCell(), t);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplateByKey" }] : /* istanbul ignore next */ []));
+    /** The template registered for a column, or null to fall back to text. */
+    cellTemplateFor(key) {
+        return this.cellTemplateByKey().get(key)?.template ?? null;
+    }
+    sortKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
+    sortDir = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDir" }] : /* istanbul ignore next */ []));
+    /** Stable id prefix so each detail row can be referenced by aria-controls. */
+    detailIdBase = mkUniqueId('mk-table-detail');
+    /** Total rendered columns, including the select and expander columns. */
+    totalColumns = computed(() => this.columns().length +
+        (this.selectable() ? 1 : 0) +
+        (this.expandable() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Shared locale-sensitive collator for string sorting. `localeCompare`
+     * re-resolves locale data on every call; one cached `Intl.Collator` makes
+     * large-table sorts several-fold faster with the same default-locale order.
+     */
+    static sortCollator = new Intl.Collator();
+    /** Data sorted by the active column, or the input order when unsorted. */
+    sortedData = computed(() => {
+        const key = this.sortKey();
+        const dir = this.sortDir();
+        const rows = this.data();
+        if (!key || !dir)
+            return rows;
+        const compare = (a, b) => {
+            const av = a[key];
+            const bv = b[key];
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return -1;
+            if (bv == null)
+                return 1;
+            if (typeof av === 'number' && typeof bv === 'number')
+                return av - bv;
+            return MkTable.sortCollator.compare(String(av), String(bv));
+        };
+        // Negate the comparator for desc (instead of reversing) so the sort stays
+        // stable and null ordering is consistent in both directions.
+        return [...rows].sort(dir === 'desc' ? (a, b) => -compare(a, b) : compare);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    /** `aria-sort` value for a header cell. */
+    ariaSort(col) {
+        if (!col.sortable)
+            return null;
+        if (this.sortKey() !== col.key)
+            return 'none';
+        return this.sortDir() === 'asc' ? 'ascending' : 'descending';
+    }
+    /** Glyph indicating a column's sort state. */
+    sortGlyph(col) {
+        if (this.sortKey() !== col.key)
+            return '↕';
+        return this.sortDir() === 'asc' ? '↑' : '↓';
+    }
+    /** Raw cell value, handed to an `[mkTableCell]` template unformatted. */
+    cellValue(row, col) {
+        return row[col.key];
+    }
+    /** Rendered text for a cell, applying the column formatter if present. */
+    cellText(row, col) {
+        const raw = row[col.key];
+        if (col.format)
+            return col.format(raw, row);
+        return raw == null ? '' : String(raw);
+    }
+    onSort(col) {
+        if (!col.sortable)
+            return;
+        let direction;
+        if (this.sortKey() !== col.key) {
+            this.sortKey.set(col.key);
+            this.sortDir.set('asc');
+            direction = 'asc';
+        }
+        else if (this.sortDir() === 'asc') {
+            this.sortDir.set('desc');
+            direction = 'desc';
+        }
+        else {
+            // desc -> cleared
+            this.sortKey.set(null);
+            this.sortDir.set(null);
+            direction = 'none';
+        }
+        this.sortChange.emit({ key: col.key, direction });
+        this.announcer.announce(direction === 'none'
+            ? this.i18n.sortingCleared(col.header)
+            : this.i18n.sortedBy(col.header, direction));
+    }
+    onRowClick(row) {
+        if (this.clickableRows())
+            this.rowClick.emit(row);
+    }
+    /** Keyboard activation for clickable rows (Enter / Space). */
+    onRowKeydown(event, row) {
+        if (!this.clickableRows())
+            return;
+        if (event.target !== event.currentTarget)
+            return; // ignore inner controls
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.rowClick.emit(row);
+        }
+    }
+    /** Stable row identity for `@for` tracking (trackKey when set, else the row). */
+    trackRow = (row) => this.rowKey(row);
+    /** Leading cell text used to label per-row controls for screen readers. */
+    rowLabel(row) {
+        const first = this.orderedColumns()[0];
+        return first ? this.cellText(row, first) : '';
+    }
+    // --- Selection ------------------------------------------------------------
+    rowKey(row) {
+        const key = this.trackKey();
+        return key ? row[key] : row;
+    }
+    /** Selected row keys as a Set — O(1) membership per cell per CD pass. */
+    selectedKeys = computed(() => new Set(this.selected().map((r) => this.rowKey(r))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    /** Whether `row` is currently selected. */
+    isSelected(row) {
+        return this.selectedKeys().has(this.rowKey(row));
+    }
+    /** True when every visible row is selected. */
+    allSelected = computed(() => {
+        const rows = this.sortedData();
+        const keys = this.selectedKeys();
+        return rows.length > 0 && rows.every((row) => keys.has(this.rowKey(row)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    /** True when some — but not all — visible rows are selected. */
+    someSelected = computed(() => {
+        const keys = this.selectedKeys();
+        return (this.sortedData().some((row) => keys.has(this.rowKey(row))) &&
+            !this.allSelected());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    commitSelection(next) {
+        this.selected.set(next);
+        this.selectionChange.emit(next);
+    }
+    /** Toggle a single row's selection without triggering `rowClick`. */
+    toggleRow(row) {
+        const rk = this.rowKey(row);
+        const current = this.selected();
+        const next = this.selectedKeys().has(rk)
+            ? current.filter((r) => this.rowKey(r) !== rk)
+            : [...current, row];
+        this.commitSelection(next);
+    }
+    /** Select or deselect all visible rows. */
+    toggleAll() {
+        const rows = this.sortedData();
+        const current = this.selected();
+        if (this.allSelected()) {
+            const visible = new Set(rows.map((r) => this.rowKey(r)));
+            this.commitSelection(current.filter((r) => !visible.has(this.rowKey(r))));
+        }
+        else {
+            const has = new Set(current.map((r) => this.rowKey(r)));
+            this.commitSelection([
+                ...current,
+                ...rows.filter((r) => !has.has(this.rowKey(r))),
+            ]);
+        }
+    }
+    // --- Grouping ---------------------------------------------------------------
+    /** Group values currently collapsed. */
+    collapsedGroups = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedGroups" }] : /* istanbul ignore next */ []));
+    /** Rows grouped by {@link groupBy}, or `null` when grouping is off. */
+    groups = computed(() => {
+        const by = this.groupBy();
+        if (by == null)
+            return null;
+        const accessor = typeof by === 'function'
+            ? by
+            : (row) => row[by];
+        const map = new Map();
+        for (const row of this.sortedData()) {
+            const key = accessor(row);
+            const bucket = map.get(key);
+            if (bucket)
+                bucket.push(row);
+            else
+                map.set(key, [row]);
+        }
+        const label = this.groupLabel();
+        return [...map.entries()].map(([key, rows]) => ({
+            key,
+            label: label ? label(key, rows) : String(key),
+            rows,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /**
+     * The tbody render list: group headers interleaved with their (expanded)
+     * rows when grouping is on, else just the sorted rows.
+     */
+    displayItems = computed(() => {
+        const groups = this.groups();
+        if (!groups) {
+            return this.sortedData().map((row) => ({ kind: 'row', row }));
+        }
+        const collapsed = this.collapsedGroups();
+        const items = [];
+        for (const group of groups) {
+            items.push({ kind: 'group', group });
+            if (!collapsed.has(group.key)) {
+                for (const row of group.rows)
+                    items.push({ kind: 'row', row });
+            }
+        }
+        return items;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+    /** `@for` identity: group headers by value, rows by {@link trackRow}. */
+    trackItem = (item) => item.kind === 'group' ? `mk-group:${String(item.group.key)}` : this.rowKey(item.row);
+    /** Whether a group is currently collapsed. */
+    isGroupCollapsed(key) {
+        return this.collapsedGroups().has(key);
+    }
+    /** Collapse or expand a group header. */
+    onGroupToggle(group) {
+        const next = new Set(this.collapsedGroups());
+        const collapsed = !next.has(group.key);
+        if (collapsed)
+            next.add(group.key);
+        else
+            next.delete(group.key);
+        this.collapsedGroups.set(next);
+        this.groupToggle.emit({ key: group.key, collapsed });
+    }
+    /** Collapse every group. */
+    collapseAllGroups() {
+        const groups = this.groups();
+        if (groups)
+            this.collapsedGroups.set(new Set(groups.map((g) => g.key)));
+    }
+    /** Expand every group. */
+    expandAllGroups() {
+        this.collapsedGroups.set(new Set());
+    }
+    // --- Expansion ------------------------------------------------------------
+    expandedKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    /** Whether `row`'s detail panel is currently expanded. */
+    isExpanded(row) {
+        return this.expandedKeys().has(this.rowKey(row));
+    }
+    /** The DOM id of a row's detail panel (for `aria-controls`). */
+    detailId(index) {
+        return `${this.detailIdBase}-${index}`;
+    }
+    /** Toggle a row's detail panel, honouring `singleExpand`. */
+    toggleExpand(row, event) {
+        event?.stopPropagation();
+        const rk = this.rowKey(row);
+        const open = this.expandedKeys().has(rk);
+        const next = this.singleExpand() ? new Set() : new Set(this.expandedKeys());
+        if (open)
+            next.delete(rk);
+        else
+            next.add(rk);
+        this.expandedKeys.set(next);
+        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 } }, outputs: { selected: "selectedChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange", expandedChange: "expandedChange", columnResize: "columnResize", columnReorder: "columnReorder", cellEdit: "cellEdit", groupToggle: "groupToggle" }, 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 class=\"mk-table__table\" [attr.role]=\"stacked() ? 'table' : null\">\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() ? '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          [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) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 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) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title' }\"\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\">\n  <td\n    class=\"mk-table__td\"\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    <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__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)}}\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--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()',
+                    }, 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 class=\"mk-table__table\" [attr.role]=\"stacked() ? 'table' : null\">\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() ? '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          [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) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 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) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title' }\"\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\">\n  <td\n    class=\"mk-table__td\"\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    <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__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)}}\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"] }], 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 }] }] } });
+
+/**
+ * Sort coordinator — apply `mkSort` to a table (or any container) to track
+ * which column is sorted and in which direction. It holds no data: register
+ * headers with `mkSortHeader`, then re-sort your rows in the
+ * `(mkSortChange)` handler. Mirrors the Angular Material `matSort` model but
+ * signal-based.
+ *
+ * Clicking a header cycles asc → desc → unsorted (set `mkSortDisableClear` to
+ * cycle asc ↔ desc only). `mkSortStart` flips the initial direction.
+ *
+ * ```html
+ * <table mkSort mkSortActive="name" mkSortDirection="asc"
+ *        (mkSortChange)="sortData($event)">
+ *   <thead><tr>
+ *     <th mkSortHeader="name">Name</th>
+ *     <th mkSortHeader="size" mkSortHeaderStart="desc">Size</th>
+ *   </tr></thead>
+ *   …
+ * </table>
+ * ```
+ */
+class MkSort {
+    announcer = inject(MkLiveAnnouncer);
+    i18n = inject(MK_I18N);
+    /** Id of the currently sorted column (two-way; empty when unsorted). */
+    active = model('', { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), alias: 'mkSortActive' });
+    /** Current sort direction (two-way). */
+    direction = model('none', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), alias: 'mkSortDirection' });
+    /** Direction the first click on a header applies. Default `asc`. */
+    start = input('asc', { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), alias: 'mkSortStart' });
+    /** Disable sorting for every header. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'mkSortDisabled' });
+    /** Remove the "unsorted" step so headers cycle asc ↔ desc only. */
+    disableClear = input(false, { ...(ngDevMode ? { debugName: "disableClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'mkSortDisableClear' });
+    /** Emits the new sort state whenever a header is activated. */
+    sortChange = output({ alias: 'mkSortChange' });
+    /** Advance the sort state for the given header (called on click/keyboard). */
+    sort(header) {
+        if (this.disabled() || header.disabled())
+            return;
+        const id = header.id();
+        if (this.active() !== id) {
+            this.active.set(id);
+            this.direction.set(this.startFor(header));
+        }
+        else {
+            const next = this.nextDirection(header, this.direction());
+            this.direction.set(next);
+            if (next === 'none')
+                this.active.set('');
+        }
+        const state = {
+            active: this.active(),
+            direction: this.direction(),
+        };
+        this.sortChange.emit(state);
+        this.announce(header, state.direction);
+    }
+    /** Whether the given column id is the active, non-cleared sort. */
+    isActive(id) {
+        return this.active() === id && this.direction() !== 'none';
+    }
+    startFor(header) {
+        return header.start() ?? this.start();
+    }
+    nextDirection(header, current) {
+        const order = this.startFor(header) === 'desc' ? ['desc', 'asc'] : ['asc', 'desc'];
+        if (!this.disableClear())
+            order.push('none');
+        const index = order.indexOf(current);
+        return order[(index + 1) % order.length];
+    }
+    announce(header, direction) {
+        const label = header.sortLabel() || header.id();
+        const message = direction === 'none'
+            ? this.i18n.sortingCleared(label)
+            : this.i18n.sortedBy(label, direction === 'asc' ? 'asc' : 'desc');
+        this.announcer.announce(message, 'polite');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSort, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkSort, isStandalone: true, selector: "[mkSort]", inputs: { active: { classPropertyName: "active", publicName: "mkSortActive", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "mkSortDirection", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "mkSortStart", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "mkSortDisabled", isSignal: true, isRequired: false, transformFunction: null }, disableClear: { classPropertyName: "disableClear", publicName: "mkSortDisableClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "mkSortActiveChange", direction: "mkSortDirectionChange", sortChange: "mkSortChange" }, exportAs: ["mkSort"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSort, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkSort]',
+                    exportAs: 'mkSort',
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortActive", required: false }] }, { type: i0.Output, args: ["mkSortActiveChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortDirection", required: false }] }, { type: i0.Output, args: ["mkSortDirectionChange"] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortStart", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortDisabled", required: false }] }], disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortDisableClear", required: false }] }], sortChange: [{ type: i0.Output, args: ["mkSortChange"] }] } });
+
+/**
+ * Sort header — attach `mkSortHeader` to a header cell (`<th>`) inside an
+ * element carrying `mkSort`. It wraps the projected header text in a real
+ * `<button>` (so assistive tech hears an operable control), adds a directional
+ * arrow (faint on hover, solid when active), reflects `aria-sort` on the cell,
+ * and toggles the sort on click or Enter/Space.
+ *
+ * ```html
+ * <th mkSortHeader="email" mkSortHeaderLabel="Email address">Email</th>
+ * ```
+ */
+class MkSortHeader {
+    sort = inject(MkSort);
+    /** Column id this header sorts by (the `mkSortHeader` value). */
+    id = input('', { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'mkSortHeader' });
+    /** Per-header override for the initial sort direction. */
+    start = input(undefined, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), alias: 'mkSortHeaderStart' });
+    /** Disable sorting for just this header. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'mkSortHeaderDisabled' });
+    /** Accessible label used in sort announcements (defaults to the id). */
+    sortLabel = input('', { ...(ngDevMode ? { debugName: "sortLabel" } : /* istanbul ignore next */ {}), alias: 'mkSortHeaderLabel' });
+    /** Disabled if this header or the whole `mkSort` is disabled. */
+    isDisabled = computed(() => this.disabled() || this.sort.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether this header is the active, non-cleared sort. */
+    isActive = computed(() => this.sort.isActive(this.id()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    /** Active direction, or `none` when this header is not the active sort. */
+    direction = computed(() => this.isActive() ? this.sort.direction() : 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** `aria-sort` value for the header cell. */
+    ariaSort = computed(() => {
+        if (!this.isActive())
+            return 'none';
+        return this.sort.direction() === 'asc' ? 'ascending' : 'descending';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.isDisabled())
+            this.sort.sort(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSortHeader, isStandalone: true, selector: "[mkSortHeader]", inputs: { id: { classPropertyName: "id", publicName: "mkSortHeader", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "mkSortHeaderStart", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "mkSortHeaderDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "mkSortHeaderLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-sort-header--active": "isActive()", "class.mk-sort-header--disabled": "isDisabled()", "attr.aria-sort": "ariaSort()" }, classAttribute: "mk-sort-header" }, ngImport: i0, template: "<!-- A real <button> rather than a clickable th: the cell keeps aria-sort,\n     the button provides the operable-control semantics (and native\n     Enter/Space activation) a screen-reader user expects. -->\n<button\n  type=\"button\"\n  class=\"mk-sort-header__button\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"mk-sort-header__label\"><ng-content /></span>\n  @if (!isDisabled()) {\n    <span\n      class=\"mk-sort-header__arrow\"\n      [class.mk-sort-header__arrow--active]=\"isActive()\"\n      [class.mk-sort-header__arrow--desc]=\"direction() === 'desc'\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{white-space:nowrap}:host(.mk-sort-header--active){color:var(--mk-primary)}.mk-sort-header__button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--mk-sort-header-pad-y, 0px)) calc(-1 * var(--mk-sort-header-pad-x, 0px));padding:var(--mk-sort-header-pad-y, 0px) var(--mk-sort-header-pad-x, 0px);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}.mk-sort-header__button:disabled{cursor:default}.mk-sort-header__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-sort-header__arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-sort-header__button:hover .mk-sort-header__arrow,.mk-sort-header__button:focus-visible .mk-sort-header__arrow{opacity:.45}.mk-sort-header__arrow--active{opacity:1}.mk-sort-header__arrow--desc{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.mk-sort-header__arrow{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSortHeader, decorators: [{
+            type: Component,
+            args: [{ selector: '[mkSortHeader]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-sort-header',
+                        '[class.mk-sort-header--active]': 'isActive()',
+                        '[class.mk-sort-header--disabled]': 'isDisabled()',
+                        '[attr.aria-sort]': 'ariaSort()',
+                    }, template: "<!-- A real <button> rather than a clickable th: the cell keeps aria-sort,\n     the button provides the operable-control semantics (and native\n     Enter/Space activation) a screen-reader user expects. -->\n<button\n  type=\"button\"\n  class=\"mk-sort-header__button\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"mk-sort-header__label\"><ng-content /></span>\n  @if (!isDisabled()) {\n    <span\n      class=\"mk-sort-header__arrow\"\n      [class.mk-sort-header__arrow--active]=\"isActive()\"\n      [class.mk-sort-header__arrow--desc]=\"direction() === 'desc'\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{white-space:nowrap}:host(.mk-sort-header--active){color:var(--mk-primary)}.mk-sort-header__button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--mk-sort-header-pad-y, 0px)) calc(-1 * var(--mk-sort-header-pad-x, 0px));padding:var(--mk-sort-header-pad-y, 0px) var(--mk-sort-header-pad-x, 0px);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}.mk-sort-header__button:disabled{cursor:default}.mk-sort-header__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-sort-header__arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-sort-header__button:hover .mk-sort-header__arrow,.mk-sort-header__button:focus-visible .mk-sort-header__arrow{opacity:.45}.mk-sort-header__arrow--active{opacity:1}.mk-sort-header__arrow--desc{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.mk-sort-header__arrow{transition:none}}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortHeader", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortHeaderStart", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortHeaderDisabled", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSortHeaderLabel", required: false }] }] } });
+
+/** Default debounce applied to {@link MkTableDataSource.setFilter}. */
+const DEFAULT_FILTER_DEBOUNCE = 300;
+/** Default page size, matching `mk-pagination`. */
+const DEFAULT_PAGE_SIZE = 10;
+/** Normalise any of the kit's sort payload shapes to `MkSortState | null`. */
+function normalizeSort(sort) {
+    if (!sort)
+        return null;
+    const active = 'active' in sort ? sort.active : sort.key;
+    if (!active || sort.direction === 'none')
+        return null;
+    return { active, direction: sort.direction };
+}
+/** Whether two normalised sort states describe the same ordering. */
+function sameSort(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.active === b.active && a.direction === b.direction;
+}
+/** Duck-typed Observable check, so rxjs is a type-only dependency here. */
+function isSubscribable(value) {
+    return typeof value.subscribe === 'function';
+}
+/**
+ * Server-side data adapter for `mk-table` — the page/sort/filter plumbing every
+ * admin screen otherwise hand-rolls. A plain class (no component, no injection
+ * required): give it a fetcher and bind its signals; every setter re-queries
+ * the server and **stale responses never overwrite newer state** (latest-wins).
+ *
+ * - `setFilter` is debounced (default 300 ms); page, sort and page size load
+ *   immediately. Sort, filter and page-size changes reset to page 1.
+ * - `rows` keeps its previous value while loading and on error, so the table
+ *   never blanks mid-transition; `error` is cleared by the next successful
+ *   load.
+ * - Created in an injection context (a component field initialiser) it hooks
+ *   `DestroyRef` and cleans up automatically; anywhere else, call
+ *   {@link destroy} yourself.
+ *
+ * ```ts
+ * interface User { id: number; name: string; email: string; }
+ *
+ * @Component({
+ *   imports: [MkTable, MkPagination, MkInput],
+ *   template: `
+ *     <input
+ *       mkInput
+ *       type="search"
+ *       placeholder="Search users…"
+ *       (input)="ds.setFilter($any($event.target).value)"
+ *     />
+ *
+ *     <mk-table
+ *       [columns]="columns"
+ *       [data]="ds.rows()"
+ *       (sortChange)="ds.setSort($event)"
+ *     />
+ *     @if (ds.error()) { <p role="alert">Failed to load.</p> }
+ *     @if (ds.empty()) { <p>No users match.</p> }
+ *
+ *     <mk-pagination
+ *       [total]="ds.total()"
+ *       [pageSize]="ds.pageSize()"
+ *       [page]="ds.page()"
+ *       (pageChange)="ds.setPage($event)"
+ *     />
+ *   `,
+ * })
+ * export class UsersPage {
+ *   private readonly http = inject(HttpClient);
+ *
+ *   readonly columns: MkTableColumn<User>[] = [
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email', sortable: true },
+ *   ];
+ *
+ *   // Field initialiser = injection context, so cleanup is automatic.
+ *   readonly ds = new MkTableDataSource<User>(
+ *     (req) =>
+ *       this.http.get<MkDataPage<User>>('/api/users', {
+ *         params: {
+ *           page: req.page,
+ *           size: req.pageSize,
+ *           q: req.filter,
+ *           ...(req.sort && {
+ *             sort: `${req.sort.active},${req.sort.direction}`,
+ *           }),
+ *         },
+ *       }),
+ *     { pageSize: 20 },
+ *   );
+ * }
+ * ```
+ *
+ * With a custom `mkSort` table, forward the directive instead of binding:
+ *
+ * ```ts
+ * private readonly sort = viewChild.required(MkSort);
+ * constructor() {
+ *   afterNextRender(() => this.ds.connectSort(this.sort()));
+ * }
+ * ```
+ */
+class MkTableDataSource {
+    fetcher;
+    debounceMs;
+    _rows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    _total = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_total" }] : /* istanbul ignore next */ []));
+    _loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+    _error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
+    _page = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_page" }] : /* istanbul ignore next */ []));
+    _pageSize = signal(DEFAULT_PAGE_SIZE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+    _sort = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sort" }] : /* istanbul ignore next */ []));
+    _filter = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filter" }] : /* 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`). */
+    total = this._total.asReadonly();
+    /** True while the LATEST request is in flight. */
+    loading = this._loading.asReadonly();
+    /** The last load's error, or `null`; cleared by the next successful load. */
+    error = this._error.asReadonly();
+    /** Current 1-based page. */
+    page = this._page.asReadonly();
+    /** Current page size. */
+    pageSize = this._pageSize.asReadonly();
+    /** Current sort, or `null` when unsorted. */
+    sort = this._sort.asReadonly();
+    /** Current filter query (updates immediately, even while debouncing). */
+    filter = this._filter.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 */ []));
+    /** Monotonic request id — settles from older epochs are discarded. */
+    epoch = 0;
+    /** Subscription to an in-flight Observable fetch, if any. */
+    activeSub = null;
+    /** Pending filter-debounce timer. */
+    filterTimer = null;
+    /** Subscriptions created by {@link connectSort}, keyed for idempotence. */
+    sortSubs = new Map();
+    destroyed = false;
+    constructor(fetcher, opts) {
+        this.fetcher = fetcher;
+        this.debounceMs = opts?.filterDebounce ?? DEFAULT_FILTER_DEBOUNCE;
+        if (opts?.pageSize != null)
+            this._pageSize.set(opts.pageSize);
+        // Auto-cleanup when constructed in an injection context (a component
+        // field initialiser). Outside one, inject() throws and the consumer owns
+        // calling destroy().
+        try {
+            inject(DestroyRef).onDestroy(() => this.destroy());
+        }
+        catch {
+            // Not in an injection context — manual destroy().
+        }
+        this.load();
+    }
+    /** Jump to a 1-based page and load it immediately. */
+    setPage(page) {
+        const next = Math.max(1, Math.floor(page));
+        if (next === this._page())
+            return;
+        this._page.set(next);
+        this.load();
+    }
+    /** Change the page size; resets to page 1 and loads immediately. */
+    setPageSize(size) {
+        const next = Math.max(1, Math.floor(size));
+        if (next === this._pageSize())
+            return;
+        this._pageSize.set(next);
+        this._page.set(1);
+        this.load();
+    }
+    /**
+     * Change the sort; resets to page 1 and loads immediately. Accepts either
+     * the `mkSort` directive's {@link MkSortState} or `mk-table`'s
+     * {@link MkSortChange} payload; a cleared sort (`direction: 'none'` or an
+     * empty column id) normalises to `null`. A no-op when the sort is unchanged.
+     */
+    setSort(sort) {
+        const next = normalizeSort(sort);
+        if (sameSort(next, this._sort()))
+            return;
+        this._sort.set(next);
+        this._page.set(1);
+        this.load();
+    }
+    /**
+     * Change the free-text filter. The `filter` signal updates (and the page
+     * resets to 1) immediately, but the request is debounced — `refresh()`
+     * flushes it early. A no-op when the query is unchanged.
+     */
+    setFilter(query) {
+        if (query === this._filter())
+            return;
+        this._filter.set(query);
+        this._page.set(1);
+        this.cancelDebounce();
+        if (this.destroyed)
+            return;
+        this.filterTimer = setTimeout(() => {
+            this.filterTimer = null;
+            this.load();
+        }, this.debounceMs);
+    }
+    /**
+     * Re-run the current request immediately (e.g. after a mutation). Flushes a
+     * pending debounced filter, since the request reads the live filter value.
+     */
+    refresh() {
+        this.load();
+    }
+    /**
+     * Pipe an `mkSort` directive's changes into {@link setSort}. Idempotent per
+     * directive instance; all subscriptions are released by {@link destroy}.
+     */
+    connectSort(sort) {
+        if (this.destroyed || this.sortSubs.has(sort))
+            return;
+        this.sortSubs.set(sort, sort.sortChange.subscribe((state) => this.setSort(state)));
+    }
+    /**
+     * Cancel pending work: the debounce timer, any in-flight Observable fetch,
+     * and `connectSort` subscriptions. In-flight Promise settles are discarded.
+     * Called automatically on host destroy when created in an injection context.
+     */
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.epoch++; // Anything still in flight settles stale.
+        this.cancelDebounce();
+        this.unsubscribeActive();
+        for (const sub of this.sortSubs.values())
+            sub.unsubscribe();
+        this.sortSubs.clear();
+        this._loading.set(false);
+    }
+    /** Start a load for the current request state; supersedes any in flight. */
+    load() {
+        if (this.destroyed)
+            return;
+        this.cancelDebounce();
+        this.unsubscribeActive();
+        const epoch = ++this.epoch;
+        this._loading.set(true);
+        const req = {
+            page: this._page(),
+            pageSize: this._pageSize(),
+            sort: this._sort(),
+            filter: this._filter(),
+        };
+        let result;
+        try {
+            result = this.fetcher(req);
+        }
+        catch (err) {
+            this.settleError(epoch, err);
+            return;
+        }
+        if (isSubscribable(result)) {
+            this.runObservable(result, epoch);
+        }
+        else {
+            result.then((page) => this.settleSuccess(epoch, page), (err) => this.settleError(epoch, err));
+        }
+    }
+    /** Subscribe single-shot: first emission (or error) settles, then release. */
+    runObservable(source, epoch) {
+        let done = false;
+        let sync = true;
+        const sub = source.subscribe({
+            next: (page) => {
+                if (done)
+                    return;
+                done = true;
+                this.settleSuccess(epoch, page);
+                if (!sync)
+                    this.clearSub(sub);
+            },
+            error: (err) => {
+                if (done)
+                    return;
+                done = true;
+                this.settleError(epoch, err);
+                if (!sync)
+                    this.clearSub(sub);
+            },
+        });
+        sync = false;
+        if (done)
+            sub.unsubscribe();
+        else
+            this.activeSub = sub;
+    }
+    /** Apply a successful settle, unless a newer request superseded it. */
+    settleSuccess(epoch, page) {
+        if (epoch !== this.epoch || this.destroyed)
+            return;
+        this._rows.set(page.rows);
+        this._total.set(page.total);
+        this._error.set(null);
+        this._loading.set(false);
+    }
+    /** Record a failed settle (rows/total untouched), unless superseded. */
+    settleError(epoch, err) {
+        if (epoch !== this.epoch || this.destroyed)
+            return;
+        this._error.set(err);
+        this._loading.set(false);
+    }
+    cancelDebounce() {
+        if (this.filterTimer != null) {
+            clearTimeout(this.filterTimer);
+            this.filterTimer = null;
+        }
+    }
+    unsubscribeActive() {
+        if (this.activeSub) {
+            this.activeSub.unsubscribe();
+            this.activeSub = null;
+        }
+    }
+    clearSub(sub) {
+        if (this.activeSub === sub)
+            this.activeSub = null;
+        sub.unsubscribe();
+    }
+}
+
+/**
+ * @mk-kit/ui/table — the data table, grid features and sort directives.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail };
+//# sourceMappingURL=mk-kit-ui-table.mjs.map