mn-angular-lib 0.0.82 → 0.0.84

package/fesm2022/mn-angular-lib.mjs

@@ -3656,11 +3656,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 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 });
+    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=\"checkbox checkbox-sm checkbox-primary\"\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            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  <input\n                    type=\"checkbox\"\n                    class=\"checkbox checkbox-sm checkbox-primary\"\n                    [checked]=\"isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row)\"\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 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" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, 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=\"checkbox checkbox-sm checkbox-primary\"\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            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  <input\n                    type=\"checkbox\"\n                    class=\"checkbox checkbox-sm checkbox-primary\"\n                    [checked]=\"isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row)\"\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: [{