mn-angular-lib 1.0.125 → 1.0.127

package/fesm2022/mn-angular-lib.mjs

@@ -4968,6 +4968,140 @@ var ColumnSortType;
     ColumnSortType["NONE"] = "NONE";
 })(ColumnSortType || (ColumnSortType = {}));
 
+/**
+ * Pure helpers backing mn-table's per-column filters: the empty value and
+ * "is it set?" test for each filter type, and the default client-side predicate
+ * applied when a column supplies no `filterFn`.
+ *
+ * Kept free of Angular so the filter semantics can be unit-tested directly.
+ */
+/** The reset/unset value for a filter type. */
+function emptyFilterValue(type) {
+    switch (type) {
+        case 'multi-select':
+            return [];
+        case 'number-range':
+            return {};
+        case 'date-range':
+            return {};
+        case 'boolean':
+        case 'text':
+        case 'select':
+        default:
+            return '';
+    }
+}
+/**
+ * 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.
+ */
+function isFilterValueActive(value) {
+    if (value === undefined || value === null)
+        return false;
+    if (typeof value === 'boolean')
+        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));
+}
+/**
+ * The value a filter compares against for a row: the column's
+ * `getRawValueToSort` when present (the only option for template cells, which
+ * have no string to read), otherwise the rendered cell string.
+ */
+function resolveFilterableValue(column, row) {
+    if (column.getRawValueToSort)
+        return column.getRawValueToSort(row);
+    if (typeof column.cell === 'function')
+        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:
+ * - `text` — case-insensitive substring match
+ * - `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) {
+        case 'select':
+            return String(raw ?? '') === String(value);
+        case 'multi-select': {
+            const selected = value;
+            return selected.some(option => String(raw ?? '') === option);
+        }
+        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 ?? '')
+                .toLowerCase()
+                .includes(String(value).trim().toLowerCase());
+    }
+}
+/**
+ * Whether a row passes a column's active filter — the column's own `filterFn`
+ * when it has one, otherwise {@link defaultFilterPredicate}.
+ *
+ * `filterFn` is declared per filter type on {@link ColumnDefinition}, so at this
+ * generic call site the union of signatures is not callable and the value shape
+ * is widened once here. Consumers keep the precise per-type signature where they
+ * declare the column, which is where it matters.
+ */
+function matchesColumnFilter(column, row, value) {
+    const filterFn = column.filterFn;
+    if (filterFn)
+        return filterFn(row, value);
+    return defaultFilterPredicate(column.filterType ?? 'text', resolveFilterableValue(column, row), value);
+}
+
 const mnSkeletonVariants = tv({
     base: 'bg-base-300 relative overflow-hidden',
     variants: {
@@ -5764,8 +5898,19 @@ class MnTable extends MnSelectableCollectionBase {
     currentSort = null;
     /** Per-column filter values keyed by column key. */
     columnFilters = {};
+    /** Filter types compact enough to render directly inside the header cell. */
+    static INLINE_FILTER_TYPES = ['text', 'select', 'boolean'];
+    /** Width (px) of the filter popover, mirrored from its `w-64` class for clamping. */
+    static POPOVER_WIDTH = 256;
     /** Viewport width (px) below which the inline filter row collapses into a panel. */
     static FILTER_COLLAPSE_WIDTH = 640;
+    /**
+     * Key of the column whose filter popover is open, or `null` when none is.
+     * Only the rich filter types ({@link isPopoverFilter}) use a popover.
+     */
+    openFilterKey = null;
+    /** 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
@@ -5779,13 +5924,152 @@ class MnTable extends MnSelectableCollectionBase {
         return this.dataSource?.toolbarLeftTemplate;
     }
     collectionBody;
-    /** Updates a column filter value and re-applies filtering. */
-    onColumnFilter(columnKey, value) {
-        this.columnFilters[columnKey] = value;
+    // ── Column Filters ──
+    /** Bounds rendered by a date-range filter, in input order. */
+    dateBounds = ['from', 'to'];
+    /** Viewport coordinates of the open filter popover. */
+    popoverPosition = { top: 0, left: 0 };
+    /** Debounces server-side text filters so typing doesn't fire a request per keystroke. */
+    filterDebounce = new Subject();
+    /** The open filter popover, used to tell inside clicks from outside ones. */
+    filterPopover;
+    constructor() {
+        super();
+        // Server-side text filtering only: client-side filtering stays instant per keystroke.
+        this.filterDebounce
+            .pipe(debounceTime(300), takeUntilDestroyed())
+            .subscribe(() => {
+            this.emitServerFilters();
+            this.cdr.markForCheck();
+        });
+    }
+    /** Whether the consumer owns filtering (server-side), mirroring {@link isServerSearched}. */
+    get isServerFiltered() {
+        return !!this.dataSource.onColumnFilterChange;
+    }
+    /** Every column filter that is actually set, in column order. */
+    get activeColumnFilters() {
+        return this.dataSource.columns
+            .filter(col => col.filterable && isFilterValueActive(this.columnFilters[col.key]))
+            .map(col => ({
+            key: col.key,
+            type: this.filterTypeOf(col),
+            value: this.columnFilters[col.key],
+        }));
+    }
+    /** Whether at least one column filter is active. */
+    get hasActiveFilters() {
+        return this.dataSource.columns.some(col => col.filterable && isFilterValueActive(this.columnFilters[col.key]));
+    }
+    /**
+     * Updates a column filter value and either re-filters locally or hands the
+     * active filters to the consumer. Server-side text filters are debounced;
+     * every other type commits immediately.
+     */
+    onColumnFilter(column, value) {
+        this.columnFilters[column.key] = value;
         this.currentPage = 1;
-        this.applyFilter(false);
+        if (this.isServerFiltered) {
+            if (this.filterTypeOf(column) === 'text') {
+                this.filterDebounce.next();
+            }
+            else {
+                this.emitServerFilters();
+            }
+        }
+        else {
+            this.applyFilter(false);
+        }
         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');
+    }
+    /** The effective filter type of a column, defaulting to text. */
+    filterTypeOf(column) {
+        return column.filterType ?? 'text';
+    }
+    /** Whether a column's filter renders inline in the header cell (vs. in a popover). */
+    isInlineFilter(column) {
+        return MnTable.INLINE_FILTER_TYPES.includes(this.filterTypeOf(column));
+    }
+    /** Whether a column's filter is rich enough to need the popover panel. */
+    isPopoverFilter(column) {
+        return !!column.filterable && !this.isInlineFilter(column);
+    }
+    /** Whether a specific column's filter currently narrows the rows. */
+    isColumnFilterActive(column) {
+        return isFilterValueActive(this.columnFilters[column.key]);
+    }
+    /** The column whose filter popover is open, or `null`. */
+    openFilterColumn() {
+        if (this.openFilterKey === null)
+            return null;
+        return this.dataSource.columns.find(col => col.key === this.openFilterKey) ?? null;
+    }
+    /**
+     * Opens/closes a column's filter popover, closing any other that was open, and
+     * anchors it under the trigger. The popover is positioned `fixed` from the
+     * trigger's viewport rect because it renders outside the table's
+     * `overflow-x-auto` wrapper, which would otherwise clip it.
+     */
+    toggleFilterPopover(column, event) {
+        if (this.openFilterKey === column.key) {
+            this.openFilterKey = null;
+            return;
+        }
+        const trigger = event.currentTarget;
+        if (trigger) {
+            const rect = trigger.getBoundingClientRect();
+            const maxLeft = window.innerWidth - MnTable.POPOVER_WIDTH - 8;
+            this.popoverPosition = { top: rect.bottom + 4, left: Math.max(8, Math.min(rect.left, maxLeft)) };
+        }
+        this.openFilterKey = column.key;
+    }
+    /** Resets a single column's filter (from its popover) and re-applies filtering. */
+    clearColumnFilter(column) {
+        this.onColumnFilter(column, emptyFilterValue(this.filterTypeOf(column)));
+    }
+    /** Closes the filter popover, if one is open. */
+    closeFilterPopover() {
+        if (this.openFilterKey === null)
+            return;
+        this.openFilterKey = null;
+        this.cdr.markForCheck();
+    }
+    /** Filter options formatted for mn-multi-select for a given column. */
+    getFilterMultiSelectOptions(column) {
+        return (column.filterOptions ?? []).map(opt => ({ label: opt.label, value: String(opt.value) }));
+    }
+    /** Any / Yes / No options for a boolean column filter. */
+    getBooleanFilterOptions(column) {
+        const labels = this.dataSource.filterLabels;
+        return [
+            { label: column.filterPlaceholder ?? labels?.any ?? 'Any', value: '' },
+            { label: labels?.yes ?? 'Yes', value: 'true' },
+            { label: labels?.no ?? 'No', value: 'false' },
+        ];
+    }
     /** Filter options formatted for mn-select for a given column. */
     getFilterSelectOptions(column) {
         const placeholder = column.filterPlaceholder ?? 'All';
@@ -5794,14 +6078,73 @@ class MnTable extends MnSelectableCollectionBase {
             ...(column.filterOptions ?? []).map(opt => ({ label: opt.label, value: String(opt.value) })),
         ];
     }
-    // ── Column Filters ──
+    /** Current text/select filter value for a column. */
+    textFilterValue(column) {
+        const value = this.columnFilters[column.key];
+        return typeof value === 'string' ? value : '';
+    }
+    /** Current multi-select filter value for a column. */
+    multiFilterValue(column) {
+        const value = this.columnFilters[column.key];
+        return Array.isArray(value) ? value : [];
+    }
+    /** Current boolean filter value for a column, as the select's string value. */
+    booleanFilterValue(column) {
+        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();
+        this.currentPage = 1;
+        if (this.isServerFiltered) {
+            this.emitServerFilters();
+        }
+        else {
+            this.applyFilter(false);
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Closes the filter popover when the click landed outside it. Membership is
+     * tested against the popover element rather than stopping propagation inside
+     * it, so the popover's own controls stay ordinary, focusable elements.
+     */
+    onDocumentClick(event) {
+        if (this.openFilterKey === null)
+            return;
+        const target = event.target;
+        if (target && this.filterPopover?.nativeElement.contains(target))
+            return;
+        this.closeFilterPopover();
+    }
     /** Whether any column has filtering enabled. */
     get hasColumnFilters() {
         return this.dataSource.columns.some(c => c.filterable);
     }
-    /** Whether at least one column filter is active. */
-    get hasActiveFilters() {
-        return this.dataSource.columns.some(col => col.filterable && !!this.columnFilters[col.key]);
+    /** Closes the filter popover on Escape. */
+    onEscape() {
+        this.closeFilterPopover();
     }
     /** Label for the small-screen filters toggle button. */
     get filtersButtonLabel() {
@@ -5815,15 +6158,23 @@ class MnTable extends MnSelectableCollectionBase {
     toggleFiltersPanel() {
         this.filtersPanelOpen = !this.filtersPanelOpen;
     }
-    /** Resets every column filter and re-applies filtering. */
-    clearAllFilters() {
-        for (const col of this.dataSource.columns) {
-            if (col.filterable)
-                this.columnFilters[col.key] = '';
-        }
-        this.currentPage = 1;
-        this.applyFilter(false);
-        this.cdr.markForCheck();
+    /** Re-evaluate responsive page size and filter layout when the viewport changes. */
+    onWindowResize() {
+        this.applyResponsivePageSize(true);
+        this.updateFilterLayout(true);
+        // The popover is anchored to a viewport rect that a resize invalidates.
+        this.closeFilterPopover();
+    }
+    /** Sets sort/filter state seeded from the data source before the first filter pass. */
+    beforeInitialFilter() {
+        super.beforeInitialFilter();
+        // Force the mobile row count below `md`; use the consumer's pageSize (or 10) above it.
+        this.desktopPageSize = this.dataSource.pageSize ?? 10;
+        this.applyResponsivePageSize(false);
+        // Seed the filter layout for the initial viewport (no markForCheck pre-render).
+        this.updateFilterLayout(false);
+        this.currentSort = this.dataSource.defaultSort ?? null;
+        this.seedFilterValues();
     }
     /** True when the viewport is below the filter-collapse breakpoint. */
     isFilterViewport() {
@@ -5916,30 +6267,52 @@ class MnTable extends MnSelectableCollectionBase {
         if (reflow)
             this.cdr.markForCheck();
     }
-    /** Re-evaluate responsive page size and filter layout when the viewport changes. */
-    onWindowResize() {
-        this.applyResponsivePageSize(true);
-        this.updateFilterLayout(true);
+    /**
+     * Resolves table-specific translation keys (column headers/filters) plus the
+     * shared keys handled by the base.
+     */
+    resolveTranslationKeys() {
+        super.resolveTranslationKeys();
+        for (const col of this.dataSource.columns) {
+            if (col.headerKey) {
+                col.header = this.lang.t(col.headerKey);
+            }
+            if (col.filterPlaceholderKey) {
+                col.filterPlaceholder = this.lang.t(col.filterPlaceholderKey);
+            }
+        }
+        if (this.dataSource.filtersLabelKey) {
+            this.dataSource.filtersLabel = this.lang.t(this.dataSource.filtersLabelKey);
+        }
+        if (this.dataSource.clearFiltersLabelKey) {
+            this.dataSource.clearFiltersLabel = this.lang.t(this.dataSource.clearFiltersLabelKey);
+        }
+        this.resolveFilterLabelKeys();
     }
     /** Tracks the desktop page size when the user picks one (selector only shows at >= md). */
     onPageSizeChange(newSize) {
         this.desktopPageSize = newSize;
         super.onPageSizeChange(newSize);
     }
-    /** Sets sort/filter state seeded from the data source before the first filter pass. */
-    beforeInitialFilter() {
-        super.beforeInitialFilter();
-        // Force the mobile row count below `md`; use the consumer's pageSize (or 10) above it.
-        this.desktopPageSize = this.dataSource.pageSize ?? 10;
-        this.applyResponsivePageSize(false);
-        // Seed the filter layout for the initial viewport (no markForCheck pre-render).
-        this.updateFilterLayout(false);
-        this.currentSort = this.dataSource.defaultSort ?? null;
-        for (const col of this.dataSource.columns) {
-            if (col.filterable) {
-                this.columnFilters[col.key] = '';
+    applyFilter(searchForItems) {
+        let items = this.applySearchFilter(this.dataSource.dataRows.value ?? []);
+        // Per-column filters. Skipped entirely when the consumer owns filtering: the
+        // rows already are the filtered set, and re-filtering them locally would
+        // narrow the current page a second time.
+        if (!this.isServerFiltered) {
+            for (const col of this.dataSource.columns) {
+                const filterValue = this.columnFilters[col.key];
+                if (!col.filterable || !isFilterValueActive(filterValue))
+                    continue;
+                items = items.filter(row => matchesColumnFilter(col, row, filterValue));
             }
         }
+        items = this.applySorting(items);
+        this.filteredItems = items;
+        this.applyPagination();
+        if (searchForItems) {
+            this.loadMoreRows();
+        }
     }
     // ── Template helpers ──
     getCellValue(column, row) {
@@ -5966,50 +6339,36 @@ class MnTable extends MnSelectableCollectionBase {
     }
     // ── Skeleton ──
     /**
-     * Resolves table-specific translation keys (column headers/filters) plus the
-     * shared keys handled by the base.
+     * Hands the active filters to the consumer. Locks the body height first so the
+     * skeleton swap during the refetch can't collapse the layout, matching
+     * {@link goToPage} and {@link onSearch}.
      */
-    resolveTranslationKeys() {
-        super.resolveTranslationKeys();
+    emitServerFilters() {
+        this.lockBodyHeight();
+        this.dataSource.onColumnFilterChange?.(this.activeColumnFilters);
+    }
+    /** Resets every filterable column to its type's empty value. */
+    seedFilterValues() {
         for (const col of this.dataSource.columns) {
-            if (col.headerKey) {
-                col.header = this.lang.t(col.headerKey);
-            }
-            if (col.filterPlaceholderKey) {
-                col.filterPlaceholder = this.lang.t(col.filterPlaceholderKey);
+            if (col.filterable) {
+                this.columnFilters[col.key] = emptyFilterValue(this.filterTypeOf(col));
             }
         }
-        if (this.dataSource.filtersLabelKey) {
-            this.dataSource.filtersLabel = this.lang.t(this.dataSource.filtersLabelKey);
-        }
-        if (this.dataSource.clearFiltersLabelKey) {
-            this.dataSource.clearFiltersLabel = this.lang.t(this.dataSource.clearFiltersLabelKey);
-        }
     }
     // ── Filtering & sorting ──
-    applyFilter(searchForItems) {
-        let items = this.applySearchFilter(this.dataSource.dataRows.value ?? []);
-        // Per-column filters
-        for (const col of this.dataSource.columns) {
-            const filterValue = this.columnFilters[col.key];
-            if (!col.filterable || !filterValue)
-                continue;
-            if (col.filterFn) {
-                items = items.filter(row => col.filterFn(row, filterValue));
-            }
-            else {
-                const term = filterValue.toLowerCase();
-                items = items.filter(row => {
-                    const cellValue = typeof col.cell === 'function' ? col.cell(row) : '';
-                    return (cellValue ?? '').toLowerCase().includes(term);
-                });
-            }
-        }
-        items = this.applySorting(items);
-        this.filteredItems = items;
-        this.applyPagination();
-        if (searchForItems) {
-            this.loadMoreRows();
+    /** Resolves the range / boolean filter control labels from their translation keys. */
+    resolveFilterLabelKeys() {
+        const labels = this.dataSource.filterLabels;
+        if (!labels)
+            return;
+        const pairs = [
+            ['minKey', 'min'], ['maxKey', 'max'], ['fromKey', 'from'], ['toKey', 'to'],
+            ['anyKey', 'any'], ['yesKey', 'yes'], ['noKey', 'no'],
+        ];
+        for (const [keyProp, labelProp] of pairs) {
+            const key = labels[keyProp];
+            if (key)
+                labels[labelProp] = this.lang.t(key);
         }
     }
     applySorting(items) {
@@ -6045,19 +6404,28 @@ class MnTable extends MnSelectableCollectionBase {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: null, 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()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- 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-[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 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        class=\"w-full min-[375px]:flex-1 min-[480px]: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-[375px]:w-auto min-[375px]: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-[375px]: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              @if ((column.filterType ?? 'text') === 'text') {\n                <mn-lib-input-field\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    type: 'text',\n                    label: '',\n                    placeholder: column.filterPlaceholder ?? '',\n                    autocomplete: column.filterAutocomplete ?? undefined,\n                    size: 'sm',\n                    borderRadius: 'md',\n                    fullWidth: true,\n                    hover: true\n                  }\"\n                  [ngModel]=\"columnFilters[column.key]\"\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                ></mn-lib-input-field>\n              } @else if (column.filterType === 'select') {\n                <mn-lib-select\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  [ngModel]=\"columnFilters[column.key] ?? ''\"\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    options: getFilterSelectOptions(column),\n                    size: 'sm',\n                    fullWidth: true\n                  }\"\n                ></mn-lib-select>\n              }\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\" 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 bg-base-200 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            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\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]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\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      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\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]=\"column.width ?? null\"\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                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\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]=\"column.width ?? null\"\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", 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: 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 ɵ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: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }, { propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- 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-[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 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        class=\"w-full min-[375px]:flex-1 min-[480px]: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-[375px]:w-auto min-[375px]: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-[375px]: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 (scroll)=\"closeFilterPopover()\" [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 bg-base-200 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            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\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]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\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      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if (isInlineFilter(column)) {\n                  <!-- Compact types render directly under the header -->\n                  <ng-container\n                    [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                    [ngTemplateOutlet]=\"filterField\"\n                  ></ng-container>\n                } @else {\n                  <!-- Ranges and multi-select don't fit a column width: trigger a popover -->\n                  <button\n                    (click)=\"$event.stopPropagation(); toggleFilterPopover(column, $event)\"\n                    [attr.aria-expanded]=\"openFilterKey === column.key\"\n                    [attr.aria-label]=\"column.filterPlaceholder ?? filtersButtonLabel\"\n                    [data]=\"{ variant: isColumnFilterActive(column) ? 'fill' : 'outline', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n                    class=\"w-full gap-1.5\"\n                    mnButton\n                    type=\"button\"\n                  >\n                    <svg [size]=\"14\" lucideFilter></svg>\n                    @if (isColumnFilterActive(column)) {\n                      <span class=\"h-1.5 w-1.5 rounded-full bg-current\"></span>\n                    }\n                  </button>\n                }\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]=\"column.width ?? null\"\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                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\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]=\"column.width ?? null\"\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\n<!-- Filter popover for the rich filter types. Rendered outside the table's\n     overflow-x-auto wrapper and positioned fixed, so it can't be clipped or\n     scrolled away by it. -->\n@if (openFilterColumn(); as popoverColumn) {\n  <div\n    #filterPopover\n    [style.left.px]=\"popoverPosition.left\"\n    [style.top.px]=\"popoverPosition.top\"\n    class=\"fixed z-30 w-64 rounded-md border border-base-300 bg-base-100 p-3 shadow-lg\"\n    role=\"dialog\"\n  >\n    <p class=\"mb-2 text-xs font-medium text-base-content/70\">\n      @if (isTemplateRef(popoverColumn.header)) {\n        <ng-container [ngTemplateOutlet]=\"$any(popoverColumn.header)\"></ng-container>\n      } @else {\n        {{ popoverColumn.header }}\n      }\n    </p>\n    <ng-container\n      [ngTemplateOutletContext]=\"{ $implicit: popoverColumn, idScope: 'popover' }\"\n      [ngTemplateOutlet]=\"filterField\"\n    ></ng-container>\n    @if (isColumnFilterActive(popoverColumn)) {\n      <button\n        (click)=\"clearColumnFilter(popoverColumn)\"\n        [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n        class=\"mt-2 gap-1\"\n        mnButton\n        type=\"button\"\n      >\n        <svg [size]=\"14\" lucideX></svg>\n        <span>{{ clearFiltersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n}\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row, the popover and the small-screen panel. `idScope` keeps element ids\n     unique across the three 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          collapseThreshold: 2,\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 });
 }
 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, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- 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-[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 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        class=\"w-full min-[375px]:flex-1 min-[480px]: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-[375px]:w-auto min-[375px]: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-[375px]: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              @if ((column.filterType ?? 'text') === 'text') {\n                <mn-lib-input-field\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    type: 'text',\n                    label: '',\n                    placeholder: column.filterPlaceholder ?? '',\n                    autocomplete: column.filterAutocomplete ?? undefined,\n                    size: 'sm',\n                    borderRadius: 'md',\n                    fullWidth: true,\n                    hover: true\n                  }\"\n                  [ngModel]=\"columnFilters[column.key]\"\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                ></mn-lib-input-field>\n              } @else if (column.filterType === 'select') {\n                <mn-lib-select\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  [ngModel]=\"columnFilters[column.key] ?? ''\"\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    options: getFilterSelectOptions(column),\n                    size: 'sm',\n                    fullWidth: true\n                  }\"\n                ></mn-lib-select>\n              }\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\" 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 bg-base-200 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            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\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]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\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      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\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]=\"column.width ?? null\"\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                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\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]=\"column.width ?? null\"\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" }]
-        }], propDecorators: { sortChange: [{
+            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, template: "<!-- 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-[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 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        class=\"w-full min-[375px]:flex-1 min-[480px]: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-[375px]:w-auto min-[375px]: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-[375px]: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 (scroll)=\"closeFilterPopover()\" [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 bg-base-200 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            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\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]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\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      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if (isInlineFilter(column)) {\n                  <!-- Compact types render directly under the header -->\n                  <ng-container\n                    [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                    [ngTemplateOutlet]=\"filterField\"\n                  ></ng-container>\n                } @else {\n                  <!-- Ranges and multi-select don't fit a column width: trigger a popover -->\n                  <button\n                    (click)=\"$event.stopPropagation(); toggleFilterPopover(column, $event)\"\n                    [attr.aria-expanded]=\"openFilterKey === column.key\"\n                    [attr.aria-label]=\"column.filterPlaceholder ?? filtersButtonLabel\"\n                    [data]=\"{ variant: isColumnFilterActive(column) ? 'fill' : 'outline', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n                    class=\"w-full gap-1.5\"\n                    mnButton\n                    type=\"button\"\n                  >\n                    <svg [size]=\"14\" lucideFilter></svg>\n                    @if (isColumnFilterActive(column)) {\n                      <span class=\"h-1.5 w-1.5 rounded-full bg-current\"></span>\n                    }\n                  </button>\n                }\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]=\"column.width ?? null\"\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                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\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]=\"column.width ?? null\"\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\n<!-- Filter popover for the rich filter types. Rendered outside the table's\n     overflow-x-auto wrapper and positioned fixed, so it can't be clipped or\n     scrolled away by it. -->\n@if (openFilterColumn(); as popoverColumn) {\n  <div\n    #filterPopover\n    [style.left.px]=\"popoverPosition.left\"\n    [style.top.px]=\"popoverPosition.top\"\n    class=\"fixed z-30 w-64 rounded-md border border-base-300 bg-base-100 p-3 shadow-lg\"\n    role=\"dialog\"\n  >\n    <p class=\"mb-2 text-xs font-medium text-base-content/70\">\n      @if (isTemplateRef(popoverColumn.header)) {\n        <ng-container [ngTemplateOutlet]=\"$any(popoverColumn.header)\"></ng-container>\n      } @else {\n        {{ popoverColumn.header }}\n      }\n    </p>\n    <ng-container\n      [ngTemplateOutletContext]=\"{ $implicit: popoverColumn, idScope: 'popover' }\"\n      [ngTemplateOutlet]=\"filterField\"\n    ></ng-container>\n    @if (isColumnFilterActive(popoverColumn)) {\n      <button\n        (click)=\"clearColumnFilter(popoverColumn)\"\n        [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n        class=\"mt-2 gap-1\"\n        mnButton\n        type=\"button\"\n      >\n        <svg [size]=\"14\" lucideX></svg>\n        <span>{{ clearFiltersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n}\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row, the popover and the small-screen panel. `idScope` keeps element ids\n     unique across the three 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          collapseThreshold: 2,\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" }]
+        }], ctorParameters: () => [], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
                 type: Output
             }], collectionBody: [{
                 type: ViewChild,
                 args: ['collectionBody']
+            }], filterPopover: [{
+                type: ViewChild,
+                args: ['filterPopover']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -9639,11 +10007,11 @@ class MnTabComponent {
         this.currentActive = items[index];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
@@ -10279,5 +10647,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultIconForStyle, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map