mn-angular-lib 1.0.129 → 1.0.131

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, ChangeDetectorRef, HostListener, ViewChild, ViewContainerRef, forwardRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -3474,10 +3474,24 @@ class MnMultiSelect {
     lang = inject(MnLanguageService);
     destroyRef = inject(DestroyRef);
     renderer = inject(Renderer2);
+    cdr = inject(ChangeDetectorRef);
     /** Reference to the trigger element for positioning the dropdown */
     triggerRef;
     /** The panel element currently moved into `document.body`, if any. */
     movedPanel = null;
+    /**
+     * Watches the trigger while the panel is open. The panel lives in `document.body`,
+     * so it survives its own trigger being hidden by an ancestor — e.g. a wizard step
+     * or a tab that is switched away with `display: none` instead of being destroyed.
+     * When the trigger stops being visible the panel must go with it.
+     */
+    visibilityObserver = null;
+    /**
+     * Capture-phase scroll listener installed while open. `window:scroll` only fires for
+     * the document scroller, so scrolling an inner container (a modal body, a scrollable
+     * card) used to leave the portalled panel floating at its stale coordinates.
+     */
+    scrollCapture = null;
     /**
      * The dropdown panel element, queried while it is rendered by the `@if` block.
      * The setter relocates the panel to `document.body` so that its `position: fixed`
@@ -3513,6 +3527,7 @@ class MnMultiSelect {
         });
         this.destroyRef.onDestroy(() => {
             sub.unsubscribe();
+            this.stopWatchingTrigger();
             // Guarantee the portalled panel never outlives the component.
             this.relocateDropdown(null);
         });
@@ -3524,10 +3539,7 @@ class MnMultiSelect {
         const insideHost = !!target && this.elRef.nativeElement.contains(target);
         const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
         if (!insideHost && !insidePanel) {
-            if (this.isOpen) {
-                this.isOpen = false;
-                this.searchTerm = '';
-            }
+            this.close();
         }
     }
     resolveConfig() {
@@ -3557,13 +3569,33 @@ class MnMultiSelect {
     toggle() {
         if (this.isDisabled)
             return;
-        this.isOpen = !this.isOpen;
         if (this.isOpen) {
-            this.updateDropdownPosition();
-        }
-        else {
-            this.searchTerm = '';
+            this.close();
+            return;
         }
+        this.isOpen = true;
+        this.updateDropdownPosition();
+        this.startWatchingTrigger();
+    }
+    /** Closes the dropdown on Escape for keyboard accessibility. */
+    onEscape() {
+        this.close();
+    }
+    /** Closes the dropdown when the page or a scrollable parent is scrolled */
+    onWindowScrollOrResize() {
+        this.close();
+    }
+    /**
+     * The single close path. Every trigger (outside click, Escape, scroll, resize, the
+     * trigger being hidden) funnels through here so the open-only listeners are always
+     * torn down with the panel and never leak.
+     */
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.stopWatchingTrigger();
     }
     /** Calculates the fixed position for the dropdown based on the trigger element */
     updateDropdownPosition() {
@@ -3576,12 +3608,34 @@ class MnMultiSelect {
             width: `${rect.width}px`,
         };
     }
