@mk-kit/ui 0.34.1 → 0.36.0

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

@@ -67,6 +67,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], propDecorators: { mkTableCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkTableCell", required: true }] }] } });
 
+/**
+ * CSV export — turn rows into RFC 4180 text and hand it to the browser as a
+ * download. Framework-free so it also serves data that never touched a table.
+ */
+const NEEDS_QUOTES = /["\r\n]/;
+const FORMULA_LEAD = /^[=+\-@\t\r]/;
+/** Escape one cell for CSV. */
+function csvCell(value, delimiter, sanitize) {
+    if (value == null)
+        return '';
+    let text;
+    if (typeof value === 'string') {
+        text = sanitize && FORMULA_LEAD.test(value) ? `'${value}` : value;
+    }
+    else if (value instanceof Date) {
+        text = value.toISOString();
+    }
+    else if (typeof value === 'object') {
+        text = JSON.stringify(value);
+    }
+    else {
+        text = String(value);
+    }
+    return NEEDS_QUOTES.test(text) || text.includes(delimiter) || /^\s|\s$/.test(text)
+        ? `"${text.replace(/"/g, '""')}"`
+        : text;
+}
+/**
+ * Serialise `rows` as CSV text.
+ *
+ * Without `columns` every key of the first row is exported in its own order.
+ * Column formatters are applied, so what the user saw in the table is what
+ * lands in the file.
+ */
+function mkToCsv(rows, columns, options = {}) {
+    const delimiter = options.delimiter ?? ',';
+    const newline = options.newline ?? '\r\n';
+    const sanitize = options.sanitize ?? true;
+    const cols = columns ??
+        Object.keys((rows[0] ?? {}))
+            .filter((key) => key !== options.childrenKey)
+            .map((key) => ({ key }));
+    const flat = [];
+    const walk = (list) => {
+        for (const row of list) {
+            flat.push(row);
+            const children = options.childrenKey
+                ? row[options.childrenKey]
+                : null;
+            if (Array.isArray(children))
+                walk(children);
+        }
+    };
+    walk(rows);
+    const lines = [];
+    if (options.header ?? true) {
+        lines.push(cols.map((c) => csvCell(c.header ?? c.key, delimiter, sanitize)).join(delimiter));
+    }
+    for (const row of flat) {
+        lines.push(cols
+            .map((c) => {
+            const raw = row[c.key];
+            const value = c.format ? c.format(raw, row) : raw;
+            return csvCell(value, delimiter, sanitize);
+        })
+            .join(delimiter));
+    }
+    return (options.bom ?? true ? '' : '') + lines.join(newline) + newline;
+}
+/**
+ * Trigger a browser download of `text` as a file. No-op outside a DOM
+ * (server-side rendering); returns whether a download was started.
+ */
+function mkDownloadText(text, filename, type = 'text/csv;charset=utf-8') {
+    if (typeof document === 'undefined' || typeof URL?.createObjectURL !== 'function')
+        return false;
+    const url = URL.createObjectURL(new Blob([text], { type }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.rel = 'noopener';
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Give the click a tick to grab the blob before the URL is released.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+    return true;
+}
+/**
+ * Serialise `rows` as CSV and download it. Returns the CSV text so callers
+ * can also keep it (tests, previews, uploads).
+ */
+function mkExportCsv(rows, columns, options = {}) {
+    const csv = mkToCsv(rows, columns, options);
+    let filename = options.filename ?? 'export.csv';
+    if (!/\.csv$/i.test(filename))
+        filename += '.csv';
+    mkDownloadText(csv, filename);
+    return csv;
+}
+
 /** 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`). */
@@ -239,6 +341,16 @@ class MkTable {
     cellEdit = output();
     /** Emitted when a group header is expanded or collapsed. */
     groupToggle = output();
+    /**
+     * Tree rows: the property on each row holding its child rows (`T[]`). When
+     * set, the table renders a tree grid — child rows are indented under their
+     * parent behind an expand toggle in the first column, sorting applies per
+     * sibling group, and ArrowRight / ArrowLeft on a row open / close it.
+     */
+    childrenKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenKey" }] : /* istanbul ignore next */ []));
+    /** Emitted when a parent row is expanded or collapsed (tree mode). */
+    treeToggle = output();
     /** User-set column widths (px), keyed by column key. */
     colWidths = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colWidths" }] : /* istanbul ignore next */ []));
@@ -608,10 +720,12 @@ class MkTable {
      */
     static sortCollator = new Intl.Collator();
     /** Data sorted by the active column, or the input order when unsorted. */
-    sortedData = computed(() => {
+    sortedData = computed(() => this.sortRows(this.data()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    /** Sort one sibling group by the active column (input order when unsorted). */
+    sortRows(rows) {
         const key = this.sortKey();
         const dir = this.sortDir();
-        const rows = this.data();
         if (!key || !dir)
             return rows;
         const compare = (a, b) => {
@@ -630,8 +744,7 @@ class MkTable {
         // 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)
@@ -685,8 +798,10 @@ class MkTable {
         if (this.clickableRows())
             this.rowClick.emit(row);
     }
-    /** Keyboard activation for clickable rows (Enter / Space). */
+    /** Keyboard activation for clickable rows (Enter / Space) and tree keys. */
     onRowKeydown(event, row) {
+        if (this.onTreeKeydown(event, row))
+            return;
         if (!this.clickableRows())
             return;
         if (event.target !== event.currentTarget)
@@ -715,9 +830,28 @@ class MkTable {
     isSelected(row) {
         return this.selectedKeys().has(this.rowKey(row));
     }
+    /**
+     * Every data row, in display order, ignoring tree expansion — what
+     * "select all" and the header checkbox reason about. Equals `sortedData`
+     * for flat tables.
+     */
+    allRows = computed(() => {
+        if (!this.childrenKey())
+            return this.sortedData();
+        const out = [];
+        const walk = (rows) => {
+            for (const row of this.sortRows(rows)) {
+                out.push(row);
+                walk(this.childrenOf(row));
+            }
+        };
+        walk(this.data());
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allRows" }] : /* istanbul ignore next */ []));
     /** True when every visible row is selected. */
     allSelected = computed(() => {
-        const rows = this.sortedData();
+        const rows = this.allRows();
         const keys = this.selectedKeys();
         return rows.length > 0 && rows.every((row) => keys.has(this.rowKey(row)));
     }, /* @ts-ignore */
@@ -725,7 +859,7 @@ class MkTable {
     /** 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))) &&
+        return (this.allRows().some((row) => keys.has(this.rowKey(row))) &&
             !this.allSelected());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
@@ -742,9 +876,9 @@ class MkTable {
             : [...current, row];
         this.commitSelection(next);
     }
-    /** Select or deselect all visible rows. */
+    /** Select or deselect all rows (every tree row, expanded or not). */
     toggleAll() {
-        const rows = this.sortedData();
+        const rows = this.allRows();
         const current = this.selected();
         if (this.allSelected()) {
             const visible = new Set(rows.map((r) => this.rowKey(r)));
@@ -793,21 +927,139 @@ class MkTable {
      */
     displayItems = computed(() => {
         const groups = this.groups();
+        const items = [];
         if (!groups) {
-            return this.sortedData().map((row) => ({ kind: 'row', row }));
+            this.pushRows(items, this.sortedData(), 0);
+            return items;
         }
         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 });
-            }
+            if (!collapsed.has(group.key))
+                this.pushRows(items, group.rows, 0);
         }
         return items;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Append `rows` as render items. In tree mode each row is followed by its
+     * (sorted) children while it is expanded, one level deeper.
+     */
+    pushRows(items, rows, depth) {
+        const tree = !!this.childrenKey();
+        const expandedKeys = this.treeExpanded();
+        for (const row of rows) {
+            const children = tree ? this.childrenOf(row) : [];
+            const hasChildren = children.length > 0;
+            const expanded = hasChildren && expandedKeys.has(this.rowKey(row));
+            items.push({ kind: 'row', row, depth, hasChildren, expanded });
+            if (expanded)
+                this.pushRows(items, this.sortRows(children), depth + 1);
+        }
+    }
+    /** The child rows of `row` (tree mode), or an empty list. */
+    childrenOf(row) {
+        const key = this.childrenKey();
+        if (!key)
+            return [];
+        const value = row[key];
+        return Array.isArray(value) ? value : [];
+    }
+    // --- Tree rows ------------------------------------------------------------
+    /** Keys of parent rows whose children are shown. */
+    treeExpanded = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeExpanded" }] : /* istanbul ignore next */ []));
+    /** Whether a parent row's children are currently shown (tree mode). */
+    isTreeExpanded(row) {
+        return this.treeExpanded().has(this.rowKey(row));
+    }
+    /** Show or hide a parent row's children (tree mode). */
+    toggleTreeRow(row, event) {
+        event?.stopPropagation();
+        if (this.childrenOf(row).length === 0)
+            return;
+        this.setTreeExpanded(row, !this.isTreeExpanded(row));
+    }
+    /** Expand every parent row (tree mode). */
+    expandAllRows() {
+        const keys = new Set();
+        const walk = (rows) => {
+            for (const row of rows) {
+                const children = this.childrenOf(row);
+                if (children.length) {
+                    keys.add(this.rowKey(row));
+                    walk(children);
+                }
+            }
+        };
+        walk(this.data());
+        this.treeExpanded.set(keys);
+    }
+    /** Collapse every parent row (tree mode). */
+    collapseAllRows() {
+        this.treeExpanded.set(new Set());
+    }
+    // --- Export -----------------------------------------------------------------
+    /**
+     * The table's rows as CSV: current column order, column formatters applied,
+     * sorted the way they are shown, tree children flattened under their parent
+     * whether or not they are expanded. Downloads the file (default name
+     * `table.csv`) and returns the text.
+     */
+    exportCsv(options = {}) {
+        let rows = this.allRows();
+        if (options.selectedOnly) {
+            const keys = this.selectedKeys();
+            rows = rows.filter((r) => keys.has(this.rowKey(r)));
+        }
+        const only = options.columns ? new Set(options.columns) : null;
+        const columns = this.orderedColumns()
+            .filter((c) => !only || only.has(c.key))
+            .map((c) => ({ key: c.key, header: c.header, format: c.format }));
+        // `allRows` is already flat, so no childrenKey is passed through.
+        const csv = mkToCsv(rows, columns, { ...options, childrenKey: undefined });
+        if (options.download !== false) {
+            let filename = options.filename ?? 'table.csv';
+            if (!/\.csv$/i.test(filename))
+                filename += '.csv';
+            mkDownloadText(csv, filename);
+        }
+        return csv;
+    }
+    setTreeExpanded(row, expanded) {
+        const rk = this.rowKey(row);
+        if (this.treeExpanded().has(rk) === expanded)
+            return;
+        const next = new Set(this.treeExpanded());
+        if (expanded)
+            next.add(rk);
+        else
+            next.delete(rk);
+        this.treeExpanded.set(next);
+        this.treeToggle.emit({ row, expanded });
+    }
+    /**
+     * ArrowRight opens and ArrowLeft closes a parent row's children (swapped in
+     * RTL). Handled for keys pressed on the row itself or on its tree toggle.
+     */
+    onTreeKeydown(event, row) {
+        if (!this.childrenKey() || this.childrenOf(row).length === 0)
+            return false;
+        const rtl = this.document.defaultView?.getComputedStyle(this.host.nativeElement).direction === 'rtl';
+        const openKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const closeKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === openKey && !this.isTreeExpanded(row)) {
+            event.preventDefault();
+            this.setTreeExpanded(row, true);
+            return true;
+        }
+        if (event.key === closeKey && this.isTreeExpanded(row)) {
+            event.preventDefault();
+            this.setTreeExpanded(row, false);
+            return true;
+        }
+        return false;
+    }
     /** `@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. */
@@ -860,7 +1112,7 @@ class MkTable {
         this.expandedChange.emit(this.data().filter((r) => next.has(this.rowKey(r))));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTable, isStandalone: true, selector: "mk-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stackAt: { classPropertyName: "stackAt", publicName: "stackAt", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, trackKey: { classPropertyName: "trackKey", publicName: "trackKey", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null } }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTable, isStandalone: true, selector: "mk-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stackAt: { classPropertyName: "stackAt", publicName: "stackAt", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, trackKey: { classPropertyName: "trackKey", publicName: "trackKey", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange", expandedChange: "expandedChange", columnResize: "columnResize", columnReorder: "columnReorder", cellEdit: "cellEdit", groupToggle: "groupToggle", treeToggle: "treeToggle" }, host: { properties: { "class.mk-table--sticky": "stickyHeader()", "class.mk-table--zebra": "zebra()", "class.mk-table--hover": "hover()", "class.mk-table--compact": "density() === 'compact'", "class.mk-table--clickable": "clickableRows()", "class.mk-table--selectable": "selectable()", "class.mk-table--expandable": "expandable()", "class.mk-table--grouped": "groupBy() !== null", "class.mk-table--stacked": "stacked()" }, classAttribute: "mk-table" }, queries: [{ propertyName: "rowDetail", first: true, predicate: MkTableRowDetail, descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: MkTableCell, isSignal: true }], viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-table__scroll\">\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @for (item of displayItems(); track trackItem(item); let i = $index) {\n        @if (item.kind === 'group') {\n          <tr class=\"mk-table__group-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(i)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr class=\"mk-table__detail-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(i)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow-x:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow-x:visible;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;border-radius:0}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"], dependencies: [{ kind: "component", type: MkCheckbox, selector: "mk-checkbox", inputs: ["checked", "indeterminate", "disabled", "invalid", "required", "size", "tone", "aria-label"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTable, decorators: [{
             type: Component,
@@ -875,8 +1127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-table--expandable]': 'expandable()',
                         '[class.mk-table--grouped]': 'groupBy() !== null',
                         '[class.mk-table--stacked]': 'stacked()',
-                    }, template: "<div class=\"mk-table__scroll\">\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table 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 }] }] } });
+                    }, template: "<div class=\"mk-table__scroll\">\n  <!-- Explicit roles ONLY while stacked: `display: block` strips a table\n       element of its implicit role, so without these a card layout stops\n       being announced as tabular data at all. Redundant in the grid, so\n       they are left off there rather than duplicating what the element\n       already says. -->\n  <table\n    class=\"mk-table__table\"\n    [attr.role]=\"childrenKey() ? 'treegrid' : stacked() ? 'table' : null\"\n  >\n    <thead class=\"mk-table__head\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      <tr>\n        @if (expandable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--expand\">\n            <span class=\"mk-visually-hidden\">{{ i18n.expandHeader }}</span>\n          </th>\n        }\n        @if (selectable()) {\n          <th scope=\"col\" class=\"mk-table__th mk-table__th--select\">\n            <mk-checkbox\n              [aria-label]=\"i18n.selectAllRows\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of orderedColumns(); track col.key) {\n          <th\n            scope=\"col\"\n            class=\"mk-table__th\"\n            [class.mk-table__th--sortable]=\"col.sortable\"\n            [class.mk-table__th--pinned]=\"col.pinned\"\n            [class.mk-table__th--pinned-right]=\"col.pinned === 'right'\"\n            [class.mk-table__th--dragging]=\"dragKey() === col.key\"\n            [style.width]=\"colStyleWidth(col)\"\n            [style.inset-inline-start.px]=\"col.pinned === 'left' ? pinnedOffset(col) : null\"\n            [style.inset-inline-end.px]=\"col.pinned === 'right' ? pinnedOffset(col) : null\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.draggable]=\"reorderableColumns() && !col.pinned ? true : null\"\n            (dragstart)=\"onColDragStart($event, col)\"\n            (dragover)=\"onColDragOver($event)\"\n            (drop)=\"onColDrop($event, col)\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (col.sortable || (reorderableColumns() && !col.pinned)) {\n              <button\n                type=\"button\"\n                class=\"mk-table__th-button\"\n                [class.mk-table__th-button--static]=\"!col.sortable\"\n                (click)=\"onSort(col)\"\n                (keydown)=\"onReorderKeydown($event, col)\"\n              >\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n                @if (col.sortable) {\n                  <span class=\"mk-table__sort\" aria-hidden=\"true\">{{ sortGlyph(col) }}</span>\n                }\n              </button>\n            } @else {\n              <span class=\"mk-table__th-inner\">\n                <span class=\"mk-table__th-label\">{{ col.header }}</span>\n              </span>\n            }\n            @if (resizableColumns() && col.resizable) {\n              <span\n                class=\"mk-table__resize\"\n                role=\"separator\"\n                tabindex=\"0\"\n                aria-orientation=\"vertical\"\n                [attr.aria-label]=\"i18n.resizeColumn\"\n                [attr.aria-valuemin]=\"resizeValueMin(col)\"\n                [attr.aria-valuenow]=\"resizeValueNow(col)\"\n                [attr.aria-valuemax]=\"resizeValueMax\"\n                (pointerdown)=\"startResize($event, col)\"\n                (keydown)=\"onResizeKeydown($event, col)\"\n                (click)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"mk-table__body\" [attr.role]=\"stacked() ? 'rowgroup' : null\">\n      @for (item of displayItems(); track trackItem(item); let i = $index) {\n        @if (item.kind === 'group') {\n          <tr class=\"mk-table__group-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <th\n              class=\"mk-table__group\"\n              scope=\"colgroup\"\n              [attr.role]=\"stacked() ? 'rowheader' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__group-toggle\"\n                [attr.aria-expanded]=\"!isGroupCollapsed(item.group.key)\"\n                (click)=\"onGroupToggle(item.group)\"\n              >\n                <span\n                  class=\"mk-table__expander-icon\"\n                  [class.mk-table__expander-icon--open]=\"!isGroupCollapsed(item.group.key)\"\n                  aria-hidden=\"true\"\n                  >\u203A</span\n                >\n                <span class=\"mk-visually-hidden\">{{\n                  isGroupCollapsed(item.group.key) ? i18n.expandGroup : i18n.collapseGroup\n                }}</span>\n                <span class=\"mk-table__group-label\">{{ item.group.label }}</span>\n                <span class=\"mk-table__group-count\">{{\n                  i18n.groupCount(item.group.rows.length)\n                }}</span>\n              </button>\n            </th>\n          </tr>\n        } @else {\n        <ng-container>\n        <tr\n          class=\"mk-table__row\"\n          [attr.role]=\"stacked() || childrenKey() ? 'row' : null\"\n          [class]=\"rowClassFor(item.row)\"\n          [class.mk-table__row--selected]=\"selectable() && isSelected(item.row)\"\n          [class.mk-table__row--expanded]=\"expandable() && isExpanded(item.row)\"\n          [class.mk-table__row--parent]=\"item.hasChildren\"\n          [style.--mk-tree-depth]=\"childrenKey() ? item.depth : null\"\n          [style.margin-inline-start.px]=\"stacked() && item.depth ? item.depth * 16 : null\"\n          [attr.aria-level]=\"childrenKey() ? item.depth + 1 : null\"\n          [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n          [attr.tabindex]=\"clickableRows() ? 0 : null\"\n          (click)=\"onRowClick(item.row)\"\n          (keydown)=\"onRowKeydown($event, item.row)\"\n        >\n          @if (expandable()) {\n            <td\n              class=\"mk-table__td mk-table__td--expand\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"mk-table__expander\"\n                [class.mk-table__expander--open]=\"isExpanded(item.row)\"\n                [attr.aria-expanded]=\"isExpanded(item.row)\"\n                [attr.aria-controls]=\"detailId(i)\"\n                [attr.aria-label]=\"isExpanded(item.row) ? i18n.collapseRow : i18n.expandRow\"\n                (click)=\"toggleExpand(item.row, $event)\"\n              >\n                <span class=\"mk-table__expander-icon\" aria-hidden=\"true\">\u203A</span>\n              </button>\n            </td>\n          }\n          @if (selectable()) {\n            <td\n              class=\"mk-table__td mk-table__td--select\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mk-checkbox\n                [aria-label]=\"i18n.selectRow(rowLabel(item.row))\"\n                [checked]=\"isSelected(item.row)\"\n                (checkedChange)=\"toggleRow(item.row)\"\n              />\n            </td>\n          }\n          @if (!stacked()) {\n            @for (col of orderedColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: null, tree: first ? item : null }\"\n              />\n            }\n          } @else {\n            <!-- Card layout. Same <td> elements, restyled \u2014 keeping the table\n                 DOM means selection, expansion, inline edit and every cell\n                 template keep working, since all of them reach for a `td`. -->\n            @for (col of stackTitleColumns(); track col.key; let first = $first) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'title', tree: first ? item : null }\"\n              />\n            }\n            @for (col of stackFieldColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'field' }\"\n              />\n            }\n            @for (col of stackFooterColumns(); track col.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"cellTpl\"\n                [ngTemplateOutletContext]=\"{ col, row: item.row, i, slot: 'footer' }\"\n              />\n            }\n          }\n        </tr>\n        @if (expandable() && isExpanded(item.row) && rowDetail()) {\n          <tr class=\"mk-table__detail-row\" [attr.role]=\"stacked() ? 'row' : null\">\n            <td\n              class=\"mk-table__detail\"\n              [id]=\"detailId(i)\"\n              [attr.role]=\"stacked() ? 'cell' : null\"\n              [attr.colspan]=\"totalColumns()\"\n            >\n              <div class=\"mk-table__detail-inner\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetail()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row }\"\n                />\n              </div>\n            </td>\n          </tr>\n        }\n        </ng-container>\n        }\n      } @empty {\n        <tr class=\"mk-table__row mk-table__row--empty\" [attr.role]=\"stacked() ? 'row' : null\">\n          <td\n            class=\"mk-table__empty\"\n            [attr.role]=\"stacked() ? 'cell' : null\"\n            [attr.colspan]=\"totalColumns()\"\n          >\n            <ng-content select=\"[mkTableEmpty]\">{{ emptyMessage() }}</ng-content>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- One cell, rendered by both layouts. `slot` is null in the grid and\n     'title' | 'field' | 'footer' in a card; everything else \u2014 the editor, the\n     consumer's mkTableCell template, the formatted fallback \u2014 is identical, so\n     a card can never drift from the grid it replaces. -->\n<ng-template #cellTpl let-col=\"col\" let-row=\"row\" let-i=\"i\" let-slot=\"slot\" let-tree=\"tree\">\n  <td\n    class=\"mk-table__td\"\n    [class.mk-table__td--tree]=\"!!tree && !!childrenKey()\"\n    [class.mk-table__td--pinned]=\"isPinned(col, 'left') || isPinned(col, 'right')\"\n    [class.mk-table__td--pinned-right]=\"isPinned(col, 'right')\"\n    [class.mk-table__td--editable]=\"col.editable\"\n    [class.mk-table__td--stack-title]=\"slot === 'title'\"\n    [class.mk-table__td--stack-field]=\"slot === 'field'\"\n    [class.mk-table__td--stack-footer]=\"slot === 'footer'\"\n    [style.width]=\"colStyleWidth(col)\"\n    [style.inset-inline-start.px]=\"isPinned(col, 'left') ? pinnedOffset(col) : null\"\n    [style.inset-inline-end.px]=\"isPinned(col, 'right') ? pinnedOffset(col) : null\"\n    [attr.data-align]=\"col.align ?? 'start'\"\n    [attr.tabindex]=\"col.editable ? 0 : null\"\n    [attr.role]=\"stacked() ? 'cell' : null\"\n    (dblclick)=\"startEdit(i, col, $event)\"\n    (keydown)=\"onCellKeydown($event, i, col)\"\n  >\n    @if (slot === 'field' && hasStackLabel(col)) {\n      <!-- The column header, moved beside the value. Not aria-hidden: the\n           <thead> is display:none while stacked, so this label is the only\n           thing naming the value for a screen reader. -->\n      <span class=\"mk-table__cell-label\">{{ col.header }}</span>\n    }\n    @if (tree && childrenKey()) {\n      <!-- Tree toggle (or a spacer on leaves) ahead of the first cell's value,\n           so the indent and the caret read as one column. -->\n      @if (tree.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"mk-table__tree-toggle\"\n          [class.mk-table__tree-toggle--open]=\"tree.expanded\"\n          [attr.aria-expanded]=\"tree.expanded\"\n          [attr.aria-label]=\"tree.expanded ? i18n.collapseTreeRow : i18n.expandTreeRow\"\n          (click)=\"toggleTreeRow(row, $event)\"\n        >\n          <span class=\"mk-table__expander-icon\" [class.mk-table__expander-icon--open]=\"tree.expanded\" aria-hidden=\"true\">\u203A</span>\n        </button>\n      } @else {\n        <span class=\"mk-table__tree-spacer\" aria-hidden=\"true\"></span>\n      }\n    }\n    <span class=\"mk-table__cell-value\">\n      @if (isEditing(i, col)) {\n        <input\n          #editInput\n          class=\"mk-table__cell-input\"\n          [value]=\"cellText(row, col)\"\n          [attr.aria-label]=\"col.header\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onEditKeydown($event, row, col)\"\n          (blur)=\"commitEdit(row, col, $any($event.target).value)\"\n        />\n      } @else if (cellTemplateFor(col.key); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: cellValue(row, col), row }\"\n        />\n      } @else {\n        {{ cellText(row, col) }}\n        @if (col.editable) {\n          <span class=\"mk-visually-hidden\">{{ i18n.editCell }}</span>\n        }\n      }\n    </span>\n  </td>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_cell-pad-y: var(--mk-space-3);--_cell-pad-x: var(--mk-space-4);display:block;color:var(--mk-text)}:host(.mk-table--compact){--_cell-pad-y: var(--mk-space-2);--_cell-pad-x: var(--mk-space-3)}.mk-table__scroll{width:100%;overflow-x:auto;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-table__table{width:100%;border-collapse:collapse;font-size:var(--mk-font-size-sm);background-color:var(--mk-surface)}.mk-table__th{padding:var(--_cell-pad-y) var(--_cell-pad-x);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-weight:var(--mk-font-weight-semibold);text-align:start;white-space:nowrap;border-bottom:var(--mk-border-width) solid var(--mk-border);vertical-align:middle}:host(.mk-table--sticky) .mk-table__head .mk-table__th{position:sticky;top:0;z-index:var(--mk-z-sticky)}.mk-table__th-inner{display:inline-flex;align-items:center;gap:var(--mk-space-1)}.mk-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.mk-table__th--sortable:hover{background-color:var(--mk-surface-3);color:var(--mk-text)}.mk-table__th-button{display:inline-flex;align-items:center;gap:var(--mk-space-1);width:100%;margin:calc(-1 * var(--_cell-pad-y)) calc(-1 * var(--_cell-pad-x));padding:var(--_cell-pad-y) var(--_cell-pad-x);font:inherit;font-weight:inherit;color:inherit;text-align:inherit;background:transparent;border:0;cursor:pointer}.mk-table__th-button--static{cursor:grab}.mk-table__th-button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[data-align=center] .mk-table__th-button{justify-content:center}.mk-table__th[data-align=end] .mk-table__th-button{justify-content:flex-end}.mk-table__th[aria-sort=ascending],.mk-table__th[aria-sort=descending]{color:var(--mk-text)}.mk-table__sort{font-size:var(--mk-font-size-xs);opacity:.7;line-height:1}.mk-table__td{padding:var(--_cell-pad-y) var(--_cell-pad-x);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);vertical-align:middle}.mk-table__row:last-child .mk-table__td{border-bottom:0}.mk-table__th[data-align=center],.mk-table__td[data-align=center]{text-align:center}.mk-table__th[data-align=end],.mk-table__td[data-align=end]{text-align:right}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background-color:var(--mk-surface-2)}:host(.mk-table--hover) .mk-table__body .mk-table__row:not(.mk-table__row--empty):hover .mk-table__td{background-color:var(--mk-neutral-subtle)}:host(.mk-table--clickable) .mk-table__row:not(.mk-table__row--empty){cursor:pointer}:host(.mk-table--clickable) .mk-table__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th--select,.mk-table__td--select{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}:host .mk-table__body .mk-table__row--selected .mk-table__td,:host(.mk-table--zebra) .mk-table__body .mk-table__row--selected:nth-child(2n) .mk-table__td,:host(.mk-table--hover) .mk-table__body .mk-table__row--selected:hover .mk-table__td{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-table__th--expand,.mk-table__td--expand{width:1%;white-space:nowrap;text-align:center;vertical-align:middle}.mk-table__expander{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-table__expander:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-table__expander:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__expander-icon{display:inline-block;font-size:var(--mk-font-size-lg);line-height:1;transition:transform var(--mk-transition-fast, .12s) ease}.mk-table__expander--open .mk-table__expander-icon,.mk-table__expander-icon--open{transform:rotate(90deg)}:host(:dir(rtl)) .mk-table__expander-icon{transform:scaleX(-1)}:host(:dir(rtl)) .mk-table__expander--open .mk-table__expander-icon,:host(:dir(rtl)) .mk-table__expander-icon--open{transform:scaleX(-1) rotate(-90deg)}.mk-table__detail{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-table__detail-inner{padding:var(--_cell-pad-y) var(--_cell-pad-x)}.mk-table__th{position:relative}.mk-table__resize{position:absolute;top:0;inset-inline-end:0;width:8px;height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.mk-table__resize:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-table__resize:after{content:\"\";position:absolute;top:25%;inset-inline-end:3px;width:2px;height:50%;background-color:var(--mk-border)}.mk-table__resize:hover:after,.mk-table__resize:focus-visible:after{background-color:var(--mk-primary)}.mk-table__resize:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__th[draggable=true]{cursor:grab}.mk-table__th--dragging{opacity:.5}.mk-table__th--pinned,.mk-table__td--pinned{position:sticky;z-index:1;background-color:var(--mk-surface)}.mk-table__th--pinned{z-index:2;background-color:var(--mk-surface-2)}.mk-table__th--pinned:not(.mk-table__th--pinned-right),.mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}.mk-table__th--pinned-right,.mk-table__td--pinned-right{box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned:not(.mk-table__th--pinned-right),:host(:dir(rtl)) .mk-table__td--pinned:not(.mk-table__td--pinned-right){box-shadow:-2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(:dir(rtl)) .mk-table__th--pinned-right,:host(:dir(rtl)) .mk-table__td--pinned-right{box-shadow:2px 0 4px -2px var(--mk-shadow-color, rgba(0, 0, 0, .15))}:host(.mk-table--zebra) .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td--pinned{background-color:var(--mk-surface-2)}.mk-table__td--editable{cursor:text}.mk-table__td--editable:hover{background-color:var(--mk-hover-overlay)}.mk-table__td--editable:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__cell-input{width:100%;margin:calc(-1 * var(--mk-space-1)) 0;padding:var(--mk-space-1) var(--mk-space-2);font:inherit;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-primary);border-radius:var(--mk-radius-sm);outline:none}.mk-table__empty{padding:var(--mk-space-8) var(--_cell-pad-x);text-align:center;color:var(--mk-text-subtle)}.mk-table__td--tree{padding-inline-start:calc(var(--_cell-pad-x) + var(--mk-tree-depth, 0) * 1.25rem);white-space:nowrap}.mk-table__tree-toggle,.mk-table__tree-spacer{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:var(--mk-space-1);vertical-align:middle;flex:none}.mk-table__tree-toggle{padding:0;border:0;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-table__tree-toggle:hover{color:var(--mk-text);background:var(--mk-hover-overlay)}.mk-table__tree-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-table__td--tree .mk-table__cell-value{display:inline;vertical-align:middle}.mk-table__group{padding:0;background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);text-align:start}:host(.mk-table--grouped) .mk-table__group{position:sticky;top:var(--_group-top, 0px);z-index:calc(var(--mk-z-sticky) - 1)}.mk-table__group-toggle{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-2) var(--mk-space-3);border:none;background:none;color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-table__group-toggle:hover{background-color:var(--mk-hover-overlay)}.mk-table__group-toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-table__group-count{padding:0 var(--mk-space-2);border-radius:var(--mk-radius-full);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-regular)}:host(.mk-table--stacked) .mk-table__scroll{overflow-x:visible;border:none;border-radius:0;background:none}:host(.mk-table--stacked) .mk-table__table,:host(.mk-table--stacked) .mk-table__body{display:block;background:none}:host(.mk-table--stacked) .mk-table__head{display:none}:host(.mk-table--stacked) .mk-table__row{display:grid;grid-template-columns:1fr;gap:var(--mk-space-1);padding:var(--mk-space-3);margin-bottom:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background-color:var(--mk-surface);box-shadow:var(--mk-shadow-xs)}:host(.mk-table--stacked) .mk-table__td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-1) 0;border:none;text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-title{justify-content:flex-start;padding-bottom:var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host(.mk-table--stacked) .mk-table__td--stack-title~.mk-table__td--stack-title{justify-content:flex-end;margin-top:calc(-1 * var(--mk-space-2) - 1.5em);font-size:var(--mk-font-size-md)}:host(.mk-table--stacked) .mk-table__cell-label{flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-table--stacked) .mk-table__cell-value{min-width:0;text-align:end;overflow-wrap:anywhere}:host(.mk-table--stacked) .mk-table__td--stack-title .mk-table__cell-value,:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{text-align:start}:host(.mk-table--stacked) .mk-table__td--stack-footer{justify-content:flex-start;margin-top:var(--mk-space-2);padding-top:var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}:host(.mk-table--stacked) .mk-table__td--stack-footer .mk-table__cell-value{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);width:100%}:host(.mk-table--stacked) .mk-table__td--select,:host(.mk-table--stacked) .mk-table__td--expand{width:auto;justify-content:flex-start}:host(.mk-table--stacked).mk-table--zebra .mk-table__body .mk-table__row:nth-child(2n) .mk-table__td{background:none}:host(.mk-table--stacked) .mk-table__detail-row,:host(.mk-table--stacked) .mk-table__detail{display:block;padding:0}:host(.mk-table--stacked) .mk-table__detail-row{margin:calc(-1 * var(--mk-space-3)) 0 var(--mk-space-3)}:host(.mk-table--stacked) .mk-table__group-row,:host(.mk-table--stacked) .mk-table__group{display:block;top:0}:host(.mk-table--stacked) .mk-table__row--empty,:host(.mk-table--stacked) .mk-table__empty{display:block;border:none;box-shadow:none;background:none}@media(pointer:coarse){.mk-table__cell-input{font-size:max(var(--mk-font-size-md),16px)}}@media print{.mk-table__scroll{overflow:visible;border-radius:0}.mk-table__head{display:table-header-group}.mk-table__th,.mk-table__td{position:static;box-shadow:none;background-color:transparent!important;color:inherit!important;border-bottom:1px solid var(--mk-border)}.mk-table__row,.mk-table__group-row,.mk-table__detail-row{break-inside:avoid}.mk-table__sort,.mk-table__resize,.mk-table__th--select,.mk-table__td--select,.mk-table__th--expand,.mk-table__td--expand,.mk-table__tree-toggle .mk-table__expander-icon{display:none}.mk-table__th-button,.mk-table__tree-toggle,.mk-table__group-toggle{color:inherit;cursor:default}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stackAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackAt", required: false }] }], clickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableRows", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], trackKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKey", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], groupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], editInput: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], rowDetail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkTableRowDetail), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkTableCell), { isSignal: true }] }] } });
 
 /**
  * Sort coordinator — apply `mkSort` to a table (or any container) to track
@@ -1374,5 +1626,5 @@ class MkTableDataSource {
  * Generated bundle index. Do not edit.
  */
 
-export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail };
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkDownloadText, mkExportCsv, mkToCsv };
 //# sourceMappingURL=mk-kit-ui-table.mjs.map