mn-angular-lib 1.0.2 → 1.0.5

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, HostBinding, Input, Component, inject, ChangeDetectionStrategy, signal, ElementRef, DestroyRef, Self, APP_INITIALIZER, SkipSelf, Attribute, Directive, Pipe, HostListener, ViewChild, forwardRef, Renderer2, EventEmitter, ChangeDetectorRef, TemplateRef, Output, ViewContainerRef, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, HostBinding, Input, Component, inject, ChangeDetectionStrategy, signal, APP_INITIALIZER, DestroyRef, SkipSelf, Attribute, Directive, Pipe, ElementRef, Self, HostListener, ViewChild, forwardRef, Renderer2, EventEmitter, ChangeDetectorRef, TemplateRef, Output, ViewContainerRef, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -220,7 +220,7 @@ const mnAlertVariants = tv({
 });
 
 const mnButtonVariants = tv({
-    base: 'hover:cursor-pointer transition-colors duration-300 ease-in-out',
+    base: 'hover:cursor-pointer transition-all duration-300 ease-in-out',
     variants: {
         size: {
             sm: 'px-2 py-1 text-sm',
@@ -231,6 +231,7 @@ const mnButtonVariants = tv({
             fill: '',
             outline: 'bg-transparent border',
             text: 'bg-transparent',
+            textUnderline: 'bg-transparent underline underline-offset-2',
         },
         // Intentionally empty; resolved via compoundVariants
         color: {
@@ -258,19 +259,19 @@ const mnButtonVariants = tv({
     },
     compoundVariants: [
         // Fill
-        { variant: 'fill', color: 'primary', class: 'bg-primary text-primary-content hover:bg-primary/80' },
-        { variant: 'fill', color: 'secondary', class: 'bg-neutral text-neutral-content hover:bg-neutral/80' },
-        { variant: 'fill', color: 'danger', class: 'bg-error text-error-content hover:bg-error/80' },
-        { variant: 'fill', color: 'warning', class: 'bg-warning text-warning-content hover:bg-warning/80' },
-        { variant: 'fill', color: 'success', class: 'bg-success text-success-content hover:bg-success/80' },
-        { variant: 'fill', color: 'accent', class: 'bg-accent text-accent-content hover:bg-accent/80' },
+        { variant: 'fill', color: 'primary', class: 'bg-primary text-primary-content hover:brightness-60' },
+        { variant: 'fill', color: 'secondary', class: 'bg-neutral text-neutral-content hover:brightness-60' },
+        { variant: 'fill', color: 'danger', class: 'bg-error text-error-content hover:brightness-60' },
+        { variant: 'fill', color: 'warning', class: 'bg-warning text-warning-content hover:brightness-60' },
+        { variant: 'fill', color: 'success', class: 'bg-success text-success-content hover:brightness-60' },
+        { variant: 'fill', color: 'accent', class: 'bg-accent text-accent-content hover:brightness-60' },
         // Outline
-        { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary/10' },
-        { variant: 'outline', color: 'secondary', class: 'border-neutral text-neutral hover:bg-neutral/10' },
-        { variant: 'outline', color: 'danger', class: 'border-error text-error hover:bg-error/10' },
-        { variant: 'outline', color: 'warning', class: 'border-warning text-warning hover:bg-warning/10' },
-        { variant: 'outline', color: 'success', class: 'border-success text-success hover:bg-success/10' },
-        { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent/10' },
+        { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary/40' },
+        { variant: 'outline', color: 'secondary', class: 'border-neutral text-neutral hover:bg-neutral/40' },
+        { variant: 'outline', color: 'danger', class: 'border-error text-error hover:bg-error/40' },
+        { variant: 'outline', color: 'warning', class: 'border-warning text-warning hover:bg-warning/40' },
+        { variant: 'outline', color: 'success', class: 'border-success text-success hover:bg-success/40' },
+        { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent/40' },
         // Text
         { variant: 'text', color: 'primary', class: 'text-primary hover:bg-primary/10' },
         { variant: 'text', color: 'secondary', class: 'text-neutral hover:bg-neutral/10' },
@@ -278,6 +279,13 @@ const mnButtonVariants = tv({
         { variant: 'text', color: 'warning', class: 'text-warning hover:bg-warning/10' },
         { variant: 'text', color: 'success', class: 'text-success hover:bg-success/10' },
         { variant: 'text', color: 'accent', class: 'text-accent hover:bg-accent/10' },
+        // Text Underline
+        { variant: 'textUnderline', color: 'primary', class: 'text-primary underline underline-offset-2 hover:bg-primary/10' },
+        { variant: 'textUnderline', color: 'secondary', class: 'text-neutral underline underline-offset-2 hover:bg-neutral/10' },
+        { variant: 'textUnderline', color: 'danger', class: 'text-error underline underline-offset-2 hover:bg-error/10' },
+        { variant: 'textUnderline', color: 'warning', class: 'text-warning underline underline-offset-2 hover:bg-warning/10' },
+        { variant: 'textUnderline', color: 'success', class: 'text-success underline underline-offset-2 hover:bg-success/10' },
+        { variant: 'textUnderline', color: 'accent', class: 'text-accent underline underline-offset-2 hover:bg-accent/10' },
     ],
     defaultVariants: {
         size: 'md',
@@ -554,7 +562,7 @@ function pickAdapter(type) {
 }
 
 const mnInputFieldVariants = tv({
-    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm outline-none focus:ring-1 focus:ring-primary',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -606,6 +614,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/**
+ * Types for mn-lib configuration.
+ */
+
 class MnLanguageService {
     http;
     _translations = {};
@@ -954,6 +966,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
+/**
+ * Provides an APP_INITIALIZER that loads the mn-lib configuration from the given URL
+ * during application bootstrap. The consuming application is responsible for providing
+ * HttpClient (e.g., via HttpClientModule or provideHttpClient()).
+ */
+function provideMnConfig(url, debugMode = false) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (svc) => () => svc.load(url, debugMode),
+            deps: [MnConfigService],
+        },
+    ];
+}
+
 /**
  * Represents the current section path based on nested mn-section directives.
  */
@@ -969,6 +997,185 @@ const MN_INSTANCE_ID = new InjectionToken('MN_INSTANCE_ID', {
     factory: () => null,
 });
 
+/**
+ * Helper to provide a resolved, typed component config via DI.
+ *
+ * Usage in a component/module providers:
+ *   const MY_CFG = new InjectionToken<MyCfg>('MY_CFG');
+ *   providers: [ provideMnComponentConfig(MY_CFG, 'my-component') ]
+ * Then in the component:
+ *   readonly cfg = inject(MY_CFG)
+ *
+ * The returned config object is **reactive**: when the active locale changes,
+ * all translatable values are re-resolved in place so that templates using
+ * `cfg.someLabel` automatically reflect the new language on the next change-detection cycle.
+ */
+function provideMnComponentConfig(token, componentName, initial) {
+    return {
+        provide: token,
+        deps: [
+            MnConfigService,
+            MnLanguageService,
+            DestroyRef,
+            [new Optional(), MN_SECTION_PATH],
+            [new Optional(), MN_INSTANCE_ID],
+        ],
+        useFactory: (svc, lang, destroyRef, sectionPath, instanceId) => {
+            const resolveConfig = () => {
+                const resolved = svc.resolve(componentName, sectionPath ?? [], instanceId ?? undefined);
+                return Object.assign({}, initial ?? {}, resolved);
+            };
+            // Create the initial config object that will be shared by reference.
+            const cfg = resolveConfig();
+            // Re-resolve translatable values whenever the locale changes.
+            // skip(1) because the current locale was already used for the initial resolve.
+            const sub = lang.locale$.subscribe(() => {
+                const updated = resolveConfig();
+                // Mutate the existing object in place so all template bindings pick up the new values.
+                for (const key of Object.keys(updated)) {
+                    cfg[key] = updated[key];
+                }
+            });
+            destroyRef.onDestroy(() => sub.unsubscribe());
+            return cfg;
+        },
+    };
+}
+
+class MnSectionDirective {
+    /** Section name contributed by this DOM node to the section path */
+    mnSection;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnSectionDirective, isStandalone: true, selector: "[mn-section]", inputs: { mnSection: ["mn-section", "mnSection"] }, providers: [
+            {
+                provide: MN_SECTION_PATH,
+                // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                // and read the attribute value using Attribute so it's available at provider creation time.
+                deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                useFactory: (parentPath, attr) => {
+                    const parent = Array.isArray(parentPath) ? parentPath : [];
+                    const name = (attr ?? '').trim();
+                    return name ? [...parent, name] : [...parent];
+                },
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-section]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_SECTION_PATH,
+                            // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                            // and read the attribute value using Attribute so it's available at provider creation time.
+                            deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                            useFactory: (parentPath, attr) => {
+                                const parent = Array.isArray(parentPath) ? parentPath : [];
+                                const name = (attr ?? '').trim();
+                                return name ? [...parent, name] : [...parent];
+                            },
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnSection: [{
+                type: Input,
+                args: ['mn-section']
+            }] } });
+
+class MnInstanceDirective {
+    /** Instance id for targeting per-component instance overrides */
+    mnInstance;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnInstanceDirective, isStandalone: true, selector: "[mn-instance]", inputs: { mnInstance: ["mn-instance", "mnInstance"] }, providers: [
+            {
+                provide: MN_INSTANCE_ID,
+                // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                deps: [new Attribute('mn-instance')],
+                useFactory: (attr) => (attr ?? '').trim() || null,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-instance]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_INSTANCE_ID,
+                            // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                            deps: [new Attribute('mn-instance')],
+                            useFactory: (attr) => (attr ?? '').trim() || null,
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnInstance: [{
+                type: Input,
+                args: ['mn-instance']
+            }] } });
+
+/**
+ * Provides an APP_INITIALIZER that configures the MnLanguageService and
+ * preloads the requested locales during application bootstrap.
+ *
+ * Usage in app.config.ts:
+ *   ...provideMnLanguage({
+ *     urlPattern: 'assets/i18n/{locale}.json',
+ *     defaultLocale: 'en',
+ *     preload: ['en', 'nl'],
+ *   })
+ */
+function provideMnLanguage(config) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (svc) => async () => {
+                if (config.debug) {
+                    svc.setDebug(true);
+                }
+                svc.configure(config.urlPattern);
+                const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
+                const localesToLoad = config.preload ?? [effectiveLocale];
+                await Promise.all(localesToLoad.map(l => svc.loadLocale(l)));
+                await svc.setLocale(effectiveLocale);
+            },
+            deps: [MnLanguageService],
+        },
+    ];
+}
+
+/**
+ * Pipe that translates a key via MnLanguageService.
+ *
+ * Usage in templates:
+ *   {{ 'form.email.label' | mnTranslate }}
+ *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
+ *
+ * Note: This pipe is impure so it re-evaluates when the locale changes.
+ */
+class MnTranslatePipe {
+    lang;
+    constructor(lang) {
+        this.lang = lang;
+    }
+    transform(key, params) {
+        return this.lang.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [{ token: MnLanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnTranslate',
+                    standalone: true,
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: MnLanguageService }] });
+
 const MN_INPUT_FIELD_CONFIG = new InjectionToken('MN_INPUT_FIELD_CONFIG');
 /**
  * MnInputField Component
@@ -1067,10 +1274,8 @@ class MnInputField {
         const instanceId = this.explicitInstanceId || `mn-input-${this.props.id}`;
         this.uiConfig = this.configService.resolve('mn-input-field', this.sectionPath, instanceId);
         // Allow props to override uiConfig for label and placeholder
-        if (this.props.label) {
+        if (this.props) {
             this.uiConfig = { ...this.uiConfig, label: this.props.label };
-        }
-        if (this.props.placeholder) {
             this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
         }
     }
@@ -1306,71 +1511,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
-/**
- * Types for mn-lib configuration.
- */
-
-/**
- * Provides an APP_INITIALIZER that loads the mn-lib configuration from the given URL
- * during application bootstrap. The consuming application is responsible for providing
- * HttpClient (e.g., via HttpClientModule or provideHttpClient()).
- */
-function provideMnConfig(url, debugMode = false) {
-    return [
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (svc) => () => svc.load(url, debugMode),
-            deps: [MnConfigService],
-        },
-    ];
-}
-
-/**
- * Helper to provide a resolved, typed component config via DI.
- *
- * Usage in a component/module providers:
- *   const MY_CFG = new InjectionToken<MyCfg>('MY_CFG');
- *   providers: [ provideMnComponentConfig(MY_CFG, 'my-component') ]
- * Then in the component:
- *   readonly cfg = inject(MY_CFG)
- *
- * The returned config object is **reactive**: when the active locale changes,
- * all translatable values are re-resolved in place so that templates using
- * `cfg.someLabel` automatically reflect the new language on the next change-detection cycle.
- */
-function provideMnComponentConfig(token, componentName, initial) {
-    return {
-        provide: token,
-        deps: [
-            MnConfigService,
-            MnLanguageService,
-            DestroyRef,
-            [new Optional(), MN_SECTION_PATH],
-            [new Optional(), MN_INSTANCE_ID],
-        ],
-        useFactory: (svc, lang, destroyRef, sectionPath, instanceId) => {
-            const resolveConfig = () => {
-                const resolved = svc.resolve(componentName, sectionPath ?? [], instanceId ?? undefined);
-                return Object.assign({}, initial ?? {}, resolved);
-            };
-            // Create the initial config object that will be shared by reference.
-            const cfg = resolveConfig();
-            // Re-resolve translatable values whenever the locale changes.
-            // skip(1) because the current locale was already used for the initial resolve.
-            const sub = lang.locale$.subscribe(() => {
-                const updated = resolveConfig();
-                // Mutate the existing object in place so all template bindings pick up the new values.
-                for (const key of Object.keys(updated)) {
-                    cfg[key] = updated[key];
-                }
-            });
-            destroyRef.onDestroy(() => sub.unsubscribe());
-            return cfg;
-        },
-    };
-}
-
 const MN_LIB_DUAL_HORIZONTAL_IMAGE = new InjectionToken('MN_LIB_DUAL_HORIZONTAL_IMAGE');
 class MnDualHorizontalImage {
     componentConfig = inject(MN_LIB_DUAL_HORIZONTAL_IMAGE);
@@ -1924,163 +2064,29 @@ const mnDatetimeVariants = tv({
             lg: 'p-4',
         },
         borderRadius: {
-            none: 'rounded-none',
-            xs: 'rounded-xs',
-            sm: 'rounded-sm',
-            md: 'rounded-md',
-            lg: 'rounded-lg',
-            xl: 'rounded-xl',
-            two_xl: 'rounded-2xl',
-            three_xl: 'rounded-3xl',
-            four_xl: 'rounded-4xl',
-        },
-        fullWidth: {
-            true: 'w-full',
-        },
-        hover: {
-            true: 'hover:cursor-pointer hover:bg-base-200 transition-colors duration-300 ease-in-out',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        borderRadius: 'md',
-        hover: true,
-    },
-});
-
-class MnSectionDirective {
-    /** Section name contributed by this DOM node to the section path */
-    mnSection;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnSectionDirective, isStandalone: true, selector: "[mn-section]", inputs: { mnSection: ["mn-section", "mnSection"] }, providers: [
-            {
-                provide: MN_SECTION_PATH,
-                // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
-                // and read the attribute value using Attribute so it's available at provider creation time.
-                deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
-                useFactory: (parentPath, attr) => {
-                    const parent = Array.isArray(parentPath) ? parentPath : [];
-                    const name = (attr ?? '').trim();
-                    return name ? [...parent, name] : [...parent];
-                },
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mn-section]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: MN_SECTION_PATH,
-                            // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
-                            // and read the attribute value using Attribute so it's available at provider creation time.
-                            deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
-                            useFactory: (parentPath, attr) => {
-                                const parent = Array.isArray(parentPath) ? parentPath : [];
-                                const name = (attr ?? '').trim();
-                                return name ? [...parent, name] : [...parent];
-                            },
-                        },
-                    ],
-                }]
-        }], propDecorators: { mnSection: [{
-                type: Input,
-                args: ['mn-section']
-            }] } });
-
-class MnInstanceDirective {
-    /** Instance id for targeting per-component instance overrides */
-    mnInstance;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnInstanceDirective, isStandalone: true, selector: "[mn-instance]", inputs: { mnInstance: ["mn-instance", "mnInstance"] }, providers: [
-            {
-                provide: MN_INSTANCE_ID,
-                // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
-                deps: [new Attribute('mn-instance')],
-                useFactory: (attr) => (attr ?? '').trim() || null,
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mn-instance]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: MN_INSTANCE_ID,
-                            // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
-                            deps: [new Attribute('mn-instance')],
-                            useFactory: (attr) => (attr ?? '').trim() || null,
-                        },
-                    ],
-                }]
-        }], propDecorators: { mnInstance: [{
-                type: Input,
-                args: ['mn-instance']
-            }] } });
-
-/**
- * Provides an APP_INITIALIZER that configures the MnLanguageService and
- * preloads the requested locales during application bootstrap.
- *
- * Usage in app.config.ts:
- *   ...provideMnLanguage({
- *     urlPattern: 'assets/i18n/{locale}.json',
- *     defaultLocale: 'en',
- *     preload: ['en', 'nl'],
- *   })
- */
-function provideMnLanguage(config) {
-    return [
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (svc) => async () => {
-                if (config.debug) {
-                    svc.setDebug(true);
-                }
-                svc.configure(config.urlPattern);
-                const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
-                const localesToLoad = config.preload ?? [effectiveLocale];
-                await Promise.all(localesToLoad.map(l => svc.loadLocale(l)));
-                await svc.setLocale(effectiveLocale);
-            },
-            deps: [MnLanguageService],
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
         },
-    ];
-}
-
-/**
- * Pipe that translates a key via MnLanguageService.
- *
- * Usage in templates:
- *   {{ 'form.email.label' | mnTranslate }}
- *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
- *
- * Note: This pipe is impure so it re-evaluates when the locale changes.
- */
-class MnTranslatePipe {
-    lang;
-    constructor(lang) {
-        this.lang = lang;
-    }
-    transform(key, params) {
-        return this.lang.translate(key, params);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [{ token: MnLanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mnTranslate',
-                    standalone: true,
-                    pure: false,
-                }]
-        }], ctorParameters: () => [{ type: MnLanguageService }] });
+        fullWidth: {
+            true: 'w-full',
+        },
+        hover: {
+            true: 'hover:cursor-pointer hover:bg-base-200 transition-colors duration-300 ease-in-out',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+        hover: true,
+    },
+});
 
 const MN_DATETIME_CONFIG = new InjectionToken('MN_DATETIME_CONFIG');
 class MnDatetime {
@@ -3576,45 +3582,25 @@ class MnTable {
             this.cdr.markForCheck();
         }
     }