-    /** Closes the dropdown on Escape for keyboard accessibility. */
-    onEscape() {
-        if (this.isOpen) {
-            this.isOpen = false;
-            this.searchTerm = '';
+    /**
+     * Starts the open-only watchers: an `IntersectionObserver` on the trigger (closes the
+     * panel as soon as the trigger stops being rendered/visible) and a capture-phase
+     * `scroll` listener (closes it when any ancestor scroller moves under it). Scrolls
+     * that originate inside the panel's own option list are ignored.
+     */
+    startWatchingTrigger() {
+        this.stopWatchingTrigger();
+        const trigger = this.triggerRef?.nativeElement;
+        if (trigger && typeof IntersectionObserver !== 'undefined') {
+            this.visibilityObserver = new IntersectionObserver(entries => {
+                if (!entries.some(entry => !entry.isIntersecting))
+                    return;
+                this.close();
+                // The observer fires outside Angular, so a zoneless app needs an explicit nudge.
+                this.cdr.markForCheck();
+            });
+            this.visibilityObserver.observe(trigger);
         }
+        this.scrollCapture = (event) => {
+            const target = event.target;
+            if (target && this.movedPanel && (this.movedPanel === target || this.movedPanel.contains(target))) {
+                return;
+            }
+            this.close();
+            this.cdr.markForCheck();
+        };
+        document.addEventListener('scroll', this.scrollCapture, true);
     }
     /**
      * Move the dropdown panel to `document.body` when it appears, and detach it when
@@ -3606,11 +3660,13 @@ class MnMultiSelect {
             this.movedPanel = null;
         }
     }
-    /** Closes the dropdown when the page or a scrollable parent is scrolled */
-    onWindowScrollOrResize() {
-        if (this.isOpen) {
-            this.isOpen = false;
-            this.searchTerm = '';
+    /** Tears down the watchers installed by `startWatchingTrigger`. Idempotent. */
+    stopWatchingTrigger() {
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = null;
+        if (this.scrollCapture) {
+            document.removeEventListener('scroll', this.scrollCapture, true);
+            this.scrollCapture = null;
         }
     }
     toggleOption(option) {
@@ -5162,6 +5218,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Attribute directive that applies responsive-hiding classes to table cells/headers.
  * Hides the element by default and shows it as `table-cell` at the specified breakpoint.
  *
+ * The breakpoints are **container** queries against the table's own width, not the
+ * viewport: a table inside a modal (or any narrow column) is far narrower than the
+ * window, so viewport breakpoints would reveal columns the table has no room for.
+ * mn-table marks its chrome `@container` for exactly this.
+ *
  * Uses a static class map so Tailwind CSS can detect the full class names at build time.
  *
  * Usage: `<td [mnHiddenBelow]="column.hiddenBelow">`
@@ -5174,9 +5235,9 @@ class MnHiddenBelowDirective {
     appliedClasses = [];
     /** Static mapping of breakpoints to their full Tailwind class names. */
     classMap = {
-        sm: ['hidden', 'sm:table-cell'],
-        md: ['hidden', 'md:table-cell'],
-        lg: ['hidden', 'lg:table-cell'],
+        sm: ['hidden', '@min-[640px]:table-cell'],
+        md: ['hidden', '@min-[768px]:table-cell'],
+        lg: ['hidden', '@min-[1024px]:table-cell'],
     };
     ngOnChanges() {
         // Remove previously applied classes
@@ -5219,9 +5280,9 @@ class MnShowAboveDirective {
     appliedClasses = [];
     /** Static mapping of breakpoints to their full Tailwind class names. */
     classMap = {
-        sm: ['hidden', 'sm:inline'],
-        md: ['hidden', 'md:inline'],
-        lg: ['hidden', 'lg:inline'],
+        sm: ['hidden', '@min-[640px]:inline'],
+        md: ['hidden', '@min-[768px]:inline'],
+        lg: ['hidden', '@min-[1024px]:inline'],
     };
     ngOnChanges() {
         for (const cls of this.appliedClasses) {
@@ -5263,9 +5324,9 @@ class MnShowBelowDirective {
     appliedClasses = [];
     /** Static mapping of breakpoints to their full Tailwind class names. */
     classMap = {
-        sm: ['inline', 'sm:hidden'],
-        md: ['inline', 'md:hidden'],
-        lg: ['inline', 'lg:hidden'],
+        sm: ['inline', '@min-[640px]:hidden'],
+        md: ['inline', '@min-[768px]:hidden'],
+        lg: ['inline', '@min-[1024px]:hidden'],
     };
     ngOnChanges() {
         for (const cls of this.appliedClasses) {
@@ -5484,7 +5545,7 @@ class MnCollectionBase {
         return Array.from({ length: count });
     }
     ngOnInit() {
-        this.validateDataSource();
+        this.normalizeDataSource();
         this.resolveTranslationKeys();
         this.pageSize = this.dataSource.pageSize ?? 10;
         this.beforeInitialFilter();
@@ -5665,30 +5726,60 @@ class MnCollectionBase {
         this.loadingMoreRows = false;
         this.applyFilter(false);
     }
-    validateDataSource() {
+    /**
+     * Reports every misconfigured pagination setting and repairs it in place.
+     *
+     * This deliberately does **not** throw. It runs first in {@link ngOnInit}, and a
+     * throw there aborts the rest of init — the data subscription is never made and
+     * {@link applyFilter} never runs, so the component renders a permanently empty
+     * body that only "heals" once some later interaction happens to call
+     * {@link applyFilter}. That failure mode reads as "the table is broken" rather
+     * than "the data source is misconfigured", and inside a modal the thrown error
+     * is easy to miss entirely. Logging loudly and degrading to the nearest working
+     * mode keeps the misconfiguration visible while still rendering the rows.
+     */
+    normalizeDataSource() {
         const mode = this.dataSource.paginationMode;
+        // Server-side pagination without the server half of the contract: there is no
+        // way to fetch another page, so paginate the rows we were handed instead.
         if (mode === 'paginated') {
-            if (!this.dataSource.onPageChange) {
-                throw new Error(`[${this.componentName}] paginationMode is 'paginated' but 'onPageChange' callback is missing. Server-side pagination requires 'onPageChange'.`);
-            }
-            if (this.dataSource.totalItems == null) {
-                throw new Error(`[${this.componentName}] paginationMode is 'paginated' but 'totalItems' is missing. Server-side pagination requires 'totalItems'.`);
+            const missing = [];
+            if (!this.dataSource.onPageChange)
+                missing.push('onPageChange');
+            if (this.dataSource.totalItems == null)
+                missing.push('totalItems');
+            if (missing.length > 0) {
+                this.reportConfigError(`paginationMode is 'paginated' but ${missing.join(' and ')} ${missing.length === 1 ? 'is' : 'are'} missing. ` +
+                    `Server-side pagination requires both; falling back to 'client-side-pagination'.`);
+                this.dataSource.paginationMode = 'client-side-pagination';
             }
         }
         if (mode === 'load-more' || mode === 'infinite-scroll') {
             if (!this.dataSource.onLoadMore && !this.dataSource.loadAdditionalRows && !this.dataSource.paginationStrategy) {
-                throw new Error(`[${this.componentName}] paginationMode is '${mode}' but no load-more mechanism is provided. Provide 'onLoadMore', 'loadAdditionalRows', or 'paginationStrategy'.`);
+                this.reportConfigError(`paginationMode is '${mode}' but no load-more mechanism is provided. ` +
+                    `Provide 'onLoadMore', 'loadAdditionalRows', or 'paginationStrategy'; falling back to 'none'.`);
+                this.dataSource.paginationMode = 'none';
             }
         }
-        // Validate pageSize is one of pageSizeOptions when pagination is active
-        if (mode && mode !== 'none') {
-            const options = this.dataSource.pageSizeOptions ?? [5, 10, 25, 50];
+        // A pageSize outside the selector's options would leave the dropdown with no
+        // matching entry; widen the options rather than override the consumer's size.
+        if (this.dataSource.paginationMode && this.dataSource.paginationMode !== 'none') {
+            const options = this.resolvedPageSizeOptions;
             const size = this.dataSource.pageSize ?? 10;
             if (!options.includes(size)) {
-                throw new Error(`[${this.componentName}] pageSize '${size}' is not one of the allowed pageSizeOptions [${options.join(', ')}]. pageSize must be one of pageSizeOptions.`);
+                this.reportConfigError(`pageSize '${size}' is not one of pageSizeOptions [${options.join(', ')}]. ` +
+                    `Adding it so the rows-per-page selector can show it.`);
+                this.dataSource.pageSizeOptions = [...options, size].sort((a, b) => a - b);
             }
         }
     }
+    /**
+     * Logs a data-source configuration problem, prefixed with the component name.
+     * @param message What is wrong and how it was compensated for.
+     */
+    reportConfigError(message) {
+        console.error(`[${this.componentName}] ${message}`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnCollectionBase, isStandalone: true, inputs: { dataSource: "dataSource" }, ngImport: i0 });
 }
@@ -5933,16 +6024,16 @@ class MnTable extends MnSelectableCollectionBase {
     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();
-        });
-    }
+    /**
+     * Most rows shown per page on mobile (< md). A **cap**, not an override: a data
+     * source asking for fewer rows keeps its own size. Raising a small page size on
+     * a phone is the opposite of what it is for — it pushes the paginator below the
+     * fold, which is most damaging inside a modal, where the sheet is already short
+     * and its footer is pinned over the bottom of the table.
+     */
+    static MOBILE_PAGE_SIZE = 10;
+    /** The component's own element, measured for every responsive decision. */
+    host = inject((ElementRef));
     /** Whether the consumer owns filtering (server-side), mirroring {@link isServerSearched}. */
     get isServerFiltered() {
         return !!this.dataSource.onColumnFilterChange;
@@ -6158,12 +6249,29 @@ class MnTable extends MnSelectableCollectionBase {
     toggleFiltersPanel() {
         this.filtersPanelOpen = !this.filtersPanelOpen;
     }
-    /** 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();
+    baseTableClasses = 'w-full border-collapse overflow-y-hidden';
+    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();
+        });
+        // Watch the table's own box rather than the window: inside a modal, a sidebar
+        // or a narrow grid cell the table resizes without the window ever changing,
+        // and the window resizes without the table's share of it changing.
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(() => this.onHostResize());
+            observer.observe(this.host.nativeElement);
+            inject(DestroyRef).onDestroy(() => observer.disconnect());
+        }
+        // `beforeInitialFilter` runs while the host may not be attached or laid out
+        // yet, so its width reads 0 and {@link measuredWidth} has to guess from the
+        // window — the one guess that is wrong for a table in a modal. Re-evaluate
+        // once after the first render, when the real width is available.
+        afterNextRender(() => this.onHostResize());
     }
     /** Sets sort/filter state seeded from the data source before the first filter pass. */
     beforeInitialFilter() {
@@ -6176,9 +6284,13 @@ class MnTable extends MnSelectableCollectionBase {
         this.currentSort = this.dataSource.defaultSort ?? null;
         this.seedFilterValues();
     }
-    /** True when the viewport is below the filter-collapse breakpoint. */
-    isFilterViewport() {
-        return typeof window !== 'undefined' && window.innerWidth < MnTable.FILTER_COLLAPSE_WIDTH;
+    /**
+     * Classes for the `<table>` element. `table-fixed` is added for the `fixed`
+     * layout so column widths come from the header row and the declared widths
+     * only, keeping them stable as the rows change.
+     */
+    get tableClasses() {
+        return this.isFixedLayout ? `${this.baseTableClasses} table-fixed` : this.baseTableClasses;
     }
     /**
      * Recomputes whether the inline filter row should collapse into the panel.
@@ -6236,36 +6348,40 @@ class MnTable extends MnSelectableCollectionBase {
         return !!column.sortType && column.sortType !== ColumnSortType.NONE;
     }
     // ── Row interaction ──
-    /** Rows shown per page on mobile (< md). Forced regardless of any configured pageSize. */
-    static MOBILE_PAGE_SIZE = 10;
+    /** Whether column widths are content-independent (see {@link TableAppearance.layout}). */
+    get isFixedLayout() {
+        return this.dataSource.appearance?.layout === 'fixed';
+    }
     /** Page size to use at/above the `md` breakpoint (consumer's pageSize, or the user's selection). */
     desktopPageSize = 10;
-    /** True when the viewport is below the `md` (768px) breakpoint. */
-    isMobileViewport() {
-        return typeof window !== 'undefined' && window.innerWidth < 768;
+    /**
+     * The `title` tooltip for a cell, so text truncated by the fixed layout stays
+     * readable. Only string cells have text to expose; template cells render their
+     * own markup and are left alone.
+     * @param column The column being rendered.
+     * @param row The row being rendered.
+     * @returns The full cell text, or `null` when there is nothing to expose.
+     */
+    cellTitle(column, row) {
+        if (!this.isFixedLayout || typeof column.cell !== 'function')
+            return null;
+        return column.cell(row) || null;
     }
     /**
-     * Applies the breakpoint-appropriate page size: {@link MOBILE_PAGE_SIZE} below `md`,
-     * the desktop size at/above it. When the size actually changes, client-side tables
-     * re-slice locally and server-side tables ask the consumer to refetch, so the
-     * rendered rows update in every pagination mode (used at init and on window resize).
+     * Re-evaluate on a window resize too. The ResizeObserver covers every change to
+     * the table's own box, but {@link isMobileViewport} reads the window, which can
+     * change without the table's width following it (a fixed-width table, a modal
+     * pinned to a max width).
      */
-    applyResponsivePageSize(reflow) {
-        const target = this.isMobileViewport() ? MnTable.MOBILE_PAGE_SIZE : this.desktopPageSize;
-        if (target === this.pageSize)
-            return;
-        this.invalidatePageHeight();
-        this.pageSize = target;
-        this.currentPage = 1;
-        if (this.dataSource.paginationMode === 'client-side-pagination') {
-            this.applyPagination();
-        }
-        else if (this.isServerPaginated) {
-            // Server owns the slice — tell the consumer to refetch with the new size.
-            this.dataSource.onPageSizeChange?.(target);
-        }
-        if (reflow)
-            this.cdr.markForCheck();
+    onWindowResize() {
+        this.onHostResize();
+    }
+    /** Re-evaluate responsive page size and filter layout when the table is resized. */
+    onHostResize() {
+        this.applyResponsivePageSize(true);
+        this.updateFilterLayout(true);
+        // The popover is anchored to a viewport rect that a resize invalidates.
+        this.closeFilterPopover();
     }
     /**
      * Resolves table-specific translation keys (column headers/filters) plus the
@@ -6330,7 +6446,63 @@ class MnTable extends MnSelectableCollectionBase {
         return column.key;
     };
     // ── Table CSS classes ──
-    tableClasses = 'w-full border-collapse overflow-y-hidden';
+    /** True when the table is narrower than the filter-collapse breakpoint. */
+    isFilterViewport() {
+        return this.measuredWidth() < MnTable.FILTER_COLLAPSE_WIDTH;
+    }
+    /**
+     * True when the **window** is below the `md` (768px) breakpoint.
+     *
+     * Deliberately viewport-based, unlike {@link isFilterViewport}: the forced
+     * mobile page size exists to keep a phone screen scrollable, and it is paired
+     * with the rows-per-page selector that mn-collection-pagination hides at the
+     * same viewport breakpoint. Measuring the table's own width instead would let
+     * the two disagree — a 700px table on a desktop would be pinned to the mobile
+     * row count while still offering the selector that overrides it.
+     */
+    isMobileViewport() {
+        return typeof window !== 'undefined' && window.innerWidth < 768;
+    }
+    /**
+     * The table's own rendered width, which every responsive decision is made
+     * against — the same width the `@container` queries in the template use, so
+     * the TS and CSS halves of the responsive layout can never disagree.
+     *
+     * Falls back to the window width before the host has been laid out (and in
+     * SSR), which is the closest available approximation at that point.
+     * @returns The width in CSS pixels.
+     */
+    measuredWidth() {
+        const width = this.host.nativeElement.getBoundingClientRect().width;
+        if (width > 0)
+            return width;
+        return typeof window === 'undefined' ? Number.MAX_SAFE_INTEGER : window.innerWidth;
+    }
+    /**
+     * Applies the breakpoint-appropriate page size: capped at {@link MOBILE_PAGE_SIZE}
+     * below `md`, the desktop size at/above it. When the size actually changes, client-side tables
+     * re-slice locally and server-side tables ask the consumer to refetch, so the
+     * rendered rows update in every pagination mode (used at init and on window resize).
+     */
+    applyResponsivePageSize(reflow) {
+        const target = this.isMobileViewport()
+            ? Math.min(this.desktopPageSize, MnTable.MOBILE_PAGE_SIZE)
+            : this.desktopPageSize;
+        if (target === this.pageSize)
+            return;
+        this.invalidatePageHeight();
+        this.pageSize = target;
+        this.currentPage = 1;
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
+            this.applyPagination();
+        }
+        else if (this.isServerPaginated) {
+            // Server owns the slice — tell the consumer to refetch with the new size.
+            this.dataSource.onPageSizeChange?.(target);
+        }
+        if (reflow)
+            this.cdr.markForCheck();
+    }
     get totalColumnCount() {
         let count = this.dataSource.columns.length;
         if (this.hasSelection)
@@ -6405,11 +6577,11 @@ class MnTable extends MnSelectableCollectionBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "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 });
+    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()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }, { propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for.\n     The filter popover is deliberately left outside: `container-type` makes an\n     element the containing block for `position: fixed` descendants, which would\n     re-anchor the popover away from its trigger. -->\n<div class=\"@container\">\n<!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n     so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody (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.truncate]=\"isFixedLayout\"\n            class=\"text-sm px-2 py-1 @min-[768px]:px-4 @min-[768px]: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                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"isFixedLayout\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n                class=\"text-xs px-2 py-1 @min-[768px]:px-4 @min-[768px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- 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, 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" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnDatetime, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for.\n     The filter popover is deliberately left outside: `container-type` makes an\n     element the containing block for `position: fixed` descendants, which would\n     re-anchor the popover away from its trigger. -->\n<div class=\"@container\">\n<!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n     so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody (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.truncate]=\"isFixedLayout\"\n            class=\"text-sm px-2 py-1 @min-[768px]:px-4 @min-[768px]: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                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"isFixedLayout\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n                class=\"text-xs px-2 py-1 @min-[768px]:px-4 @min-[768px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- 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: [{
@@ -7274,6 +7446,13 @@ class MnWizardBodyComponent {
     modalRef;
     formBodies;
     stepWrappers;
+    /**
+     * The step body's scroll container. Every step renders into this one element
+     * (inactive steps are hidden, not destroyed), so its scroll offset is shared —
+     * without an explicit reset, arriving on a new step lands you wherever the
+     * previous step was scrolled to. See {@link setCurrentStep}.
+     */
+    stepScroller;
     currentStepId;
     /**
      * Title of the currently active step, mirrored into a signal so the modal
@@ -7614,6 +7793,12 @@ class MnWizardBodyComponent {
     setCurrentStep(stepId) {
         this.currentStepId = stepId;
         this.currentStepTitle.set(this.config.steps.find(s => s.id === stepId)?.title);
+        // A new step always starts at its top — the shared scroller would otherwise
+        // keep the previous step's offset. Instant, not smooth: a scroll animation
+        // during a step swap reads as a glitch. Absent before the view is created.
+        if (this.stepScroller) {
+            this.stepScroller.nativeElement.scrollTop = 0;
+        }
     }
     async complete() {
         if (this.isCompleting)
@@ -7722,11 +7907,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }, { propertyName: "stepWrappers", predicate: ["stepWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard -->\n  <div class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "stepScroller", first: true, predicate: ["stepScroller"], descendants: true }, { propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }, { propertyName: "stepWrappers", predicate: ["stepWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent, LucideDynamicIcon], template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard -->\n  <div class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent, LucideDynamicIcon], template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -7737,6 +7922,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], stepWrappers: [{
                 type: ViewChildren,
                 args: ['stepWrapper']
+            }], stepScroller: [{
+                type: ViewChild,
+                args: ['stepScroller']
             }] } });
 
 class MnConfirmationBodyComponent {
@@ -8290,7 +8478,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -8303,7 +8491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnFooterActionsComponent,
                         MnButton,
                         LucideX,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{