mn-angular-lib 0.0.76 → 0.0.78

package/fesm2022/mn-angular-lib.mjs

@@ -2007,7 +2007,21 @@ class MnDatetime {
     }
     // ========== ControlValueAccessor Implementation ==========
     writeValue(val) {
-        this.value = val != null ? String(val) : null;
+        if (val != null) {
+            let str = String(val);
+            // Convert ISO 8601 strings (e.g. "2025-01-01T10:00:00.000Z") to datetime-local format
+            if (str.includes('T') && (str.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(str))) {
+                const date = new Date(str);
+                if (!isNaN(date.getTime())) {
+                    const pad = (n) => n.toString().padStart(2, '0');
+                    str = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+                }
+            }
+            this.value = str;
+        }
+        else {
+            this.value = null;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3330,10 +3344,13 @@ class MnTable {
     selectionChange = new EventEmitter();
     rowClick = new EventEmitter();
     filteredItems = [];
+    paginatedItems = [];
     searchValue = '';
     loadingMoreRows = false;
     currentSort = null;
     selectedIds = new Set();
+    currentPage = 1;
+    pageSize = 10;
     /** Per-column filter values keyed by column key. */
     columnFilters = {};
     cdr = inject(ChangeDetectorRef);
@@ -3355,6 +3372,7 @@ class MnTable {
     }
     ngOnInit() {
         this.currentSort = this.dataSource.defaultSort ?? null;
+        this.pageSize = this.dataSource.pageSize ?? 10;
         // Initialize all filterable columns with empty string to avoid undefined values.
         for (const col of this.dataSource.columns) {
             if (col.filterable) {
@@ -3382,6 +3400,7 @@ class MnTable {
     }
     // ── Search ──
     onSearch(searchString) {
+        this.currentPage = 1;
         this.searchSubject.next(searchString);
     }
     // ── Column Filters ──
@@ -3392,6 +3411,7 @@ class MnTable {
     /** Updates a column filter value and re-applies filtering. */
     onColumnFilter(columnKey, value) {
         this.columnFilters[columnKey] = value;
+        this.currentPage = 1;
         this.applyFilterAndSort(false);
         this.cdr.markForCheck();
     }
@@ -3480,6 +3500,51 @@ class MnTable {
         const hasMore = strategy ? strategy.hasMoreRows : !!this.dataSource.loadAdditionalRows;
         return mode === 'load-more' && hasMore;
     }
+    // ── Paginated Mode ──
+    get isPaginated() {
+        return this.dataSource.paginationMode === 'paginated';
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.filteredItems.length / this.pageSize));
+    }
+    get resolvedPageSizeOptions() {
+        return this.dataSource.pageSizeOptions ?? [5, 10, 25, 50];
+    }
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages)
+            return;
+        this.currentPage = page;
+        this.applyPagination();
+        this.cdr.markForCheck();
+    }
+    onPageSizeChange(newSize) {
+        this.pageSize = newSize;
+        this.currentPage = 1;
+        this.applyPagination();
+        this.cdr.markForCheck();
+    }
+    get visiblePages() {
+        const total = this.totalPages;
+        const current = this.currentPage;
+        const delta = 2;
+        const pages = [];
+        for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    applyPagination() {
+        if (this.isPaginated) {
+            if (this.currentPage > this.totalPages) {
+                this.currentPage = this.totalPages;
+            }
+            const start = (this.currentPage - 1) * this.pageSize;
+            this.paginatedItems = this.filteredItems.slice(start, start + this.pageSize);
+        }
+        else {
+            this.paginatedItems = this.filteredItems;
+        }
+    }
     // ── Template helpers ──
     isTemplateRef(value) {
         return value instanceof TemplateRef;
@@ -3535,6 +3600,7 @@ class MnTable {
         }
         items = this.applySorting(items);
         this.filteredItems = items;
+        this.applyPagination();
         if (searchForItems) {
             this.loadMoreRows();
         }
@@ -3584,11 +3650,11 @@ class MnTable {
         this.selectionChange.emit(rows);
     }
     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", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\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              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\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            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\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 -->\n      @if (hasColumnFilters) {\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-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\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                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"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 class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 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                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\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              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\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            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\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 -->\n      @if (hasColumnFilters) {\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-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\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                  <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\"\n            [class.bg-brand-50]=\"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 class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 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                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && totalPages > 1) {\n  <div class=\"flex items-center justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"flex items-center gap-2\">\n      <span>Rows per page:</span>\n      <select\n        class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs focus:outline-none focus:border-brand-500\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n        aria-label=\"Rows per page\"\n      >\n        @for (opt of resolvedPageSizeOptions; track opt) {\n          <option [value]=\"opt\" [selected]=\"opt === pageSize\">{{ opt }}</option>\n        }\n      </select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2\">{{ (currentPage - 1) * pageSize + 1 }}\u2013{{ currentPage * pageSize > filteredItems.length ? filteredItems.length : currentPage * pageSize }} of {{ filteredItems.length }}</span>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(currentPage - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          class=\"px-2.5 py-1 rounded border transition-colors text-xs\"\n          [class.border-brand-500]=\"page === currentPage\"\n          [class.bg-brand-500]=\"page === currentPage\"\n          [class.text-white]=\"page === currentPage\"\n          [class.border-base-300]=\"page !== currentPage\"\n          [class.hover:bg-base-200]=\"page !== currentPage\"\n          (click)=\"goToPage(page)\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n        >{{ page }}</button>\n      }\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(totalPages)\"\n        aria-label=\"Last page\"\n      >\u00BB</button>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\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              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\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            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\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 -->\n      @if (hasColumnFilters) {\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-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\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                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"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 class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 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                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\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              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\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            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\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 -->\n      @if (hasColumnFilters) {\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-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\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                  <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\"\n            [class.bg-brand-50]=\"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 class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 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                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && totalPages > 1) {\n  <div class=\"flex items-center justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"flex items-center gap-2\">\n      <span>Rows per page:</span>\n      <select\n        class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs focus:outline-none focus:border-brand-500\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n        aria-label=\"Rows per page\"\n      >\n        @for (opt of resolvedPageSizeOptions; track opt) {\n          <option [value]=\"opt\" [selected]=\"opt === pageSize\">{{ opt }}</option>\n        }\n      </select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2\">{{ (currentPage - 1) * pageSize + 1 }}\u2013{{ currentPage * pageSize > filteredItems.length ? filteredItems.length : currentPage * pageSize }} of {{ filteredItems.length }}</span>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(currentPage - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          class=\"px-2.5 py-1 rounded border transition-colors text-xs\"\n          [class.border-brand-500]=\"page === currentPage\"\n          [class.bg-brand-500]=\"page === currentPage\"\n          [class.text-white]=\"page === currentPage\"\n          [class.border-base-300]=\"page !== currentPage\"\n          [class.hover:bg-base-200]=\"page !== currentPage\"\n          (click)=\"goToPage(page)\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n        >{{ page }}</button>\n      }\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(totalPages)\"\n        aria-label=\"Last page\"\n      >\u00BB</button>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], sortChange: [{
@@ -4402,6 +4468,12 @@ class MnWizardBodyComponent {
             return;
         if (step.id === this.currentStepId)
             return;
+        // Validate current step's form before allowing direct step navigation
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form.invalid) {
+            formBody.form.markAllAsTouched();
+            return;
+        }
         const previousStepId = this.currentStepId;
         this.currentStepId = step.id;
         if (!this.visitedStepIds.includes(this.currentStepId)) {
@@ -4563,6 +4635,36 @@ class MnWizardBodyComponent {
         });
         return aggregated;
     }
+    /**
+     * Maps a footer action's ActionStyle to mnButton data props.
+     * @param action The footer action configuration.
+     */
+    getFooterActionButtonData(action) {
+        switch (action.style) {
+            case ActionStyle.DANGER:
+                return { variant: 'outline', color: 'error' };
+            case ActionStyle.PRIMARY:
+                return { variant: 'fill', color: 'primary' };
+            case ActionStyle.SECONDARY:
+                return { variant: 'outline', color: 'secondary' };
+            case ActionStyle.GHOST:
+                return { variant: 'ghost', color: 'secondary' };
+            default:
+                return { variant: 'outline', color: 'secondary' };
+        }
+    }
+    /**
+     * Handles a custom footer action click.
+     * @param action The footer action configuration.
+     */
+    async handleFooterAction(action) {
+        if (action.handler) {
+            await action.handler(this.modalRef);
+        }
+        if (action.closesModal) {
+            this.modalRef.close((action.closeReason || ModalCloseReason.PROGRAMMATIC));
+        }
+    }
     async notifyStepChange(previousStepId, direction) {
         if (this.config.onStepChange) {
             await this.config.onStepChange.handle({
@@ -4573,11 +4675,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], 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 }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [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]=\"asAny(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          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 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  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <div class=\"flex-1\"></div>\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      </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        {{ 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: "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: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [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]=\"asAny(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          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 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  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions on the right -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\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      </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        {{ 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: "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], template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [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]=\"asAny(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          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 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  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <div class=\"flex-1\"></div>\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      </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        {{ 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], template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [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]=\"asAny(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          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 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  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions on the right -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\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      </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        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -5311,11 +5413,11 @@ class CalendarMonthComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "app-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track event.id) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "app-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track event.id) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"] }]
+            args: [{ selector: 'app-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -6057,11 +6159,11 @@ class UpcomingEventsComponent {
         return event.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "app-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track event.id) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">No upcoming events</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "app-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "app-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">No upcoming events</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "app-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track event.id) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">No upcoming events</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"] }]
+            args: [{ selector: 'app-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">No upcoming events</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
                 type: Input
             }], config: [{