-    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) {
-                this.columnFilters[col.key] = '';
-            }
-        }
-        // Pre-select rows from initialSelectedIds if provided
-        if (this.dataSource.initialSelectedIds?.length) {
-            for (const id of this.dataSource.initialSelectedIds) {
-                this.selectedIds.add(id);
-            }
-            this.emitSelection();
+    get showLoadMore() {
+        const mode = this.dataSource.paginationMode ?? 'load-more';
+        // Server-side load-more: check if there are more items to load.
+        if (this.dataSource.onLoadMore) {
+            const totalItems = this.dataSource.totalItems ?? 0;
+            return mode === 'load-more' && this.filteredItems.length < totalItems;
         }
-        this.applyFilterAndSort(false);
-        // Skip the initial BehaviorSubject emission (already handled above)
-        // to avoid triggering markForCheck during the first change detection cycle.
-        this.dataSubscription = this.dataSource.dataRows.pipe(skip(1)).subscribe(() => {
-            this.applyFilterAndSort(false);
-            this.cdr.markForCheck();
-        });
-        this.searchSubscription = this.searchSubject
-            .pipe(debounceTime(300))
-            .subscribe(value => {
-            this.searchValue = value;
-            this.applyFilterAndSort(true);
-            this.cdr.markForCheck();
-        });
+        const strategy = this.dataSource.paginationStrategy;
+        const hasMore = strategy ? strategy.hasMoreRows : !!this.dataSource.loadAdditionalRows;
+        return mode === 'load-more' && hasMore;
     }
     ngOnDestroy() {
         this.dataSubscription?.unsubscribe();
         this.searchSubscription?.unsubscribe();
     }
     // ── Search ──
-    onSearch(searchString) {
-        this.currentPage = 1;
-        this.searchSubject.next(searchString);
+    get isPaginated() {
+        const mode = this.dataSource.paginationMode;
+        return mode === 'paginated' || mode === 'client-side-pagination';
     }
     // ── Column Filters ──
     /** Whether any column has filtering enabled. */
@@ -3696,7 +3682,75 @@ class MnTable {
         this.rowClick.emit(row);
     }
     // ── Pagination ──
+    /** Whether the table delegates pagination to the consumer (server-side). */
+    get isServerPaginated() {
+        const mode = this.dataSource.paginationMode ?? 'load-more';
+        return mode === 'paginated' || mode === 'load-more';
+    }
+    /** Whether the table delegates search to the consumer (server-side). */
+    get isServerSearched() {
+        return !!this.dataSource.onServerSearch;
+    }
+    // ── Paginated Mode ──
+    /** Total number of items, accounting for server-side pagination. */
+    get totalItemCount() {
+        if (this.isServerPaginated && this.dataSource.totalItems != null) {
+            return this.dataSource.totalItems;
+        }
+        return this.filteredItems.length;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItemCount / this.pageSize));
+    }
+    ngOnInit() {
+        this.validateDataSource();
+        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) {
+                this.columnFilters[col.key] = '';
+            }
+        }
+        // Pre-select rows from initialSelectedIds if provided
+        if (this.dataSource.initialSelectedIds?.length) {
+            for (const id of this.dataSource.initialSelectedIds) {
+                this.selectedIds.add(id);
+            }
+            this.emitSelection();
+        }
+        this.applyFilterAndSort(false);
+        // Skip the initial BehaviorSubject emission (already handled above)
+        // to avoid triggering markForCheck during the first change detection cycle.
+        this.dataSubscription = this.dataSource.dataRows.pipe(skip(1)).subscribe(() => {
+            this.applyFilterAndSort(false);
+            this.cdr.markForCheck();
+        });
+        this.searchSubscription = this.searchSubject
+            .pipe(debounceTime(300))
+            .subscribe(value => {
+            this.searchValue = value;
+            this.applyFilterAndSort(true);
+            this.cdr.markForCheck();
+        });
+    }
+    onSearch(searchString) {
+        this.currentPage = 1;
+        if (this.isServerSearched) {
+            this.searchValue = searchString;
+            this.dataSource.onServerSearch(searchString);
+            this.cdr.markForCheck();
+        }
+        else {
+            this.searchSubject.next(searchString);
+        }
+    }
     loadMoreRows() {
+        // Server-side infinite scroll: delegate to consumer callback.
+        if (this.dataSource.onLoadMore) {
+            this.dataSource.onLoadMore();
+            return;
+        }
         if (!this.dataSource.loadAdditionalRows || this.loadingMoreRows)
             return;
         this.loadingMoreRows = true;
@@ -3707,19 +3761,6 @@ class MnTable {
             .then(rows => this.processLoadedRows(rows))
             .catch(() => this.loadingMoreRows = false);
     }
-    get showLoadMore() {
-        const mode = this.dataSource.paginationMode ?? 'load-more';
-        const strategy = this.dataSource.paginationStrategy;
-        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];
     }
