mn-angular-lib 1.0.135 → 1.0.136

package/fesm2022/mn-angular-lib.mjs

@@ -5036,10 +5036,6 @@ function emptyFilterValue(type) {
     switch (type) {
         case 'multi-select':
             return [];
-        case 'number-range':
-            return {};
-        case 'date-range':
-            return {};
         case 'boolean':
         case 'text':
         case 'select':
@@ -5048,10 +5044,10 @@ function emptyFilterValue(type) {
     }
 }
 /**
- * Whether a filter value should actually narrow the rows. Empty strings, empty
- * arrays and ranges with neither bound set are inactive; `false` on a boolean
- * filter is active (it means "show only the false rows"), which is why a plain
- * truthiness check is not enough.
+ * Whether a filter value should actually narrow the rows. Empty strings and
+ * empty arrays are inactive; `false` on a boolean filter is active (it means
+ * "show only the false rows"), which is why a plain truthiness check is not
+ * enough.
  */
 function isFilterValueActive(value) {
     if (value === undefined || value === null)
@@ -5060,10 +5056,7 @@ function isFilterValueActive(value) {
         return true;
     if (typeof value === 'string')
         return value.trim().length > 0;
-    if (Array.isArray(value))
-        return value.length > 0;
-    const range = value;
-    return [range.min, range.max, range.from, range.to].some(bound => bound !== undefined && bound !== null && bound !== '' && !Number.isNaN(bound));
+    return Array.isArray(value) && value.length > 0;
 }
 /**
  * The value a filter compares against for a row: the column's
@@ -5077,21 +5070,6 @@ function resolveFilterableValue(column, row) {
         return column.cell(row);
     return '';
 }
-/** Parses a `YYYY-MM-DD` bound to a timestamp; `endOfDay` makes the upper bound inclusive. */
-function parseDateBound(bound, endOfDay) {
-    if (!bound)
-        return undefined;
-    const time = new Date(endOfDay ? `${bound}T23:59:59.999` : `${bound}T00:00:00.000`).getTime();
-    return Number.isNaN(time) ? undefined : time;
-}
-/** Coerces a raw cell value to a timestamp for date-range comparison. */
-function toTimestamp(raw) {
-    if (raw instanceof Date)
-        return raw.getTime();
-    if (typeof raw === 'number')
-        return raw;
-    return new Date(String(raw)).getTime();
-}
 /**
  * The default predicate for a filter type, used when the column supplies no
  * `filterFn`. Semantics per type:
@@ -5099,11 +5077,6 @@ function toTimestamp(raw) {
  * - `select` — exact string equality
  * - `multi-select` — equality against any selected value (OR)
  * - `boolean` — truthiness of the raw value equals the chosen state
- * - `number-range` / `date-range` — inclusive bounds, each side optional
- *
- * A row whose raw value cannot be interpreted for the type (a non-numeric value
- * under a number range, an unparsable date) is excluded rather than kept, so an
- * active filter never silently passes rows it cannot evaluate.
  */
 function defaultFilterPredicate(type, raw, value) {
     switch (type) {
@@ -5115,26 +5088,6 @@ function defaultFilterPredicate(type, raw, value) {
         }
         case 'boolean':
             return Boolean(raw) === value;
-        case 'number-range': {
-            const { min, max } = value;
-            const numeric = typeof raw === 'number' ? raw : Number(raw);
-            if (Number.isNaN(numeric))
-                return false;
-            if (min !== undefined && numeric < min)
-                return false;
-            return !(max !== undefined && numeric > max);
-        }
-        case 'date-range': {
-            const { from, to } = value;
-            const time = toTimestamp(raw);
-            if (Number.isNaN(time))
-                return false;
-            const start = parseDateBound(from, false);
-            const end = parseDateBound(to, true);
-            if (start !== undefined && time < start)
-                return false;
-            return !(end !== undefined && time > end);
-        }
         case 'text':
         default:
             return String(raw ?? '')
@@ -6195,8 +6148,6 @@ class MnTable extends MnSelectableCollectionBase {
     columnFilters = {};
     /** Viewport width (px) below which the inline filter row collapses into a panel. */
     static FILTER_COLLAPSE_WIDTH = 640;
-    /** Bounds rendered by a number-range filter, in input order. */
-    numberBounds = ['min', 'max'];
     /**
      * True when the viewport is narrow enough that the per-column filter inputs no
      * longer fit under their headers; the inline row is then replaced by a toggle
@@ -6211,8 +6162,6 @@ class MnTable extends MnSelectableCollectionBase {
     }
     collectionBody;
     // ── Column Filters ──
-    /** Bounds rendered by a date-range filter, in input order. */
-    dateBounds = ['from', 'to'];
     /** Debounces server-side text filters so typing doesn't fire a request per keystroke. */
     filterDebounce = new Subject();
     /**
@@ -6268,25 +6217,6 @@ class MnTable extends MnSelectableCollectionBase {
         }
         this.cdr.markForCheck();
     }
-    /** Updates one bound of a range filter, leaving the other side untouched. */
-    onRangeFilter(column, bound, raw) {
-        const current = { ...(this.columnFilters[column.key] ?? {}) };
-        if (bound === 'min' || bound === 'max') {
-            const parsed = Number(raw);
-            // An emptied input clears that bound rather than pinning it to 0.
-            if (raw === '' || Number.isNaN(parsed))
-                delete current[bound];
-            else
-                current[bound] = parsed;
-        }
-        else {
-            if (raw === '')
-                delete current[bound];
-            else
-                current[bound] = raw;
-        }
-        this.onColumnFilter(column, current);
-    }
     /** Updates a tri-state boolean filter from its select ('' = any). */
     onBooleanFilter(column, raw) {
         this.onColumnFilter(column, raw === '' ? '' : raw === 'true');
@@ -6335,26 +6265,6 @@ class MnTable extends MnSelectableCollectionBase {
         const value = this.columnFilters[column.key];
         return typeof value === 'boolean' ? String(value) : '';
     }
-    /** Current value of one bound of a range filter, as an input-ready string. */
-    rangeFilterValue(column, bound) {
-        const value = this.columnFilters[column.key];
-        const bounded = value?.[bound];
-        return bounded === undefined || bounded === null ? '' : String(bounded);
-    }
-    /** Label for a range filter bound, falling back to the English default. */
-    rangeBoundLabel(bound) {
-        const labels = this.dataSource.filterLabels;
-        switch (bound) {
-            case 'min':
-                return labels?.min ?? 'Min';
-            case 'max':
-                return labels?.max ?? 'Max';
-            case 'from':
-                return labels?.from ?? 'From';
-            case 'to':
-                return labels?.to ?? 'To';
-        }
-    }
     /** Resets every column filter and re-applies (or re-requests) filtering. */
     clearAllFilters() {
         this.seedFilterValues();
@@ -6849,7 +6759,6 @@ class MnTable extends MnSelectableCollectionBase {
         if (!labels)
             return;
         const pairs = [
-            ['minKey', 'min'], ['maxKey', 'max'], ['fromKey', 'from'], ['toKey', 'to'],
             ['anyKey', 'any'], ['yesKey', 'yes'], ['noKey', 'no'], ['selectedKey', 'selected'],
         ];
         for (const [keyProp, labelProp] of pairs) {
@@ -6892,11 +6801,11 @@ class MnTable extends MnSelectableCollectionBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('number-range') {\n      <div class=\"flex items-end gap-2\">\n        @for (bound of numberBounds; track bound) {\n          <mn-lib-input-field\n            (ngModelChange)=\"onRangeFilter(column, bound, $event)\"\n            [disabled]=\"column.filterDisabled ?? false\"\n            [ngModel]=\"rangeFilterValue(column, bound)\"\n            [props]=\"{\n              id: 'mn-table-filter-' + idScope + '-' + column.key + '-' + bound,\n              type: 'number',\n              label: rangeBoundLabel(bound),\n                  size: 'sm',\n              borderRadius: 'md',\n              fullWidth: true\n            }\"\n            class=\"flex-1\"\n          ></mn-lib-input-field>\n        }\n      </div>\n    }\n    @case ('date-range') {\n      <div class=\"flex flex-col gap-2\">\n        @for (bound of dateBounds; track bound) {\n          <mn-lib-datetime\n            (ngModelChange)=\"onRangeFilter(column, bound, $event)\"\n            [disabled]=\"column.filterDisabled ?? false\"\n            [ngModel]=\"rangeFilterValue(column, bound)\"\n            [props]=\"{\n              id: 'mn-table-filter-' + idScope + '-' + column.key + '-' + bound,\n              mode: 'date',\n              label: rangeBoundLabel(bound),\n              size: 'sm',\n              borderRadius: 'md',\n              fullWidth: true\n            }\"\n          ></mn-lib-datetime>\n        }\n      </div>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnDatetime, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('number-range') {\n      <div class=\"flex items-end gap-2\">\n        @for (bound of numberBounds; track bound) {\n          <mn-lib-input-field\n            (ngModelChange)=\"onRangeFilter(column, bound, $event)\"\n            [disabled]=\"column.filterDisabled ?? false\"\n            [ngModel]=\"rangeFilterValue(column, bound)\"\n            [props]=\"{\n              id: 'mn-table-filter-' + idScope + '-' + column.key + '-' + bound,\n              type: 'number',\n              label: rangeBoundLabel(bound),\n                  size: 'sm',\n              borderRadius: 'md',\n              fullWidth: true\n            }\"\n            class=\"flex-1\"\n          ></mn-lib-input-field>\n        }\n      </div>\n    }\n    @case ('date-range') {\n      <div class=\"flex flex-col gap-2\">\n        @for (bound of dateBounds; track bound) {\n          <mn-lib-datetime\n            (ngModelChange)=\"onRangeFilter(column, bound, $event)\"\n            [disabled]=\"column.filterDisabled ?? false\"\n            [ngModel]=\"rangeFilterValue(column, bound)\"\n            [props]=\"{\n              id: 'mn-table-filter-' + idScope + '-' + column.key + '-' + bound,\n              mode: 'date',\n              label: rangeBoundLabel(bound),\n              size: 'sm',\n              borderRadius: 'md',\n              fullWidth: true\n            }\"\n          ></mn-lib-datetime>\n        }\n      </div>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
@@ -8935,6 +8844,50 @@ const DEFAULT_GRID_SKELETON_LINES = [
     { shape: 'text', width: '75%' },
     { shape: 'text', width: '50%', height: '0.75rem' },
 ];
+/** Breakpoints a `cols` map may address, ordered small → large. */
+const GRID_BREAKPOINTS = ['base', 'sm', 'md', 'lg', 'xl'];
+/** Highest column count with a pre-generated class; larger requests clamp to it. */
+const MAX_GRID_COLS = 12;
+/**
+ * Column utilities per breakpoint, indexed by `columns - 1`.
+ *
+ * Spelled out as literals on purpose: the consuming app's Tailwind scanner reads
+ * the shipped bundle, so a name assembled at runtime (`sm:grid-cols-${n}`) would
+ * never be generated. Breakpoints are Tailwind's defaults (sm 640, md 768,
+ * lg 1024, xl 1280), and each unset one simply inherits the next-smaller class.
+ */
+const GRID_COL_CLASSES = {
+    base: [
+        'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'grid-cols-6',
+        'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10', 'grid-cols-11', 'grid-cols-12',
+    ],
+    sm: [
+        'sm:grid-cols-1', 'sm:grid-cols-2', 'sm:grid-cols-3', 'sm:grid-cols-4', 'sm:grid-cols-5', 'sm:grid-cols-6',
+        'sm:grid-cols-7', 'sm:grid-cols-8', 'sm:grid-cols-9', 'sm:grid-cols-10', 'sm:grid-cols-11', 'sm:grid-cols-12',
+    ],
+    md: [
+        'md:grid-cols-1', 'md:grid-cols-2', 'md:grid-cols-3', 'md:grid-cols-4', 'md:grid-cols-5', 'md:grid-cols-6',
+        'md:grid-cols-7', 'md:grid-cols-8', 'md:grid-cols-9', 'md:grid-cols-10', 'md:grid-cols-11', 'md:grid-cols-12',
+    ],
+    lg: [
+        'lg:grid-cols-1', 'lg:grid-cols-2', 'lg:grid-cols-3', 'lg:grid-cols-4', 'lg:grid-cols-5', 'lg:grid-cols-6',
+        'lg:grid-cols-7', 'lg:grid-cols-8', 'lg:grid-cols-9', 'lg:grid-cols-10', 'lg:grid-cols-11', 'lg:grid-cols-12',
+    ],
+    xl: [
+        'xl:grid-cols-1', 'xl:grid-cols-2', 'xl:grid-cols-3', 'xl:grid-cols-4', 'xl:grid-cols-5', 'xl:grid-cols-6',
+        'xl:grid-cols-7', 'xl:grid-cols-8', 'xl:grid-cols-9', 'xl:grid-cols-10', 'xl:grid-cols-11', 'xl:grid-cols-12',
+    ],
+};
+/**
+ * Picks the column utility for a breakpoint, clamped to the range that has one.
+ * @param breakpoint Breakpoint the class applies from.
+ * @param columns Requested column count.
+ * @returns The Tailwind class name.
+ */
+function gridColClass(breakpoint, columns) {
+    const index = Math.min(Math.max(Math.round(columns), 1), MAX_GRID_COLS) - 1;
+    return GRID_COL_CLASSES[breakpoint][index];
+}
 /**
  * Responsive card-grid component. Shares the collection chrome (search, every
  * pagination mode, loading skeleton, empty state, toolbar, i18n) with
@@ -8950,6 +8903,40 @@ class MnGrid extends MnCollectionBase {
         return !!this.dataSource.layout?.minCardWidth;
     }
     // ── Layout ──
+    /**
+     * Classes for the card container: `grid` plus one column utility per
+     * breakpoint the consumer configured. Omitted for the auto-fit layout, whose
+     * columns come from {@link autoTemplateColumns} instead.
+     */
+    get gridClasses() {
+        if (this.isAutoLayout) {
+            return 'grid';
+        }
+        const cols = this.dataSource.layout?.cols;
+        const classes = ['grid', gridColClass('base', cols?.base ?? 1)];
+        for (const breakpoint of GRID_BREAKPOINTS) {
+            if (breakpoint === 'base')
+                continue;
+            const columns = cols?.[breakpoint];
+            if (columns != null) {
+                classes.push(gridColClass(breakpoint, columns));
+            }
+        }
+        return classes.join(' ');
+    }
+    /** Gap between cards. */
+    get gridGap() {
+        return this.dataSource.layout?.gap ?? '1rem';
+    }
+    /**
+     * Inline `grid-template-columns` for the auto-fit layout, or null when explicit
+     * `cols` are used (the utilities in {@link gridClasses} then own the columns).
+     * `minCardWidth` is a free-form CSS length, so it can only be expressed inline.
+     */
+    get autoTemplateColumns() {
+        const minCardWidth = this.dataSource.layout?.minCardWidth;
+        return minCardWidth ? `repeat(auto-fit, minmax(${minCardWidth}, 1fr))` : null;
+    }
     /** Skeleton lines for the default/lines placeholder; null when a custom template is used. */
     get skeletonLines() {
         const skeleton = this.dataSource.skeleton;
@@ -8990,11 +8977,11 @@ class MnGrid extends MnCollectionBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class.mn-grid--auto]=\"isAutoLayout\"\n    [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n    [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n    [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n    [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n    [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n    [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n    [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    class=\"mn-grid\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n      [class.mn-grid--auto]=\"isAutoLayout\"\n      [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n      [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n      [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n      [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n      [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n      [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n      [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n      aria-label=\"Card grid\"\n      class=\"mn-grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", styles: [":host{display:block}.mn-grid{display:grid;gap:var(--mn-grid-gap, 1rem);grid-template-columns:repeat(var(--mn-grid-cols-base, 1),minmax(0,1fr))}@media(min-width:640px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)))),minmax(0,1fr))}}@media(min-width:1280px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-xl, var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))))),minmax(0,1fr))}}.mn-grid.mn-grid--auto{grid-template-columns:repeat(auto-fit,minmax(var(--mn-grid-min, 18rem),1fr))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n      aria-label=\"Card grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-grid', standalone: true, imports: [NgTemplateOutlet, FormsModule, MnSkeleton, MnInputField, MnCollectionPagination, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class.mn-grid--auto]=\"isAutoLayout\"\n    [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n    [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n    [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n    [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n    [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n    [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n    [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    class=\"mn-grid\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n      [class.mn-grid--auto]=\"isAutoLayout\"\n      [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n      [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n      [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n      [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n      [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n      [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n      [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n      aria-label=\"Card grid\"\n      class=\"mn-grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", styles: [":host{display:block}.mn-grid{display:grid;gap:var(--mn-grid-gap, 1rem);grid-template-columns:repeat(var(--mn-grid-cols-base, 1),minmax(0,1fr))}@media(min-width:640px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)))),minmax(0,1fr))}}@media(min-width:1280px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-xl, var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))))),minmax(0,1fr))}}.mn-grid.mn-grid--auto{grid-template-columns:repeat(auto-fit,minmax(var(--mn-grid-min, 18rem),1fr))}\n"] }]
+            args: [{ selector: 'mn-grid', standalone: true, imports: [NgTemplateOutlet, FormsModule, MnSkeleton, MnInputField, MnCollectionPagination, LucideDynamicIcon], host: { class: 'block' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n      aria-label=\"Card grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n" }]
         }], propDecorators: { itemClick: [{
                 type: Output
             }], collectionBody: [{