@@ -3727,15 +3768,24 @@ class MnTable {
         if (page < 1 || page > this.totalPages)
             return;
         this.currentPage = page;
-        this.applyPagination();
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
+            this.applyPagination();
+        }
+        else {
+            this.dataSource.onPageChange?.(page);
+        }
         this.cdr.markForCheck();
     }
     onPageSizeChange(newSize) {
         this.pageSize = newSize;
         this.currentPage = 1;
-        this.applyPagination();
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
+            this.applyPagination();
+        }
+        else {
+            this.dataSource.onPageSizeChange?.(newSize);
+        }
         this.cdr.markForCheck();
-        this.dataSource.onPageSizeChange?.(newSize);
     }
     get visiblePages() {
         const total = this.totalPages;
@@ -3754,14 +3804,12 @@ class MnTable {
         return pages;
     }
     applyPagination() {
-        if (this.isPaginated) {
-            if (this.currentPage > this.totalPages) {
-                this.currentPage = this.totalPages;
-            }
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
             const start = (this.currentPage - 1) * this.pageSize;
             this.paginatedItems = this.filteredItems.slice(start, start + this.pageSize);
         }
         else {
+            // Server always provides the correct page/slice — no client-side slicing.
             this.paginatedItems = this.filteredItems;
         }
     }
@@ -3797,8 +3845,8 @@ class MnTable {
     // ── Private ──
     applyFilterAndSort(searchForItems) {
         let items = this.dataSource.dataRows.value;
-        // Global search filter
-        if (this.dataSource.isInSearch && this.dataSource.canSearch && this.searchValue.length > 0) {
+        // Skip client-side search filtering when server handles it.
+        if (!this.isServerSearched && this.dataSource.isInSearch && this.dataSource.canSearch && this.searchValue.length > 0) {
             const term = this.searchValue.toLowerCase();
             items = items.filter(row => this.dataSource.isInSearch(row, term));
         }
@@ -3864,17 +3912,33 @@ class MnTable {
         this.loadingMoreRows = false;
         this.applyFilterAndSort(false);
     }
+    validateDataSource() {
+        const mode = this.dataSource.paginationMode;
+        if (mode === 'paginated') {
+            if (!this.dataSource.onPageChange) {
+                throw new Error(`[MnTable] paginationMode is 'paginated' but 'onPageChange' callback is missing. Server-side pagination requires 'onPageChange'.`);
+            }
+            if (this.dataSource.totalItems == null) {
+                throw new Error(`[MnTable] paginationMode is 'paginated' but 'totalItems' is missing. Server-side pagination requires 'totalItems'.`);
+            }
+        }
+        if (mode === 'load-more' || mode === 'infinite-scroll') {
+            if (!this.dataSource.onLoadMore && !this.dataSource.loadAdditionalRows && !this.dataSource.paginationStrategy) {
+                throw new Error(`[MnTable] paginationMode is '${mode}' but no load-more mechanism is provided. Provide 'onLoadMore', 'loadAdditionalRows', or 'paginationStrategy'.`);
+            }
+        }
+    }
     emitSelection() {
         const rows = this.dataSource.dataRows.value.filter(r => this.selectedIds.has(this.dataSource.getID(r)));
         this.dataSource.selectedRows?.next(rows);
         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-100 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-primary 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            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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              [mnHiddenBelow]=\"column.hiddenBelow\"\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-100 p-2 text-xs text-base-content placeholder-base-content/50 mb-2 focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer\"\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-100 p-2 text-xs text-base-content focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer mb-2\"\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                [mnHiddenBelow]=\"column.hiddenBelow\"\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 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td 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                [mnHiddenBelow]=\"column.hiddenBelow\"\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      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || '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>{{ dataSource.labels?.rowsPerPage || '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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }], 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      <mn-lib-input-field\n        [props]=\"{\n          id: 'mn-table-search',\n          type: 'search',\n          label: '',\n          placeholder: dataSource.searchPlaceholder ?? 'Search...',\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true\n        }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n  }\n  @if (dataSource.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            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-100 p-2 text-sm text-base-content focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer \"\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                [mnHiddenBelow]=\"column.hiddenBelow\"\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 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td 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                [mnHiddenBelow]=\"column.hiddenBelow\"\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      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && (totalPages > 1 || isServerPaginated)) {\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>{{ dataSource.labels?.rowsPerPage || '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 }}\n        \u2013{{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton, MnHiddenBelowDirective], 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-100 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-primary 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            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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              [mnHiddenBelow]=\"column.hiddenBelow\"\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-100 p-2 text-xs text-base-content placeholder-base-content/50 mb-2 focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer\"\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-100 p-2 text-xs text-base-content focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer mb-2\"\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                [mnHiddenBelow]=\"column.hiddenBelow\"\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 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td 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                [mnHiddenBelow]=\"column.hiddenBelow\"\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      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || '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>{{ dataSource.labels?.rowsPerPage || '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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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, MnButton, MnHiddenBelowDirective, MnInputField, FormsModule], 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      <mn-lib-input-field\n        [props]=\"{\n          id: 'mn-table-search',\n          type: 'search',\n          label: '',\n          placeholder: dataSource.searchPlaceholder ?? 'Search...',\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true\n        }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n  }\n  @if (dataSource.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            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-100 p-2 text-sm text-base-content focus:outline-none focus:border-primary w-full hover:bg-base-200 hover:cursor-pointer \"\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                [mnHiddenBelow]=\"column.hiddenBelow\"\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 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td 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                [mnHiddenBelow]=\"column.hiddenBelow\"\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      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && (totalPages > 1 || isServerPaginated)) {\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>{{ dataSource.labels?.rowsPerPage || '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 }}\n        \u2013{{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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: [{
@@ -5480,36 +5544,25 @@ class MnList {
             this.cdr.markForCheck();
         }
     }
-    ngOnInit() {
-        this.pageSize = this.dataSource.pageSize ?? 10;
-        // Pre-select items from initialSelectedIds if provided
-        if (this.dataSource.initialSelectedIds?.length) {
-            for (const id of this.dataSource.initialSelectedIds) {
-                this.selectedIds.add(id);
-            }
-            this.emitSelection();
+    get showLoadMore() {
+        const mode = this.dataSource.paginationMode ?? 'load-more';
+        // Server-side load-more: check if there are more items to load.
+        if (this.dataSource.onLoadMore) {
+            const totalItems = this.dataSource.totalItems ?? 0;
+            return mode === 'load-more' && this.filteredItems.length < totalItems;
         }
-        this.applyFilter(false);
-        this.dataSubscription = this.dataSource.dataRows.pipe(skip(1)).subscribe(() => {
-            this.applyFilter(false);
-            this.cdr.markForCheck();
-        });
-        this.searchSubscription = this.searchSubject
-            .pipe(debounceTime(300))
-            .subscribe(value => {
-            this.searchValue = value;
-            this.applyFilter(true);
-            this.cdr.markForCheck();
-        });
+        const strategy = this.dataSource.paginationStrategy;
+        const hasMore = strategy ? strategy.hasMoreRows : !!this.dataSource.loadAdditionalRows;
+        return mode === 'load-more' && hasMore;
     }
     ngOnDestroy() {
         this.dataSubscription?.unsubscribe();
         this.searchSubscription?.unsubscribe();
     }
     // ── Search ──
-    onSearch(searchString) {
-        this.currentPage = 1;
-        this.searchSubject.next(searchString);
+    get isPaginated() {
+        const mode = this.dataSource.paginationMode;
+        return mode === 'paginated' || mode === 'client-side-pagination';
     }
     // ── Selection ──
     isSelected(item) {
@@ -5556,7 +5609,62 @@ class MnList {
         this.itemClick.emit(item);
     }
     // ── Pagination ──
+    /** Whether the list is in server-side paginated mode (always true when paginated or load-more). */
+    get isServerPaginated() {
+        const mode = this.dataSource.paginationMode ?? 'load-more';
+        return mode === 'paginated' || mode === 'load-more';
+    }
+    /** Total number of items, accounting for server-side pagination. */
+    get totalItemCount() {
+        if (this.isServerPaginated && this.dataSource.totalItems != null) {
+            return this.dataSource.totalItems;
+        }
+        return this.filteredItems.length;
+    }
+    // ── Paginated Mode ──
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItemCount / this.pageSize));
+    }
+    ngOnInit() {
+        this.validateDataSource();
+        this.pageSize = this.dataSource.pageSize ?? 10;
+        // Pre-select items from initialSelectedIds if provided
+        if (this.dataSource.initialSelectedIds?.length) {
+            for (const id of this.dataSource.initialSelectedIds) {
+                this.selectedIds.add(id);
+            }
+            this.emitSelection();
+        }
+        this.applyFilter(false);
+        this.dataSubscription = this.dataSource.dataRows.pipe(skip(1)).subscribe(() => {
+            this.applyFilter(false);
+            this.cdr.markForCheck();
+        });
+        this.searchSubscription = this.searchSubject
+            .pipe(debounceTime(300))
+            .subscribe(value => {
+            this.searchValue = value;
+            this.applyFilter(true);
+            this.cdr.markForCheck();
+        });
+    }
+    onSearch(searchString) {
+        this.currentPage = 1;
+        if (this.isServerPaginated) {
+            this.searchValue = searchString;
+            this.dataSource.onServerSearch?.(searchString);
+            this.cdr.markForCheck();
+        }
+        else {
+            this.searchSubject.next(searchString);
+        }
+    }
     loadMoreRows() {
+        // Server-side infinite scroll: delegate to consumer callback.
+        if (this.dataSource.onLoadMore) {
+            this.dataSource.onLoadMore();
+            return;
+        }
         if (!this.dataSource.loadAdditionalRows || this.loadingMoreRows)
             return;
         this.loadingMoreRows = true;
@@ -5567,19 +5675,6 @@ class MnList {
             .then(rows => this.processLoadedRows(rows))
             .catch(() => this.loadingMoreRows = false);
     }
-    get showLoadMore() {
-        const mode = this.dataSource.paginationMode ?? 'load-more';
-        const strategy = this.dataSource.paginationStrategy;
-        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];
     }
@@ -5587,13 +5682,23 @@ class MnList {
         if (page < 1 || page > this.totalPages)
             return;
         this.currentPage = page;
-        this.applyPagination();
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
+            this.applyPagination();
+        }
+        else {
+            this.dataSource.onPageChange?.(page);
+        }
         this.cdr.markForCheck();
     }
     onPageSizeChange(newSize) {
         this.pageSize = newSize;
         this.currentPage = 1;
-        this.applyPagination();
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
+            this.applyPagination();
+        }
+        else {
+            this.dataSource.onPageSizeChange?.(newSize);
+        }
         this.cdr.markForCheck();
     }
     get visiblePages() {
@@ -5621,21 +5726,19 @@ class MnList {
     }
     // ── Private ──
     applyPagination() {
-        if (this.isPaginated) {
-            if (this.currentPage > this.totalPages) {
-                this.currentPage = this.totalPages;
-            }
+        if (this.dataSource.paginationMode === 'client-side-pagination') {
             const start = (this.currentPage - 1) * this.pageSize;
             this.paginatedItems = this.filteredItems.slice(start, start + this.pageSize);
         }
         else {
+            // Server always provides the correct page/slice — no client-side slicing.
             this.paginatedItems = this.filteredItems;
         }
     }
     applyFilter(searchForItems) {
         let items = this.dataSource.dataRows.value;
-        // Global search filter
-        if (this.dataSource.isInSearch && this.dataSource.canSearch && this.searchValue.length > 0) {
+        // Skip client-side search filtering when server handles it.
+        if (!this.isServerPaginated && this.dataSource.isInSearch && this.dataSource.canSearch && this.searchValue.length > 0) {
             const term = this.searchValue.toLowerCase();
             items = items.filter(row => this.dataSource.isInSearch(row, term));
         }
@@ -5651,17 +5754,33 @@ class MnList {
         this.loadingMoreRows = false;
         this.applyFilter(false);
     }
+    validateDataSource() {
+        const mode = this.dataSource.paginationMode;
+        if (mode === 'paginated') {
+            if (!this.dataSource.onPageChange) {
+                throw new Error(`[MnList] paginationMode is 'paginated' but 'onPageChange' callback is missing. Server-side pagination requires 'onPageChange'.`);
+            }
+            if (this.dataSource.totalItems == null) {
+                throw new Error(`[MnList] paginationMode is 'paginated' but 'totalItems' is missing. Server-side pagination requires 'totalItems'.`);
+            }
+        }
+        if (mode === 'load-more' || mode === 'infinite-scroll') {
+            if (!this.dataSource.onLoadMore && !this.dataSource.loadAdditionalRows && !this.dataSource.paginationStrategy) {
+                throw new Error(`[MnList] paginationMode is '${mode}' but no load-more mechanism is provided. Provide 'onLoadMore', 'loadAdditionalRows', or 'paginationStrategy'.`);
+            }
+        }
+    }
     emitSelection() {
         const rows = this.dataSource.dataRows.value.filter(r => this.selectedIds.has(this.dataSource.getID(r)));
         this.dataSource.selectedRows?.next(rows);
         this.selectionChange.emit(rows);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnList, isStandalone: true, selector: "mn-list", inputs: { dataSource: "dataSource" }, outputs: { selectionChange: "selectionChange", itemClick: "itemClick" }, 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 list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\n    @for (_ of skeletonRows; track $index) {\n      <div class=\"animate-pulse px-4 py-3\" [class.py-2]=\"dataSource.appearance?.compact\" role=\"listitem\">\n        <div class=\"h-4 w-3/4 rounded bg-base-300 mb-1\"></div>\n        <div class=\"h-3 w-1/2 rounded bg-base-300\"></div>\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\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      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            class=\"checkbox checkbox-sm checkbox-primary\"\n            [checked]=\"allSelected\"\n            (change)=\"toggleAll()\"\n            aria-label=\"Select all items\"\n          />\n          <span class=\"text-xs text-base-content/70\">Select all</span>\n        </label>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (click)=\"onItemClick(item)\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <div class=\"flex-shrink-0\">\n            <label>\n              <input\n                type=\"checkbox\"\n                class=\"checkbox checkbox-sm checkbox-primary\"\n                [checked]=\"isSelected(item)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleItem(item)\"\n              />\n            </label>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || '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>{{ dataSource.labels?.rowsPerPage || 'Items 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=\"Items 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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnList, isStandalone: true, selector: "mn-list", inputs: { dataSource: "dataSource" }, outputs: { selectionChange: "selectionChange", itemClick: "itemClick" }, 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 list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\n    @for (_ of skeletonRows; track $index) {\n      <div class=\"animate-pulse px-4 py-3\" [class.py-2]=\"dataSource.appearance?.compact\" role=\"listitem\">\n        <div class=\"h-4 w-3/4 rounded bg-base-300 mb-1\"></div>\n        <div class=\"h-3 w-1/2 rounded bg-base-300\"></div>\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\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      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            class=\"checkbox checkbox-sm checkbox-primary\"\n            [checked]=\"allSelected\"\n            (change)=\"toggleAll()\"\n            aria-label=\"Select all items\"\n          />\n          <span class=\"text-xs text-base-content/70\">Select all</span>\n        </label>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (click)=\"onItemClick(item)\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <div class=\"shrink-0\">\n            <label>\n              <input\n                type=\"checkbox\"\n                class=\"checkbox checkbox-sm checkbox-primary\"\n                [checked]=\"isSelected(item)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleItem(item)\"\n              />\n            </label>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && (totalPages > 1 || isServerPaginated)) {\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>{{ dataSource.labels?.rowsPerPage || 'Items 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=\"Items 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 }}\n        \u2013{{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnList, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-list', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton], 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 list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\n    @for (_ of skeletonRows; track $index) {\n      <div class=\"animate-pulse px-4 py-3\" [class.py-2]=\"dataSource.appearance?.compact\" role=\"listitem\">\n        <div class=\"h-4 w-3/4 rounded bg-base-300 mb-1\"></div>\n        <div class=\"h-3 w-1/2 rounded bg-base-300\"></div>\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\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      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            class=\"checkbox checkbox-sm checkbox-primary\"\n            [checked]=\"allSelected\"\n            (change)=\"toggleAll()\"\n            aria-label=\"Select all items\"\n          />\n          <span class=\"text-xs text-base-content/70\">Select all</span>\n        </label>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (click)=\"onItemClick(item)\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <div class=\"flex-shrink-0\">\n            <label>\n              <input\n                type=\"checkbox\"\n                class=\"checkbox checkbox-sm checkbox-primary\"\n                [checked]=\"isSelected(item)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleItem(item)\"\n              />\n            </label>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || '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>{{ dataSource.labels?.rowsPerPage || 'Items 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=\"Items 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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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-list', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton], 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 list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\n    @for (_ of skeletonRows; track $index) {\n      <div class=\"animate-pulse px-4 py-3\" [class.py-2]=\"dataSource.appearance?.compact\" role=\"listitem\">\n        <div class=\"h-4 w-3/4 rounded bg-base-300 mb-1\"></div>\n        <div class=\"h-3 w-1/2 rounded bg-base-300\"></div>\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\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      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            class=\"checkbox checkbox-sm checkbox-primary\"\n            [checked]=\"allSelected\"\n            (change)=\"toggleAll()\"\n            aria-label=\"Select all items\"\n          />\n          <span class=\"text-xs text-base-content/70\">Select all</span>\n        </label>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (click)=\"onItemClick(item)\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <div class=\"shrink-0\">\n            <label>\n              <input\n                type=\"checkbox\"\n                class=\"checkbox checkbox-sm checkbox-primary\"\n                [checked]=\"isSelected(item)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleItem(item)\"\n              />\n            </label>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\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      {{ dataSource.labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (isPaginated && (totalPages > 1 || isServerPaginated)) {\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>{{ dataSource.labels?.rowsPerPage || 'Items 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=\"Items 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 }}\n        \u2013{{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToPage(1)\"\n        aria-label=\"First page\"\n      >\u00AB</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          [class.border-secondary]=\"page === currentPage\"\n          [class.text-accent]=\"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        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        [disabled]=\"currentPage === totalPages\"\n        (click)=\"goToPage(currentPage + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n\n      <button\n        mnButton\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\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
             }], selectionChange: [{